Bug 1456056 - Part 2. Display chevron button only if the devtool width is narrow.r?jdescottes
This patch will allow that all buttons which accessing the tool panel is
overflowed. i.e. toolbar will display chevron button only.
MozReview-Commit-ID: GbKbAhtpYt7
--- a/devtools/client/framework/components/ToolboxTabs.js
+++ b/devtools/client/framework/components/ToolboxTabs.js
@@ -160,21 +160,22 @@ class ToolboxTabs extends Component {
enabledTabs.includes(currentToolId)) {
let selectedToolWidth = this._cachedToolTabsWidthMap.get(currentToolId);
while ((sumWidth + selectedToolWidth) > toolboxWidth &&
visibleTabs.length > 0) {
let removingToolId = visibleTabs.pop();
let removingToolWidth = this._cachedToolTabsWidthMap.get(removingToolId);
sumWidth -= removingToolWidth;
}
- visibleTabs.push(currentToolId);
- }
- if (visibleTabs.length === 0) {
- visibleTabs = [enabledTabs[0]];
+ // If toolbox width is narrow, toolbox display only chevron menu.
+ // i.e. All tool tabs will overflow.
+ if ((sumWidth + selectedToolWidth) <= toolboxWidth) {
+ visibleTabs.push(currentToolId);
+ }
}
let willOverflowTabs = enabledTabs.filter(id => !visibleTabs.includes(id));
if (!this.equalToolIdArray(this.state.overflowedTabIds, willOverflowTabs)) {
this.setState({ overflowedTabIds: willOverflowTabs });
}
}