From: Derk-Jan Hartman <hartman.wiki@gmail.com>
Date: Sun, 1 Nov 2015 00:34:46 +0000 (+0100)
Subject: Rework the Preferences to prevent FOUC
X-Git-Tag: 1.31.0-rc.0~9060
X-Git-Url: http://git.cyclocoop.org/%22%2C%20generer_url_ecrire%28?a=commitdiff_plain;h=db7257ffd57b3c7153aea976195d7fb17995a228;p=lhc%2Fweb%2Fwiklou.git

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
---

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.css b/resources/src/mediawiki.special/mediawiki.special.preferences.css
deleted file mode 100644
index 9e5efd36fd..0000000000
--- a/resources/src/mediawiki.special/mediawiki.special.preferences.css
+++ /dev/null
@@ -1,38 +0,0 @@
-/* Reuses colors from mediawiki.special.changeemail.css */
-.mw-email-not-authenticated .mw-input,
-.mw-email-none .mw-input{
-	border: 1px solid #FF8080;
-	background-color: #FFC0C0;
-	color: black;
-}
-/* Authenticated email field has its own class too. Unstyled by default */
-/*
-.mw-email-authenticated .mw-input { }
-*/
-
-/*
- * Hide, but keep accessible for screen-readers.
- * Like .mw-jump, #jump-to-nav from shared.css
- */
-.mw-navigation-hint {
-	overflow: hidden;
-	height: 0;
-	zoom: 1;
-}
-
-/* When JS is enabled, .mw-preferences-messageboxes are replaced with mw.notifications */
-.mw-preferences-messagebox {
-	display: none;
-}
-
-.prefsection td.mw-label {
-	width: 20%;
-}
-
-.prefsection table {
-	width: 100%;
-}
-
-.prefsection table.mw-htmlform-matrix {
-	width: auto;
-}
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.styles.css b/resources/src/mediawiki.special/mediawiki.special.preferences.styles.css
new file mode 100644
index 0000000000..e6785b4a23
--- /dev/null
+++ b/resources/src/mediawiki.special/mediawiki.special.preferences.styles.css
@@ -0,0 +1,48 @@
+/* Reuses colors from mediawiki.special.changeemail.css */
+.mw-email-not-authenticated .mw-input,
+.mw-email-none .mw-input{
+	border: 1px solid #FF8080;
+	background-color: #FFC0C0;
+	color: black;
+}
+/* Authenticated email field has its own class too. Unstyled by default */
+/*
+.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
+ */
+.client-js .mw-navigation-hint {
+	overflow: hidden;
+	height: 0;
+	zoom: 1;
+}
+
+.client-nojs #preftoc {
+	display: none;
+}
+
+.client-js #preferences > fieldset {
+	display: none;
+}
+
+/* Only the 1st tab is shown by default in JS mode */
+.client-js #preferences #mw-prefsection-personal {
+	display: block;
+}
+
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 {