Bug 1108040 - Make splitter visible when inspector is docked to side by properly overriding the vertical styles and applying the horizontal styles;r=vporof
authorBrian Grinstead <bgrinstead@mozilla.com>
Tue, 09 Dec 2014 15:16:54 -0800
changeset 218970 f5acd76febf5646bace610d6522cd863d02849d7
parent 218969 2a49de2134508d5b1bdf6d23c510ce7146799626
child 218971 6588279177dd0cf4a8ddf39e9a4bdeb22f308e3f
push id27950
push usercbook@mozilla.com
push dateWed, 10 Dec 2014 10:58:50 +0000
treeherderautoland@5b01216f97f8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof
bugs1108040
milestone37.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 1108040 - Make splitter visible when inspector is docked to side by properly overriding the vertical styles and applying the horizontal styles;r=vporof
browser/themes/shared/devtools/dark-theme.css
browser/themes/shared/devtools/light-theme.css
browser/themes/shared/devtools/toolbars.inc.css
browser/themes/shared/devtools/widgets.inc.css
--- a/browser/themes/shared/devtools/dark-theme.css
+++ b/browser/themes/shared/devtools/dark-theme.css
@@ -379,25 +379,16 @@ div.CodeMirror span.eval-text {
   color: white;
   border-bottom: 1px solid #434850;
 }
 
 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
   border-bottom: 0;
 }
 
-.devtools-horizontal-splitter {
-  border-bottom: 1px solid var(--theme-splitter-color);
-}
-
-.devtools-side-splitter {
-  -moz-border-end: 1px solid var(--theme-splitter-color);
-  border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */
-}
-
 .devtools-textinput,
 .devtools-searchinput {
   background-color: rgba(24, 29, 32, 1);
   color: rgba(184, 200, 217, 1);
 }
 
 .CodeMirror-Tern-fname {
   color: #f7f7f7;
--- a/browser/themes/shared/devtools/light-theme.css
+++ b/browser/themes/shared/devtools/light-theme.css
@@ -388,25 +388,16 @@ div.CodeMirror span.eval-text {
   color: black;
   border-bottom: 1px solid #d9e1e8;
 }
 
 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
   border-bottom: 0;
 }
 
-.devtools-horizontal-splitter {
-  border-bottom: 1px solid var(--theme-splitter-color);
-}
-
-.devtools-side-splitter {
-  -moz-border-end: 1px solid var(--theme-splitter-color);
-  border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */
-}
-
 .CodeMirror-hints,
 .CodeMirror-Tern-tooltip {
   box-shadow: 0 0 4px rgba(128, 128, 128, .5);
   background-color: var(--theme-sidebar-background);
 }
 
 
 %include toolbars.inc.css
--- a/browser/themes/shared/devtools/toolbars.inc.css
+++ b/browser/themes/shared/devtools/toolbars.inc.css
@@ -848,8 +848,18 @@
 .hidden-labels-box:not(.visible) > label,
 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
   display: none;
 }
 
 .devtools-invisible-splitter {
   border-color: transparent;
 }
+
+.devtools-horizontal-splitter {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.devtools-side-splitter {
+  -moz-border-end: 1px solid var(--theme-splitter-color);
+  border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */
+}
+
--- a/browser/themes/shared/devtools/widgets.inc.css
+++ b/browser/themes/shared/devtools/widgets.inc.css
@@ -45,23 +45,30 @@
 }
 
 @media (max-width: 700px) {
   .devtools-responsive-container {
     -moz-box-orient: vertical;
   }
 
   .devtools-responsive-container > .devtools-side-splitter {
-    border-width: 0;
-    border-top-width: 1px;
-    border-top-style: solid;
-    margin: 0;
+    /* This is a normally vertical splitter, but we have turned it horizontal
+       due to the smaller resolution */
     min-height: 3px;
     height: 3px;
-    margin-bottom: -3px;
+    margin-top: -3px;
+
+    /* Reset the vertical splitter styles */
+    border-width: 0;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    -moz-margin-start: 0;
+    width: auto;
+    min-width: 0;
+
     /* In some edge case the cursor is not changed to n-resize */
     cursor: n-resize;
   }
 
   .devtools-responsive-container > .devtools-sidebar-tabs {
     min-height: 35vh;
     max-height: 75vh;
   }