From f0ad6be4ab70d93e6d39dd9190d642d88154a1f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Fri, 7 Sep 2018 22:31:20 +0200
Subject: [PATCH] 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        | 11 ++++++++---
 extension.json                             |  8 ++++++--
 resources/css/ext.uls.preferencespage.less |  3 +++
 resources/js/ext.uls.interface.js          |  1 -
 4 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 resources/css/ext.uls.preferencespage.less

diff --git a/UniversalLanguageSelector.hooks.php b/UniversalLanguageSelector.hooks.php
index d0fd1d73..a121148f 100644
--- a/UniversalLanguageSelector.hooks.php
+++ b/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 ) {
diff --git a/extension.json b/extension.json
index 5902a78f..f598bec4 100644
--- a/extension.json
+++ b/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",
diff --git a/resources/css/ext.uls.preferencespage.less b/resources/css/ext.uls.preferencespage.less
new file mode 100644
index 00000000..fb69a216
--- /dev/null
+++ b/resources/css/ext.uls.preferencespage.less
@@ -0,0 +1,3 @@
+.client-nojs .uls-preferences-link-wrapper {
+	display: none;
+}
diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js
index 96ea23c3..5850d639 100644
--- a/resources/js/ext.uls.interface.js
+++ b/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'