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

diff --git a/includes/installer/WebInstaller.php b/includes/installer/WebInstaller.php
index 0a6be86..20018d0 100644 (file)
--- 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 9647842..6084c84 100644 (file)
--- 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 521072e..235ff4a 100644 (file)
--- 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 () {