From a6a338c0f7acf2d5744aecdb2e43c7ff287310be Mon Sep 17 00:00:00 2001
From: NikG <ngkountas@wikimedia.org>
Date: Tue, 28 Mar 2023 19:11:16 +0300
Subject: [PATCH] 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 |   4 +
 resources/js/ext.uls.interface.js    | 105 ++++-----------------------
 2 files changed, 20 insertions(+), 89 deletions(-)

diff --git a/resources/css/ext.uls.interface.less b/resources/css/ext.uls.interface.less
index 1d6fd848..b8c3e8c5 100644
--- a/resources/css/ext.uls.interface.less
+++ b/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;
diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js
index 207a4b13..999b83b3 100644
--- a/resources/js/ext.uls.interface.js
+++ b/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 );