From 3db89f29aa76b905932536598fa36ec7f8697a54 Mon Sep 17 00:00:00 2001
From: Fomafix <fomafix@googlemail.com>
Date: Mon, 20 Nov 2017 08:32:41 +0100
Subject: [PATCH] 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
---
 includes/specials/SpecialUserrights.php       | 20 ++++++++++++-------
 .../mediawiki.special.userrights.css          | 11 ++++++++++
 .../mediawiki.special.userrights.js           |  9 ++-------
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/includes/specials/SpecialUserrights.php b/includes/specials/SpecialUserrights.php
index 4e4394d095..cf8c3f57d5 100644
--- 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 acfdb56267..1ffdf70ee5 100644
--- 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 3f864dd53d..d3494f74f8 100644
--- 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 ) );
-- 
2.20.1