Merge "Add mw-interlanguage-selector class to language button & hide menu/arrow when appropriate"

includes/SkinVector.php

@@ -231,12 +231,18 @@ class SkinVector extends SkinMustache {
 			self::MENU_TYPE_PORTAL => 'vector-menu vector-menu-portal portal',
 			self::MENU_TYPE_DEFAULT => 'vector-menu',
 		];
+		$portletData['heading-class'] = 'vector-menu-heading';
+
 		if ( $portletData['id'] === 'p-lang' && $this->isLanguagesInHeader() ) {
 			$portletData['label'] = $this->msg(
 				'vector-language-button-label',
 				count( $this->getLanguages() )
 			)->parse();
-			$portletData['icon'] = 'language';
+			// Adds language icon
+			$portletData['heading-class'] .= ' mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-language';
+			// Adds .mw-interlanguage-selector (ext.uls.interface attaches click
+			// handler to this selector).
+			$portletData['heading-class'] .= ' mw-interlanguage-selector';
 			$portletData['id'] = 'p-lang-btn';
 		}
 		$class = $portletData['class'];

includes/templates/Menu.mustache

@@ -8,7 +8,7 @@
 	{{#is-dropdown}}
 	<input type="checkbox" class="vector-menu-checkbox" aria-labelledby="{{id}}-label" />
 	{{/is-dropdown}}
-	<h3 id="{{id}}-label" {{#icon}}class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-{{.}}"{{/icon}}>
+	<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}}>
 		<span>{{label}}</span>
 	</h3>
 	<div class="vector-menu-content">

resources/skins.vector.js/skin.js

@@ -40,11 +40,34 @@ function enableCssAnimations( document ) {
  * @return {void}
  */
 function main( window ) {
+	var
+		ulsModuleStatus = mw.loader.getState( 'ext.uls.interface' ),
+		pLangBtnLabel;
+
 	enableCssAnimations( window.document );
 	collapsibleTabs.init();
 	sidebar.init( window );
 	$( vector.init );
 	initSearchLoader( document );
+	if ( ulsModuleStatus && ulsModuleStatus !== 'registered' ) {
+		mw.loader.using( 'ext.uls.interface' ).then( function () {
+			var pLangBtn = document.getElementById( 'p-lang-btn' );
+			if ( !pLangBtn ) {
+				return;
+			}
+
+			pLangBtn.classList.add( 'vector-menu--hide-dropdown' );
+		} );
+	} else {
+		pLangBtnLabel = document.getElementById( 'p-lang-btn-label' );
+		if ( !pLangBtnLabel ) {
+			return;
+		}
+
+		// Remove .mw-interlanguage-selector to show the dropdown arrow since evidently
+		// ULS is not used.
+		pLangBtnLabel.classList.remove( 'mw-interlanguage-selector' );
+	}
 }
 
 main( window );

resources/skins.vector.styles/LanguageButton.less

@@ -5,7 +5,7 @@
 .mw-body-header .mw-portlet-lang {
 	.mw-ui-button-states();
 
-	h3 {
+	.vector-menu-heading {
 		// In future this should use wvui
 		.mw-ui-button();
 		padding-right: 40px;
@@ -30,3 +30,29 @@
 		margin-top: 8px;
 	}
 }
+
+// mw-body-header class can be removed when language button is the default.
+// e.g. upon removal of SkinVector::isLanguagesInHeader
+.client-js .mw-body-header {
+	// The `.mw-interlanguage-selector` is toggled off through js if the
+	// `ext.uls.interface` module is not being loaded.
+	.mw-interlanguage-selector {
+		// Remove the ULS language icon provided by ext.uls.compactlinks.less as we
+		// are already providing no-js users an icon.
+		background-image: none;
+
+		&:after {
+			// Don't show dropdown arrow.
+			content: none;
+		}
+	}
+
+	// When the ext.uls.interface module is loaded, we hide the fallback menu and
+	// checkbox.
+	.vector-menu--hide-dropdown {
+		.vector-menu-checkbox,
+		.vector-menu-content {
+			display: none;
+		}
+	}
+}

tests/phpunit/integration/SkinVectorTest.php

@@ -89,6 +89,7 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
 				'html-items' => '',
 				'html-after-portal' => '',
 				'label' => $context->msg( 'views' )->text(),
+				'heading-class' => 'vector-menu-heading',
 				'is-dropdown' => false,
 			],
 			$views