wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-12 09:21:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

vector.js: Calculate initial #p-cactions width lazily

Browse source 
Follows-up f354aafebc.

Avoid forced style calculation during page load. Instead calculate
in the very next animation frame. This is only a few ms later, but
makes a big difference by doing this outside the critical path.

Change-Id: I5805958781bf64d1e4a30f441ed7f57807072284
This commit is contained in:
Timo Tijhof 2016-08-25 20:56:34 -07:00 committed by Krinkle
parent 4844331f2e
commit 46f1d417a6
1 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
vector.js
View file

@ -8,7 +8,17 @@ jQuery( function ( $ ) {
*/ */
var $cactions = $( '#p-cactions' ), var $cactions = $( '#p-cactions' ),
$tabContainer = $( '#p-views ul' ), $tabContainer = $( '#p-views ul' ),
originalDropdownWidth = $cactions.width(); rAF = window.requestAnimationFrame || setTimeout,
// Avoid forced style calculation during page load
initialCactionsWidth = function () {
var width = $cactions.width();
initialCactionsWidth = function () {
return width;
};
return width;
};
rAF( initialCactionsWidth );
/** /**
* Focus search input at the very end * Focus search input at the very end
@ -50,7 +60,7 @@ jQuery( function ( $ ) {
$cactions $cactions
.removeClass( 'emptyPortlet' ) .removeClass( 'emptyPortlet' )
.find( 'h3' ) .find( 'h3' )
.css( 'width', '1px' ).animate( { width: originalDropdownWidth }, 'normal' ); .css( 'width', '1px' ).animate( { width: initialCactionsWidth() }, 'normal' );
} }
} ) } )
.bind( 'beforeTabExpand', function () { .bind( 'beforeTabExpand', function () {
@ -75,7 +85,7 @@ jQuery( function ( $ ) {
// Maybe we can still expand? Account for the width of the "Actions" dropdown if the // Maybe we can still expand? Account for the width of the "Actions" dropdown if the
// expansion would hide it. // expansion would hide it.
if ( $cactions.find( 'li' ).length === 1 ) { if ( $cactions.find( 'li' ).length === 1 ) {
return distance >= eleWidth + 1 - originalDropdownWidth; return distance >= eleWidth + 1 - initialCactionsWidth();
} else { } else {
return false; return false;
} }
@ -91,7 +101,7 @@ jQuery( function ( $ ) {
// But only if the width of the tab to collapse is smaller than the width of the dropdown // But only if the width of the tab to collapse is smaller than the width of the dropdown
// we would have to insert. An example language where this happens is Lithuanian (lt). // we would have to insert. An example language where this happens is Lithuanian (lt).
if ( $cactions.hasClass( 'emptyPortlet' ) ) { if ( $cactions.hasClass( 'emptyPortlet' ) ) {
return $tabContainer.children( 'li.collapsible:last' ).width() > originalDropdownWidth; return $tabContainer.children( 'li.collapsible:last' ).width() > initialCactionsWidth();
} else { } else {
return true; return true;
} }