Bug 811469 - Indicator progress bar gradient leaks into border r=dolske
authorChristian Sonne <csonne@mozilla.com>
Fri, 11 Jan 2013 16:43:38 -0800
changeset 118888 762779b020dbb807fdb31ea74d75be4beebbd3cb
parent 118887 af7d77467148dfeb1b163b48a6f3b1eb3b17ded1
child 118889 a319e28420a311e58e71b88fc21e1109e8d87ba3
push id24180
push useremorley@mozilla.com
push dateTue, 15 Jan 2013 22:58:27 +0000
treeherdermozilla-central@72e34ce7fd92 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdolske
bugs811469
milestone21.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 811469 - Indicator progress bar gradient leaks into border r=dolske
browser/themes/gnomestripe/downloads/downloads.css
browser/themes/pinstripe/downloads/downloads.css
browser/themes/winstripe/downloads/downloads.css
--- a/browser/themes/gnomestripe/downloads/downloads.css
+++ b/browser/themes/gnomestripe/downloads/downloads.css
@@ -313,18 +313,20 @@ toolbar[iconsize="large"] > #downloads-i
   border-radius: 2px;
   box-shadow: 0 1px 0 hsla(0,0%,100%,.4);
 }
 
 #downloads-indicator-progress > .progress-bar {
   -moz-appearance: none;
   min-width: 0;
   min-height: 0;
+  /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */
+  background-clip: padding-box, border-box;
   background-color: rgb(255, 135, 94);
-  background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px);
+  background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none;
   border: 1px solid;
   border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4);
   border-radius: 2px 0 0 2px;
 }
 
 #downloads-indicator-progress > .progress-remainder {
   -moz-appearance: none;
   min-width: 0;
--- a/browser/themes/pinstripe/downloads/downloads.css
+++ b/browser/themes/pinstripe/downloads/downloads.css
@@ -487,18 +487,20 @@ richlistitem[type="download"]:hover > st
   border-radius: 2px;
   box-shadow: 0 1px 0 hsla(0,0%,100%,.4);
 }
 
 #downloads-indicator-progress > .progress-bar {
   -moz-appearance: none;
   min-width: 0;
   min-height: 0;
+  /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */
+  background-clip: padding-box, border-box;
   background-color: rgb(90, 185, 255);
-  background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px);
+  background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none;
   border: 1px solid;
   border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4);
   border-radius: 2px 0 0 2px;
 }
 
 #downloads-indicator-progress > .progress-remainder {
   -moz-appearance: none;
   min-width: 0;
--- a/browser/themes/winstripe/downloads/downloads.css
+++ b/browser/themes/winstripe/downloads/downloads.css
@@ -338,18 +338,20 @@ richlistitem[type="download"]:hover > st
   border-radius: 2px;
   box-shadow: 0 1px 0 hsla(0,0%,100%,.4);
 }
 
 #downloads-indicator-progress > .progress-bar {
   -moz-appearance: none;
   min-width: 0;
   min-height: 0;
+  /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */
+  background-clip: padding-box, border-box;
   background-color: rgb(90, 201, 66);
-  background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px);
+  background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none;
   border: 1px solid;
   border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4);
   border-radius: 2px 0 0 2px;
 }
 
 #downloads-indicator-progress > .progress-remainder {
   -moz-appearance: none;
   min-width: 0;