Bug 872292 - Update progress bar styling. r=mbrubeck

browser/metro/base/content/WebProgress.js

@@ -144,6 +144,9 @@ const WebProgress = {
 
     this._progressActive = true;
 
+    // display the track
+    Elements.progressContainer.removeAttribute("collapsed");
+
     // 'Whoosh' in
     this._progressCount = kProgressMarginStart;
     Elements.progress.style.width = this._progressCount + "%"; 
@@ -198,6 +201,7 @@ const WebProgress = {
     // Close out fade finished, reset
     if (data.propertyName == "opacity") {
       Elements.progress.style.width = "0px"; 
+      Elements.progressContainer.setAttribute("collapsed", true);
     }
   },
 };

browser/metro/base/content/browser-ui.js

@@ -46,6 +46,7 @@ let Elements = {};
   ["appbar",             "appbar"],
   ["contentViewport",    "content-viewport"],
   ["progress",           "progress-control"],
+  ["progressContainer",  "progress-container"],
   ["contentNavigator",   "content-navigator"],
   ["aboutFlyout",        "about-flyoutpanel"],
   ["prefsFlyout",        "prefs-flyoutpanel"],

browser/metro/base/content/browser.xul

@@ -306,7 +306,9 @@
 
     <!-- Windows 8 Appbar -->
     <appbar id="appbar" mousethrough="never" observes="bcast_windowState">
-      <hbox id="progress-control" layer="true"/>
+      <hbox id="progress-container" layer="true">
+        <hbox id="progress-control" />
+      </hbox>
 
       <!-- Main Toolbar -->
       <toolbar id="toolbar" observes="bcast_windowState" flex="1">

browser/metro/theme/browser.css

@@ -9,23 +9,26 @@
 %define forward_width 22px
 %define forward_spacing 12px
 
-/* Sliding Toolbar/Tab Tray ------------------------------------------------- */
+/* Progress meter ------------------------------------------------- */
 
-#tray {
-  transition: transform @metro_animation_duration@ @metro_animation_easing@;
-  transform: translateY(-@tabs_height@);
-  width: 100%;
-}
-
-#progress-control {
+#progress-container {
   display: block;
   position: absolute;
   top: -@progress_height@;
   height: @progress_height@;
-  max-height: @progress_height@;
-  background: linear-gradient(to right,  @progress_start_color@,  @progress_end_color@);
+  width: 100%;
+  background-color: hsla(210,5%,80%,1);
+  box-shadow: 0 1px 0 hsla(210,5%,50%,.1) inset;
   -moz-user-focus: ignore;
+}
+
+#progress-control {
+  display: block;
+  height: @progress_height@;
+  background-image: -moz-linear-gradient(left, hsla(200,100%,83%,.5), hsla(200,100%,83%,0)), -moz-linear-gradient(top, #1ab2ff, #0091ff);
+  border-right: 1px solid #0082e5;
   transition: width .3s ease-in;
+  -moz-user-focus: ignore;
 }
 
 #progress-control:-moz-dir(rtl) {
@@ -37,6 +40,14 @@
   transition: width .3s ease-in, .5s opacity ease-in;
 }
 
+/* Sliding Toolbar/Tab Tray ------------------------------------------------- */
+
+#tray {
+  transition: transform @metro_animation_duration@ @metro_animation_easing@;
+  transform: translateY(-@tabs_height@);
+  width: 100%;
+}
+
 /* in non-tabsonly mode the navigation bar and tab tray float over content. In
    tabsonly mode they are always visible and offset content. */
 #tray:not([tabsonly]) {

browser/metro/theme/defines.inc

@@ -22,7 +22,7 @@
 %define toolbar_height 68px
 %define tabs_height 178px
 
-%define progress_height 3px
+%define progress_height 5px
 %define progress_start_color #0095dd
 %define progress_end_color #97cbff