Bug 1456056 - Part 3. Use the grid layout to a toolbar in order to display only the chevron button and the controls element if devtool's width is narrow. r=jdescottes,nchevobbe
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Thu, 31 May 2018 10:25:29 +0900
changeset 420818 996ab33915e7cc0edeb4a1ef6af15caee9a80e03
parent 420817 a2fe3122cc9124271af99192e65768f2f7761301
child 420819 dae65682ddd4b912190cb0d412892e0f56da49f8
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, nchevobbe
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 3. Use the grid layout to a toolbar in order to display only the chevron button and the controls element if devtool's width is narrow. r=jdescottes,nchevobbe This patch will apply the grid layout to the toolbar. If devtools's width is narrow, we expected that devtool display chevron and the controls elements only(i.e. chevron and meatball and close button). In order to display these button, a wrapper of toolbar will use grid layout. Basically, this patch define grid columns as follow: ------------------------------------------------ | Picker | tooltabs | commands | controls | | auto | 26px ~ 1fr | auto | max-content| ------------------------------------------------ We can disable the picker and command buttons, in this case, a toolbar will stretch the tooltabs width by using grid-column-start/end. MozReview-Commit-ID: ByY2qt2xhAg
devtools/client/framework/components/ToolboxToolbar.js
devtools/client/themes/devtools-browser.css
devtools/client/themes/toolbox.css
--- a/devtools/client/framework/components/ToolboxToolbar.js
+++ b/devtools/client/framework/components/ToolboxToolbar.js
@@ -83,28 +83,40 @@ class ToolboxToolbar extends Component {
     };
   }
 
   /**
    * The render function is kept fairly short for maintainability. See the individual
    * render functions for how each of the sections is rendered.
    */
   render() {
-    const containerProps = {className: "devtools-tabbar"};
+    let classnames = ["devtools-tabbar"];
+    let startButtons = renderToolboxButtonsStart(this.props);
+    let endButtons = renderToolboxButtonsEnd(this.props);
+
+    if (!startButtons) {
+      classnames.push("devtools-tabbar-has-start");
+    }
+    if (!endButtons) {
+      classnames.push("devtools-tabbar-has-end");
+    }
+
     return this.props.canRender
       ? (
         div(
-          containerProps,
-          renderToolboxButtonsStart(this.props),
+          {
+            className: classnames.join(" ")
+          },
+          startButtons,
           ToolboxTabs(this.props),
-          renderToolboxButtonsEnd(this.props),
+          endButtons,
           renderToolboxControls(this.props)
         )
       )
-      : div(containerProps);
+      : div({ className: classnames.join(" ") });
   }
 }
 
 module.exports = ToolboxToolbar;
 
 /**
  * A little helper function to call renderToolboxButtons for buttons at the start
  * of the toolbox.
--- a/devtools/client/themes/devtools-browser.css
+++ b/devtools/client/themes/devtools-browser.css
@@ -1,16 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("resource://devtools/client/themes/splitters.css");
 
 .devtools-toolbox-side-iframe {
-  min-width: 250px;
+  /* Toolbar should display the chevron and meatball (and close) button.
+    This size is sum of chevron and meatball and close button. */
+  min-width: 74px;
 }
 
 /* Eyedropper Widget */
 /* <panel> added to mainPopupSet */
 
 .devtools-eyedropper-panel {
   pointer-events: none;
   -moz-appearance: none;
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -18,29 +18,54 @@
   --command-measure-image: url(images/command-measure.svg);
   --command-chevron-image: url(images/command-chevron.svg);
 }
 
 /* Toolbox tabbar */
 
 .devtools-tabbar {
   -moz-appearance: none;
-  display: flex;
+  /* For narrow devtool width, we define the each column width of tabbar.
+    Defined layout is as follow:
+
+    -------------------------------------------------
+    | Picker |  tooltabs  |  commands |   controls  |
+    |  auto  | 26px ~ 1fr |    auto   |  max-content|
+    -------------------------------------------------
+  */
+  display: grid;
+  grid-template-columns: auto minmax(26px, 1fr) auto max-content;
   background: var(--theme-tab-toolbar-background);
   border-bottom: 1px solid var(--theme-splitter-color);
   box-sizing: border-box;
   min-height: 29px;
 }
 
 .toolbox-tabs-wrapper {
   position: relative;
   display: flex;
   flex: 1;
 }
 
+/* These classes use to stretch the tool tabs wrapper width if toolbox does'n
+  have start buttons or end buttons element. */
+
+.devtools-tabbar .toolbox-tabs-wrapper {
+  grid-column-start: 2;
+  grid-column-end: 3;
+}
+
+.devtools-tabbar-has-start .toolbox-tabs-wrapper {
+  grid-column-start: 1;
+}
+
+.devtools-tabbar-has-end .toolbox-tabs-wrapper {
+  grid-column-end: 4;
+}
+
 .toolbox-tabs-wrapper .tools-chevron-menu {
   border-top-width: 0;
   border-bottom-width: 0;
 }
 
 .toolbox-tabs {
   position: absolute;
   top: 0;
@@ -55,16 +80,17 @@
 
 /* Set flex attribute to Toolbox buttons and Picker container so,
    they don't overlap with the tab bar */
 #toolbox-buttons-start,
 #toolbox-buttons-end,
 #toolbox-controls {
   display: flex;
   align-items: stretch;
+  overflow: hidden;
 }
 
 /* Toolbox tabs */
 
 .devtools-tab {
   position: relative;
   display: flex;
   align-items: center;
@@ -170,21 +196,29 @@
   margin-inline-end: 3px;
 }
 
 #toolbox-buttons-end > .devtools-separator {
   margin-inline-start: 5px;
   margin-inline-end: 5px;
 }
 
+#toolbox-close {
+  min-width: 24px;
+}
+
 #toolbox-close::before {
   fill: var(--theme-toolbar-photon-icon-color);
   background-image: var(--close-button-image);
 }
 
+#toolbox-meatball-menu-button {
+  min-width: 24px;
+}
+
 #toolbox-meatball-menu-button::before {
   fill: var(--theme-toolbar-photon-icon-color);
   background-image: var(--more-button-image);
 }
 
 /* Command buttons */
 
 .command-button,