From 1dc40b1cb3710bb98b59a6fc0fd47e7c2dc918f7 Mon Sep 17 00:00:00 2001
From: Fomafix <fomafix@googlemail.com>
Date: Thu, 8 Nov 2018 20:18:27 +0100
Subject: [PATCH] Installer: Use HTML/CSS instead of JavaScript to toggle the
 help message

Changes in the behavior:
* The expanding/collapsing now works even with disabled JavaScript.
* There is no FOUC on loading anymore.
* The animation on show/hide is absent.

Change-Id: I1b88d8e2cdbb1c969670a7a8637dba10bf447330
---
 includes/installer/WebInstaller.php | 13 +++++++++++--
 mw-config/config.css                | 10 ++++++++--
 mw-config/config.js                 | 11 -----------
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/includes/installer/WebInstaller.php b/includes/installer/WebInstaller.php
index 0a6be86ba5..20018d0dfb 100644
--- a/includes/installer/WebInstaller.php
+++ b/includes/installer/WebInstaller.php
@@ -124,6 +124,13 @@ class WebInstaller extends Installer {
 	 */
 	protected $tabIndex = 1;
 
+	/**
+	 * Numeric index of the help box
+	 *
+	 * @var int
+	 */
+	protected $helpBoxId = 1;
+
 	/**
 	 * Name of the page we're on
 	 *
@@ -680,11 +687,13 @@ class WebInstaller extends Installer {
 		$args = array_map( 'htmlspecialchars', $args );
 		$text = wfMessage( $msg, $args )->useDatabase( false )->plain();
 		$html = $this->parse( $text, true );
+		$id = 'helpBox-' . $this->helpBoxId++;
 
 		return "<div class=\"config-help-field-container\">\n" .
-			"<span class=\"config-help-field-hint\" title=\"" .
+			"<input type=\"checkbox\" class=\"config-help-field-checkbox\" id=\"$id\" />" .
+			"<label class=\"config-help-field-hint\" for=\"$id\" title=\"" .
 			wfMessage( 'config-help-tooltip' )->escaped() . "\">" .
-			wfMessage( 'config-help' )->escaped() . "</span>\n" .
+			wfMessage( 'config-help' )->escaped() . "</label>\n" .
 			"<div class=\"config-help-field-data\">" . $html . "</div>\n" .
 			"</div>\n";
 	}
diff --git a/mw-config/config.css b/mw-config/config.css
index 9647842799..6084c84a93 100644
--- a/mw-config/config.css
+++ b/mw-config/config.css
@@ -180,11 +180,13 @@
 	display: none;
 }
 
+.config-help-field-checkbox {
+	display: none;
+}
+
 /* tooltip styles */
 .config-help-field-hint {
-	display: none;
 	margin-left: 2px;
-	margin-bottom: -8px;
 	padding: 0 0 0 15px;
 	/* @embed */
 	background-image: url( images/help-question.gif );
@@ -209,6 +211,10 @@
 	margin-left: 20px;
 }
 
+.config-help-field-checkbox:not( :checked ) ~ .config-help-field-data {
+	display: none;
+}
+
 #p-logo a {
 	background-image: url( images/installer-logo.png );
 }
diff --git a/mw-config/config.js b/mw-config/config.js
index 521072e9cc..235ff4aa0e 100644
--- a/mw-config/config.js
+++ b/mw-config/config.js
@@ -14,17 +14,6 @@
 			$label.text( labelText.replace( '$1', value ) );
 		}
 
-		// Set up the help system
-		$( '.config-help-field-data' ).hide()
-			.closest( '.config-help-field-container' ).find( '.config-help-field-hint' )
-			.show()
-			.on( 'click', function () {
-				// FIXME: Use CSS transition
-				// eslint-disable-next-line no-jquery/no-slide
-				$( this ).closest( '.config-help-field-container' ).find( '.config-help-field-data' )
-					.slideToggle( 'fast' );
-			} );
-
 		// Show/hide code for DB-specific options
 		// FIXME: Do we want slow, fast, or even non-animated (instantaneous) showing/hiding here?
 		$( '.dbRadio' ).each( function () {
-- 
2.20.1