Languages can be moved out of sidebar

A new config flag wgVectorLanguageInHeader is added to allow
us to render languages in sidebar or outside sidebar, in the
header.

it defaults to false to allow for further development and to
not disrupt the status quo.

To accomodate the new menu, a new header is added based on the design
in Minerva to contain the heading and language button. The language
button is floated to the right.

The new menu is not styled. That exercise is left for the follow up
task T268241

No caching implications of this change, as legacy and modern
experiences remain touched without changing the default value of the
new config flag

Bug: T260738
Change-Id: I5af1522cac3831c1c833388461fe254c03191f65

includes/Constants.php

@@ -101,11 +101,26 @@ final class Constants {
 	 */
 	public const FEATURE_LATEST_SKIN = 'LatestSkin';
 
+	/**
+	 * @var string
+	 */
+	public const FEATURE_LANGUAGE_IN_HEADER = 'LanguageInHeader';
+
 	/**
 	 * @var string
 	 */
 	public const CONFIG_KEY_DISABLE_SIDEBAR_PERSISTENCE = 'VectorDisableSidebarPersistence';
 
+	/**
+	 * @var string
+	 */
+	public const CONFIG_KEY_LANGUAGE_IN_HEADER = 'VectorLanguageInHeader';
+
+	/**
+	 * @var string
+	 */
+	public const REQUIREMENT_LANGUAGE_IN_HEADER = 'LanguageInHeader';
+
 	// These are used for query parameters.
 	/**
 	 * Override the skin version user preference and site Config. See readme.

includes/ServiceWiring.php

@@ -66,6 +66,25 @@ return [
 			]
 		);
 
+		// Feature: Languages in sidebar
+		// ================================
+		$featureManager->registerRequirement(
+			new DynamicConfigRequirement(
+				$services->getMainConfig(),
+				Constants::CONFIG_KEY_LANGUAGE_IN_HEADER,
+				Constants::REQUIREMENT_LANGUAGE_IN_HEADER
+			)
+		);
+
+		$featureManager->registerFeature(
+			Constants::FEATURE_LANGUAGE_IN_HEADER,
+			[
+				Constants::REQUIREMENT_FULLY_INITIALISED,
+				Constants::REQUIREMENT_LATEST_SKIN_VERSION,
+				Constants::REQUIREMENT_LANGUAGE_IN_HEADER,
+			]
+		);
+
 		return $featureManager;
 	}
 ];

includes/SkinVector.php

@@ -88,6 +88,16 @@ class SkinVector extends SkinMustache {
 		parent::__construct( $options );
 	}
 
+	/**
+	 * @return bool
+	 */
+	private function isLanguagesInHeader() {
+		$featureManager = VectorServices::getFeatureManager();
+		return $featureManager->isFeatureEnabled(
+			Constants::FEATURE_LANGUAGE_IN_HEADER
+		);
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -97,8 +107,6 @@ class SkinVector extends SkinMustache {
 		$out = $skin->getOutput();
 		$title = $out->getTitle();
 
-		$featureManager = VectorServices::getFeatureManager();
-
 		// Naming conventions for Mustache parameters.
 		//
 		// Value type (first segment):
@@ -130,6 +138,7 @@ class SkinVector extends SkinMustache {
 			'input-location' => $this->getSearchBoxInputLocation(),
 
 			'sidebar-visible' => $this->isSidebarVisible(),
+			'is-language-in-header' => $this->isLanguagesInHeader(),
 		] );
 
 		if ( $skin->getUser()->isRegistered() ) {
@@ -228,6 +237,10 @@ class SkinVector extends SkinMustache {
 			case 'personal':
 				$type = self::MENU_TYPE_DEFAULT;
 				break;
+			case 'lang':
+				$type = $this->isLanguagesInHeader() ?
+					self::MENU_TYPE_DROPDOWN : self::MENU_TYPE_PORTAL;
+				break;
 			default:
 				$type = self::MENU_TYPE_PORTAL;
 				break;

includes/templates/Sidebar.mustache

@@ -18,5 +18,7 @@
 	</div>
 	{{/data-emphasized-sidebar-action}}
 	{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
+	{{^is-language-in-header}}
 	{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
+	{{/is-language-in-header}}
 </div>

includes/templates/skin.mustache

@@ -52,7 +52,15 @@
 	<a id="top"></a>
 	<div id="siteNotice" class="mw-body-content">{{{html-site-notice}}}</div>
 	{{>Indicators}}
+	{{^is-language-in-header}}
 	<h1 id="firstHeading" class="firstHeading" {{{html-user-language-attributes}}}>{{{html-title}}}</h1>
+	{{/is-language-in-header}}
+	{{#is-language-in-header}}
+	<header>
+		<h1 id="firstHeading" class="firstHeading" {{{html-user-language-attributes}}}>{{{html-title}}}</h1>
+		{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
+	</header>
+	{{/is-language-in-header}}
 	<div id="bodyContent" class="mw-body-content">
 		{{#page-isarticle}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/page-isarticle}}
 		<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>

resources/skins.vector.styles/layout-default.less

@@ -317,3 +317,19 @@ body {
 		}
 	}
 }
+
+main.mw-body {
+	header {
+		border-bottom: 1px solid @border-color-base;
+		.mixin-clearfix();
+
+		h1 {
+			border-bottom: 0;
+			float: left;
+		}
+	}
+
+	#p-lang {
+		float: right;
+	}
+}

skin.json

@@ -29,6 +29,7 @@
 						"mediawiki.ui.icon"
 					],
 					"messages": [
+						"otherlanguages",
 						"tooltip-p-logo",
 						"vector-opt-out-tooltip",
 						"vector-opt-out",
@@ -215,6 +216,9 @@
 		"VectorDefaultSidebarVisibleForAnonymousUser": {
 			"value": false
 		},
+		"VectorLanguageInHeader": {
+			"value": false
+		},
 		"VectorDisableSidebarPersistence": {
 			"value": false,
 			"description": "@var boolean Temporary feature flag that disables saving the sidebar expanded/collapsed state as a user-preference (triggered via clicking the main menu icon). This is intended as a temporary kill-switch in the event that the DB is overloaded with writes to the user_options table."