Add language switching alert in sidebar for language in header

- Add i18n messages.
- Update relevant data methods in Vector.
- Update sidebar template + styles.
- Add new template partial for sidebar actions.
- Add feature flag to turn on/off alert.

Bug: T295555
Change-Id: I232ce13770917d51495391f4b8d8d1a3a8a7afb8

i18n/en.json

@@ -11,8 +11,10 @@
 	"vector.css": "/* All CSS here will be loaded for users of the Vector skin */",
 	"vector.js": "/* All JavaScript here will be loaded for users of the Vector skin */",
 	"vector-action-toggle-sidebar": "Toggle sidebar",
+	"vector-languages": "Languages",
 	"vector-language-button-aria-label": "Go to an article in another language. Available in {{PLURAL:$1|$1 language|$1 languages}}",
 	"vector-language-button-label": "{{PLURAL:$1|$1 language|$1 languages}}",
+	"vector-language-redirect-to-top": "On this Wikipedia the language links are at the top of the page across from the article title. [[#p-lang-btn|Go to top]].",
 	"vector-language-variant-switcher-label": "Change language variant",
 	"vector-action-addsection": "Add topic",
 	"vector-action-delete": "Delete",

i18n/qqq.json

@@ -23,8 +23,10 @@
 	"vector.css": "{{optional}}",
 	"vector.js": "{{optional}}",
 	"vector-action-toggle-sidebar": "Accessibility label for the button that toggles the sidebar's visibility, as well as audible presentation for screen readers.",
+	"vector-languages": "Label for language alert in sidebar when language switching is in header",
 	"vector-language-button-aria-label": "Accessibility label for language button dropdown menu in modern Vector.\n* $1 - the count of languages available, supports plural",
 	"vector-language-button-label": "Label for language button in modern Vector.\n\nArguments:\n* $1 number of languages, supports plural",
+	"vector-language-redirect-to-top": "Explains language links location at top of page and provides link to top",
 	"vector-language-variant-switcher-label": "Label for the language variant switcher.",
 	"vector-action-addsection": "Used in the Vector skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}",
 	"vector-action-delete": "Used in the Vector skin, as the name of a tab at the top of the page. See for example {{canonicalurl:Translating:MediaWiki|useskin=vector}}\n\n{{Identical|Delete}}",

includes/Constants.php

@@ -276,6 +276,26 @@ final class Constants {
 	 */
 	public const FEATURE_LANGUAGE_IN_MAIN_PAGE_HEADER = 'LanguageInMainPageHeader';
 
+	/**
+	 * @var string
+	 */
+	public const REQUIREMENT_LANGUAGE_ALERT_IN_SIDEBAR = 'LanguageAlertInSidebar';
+
+	/**
+	 * @var string
+	 */
+	public const CONFIG_LANGUAGE_ALERT_IN_SIDEBAR = 'VectorLanguageAlertInSidebar';
+
+	/**
+	 * @var string
+	 */
+	public const QUERY_PARAM_LANGUAGE_ALERT_IN_SIDEBAR = 'languagealertinsidebar';
+
+	/**
+	 * @var string
+	 */
+	public const FEATURE_LANGUAGE_ALERT_IN_SIDEBAR = 'LanguageAlertInSidebar';
+
 	/**
 	 * This class is for namespacing constants only. Forbid construction.
 	 * @throws FatalError

includes/ServiceWiring.php

@@ -166,6 +166,31 @@ return [
 			]
 		);
 
+		// Feature: T295555: Language switch alert in sidebar
+		// ================================
+		$featureManager->registerRequirement(
+			new OverridableConfigRequirement(
+				$services->getMainConfig(),
+				$context->getUser(),
+				$context->getRequest(),
+				null,
+				Constants::CONFIG_LANGUAGE_ALERT_IN_SIDEBAR,
+				Constants::REQUIREMENT_LANGUAGE_ALERT_IN_SIDEBAR,
+				Constants::QUERY_PARAM_LANGUAGE_ALERT_IN_SIDEBAR,
+				null
+			)
+		);
+
+		$featureManager->registerFeature(
+			Constants::FEATURE_LANGUAGE_ALERT_IN_SIDEBAR,
+			[
+				Constants::REQUIREMENT_FULLY_INITIALISED,
+				Constants::REQUIREMENT_LATEST_SKIN_VERSION,
+				Constants::REQUIREMENT_LANGUAGE_IN_HEADER,
+				Constants::REQUIREMENT_LANGUAGE_ALERT_IN_SIDEBAR
+			]
+		);
+
 		// Feature: Use Wvui Search
 		// ================================
 		$featureManager->registerRequirement(

includes/SkinVector.php

@@ -430,6 +430,40 @@ class SkinVector extends SkinMustache {
 		];
 	}
 
+	/**
+	 * Generate data needed to create SidebarAction item.
+	 * @param array $htmlData data to make a link or raw html
+	 * @param array $headingOptions optional heading for the html
+	 * @return array keyed data for the SidebarAction template
+	 */
+	private function makeSidebarActionData( array $htmlData = [], array $headingOptions = [] ): array {
+		$htmlContent = '';
+		// Populates the sidebar as a standalone link or custom html.
+		if ( array_key_exists( 'link', $htmlData ) ) {
+			$htmlContent = $this->makeLink( 'link', $htmlData['link'] );
+		} elseif ( array_key_exists( 'html-content', $htmlData ) ) {
+			$htmlContent = $htmlData['html-content'];
+		}
+
+		$htmlClasses = array_key_exists( 'html-class', $htmlData )
+			? [ 'html-class' => $htmlData['html-class'] ]
+			: [];
+
+		return $headingOptions + $htmlClasses + [
+			'html-content' => $htmlContent,
+		];
+	}
+
+	/**
+	 * Determines if the language switching alert box should be in the sidebar.
+	 *
+	 * @return bool
+	 */
+	private function shouldLanguageAlertBeInSidebar(): bool {
+		$featureManager = VectorServices::getFeatureManager();
+		return $featureManager->isFeatureEnabled( Constants::FEATURE_LANGUAGE_ALERT_IN_SIDEBAR );
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -492,13 +526,24 @@ class SkinVector extends SkinMustache {
 
 		if ( $skin->getUser()->isRegistered() ) {
 			// Note: This data is also passed to legacy template where it is unused.
-			$commonSkinData['data-emphasized-sidebar-action'] = [
+			$optOutUrl = [
+				'text' => $this->msg( 'vector-opt-out' )->text(),
 				'href' => SpecialPage::getTitleFor(
 					'Preferences',
 					false,
 					'mw-prefsection-rendering-skin-skin-prefs'
 				)->getLinkURL( 'wprov=' . self::OPT_OUT_LINK_TRACKING_CODE ),
+				'title' => $this->msg( 'vector-opt-out-tooltip' )->text(),
+				'active' => false,
 			];
+			$htmlData = [
+				'link' => $optOutUrl,
+				'html-class' => [ 'link-only' ],
+			];
+			$commonSkinData['data-emphasized-sidebar-action'][] = $this->makeSidebarActionData(
+				$htmlData,
+				[]
+			);
 		}
 
 		if ( !$this->isLegacy() ) {
@@ -507,6 +552,21 @@ class SkinVector extends SkinMustache {
 				$commonSkinData['is-anon'],
 				$commonSkinData['data-search-box']
 			);
+
+			// T295555 Add language switch alert message temporarily (to be removed).
+			if ( $this->shouldLanguageAlertBeInSidebar() && !$parentData['is-mainpage'] ) {
+				$languageSwitchAlert = [
+					'html-content' => $this->msg( 'vector-language-redirect-to-top' )->parse(),
+					'html-class' => [ 'messagebox' ],
+				];
+				$headingOptions = [
+					'heading' => $this->msg( 'vector-languages' )->plain(),
+				];
+				$commonSkinData['data-vector-language-switch-alert'][] = $this->makeSidebarActionData(
+					$languageSwitchAlert,
+					$headingOptions
+				);
+			}
 		}
 
 		return $commonSkinData;

includes/templates/Sidebar.mustache

@@ -11,14 +11,11 @@
 
 <div id="mw-panel" class="mw-sidebar">
 	{{#data-portlets-first}}{{>Menu}}{{/data-portlets-first}}
-	{{#data-emphasized-sidebar-action}}
-	<div class="mw-sidebar-action">
-		<a class="mw-sidebar-action-link" title="{{msg-vector-opt-out-tooltip}}"
-			href="{{href}}">{{msg-vector-opt-out}}</a>
-	</div>
-	{{/data-emphasized-sidebar-action}}
+	{{#data-emphasized-sidebar-action}}{{>SidebarAction}}{{/data-emphasized-sidebar-action}}
 	{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
 	{{^is-language-in-content}}
 	{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
 	{{/is-language-in-content}}
+	{{! T295555 Add language switch alert message temporarily (to be removed). }}
+	{{#data-vector-language-switch-alert}}{{>SidebarAction}}{{/data-vector-language-switch-alert}}
 </div>

includes/templates/SidebarAction.mustache

@@ -0,0 +1,9 @@
+{{! `heading` is optional. }}
+<div class="mw-sidebar-action">
+	<div class="mw-sidebar-action-item">
+		{{#heading}}<h3 class="mw-sidebar-action-heading">{{.}}</h3>{{/heading}}
+		<div class="mw-sidebar-action-content{{#html-class}} {{.}}{{/html-class}}">
+		{{{html-content}}}
+		</div>
+	</div>
+</div>

resources/skins.vector.styles/components/Sidebar.less

@@ -8,11 +8,36 @@
 	// Align with the portal heading/links
 	// `.portal` + `.portal .body`
 	margin: 8px @margin-end-portal 8px @margin-start-portal + @margin-start-portal-body;
-}
 
-.mw-sidebar-action-link {
-	font-size: @font-size-portal-list-item;
-	font-weight: bold;
+	// Styles for SidebarAction template.
+	.mw-sidebar-action-item {
+		h3.mw-sidebar-action-heading {
+			display: block;
+			background-image: url( ../common/images/portal-separator.png ); // Support: IE 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
+			background-image: linear-gradient( to right, @border-color-portal-heading-transparent 0, @border-color-portal-heading 33%, @border-color-portal-heading 66%, @border-color-portal-heading-transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
+			background-position: center bottom;
+			background-repeat: no-repeat;
+			background-size: 100% @border-width-base;
+			color: @color-base--subtle;
+			margin: 0.75em 0;
+			border: 0;
+			padding: 0.3em 0;
+			font-size: @font-size-nav-main-heading;
+			font-weight: normal;
+			cursor: default;
+		}
+
+		.link-only a {
+			font-size: @font-size-portal-list-item;
+			font-weight: bold;
+		}
+
+		// T295555 style overrides for temporary language switch alert (can be removed later ).
+		.messagebox {
+			padding: 0.75em;
+			font-size: @font-size-portal-list-item;
+		}
+	}
 }
 
 #mw-sidebar-button {

skin.json

@@ -365,6 +365,13 @@
 			},
 			"description": "@var When `VectorLanguageInHeader` is enabled, determines whether the Main Page's language button should be at the top or bottom of the content. The default position on the main page is at the bottom."
 		},
+		"VectorLanguageAlertInSidebar": {
+			"value": {
+				"logged_in": false,
+				"logged_out": false
+			},
+			"description": "@var When `VectorLanguageAlertInSidebar` is enabled, the language switch alert box is shown in the sidebar."
+		},
 		"VectorLanguageInHeaderTreatmentABTest": {
 			"value": false,
 			"description": "@var boolean Enables or disables the language in header treatment A/B test. See https://phabricator.wikimedia.org/T280825 and associated tasks for additional detail."