Bug 692409 - Add a pretty resizer and the dark theme to the debugger. r=rcampbell

browser/devtools/debugger/DebuggerUI.jsm

@@ -197,7 +197,7 @@ DebuggerPane.prototype = {
     let ownerDocument = gBrowser.parentNode.ownerDocument;
 
     this._splitter = ownerDocument.createElement("splitter");
-    this._splitter.setAttribute("class", "hud-splitter");
+    this._splitter.setAttribute("class", "devtools-horizontal-splitter");
 
     this._frame = ownerDocument.createElement("iframe");
     this._frame.height = DebuggerPreferences.height;

browser/devtools/debugger/debugger.xul

@@ -98,6 +98,7 @@
       <menulist id="scripts" class="devtools-menulist"
                 label="&debuggerUI.emptyScriptText;"/>
       <textbox id="scripts-search" type="search"
+               class="devtools-searchinput"
                emptytext="&debuggerUI.emptyFilterText;"/>
       <spacer flex="1"/>
 #ifndef XP_MACOSX

browser/devtools/highlighter/TreePanel.jsm

@@ -168,6 +168,7 @@ TreePanel.prototype = {
 
     this.splitter = this.document.createElement("splitter");
     this.splitter.id = "inspector-tree-splitter";
+    this.splitter.className = "devtools-horizontal-splitter";
 
     let container = this.document.getElementById("appcontent");
     container.appendChild(this.splitter);

browser/themes/gnomestripe/browser.css

@@ -2413,16 +2413,6 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   border-radius: 0 3px 3px 0;
 }
 
-#inspector-tree-splitter {
-  -moz-appearance: none;
-  border-top: 1px solid black;
-  border-bottom-width: 0;
-  min-height: 3px;
-  height: 3px;
-  margin-bottom: -3px;
-  position: relative;
-}
-
 .gcli-panel-inner-arrowcontent {
   padding: 0;
 }

browser/themes/gnomestripe/devtools/common.css

@@ -149,3 +149,15 @@
      use evil CSS to give the impression of smaller content */
   margin: -4px;
 }
+
+/* Splitter */
+
+.devtools-horizontal-splitter {
+  -moz-appearance: none;
+  border-top: 1px solid black;
+  border-bottom-width: 0;
+  min-height: 3px;
+  height: 3px;
+  margin-bottom: -3px;
+  position: relative;
+}

browser/themes/gnomestripe/devtools/debugger.css

@@ -49,18 +49,6 @@ a {
   font: inherit;
 }
 
-/**
- * Debugger toolbar
- */
-
-#dbg-toolbar {
-  padding: 2px;
-}
-
-#dbg-toolbar > button {
-  text-align: center;
-}
-
 /**
  * Debugger content
  */

browser/themes/pinstripe/browser.css

@@ -3151,16 +3151,6 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   border-radius: 0 @toolbarbuttonCornerRadius@ @toolbarbuttonCornerRadius@ 0;
 }
 
-#inspector-tree-splitter {
-  -moz-appearance: none;
-  border-top: 1px solid black;
-  border-bottom-width: 0;
-  min-height: 3px;
-  height: 3px;
-  margin-bottom: -3px;
-  position: relative;
-}
-
 .gcli-panel-inner-arrowcontent {
   padding: 0;
 }

browser/themes/pinstripe/devtools/common.css

@@ -163,3 +163,16 @@
 .devtools-closebutton:active {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
+
+/* Splitter */
+
+.devtools-horizontal-splitter {
+  -moz-appearance: none;
+  background-image: none;
+  border-top: 1px solid black;
+  border-bottom-width: 0;
+  min-height: 3px;
+  height: 3px;
+  margin-bottom: -3px;
+  position: relative;
+}

browser/themes/pinstripe/devtools/debugger.css

@@ -49,22 +49,6 @@ a {
   font: inherit;
 }
 
-/**
- * Debugger toolbar
- */
-
-#dbg-toolbar {
-  padding: 2px;
-}
-
-#dbg-toolbar > button {
-  text-align: center;
-}
-
-#dbg-toolbar > button, menulist {
-  -moz-appearance: toolbarbutton;
-}
-
 /**
  * Debugger content
  */

browser/themes/winstripe/browser.css

@@ -3080,16 +3080,6 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   border-radius: 0 3px 3px 0;
 }
 
-#inspector-tree-splitter {
-  -moz-appearance: none;
-  border-top: 1px solid black;
-  border-bottom-width: 0;
-  min-height: 3px;
-  height: 3px;
-  margin-bottom: -3px;
-  position: relative;
-}
-
 .gcli-panel-inner-arrowcontent {
   padding: 0;
 }

browser/themes/winstripe/devtools/common.css

@@ -171,3 +171,16 @@
 .devtools-closebutton:hover:active {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
+
+/* Splitter */
+
+.devtools-horizontal-splitter {
+  -moz-appearance: none;
+  border-width: 1px 0 0 0;
+  -moz-border-top-colors: black;
+  background-color: transparent;
+  min-height: 3px;
+  height: 3px;
+  margin-bottom: -3px;
+  position: relative;
+}

browser/themes/winstripe/devtools/debugger.css

@@ -49,18 +49,6 @@ a {
   font: inherit;
 }
 
-/**
- * Debugger toolbar
- */
-
-#dbg-toolbar {
-  padding: 2px;
-}
-
-#dbg-toolbar > button {
-  text-align: center;
-}
-
 /**
  * Debugger content
  */