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 155697 9ca205f212b7c603836ecaec227d0be9dcb07c64
parent 155696 04e7b4b60be44740e38840253ae725f692016d1c
child 155698 4154345daff7856d35ca44a44e98ad536eff8f12
push id25666
push userjwein@mozilla.com
push dateMon, 18 Nov 2013 15:56:58 +0000
treeherdermozilla-central@f2adb62d07eb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs890039
milestone26.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;
-}