2 files changed, 54 insertions, 10 deletions
diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index bad4be4ceef..f04adcf1292 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -140,16 +140,14 @@
 				}
 				return orderA - orderB;
 			});
-			if (this._tabViews.length > 1) {
-				// only render headers if there is more than one available
-				templateVars.tabHeaders = _.map(this._tabViews, function(tabView, i) {
-					return {
-						tabId: tabView.id,
-						tabIndex: i,
-						label: tabView.getLabel()
-					};
-				});
-			}
+
+			templateVars.tabHeaders = _.map(this._tabViews, function(tabView, i) {
+				return {
+					tabId: tabView.id,
+					tabIndex: i,
+					label: tabView.getLabel()
+				};
+			});
 
 			this.$el.html(this.template(templateVars));
 
@@ -166,6 +164,8 @@
 
 			this.selectTab(this._currentTabId);
 
+			this._updateTabVisibilities();
+
 			this._dirty = false;
 		},
 
@@ -224,6 +224,8 @@
 
 			if (this._dirty) {
 				this.render();
+			} else {
+				this._updateTabVisibilities();
 			}
 
 			if (this._currentTabId) {
@@ -241,6 +243,37 @@
 		},
 
 		/**
+		 * Update tab headers based on the current model
+		 */
+		_updateTabVisibilities: function() {
+			// update tab header visibilities
+			var self = this;
+			var deselect = false;
+			var countVisible = 0;
+			var $tabHeaders = this.$el.find('.tabHeaders li');
+			_.each(this._tabViews, function(tabView) {
+				var isVisible = tabView.canDisplay(self.model);
+				if (isVisible) {
+					countVisible += 1;
+				}
+				if (!isVisible && self._currentTabId === tabView.id) {
+					deselect = true;
+				}
+				$tabHeaders.filterAttr('data-tabid', tabView.id).toggleClass('hidden', !isVisible);
+			});
+
+			// hide the whole container if there is only one tab
+			this.$el.find('.tabHeaders').toggleClass('hidden', countVisible <= 1);
+
+			if (deselect) {
+				// select the first visible tab instead
+				var visibleTabId = this.$el.find('.tabHeader:not(.hidden):first').attr('data-tabid');
+				this.selectTab(visibleTabId);
+			}
+
+		},
+
+		/**
 		 * Returns the file info.
 		 *
 		 * @return {OCA.Files.FileInfoModel} file info
diff --git a/apps/files/js/detailtabview.js b/apps/files/js/detailtabview.js
index d885e47b15e..0bd34a88188 100644
--- a/apps/files/js/detailtabview.js
+++ b/apps/files/js/detailtabview.js
@@ -95,6 +95,17 @@
 		 */
 		nextPage: function() {
 			// load the next page, if applicable
+		},
+
+		/**
+		 * Returns whether the current tab is able to display
+		 * the given file info, for example based on mime type.
+		 *
+		 * @param {OCA.Files.FileInfoModel} fileInfo file info model
+		 * @return {bool} whether to display this tab
+		 */
+		canDisplay: function(fileInfo) {
+			return true;
 		}
 	});
 	DetailTabView._TAB_COUNT = 0;