Bug 843287 - UI improvements for the variables view and sidebar, r=msucan

browser/devtools/webconsole/test/browser_webconsole_bug_598357_jsterm_output.js

@@ -236,8 +236,6 @@ function testGen() {
     ok(showsPropertyPanel,
       "the property panel shown for inputValues[" + cpos + "]");
 
-    HUD.jsterm._splitter.state = "collapsed";
-
     popupShown[cpos] = true;
 
     if (showsPropertyPanel) {

browser/devtools/webconsole/webconsole.js

@@ -2616,13 +2616,6 @@ JSTerm.prototype = {
    */
   sidebar: null,
 
-  /**
-   * The Web Console splitter between output and the sidebar.
-   * @private
-   * @type nsIDOMElement
-   */
-  _splitter: null,
-
   /**
    * The Variables View instance shown in the sidebar.
    * @private
@@ -2707,8 +2700,6 @@ JSTerm.prototype = {
     this.inputNode.addEventListener("input", this._inputEventHandler, false);
     this.inputNode.addEventListener("keyup", this._inputEventHandler, false);
 
-    this._splitter = doc.querySelector(".devtools-side-splitter");
-
     this.lastInputValue && this.setInputValue(this.lastInputValue);
   },
 
@@ -3025,7 +3016,6 @@ JSTerm.prototype = {
       this.sidebar = new ToolSidebar(tabbox, this);
     }
     this.sidebar.show();
-    this._splitter.setAttribute("state", "open");
   },
 
   /**

browser/devtools/webconsole/webconsole.xul

@@ -139,7 +139,7 @@
       </hbox>
     </vbox>
 
-    <splitter class="devtools-side-splitter" collapse="after" state="collapsed" />
+    <splitter class="devtools-side-splitter"/>
 
     <tabbox id="webconsole-sidebar" class="devtools-sidebar-tabs" hidden="true" width="300">
       <tabs/>

browser/themes/linux/devtools/webconsole.css

@@ -2,16 +2,6 @@
  * 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/. */
 
-.hud-outer-wrapper {
-  width: 100%;
-  height: 100%;
-}
-
-.hud-console-wrapper {
-  width: 100%;
-  overflow: auto;
-}
-
 /* General output styles */
 
 .webconsole-timestamp {
@@ -103,7 +93,6 @@
 .hud-output-node {
   -moz-appearance: none;
   border-bottom: 1px solid ThreeDShadow;
-  border-top: 1px solid ThreeDShadow;
   margin: 0;
   font-size: 0.9em;
 }
@@ -115,8 +104,7 @@
 
 /* WebConsole colored drops */
 
-.webconsole-filter-button,
-.webconsole-filter-button[checked=true] {
+.webconsole-filter-button[checked] {
   color: white !important;
 }
 
@@ -243,14 +231,12 @@
 .webconsole-msg-inspector iframe {
   height: 7em;
   margin-bottom: 15px;
-}
-
-.devtools-side-splitter {
-  background: #666;
-  width: 2px;
+  -moz-margin-end: 15px;
+  border-radius: 4px;
+  box-shadow: 0 0 12px #dfdfdf;
 }
 
 #webconsole-sidebar > tabs {
   height: 0;
-  overflow: hidden;
+  border: none;
 }

browser/themes/osx/devtools/webconsole.css

@@ -4,16 +4,6 @@
 
 %include ../shared.inc
 
-.hud-outer-wrapper {
-  width: 100%;
-  height: 100%;
-}
-
-.hud-console-wrapper {
-  width: 100%;
-  overflow: auto;
-}
-
 /* General output styles */
 
 .webconsole-timestamp {
@@ -96,7 +86,6 @@
 .hud-output-node {
   -moz-appearance: none;
   border-bottom: 1px solid ThreeDShadow;
-  border-top: 1px solid ThreeDShadow;
   margin: 0;
 }
 
@@ -107,8 +96,7 @@
 
 /* WebConsole colored drops */
 
-.webconsole-filter-button,
-.webconsole-filter-button[checked=true] {
+.webconsole-filter-button[checked] {
   color: white !important;
 }
 
@@ -247,14 +235,12 @@
 .webconsole-msg-inspector iframe {
   height: 7em;
   margin-bottom: 15px;
-}
-
-.devtools-side-splitter {
-  background: #666;
-  width: 2px;
+  -moz-margin-end: 15px;
+  border-radius: 4px;
+  box-shadow: 0 0 12px #dfdfdf;
 }
 
 #webconsole-sidebar > tabs {
   height: 0;
-  overflow: hidden;
+  border: none;
 }

browser/themes/windows/devtools/webconsole.css

@@ -2,16 +2,6 @@
  * 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/. */
 
-.hud-outer-wrapper {
-  width: 100%;
-  height: 100%;
-}
-
-.hud-console-wrapper {
-  width: 100%;
-  overflow: auto;
-}
-
 /* General output styles */
 
 .webconsole-timestamp {
@@ -94,7 +84,6 @@
 .hud-output-node {
   -moz-appearance: none;
   border-bottom: 1px solid ThreeDShadow;
-  border-top: 1px solid ThreeDShadow;
   margin: 0;
 }
 
@@ -105,7 +94,7 @@
 
 /* WebConsole colored drops */
 
-.webconsole-filter-button[checked=true] {
+.webconsole-filter-button[checked] {
   color: white !important;
 }
 
@@ -251,14 +240,12 @@
 .webconsole-msg-inspector iframe {
   height: 7em;
   margin-bottom: 15px;
-}
-
-.devtools-side-splitter {
-  background: #666;
-  width: 2px;
+  -moz-margin-end: 15px;
+  border-radius: 4px;
+  box-shadow: 0 0 12px #dfdfdf;
 }
 
 #webconsole-sidebar > tabs {
   height: 0;
-  overflow: hidden;
+  border: none;
 }