Take padding and margins of crumbs into account

When calculating the total width of the crumbs only its padding was
taken into account; now the margin is too. In a similar way, before
showing a crumb only its width was taken into account; now its padding
and margin are taken into account too.

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

apps/files/js/breadcrumb.js

@@ -249,7 +249,7 @@
 			for (var i = 0; i < this.breadcrumbs.length; i++ ) {
 				var $crumb = $(this.breadcrumbs[i]);
 				if(!$crumb.hasClass('hidden') || ignoreHidden === true) {
-					totalWidth += $crumb.outerWidth();
+					totalWidth += $crumb.outerWidth(true);
 				}
 			}
 			return totalWidth;
@@ -344,7 +344,7 @@
 			// If container is bigger than content + element to be shown
 			// AND if there is at least one hidden crumb
 			while (this.$el.find('.crumb.hidden').length > 0
-				&& this.getTotalWidth() + this._getCrumbElement().width() < availableWidth) {
+				&& this.getTotalWidth() + this._getCrumbElement().outerWidth(true) < availableWidth) {
 				this._showCrumb();
 			}
 

apps/files/tests/js/breadcrumbSpec.js

@@ -313,6 +313,60 @@ describe('OCA.Files.BreadCrumb tests', function() {
 			expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
 			expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
 		});
+		it('Hides breadcrumbs to fit available width taking paddings into account', function() {
+			var $crumbs;
+
+			// Each element is 20px wider
+			paddings = [10, 10, 10, 10, 10, 10, 10, 10];
+
+			$('div.crumb').each(function(index){
+				$(this).css('padding', paddings[index]);
+			});
+
+			$('#controls').width(700);
+			bc._resize();
+
+			$crumbs = bc.$el.find('.crumb');
+
+			// Second, 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(true);
+			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);
+		});
+		it('Hides breadcrumbs to fit available width taking margins into account', function() {
+			var $crumbs;
+
+			// Each element is 20px wider
+			margins = [10, 10, 10, 10, 10, 10, 10, 10];
+
+			$('div.crumb').each(function(index){
+				$(this).css('margin', margins[index]);
+			});
+
+			$('#controls').width(700);
+			bc._resize();
+
+			$crumbs = bc.$el.find('.crumb');
+
+			// Second, 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(true);
+			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);
+		});
 		it('Hides breadcrumbs to fit available width left by siblings', function() {
 			var $crumbs;