From f39a3f028f61def9eb1801c054082af09e7fc77b Mon Sep 17 00:00:00 2001 From: Timo Tijhof Date: Wed, 2 Oct 2019 03:18:14 +0100 Subject: [PATCH] vector.js: Remove eager calculation of p-cactions width on page load With these optimisations applied, there is no longer any need for the width value during most page views, and even for most resize operations. As such, eagerly computing it ahead of time, even from an idle callback, no longer makes sense. It is still memoised because it's worth avoiding a recalc during some of the code paths that need it. Also because this way the logic stays compatible. I don't know for sure if all involved logic would be able to handle the value changing over time. Optimisations: * Where possible, don't depend on jQuery width() working on invisible elements. Specifically, don't depend on it giving you the width of the element *as if* it were visible when it is invisible. When logged-out and, when navigating special pages (e.g. Special:Blankpage), the #p-cactions element is an emptyPortlet with `display: none;` set. The animation logic was depending on initialCactionsWidth() providing the width the element would have if it were visible. This is because jQuery width(), will actually change 'display: none' to 'display: block', force render virtually, compute the width, and then change back. Instead of depending on this discouraged feature [1], move this calculation to the code dealing with the animation and calculating it there, ourselves, right after making it visible for real (but before shrinking it for the hidden-to-visible growing expansion animation). * Document our reliance on this discouraged feature for the remaining two callers in expandCondition() and collapseCondition(). Both of those need the initial width as-if visible and generally are not in charge direclty of making it visible (so there's no better place to measure it), and are in fact almost always called when the element is invisible, thus pretty much exclusively depending on it, not even as an edge case. * In collapseCondition(), optimise the logic to remember whether collapsing is needed. This way, it won't need to call initialCactionsWidth() if the loop iterated zero times (turns out to be impossible, but not obvious from the code). Follows-up 46f1d41 and 9b2bcbb. Change-Id: I6f3a5c937eb17d194a7e00ab273768a5f2cb7cd2 (cherry picked from commit e32df2ad20d5f3df550c5f4515f9f45ffe016c0b) --- vector.js | 46 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/vector.js b/vector.js index 01b42a1..2148acd 100644 --- a/vector.js +++ b/vector.js @@ -1,16 +1,19 @@ /** - * Vector-specific scripts + * Collapsible tabs for Vector */ /* eslint-disable no-jquery/no-global-selector */ $( function () { - /** - * Collapsible tabs - */ var $cactions = $( '#p-cactions' ), $tabContainer = $( '#p-views ul' ), - // Avoid forced style calculation during page load initialCactionsWidth = function () { + // HACK: This depends on a discouraged feature of jQuery width(). + // The #p-cactions element is generally hidden by default, but + // the consumers of this function need to know the width that the + // "More" menu would consume if it were visible. This means it + // must not return 0 if hidden, but rather virtually render it + // and compute its width, then hide it again. jQuery width() does + // all that for us. var width = $cactions.width(); initialCactionsWidth = function () { return width; @@ -18,19 +21,23 @@ $( function () { return width; }; - mw.requestIdleCallback( initialCactionsWidth ); - // Bind callback functions to animate our drop down menu in and out // and then call the collapsibleTabs function on the menu $tabContainer .on( 'beforeTabCollapse', function () { + var expandedWidth; // If the dropdown was hidden, show it if ( $cactions.hasClass( 'emptyPortlet' ) ) { $cactions.removeClass( 'emptyPortlet' ); + // Now that it is visible, force-render it virtually + // to get its expanded width, then shrink it 1px before we + // yield from JS (which means the expansion won't be visible). + // Then animate from the 1px to the expanded width. + expandedWidth = $cactions.width(); // eslint-disable-next-line no-jquery/no-animate $cactions.find( 'h3' ) .css( 'width', '1px' ) - .animate( { width: initialCactionsWidth() }, 'normal' ); + .animate( { width: expandedWidth }, 'normal' ); } } ) .on( 'beforeTabExpand', function () { @@ -63,7 +70,8 @@ $( function () { } }, collapseCondition: function () { - var collapsibleWidth = 0; + var collapsibleWidth = 0, + doCollapse = false; // This looks a bit awkward because we're doing expensive queries as late // as possible. @@ -80,12 +88,26 @@ $( function () { return true; } + // If we reach here, this means: + // 1. #p-cactions is currently empty and invisible (e.g. when logged out), + // 2. and, there is at least one li.collapsible link in #p-views, as asserted + // by handleResize() before calling here. Such link exists e.g. as + // "View history" on articles, but generally not on special pages. + // 3. and, the left-navigation and right-navigation are overlapping + // each other, e.g. when making the window very narrow, or if a gadget + // added a lot of tabs. $tabContainer.children( 'li.collapsible' ).each( function ( index, element ) { collapsibleWidth += $( element ).width(); - // Stop this possibly expensive loop the moment the condition is met. - return !( collapsibleWidth > initialCactionsWidth() ); + if ( collapsibleWidth > initialCactionsWidth() ) { + // We've found one or more collapsible links that are wider + // than the "More" menu would be if it were made visible, + // which means it is worth doing a collapsing. + doCollapse = true; + // Stop this possibly expensive loop the moment the condition is met once. + return false; + } } ); - return collapsibleWidth > initialCactionsWidth(); + return doCollapse; } } ); } );