From 070374b7a4811bfb5c9da4350bc16b77321537e3 Mon Sep 17 00:00:00 2001 From: MatmaRex Date: Sun, 21 Jul 2013 13:20:37 +0200 Subject: [PATCH] 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 --- resources/jquery/jquery.makeCollapsible.js | 11 +++++++---- .../mediawiki.special.changeslist.enhanced.css | 11 +++++++++++ 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/resources/jquery/jquery.makeCollapsible.js b/resources/jquery/jquery.makeCollapsible.js index 5ca0b12678..0fb66e2dbf 100644 --- 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 2632c787af..bed580d715 100644 --- 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 */ -- 2.20.1