Special:Preferences: Construct fake tabs to avoid FOUC

[lhc/web/wiklou.git] / includes / specials / SpecialPreferences.php

diff --git a/includes/specials/SpecialPreferences.php b/includes/specials/SpecialPreferences.php
index 7fa74af..7a4cde9 100644 (file)
--- a/includes/specials/SpecialPreferences.php
+++ b/includes/specials/SpecialPreferences.php
@@ -21,21 +21,41 @@
  * @ingroup SpecialPage
  */
 
+use MediaWiki\MediaWikiServices;
+
 /**
  * A special page that allows users to change their preferences
  *
  * @ingroup SpecialPage
  */
 class SpecialPreferences extends SpecialPage {
+       /**
+        * @var bool Whether OOUI should be enabled here
+        */
+       private $oouiEnabled = false;
+
        function __construct() {
                parent::__construct( 'Preferences' );
        }
 
+       /**
+        * Check if OOUI mode is enabled, by config or query string
+        * @param IContextSource $context The context.
+        * @return bool
+        */
+       public static function isOouiEnabled( IContextSource $context ) {
+               return $context->getRequest()->getFuzzyBool( 'ooui',
+                       $context->getConfig()->get( 'OOUIPreferences' )
+               );
+       }
+
        public function doesWrites() {
                return true;
        }
 
        public function execute( $par ) {
+               $this->oouiEnabled = static::isOouiEnabled( $this->getContext() );
+
                $this->setHeaders();
                $this->outputHeader();
                $out = $this->getOutput();
@@ -50,8 +70,14 @@ class SpecialPreferences extends SpecialPage {
                        return;
                }
 
-               $out->addModules( 'mediawiki.special.preferences.ooui' );
-               $out->addModuleStyles( 'mediawiki.special.preferences.styles.ooui' );
+               if ( $this->oouiEnabled ) {
+                       $out->addModules( 'mediawiki.special.preferences.ooui' );
+                       $out->addModuleStyles( 'mediawiki.special.preferences.styles.ooui' );
+                       $out->addModuleStyles( 'oojs-ui-widgets.styles' );
+               } else {
+                       $out->addModules( 'mediawiki.special.preferences' );
+                       $out->addModuleStyles( 'mediawiki.special.preferences.styles' );
+               }
 
                $session = $this->getRequest()->getSession();
                if ( $session->get( 'specialPreferencesSaveSuccess' ) ) {
@@ -82,19 +108,51 @@ class SpecialPreferences extends SpecialPage {
                }
 
                $htmlForm = $this->getFormObject( $user, $this->getContext() );
-               $htmlForm->setSubmitCallback( [ 'Preferences', 'tryUISubmit' ] );
-
-               $prefTabs = [];
-               foreach ( $htmlForm->getPreferenceSections() as $key ) {
-                       $prefTabs[] = [
-                               'name' => $key,
-                               'label' => $htmlForm->getLegend( $key ),
-                       ];
+               $sectionTitles = $htmlForm->getPreferenceSections();
+
+               if ( $this->oouiEnabled ) {
+                       $prefTabs = [];
+                       foreach ( $sectionTitles as $key ) {
+                               $prefTabs[] = [
+                                       'name' => $key,
+                                       'label' => $htmlForm->getLegend( $key ),
+                               ];
+                       }
+                       $out->addJsConfigVars( 'wgPreferencesTabs', $prefTabs );
+               } else {
+
+                       $prefTabs = '';
+                       foreach ( $sectionTitles as $key ) {
+                               $prefTabs .= Html::rawElement( 'li',
+                                       [
+                                               'role' => 'presentation',
+                                               'class' => ( $key === 'personal' ) ? 'selected' : null
+                                       ],
+                                       Html::rawElement( 'a',
+                                               [
+                                                       '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',
+                                       [
+                                               'id' => 'preftoc',
+                                               'role' => 'tablist'
+                                       ],
+                                       $prefTabs )
+                       );
                }
-               $out->addJsConfigVars( 'wgPreferencesTabs', $prefTabs );
 
-               // TODO: Render fake tabs here to avoid FOUC.
-               // $out->addHTML( $fakeTabs );
+               $htmlForm->addHiddenField( 'ooui', $this->oouiEnabled ? '1' : '0' );
 
                $htmlForm->show();
        }
@@ -106,7 +164,13 @@ class SpecialPreferences extends SpecialPage {
         * @return PreferencesForm|HTMLForm
         */
        protected function getFormObject( $user, IContextSource $context ) {
-               return Preferences::getFormObject( $user, $context );
+               $preferencesFactory = MediaWikiServices::getInstance()->getPreferencesFactory();
+               if ( $this->oouiEnabled ) {
+                       $form = $preferencesFactory->getForm( $user, $context, PreferencesFormOOUI::class );
+               } else {
+                       $form = $preferencesFactory->getForm( $user, $context, PreferencesFormLegacy::class );
+               }
+               return $form;
        }
 
        protected function showResetForm() {
@@ -118,7 +182,9 @@ class SpecialPreferences extends SpecialPage {
 
                $context = new DerivativeContext( $this->getContext() );
                $context->setTitle( $this->getPageTitle( 'reset' ) ); // Reset subpage
-               $htmlForm = HTMLForm::factory( 'ooui', [], $context, 'prefs-restore' );
+               $htmlForm = HTMLForm::factory(
+                       $this->oouiEnabled ? 'ooui' : 'vform', [], $context, 'prefs-restore'
+               );
 
                $htmlForm->setSubmitTextMsg( 'restoreprefs' );
                $htmlForm->setSubmitDestructive();