Bug 749626 - Theme update: make the close button code generic and implement the dark theme for menulists. r=dao

browser/base/content/browser.xul

@@ -1015,6 +1015,7 @@
              hidden="true">
 #ifdef XP_MACOSX
       <toolbarbutton id="highlighter-closebutton"
+                     class="devtools-closebutton"
                      oncommand="InspectorUI.closeInspectorUI(false);"
                      tooltiptext="&inspectCloseButton.tooltiptext;"/>
 #endif
@@ -1048,6 +1049,7 @@
       </hbox>
 #ifndef XP_MACOSX
       <toolbarbutton id="highlighter-closebutton"
+                     class="devtools-closebutton"
                      oncommand="InspectorUI.closeInspectorUI(false);"
                      tooltiptext="&inspectCloseButton.tooltiptext;"/>
 #endif

browser/themes/gnomestripe/browser.css

@@ -1990,18 +1990,6 @@ panel[dimmed="true"] {
   background-color: rgba(25, 25, 25, 0.5);
 }
 
-#highlighter-closebutton {
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-#highlighter-closebutton > .toolbarbutton-icon {
-  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
-     use evil CSS to give the impression of smaller content */
-  margin: -4px;
-}
-
 #highlighter-veil-transparentbox {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
   outline: 1px dashed rgba(255,255,255,0.5);

browser/themes/gnomestripe/devtools/common.css

@@ -42,21 +42,24 @@
   padding: 4px 3px;
   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;
   min-width: 78px;
   min-height: 22px;
-  color: hsl(210,30%,85%);
   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-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
   outline: 1px dotted hsla(210,30%,85%,0.4);
   outline-offset: -4px;
@@ -72,6 +75,7 @@
   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[checked] {
   color: hsl(208,100%,60%) !important;
   border-color: hsla(210,8%,5%,.6) !important;
@@ -87,6 +91,18 @@
   background-color: hsla(210,8%,5%,.2) !important;
 }
 
+.devtools-menulist > .menulist-label-box {
+  text-align: center;
+}
+
+.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;
+}
+
 /* Search input */
 
 .devtools-searchinput {
@@ -97,7 +113,7 @@
   background-color: transparent;
   background-image: url(magnifying-glass.png), -moz-linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
   background-repeat: no-repeat;
-  background-position: 4px 3px, top left, top left;
+  background-position: 4px center, top left, top left;
   padding-top: 0;
   padding-bottom: 0;
   -moz-padding-start: 18px;
@@ -105,7 +121,7 @@
   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: hsl(210,30%,85%);
+  color: inherit;
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl) {
@@ -119,3 +135,17 @@
 .devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
   color: hsl(208,10%,66%);
 }
+
+/* Close button */
+
+.devtools-closebutton {
+  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.devtools-closebutton > .toolbarbutton-icon {
+  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
+     use evil CSS to give the impression of smaller content */
+  margin: -4px;
+}

browser/themes/pinstripe/browser.css

@@ -2719,26 +2719,6 @@ panel[dimmed="true"] {
   background-color: rgba(25, 25, 25, 0.5);
 }
 
-#highlighter-closebutton {
-  list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
-  min-width: 16px;
-  width: 16px;
-  margin: 0 4px;
-}
-
-#highlighter-closebutton > .toolbarbutton-text {
-  display: none;
-}
-
-#highlighter-closebutton:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
-}
-
-#highlighter-closebutton:active {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
-}
-
 #highlighter-veil-transparentbox {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
   outline: 1px dashed rgba(255,255,255,0.5);

browser/themes/pinstripe/devtools/common.css

@@ -44,20 +44,27 @@
   padding: 4px 3px;
   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;
   min-width: 78px;
   min-height: 22px;
-  color: hsl(210,30%,85%);
   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-menulist {
+  margin: 0 2px;
+}
+
+.devtools-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
   outline: 1px dotted hsla(210,30%,85%,0.4);
   outline-offset: -4px;
@@ -77,6 +84,7 @@
   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[checked] {
   color: hsl(208,100%,60%) !important;
   border-color: hsla(210,8%,5%,.6);
@@ -88,6 +96,19 @@
   background-color: hsla(210,8%,5%,.2);
 }
 
+.devtools-menulist > .menulist-label-box {
+  text-align: center;
+}
+
+.devtools-menulist > .menulist-dropmarker {
+  -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;
+}
+
 /* Search input */
 
 .devtools-searchinput {
@@ -98,7 +119,7 @@
   border-radius: 20px;
   background-image: url(magnifying-glass.png), -moz-linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
   background-repeat: no-repeat;
-  background-position: 4px 3px, top left, top left;
+  background-position: 4px center, top left, top left;
   padding-top: 0;
   padding-bottom: 0;
   -moz-padding-start: 18px;
@@ -106,7 +127,7 @@
   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: hsl(210,30%,85%);
+  color: inherit;
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl) {
@@ -120,3 +141,25 @@
 .devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
   color: hsl(208,10%,66%);
 }
+
+/* Close button */
+
+.devtools-closebutton {
+  list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png");
+  -moz-image-region: rect(0, 16px, 16px, 0);
+  min-width: 16px;
+  width: 16px;
+  margin: 0 4px;
+}
+
+.devtools-closebutton > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-closebutton:hover {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
+}
+
+.devtools-closebutton:active {
+  -moz-image-region: rect(0, 48px, 16px, 32px);
+}

browser/themes/winstripe/browser.css

@@ -2656,23 +2656,6 @@ panel[dimmed="true"] {
   background-color: rgba(25, 25, 25, 0.5);
 }
 
-#highlighter-closebutton {
-  list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
-  min-width: 16px;
-  width: 16px;
-  -moz-appearance: none;
-  border-style: none;
-}
-
-#highlighter-closebutton:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
-}
-
-#highlighter-closebutton:hover:active {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
-}
-
 #highlighter-veil-transparentbox {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
   outline: 1px dashed rgba(255,255,255,0.5);
@@ -2866,7 +2849,7 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   border: 1px solid hsla(210,8%,5%,.45);
   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 0 1px;
+  margin: 1px 0 1px;
 }
 
 #inspector-breadcrumbs > .scrollbutton-up {
@@ -2918,6 +2901,10 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
   padding: 0 9px;
 }
 
+.inspector-breadcrumbs-button:-moz-focusring > .button-box {
+  border-width: 0;
+}
+
 .inspector-breadcrumbs-button:-moz-focusring > label {
   border-bottom: 1px dotted hsla(210,30%,85%,0.4);
 }

browser/themes/winstripe/devtools/common.css

@@ -42,21 +42,25 @@
   padding: 4px 3px;
   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;
   min-width: 78px;
   min-height: 22px;
-  color: hsl(210,30%,85%);
   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-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
   outline: 1px dotted hsla(210,30%,85%,0.4);
   outline-offset: -4px;
@@ -76,6 +80,7 @@
   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[checked] {
   border-color: hsla(211,68%,6%,.6);
   background: -moz-linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
@@ -87,6 +92,22 @@
   background-color: hsla(211,68%,6%,.2);
 }
 
+.devtools-menulist > .menulist-label-box {
+  text-align: center;
+}
+
+.devtools-menulist > .menulist-dropmarker {
+  -moz-appearance: none;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
+  border-width: 0;
+  background-color: transparent;
+}
+
+.devtools-menulist:focus:not([open="true"]):not(.menulist-compact) > .menulist-label-box {
+  color: hsl(210,30%,85%) !important;
+  background-color: transparent;
+}
+
 /* Search input */
 
 .devtools-searchinput {
@@ -98,15 +119,15 @@
   background-color: transparent;
   background-image: url(magnifying-glass.png), -moz-linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
   background-repeat: no-repeat;
-  background-position: 4px 3px, top left, top left;
+  background-position: 4px center, top left, top left;
   padding-top: 0;
   padding-bottom: 0;
   -moz-padding-start: 18px;
   -moz-padding-end: 12px;
-  color: hsl(210,30%,85%);
   -moz-transition-property: background-color, border-color, box-shadow;
   -moz-transition-duration: 150ms;
   -moz-transition-timing-function: ease;
+  color: inherit;
 }
 
 .devtools-searchinput[focused] {
@@ -127,3 +148,26 @@
 .devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
   color: hsl(208,10%,66%);
 }
+
+/* Close button */
+
+.devtools-closebutton {
+  list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png");
+  -moz-image-region: rect(0, 16px, 16px, 0);
+  min-width: 16px;
+  width: 16px;
+  -moz-appearance: none;
+  border-style: none;
+}
+
+.devtools-closebutton > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-closebutton:hover {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
+}
+
+.devtools-closebutton:hover:active {
+  -moz-image-region: rect(0, 48px, 16px, 32px);
+}