Add language icon to language button

The sidebar currently uses mw-ui-icon so we continue this
practice, however we provide a general rule to ensure all icons
rendered through it default to 20x20. This didn't impact the side
bar icon as that already specifies a height of 20px.

Bug: T268241
Change-Id: I6f8e8400da048a97cbf59c3e6ad918763fc91041

includes/SkinVector.php

@@ -236,6 +236,7 @@ class SkinVector extends SkinMustache {
 				'vector-language-button-label',
 				count( $this->getLanguages() )
 			)->parse();
+			$portletData['icon'] = 'language';
 		}
 		$class = $portletData['class'];
 		$portletData['class'] = trim( "$class $extraClasses[$type]" );

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">
+	<h3 id="{{id}}-label" {{#icon}}class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-{{.}}"{{/icon}}>
 		<span>{{label}}</span>
 	</h3>
 	<div class="vector-menu-content">

resources/skins.vector.styles/LanguageButton.less

@@ -0,0 +1,19 @@
+@import 'mediawiki.ui/mixins.buttons.less';
+
+// mw-body-header class can be removed when language button is the default.
+// e.g. upon removal of SkinVector::isLanguagesInHeader
+.mw-body-header .mw-portlet-lang {
+	h3 {
+		padding-right: 40px;
+	}
+
+	.vector-menu-content {
+		top: auto;
+		right: 0;
+		box-sizing: border-box;
+	}
+
+	.after-portlet {
+		margin-top: 8px;
+	}
+}

resources/skins.vector.styles/skin.less

@@ -18,6 +18,7 @@
 	@import 'TabWatchstarLink.less';
 	@import 'MenuDropdown.less';
 	@import 'MenuPortal.less';
+	@import 'LanguageButton.less';
 	@import 'Sidebar.less';
 	@import 'SidebarLogo.less';
 	@import 'Footer.less';

skin.json

@@ -26,6 +26,7 @@
 					],
 					"styles": [
 						"skins.vector.styles",
+						"skins.vector.icons",
 						"mediawiki.ui.icon"
 					],
 					"messages": [
@@ -114,6 +115,17 @@
 			],
 			"styles": [ "resources/skins.vector.styles.responsive.less" ]
 		},
+		"skins.vector.icons": {
+			"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
+			"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before",
+			"useDataURI": false,
+			"defaultColor": "#54595d",
+			"class": "ResourceLoaderOOUIIconPackModule",
+			"variants": [],
+			"icons": [
+				"language"
+			]
+		},
 		"skins.vector.js": {
 			"packageFiles": [
 				"resources/skins.vector.js/skin.js",
@@ -171,7 +183,8 @@
 			"+mediawiki.notification": "skinStyles/mediawiki.notification.less",
 			"+oojs-ui-core.styles": "skinStyles/ooui.less",
 			"mediawiki.special": "skinStyles/mediawiki.special.less",
-			"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less"
+			"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less",
+			"+mediawiki.ui.icon": "skinStyles/mediawiki.ui.icon.less"
 		}
 	},
 	"config": {

skinStyles/mediawiki.ui.icon.less

@@ -0,0 +1,6 @@
+// The .mw-page-container class is used to restrict this to the modern Vector.
+// This element is not needed in legacy Vector.
+.mw-page-container .mw-ui-icon:before {
+	// mw-ui-icon in core defaults to 24x24. The style guide now requests 20x20.
+	background-size: 20px auto;
+}