Bug 872058 - Move the clear button next to the output/checkbox buttons, r=msucan

browser/devtools/webconsole/webconsole.xul

@@ -128,12 +128,13 @@
           </menupopup>
         </toolbarbutton>
 
+        <toolbarbutton class="webconsole-clear-console-button devtools-toolbarbutton"
+                       label="&btnClear.label;" tooltiptext="&btnClear.tooltip;"/>
+
         <spacer flex="1"/>
 
         <textbox class="compact hud-filter-box devtools-searchinput" type="search"
                  placeholder="&filterOutput.placeholder;"/>
-        <toolbarbutton class="webconsole-clear-console-button devtools-toolbarbutton"
-                       label="&btnClear.label;" tooltiptext="&btnClear.tooltip;"/>
       </toolbar>
 
       <richlistbox class="hud-output-node" orient="vertical" flex="1"

browser/themes/linux/devtools/common.css

@@ -18,6 +18,7 @@
 
 .devtools-toolbar {
   -moz-appearance: none;
+  min-height: 34px;
   padding: 4px 3px;
   color: hsl(210,30%,85%);
   background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
@@ -257,6 +258,7 @@
 
 .devtools-sidebar-tabs > tabs > tab {
   -moz-appearance: none;
+  min-height: 33px;
   /* We want to match the height of a toolbar with a toolbarbutton
    * First, we need to replicated the padding of toolbar (4px),
    * then, the padding of the button itself from toolbarbutton.css (3px),

browser/themes/linux/devtools/netmonitor.css

@@ -19,7 +19,6 @@
 #requests-menu-toolbar {
   padding: 0;
   -moz-padding-start: 4px;
-  height: 32px;
 }
 
 .requests-menu-header:first-child {
@@ -367,7 +366,7 @@ box.requests-menu-status[code^="5"] {
 /* Responsive sidebar */
 @media (max-width: 700px) {
   #requests-menu-toolbar {
-    height: 26px;
+    min-height: 26px;
   }
 
   .requests-menu-header-button {

browser/themes/linux/devtools/widgets.css

@@ -396,6 +396,7 @@
 }
 
 .variables-view-scope > .title {
+  min-height: 20px !important;
   color: #fff;
 }
 

browser/themes/osx/devtools/common.css

@@ -19,6 +19,7 @@
 
 .devtools-toolbar {
   -moz-appearance: none;
+  min-height: 34px;
   padding: 4px 3px;
   color: hsl(210,30%,85%);
   background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
@@ -269,6 +270,7 @@
 
 .devtools-sidebar-tabs > tabs > tab {
   -moz-appearance: none;
+  min-height: 33px;
   /* We want to match the height of a toolbar with a toolbarbutton
    * First, we need to replicated the padding of toolbar (4px),
    * then, the padding of the button itself from toolbarbutton.css (3px),

browser/themes/osx/devtools/netmonitor.css

@@ -19,7 +19,6 @@
 #requests-menu-toolbar {
   padding: 0;
   -moz-padding-start: 4px;
-  height: 32px;
 }
 
 .requests-menu-header:first-child {
@@ -367,7 +366,7 @@ box.requests-menu-status[code^="5"] {
 /* Responsive sidebar */
 @media (max-width: 700px) {
   #requests-menu-toolbar {
-    height: 24px;
+    min-height: 24px;
   }
 
   .requests-menu-header-button {

browser/themes/osx/devtools/widgets.css

@@ -396,6 +396,7 @@
 }
 
 .variables-view-scope > .title {
+  min-height: 20px !important;
   color: #fff;
 }
 

browser/themes/windows/devtools/common.css

@@ -17,6 +17,7 @@
 
 .devtools-toolbar {
   -moz-appearance: none;
+  min-height: 34px;
   padding: 4px 3px;
   color: hsl(210,30%,85%);
   background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
@@ -277,6 +278,7 @@
 
 .devtools-sidebar-tabs > tabs > tab {
   -moz-appearance: none;
+  min-height: 33px;
   /* We want to match the height of a toolbar with a toolbarbutton
    * First, we need to replicated the padding of toolbar (4px),
    * then, the padding of the button itself from toolbarbutton.css (3px),

browser/themes/windows/devtools/netmonitor.css

@@ -19,7 +19,6 @@
 #requests-menu-toolbar {
   padding: 0;
   -moz-padding-start: 4px;
-  height: 33px;
 }
 
 .requests-menu-header:first-child {
@@ -367,7 +366,7 @@ box.requests-menu-status[code^="5"] {
 /* Responsive sidebar */
 @media (max-width: 700px) {
   #requests-menu-toolbar {
-    height: 24px;
+    min-height: 24px;
   }
 
   .requests-menu-header-button {

browser/themes/windows/devtools/widgets.css

@@ -399,6 +399,7 @@
 }
 
 .variables-view-scope > .title {
+  min-height: 20px !important;
   color: #fff;
 }