Bug 1456056 - Part 2. Display chevron button only if the devtool width is narrow.r=jdescottes
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Thu, 31 May 2018 10:23:36 +0900
changeset 420817 a2fe3122cc9124271af99192e65768f2f7761301
parent 420816 2995e423a7b2508fcf7a3580502748903327b499
child 420818 996ab33915e7cc0edeb4a1ef6af15caee9a80e03
push id103894
push usercsabou@mozilla.com
push dateFri, 01 Jun 2018 09:46:36 +0000
treeherdermozilla-inbound@e99ff79303ea [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1456056
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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 });
     }
   }