Bug 1391487 - DevTools toolbar should match the size of the Photon compact toolbar. r=bgrins
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 18 Aug 2017 14:09:16 -0700
changeset 377672 ddcc371a885292fe88de0cdbb6af03bf788d0f01
parent 377671 e90e17ca8d42b479781b4770538ec329d2f10402
child 377673 b85516a5f3bd3712b82292084730576704f93336
push id32413
push userarchaeopteryx@coole-files.de
push dateWed, 30 Aug 2017 09:05:33 +0000
treeherdermozilla-central@ab2d700fda2b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1391487
milestone57.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 1391487 - DevTools toolbar should match the size of the Photon compact toolbar. r=bgrins
devtools/client/inspector/test/browser_inspector_highlighter-comments.js
devtools/client/themes/firebug-theme.css
devtools/client/themes/toolbox.css
--- a/devtools/client/inspector/test/browser_inspector_highlighter-comments.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-comments.js
@@ -46,16 +46,17 @@ add_task(function* () {
 
   info("Hovering over a text node and waiting for highlighter to appear.");
   yield hoverTextNode("Visible text node");
   yield assertHighlighterShownOnTextNode("body", 14);
 
   function hoverContainer(container) {
     let promise = inspector.toolbox.once("node-highlight");
 
+    container.tagLine.scrollIntoView();
     EventUtils.synthesizeMouse(container.tagLine, 2, 2, {type: "mousemove"},
         markupView.doc.defaultView);
 
     return promise;
   }
 
   function* hoverElement(selector) {
     info(`Hovering node ${selector} in the markup view`);
--- a/devtools/client/themes/firebug-theme.css
+++ b/devtools/client/themes/firebug-theme.css
@@ -94,18 +94,18 @@
 }
 
 .theme-firebug .toolbox-tabs,
 .theme-firebug #toolbox-option-container {
   margin-bottom: -1px;
 }
 
 .theme-firebug .devtools-tab-label {
-  /* Set the end padding on the label to make sure the label gets faded out properly */
-  padding-inline-end: 4px;
+  padding-inline-end: 0;
+  mask-image: none;
 }
 
 /* In order to hide bottom-border of side panel tabs we need
  to make the parent element overflow visible, so child element
  can move one pixel down to hide the bottom border of the parent. */
 .theme-firebug .devtools-sidebar-tabs tabs {
   overflow: visible;
 }
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -38,23 +38,24 @@
   --command-rulers-image: url(images/firebug/command-rulers.svg);
   --command-measure-image: url(images/firebug/command-measure.svg);
 }
 
 /* Toolbox tabbar */
 
 .devtools-tabbar {
   -moz-appearance: none;
-  min-height: 24px;
+  min-height: 29px;
   border: 0px solid;
   border-bottom-width: 1px;
   padding: 0;
   background: var(--theme-tab-toolbar-background);
   border-bottom-color: var(--theme-splitter-color);
   display: flex;
+  box-sizing: border-box;
 }
 
 .toolbox-tabs-wrapper {
   position: relative;
   display: flex;
   flex: 1;
 }
 
@@ -74,17 +75,20 @@
   margin: 0;
   flex: 1;
   overflow: hidden;
 }
 
 /* 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-buttons-end,
+#toolbox-option-container,
+#toolbox-controls,
+#toolbox-dock-buttons {
   display: flex;
   align-items: stretch;
 }
 
 /* Toolbox tabs */
 .devtools-tab {
   position: relative;
   display: flex;
@@ -253,20 +257,16 @@
   padding-inline-start: 1px;
 }
 #toolbox-option-container img {
   margin: 0 3px;
 }
 
 /* Toolbox controls */
 
-#toolbox-controls, #toolbox-dock-buttons {
-  display: flex;
-}
-
 /* Save space in Firebug theme */
 .theme-firebug #toolbox-controls button {
   margin-inline-start: 0 !important;
   min-width: 12px;
   margin: 0 1px;
 }
 
 #toolbox-close::before {