Bug 1288238 - Move the computed toolbar below the box model r=jdescottes
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 22 Jul 2016 14:24:19 -0400
changeset 348420 48cee0fccdb3369df7af58c63329a25fb088832b
parent 348419 6df3913433336ceaa463d831fef7c0ee5a2efa21
child 348421 f70cf3b330110df340514a3dfef0696c852a3ee3
push id1230
push userjlund@mozilla.com
push dateMon, 31 Oct 2016 18:13:35 +0000
treeherdermozilla-release@5e06e3766db2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1288238
milestone50.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 1288238 - Move the computed toolbar below the box model r=jdescottes
devtools/client/inspector/inspector.xul
devtools/client/themes/computed.css
devtools/client/themes/layout.css
--- a/devtools/client/inspector/inspector.xul
+++ b/devtools/client/inspector/inspector.xul
@@ -92,34 +92,19 @@
 
         <html:div id="ruleview-container" class="ruleview">
           <html:div id="ruleview-container-focusable" tabindex="-1">
           </html:div>
         </html:div>
       </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>
                 <html:button class="devtools-button" id="layout-geometry-editor" title="&geometry.button.tooltip;"></html:button>
               </html:div>
 
               <html:div id="layout-container">
                 <html:div id="layout-main">
@@ -161,16 +146,31 @@
                 </html:div>
 
                 <html:div style="display: none">
                   <html:p id="layout-dummy"></html:p>
                 </html:div>
               </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>
 
             <html:div id="computedview-no-results" hidden="">
               &noPropertiesFound;
             </html:div>
           </html:div>
         </html:div>
--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -6,17 +6,32 @@
 #sidebar-panel-computedview {
   margin: 0;
   display : flex;
   flex-direction: column;
   width: 100%;
   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;
 }
 
 #browser-style-checkbox {
   /* Bug 1200073 - extra space before the browser styles checkbox so
      they aren't squished together in a small window. Put also
      an extra space after. */
   margin-inline-start: 5px;
@@ -27,38 +42,21 @@
   margin-right: 5px;
 
   /* Vertically center the 'Browser styles' checkbox in the
      Computed panel with its label. */
   display: flex;
   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 {
   background: var(--theme-body-background);
 }
 
 .property-view-hidden,
 .property-content-hidden {
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -1,12 +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/ */
 
+#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;
   margin: 0px auto;
   padding: 0;
 }
 
 /* Header */