From d46cb97aebfc5d12838121ce75cf226ff4c68b44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thiemo=20M=C3=A4ttig?= <thiemo.maettig@wikimedia.de>
Date: Thu, 30 Nov 2017 18:22:19 +0100
Subject: [PATCH] Fix dysfunctional collapseCondition when right-most tab is
 the star

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
---
 vector.js | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/vector.js b/vector.js
index 1fb758b..e306ea9 100644
--- a/vector.js
+++ b/vector.js
@@ -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();
 			}
 		} );
 } );