TheDJ has uploaded a new change for review.
https://gerrit.wikimedia.org/r/250287
Change subject: Rework the Preferences to prevent FOUC
......................................................................
Rework the Preferences to prevent FOUC
New styles modules that is always added. Reworked the HTML to generate
the preftoc (hidden when user has no JS).
Also requires changes to the skinstyles of Vector preferences, which
is an a separate patch.
Bug: T115692
Change-Id: I24d9b16ed6729fdf0d59adcc2f0ba16f4f621b44
---
M includes/Preferences.php
M includes/specials/SpecialPreferences.php
M resources/Resources.php
M resources/src/mediawiki.special/mediawiki.special.preferences.css
M resources/src/mediawiki.special/mediawiki.special.preferences.js
5 files changed, 70 insertions(+), 39 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/87/250287/1
diff --git a/includes/Preferences.php b/includes/Preferences.php
index 0f8dcc3..85026aa 100644
--- a/includes/Preferences.php
+++ b/includes/Preferences.php
@@ -1655,4 +1655,18 @@
Hooks::run( 'PreferencesGetLegend', array( $this, $key,
&$legend ) );
return $legend;
}
+
+ /**
+ * Get the "<legend>" for a given section key. Normally this is the
+ * @return array of section keys
+ */
+ function getPreferenceSections() {
+ $sectionMap = array();
+ foreach ( $this->mFieldTree as $key => $value ) {
+ if ( is_array( $value ) ) {
+ $sectionMap[] = $key;
+ }
+ }
+ return $sectionMap;
+ }
}
diff --git a/includes/specials/SpecialPreferences.php
b/includes/specials/SpecialPreferences.php
index 4b75e5f..f70d9db 100644
--- a/includes/specials/SpecialPreferences.php
+++ b/includes/specials/SpecialPreferences.php
@@ -47,6 +47,7 @@
}
$out->addModules( 'mediawiki.special.preferences' );
+ $out->addModuleStyles( 'mediawiki.special.preferences.styles' );
if ( $this->getRequest()->getCheck( 'success' ) ) {
$out->wrapWikiMsg(
@@ -66,7 +67,37 @@
$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 b1b1541..e3f9d71 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1727,6 +1727,10 @@
'mediawiki.notification',
),
),
+ 'mediawiki.special.preferences.styles' => array(
+ 'styles' =>
'resources/src/mediawiki.special/mediawiki.special.preferences.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
index 9e5efd3..a79f9fc 100644
--- a/resources/src/mediawiki.special/mediawiki.special.preferences.css
+++ b/resources/src/mediawiki.special/mediawiki.special.preferences.css
@@ -25,6 +25,18 @@
display: none;
}
+.client-nojs #preftoc {
+ display: none;
+}
+
+.client-js #preferences > fieldset {
+ display: none;
+}
+
+.client-js #preferences #mw-prefsection-personal {
+ display: block;
+}
+
.prefsection td.mw-label {
width: 20%;
}
diff --git a/resources/src/mediawiki.special/mediawiki.special.preferences.js
b/resources/src/mediawiki.special/mediawiki.special.preferences.js
index 0fda3dc..15c6723 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,
$checkBoxes, allowCloseWindow,
@@ -14,25 +14,21 @@
};
$( '#prefsubmit' ).attr( 'id', 'prefcontrol' );
- $preftoc = $( '<ul>' )
- .attr( {
- id: 'preftoc',
- role: 'tablist'
- } );
+ $preftoc = $( '#preftoc' );
$preferences = $( '#preferences' )
- .addClass( 'jsprefs' )
- .before( $preftoc );
+ .addClass( 'jsprefs' ); // TODO do we still need this
class ?
+
$fieldsets = $preferences.children( 'fieldset' )
- .hide()
.attr( {
role: 'tabpanel',
- 'aria-hidden': 'true',
'aria-labelledby': labelFunc
} )
- .addClass( 'prefsection' );
- $legends = $fieldsets
+ .addClass( 'prefsection' ); // TODO do we still need
this class ?
+ $fieldsets
.children( 'legend' )
- .addClass( 'mainLegend' );
+ .addClass( 'mainLegend' ); // TODO do we still need
this class ?
+
+ $fieldsets.not( '#mw-prefsection-personal' ).hide().attr(
'aria-hidden', 'true' );
// 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,32 +101,6 @@
}
}
}
-
- // 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 );
--
To view, visit https://gerrit.wikimedia.org/r/250287
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I24d9b16ed6729fdf0d59adcc2f0ba16f4f621b44
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: TheDJ <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
