Bug 1301042 - Firebug Theme - Make differences between checked style and unchecked style for toolbox-buttons, r=pbro draft
authorSteve Chung <schung@mozilla.com>
Mon, 03 Oct 2016 16:55:23 +0800
changeset 420087 ea1373dd522a7de7358aaafb67f2144e2c7b5a3f
parent 415258 c9971be9e98150ef99d4ef80c6f800ec5915b1ac
child 532713 4182917c4f842be9ac688afbb0538663629595ef
push id31086
push userschung@mozilla.com
push dateMon, 03 Oct 2016 08:56:31 +0000
reviewerspbro
bugs1301042
milestone52.0a1
Bug 1301042 - Firebug Theme - Make differences between checked style and unchecked style for toolbox-buttons, r=pbro MozReview-Commit-ID: AFRsuOUmelO
devtools/client/themes/common.css
devtools/client/themes/toolbox.css
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -386,16 +386,25 @@ checkbox:-moz-focusring {
 .devtools-button[checked]:empty::before,
 .devtools-button[open]:empty::before,
 .devtools-button.checked::before,
 .devtools-toolbarbutton:not([label])[checked=true] > image,
 .devtools-toolbarbutton:not([label])[open=true] > image {
   filter: var(--checked-icon-filter);
 }
 
+/* Checked/opened button background */
+.theme-firebug .devtools-button[checked]:empty,
+.theme-firebug .devtools-button[open]:empty,
+.theme-firebug .devtools-button.checked,
+.theme-firebug .devtools-toolbarbutton:not([label])[checked=true],
+.theme-firebug .devtools-toolbarbutton:not([label])[open=true] {
+  background-color: #becad7;
+}
+
 /* Icon-and-text buttons */
 .devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
   margin-inline-start: .5em !important;
   font-weight: 600;
 }
 
 /* Text-only buttons */
 .theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -354,17 +354,18 @@
   background-image: var(--command-measure-image);
 }
 
 #command-button-frames::before {
   background-image: var(--command-frames-image);
 }
 
 #command-button-frames {
-  background: url("chrome://devtools/skin/images/dropmarker.svg") no-repeat;
+  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  background-repeat: no-repeat;
 
   /* Override background-size from the command-button.
    The drop down arrow is smaller */
   background-size: 8px 4px !important;
   min-width: 32px;
 }
 
 #command-button-frames:-moz-locale-dir(ltr) {