Bug 971959 - Fix z-ordering of DevTools toolbar buttons. r=bgrins

browser/devtools/canvasdebugger/canvasdebugger.xul

@@ -41,7 +41,7 @@
       <vbox id="snapshots-list" flex="1"/>
     </vbox>
 
-    <vbox id="debugging-pane" flex="1">
+    <vbox id="debugging-pane" class="devtools-main-content" flex="1">
       <hbox id="reload-notice"
             class="notice-container"
             align="center"

browser/devtools/debugger/debugger.xul

@@ -410,7 +410,7 @@
       </tabbox>
       <splitter id="sources-and-editor-splitter"
                 class="devtools-side-splitter"/>
-      <deck id="editor-deck" flex="1">
+      <deck id="editor-deck" flex="1" class="devtools-main-content">
         <vbox id="editor"/>
         <vbox id="black-boxed-message"
               align="center"

browser/devtools/inspector/inspector.xul

@@ -79,7 +79,7 @@
   </popupset>
 
   <box flex="1" class="devtools-responsive-container theme-body">
-    <vbox flex="1">
+    <vbox flex="1" class="devtools-main-content">
       <toolbar id="inspector-toolbar"
         class="devtools-toolbar"
         nowindowdrag="true">

browser/devtools/netmonitor/netmonitor.xul

@@ -51,7 +51,7 @@
       <hbox id="network-table-and-sidebar"
             class="devtools-responsive-container"
             flex="1">
-        <vbox id="network-table" flex="1">
+        <vbox id="network-table" flex="1" class="devtools-main-content">
           <toolbar id="requests-menu-toolbar"
                    class="devtools-toolbar"
                    align="center">

browser/devtools/styleeditor/styleeditor.xul

@@ -120,7 +120,7 @@
         </xul:box> <!-- .splitview-nav-container -->
       </xul:box>   <!-- .splitview-controller -->
       <xul:splitter class="devtools-side-splitter splitview-landscape-splitter devtools-invisible-splitter"/>
-      <xul:box class="splitview-side-details"/>
+      <xul:box class="splitview-side-details devtools-main-content"/>
 
       <div id="splitview-templates" hidden="true">
         <li id="splitview-tpl-summary-stylesheet" tabindex="0">

browser/devtools/webconsole/webconsole.xul

@@ -9,6 +9,8 @@
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/common.css"
                  type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css"
+                 type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/webconsole.css"
                  type="text/css"?>
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
@@ -82,7 +84,7 @@ function goUpdateConsoleCommands() {
   <tooltip id="aHTMLTooltip" page="true"/>
 
   <box class="hud-outer-wrapper devtools-responsive-container theme-body" flex="1">
-    <vbox class="hud-console-wrapper" flex="1">
+    <vbox class="hud-console-wrapper devtools-main-content" flex="1">
       <toolbar class="hud-console-filter-toolbar devtools-toolbar" mode="full">
         <hbox class="devtools-toolbarbutton-group">
           <toolbarbutton label="&btnPageNet.label;" type="menu-button"

browser/themes/shared/devtools/widgets.inc.css

@@ -34,6 +34,16 @@
   -moz-box-orient: horizontal;
 }
 
+.devtools-main-content {
+  min-width: 50px;
+}
+
+.devtools-main-content,
+.devtools-sidebar-tabs {
+  /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
+  position: relative;
+}
+
 @media (max-width: 700px) {
   .devtools-responsive-container {
     -moz-box-orient: vertical;