Bug 1338984 - Adjust brightness with respect to download progress for arrow-typed progress icon. r=Paolo
authorRex Lee <rexboy@mozilla.com>
Fri, 24 Feb 2017 17:33:41 +0800
changeset 394551 e87b41eb5ac009d2454aeacea1fcc1e47230d02b
parent 394550 1733ced10f061c456c86de9a69fbd38255b1701c
child 394552 ece3e5e5f0f0646f7a3a2aaf6809d0efbe8a998d
push id1468
push userasasaki@mozilla.com
push dateMon, 05 Jun 2017 19:31:07 +0000
treeherdermozilla-release@0641fc6ee9d1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersPaolo
bugs1338984
milestone54.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 1338984 - Adjust brightness with respect to download progress for arrow-typed progress icon. r=Paolo MozReview-Commit-ID: 9pMRmsduskA
browser/components/downloads/content/indicator.js
browser/themes/shared/downloads/indicator.inc.css
--- a/browser/components/downloads/content/indicator.js
+++ b/browser/components/downloads/content/indicator.js
@@ -425,41 +425,33 @@ const DownloadsIndicatorView = {
    * Progress indication to display, from 0 to 100, or -1 if unknown.
    * Bar-type:
    *   The progress bar is hidden if the current progress is unknown and no
    *   status text is set in the "counter" property.
    * Arrow-type:
    *   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;
     }
 
     if (this._percentComplete !== aValue) {
       this._percentComplete = aValue;
       this._refreshAttention();
 
       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.
       this._indicatorProgress.setAttribute("value", Math.max(aValue, 0));
     }
     return aValue;
   },
   _percentComplete: null,
--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -8,14 +8,45 @@
 
 #downloads-indicator-progress-icon {
   background: var(--downloads-indicator-image-attention) bottom no-repeat;
   background-size: 18px;
   position: absolute;
   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);
+  }
+}