Add language settings button inside dropdown for non-content pages

NOTE: This patch is identical to patch with change-id:
Ifdf2a529b30e5a2df8867b606a525c9f7b3bdb6c

The above patch has been merged but reverted because of the usage
of '$skin->getTemplateDate()' method, which should be avoided. The
current patch replaces the usage of this method, with the usage of
the output page title ($out->getTitle()). All the rest of the code
has been kept the same.

Bug: T316559
Change-Id: Ibef9f6fd46d9055c3e0865905fb8aa8d031c1940

includes/Hooks.php

@@ -170,6 +170,12 @@ class Hooks implements
 		if ( $this->isEnabled() ) {
 			// Enable UI language selection for the user.
 			$out->addModules( 'ext.uls.interface' );
+
+			$title = $out->getTitle();
+			$isContentPage = $title && $title->exists() && $title->isContentPage();
+			// if current page is not a content page, we should use a different layout inside ULS
+			// according to T316559. Add JS config variable here, to let frontend know, when this is the case
+			$config[ 'wgULSisLanguageSelectorEmpty' ] = !$isContentPage;
 		}
 
 		// This is added here, and not in onResourceLoaderGetConfigVars to allow skins and extensions

resources/css/ext.uls.interface.less

@@ -70,3 +70,7 @@
 		margin: 1em 0;
 	}
 }
+
+.empty-language-selector__language-settings-button {
+	margin: 12px;
+}

resources/js/ext.uls.interface.js

@@ -717,7 +717,54 @@
 		}
 	}
 
+	/**
+	 * The new Vector 2022 skin uses a less prominent language button for non-content pages.
+	 * For these pages, the ULS should not be displayed, but a dropdown with an appropriate message
+	 * should appear. The UniversalLanguageSelector extension should add a button to open the
+	 * language settings, inside this dropdown.
+	 * This method adds this button inside the dropdown.
+	 */
+	function addLanguageSettingsToNonContentPages() {
+		var $languageBtn = $( '#p-lang-btn' );
+		var clickHandler = function ( event ) {
+			event.stopPropagation();
+			mw.loader.using( languageSettingsModules ).then( function () {
+				$( event.target ).languagesettings( {
+					autoOpen: true,
+					onPosition: function () {
+						var offset = $languageBtn.offset();
+						var top = offset.top + $languageBtn.outerHeight();
+						var right = $( window ).width() - offset.left - $languageBtn.outerWidth();
+						return { top: top, right: right };
+					}
+				} );
+			} );
+		};
+		// the first time the language button is clicked inside a non-content page,
+		// we should add the "Open language settings" button inside the dropdown
+		$languageBtn.one( 'mouseover', function () {
+			mw.loader.using( [ 'oojs-ui-widgets', 'oojs-ui.styles.icons-interactions', 'ext.uls.messages' ] )
+				.done( function () {
+					var actionButton = new ActionsMenuItem(
+						'settings',
+						$.i18n( 'ext-uls-actions-menu-language-settings-item-label' ),
+						clickHandler,
+						null
+					).render();
+					actionButton.$element.addClass( 'empty-language-selector__language-settings-button' );
+					var $emptyLanguageSelectorBody = $( '.mw-portlet-empty-language-selector-body' );
+					$emptyLanguageSelectorBody.after( actionButton.$element );
+				} );
+		} );
+	}
 	function init() {
+		// if it's not Vector skin, nothing to be done here
+		if ( mw.config.get( 'skin' ) === 'vector-2022' && mw.config.get( 'wgULSisLanguageSelectorEmpty' ) ) {
+			// if this is a non-content page, we should add the "Open language settings" button
+			// inside the language dropdown
+			addLanguageSettingsToNonContentPages();
+		}
+
 		initLanguageChangeUndoTooltip();
 		initIme();