wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 09:30:17 +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' ),
$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
@ -50,7 +60,7 @@ jQuery( function ( $ ) {
$cactions
.removeClass( 'emptyPortlet' )
.find( 'h3' )
.css( 'width', '1px' ).animate( { width: originalDropdownWidth }, 'normal' );
.css( 'width', '1px' ).animate( { width: initialCactionsWidth() }, 'normal' );
}
} )
.bind( 'beforeTabExpand', function () {
@ -75,7 +85,7 @@ jQuery( function ( $ ) {
// Maybe we can still expand? Account for the width of the "Actions" dropdown if the
// expansion would hide it.
if ( $cactions.find( 'li' ).length === 1 ) {
return distance >= eleWidth + 1 - originalDropdownWidth;
return distance >= eleWidth + 1 - initialCactionsWidth();
} else {
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
// we would have to insert. An example language where this happens is Lithuanian (lt).
if ( $cactions.hasClass( 'emptyPortlet' ) ) {
return $tabContainer.children( 'li.collapsible:last' ).width() > originalDropdownWidth;
return $tabContainer.children( 'li.collapsible:last' ).width() > initialCactionsWidth();
} else {
return true;
}