Bug 644361 - Improve the progress bar rendering by using hexadecimal colors. r=bz,davidb
authorMounir Lamouri <mounir.lamouri@gmail.com>
Mon, 23 May 2011 22:51:03 +0200
changeset 70023 85a96ef690b47aac644381569491eb7c05ba8893
parent 70022 44cec0549267f07897e3ce5b2c6c6d31e448c925
child 70024 705dc68a1cf96cc845134b610c437aa44b8d901b
push id20160
push usermlamouri@mozilla.com
push dateMon, 23 May 2011 20:51:54 +0000
treeherdermozilla-central@85a96ef690b4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz, davidb
bugs644361
milestone6.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 644361 - Improve the progress bar rendering by using hexadecimal colors. r=bz,davidb
layout/reftests/forms/progress/style.css
layout/style/forms.css
widget/reftests/progressbar-fallback-default-style-ref.html
--- a/layout/reftests/forms/progress/style.css
+++ b/layout/reftests/forms/progress/style.css
@@ -2,33 +2,33 @@ div.progress-element {
   -moz-appearance: progressbar;
   display: inline-block;
   height: 1em;
   width: 10em;
   vertical-align: -0.2em;
 
   /* Default style in case of there is -moz-appearance: none; */
   border: 2px solid;
-  -moz-border-top-colors: ThreeDShadow -moz-Dialog;
-  -moz-border-right-colors: ThreeDHighlight -moz-Dialog;
-  -moz-border-bottom-colors: ThreeDHighlight -moz-Dialog;
-  -moz-border-left-colors: ThreeDShadow -moz-Dialog;
-  background-color: -moz-Dialog;
+  -moz-border-top-colors: ThreeDShadow #e6e6e6;
+  -moz-border-right-colors: ThreeDHighlight #e6e6e6;
+  -moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
+  -moz-border-left-colors: ThreeDShadow #e6e6e6;
+  background-color: #e6e6e6;
 }
 
 div.progress-bar {
   -moz-appearance: progresschunk;
   height: 100%;
   /*
    * We can't apply the following style to the reference because it will have
    * underisable effectes:
    * width: 100%;
    */
 
   -moz-box-sizing: border-box;
 
   /* Default style in case of there is -moz-appearance: none; */
-  background-color: ThreeDShadow;
+  background-color: #0064b4;
 }
 
 progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar {
   -moz-appearance: none;
 }
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -661,37 +661,38 @@ output:-moz-ui-invalid {
 
 progress {
   -moz-appearance: progressbar;
   display: inline-block;
   vertical-align: -0.2em;
 
   /* Default style in case of there is -moz-appearance: none; */
   border: 2px solid;
-  -moz-border-top-colors: ThreeDShadow -moz-Dialog;
-  -moz-border-right-colors: ThreeDHighlight -moz-Dialog;
-  -moz-border-bottom-colors: ThreeDHighlight -moz-Dialog;
-  -moz-border-left-colors: ThreeDShadow -moz-Dialog;
-  background-color: -moz-Dialog;
+  /* #e6e6e6 is a light gray. */
+  -moz-border-top-colors: ThreeDShadow #e6e6e6;
+  -moz-border-right-colors: ThreeDHighlight #e6e6e6;
+  -moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
+  -moz-border-left-colors: ThreeDShadow #e6e6e6;
+  background-color: #e6e6e6;
 }
 
 ::-moz-progress-bar {
   /* Block styles that would change the type of frame we construct. */
   display: inline-block ! important;
   float: none ! important;
   position: static ! important;
   overflow: visible ! important;
   -moz-box-sizing: border-box ! important;
 
   -moz-appearance: progresschunk;
   height: 100%;
   width: 100%;
 
   /* Default style in case of there is -moz-appearance: none; */
-  background-color: ThreeDShadow;
+  background-color: #0064b4; /* blue */
 }
 
 %if OSARCH==OS2
 input {
   font: medium serif; font-family: inherit
 }
 
 select {
--- a/widget/reftests/progressbar-fallback-default-style-ref.html
+++ b/widget/reftests/progressbar-fallback-default-style-ref.html
@@ -8,36 +8,36 @@
        */
       display: inline-block;
       height: 1em;
       width: 10em;
       vertical-align: -0.2em;
 
       /* Default style in case of there is -moz-appearance: none; */
       border: 2px solid;
-      -moz-border-top-colors: ThreeDShadow -moz-Dialog;
-      -moz-border-right-colors: ThreeDHighlight -moz-Dialog;
-      -moz-border-bottom-colors: ThreeDHighlight -moz-Dialog;
-      -moz-border-left-colors: ThreeDShadow -moz-Dialog;
-      background-color: -moz-Dialog;
+      -moz-border-top-colors: ThreeDShadow #e6e6e6;
+      -moz-border-right-colors: ThreeDHighlight #e6e6e6;
+      -moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
+      -moz-border-left-colors: ThreeDShadow #e6e6e6;
+      background-color: #e6e6e6;
     }
 
     div.progress-bar {
       /**
        * The purpose of this test is to not show the native style.
        * -moz-appearance: progresschunk;
        */
 
       height: 100%;
       width: 100%;
 
       -moz-box-sizing: border-box;
 
       /* Default style in case of there is -moz-appearance: none; */
-      background-color: ThreeDShadow;
+      background-color: #0064b4;
     }
 
     div.progress-element { padding: 5px; }
     body > div:nth-child(1)  { -moz-appearance: none; }
     body > div:nth-child(2) > .progress-bar { -moz-appearance: none; }
     body > div:nth-child(3)  { background-color: red; }
     body > div:nth-child(4) > .progress-bar { background-color: red; }
     body > div:nth-child(5)  { border: 2px solid red; }