golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

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 e32df2ad20)
This commit is contained in:
Timo Tijhof 2019-10-02 03:18:14 +01:00 committed by Krinkle
parent d30064229f
commit f39a3f028f
1 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
vector.js
View File

@ -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;
}
} );
} );