Bug 601667 - Web Console toolbar styling, part 2; f=mihai.sucan,ddahl r=l10n,sdwilsh,dao,kdangoor, a=blocking2.0

toolkit/themes/pinstripe/global/jar.mn

@@ -95,7 +95,6 @@ toolkit.jar:
   skin/classic/global/icons/closetab-hover.png                       (icons/closetab-hover.png)
   skin/classic/global/icons/closetab.png                             (icons/closetab.png)
   skin/classic/global/icons/commandline.png                          (icons/commandline.png)
-  skin/classic/global/icons/console-close.png                        (icons/console-close.png)
   skin/classic/global/icons/information-16.png                       (icons/information-16.png)
   skin/classic/global/icons/information-24.png                       (icons/information-24.png)
   skin/classic/global/icons/information-32.png                       (icons/information-32.png)
@@ -131,6 +130,7 @@ toolkit.jar:
   skin/classic/global/icons/question-large.png                       (icons/question-large.png)
   skin/classic/global/icons/question-tabmodal-64.png                 (icons/question-tabmodal-64.png)
   skin/classic/global/icons/sslWarning.png                           (icons/sslWarning.png)
+  skin/classic/global/icons/webconsole.png                           (icons/webconsole.png)
   skin/classic/global/notification/critical-bar-background.png       (notification/critical-bar-background.png)
   skin/classic/global/notification/error-icon.png                    (notification/error-icon.png)
   skin/classic/global/notification/info-bar-background.png           (notification/info-bar-background.png)

toolkit/themes/pinstripe/global/webConsole.css

@@ -118,13 +118,103 @@
   display: none;
 }
 
-.hud-group:first-child > .hud-divider {
-  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;
 }
 
-.hud-filter-cat {
-  color: #6b6b6b;
-  font-weight: bold;
+.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://global/skin/icons/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;
+}
+
+/* Network button */
+.webconsole-filter-button[category="net"] {
+  -moz-image-region: rect(0, 40px, 10px, 30px);
+}
+
+/* CSS button */
+.webconsole-filter-button[category="css"] {
+  -moz-image-region: rect(10px, 40px, 20px, 30px);
+}
+
+/* JS button */
+.webconsole-filter-button[category="js"] {
+  -moz-image-region: rect(20px, 40px, 30px, 30px);
+}
+
+/* Web Developer button */
+.webconsole-filter-button[category="webdev"] {
+  -moz-image-region: rect(30px, 40px, 40px, 30px);
+}
+
+.webconsole-close-button {
+  list-style-image: url("chrome://global/skin/icons/closetab.png");
+  margin-top: 0;
+  margin-bottom: 0;
+  -moz-margin-start: 3px;
+  -moz-margin-end: -14px;
+  min-width: 0;
+  -moz-appearance: none;
+}
+
+.webconsole-close-button:hover {
+  list-style-image: url("chrome://global/skin/icons/closetab-hover.png");
+}
+
+.webconsole-close-button:hover:active {
+  list-style-image: url("chrome://global/skin/icons/closetab-active.png");
 }
 
 /* JSTerm Styles */
@@ -188,15 +278,3 @@
   border-top: @scopeBarSeparatorBorder@;
 }
 
-.jsterm-close-button {
-  list-style-image: url("chrome://global/skin/icons/console-close.png");
-  margin: 0px;
-  min-width: 0px;
-  padding: 1px 3px 1px 7px;
-  -moz-appearance: none;
-}
-
-.jsterm-close-button:active {
-  background-color: rgb(175, 175, 175);
-}
-