Bug 777011: WebConsole dark toolbar. r=robcee
authorPaul Rouget <paul@mozilla.com>
Sat, 25 Aug 2012 14:29:20 +0200
changeset 105437 9ea94325f9f5d62832f5880557e28e07d3188ef7
parent 105436 350499bc1b85b32fbf55da7b78b611664bca21aa
child 105438 cbaa56e4bebbe9a4408df611e36a03301553a859
push id55
push usershu@rfrn.org
push dateThu, 30 Aug 2012 01:33:09 +0000
reviewersrobcee
bugs777011
milestone17.0a1
Bug 777011: WebConsole dark toolbar. r=robcee
browser/devtools/webconsole/HUDService.jsm
browser/devtools/webconsole/webconsole.js
browser/devtools/webconsole/webconsole.xul
browser/themes/gnomestripe/browser.css
browser/themes/gnomestripe/devtools/common.css
browser/themes/gnomestripe/devtools/webconsole.css
browser/themes/pinstripe/browser.css
browser/themes/pinstripe/devtools/common.css
browser/themes/pinstripe/devtools/webconsole.css
browser/themes/winstripe/browser.css
browser/themes/winstripe/devtools/common.css
browser/themes/winstripe/devtools/webconsole.css
--- a/browser/devtools/webconsole/HUDService.jsm
+++ b/browser/devtools/webconsole/HUDService.jsm
@@ -436,17 +436,19 @@ HUD_SERVICE.prototype =
   {
     let HUD = this.hudReferences[aHUDId];
     let innerHeight = HUD.tab.linkedBrowser.clientHeight;
     let chromeWindow = HUD.chromeWindow;
     if (!HUD.consolePanel) {
       let splitterStyle = chromeWindow.getComputedStyle(HUD.splitter, null);
       innerHeight += parseInt(splitterStyle.height) +
                      parseInt(splitterStyle.borderTopWidth) +
-                     parseInt(splitterStyle.borderBottomWidth);
+                     parseInt(splitterStyle.borderBottomWidth) +
+                     parseInt(splitterStyle.marginTop) +
+                     parseInt(splitterStyle.marginBottom);
     }
 
     let boxStyle = chromeWindow.getComputedStyle(HUD.iframe, null);
     innerHeight += parseInt(boxStyle.height) +
                    parseInt(boxStyle.borderTopWidth) +
                    parseInt(boxStyle.borderBottomWidth);
 
     let height = this.lastConsoleHeight > 0 ? this.lastConsoleHeight :
@@ -593,21 +595,21 @@ WebConsole.prototype = {
 
   /**
    * Initialize the Web Console UI. This method sets up the iframe.
    * @private
    */
   _initUI: function WC__initUI()
   {
     this.splitter = this.chromeDocument.createElement("splitter");
-    this.splitter.setAttribute("class", "web-console-splitter");
+    this.splitter.className = "devtools-horizontal-splitter";
 
     this.iframe = this.chromeDocument.createElement("iframe");
     this.iframe.setAttribute("id", this.hudId);
-    this.iframe.setAttribute("class", "web-console-frame");
+    this.iframe.className = "web-console-frame";
     this.iframe.setAttribute("animated", "true");
     this.iframe.setAttribute("tooltip", "aHTMLTooltip");
     this.iframe.style.height = 0;
     this.iframe.addEventListener("load", this._onIframeLoad, true);
     this.iframe.setAttribute("src", UI_IFRAME_URL);
 
     let position = Services.prefs.getCharPref("devtools.webconsole.position");
     this.positionConsole(position);
--- a/browser/devtools/webconsole/webconsole.js
+++ b/browser/devtools/webconsole/webconsole.js
@@ -345,17 +345,17 @@ WebConsoleFrame.prototype = {
     saveBodies.setAttribute("checked", this.saveRequestAndResponseBodies);
 
     let contextMenuId = this.outputNode.getAttribute("context");
     let contextMenu = doc.getElementById(contextMenuId);
     contextMenu.addEventListener("popupshowing", function() {
       saveBodies.setAttribute("checked", this.saveRequestAndResponseBodies);
     }.bind(this));
 
-    this.closeButton = doc.getElementsByClassName("webconsole-close-button")[0];
+    this.closeButton = doc.getElementById("webconsole-close-button");
     this.closeButton.addEventListener("command",
                                       this.owner.onCloseButton.bind(this.owner));
 
     let clearButton = doc.getElementsByClassName("webconsole-clear-console-button")[0];
     clearButton.addEventListener("command",
                                  this.owner.onClearButton.bind(this.owner));
   },
 
--- a/browser/devtools/webconsole/webconsole.xul
+++ b/browser/devtools/webconsole/webconsole.xul
@@ -2,16 +2,18 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - 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/. -->
 <!DOCTYPE window [
 <!ENTITY % webConsoleDTD SYSTEM "chrome://browser/locale/devtools/webConsole.dtd">
 %webConsoleDTD;
 ]>
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/common.css"
+                 type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/webconsole.css"
                  type="text/css"?>
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         title="&window.title;"
         windowtype="devtools:webconsole"
         persist="screenX screenY width height sizemode">
   <script type="text/javascript" src="chrome://global/content/globalOverlay.js"/>
@@ -41,88 +43,91 @@
                 accesskey="&saveBodies.accesskey;"/>
       <menuitem id="menu_copy"/>
       <menuitem id="menu_selectAll"/>
     </menupopup>
   </popupset>
 
   <vbox class="hud-outer-wrapper" flex="1">
     <vbox class="hud-console-wrapper" flex="1">
-      <toolbar class="hud-console-filter-toolbar" mode="full">
+      <toolbar class="hud-console-filter-toolbar devtools-toolbar" mode="full">
 #ifdef XP_MACOSX
-        <toolbarbutton class="webconsole-close-button"
+        <toolbarbutton id="webconsole-close-button"
+                       class="devtools-closebutton"
                        tooltiptext="&btnClose.tooltip;"/>
 #endif
 
         <toolbarbutton label="&btnPageNet.label;" type="menu-button"
-                       category="net" class="webconsole-filter-button"
+                       category="net" class="devtools-toolbarbutton webconsole-filter-button"
                        tooltiptext="&btnPageNet.tooltip;">
           <menupopup>
             <menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
                       prefKey="network"/>
             <menuitem label="&btnConsoleLog;" type="checkbox" autocheck="false"
                       prefKey="networkinfo"/>
           </menupopup>
         </toolbarbutton>
         <toolbarbutton label="&btnPageCSS.label;" type="menu-button"
-                       category="css" class="webconsole-filter-button"
+                       category="css" class="devtools-toolbarbutton webconsole-filter-button"
                        tooltiptext="&btnPageCSS.tooltip;">
           <menupopup>
             <menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
                       prefKey="csserror"/>
             <menuitem label="&btnConsoleWarnings;" type="checkbox"
                       autocheck="false" prefKey="cssparser"/>
           </menupopup>
         </toolbarbutton>
         <toolbarbutton label="&btnPageJS.label;" type="menu-button"
-                       category="js" class="webconsole-filter-button"
+                       category="js" class="devtools-toolbarbutton webconsole-filter-button"
                        tooltiptext="&btnPageJS.tooltip;">
           <menupopup>
             <menuitem label="&btnConsoleErrors;" type="checkbox"
                       autocheck="false" prefKey="exception"/>
             <menuitem label="&btnConsoleWarnings;" type="checkbox"
                       autocheck="false" prefKey="jswarn"/>
           </menupopup>
         </toolbarbutton>
         <toolbarbutton label="&btnPageLogging.label;" type="menu-button"
-                       category="logging" class="webconsole-filter-button"
+                       category="logging" class="devtools-toolbarbutton webconsole-filter-button"
                        tooltiptext="&btnPageLogging.tooltip;">
           <menupopup>
             <menuitem label="&btnConsoleErrors;" type="checkbox"
                       autocheck="false" prefKey="error"/>
             <menuitem label="&btnConsoleWarnings;" type="checkbox"
                       autocheck="false" prefKey="warn"/>
             <menuitem label="&btnConsoleInfo;" type="checkbox" autocheck="false"
                       prefKey="info"/>
             <menuitem label="&btnConsoleLog;" type="checkbox" autocheck="false"
                       prefKey="log"/>
           </menupopup>
         </toolbarbutton>
 
         <spacer flex="1"/>
 
         <toolbarbutton label="&btnPosition.label;" type="menu"
+                       class="devtools-toolbarbutton"
                        tooltiptext="&btnPosition.tooltip;">
           <menupopup>
             <menuitem label="&positionMenu.above;" type="checkbox"
                       autocheck="false" consolePosition="above"/>
             <menuitem label="&positionMenu.below;" type="checkbox"
                       autocheck="false" consolePosition="below"/>
             <menuitem label="&positionMenu.window;" type="checkbox"
                       autocheck="false" consolePosition="window"/>
           </menupopup>
         </toolbarbutton>
 
-        <textbox class="compact hud-filter-box" type="search"
+        <textbox class="compact hud-filter-box devtools-searchinput" type="search"
                  placeholder="&filterBox.placeholder;"/>
-        <toolbarbutton class="webconsole-clear-console-button"
+        <toolbarbutton class="webconsole-clear-console-button devtools-toolbarbutton"
                        label="&btnClear.label;" tooltiptext="&btnClear.tooltip;"/>
 
 #ifndef XP_MACOSX
-        <toolbarbutton class="webconsole-close-button"
+        <toolbarbutton id="webconsole-close-button"
+                       class="devtools-closebutton"
                        tooltiptext="&btnClose.tooltip;"/>
 #endif
       </toolbar>
       <richlistbox class="hud-output-node" orient="vertical" flex="1"
                    seltype="multiple" context="output-contextmenu"
                    style="direction:ltr;"/>
       <hbox class="jsterm-input-container" style="direction:ltr">
         <stack class="jsterm-stack-node" flex="1">
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -2559,21 +2559,16 @@ stack[anonid=browserStack][responsivemod
 .web-console-frame {
   border-bottom: 1px solid #aaa;
 }
 
 .web-console-frame[animated] {
   transition: height 100ms;
 }
 
-.web-console-splitter {
-  box-shadow: 0 -1px 0 0 ThreeDShadow inset, 0 0 0 10px -moz-Dialog inset;
-}
-
-
 /* Developer Toolbar */
 
 .developer-toolbar-button {
   -moz-appearance: none;
   min-width: 78px;
   min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border-radius: 3px;
--- a/browser/themes/gnomestripe/devtools/common.css
+++ b/browser/themes/gnomestripe/devtools/common.css
@@ -11,27 +11,32 @@
   box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
   background: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
   color: hsl(210,30%,85%);
 }
 
 .devtools-menulist,
 .devtools-toolbarbutton {
   -moz-appearance: none;
+  -moz-box-align: center;
   min-width: 78px;
   min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border: 1px solid hsla(210,8%,5%,.45);
   border-radius: 3px;
   background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
   box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
   margin: 0 3px;
   color: inherit;
 }
 
+.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
+  -moz-box-orient: horizontal;
+}
+
 .devtools-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
   outline: 1px dotted hsla(210,30%,85%,0.4);
   outline-offset: -4px;
 }
 
 .devtools-toolbarbutton:not([label]) {
   min-width: 32px;
@@ -39,23 +44,27 @@
 
 .devtools-toolbarbutton:not([checked=true]):hover:active {
   border-color: hsla(210,8%,5%,.6);
   background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
   box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
 }
 
 .devtools-menulist[open=true],
+.devtools-toolbarbutton[open=true],
 .devtools-toolbarbutton[checked=true] {
-  color: hsl(208,100%,60%) !important;
   border-color: hsla(210,8%,5%,.6) !important;
   background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
   box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
 }
 
+.devtools-toolbarbutton[checked=true] {
+  color: hsl(208,100%,60%) !important;
+}
+
 .devtools-toolbarbutton[checked=true]:hover {
   background-color: transparent !important;
 }
 
 .devtools-toolbarbutton[checked=true]:hover:active {
   background-color: hsla(210,8%,5%,.2) !important;
 }
 
@@ -66,16 +75,41 @@
 .devtools-menulist > .menulist-dropmarker {
   -moz-appearance: none;
   display: -moz-box;
   list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
   -moz-box-align: center;
   min-width: 16px;
 }
 
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+  -moz-appearance: none;
+  color: inherit;
+  border-width: 0;
+  -moz-border-end: 1px solid hsla(210,8%,5%,.45);
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
+  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-toolbarbutton[type=menu-button] {
+  padding: 0 1px;
+  -moz-box-align: stretch;
+}
+
+.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
+  -moz-appearance: none !important;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
+  -moz-box-align: center;
+  margin: 0 3px;
+}
+
 /* Search input */
 
 .devtools-searchinput {
   -moz-appearance: none;
   margin: 0 3px;
   border: 1px solid hsla(210,8%,5%,.6);
   border-radius: 2px;
   background-color: transparent;
@@ -88,17 +122,17 @@
   -moz-padding-end: 12px;
   box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
               0 0 0 1px hsla(210,16%,76%,.1) inset,
               0 1px 0 hsla(210,16%,76%,.15);
   color: inherit;
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl) {
-  background-position: calc(100% - 4px) 3px, top left, top left;
+  background-position: calc(100% - 4px) center, top left, top left;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
   display: none;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
   color: hsl(208,10%,66%);
--- a/browser/themes/gnomestripe/devtools/webconsole.css
+++ b/browser/themes/gnomestripe/devtools/webconsole.css
@@ -108,80 +108,88 @@
   font-size: 0.9em;
 }
 
 .hud-filtered-by-type,
 .hud-filtered-by-string {
   display: none;
 }
 
-.webconsole-clear-console-button > .toolbarbutton-icon {
-  display: none;
+/* WebConsole colored drops */
+
+.webconsole-filter-button,
+.webconsole-filter-button[checked=true] {
+  color: white !important;
 }
 
-.webconsole-filter-button {
-  margin: 0 3px;
-}
-
-.webconsole-filter-button > .toolbarbutton-menubutton-button,
-.webconsole-filter-button:not([type="menu-button"]) {
-  -moz-box-orient: horizontal;
-  list-style-image: url("chrome://browser/skin/devtools/webconsole.png");
+.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
+  content: "";
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  margin-left: 5px;
+  border-width: 1px;
+  border-style: solid;
 }
 
 /* Network styles */
-.webconsole-filter-button[category="net"] {
-  -moz-image-region: rect(0, 8px, 8px, 0);
+.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#444444, #000000);
+  border-color: #777;
 }
 
 .webconsole-msg-network > .webconsole-msg-icon-container {
   -moz-border-start: solid #000 6px;
 }
 
 .webconsole-msg-network.webconsole-msg-error {
   -moz-image-region: rect(0, 16px, 8px, 8px);
 }
 
 /* CSS styles */
-.webconsole-filter-button[category="css"] {
-  -moz-image-region: rect(8px, 8px, 16px, 0);
+.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#2DC3F3, #00B6F0);
+  border-color: #1BA2CC;
 }
 
 .webconsole-msg-cssparser > .webconsole-msg-icon-container {
   -moz-border-start: solid #00b6f0 6px;
 }
 
 .webconsole-msg-cssparser.webconsole-msg-error {
   -moz-image-region: rect(8px, 16px, 16px, 8px);
 }
 
 .webconsole-msg-cssparser.webconsole-msg-warn {
   -moz-image-region: rect(8px, 24px, 16px, 16px);
 }
 
 /* JS styles */
-.webconsole-filter-button[category="js"] {
-  -moz-image-region: rect(16px, 8px, 24px, 0);
+.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#FCB142, #FB9500);
+  border-color: #E98A00;
 }
 
 .webconsole-msg-exception > .webconsole-msg-icon-container {
   -moz-border-start: solid #fb9500 6px;
 }
 
 .webconsole-msg-exception.webconsole-msg-error {
   -moz-image-region: rect(16px, 16px, 24px, 8px);
 }
 
 .webconsole-msg-exception.webconsole-msg-warn {
   -moz-image-region: rect(16px, 24px, 24px, 16px);
 }
 
 /* Web Developer styles */
-.webconsole-filter-button[category="logging"] {
-  -moz-image-region: rect(24px, 8px, 32px, 0);
+.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#B9B9B9, #AAAAAA);
+  border-color: #929292;
 }
 
 .webconsole-msg-console > .webconsole-msg-icon-container {
   -moz-border-start: solid #cbcbcb 6px;
 }
 
 .webconsole-msg-console.webconsole-msg-error,
 .webconsole-msg-output.webconsole-msg-error {
@@ -205,20 +213,16 @@
 .webconsole-msg-input {
   -moz-image-region: rect(24px, 40px, 32px, 32px);
 }
 
 .webconsole-msg-output {
   -moz-image-region: rect(24px, 48px, 32px, 40px);
 }
 
-.webconsole-close-button {
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
-}
-
 /* JSTerm Styles */
 .jsterm-input-node,
 .jsterm-complete-node {
   border: none;
   padding: 0 0 0 16px;
   -moz-appearance: none;
 }
 
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -3278,22 +3278,16 @@ stack[anonid=browserStack][responsivemod
 .web-console-frame {
   border-bottom: 1px solid #aaa;
 }
 
 .web-console-frame[animated] {
   transition: height 100ms;
 }
 
-.web-console-splitter {
-  border-bottom: solid #a5a5a5 1px;
-  background: url("chrome://global/skin/splitter/dimple.png") no-repeat center,
-    -moz-linear-gradient(top, #fcfcfc, #dfdfdf);
-}
-
 /* Developer Toolbar */
 
 .developer-toolbar-button {
   -moz-appearance: none;
   min-width: 78px;
   min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border-radius: @toolbarbuttonCornerRadius@;
--- a/browser/themes/pinstripe/devtools/common.css
+++ b/browser/themes/pinstripe/devtools/common.css
@@ -13,26 +13,31 @@
   box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
   background-image: url(background-noise-toolbar.png), -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
   color: hsl(210,30%,85%);
 }
 
 .devtools-menulist,
 .devtools-toolbarbutton {
   -moz-appearance: none;
+  -moz-box-align: center;
   min-width: 78px;
   min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border: 1px solid hsla(210,8%,5%,.45);
   border-radius: @toolbarbuttonCornerRadius@;
   background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
   box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
   color: inherit;
 }
 
+.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
+  -moz-box-orient: horizontal;
+}
+
 .devtools-menulist {
   margin: 0 2px;
 }
 
 .devtools-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
   outline: 1px dotted hsla(210,30%,85%,0.4);
   outline-offset: -4px;
@@ -48,23 +53,27 @@
 
 .devtools-toolbarbutton:not([checked=true]):hover:active {
   border-color: hsla(210,8%,5%,.6);
   background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
   box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
 }
 
 .devtools-menulist[open=true],
+.devtools-toolbarbutton[open=true],
 .devtools-toolbarbutton[checked=true] {
-  color: hsl(208,100%,60%) !important;
   border-color: hsla(210,8%,5%,.6);
   background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
   box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
 }
 
+.devtools-toolbarbutton[checked=true] {
+  color: hsl(208,100%,60%) !important;
+}
+
 .devtools-toolbarbutton[checked=true]:hover:active {
   background-color: hsla(210,8%,5%,.2);
 }
 
 .devtools-menulist > .menulist-label-box {
   text-align: center;
 }
 
@@ -72,16 +81,41 @@
   -moz-appearance: none;
   background-color: transparent;
   display: -moz-box;
   list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
   border-width: 0;
   min-width: 18px;
 }
 
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+  -moz-appearance: none;
+  border-width: 0;
+  -moz-border-end: 1px solid hsla(210,8%,5%,.45);
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
+  padding: 0 1px;
+}
+
+.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
+  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-toolbarbutton[type=menu-button] {
+  padding: 0 1px;
+  -moz-box-align: stretch;
+}
+
+.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
+  -moz-appearance: none !important;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
+  margin: 0 3px;
+  border: 0;
+}
+
 /* Search input */
 
 .devtools-searchinput {
   -moz-appearance: none;
   margin: 0 3px;
   background-color: transparent;
   border: 1px solid hsla(210,8%,5%,.6);
   border-radius: 20px;
@@ -94,17 +128,17 @@
   -moz-padding-end: 12px;
   box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
               0 0 0 1px hsla(210,16%,76%,.1) inset,
               0 1px 0 hsla(210,16%,76%,.15);
   color: inherit;
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl) {
-  background-position: calc(100% - 4px) 3px, top left, top left;
+  background-position: calc(100% - 4px) center, top left, top left;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
   display: none;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
   color: hsl(208,10%,66%);
--- a/browser/themes/pinstripe/devtools/webconsole.css
+++ b/browser/themes/pinstripe/devtools/webconsole.css
@@ -100,131 +100,88 @@
   margin: 0;
 }
 
 .hud-filtered-by-type,
 .hud-filtered-by-string {
   display: none;
 }
 
-.webconsole-filter-button,
-.webconsole-clear-console-button {
-  -moz-appearance: none;
-  border: @roundButtonBorder@;
-  background: @roundButtonBackground@;
-  box-shadow: @roundButtonShadow@;
-  color: buttontext;
-  margin: 1px 0;
-  padding: 0;
-}
+/* WebConsole colored drops */
 
-.webconsole-filter-button {
-  border-radius: 10000px;
-  -moz-margin-start: 6px;
-  -moz-box-orient: horizontal;
-}
-
-.webconsole-clear-console-button {
-  border-radius: 3px;
-  -moz-margin-end: 6px;
-  -moz-margin-start: 4px;
-  padding: 1px 6px;
-}
-
-.webconsole-filter-button[checked="true"] {
-  box-shadow: @roundButtonPressedShadow@;
-  background: #d0d0d0;
+.webconsole-filter-button,
+.webconsole-filter-button[checked=true] {
+  color: white !important;
 }
 
-.webconsole-filter-button > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
-  margin: 0;
-  padding: 1px 0;
-  list-style-image: url(chrome://browser/skin/devtools/webconsole.png);
-  -moz-box-orient: horizontal;
-}
-
-.webconsole-filter-button:hover:active,
-.webconsole-clear-console-button:hover:active {
-  text-shadow: @loweredShadow@;
-  box-shadow: @roundButtonPressedShadow@;
-  background: @roundButtonPressedBackground@;
-}
-
-.webconsole-clear-console-button > .toolbarbutton-text {
-  margin: 0;
-}
-
-.webconsole-filter-button > .toolbarbutton-menubutton-button > .toolbarbutton-text {
-  margin: 0 3px;
-}
-
-.webconsole-filter-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
-  -moz-margin-start: 3px;
-}
-
-.webconsole-filter-button > .toolbarbutton-menubutton-dropmarker {
-  padding: 6px 3px 2px;
-  -moz-border-start: dotted #aaaaaa 1px;
-}
-
-.webconsole-new-group {
-  margin-top: 6px;
+.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
+  content: "";
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  margin-left: 5px;
+  border-width: 1px;
+  border-style: solid;
 }
 
 /* Network styles */
-.webconsole-filter-button[category="net"] {
-  -moz-image-region: rect(0, 8px, 8px, 0);
+.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#444444, #000000);
+  border-color: #777;
 }
 
 .webconsole-msg-network > .webconsole-msg-icon-container {
   -moz-border-start: solid #000 6px;
 }
 
 .webconsole-msg-network.webconsole-msg-error {
   -moz-image-region: rect(0, 16px, 8px, 8px);
 }
 
 /* CSS styles */
-.webconsole-filter-button[category="css"] {
-  -moz-image-region: rect(8px, 8px, 16px, 0);
+.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#2DC3F3, #00B6F0);
+  border-color: #1BA2CC;
 }
 
 .webconsole-msg-cssparser > .webconsole-msg-icon-container {
   -moz-border-start: solid #00b6f0 6px;
 }
 
 .webconsole-msg-cssparser.webconsole-msg-error {
   -moz-image-region: rect(8px, 16px, 16px, 8px);
 }
 
 .webconsole-msg-cssparser.webconsole-msg-warn {
   -moz-image-region: rect(8px, 24px, 16px, 16px);
 }
 
 /* JS styles */
-.webconsole-filter-button[category="js"] {
-  -moz-image-region: rect(16px, 8px, 24px, 0);
+.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#FCB142, #FB9500);
+  border-color: #E98A00;
 }
 
 .webconsole-msg-exception > .webconsole-msg-icon-container {
   -moz-border-start: solid #fb9500 6px;
 }
 
 .webconsole-msg-exception.webconsole-msg-error {
   -moz-image-region: rect(16px, 16px, 24px, 8px);
 }
 
 .webconsole-msg-exception.webconsole-msg-warn {
   -moz-image-region: rect(16px, 24px, 24px, 16px);
 }
 
 /* Web Developer styles */
-.webconsole-filter-button[category="logging"] {
-  -moz-image-region: rect(24px, 8px, 32px, 0);
+.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#B9B9B9, #AAAAAA);
+  border-color: #929292;
 }
 
 .webconsole-msg-console > .webconsole-msg-icon-container {
   -moz-border-start: solid #cbcbcb 6px;
 }
 
 .webconsole-msg-console.webconsole-msg-error,
 .webconsole-msg-output.webconsole-msg-error {
@@ -257,35 +214,16 @@
 .webconsole-msg-input {
   -moz-image-region: rect(24px, 40px, 32px, 32px);
 }
 
 .webconsole-msg-output {
   -moz-image-region: rect(24px, 48px, 32px, 40px);
 }
 
-.webconsole-close-button {
-  list-style-image: url("chrome://global/skin/icons/close.png");
-  margin-top: 0;
-  margin-bottom: 0;
-  -moz-margin-start: 3px;
-  -moz-margin-end: -14px;
-  min-width: 0;
-  -moz-appearance: none;
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-.webconsole-close-button:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
-}
-
-.webconsole-close-button:hover:active {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
-}
-
 /* JSTerm Styles */
 .jsterm-input-container {
   background: white;
 }
 
 .jsterm-input-node,
 .jsterm-complete-node {
   border: none;
@@ -300,20 +238,8 @@
 :-moz-any(.jsterm-input-node,
           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
   overflow-x: hidden;
 }
 
 .jsterm-complete-node > .textbox-input-box > .textbox-textarea {
   color: GrayText;
 }
-
-.hud-console-filter-toolbar {
-  background: @scopeBarBackground@;
-  border-bottom: @scopeBarSeparatorBorder@;
-  padding: 0px 1px;
-  -moz-appearance: none;
-  -moz-box-align: center;
-}
-
-.hud-console-filter-toolbar:-moz-lwtheme {
-  border-top: @scopeBarSeparatorBorder@;
-}
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -3240,20 +3240,16 @@ stack[anonid=browserStack][responsivemod
 .web-console-frame {
   border-bottom: 1px solid #aaa;
 }
 
 .web-console-frame[animated] {
   transition: height 100ms;
 }
 
-.web-console-splitter {
-  border-top: none;
-}
-
 /* Developer Toolbar */
 
 .developer-toolbar-button {
   -moz-appearance: none;
   min-width: 78px;
   min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border-radius: 3px;
--- a/browser/themes/winstripe/devtools/common.css
+++ b/browser/themes/winstripe/devtools/common.css
@@ -11,28 +11,33 @@
   box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
   background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
   color: hsl(210,30%,85%);
 }
 
 .devtools-menulist,
 .devtools-toolbarbutton {
   -moz-appearance: none;
+  -moz-box-align: center;
   min-width: 78px;
   min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border: 1px solid hsla(211,68%,6%,.5);
   border-radius: 3px;
   background: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
   box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
   margin: 0;
   -moz-margin-end: 3px;
   color: inherit;
 }
 
+.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
+  -moz-box-orient: horizontal;
+}
+
 .devtools-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
   outline: 1px dotted hsla(210,30%,85%,0.4);
   outline-offset: -4px;
 }
 
 .devtools-toolbarbutton > .toolbarbutton-icon {
   margin: 0;
@@ -44,20 +49,24 @@
 
 .devtools-toolbarbutton:not([checked=true]):hover:active {
   background-color: hsla(210,18%,9%,.1);
   background-image: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
   box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
 }
 
 .devtools-menulist[open=true],
+.devtools-toolbarbutton[open=true],
 .devtools-toolbarbutton[checked=true] {
   border-color: hsla(211,68%,6%,.6);
   background: -moz-linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
   box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
+}
+
+.devtools-toolbarbutton[checked=true] {
   color: hsl(200,100%,60%) !important;
 }
 
 .devtools-toolbarbutton[checked=true]:hover:active {
   background-color: hsla(211,68%,6%,.2);
 }
 
 .devtools-menulist > .menulist-label-box {
@@ -71,16 +80,40 @@
   background-color: transparent;
 }
 
 .devtools-menulist:focus:not([open="true"]):not(.menulist-compact) > .menulist-label-box {
   color: hsl(210,30%,85%) !important;
   background-color: transparent;
 }
 
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+  -moz-appearance: none;
+  color: inherit;
+  border-width: 0;
+  -moz-border-end: 1px solid hsla(210,8%,5%,.45);
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
+  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-toolbarbutton[type=menu-button] {
+  padding: 0 1px;
+  -moz-box-align: stretch;
+}
+
+.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
+  -moz-appearance: none !important;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
+  -moz-box-align: center;
+}
+
 /* Search input */
 
 .devtools-searchinput {
   -moz-appearance: none;
   margin: 0 3px;
   border: 1px solid hsla(211,68%,6%,.6);
   box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1);
   border-radius: 2px;
@@ -101,17 +134,17 @@
 .devtools-searchinput[focused] {
   border-color: hsl(200,70%,40%) hsl(200,75%,37%) hsl(200,80%,35%);
   background-origin: padding-box;
   background-clip: padding-box;
   box-shadow: inset 0 0 0 1px hsla(211,68%,6%,.1);
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl) {
-  background-position: calc(100% - 4px) 3px, top left, top left;
+  background-position: calc(100% - 4px) center, top left, top left;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
   display: none;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
   color: hsl(208,10%,66%);
--- a/browser/themes/winstripe/devtools/webconsole.css
+++ b/browser/themes/winstripe/devtools/webconsole.css
@@ -98,86 +98,87 @@
   margin: 0;
 }
 
 .hud-filtered-by-type,
 .hud-filtered-by-string {
   display: none;
 }
 
-.webconsole-clear-console-button > .toolbarbutton-icon {
-  display: none;
-}
+/* WebConsole colored drops */
 
-.webconsole-filter-button > .toolbarbutton-menubutton-button {
-  -moz-box-orient: horizontal;
-  list-style-image: url("chrome://browser/skin/devtools/webconsole.png");
+.webconsole-filter-button[checked=true] {
+  color: white !important;
 }
 
-.webconsole-filter-button > .toolbarbutton-menubutton-button,
-.webconsole-filter-button > .toolbarbutton-menubutton-button:hover:active {
-  -moz-padding-start: 6px;
-  -moz-padding-end: 3px;
-}
-
-.webconsole-filter-button {
-  -moz-margin-start: 3px;
-  -moz-margin-end: 3px;
+.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
+  content: "";
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  margin-left: 5px;
+  border-width: 1px;
+  border-style: solid;
 }
 
 /* Network styles */
-.webconsole-filter-button[category="net"] {
-  -moz-image-region: rect(0, 8px, 8px, 0);
+.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#444444, #000000);
+  border-color: #777;
 }
 
 .webconsole-msg-network > .webconsole-msg-icon-container {
   -moz-border-start: solid #000 6px;
 }
 
 .webconsole-msg-network.webconsole-msg-error {
   -moz-image-region: rect(0, 16px, 8px, 8px);
 }
 
 /* CSS styles */
-.webconsole-filter-button[category="css"] {
-  -moz-image-region: rect(8px, 8px, 16px, 0);
+.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#2DC3F3, #00B6F0);
+  border-color: #1BA2CC;
 }
 
 .webconsole-msg-cssparser > .webconsole-msg-icon-container {
   -moz-border-start: solid #00b6f0 6px;
 }
 
 .webconsole-msg-cssparser.webconsole-msg-error {
   -moz-image-region: rect(8px, 16px, 16px, 8px);
 }
 
 .webconsole-msg-cssparser.webconsole-msg-warn {
   -moz-image-region: rect(8px, 24px, 16px, 16px);
 }
 
 /* JS styles */
-.webconsole-filter-button[category="js"] {
-  -moz-image-region: rect(16px, 8px, 24px, 0);
+.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#FCB142, #FB9500);
+  border-color: #E98A00;
 }
 
 .webconsole-msg-exception > .webconsole-msg-icon-container {
   -moz-border-start: solid #fb9500 6px;
 }
 
 .webconsole-msg-exception.webconsole-msg-error {
   -moz-image-region: rect(16px, 16px, 24px, 8px);
 }
 
 .webconsole-msg-exception.webconsole-msg-warn {
   -moz-image-region: rect(16px, 24px, 24px, 16px);
 }
 
 /* Web Developer styles */
-.webconsole-filter-button[category="logging"] {
-  -moz-image-region: rect(24px, 8px, 32px, 0);
+.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#B9B9B9, #AAAAAA);
+  border-color: #929292;
 }
 
 .webconsole-msg-console > .webconsole-msg-icon-container {
   -moz-border-start: solid #cbcbcb 6px;
 }
 
 .webconsole-msg-console.webconsole-msg-error,
 .webconsole-msg-output.webconsole-msg-error {
@@ -210,32 +211,16 @@
 .webconsole-msg-input {
   -moz-image-region: rect(24px, 40px, 32px, 32px);
 }
 
 .webconsole-msg-output {
   -moz-image-region: rect(24px, 48px, 32px, 40px);
 }
 
-.webconsole-close-button {
-  border: none;
-  padding: 3px;
-  list-style-image: url("chrome://global/skin/icons/close.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
-  -moz-appearance: none;
-}
-
-.webconsole-close-button:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
-}
-
-.webconsole-close-button:hover:active {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
-}
-
 /* JSTerm Styles */
 .jsterm-input-node,
 .jsterm-complete-node {
   border: none;
   padding: 0 0 0 16px;
   -moz-appearance: none;
 }
 
@@ -247,15 +232,18 @@
           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
   overflow-x: hidden;
 }
 
 .jsterm-complete-node > .textbox-input-box > .textbox-textarea {
   color: GrayText;
 }
 
-.hud-console-filter-toolbar {
-  padding: 1px 2px;
-  -moz-box-align: center;
-  -moz-appearance: none;
-  background-color: -moz-dialog;
-  border-top: none;
+/* Filter */
+
+/*
+ * This hardcoded width likely due to a toolkit Windows specific bug.
+ * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
+ */
+
+.hud-filter-box {
+  width: 200px;
 }