Take all visible siblings into account

Other apps could add elements to the controls outside the creatable
actions div (for example, the button to switch to the gallery), so the
widths of all the visible siblings of the breadcrumbs have to be taken
into account in the size calculations.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

2 files changed, 59 insertions, 5 deletions

diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js
index 16762f386be..4a61188e93a 100644
--- a/apps/files/js/breadcrumb.js
+++ b/apps/files/js/breadcrumb.js
@@ -316,7 +316,15 @@
 				return;
 			}
 
-			var availableWidth = this.$el.parent().width() - this.$el.parent().find('.actions.creatable').outerWidth(true);
+			var siblingsWidth = 0;
+			this.$el.prevAll(':visible').each(function () {
+				siblingsWidth += $(this).outerWidth(true);
+			});
+			this.$el.nextAll(':visible').each(function () {
+				siblingsWidth += $(this).outerWidth(true);
+			});
+
+			var availableWidth = this.$el.parent().width() - siblingsWidth;
 
 			// If container is smaller than content
 			// AND if there are crumbs left to hide
diff --git a/apps/files/tests/js/breadcrumbSpec.js b/apps/files/tests/js/breadcrumbSpec.js
index dcb9391f6ed..bae8370cd1d 100644
--- a/apps/files/tests/js/breadcrumbSpec.js
+++ b/apps/files/tests/js/breadcrumbSpec.js
@@ -322,13 +322,35 @@ describe('OCA.Files.BreadCrumb tests', function() {
 			expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
 			expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
 
+			// Visible sibling widths add up to 200px
+			var $previousSibling = $('<div class="otherSibling"></div>');
+			// Set both the width and the min-width to even differences in width
+			// handling in the browsers used to run the tests.
+			$previousSibling.css('width', '50px');
+			$previousSibling.css('min-width', '50px');
+			$('#controls').prepend($previousSibling);
+
 			var $creatableActions = $('<div class="actions creatable"></div>');
 			// Set both the width and the min-width to even differences in width
 			// handling in the browsers used to run the tests.
-			$creatableActions.css('width', '200px');
-			$creatableActions.css('min-width', '200px');
+			$creatableActions.css('width', '100px');
+			$creatableActions.css('min-width', '100px');
 			$('#controls').append($creatableActions);
 
+			var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>');
+			// Set both the width and the min-width to even differences in width
+			// handling in the browsers used to run the tests.
+			$nextHiddenSibling.css('width', '200px');
+			$nextHiddenSibling.css('min-width', '200px');
+			$('#controls').append($nextHiddenSibling);
+
+			var $nextSibling = $('<div class="otherSibling"></div>');
+			// Set both the width and the min-width to even differences in width
+			// handling in the browsers used to run the tests.
+			$nextSibling.css('width', '50px');
+			$nextSibling.css('min-width', '50px');
+			$('#controls').append($nextSibling);
+
 			bc._resize();
 
 			// Second, third, fourth and fifth crumb are hidden and everything
@@ -362,15 +384,39 @@ describe('OCA.Files.BreadCrumb tests', function() {
 			expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
 			expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
 
+			// Visible sibling widths add up to 200px
+			var $previousSibling = $('<div class="otherSibling"></div>');
+			// Set both the width and the min-width to even differences in width
+			// handling in the browsers used to run the tests.
+			$previousSibling.css('width', '10px');
+			$previousSibling.css('min-width', '10px');
+			$previousSibling.css('margin', '20px');
+			$('#controls').prepend($previousSibling);
+
 			var $creatableActions = $('<div class="actions creatable"></div>');
 			// Set both the width and the min-width to even differences in width
 			// handling in the browsers used to run the tests.
 			$creatableActions.css('width', '20px');
 			$creatableActions.css('min-width', '20px');
-			$creatableActions.css('margin-left', '90px');
-			$creatableActions.css('padding-right', '90px');
+			$creatableActions.css('margin-left', '40px');
+			$creatableActions.css('padding-right', '40px');
 			$('#controls').append($creatableActions);
 
+			var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>');
+			// Set both the width and the min-width to even differences in width
+			// handling in the browsers used to run the tests.
+			$nextHiddenSibling.css('width', '200px');
+			$nextHiddenSibling.css('min-width', '200px');
+			$('#controls').append($nextHiddenSibling);
+
+			var $nextSibling = $('<div class="otherSibling"></div>');
+			// Set both the width and the min-width to even differences in width
+			// handling in the browsers used to run the tests.
+			$nextSibling.css('width', '10px');
+			$nextSibling.css('min-width', '10px');
+			$nextSibling.css('padding', '20px');
+			$('#controls').append($nextSibling);
+
 			bc._resize();
 
 			// Second, third, fourth and fifth crumb are hidden and everything