From a6028929b9fce7ff5ac9cf30f461fecd36b544e7 Mon Sep 17 00:00:00 2001
From: Victor Porof <vporof@mozilla.com>
Date: Tue, 9 Apr 2013 22:05:34 +0300
Subject: [PATCH] Bug 843287 - UI improvements for the variables view and
 sidebar, r=msucan

---
 ...ser_webconsole_bug_598357_jsterm_output.js |  2 --
 browser/devtools/webconsole/webconsole.js     | 10 --------
 browser/devtools/webconsole/webconsole.xul    |  2 +-
 browser/themes/linux/devtools/webconsole.css  | 24 ++++---------------
 browser/themes/osx/devtools/webconsole.css    | 24 ++++---------------
 .../themes/windows/devtools/webconsole.css    | 23 ++++--------------
 6 files changed, 16 insertions(+), 69 deletions(-)

diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_598357_jsterm_output.js b/browser/devtools/webconsole/test/browser_webconsole_bug_598357_jsterm_output.js
index d805d6813e2d..03b6b1825160 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_598357_jsterm_output.js
+++ b/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) {
diff --git a/browser/devtools/webconsole/webconsole.js b/browser/devtools/webconsole/webconsole.js
index 2d227b402aaf..5155bb38f37f 100644
--- a/browser/devtools/webconsole/webconsole.js
+++ b/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");
   },
 
   /**
diff --git a/browser/devtools/webconsole/webconsole.xul b/browser/devtools/webconsole/webconsole.xul
index a9f5c5aea1d6..2f747198bafc 100644
--- a/browser/devtools/webconsole/webconsole.xul
+++ b/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/>
diff --git a/browser/themes/linux/devtools/webconsole.css b/browser/themes/linux/devtools/webconsole.css
index b8824dc5afe1..2e223f2c7241 100644
--- a/browser/themes/linux/devtools/webconsole.css
+++ b/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;
 }
diff --git a/browser/themes/osx/devtools/webconsole.css b/browser/themes/osx/devtools/webconsole.css
index 54d39e93fdfc..86f49da0efce 100644
--- a/browser/themes/osx/devtools/webconsole.css
+++ b/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;
 }
diff --git a/browser/themes/windows/devtools/webconsole.css b/browser/themes/windows/devtools/webconsole.css
index 63ea5fe1b6fb..5364f180c734 100644
--- a/browser/themes/windows/devtools/webconsole.css
+++ b/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;
 }