Avoid reflow (FOUC) due to ULS link on Special:Preferences

Rather than building the link in JS, which is delayed until the JS
code loads, we build it in PHP and hide it from no-JS users with CSS.

Change-Id: If0c3a4dc137d8bf6cf24957dd063bd0a39791d2e

UniversalLanguageSelector.hooks.php

@@ -139,6 +139,10 @@ class UniversalLanguageSelectorHooks {
 		} else {
 			$out->addModuleStyles( 'ext.uls.interlanguage' );
 		}
+
+		if ( $out->getTitle()->isSpecial( 'Preferences' ) ) {
+			$out->addModuleStyles( 'ext.uls.preferencespage' );
+		}
 	}
 
 	/**
@@ -381,9 +385,10 @@ class UniversalLanguageSelectorHooks {
 			'type' => 'info',
 			'raw' => true,
 			'section' => 'personal/i18n',
-			'default' => "<a id='uls-preferences-link' href='#'></a>",
-			// The above link will have text set from javascript. Just to avoid
-			// showing the link when javascript is disabled.
+			// We use this class to hide this from no-JS users
+			'cssclass' => 'uls-preferences-link-wrapper',
+			'default' => "<a id='uls-preferences-link' href='#'>" .
+				wfMessage( 'ext-uls-language-settings-preferences-link' )->escaped() . "</a>",
 		];
 
 		if ( $wgULSCompactLanguageLinksBetaFeature === false ) {

extension.json

@@ -200,8 +200,7 @@
 				"uls-plang-title-languages",
 				"ext-uls-select-language-settings-icon-tooltip",
 				"ext-uls-undo-language-tooltip-text",
-				"ext-uls-undo-language-tooltip-text-local",
-				"ext-uls-language-settings-preferences-link"
+				"ext-uls-undo-language-tooltip-text-local"
 			],
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
@@ -353,6 +352,11 @@
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
 		},
+		"ext.uls.preferencespage": {
+			"styles": "css/ext.uls.preferencespage.less",
+			"localBasePath": "resources",
+			"remoteExtPath": "UniversalLanguageSelector/resources"
+		},
 		"rangy.core": {
 			"scripts": "rangy/rangy-core.js",
 			"localBasePath": "lib",

resources/css/ext.uls.preferencespage.less

@@ -0,0 +1,3 @@
+.client-nojs .uls-preferences-link-wrapper {
+	display: none;
+}

resources/js/ext.uls.interface.js

@@ -382,7 +382,6 @@
 
 		// Bind language settings to preferences page link
 		$( '#uls-preferences-link' )
-			.text( mw.msg( 'ext-uls-language-settings-preferences-link' ) )
 			.click( function () {
 				$ulsTrigger.trigger( 'click', {
 					source: 'preferences'