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

@@ -384,15 +384,6 @@ div.CodeMirror span.eval-text {
   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);

browser/themes/shared/devtools/light-theme.css

@@ -393,15 +393,6 @@ div.CodeMirror span.eval-text {
   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);

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

@@ -853,3 +853,13 @@
 .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. */
+}
+

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

@@ -50,13 +50,20 @@
   }
 
   .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;
   }