Enhanced RC: Optimization of the initial collapsing

* mediawiki.special.changeslist.enhanced: Hide the rows that would be
  hidden by jquery.makeCollapsible with CSS to save us some reflows
  and repaints. This doesn't work on browsers that don't fully support
  CSS2 (IE6), but it's okay, this will be done in JavaScript with old
  degraded performance instead.
* jquery.makeCollapsible: Allow the element to be hidden on initial
  toggle without removing and adding back the 'mw-collapsed' class.
  This wasn't a performance issue in the past, but now it would
  cause the newly added CSS rules to have to be recalculated (although
  browsers seem to optimize it and avoid repaints at least).

Bug: 51749
Change-Id: I3823c2a67d524e6598e2437e1dd065659d1c7e41

diff --git a/resources/jquery/jquery.makeCollapsible.js b/resources/jquery/jquery.makeCollapsible.js
index 5ca0b12..0fb66e2 100644 (file)
--- a/resources/jquery/jquery.makeCollapsible.js
+++ b/resources/jquery/jquery.makeCollapsible.js
@@ -172,7 +172,12 @@
                        }
                }
 
-               wasCollapsed = $collapsible.hasClass( 'mw-collapsed' );
+               // This allows the element to be hidden on initial toggle without fiddling with the class
+               if ( options.wasCollapsed !== undefined ) {
+                       wasCollapsed = options.wasCollapsed;
+               } else {
+                       wasCollapsed = $collapsible.hasClass( 'mw-collapsed' );
+               }
 
                // Toggle the state of the collapsible element (that is, expand or collapse)
                $collapsible.toggleClass( 'mw-collapsed', !wasCollapsed );
@@ -367,11 +372,9 @@
 
                        // Initial state
                        if ( options.collapsed || $collapsible.hasClass( 'mw-collapsed' ) ) {
-                               // Remove here so that the toggler goes in the right direction (the class is re-added)
-                               $collapsible.removeClass( 'mw-collapsed' );
                                // One toggler can hook to multiple elements, and one element can have
                                // multiple togglers. This is the sanest way to handle that.
-                               actionHandler.call( $toggleLink.get( 0 ), null, { instantHide: true } );
+                               actionHandler.call( $toggleLink.get( 0 ), null, { instantHide: true, wasCollapsed: false } );
                        }
                } );
        };

diff --git a/resources/mediawiki.special/mediawiki.special.changeslist.enhanced.css b/resources/mediawiki.special/mediawiki.special.changeslist.enhanced.css
index 2632c78..bed580d 100644 (file)
--- a/resources/mediawiki.special/mediawiki.special.changeslist.enhanced.css
+++ b/resources/mediawiki.special/mediawiki.special.changeslist.enhanced.css
@@ -37,6 +37,17 @@ table.mw-enhanced-rc td.mw-enhanced-rc-nested {
        display: none;
 }
 
+/*
+ * And if it's enabled, let's optimize the collapsing a little: hide the rows
+ * that would be hidden by jquery.makeCollapsible with CSS to save us some
+ * reflows and repaints. This doesn't work on browsers that don't fully support
+ * CSS2 (IE6), but it's okay, this will be done in JavaScript with old degraded
+ * performance instead.
+ */
+.client-js table.mw-enhanced-rc.mw-collapsed tr + tr {
+       display: none;
+}
+
 .mw-enhancedchanges-arrow-space {
        display: inline-block;
        *display: inline; /* IE7 and below */