ULS: Use quick actions icon inside page language selector

Currently, inside the page language selector of multilingual wikis
(like Commons), the user can access the language settings by clicking
the display and input setting buttons that are provided at the bottom
of the language selector. However, instead of these buttons, the quick
actions trigger should be used instead for a consistent user experience.

The trigger will only provide access to the language settings, and other
quick action items won't have any effect in this case.

Bug: T314021
Change-Id: Iaaf61c85518b4d3d44d4a92dbf5dc7fdb96282fa

resources/css/ext.uls.interface.less

@@ -3,6 +3,10 @@
 @import 'mediawiki.ui/variables.less';
 
 #uls-settings-block {
+	// set default background color to #fcfcfc, to match ULS-LCD background color (inside jquery.uls.lcd.ss)
+	// TODO: There is no design token for this color. We should fix to use a design token here.
+	background-color: #fcfcfc;
+
 	&.uls-settings-block--vector-2022 {
 		display: flex;
 		justify-content: space-between;

resources/js/ext.uls.interface.js

@@ -25,36 +25,6 @@
 		ActionsMenuItem = require( './ext.uls.actions.menu.item.js' );
 	require( './ext.uls.actions.menu.items.registry.js' );
 
-	/**
-	 * Construct the display settings link
-	 *
-	 * @return {jQuery}
-	 */
-	function displaySettings() {
-		return $( '<button>' )
-			.addClass( 'display-settings-block' )
-			.attr( {
-				title: $.i18n( 'ext-uls-display-settings-desc' ),
-				'data-i18n': 'ext-uls-display-settings-title'
-			} )
-			.i18n();
-	}
-
-	/**
-	 * Construct the input settings link
-	 *
-	 * @return {jQuery}
-	 */
-	function inputSettings() {
-		return $( '<button>' )
-			.addClass( 'input-settings-block' )
-			.attr( {
-				title: $.i18n( 'ext-uls-input-settings-desc' ),
-				'data-i18n': 'ext-uls-input-settings-title'
-			} )
-			.i18n();
-	}
-
 	/**
 	 * For Vector, check if the language button id exists.
 	 * For other skins, check wgULSDisplaySettingsInInterlanguage for the current skin.
@@ -157,13 +127,10 @@
 	}
 
 	/**
-	 * Add the button that opens the "Add languages" menu (that contain options
-	 * like "Translate this page" and "Edit language links") and the button that
-	 * opens the "Language settings" menu.
-	 *
 	 * @param {Object} uls The ULS object
+	 * @return {jQuery}
 	 */
-	function addActionsMenuTriggers( uls ) {
+	function addLanguageSettingsTrigger( uls ) {
 		var $ulsSettingsBlock = uls.$menu.find( '#uls-settings-block' ).eq( 0 );
 		$ulsSettingsBlock.addClass( 'uls-settings-block--vector-2022' );
 
@@ -173,6 +140,19 @@
 		} );
 		$ulsSettingsBlock.append( $languageSettingsMenuButton );
 
+		return $ulsSettingsBlock;
+	}
+
+	/**
+	 * Add the button that opens the "Add languages" menu (that contain options
+	 * like "Translate this page" and "Edit language links") and the button that
+	 * opens the "Language settings" menu.
+	 *
+	 * @param {Object} uls The ULS object
+	 */
+	function addActionsMenuTriggers( uls ) {
+		var $ulsSettingsBlock = addLanguageSettingsTrigger( uls );
+
 		var actionItemsRegistry = mw.uls.ActionsMenuItemsRegistry;
 		actionItemsRegistry.on( 'register', onActionItemAdded );
 
@@ -213,46 +193,6 @@
 		}
 	}
 
-	/**
-	 * Add display settings link to the settings bar in ULS
-	 *
-	 * @param {Object} uls The ULS object
-	 */
-	function addDisplaySettings( uls ) {
-		var $displaySettings = displaySettings();
-
-		uls.$menu.find( '#uls-settings-block' ).append( $displaySettings );
-		// Initialize the trigger
-		$displaySettings.one( 'click', function () {
-			$displaySettings.languagesettings( {
-				defaultModule: 'display',
-				onClose: uls.show.bind( uls ),
-				onPosition: uls.position.bind( uls ),
-				onVisible: uls.hide.bind( uls )
-			} ).trigger( 'click' );
-		} );
-	}
-
-	/**
-	 * Add input settings link to the settings bar in ULS
-	 *
-	 * @param {Object} uls The ULS object
-	 */
-	function addInputSettings( uls ) {
-		var $inputSettings = inputSettings();
-
-		uls.$menu.find( '#uls-settings-block' ).append( $inputSettings );
-		// Initialize the trigger
-		$inputSettings.one( 'click', function () {
-			$inputSettings.languagesettings( {
-				defaultModule: 'input',
-				onClose: uls.show.bind( uls ),
-				onPosition: uls.position.bind( uls ),
-				onVisible: uls.hide.bind( uls )
-			} ).trigger( 'click' );
-		} );
-	}
-
 	function userCanChangeLanguage() {
 		return mw.config.get( 'wgULSAnonCanChangeLanguage' ) || !mw.user.isAnon();
 	}
@@ -368,19 +308,6 @@
 		} );
 	}
 
-	/**
-	 * Adds display and input settings to the ULS dialog after loading their code.
-	 *
-	 * @param {Object} uls The ULS instance
-	 * @return {jQuery.Promise}
-	 */
-	function loadDisplayAndInputSettings( uls ) {
-		return mw.loader.using( languageSettingsModules ).then( function () {
-			addDisplaySettings( uls );
-			addInputSettings( uls );
-		} );
-	}
-
 	function initSecondaryEntryPoints() {
 		$( '.uls-settings-trigger' ).one( 'click', function ( e ) {
 			e.preventDefault();
@@ -534,7 +461,7 @@
 								return positionCSS;
 							},
 							onReady: function () {
-								loadDisplayAndInputSettings( this );
+								addLanguageSettingsTrigger( this );
 							},
 							onSelect: function ( language ) {
 								mw.uls.changeLanguage( language );