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

Fix dysfunctional collapseCondition when right-most tab is the star

Browse source 
The issue I'm fixing here is described at
https://www.wikidata.org/wiki/Wikidata:Contact_the_development_team#Hard_to_read_titles

The code I'm touching here is from 2014. I believe the issue is not new, but
pops up extremely rarely. Multiple conditions must met:
1. The user must use an extreme zoom (or an extreme font size), or a
   super-narrow browser window. This is also how you should reproduce
   this: make your browser window very narrow, and then start zooming in
   extremely.
2. The issue only appears in namespaces where you can not move pages! This
   is the case for the vast majority of pages on Wikidata and the reason why
   it appears to be a Wikidata-only issue (which it is not). If you can move
   a page, the right-most button is "Move", which is wide enough to be worth
   collapsing, or is already collapsed.

If the right-most (":last") button is the watch star, the code believes it is
not worth collapsing it because the "More" button would consume more space.
This is true, but does not consider the other buttons that can also be
collapsed.

My code considers all collapsible buttons.

Change-Id: I6e94750b3b80940005f4d655e5e9b426d44b2ffb
This commit is contained in:
Thiemo Mättig 2017-11-30 18:22:19 +01:00 committed by Thiemo Mättig (WMDE)
parent 2c29439b30
commit d46cb97aeb
1 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
vector.js
View file

@ -82,22 +82,28 @@ jQuery( function ( $ ) {
}
},
collapseCondition: function () {
var collapsibleWidth = 0;
// (This looks a bit awkward because we're doing expensive queries as late as possible.)
// TODO The dropdown itself should probably "fold" to just the down-arrow (hiding the text)
// if it can't fit on the line?
// If there's an overlap, collapse.
if ( $.collapsibleTabs.calculateTabDistance() < 0 ) {
// 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() > initialCactionsWidth();
} else {
return true;
}
} else {
// Never collapse if there is no overlap.
if ( $.collapsibleTabs.calculateTabDistance() >= 0 ) {
return false;
}
// Always collapse if the "More" button is already shown.
if ( !$cactions.hasClass( 'emptyPortlet' ) ) {
return true;
}
$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() );
} );
return collapsibleWidth > initialCactionsWidth();
}
} );
} );