Bug 1456056 - Part 2. Display chevron button only if the devtool width is narrow.r?jdescottes draft
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Thu, 31 May 2018 10:23:36 +0900
changeset 801947 8220be9ef76ff442bb8ecc41ee6a9e50dfeba5cc
parent 801946 c1d7c7e7452aad965ff6620af36141264444bb37
child 801948 ba8a57175f28a6526aeb8be294b0ae4dfd10ad11
push id111785
push userbmo:mantaroh@gmail.com
push dateThu, 31 May 2018 01:28:25 +0000
reviewersjdescottes
bugs1456056
milestone62.0a1
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
devtools/client/framework/components/ToolboxTabs.js
--- 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 });
     }
   }