Recentchanges: Hide instead of disable namespace selector checkboxes

* Set the initial state of the visibility of the checkboxes already in
  HTML. This avoids a flash of not-hidden checkboxes while loading.
* Also add class="mw-input-with-label" to prevent line breaks in the
  label.

Change-Id: I15781b95590faa9cf65c19fe6fc84fa94ec786dc

diff --git a/includes/specials/SpecialRecentchanges.php b/includes/specials/SpecialRecentchanges.php
index 1e016a5..22b3bd6 100644 (file)
--- a/includes/specials/SpecialRecentchanges.php
+++ b/includes/specials/SpecialRecentchanges.php
@@ -682,16 +682,21 @@ class SpecialRecentChanges extends ChangesListSpecialPage {
                        [ 'name' => 'namespace', 'id' => 'namespace' ]
                );
                $nsLabel = Xml::label( $this->msg( 'namespace' )->text(), 'namespace' );
-               $invert = Xml::checkLabel(
+               $attribs = [ 'class' => [ 'mw-input-with-label' ] ];
+               // Hide the checkboxes when the namespace filter is set to 'all'.
+               if ( $opts['namespace'] === '' ) {
+                       $attribs['class'][] = 'mw-input-hidden';
+               }
+               $invert = Html::rawElement( 'span', $attribs, Xml::checkLabel(
                        $this->msg( 'invert' )->text(), 'invert', 'nsinvert',
                        $opts['invert'],
                        [ 'title' => $this->msg( 'tooltip-invert' )->text() ]
-               );
-               $associated = Xml::checkLabel(
+               ) );
+               $associated = Html::rawElement( 'span', $attribs, Xml::checkLabel(
                        $this->msg( 'namespace_association' )->text(), 'associated', 'nsassociated',
                        $opts['associated'],
                        [ 'title' => $this->msg( 'tooltip-namespace_association' )->text() ]
-               );
+               ) );
 
                return [ $nsLabel, "$nsSelect $invert $associated" ];
        }

diff --git a/resources/src/mediawiki.special.changeslist.less b/resources/src/mediawiki.special.changeslist.less
index ce43855..c78354b 100644 (file)
--- a/resources/src/mediawiki.special.changeslist.less
+++ b/resources/src/mediawiki.special.changeslist.less
@@ -2,6 +2,15 @@
  * Styling for Special:Watchlist and Special:RecentChanges
  */
 
+.client-js .mw-input-hidden {
+       display: none;
+}
+
+/* Make sure namespace label is aligned correctly on mobile when checkboxes are displayed */
+.mw-label.mw-namespace-label {
+       vertical-align: top;
+}
+
 .mw-changeslist-line-watched .mw-title {
        font-weight: bold;
 }

diff --git a/resources/src/mediawiki.special.recentchanges.js b/resources/src/mediawiki.special.recentchanges.js
index 8885883..310832d 100644 (file)
--- a/resources/src/mediawiki.special.recentchanges.js
+++ b/resources/src/mediawiki.special.recentchanges.js
@@ -10,7 +10,7 @@
         */
        rc = {
                /**
-                * Handler to disable/enable the namespace selector checkboxes when the
+                * Handler to hide/show the namespace selector checkboxes when the
                 * special 'all' namespace is selected/unselected respectively.
                 */
                updateCheckboxes: function () {
@@ -18,15 +18,15 @@
                        var isAllNS = $select.val() === '';
 
                        // Iterates over checkboxes and propagate the selected option
-                       $checkboxes.prop( 'disabled', isAllNS );
+                       $checkboxes.toggleClass( 'mw-input-hidden', isAllNS );
                },
 
                init: function () {
                        $select = $( '#namespace' );
-                       $checkboxes = $( '#nsassociated, #nsinvert' );
+                       $checkboxes = $( '#nsassociated, #nsinvert' ).closest( '.mw-input-with-label' );
 
-                       // Bind to change event, and trigger once to set the initial state of the checkboxes.
-                       rc.updateCheckboxes();
+                       // Bind to change event of the checkboxes.
+                       // The initial state is already set in HTML.
                        $select.on( 'change', rc.updateCheckboxes );
                }
        };

diff --git a/tests/qunit/suites/resources/mediawiki.special/mediawiki.special.recentchanges.test.js b/tests/qunit/suites/resources/mediawiki.special/mediawiki.special.recentchanges.test.js
index 458df92..aafcd5b 100644 (file)
--- a/tests/qunit/suites/resources/mediawiki.special/mediawiki.special.recentchanges.test.js
+++ b/tests/qunit/suites/resources/mediawiki.special/mediawiki.special.recentchanges.test.js
@@ -3,7 +3,7 @@
 
        // TODO: verify checkboxes == [ 'nsassociated', 'nsinvert' ]
 
-       QUnit.test( '"all" namespace disable checkboxes', function ( assert ) {
+       QUnit.test( '"all" namespace hides checkboxes', function ( assert ) {
                var selectHtml, $env, $options,
                        rc = require( 'mediawiki.special.recentchanges' );
 
@@ -17,10 +17,14 @@
                        + '<option value="4">ProjectName</option>'
                        + '<option value="5">ProjectName talk</option>'
                        + '</select>'
+                       + '<span class="mw-input-with-label mw-input-hidden">'
                        + '<input name="invert" type="checkbox" value="1" id="nsinvert" title="no title" />'
                        + '<label for="nsinvert" title="no title">Invert selection</label>'
+                       + '</span>'
+                       + '<span class="mw-input-with-label mw-input-hidden">'
                        + '<input name="associated" type="checkbox" value="1" id="nsassociated" title="no title" />'
                        + '<label for="nsassociated" title="no title">Associated namespace</label>'
+                       + '</span>'
                        + '<input type="submit" value="Go" />'
                        + '<input type="hidden" value="Special:RecentChanges" name="title" />';
 
@@ -28,16 +32,16 @@
 
                // TODO abstract the double strictEquals
 
-               // At first checkboxes are enabled
-               assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), false );
-               assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), false );
+               // At first checkboxes are hidden
+               assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
+               assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
 
                // Initiate the recentchanges module
                rc.init();
 
                // By default
-               assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), true );
-               assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), true );
+               assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
+               assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
 
                // select second option...
                $options = $( '#namespace' ).find( 'option' );
@@ -45,18 +49,18 @@
                $options.eq( 1 ).prop( 'selected', true );
                $( '#namespace' ).trigger( 'change' );
 
-               // ... and checkboxes should be enabled again
-               assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), false );
-               assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), false );
+               // ... and checkboxes should be visible again
+               assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), false );
+               assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), false );
 
                // select first option ( 'all' namespace)...
                $options.eq( 1 ).removeProp( 'selected' );
                $options.eq( 0 ).prop( 'selected', true );
                $( '#namespace' ).trigger( 'change' );
 
-               // ... and checkboxes should now be disabled
-               assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), true );
-               assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), true );
+               // ... and checkboxes should now be hidden
+               assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
+               assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
 
                // DOM cleanup
                $env.remove();