Bug 1288238 - Move the computed toolbar below the box model r=jdescottes

devtools/client/inspector/inspector.xul

@@ -97,24 +97,9 @@
       </html:div>
 
       <html:div id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar inspector-tabpanel">
-        <html:div class="devtools-toolbar">
-          <html:div class="devtools-searchbox">
-            <html:input id="computedview-searchbox"
-                        class="devtools-filterinput devtools-rule-searchbox"
-                        type="search"
-                        placeholder="&filterStylesPlaceholder;"/>
-            <html:button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
-          </html:div>
-          <html:label id="browser-style-checkbox-label" for="browser-style-checkbox">
-            <html:input id="browser-style-checkbox"
-                        type="checkbox"
-                        class="includebrowserstyles"
-                        label="&browserStylesLabel;"/>&browserStylesLabel;</html:label>
-        </html:div>
-
         <html:div id="computedview-container">
           <html:div id="computedview-container-focusable" tabindex="-1">
-            <html:div id="layout-wrapper" class="theme-separator" tabindex="0">
+            <html:div id="layout-wrapper" tabindex="0">
               <html:div id="layout-header">
                 <html:div id="layout-expander" class="expander theme-twisty expandable" open=""></html:div>
                 <html:span>&layoutViewTitle;</html:span>
@@ -166,6 +151,21 @@
               </html:div>
             </html:div>
 
+            <html:div id="computedview-toolbar" class="devtools-toolbar">
+              <html:div class="devtools-searchbox">
+                <html:input id="computedview-searchbox"
+                            class="devtools-filterinput devtools-rule-searchbox"
+                            type="search"
+                            placeholder="&filterStylesPlaceholder;"/>
+                <html:button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
+              </html:div>
+              <html:label id="browser-style-checkbox-label" for="browser-style-checkbox">
+                <html:input id="browser-style-checkbox"
+                            type="checkbox"
+                            class="includebrowserstyles"
+                            label="&browserStylesLabel;"/>&browserStylesLabel;</html:label>
+            </html:div>
+
             <html:div id="propertyContainer" class="theme-separator" tabindex="0">
             </html:div>
 

devtools/client/themes/computed.css

@@ -11,7 +11,22 @@
   height: 100%;
 }
 
-#sidebar-panel-computedview > .devtools-toolbar {
+#computedview-container {
+  overflow: auto;
+  height: 100%;
+}
+
+/* This extra wrapper only serves as a way to get the content of the view focusable.
+   So that when the user reaches it either via keyboard or mouse, we know that the view
+   is focused and therefore can handle shortcuts.
+   However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
+   through it, and the outline is hidden. */
+#computedview-container-focusable {
+  height: 100%;
+  outline: none;
+}
+
+#computedview-toolbar {
   display: flex;
 }
 
@@ -32,28 +47,11 @@
   align-items: center;
 }
 
-#computedview-container {
-  overflow: auto;
-  height: 100%;
-}
-
 #propertyContainer {
   -moz-user-select: text;
   overflow-y: auto;
   overflow-x: hidden;
   flex: auto;
-  border-top-width: 1px;
-  border-top-style: dotted;
-}
-
-/* This extra wrapper only serves as a way to get the content of the view focusable.
-   So that when the user reaches it either via keyboard or mouse, we know that the view
-   is focused and therefore can handle shortcuts.
-   However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
-   through it, and the outline is hidden. */
-#computedview-container-focusable {
-  height: 100%;
-  outline: none;
 }
 
 .row-striped {

devtools/client/themes/layout.css

@@ -2,6 +2,12 @@
  * 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/ */
 
+#layout-wrapper {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-color: var(--theme-splitter-color);
+}
+
 #layout-container {
   /* The view will grow bigger as the window gets resized, until 400px */
   max-width: 400px;