Bug 890039 - Download indicator isn't styled correctly in dark LWTs, r=jaws,f=mak
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Mon, 26 Aug 2013 17:06:04 +0200
changeset 145014 9ca205f212b7c603836ecaec227d0be9dcb07c64
parent 145013 04e7b4b60be44740e38840253ae725f692016d1c
child 145015 4154345daff7856d35ca44a44e98ad536eff8f12
push id372
push usergijskruitbosch@gmail.com
push dateTue, 27 Aug 2013 15:13:18 +0000
treeherderux@9ca205f212b7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs890039
milestone26.0a1
Bug 890039 - Download indicator isn't styled correctly in dark LWTs, r=jaws,f=mak
browser/themes/linux/downloads/indicator.css
browser/themes/osx/downloads/indicator.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/windows/downloads/indicator.css
--- a/browser/themes/linux/downloads/indicator.css
+++ b/browser/themes/linux/downloads/indicator.css
@@ -132,13 +132,8 @@
 
 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
   background-color: rgb(220, 230, 81);
 }
 
 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
   background-image: linear-gradient(#4b5000, #515700);
 }
-
-toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {
-  margin: 0;
-  text-align: center;
-}
--- a/browser/themes/osx/downloads/indicator.css
+++ b/browser/themes/osx/downloads/indicator.css
@@ -17,47 +17,66 @@
 
 /*** Main indicator icon ***/
 
 #downloads-indicator-icon {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                               0, 198, 18, 180) center no-repeat;
 }
 
+#downloads-indicator-icon:-moz-lwtheme-brighttext {
+  background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
+}
+
 #downloads-indicator[attention]
 #downloads-indicator-icon {
   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 }
 
 /* In the next few rules, we use :not([counter]) as a shortcut that is
    equivalent to -moz-any([progress], [paused]). */
 
 #downloads-indicator:not([counter])
 #downloads-indicator-counter {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                               0, 198, 18, 180) center no-repeat;
   background-size: 12px;
 }
 
+#downloads-indicator:not([counter])
+#downloads-indicator-counter:-moz-lwtheme-brighttext {
+  background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
+}
+
 #downloads-indicator:not([counter])[attention]
 #downloads-indicator-counter {
   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 }
 
 @media (min-resolution: 2dppx) {
-  #downloads-indicator-icon:not(:-moz-lwtheme-brighttext) {
+  #downloads-indicator-icon {
     background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360);
     background-size: 18px;
   }
 
+  #downloads-indicator-icon:-moz-lwtheme-brighttext {
+    background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360);
+  }
+
   #downloads-indicator:not([counter]) > #downloads-indicator-anchor >
   #downloads-indicator-progress-area > #downloads-indicator-counter {
     background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360);
   }
 
+  #downloads-indicator:not([counter]) > #downloads-indicator-anchor >
+  #downloads-indicator-progress-area > #downloads-indicator-counter:-moz-lwtheme-brighttext {
+    background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"),
+                                      0, 396, 36, 360);
+  }
+
   #downloads-indicator[attention] > #downloads-indicator-anchor >
   #downloads-indicator-icon {
     background-image: url("chrome://browser/skin/downloads/download-glow@2x.png");
   }
 
   #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor >
   #downloads-indicator-progress-area > #downloads-indicator-counter {
     background-image: url("chrome://browser/skin/downloads/download-glow@2x.png");
@@ -168,15 +187,8 @@
 
 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
   background-color: rgb(220, 230, 81);
 }
 
 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
   background-image: linear-gradient(#4b5000, #515700);
 }
-
-toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {
-  margin: 2px 0 0;
-  padding: 0;
-  text-align: center;
-  vertical-align: middle;
-}
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -36,17 +36,16 @@
 #bookmarks-menu-button[customizableui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   -moz-image-region: rect(0, 630px, 18px, 612px);
 }
 
 #history-panelmenu[customizableui-areatype="toolbar"] {
   -moz-image-region: rect(0, 180px, 18px, 162px);
 }
 
-#downloads-indicator[customizableui-areatype="toolbar"],
 #downloads-button[customizableui-areatype="toolbar"] {
   -moz-image-region: rect(0, 198px, 18px, 180px);
 }
 
 #add-ons-button[customizableui-areatype="toolbar"] {
   -moz-image-region: rect(0, 216px, 18px, 198px);
 }
 
--- a/browser/themes/windows/downloads/indicator.css
+++ b/browser/themes/windows/downloads/indicator.css
@@ -33,16 +33,21 @@
    equivalent to -moz-any([progress], [paused]). */
 
 #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                               0, 198, 18, 180) center no-repeat;
   background-size: 12px;
 }
 
+#downloads-indicator:not([counter]) > #downloads-indicator-anchor >
+#downloads-indicator-progress-area > #downloads-indicator-counter:-moz-lwtheme-brighttext {
+  background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
+}
+
 #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 }
 
 /*** Download notifications ***/
 
 #downloads-indicator-notification {
   opacity: 0;
@@ -140,13 +145,8 @@
 
 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
   background-color: rgb(220, 230, 81);
 }
 
 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
   background-image: linear-gradient(#4b5000, #515700);
 }
-
-toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {
-  margin: 0;
-  text-align: center;
-}