Bug 777011: WebConsole dark toolbar. r=robcee

browser/devtools/webconsole/HUDService.jsm

@@ -441,7 +441,9 @@ HUD_SERVICE.prototype =
       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);
@@ -598,11 +600,11 @@ WebConsole.prototype = {
   _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;

browser/devtools/webconsole/webconsole.js

@@ -350,7 +350,7 @@ WebConsoleFrame.prototype = {
       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));
 

browser/devtools/webconsole/webconsole.xul

@@ -7,6 +7,8 @@
 %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"?>
@@ -46,14 +48,15 @@
 
   <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"
@@ -63,7 +66,7 @@
           </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"
@@ -73,7 +76,7 @@
           </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"
@@ -83,7 +86,7 @@
           </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"
@@ -100,6 +103,7 @@
         <spacer flex="1"/>
 
         <toolbarbutton label="&btnPosition.label;" type="menu"
+                       class="devtools-toolbarbutton"
                        tooltiptext="&btnPosition.tooltip;">
           <menupopup>
             <menuitem label="&positionMenu.above;" type="checkbox"
@@ -111,13 +115,14 @@
           </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>

browser/themes/gnomestripe/browser.css

@@ -2564,11 +2564,6 @@ stack[anonid=browserStack][responsivemode] {
   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 {

browser/themes/gnomestripe/devtools/common.css

@@ -16,6 +16,7 @@
 .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);
@@ -27,6 +28,10 @@
   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);
@@ -44,13 +49,17 @@
 }
 
 .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;
 }
@@ -71,6 +80,31 @@
   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 {
@@ -93,7 +127,7 @@
 }
 
 .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 {

browser/themes/gnomestripe/devtools/webconsole.css

@@ -113,23 +113,28 @@
   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 {
@@ -141,8 +146,9 @@
 }
 
 /* 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 {
@@ -158,8 +164,9 @@
 }
 
 /* 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 {
@@ -175,8 +182,9 @@
 }
 
 /* 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 {
@@ -210,10 +218,6 @@
   -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 {

browser/themes/pinstripe/browser.css

@@ -3283,12 +3283,6 @@ stack[anonid=browserStack][responsivemode] {
   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 {

browser/themes/pinstripe/devtools/common.css

@@ -18,6 +18,7 @@
 .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);
@@ -28,6 +29,10 @@
   color: inherit;
 }
 
+.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
+  -moz-box-orient: horizontal;
+}
+
 .devtools-menulist {
   margin: 0 2px;
 }
@@ -53,13 +58,17 @@
 }
 
 .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);
 }
@@ -77,6 +86,31 @@
   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 {
@@ -99,7 +133,7 @@
 }
 
 .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 {

browser/themes/pinstripe/devtools/webconsole.css

@@ -105,74 +105,28 @@
   display: none;
 }
 
+/* WebConsole colored drops */
+
 .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-filter-button[checked=true] {
+  color: white !important;
 }
 
-.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 > .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 {
@@ -184,8 +138,9 @@
 }
 
 /* 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 {
@@ -201,8 +156,9 @@
 }
 
 /* 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 {
@@ -218,8 +174,9 @@
 }
 
 /* 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 {
@@ -262,25 +219,6 @@
   -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;
@@ -305,15 +243,3 @@
 .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@;
-}

browser/themes/winstripe/browser.css

@@ -3245,10 +3245,6 @@ stack[anonid=browserStack][responsivemode] {
   transition: height 100ms;
 }
 
-.web-console-splitter {
-  border-top: none;
-}
-
 /* Developer Toolbar */
 
 .developer-toolbar-button {

browser/themes/winstripe/devtools/common.css

@@ -16,6 +16,7 @@
 .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);
@@ -28,6 +29,10 @@
   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);
@@ -49,10 +54,14 @@
 }
 
 .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;
 }
 
@@ -76,6 +85,30 @@
   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 {
@@ -106,7 +139,7 @@
 }
 
 .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 {

browser/themes/winstripe/devtools/webconsole.css

@@ -103,29 +103,27 @@
   display: none;
 }
 
-.webconsole-clear-console-button > .toolbarbutton-icon {
-  display: none;
+/* WebConsole colored drops */
+
+.webconsole-filter-button[checked=true] {
+  color: white !important;
 }
 
-.webconsole-filter-button > .toolbarbutton-menubutton-button {
-  -moz-box-orient: horizontal;
-  list-style-image: url("chrome://browser/skin/devtools/webconsole.png");
-}
-
-.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 {
@@ -137,8 +135,9 @@
 }
 
 /* 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 {
@@ -154,8 +153,9 @@
 }
 
 /* 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 {
@@ -171,8 +171,9 @@
 }
 
 /* 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 {
@@ -215,22 +216,6 @@
   -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 {
@@ -252,10 +237,13 @@
   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;
 }