From db7257ffd57b3c7153aea976195d7fb17995a228 Mon Sep 17 00:00:00 2001
From: Derk-Jan Hartman <hartman.wiki@gmail.com>
Date: Sun, 1 Nov 2015 01:34:46 +0100
Subject: [PATCH] Rework the Preferences to prevent FOUC

New styles modules that is always added, so that all JS specific styling
is guaranteed to load before first paint. Reworked the HTML to generate
the preftoc (hidden when user has no JS).

Set htmlform nolabel class to use !important, so that it doesn't get
overriden by the 20% width rule of labels.

Also requires changes to the skinstyles of Vector preferences, which
is an a separate patch (I59f0f45), and other skins.

Bug: T115692
Change-Id: I24d9b16ed6729fdf0d59adcc2f0ba16f4f621b44
---
 includes/Preferences.php                      |  8 +++
 includes/specials/SpecialPreferences.php      | 31 +++++++++++
 resources/Resources.php                       |  5 +-
 .../mediawiki.special.preferences.js          | 55 +++++--------------
 ... mediawiki.special.preferences.styles.css} | 30 ++++++----
 .../src/mediawiki/mediawiki.htmlform.css      |  2 +-
 6 files changed, 77 insertions(+), 54 deletions(-)
 rename resources/src/mediawiki.special/{mediawiki.special.preferences.css => mediawiki.special.preferences.styles.css} (52%)

diff --git a/includes/Preferences.php b/includes/Preferences.php
index 0f8dcc3251..096f8e3100 100644
--- a/includes/Preferences.php
+++ b/includes/Preferences.php
@@ -1655,4 +1655,12 @@ class PreferencesForm extends HTMLForm {
 		Hooks::run( 'PreferencesGetLegend', array( $this, $key, &$legend ) );
 		return $legend;
 	}
+
+	/**
+	 * Get the keys of each top level preference section.
+	 * @return array of section keys
+	 */
+	function getPreferenceSections() {
+		return array_keys( array_filter( $this->mFieldTree, 'is_array' ) );
+	}
 }
diff --git a/includes/specials/SpecialPreferences.php b/includes/specials/SpecialPreferences.php
index 4b75e5f65c..3b5b9c90ef 100644
--- a/includes/specials/SpecialPreferences.php
+++ b/includes/specials/SpecialPreferences.php
@@ -47,6 +47,7 @@ class SpecialPreferences extends SpecialPage {
 		}
 
 		$out->addModules( 'mediawiki.special.preferences' );
+		$out->addModuleStyles( 'mediawiki.special.preferences.styles' );
 
 		if ( $this->getRequest()->getCheck( 'success' ) ) {
 			$out->wrapWikiMsg(
@@ -66,7 +67,37 @@ class SpecialPreferences extends SpecialPage {
 
 		$htmlForm = Preferences::getFormObject( $this->getUser(), $this->getContext() );
 		$htmlForm->setSubmitCallback( array( 'Preferences', 'tryUISubmit' ) );
+		$sectionTitles = $htmlForm->getPreferenceSections();
+
+		$prefTabs = '';
+		foreach ( $sectionTitles as $key ) {
+			$prefTabs .= Html::rawElement( 'li',
+				array(
+					'role' => 'presentation',
+					'class' => ( $key === 'personal' ) ? 'selected' : null
+				),
+				Html::rawElement( 'a',
+					array(
+						'id' => 'preftab-' . $key,
+						'role' => 'tab',
+						'href' => '#mw-prefsection-' . $key,
+						'aria-controls' => 'mw-prefsection-' . $key,
+						'aria-selected' => ( $key === 'personal' ) ? 'true' : 'false',
+						'tabIndex' => ( $key === 'personal' ) ? 0 : -1,
+					),
+					$htmlForm->getLegend( $key )
+				)
+			);
+		}
 
+		$out->addHTML(
+			Html::rawElement( 'ul',
+				array(
+					'id' => 'preftoc',
+					'role' => 'tablist'
+				),
+				$prefTabs )
+		);
 		$htmlForm->show();
 	}
 
diff --git a/resources/Resources.php b/resources/Resources.php
index b1b1541b6a..08c695d3fc 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1713,7 +1713,6 @@ return array(
 	),
 	'mediawiki.special.preferences' => array(
 		'scripts' => 'resources/src/mediawiki.special/mediawiki.special.preferences.js',
-		'styles' => 'resources/src/mediawiki.special/mediawiki.special.preferences.css',
 		'position' => 'top',
 		'messages' => array(
 			'prefs-tabs-navigation-hint',
@@ -1727,6 +1726,10 @@ return array(
 			'mediawiki.notification',
 		),
 	),
+	'mediawiki.special.preferences.styles' => array(
+		'styles' => 'resources/src/mediawiki.special/mediawiki.special.preferences.styles.css',
+		'position' => 'top',
+	),
 	'mediawiki.special.recentchanges' => array(
 		'scripts' => 'resources/src/mediawiki.special/mediawiki.special.recentchanges.js',
 		'dependencies' => 'mediawiki.special',
diff --git a/resources/src/mediawiki.special/mediawiki.special.preferences.js b/resources/src/mediawiki.special/mediawiki.special.preferences.js
index 9ab47b314e..f799eafaae 100644
--- a/resources/src/mediawiki.special/mediawiki.special.preferences.js
+++ b/resources/src/mediawiki.special/mediawiki.special.preferences.js
@@ -3,7 +3,7 @@
  */
 ( function ( mw, $ ) {
 	$( function () {
-		var $preftoc, $preferences, $fieldsets, $legends,
+		var $preftoc, $preferences, $fieldsets,
 			hash, labelFunc,
 			$tzSelect, $tzTextbox, $localtimeHolder, servertime,
 			allowCloseWindow, notif;
@@ -13,25 +13,22 @@
 		};
 
 		$( '#prefsubmit' ).attr( 'id', 'prefcontrol' );
-		$preftoc = $( '<ul>' )
-			.attr( {
-				id: 'preftoc',
-				role: 'tablist'
-			} );
-		$preferences = $( '#preferences' )
-			.addClass( 'jsprefs' )
-			.before( $preftoc );
+		$preftoc = $( '#preftoc' );
+		$preferences = $( '#preferences' );
+
 		$fieldsets = $preferences.children( 'fieldset' )
-			.hide()
 			.attr( {
 				role: 'tabpanel',
-				'aria-hidden': 'true',
 				'aria-labelledby': labelFunc
 			} )
-			.addClass( 'prefsection' );
-		$legends = $fieldsets
-			.children( 'legend' )
-			.addClass( 'mainLegend' );
+			.not( '#mw-prefsection-personal' )
+				.hide()
+				.attr( 'aria-hidden', 'true' );
+
+		// T115692: The following is kept for backwards compatibility with older skins
+		$preferences.addClass( 'jsprefs' );
+		$fieldsets.addClass( 'prefsection' );
+		$fieldsets.children( 'legend' ).addClass( 'mainLegend' );
 
 		// Make sure the accessibility tip is selectable so that screen reader users take notice,
 		// but hide it per default to reduce interface clutter. Also make sure it becomes visible
@@ -105,35 +102,9 @@
 			}
 		}
 
-		// Populate the prefToc
-		$legends.each( function ( i, legend ) {
-			var $legend = $( legend ),
-				ident, $li, $a;
-			if ( i === 0 ) {
-				$legend.parent().show();
-			}
-			ident = $legend.parent().attr( 'id' );
-
-			$li = $( '<li>' )
-				.attr( 'role', 'presentation' )
-				.addClass( i === 0 ? 'selected' : '' );
-			$a = $( '<a>' )
-				.attr( {
-					id: ident.replace( 'mw-prefsection', 'preftab' ),
-					href: '#' + ident,
-					role: 'tab',
-					tabIndex: i === 0 ? 0 : -1,
-					'aria-selected': i === 0 ? 'true' : 'false',
-					'aria-controls': ident
-				} )
-				.text( $legend.text() );
-			$li.append( $a );
-			$preftoc.append( $li );
-		} );
-
 		// Disable the button to save preferences unless preferences have changed
 		$( '#prefcontrol' ).prop( 'disabled', true );
-		$( '.prefsection' ).one( 'change keydown mousedown', function () {
+		$( '#preferences > fieldset' ).one( 'change keydown mousedown', function () {
 			$( '#prefcontrol' ).prop( 'disabled', false );
 		} );
 
diff --git a/resources/src/mediawiki.special/mediawiki.special.preferences.css b/resources/src/mediawiki.special/mediawiki.special.preferences.styles.css
similarity index 52%
rename from resources/src/mediawiki.special/mediawiki.special.preferences.css
rename to resources/src/mediawiki.special/mediawiki.special.preferences.styles.css
index 9e5efd36fd..e6785b4a23 100644
--- a/resources/src/mediawiki.special/mediawiki.special.preferences.css
+++ b/resources/src/mediawiki.special/mediawiki.special.preferences.styles.css
@@ -9,30 +9,40 @@
 /*
 .mw-email-authenticated .mw-input { }
 */
+/* This breaks due to nolabel styling */
+#preferences > fieldset td.mw-label {
+	width: 20%;
+}
+
+#preferences > fieldset table {
+	width: 100%;
+}
+#preferences > fieldset table.mw-htmlform-matrix {
+	width: auto;
+}
+
+/* The CSS below is also for JS enabled version, because we want to prevent FOUC */
 
 /*
  * Hide, but keep accessible for screen-readers.
  * Like .mw-jump, #jump-to-nav from shared.css
  */
-.mw-navigation-hint {
+.client-js .mw-navigation-hint {
 	overflow: hidden;
 	height: 0;
 	zoom: 1;
 }
 
-/* When JS is enabled, .mw-preferences-messageboxes are replaced with mw.notifications */
-.mw-preferences-messagebox {
+.client-nojs #preftoc {
 	display: none;
 }
 
-.prefsection td.mw-label {
-	width: 20%;
+.client-js #preferences > fieldset {
+	display: none;
 }
 
-.prefsection table {
-	width: 100%;
+/* Only the 1st tab is shown by default in JS mode */
+.client-js #preferences #mw-prefsection-personal {
+	display: block;
 }
 
-.prefsection table.mw-htmlform-matrix {
-	width: auto;
-}
diff --git a/resources/src/mediawiki/mediawiki.htmlform.css b/resources/src/mediawiki/mediawiki.htmlform.css
index e41248c1be..b598211aaf 100644
--- a/resources/src/mediawiki/mediawiki.htmlform.css
+++ b/resources/src/mediawiki/mediawiki.htmlform.css
@@ -1,7 +1,7 @@
 /* HTMLForm styles */
 
 table.mw-htmlform-nolabel td.mw-label {
-	width: 1px;
+	width: 1px !important;
 }
 
 .mw-htmlform-invalid-input td.mw-input input {
-- 
2.20.1