Update ULS settings UI style to mediawiki.ui style

The ext.uls.buttons style can be removed but Translate extension use that.
Once it is separated we can remove it from ULS.

Testplan:
Use ULS settings and notice the style difference of buttons, checkboxes
and radio buttons. No functionality should be affected and UI should not
be broken in any ways.

This was once attempted in Id186ece6513f154e0388bc4170c21bdabb59038a
but we had to revert because of incompleteness

Bug: T52599
Bug: T127020
Change-Id: Ibbb2068b5036537f298fad6c49169a5b986304d5

extension.json

@@ -116,7 +116,9 @@
 				"ext.uls.mediawiki",
 				"ext.uls.webfonts",
 				"mediawiki.api.parse",
-				"mediawiki.Uri"
+				"mediawiki.Uri",
+				"mediawiki.ui.checkbox",
+				"mediawiki.ui.button"
 			],
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
@@ -181,7 +183,9 @@
 				"ext.uls.ime",
 				"ext.uls.languagesettings",
 				"ext.uls.mediawiki",
-				"jquery.ime"
+				"jquery.ime",
+				"mediawiki.ui.button",
+				"mediawiki.ui.radio"
 			],
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
@@ -211,7 +215,8 @@
 				"ext.uls.buttons",
 				"ext.uls.messages",
 				"ext.uls.preferences",
-				"jquery.uls.grid"
+				"jquery.uls.grid",
+				"mediawiki.ui.button"
 			],
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"

resources/css/ext.uls.css

@@ -23,9 +23,12 @@
 }
 
 .uls-ui-languages button {
-	width: 23%;
+	width: 22%;
 	text-overflow: ellipsis;
-	margin-right: 4%;
+	margin-right: 2%;
+	white-space: nowrap;
+	overflow: hidden;
+	padding: 0.5em 0;
 }
 
 button.uls-more-languages {

resources/css/ext.uls.displaysettings.less

@@ -21,24 +21,6 @@ div.display-settings-block {
 	z-index: 1;
 }
 
-.uls-button-group > button.button {
-	border-radius: 0;
-	float: left;
-	padding: 8px 10px;
-	min-width: 80px;
-	margin: 0;
-}
-
-.uls-button-group > button.button:first-child {
-	border-top-left-radius: 3px;
-	border-bottom-left-radius: 3px;
-}
-
-.uls-button-group > button.button:last-child {
-	border-top-right-radius: 3px;
-	border-bottom-right-radius: 3px;
-}
-
 .ext-uls-sub-panel {
 	border-top: 1px solid #EEEEEE;
 	padding-top: 25px;
@@ -64,10 +46,6 @@ div.display-settings-block {
 	font-size: 10pt;
 }
 
-.uls-font-select {
-	min-height: 16pt;
-}
-
 .uls-content-fonts:hover,
 .uls-ui-fonts:hover {
 	background-color: #F6F6F6;

resources/css/ext.uls.languagesettings.css

@@ -120,6 +120,11 @@
 	font-size: 10pt;
 }
 
+/* mediawiki.ui does not have a pressed state style. */
+#languagesettings-panels .mw-ui-pressed {
+	background-color: #D8D8D8;
+}
+
 .checkbox input[type="checkbox"] {
 	margin-left: 0;
 }

resources/js/ext.uls.displaysettings.js

@@ -24,9 +24,10 @@
 
 		+ '<div class="row">' // Tab switcher buttons
 		+ '<div class="twelve columns uls-display-settings-tab-switcher">'
-		+ '<div class="uls-button-group">'
+		+ '<div class="uls-button-group mw-ui-button-group">'
-		+ '<button id="uls-display-settings-language-tab" class="button down" data-i18n="ext-uls-display-settings-language-tab"></button>'
+		+ '<button id="uls-display-settings-language-tab" class="mw-ui-button mw-ui-pressed" '
-		+ '<button id="uls-display-settings-fonts-tab" class="button" data-i18n="ext-uls-display-settings-fonts-tab"></button>'
+		+ 'data-i18n="ext-uls-display-settings-language-tab"></button>'
+		+ '<button id="uls-display-settings-fonts-tab" class="mw-ui-button" data-i18n="ext-uls-display-settings-fonts-tab"></button>'
 		+ '</div>'
 		+ '</div>'
 		+ '</div>'
@@ -81,14 +82,16 @@
 		// Webfonts enabling checkbox with label
 		+ '<div class="row">'
 		+ '<div class="eleven columns">'
-		+ '<label class="checkbox">'
+		+ '<div class="mw-ui-checkbox">'
 		+ '<input type="checkbox" id="webfonts-enable-checkbox" />'
+		+ '<label class="checkbox" for="webfonts-enable-checkbox" >'
 		+ '<strong data-i18n="ext-uls-webfonts-settings-title"></strong> '
 		+ '<span data-i18n="ext-uls-webfonts-settings-info"></span> '
 		+ '<a target="_blank" href="https://www.mediawiki.org/wiki/Universal_Language_Selector/WebFonts" data-i18n="ext-uls-webfonts-settings-info-link"></a>'
 		+ '</label>'
 		+ '</div>'
 		+ '</div>'
+		+ '</div>'
 
 		+ '</div>'; // End font settings section
 
@@ -243,8 +246,8 @@
 				return function () {
 					displaySettings.markDirty();
 					displaySettings.uiLanguage = button.data( 'language' ) || displaySettings.uiLanguage;
-					$( 'div.uls-ui-languages button.button' ).removeClass( 'down' );
+					$( 'div.uls-ui-languages button.mw-ui-button' ).removeClass( 'mw-ui-pressed' );
-					button.addClass( 'down' );
+					button.addClass( 'mw-ui-pressed' );
 					displaySettings.prepareUIFonts();
 					displaySettings.preview( displaySettings.uiLanguage );
 				};
@@ -254,7 +257,7 @@
 			for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
 				language = languagesForButtons[ i ];
 				$button = $( '<button>' )
-					.addClass( 'button uls-language-button autonym' )
+					.addClass( 'mw-ui-button uls-language-button autonym' )
 					.text( $.uls.data.getAutonym( language ) )
 					.prop( {
 						lang: language,
@@ -262,7 +265,7 @@
 					} );
 
 				if ( language === this.uiLanguage ) {
-					$button.addClass( 'down' );
+					$button.addClass( 'mw-ui-pressed' );
 				}
 
 				$button.data( 'language', language );
@@ -283,7 +286,7 @@
 			$languages = this.$template.find( 'div.uls-ui-languages' );
 			$moreLanguagesButton = $( '<button>' )
 				.prop( 'class', 'uls-more-languages' )
-				.addClass( 'button' ).text( '...' );
+				.addClass( 'mw-ui-button' ).text( '...' );
 
 			$languages.append( $moreLanguagesButton );
 			// Show the long language list to select a language for display settings
@@ -581,7 +584,7 @@
 			$tabButtons.on( 'click', function () {
 				var $button = $( this );
 
-				if ( $button.hasClass( 'down' ) ) {
+				if ( $button.hasClass( 'mw-ui-pressed' ) ) {
 					return;
 				}
 
@@ -596,8 +599,8 @@
 				} );
 
 				displaySettings.$parent.position();
-				$tabButtons.filter( '.down' ).removeClass( 'down' );
+				$tabButtons.removeClass( 'mw-ui-pressed' );
-				$button.addClass( 'down' );
+				$button.addClass( 'mw-ui-pressed' );
 
 			} );
 

resources/js/ext.uls.inputsettings.js

@@ -49,9 +49,9 @@
 
 		// Disable IME system button
 		+ '<div class="row">'
-		+ '<div class="eleven columns button uls-input-settings-disable-info"></div>'
+		+ '<div class="eleven columns uls-input-settings-disable-info"></div>'
-		+ '<div class="six columns button uls-input-settings-toggle">'
+		+ '<div class="ten columns uls-input-settings-toggle">'
-		+ '<button class="active green button uls-input-toggle-button"></button>'
+		+ '<button class="active mw-ui-constructive mw-ui-button uls-input-toggle-button"></button>'
 		+ '</div>'
 		+ '</div>';
 
@@ -120,7 +120,7 @@
 			$imeListTitle = this.$template.find( '.ext-uls-input-settings-imes-title' );
 			$imeListContainer = this.$template.find( '.uls-input-settings-inputmethods-list' );
 
-			$imeListContainer.find( 'label' ).remove();
+			$imeListContainer.empty();
 
 			if ( !imes ) {
 				$imeListContainer.append( $( '<label>' )
@@ -168,10 +168,7 @@
 				return $();
 			}
 
-			$imeLabel = $( '<label>' ).attr( {
+			$imeLabel = $( '<label>' ).attr( 'for', imeId );
-				'for': imeId,
-				'class': 'imelabel'
-			} );
 
 			$inputMethodItem = $( '<input type="radio">' ).attr( {
 				name: 'ime',
@@ -180,8 +177,6 @@
 			} )
 			.prop( 'checked', selected );
 
-			$imeLabel.append( $inputMethodItem );
-
 			if ( imeId === 'system' ) {
 				name = $.i18n( 'ext-uls-disable-input-method' );
 				description = '';
@@ -210,7 +205,9 @@
 				$helplink
 			);
 
-			return $imeLabel;
+			return $( '<div>' )
+				.addClass( 'mw-ui-radio twelve columns' )
+				.append( $inputMethodItem, $imeLabel );
 		},
 
 		/**
@@ -275,8 +272,8 @@
 						$.ime.preferences.setLanguage( language );
 					}
 					// Mark the button selected
-					$( '.uls-ui-languages .button' ).removeClass( 'down' );
+					$( '.uls-ui-languages .mw-ui-button' ).removeClass( 'mw-ui-pressed' );
-					button.addClass( 'down' );
+					button.addClass( 'mw-ui-pressed' );
 					inputSettings.prepareInputmethods( language );
 				};
 			}
@@ -287,7 +284,7 @@
 			for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
 				language = languagesForButtons[ i ];
 				$button = $( '<button>' )
-					.addClass( 'button uls-language-button autonym' )
+					.addClass( 'mw-ui-button uls-language-button autonym' )
 					.text( $.uls.data.getAutonym( language ) )
 					.prop( {
 						lang: language,
@@ -319,7 +316,7 @@
 			$languages = this.$template.find( '.uls-ui-languages' );
 			$moreLanguagesButton = $( '<button>' )
 				.prop( 'class', 'uls-more-languages' )
-				.addClass( 'button' ).text( '...' );
+				.addClass( 'mw-ui-button' ).text( '...' );
 
 			$languages.append( $moreLanguagesButton );
 			// Show the long language list to select a language for ime settings

resources/js/ext.uls.languagesettings.js

@@ -35,8 +35,8 @@
 	// Apply and Cancel buttons
 	buttonsRow = '<div class="row language-settings-buttons">' +
 		'<div class="eleven columns">' +
-		'<button class="button uls-settings-cancel" data-i18n="ext-uls-language-settings-cancel"></button>' +
+		'<button class="mw-ui-button uls-settings-cancel" data-i18n="ext-uls-language-settings-cancel"></button>' +
-		'<button class="button active blue uls-settings-apply" data-i18n="ext-uls-language-settings-apply" disabled></button>' +
+		'<button class="mw-ui-button mw-ui-progressive active uls-settings-apply" data-i18n="ext-uls-language-settings-apply" disabled></button>' +
 		'</div>' +
 		'</div>' +
 		'</div>';