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>

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);

apps/files/tests/js/breadcrumbSpec.js

@@ -238,6 +238,10 @@ describe('OCA.Files.BreadCrumb tests', function() {
 	describe('Resizing', function() {
 		var bc, dummyDir, widths;
 
+		// cit() will skip tests if running on PhantomJS because it does not
+		// have proper support for flexboxes.
+		var cit = window.isPhantom?xit:it;
+
 		beforeEach(function() {
 			dummyDir = '/short name/longer name/looooooooooooonger/' +
 				'even longer long long long longer long/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/last one';
@@ -451,6 +455,89 @@ describe('OCA.Files.BreadCrumb tests', function() {
 			expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
 			expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
 
+			expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
+			expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
+		});
+		it('Updates the breadcrumbs when increasing available width', function() {
+			var $crumbs;
+
+			// limited space
+			$('#controls').width(850);
+			bc._resize();
+
+			$crumbs = bc.$el.find('.crumb');
+
+			// Third and fourth crumb are hidden and everything else is visible
+			expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
+
+			expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
+			expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
+			expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
+
+			// simulate increase
+			$('#controls').width(1000);
+			bc._resize();
+
+			// Third crumb is hidden and everything else is visible
+			expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
+
+			expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
+			expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
+		});
+		cit('Updates the breadcrumbs when increasing available width with an expanding sibling', function() {
+			var $crumbs;
+
+			// The sibling expands to fill all the width left by the breadcrumbs
+			var $nextSibling = $('<div class="sibling"></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('display', 'flex');
+			$nextSibling.css('flex', '1 1');
+			var $nextSiblingChild = $('<div class="siblingChild"></div>');
+			$nextSiblingChild.css('margin-left', 'auto');
+			$nextSibling.append($nextSiblingChild);
+			$('#controls').append($nextSibling);
+
+			// limited space
+			$('#controls').width(850);
+			bc._resize();
+
+			$crumbs = bc.$el.find('.crumb');
+
+			// Third and fourth crumb are hidden and everything else is visible
+			expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
+
+			expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
+			expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
+			expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
+
+			// simulate increase
+			$('#controls').width(1000);
+			bc._resize();
+
+			// Third crumb is hidden and everything else is visible
+			expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
+			expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
+
 			expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
 			expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
 			expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);