Bug 1338984 - Adjust brightness with respect to download progress for arrow-typed progress icon. r=Paolo

MozReview-Commit-ID: 9pMRmsduskA

--HG--
extra : rebase_source : 3202e80f51320c54e1e26d6a6d50babd5e15d7f5

browser/components/downloads/content/indicator.js

@@ -430,14 +430,6 @@ const DownloadsIndicatorView = {
    *   progress is not visible if the current progress is unknown.
    */
   set percentComplete(aValue) {
-    // For arrow type only:
-    // We show portion of the success icon in propotional with the download
-    // progress as an indicator. the PROGRESS_ICON_EMPTY_HEIGHT_PERCENT and
-    // PROGRESS_ICON_FULL_HEIGHT_PERCENT correspond to how much portion of the
-    // icon should be displayed in 0% and 100%.
-    const PROGRESS_ICON_EMPTY_HEIGHT_PERCENT = 35;
-    const PROGRESS_ICON_FULL_HEIGHT_PERCENT = 87;
-
     if (!this._operational) {
       return this._percentComplete;
     }
@@ -448,13 +440,13 @@ const DownloadsIndicatorView = {
 
       if (this._percentComplete >= 0) {
         this.indicator.setAttribute("progress", "true");
-        this._progressIcon.style.height = (this._percentComplete *
-          (PROGRESS_ICON_FULL_HEIGHT_PERCENT -
-           PROGRESS_ICON_EMPTY_HEIGHT_PERCENT) / 100 +
-           PROGRESS_ICON_EMPTY_HEIGHT_PERCENT) + "%";
+        // For arrow type only:
+        // We set animationDelay to a minus value (0s ~ -100s) to show the
+        // corresponding frame needed for progress.
+        this._progressIcon.style.animationDelay = (-this._percentComplete) + "s";
       } else {
         this.indicator.removeAttribute("progress");
-        this._progressIcon.style.height = "0";
+        this._progressIcon.style.animationDelay = "1s";
       }
       // We have to set the attribute instead of using the property because the
       // XBL binding isn't applied if the element is invisible for any reason.

browser/themes/shared/downloads/indicator.inc.css

@@ -13,9 +13,40 @@
   bottom: 0;
   width: 100%;
   height: 0;
-  transition: height 0.5s;
+  /* From javascript side we use animation delay from 0s to -100s to show
+   * corresponding frames needed for progress.
+   * animation-delay is set to a positive value to make nothing shown.
+   */
+  animation-play-state: paused;
+  animation-delay: 1s;
+  animation-duration: 100s;
+  animation-timing-function: linear;
+  animation-name: indicatorArrowProgress;
 }
 
 toolbar[brighttext] #downloads-indicator-progress-icon {
   background-image: var(--downloads-indicator-image-attention-inverted);
+  animation-name: indicatorArrowProgressDark;
+}
+
+@keyframes indicatorArrowProgress {
+  0% {
+    height: 35%;
+    filter: brightness(1.2);
+  }
+  100% {
+    height: 87%;
+    filter: brightness(1);
+  }
+}
+
+@keyframes indicatorArrowProgressDark {
+  0% {
+    height: 35%;
+    filter: brightness(0.7);
+  }
+  100% {
+    height: 87%;
+    filter: brightness(1);
+  }
 }