Update ULS button states to be consistent with other quiet buttons

- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed

Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556

includes/SkinVector.php

@@ -488,14 +488,14 @@ class SkinVector extends SkinMustache {
 		$languageButtonData = [
 			'id' => 'p-lang-btn',
 			'label' => $label,
+			// ext.uls.interface attaches click handler to this selector.
+			'checkbox-class' => ' mw-interlanguage-selector ',
 			'heading-class' =>
 				' vector-menu-heading ' .
 				' mw-ui-icon ' .
 				' mw-ui-icon-before ' .
 				' mw-ui-icon-wikimedia-language ' .
-				' mw-ui-button mw-ui-quiet ' .
-				// ext.uls.interface attaches click handler to this selector.
-				' mw-interlanguage-selector ',
+				' mw-ui-button mw-ui-quiet '
 			];
 
 		// Adds class to hide language button

includes/templates/Menu.mustache

@@ -6,8 +6,9 @@
 	 {{{html-user-language-attributes}}}>
 	{{#is-dropdown}}
 	<input type="checkbox"
+		id="{{id}}-checkbox"
 		data-event-name="ui.dropdown-{{id}}"
-		class="vector-menu-checkbox" aria-labelledby="{{id}}-label" />
+		class="{{#checkbox-class}}{{.}}{{/checkbox-class}} vector-menu-checkbox" aria-labelledby="{{id}}-label" />
 	{{/is-dropdown}}
 	<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}}>{{!
 		}}<span>{{label}}</span>

resources/common/components/MenuDropdown.less

@@ -153,6 +153,7 @@
 		display: block;
 	}
 
+	// Add focus state to legacy menu dropdown buttons (i.e. p-variants, p-cactions)
 	&:focus + h3 {
 		// Simulate browser focus ring
 		outline: dotted 1px; // Firefox style

resources/skins.vector.js/languageButton.js

@@ -37,8 +37,7 @@ function disableDropdownBehavior( pLangBtn ) {
  * drop down behavior of the button.
  */
 function disableLanguageDropdown() {
-	var ulsModuleStatus = mw.loader.getState( 'ext.uls.interface' ),
-		pLangBtnLabel;
+	var ulsModuleStatus = mw.loader.getState( 'ext.uls.interface' );
 
 	// If module status is defined and not registered we can assume it is in the process of loading
 	if ( ulsModuleStatus && ulsModuleStatus !== 'registered' ) {
@@ -47,15 +46,6 @@ function disableLanguageDropdown() {
 		if ( mw.config.get( 'wgULSisCompactLinksEnabled' ) ) {
 			disableDropdownBehavior( document.getElementById( 'p-lang-btn' ) );
 		}
-	} 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' );
 	}
 }
 

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

@@ -65,29 +65,11 @@
 	}
 }
 
-// Disable border-radius when dropdown menu open
-.client-nojs {
-	#p-lang-btn:hover .vector-menu-heading,
-	.vector-menu-checkbox:checked + .vector-menu-heading {
-		border-radius: 0;
-	}
-}
-
 // mw-body-header class can be removed when language button is the default.
 // e.g. upon removal of SkinVector::isLanguagesInHeader
 .client-js #p-lang-btn {
-	// 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;
-	}
-
-	// When the ext.uls.interface module is loaded, we hide the fallback menu and
-	// checkbox.
+	// 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;
 		}

skin.json

@@ -225,7 +225,6 @@
 	"ResourceModuleSkinStyles": {
 		"vector": {
 			"+ext.echo.styles.alert": "skinStyles/ext.echo.styles.alert.less",
-			"+ext.uls.compactlinks": "skinStyles/ext.uls.compactlinks.less",
 			"+ext.uls.pt": "skinStyles/ext.uls.pt.less",
 			"jquery.tipsy": "skinStyles/jquery.tipsy.less",
 			"jquery.ui": [

skinStyles/ext.uls.compactlinks.less

@@ -1,6 +0,0 @@
-.mw-body-header .mw-interlanguage-selector,
-.mw-body-header .mw-interlanguage-selector:active {
-	margin: 0;
-	// mw-ui-button quiet is bold on active.
-	font-weight: bold;
-}