Compress siblings before calculating the available width for crumbs

When the parent element of the breadcrumbs was resized to a larger width
and the siblings of the breadcrumbs expanded to fill all the available
width some crumbs could be hidden even if there was enough room for
them. The reason was that the width of the siblings being used to
calculate the available width for the breadcrumbs was the expanded width
of the siblings. Now as many crumbs as possible (that is, fitting in the
parent, no matter the siblings) are first shown so the expanding
siblings are compressed before calculating the available width.

Due to the lack of support for flexboxes in PhantomJS the related unit
test is skipped; it has to be run in other browser, like Firefox.

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

1 files changed, 9 insertions, 0 deletions

diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js
index 4a61188e93a..347d5a5dd0d 100644
--- a/apps/files/js/breadcrumb.js
+++ b/apps/files/js/breadcrumb.js
@@ -316,6 +316,15 @@
 				return;
 			}
 
+			// Show the crumbs to compress the siblings before hidding again the
+			// crumbs. This is needed when the siblings expand to fill all the
+			// available width, as in that case their old width would limit the
+			// available width for the crumbs.
+			while (this.$el.find('.crumb.hidden').length > 0
+				&& this.getTotalWidth() < this.$el.parent().width()) {
+				this._showCrumb();
+			}
+
 			var siblingsWidth = 0;
 			this.$el.prevAll(':visible').each(function () {
 				siblingsWidth += $(this).outerWidth(true);