Special:UserRights: Prevent FOUC on loading

Implement the show/hide based on the group checkbox with CSS instead of
JavaScript.
Hide the expiry input field initially with CSS instead of JavaScript.

Change-Id: I33a4b0a13dab92156aeea96529573ad49fa2d616

diff --git a/includes/specials/SpecialUserrights.php b/includes/specials/SpecialUserrights.php
index 4e4394d..cf8c3f5 100644 (file)
--- a/includes/specials/SpecialUserrights.php
+++ b/includes/specials/SpecialUserrights.php
@@ -835,7 +835,10 @@ class UserrightsPage extends SpecialPage {
                        }
                        $ret .= "\t<td style='vertical-align:top;'>\n";
                        foreach ( $column as $group => $checkbox ) {
-                               $attr = $checkbox['disabled'] ? [ 'disabled' => 'disabled' ] : [];
+                               $attr = [ 'class' => 'mw-userrights-groupcheckbox' ];
+                               if ( $checkbox['disabled'] ) {
+                                       $attr['disabled'] = 'disabled';
+                               }
 
                                $member = UserGroupMembership::getGroupMemberName( $group, $user->getName() );
                                if ( $checkbox['irreversible'] ) {
@@ -847,10 +850,6 @@ class UserrightsPage extends SpecialPage {
                                }
                                $checkboxHtml = Xml::checkLabel( $text, "wpGroup-" . $group,
                                        "wpGroup-" . $group, $checkbox['set'], $attr );
-                               $ret .= "\t\t" . ( ( $checkbox['disabled'] && $checkbox['disabled-expiry'] )
-                                       ? Xml::tags( 'div', [ 'class' => 'mw-userrights-disabled' ], $checkboxHtml )
-                                       : Xml::tags( 'div', [], $checkboxHtml )
-                               ) . "\n";
 
                                if ( $this->canProcessExpiries() ) {
                                        $uiUser = $this->getUser();
@@ -920,7 +919,10 @@ class UserrightsPage extends SpecialPage {
                                                $expiryHtml .= $expiryFormOptions->getHTML() . '<br />';
 
                                                // Add custom expiry field
-                                               $attribs = [ 'id' => "mw-input-wpExpiry-$group-other" ];
+                                               $attribs = [
+                                                       'id' => "mw-input-wpExpiry-$group-other",
+                                                       'class' => 'mw-userrights-expiryfield',
+                                               ];
                                                if ( $checkbox['disabled-expiry'] ) {
                                                        $attribs['disabled'] = 'disabled';
                                                }
@@ -939,8 +941,12 @@ class UserrightsPage extends SpecialPage {
                                                'id' => "mw-userrights-nested-wpGroup-$group",
                                                'class' => 'mw-userrights-nested',
                                        ];
-                                       $ret .= "\t\t\t" . Xml::tags( 'div', $divAttribs, $expiryHtml ) . "\n";
+                                       $checkboxHtml .= "\t\t\t" . Xml::tags( 'div', $divAttribs, $expiryHtml ) . "\n";
                                }
+                               $ret .= "\t\t" . ( ( $checkbox['disabled'] && $checkbox['disabled-expiry'] )
+                                       ? Xml::tags( 'div', [ 'class' => 'mw-userrights-disabled' ], $checkboxHtml )
+                                       : Xml::tags( 'div', [], $checkboxHtml )
+                               ) . "\n";
                        }
                        $ret .= "\t</td>\n";
                }

diff --git a/resources/src/mediawiki.special/mediawiki.special.userrights.css b/resources/src/mediawiki.special/mediawiki.special.userrights.css
index acfdb56..1ffdf70 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.userrights.css
+++ b/resources/src/mediawiki.special/mediawiki.special.userrights.css
@@ -22,3 +22,14 @@
 .mw-userrights-groups * th {
        text-align: left;
 }
+
+/* Dynamically show/hide the expiry selection underneath each checkbox */
+input.mw-userrights-groupcheckbox:not( :checked ) ~ .mw-userrights-nested {
+       display: none;
+}
+
+/* Initial hide the expiry fields to prevent a FOUC on loading */
+/* The input fields gets unhidden by JavaScript when needed */
+.client-js .mw-userrights-expiryfield {
+       display: none;
+}

diff --git a/resources/src/mediawiki.special/mediawiki.special.userrights.js b/resources/src/mediawiki.special/mediawiki.special.userrights.js
index 3f864dd..d3494f7 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.userrights.js
+++ b/resources/src/mediawiki.special/mediawiki.special.userrights.js
@@ -6,13 +6,8 @@
        // Replace successbox with notifications
        convertmessagebox();
 
-       // Dynamically show/hide the expiry selection underneath each checkbox
-       $( '#mw-userrights-form2 input[type=checkbox]' ).on( 'change', function ( e ) {
-               $( '#mw-userrights-nested-' + e.target.id ).toggle( e.target.checked );
-       } ).trigger( 'change' );
-
-       // Also dynamically show/hide the "other time" input under each dropdown
+       // Dynamically show/hide the "other time" input under each dropdown
        $( '.mw-userrights-nested select' ).on( 'change', function ( e ) {
                $( e.target.parentNode ).find( 'input' ).toggle( $( e.target ).val() === 'other' );
-       } ).trigger( 'change' );
+       } );
 }( jQuery ) );