Bug 960484 - Download button should notify user on every completed download in case of multiple downloads. Signaling via concentric ring effect. r=sfoster
authorAleh Zasypkin <aleh.zasypkin@gmail.com>
Wed, 12 Feb 2014 22:00:02 +0100
changeset 169697 627fac32b0d50a3f57e45d4a3db921799a5461e9
parent 169696 2cc946bb55c479aa99bece8b0cabf9c12ab1f14b
child 169698 4cabc33c0518e5d36da28f7a56ecfed035f34416
push id270
push userpvanderbeken@mozilla.com
push dateThu, 06 Mar 2014 09:24:21 +0000
reviewerssfoster
bugs960484
milestone30.0a1
Bug 960484 - Download button should notify user on every completed download in case of multiple downloads. Signaling via concentric ring effect. r=sfoster
browser/metro/base/content/bindings/circularprogress.xml
browser/metro/base/content/downloads.js
browser/metro/theme/circularprogress.css
--- a/browser/metro/base/content/bindings/circularprogress.xml
+++ b/browser/metro/base/content/bindings/circularprogress.xml
@@ -10,25 +10,42 @@
           xmlns:html="http://www.w3.org/1999/xhtml">
   <binding id="circular-progress-indicator">
     <resources>
       <stylesheet src="chrome://browser/skin/circularprogress.css"/>
     </resources>
 
     <content>
       <xul:stack>
-        <xul:toolbarbutton anonid="progressButton" class="circularprogressindicator-progressButton"/>
-        <html:div anonid="progressTrack" xbl:inherits="progress" class="circularprogressindicator-progressTrack"></html:div>
-        <html:canvas anonid="progressRing" xbl:inherits="progress" class="circularprogressindicator-progressRing" width="40" height="40"></html:canvas>
+        <xul:toolbarbutton anonid="progressButton"
+                           class="circularprogressindicator-progressButton"/>
+        <html:div anonid="progressTrack"
+                  xbl:inherits="progress"
+                  class="circularprogressindicator-progressTrack">
+        </html:div>
+        <html:canvas anonid="progressRing"
+                     xbl:inherits="progress"
+                     class="circularprogressindicator-progressRing"
+                     width="40"
+                     height="40">
+        </html:canvas>
+        <html:div anonid="progressNotification"
+                  xbl:inherits="progress"
+                  class="circularprogressindicator-progressNotification">
+        </html:div>
       </xul:stack>
     </content>
 
     <implementation>
       <field name="_progressCanvas">
-          document.getAnonymousElementByAttribute(this, "anonid", "progressRing");
+        document.getAnonymousElementByAttribute(this, "anonid", "progressRing");
+      </field>
+      <field name="_progressNotification">
+        document.getAnonymousElementByAttribute(this, "anonid",
+            "progressNotification");
       </field>
       <field name="_progressCircleCtx">null</field>
       <field name="_img">null</field>
       <constructor>
         <![CDATA[
           this._progressCircleCtx = this._progressCanvas.getContext('2d');
         ]]>
       </constructor>
@@ -87,11 +104,31 @@
               this._img.onload = () => {};
             }
             this._progressCircleCtx.clearRect(0, 0,
               this._progressCanvas.width, this._progressCanvas.height);
             this.removeAttribute("progress");
           ]]>
         </body>
       </method>
+      <method name="notify">
+        <body>
+          <![CDATA[
+            this.addEventListener("transitionend", this._onNotificationEnd);
+
+            this._progressNotification.classList.add(
+                "progressNotification-active");
+          ]]>
+        </body>
+      </method>
+      <method name="_onNotificationEnd">
+        <body>
+          <![CDATA[
+            this.removeEventListener("transitionend", this._onNotificationEnd);
+
+            this._progressNotification.classList.remove(
+                "progressNotification-active");
+          ]]>
+        </body>
+      </method>
     </implementation>
   </binding>
 </bindings>
--- a/browser/metro/base/content/downloads.js
+++ b/browser/metro/base/content/downloads.js
@@ -527,17 +527,21 @@ var MetroDownloadsView = {
         if (this._downloadsInProgress == 0) {
           if (this._downloadCount > 1 || !runAfterDownload) {
             this._showDownloadCompleteToast();
             this._showDownloadCompleteNotification();
           }
           let notn = this._progressNotification;
           if (notn)
             this._notificationBox.removeNotification(notn);
+
+          ContextUI.displayNavbar();
         }
+
+        this._downloadProgressIndicator.notify();
         break;
       case "dl-failed":
         download = aSubject.QueryInterface(Ci.nsIDownload);
         this._showDownloadFailedNotification(download);
         break;
     }
   },
 
--- a/browser/metro/theme/circularprogress.css
+++ b/browser/metro/theme/circularprogress.css
@@ -2,17 +2,18 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %filter substitution
 %include defines.inc
 
 .circularprogressindicator-progressButton,
 .circularprogressindicator-progressRing,
-.circularprogressindicator-progressTrack {
+.circularprogressindicator-progressTrack,
+.circularprogressindicator-progressNotification {
   margin: 0 @toolbar_horizontal_spacing@;
 }
 
 .circularprogressindicator-progressRing,
 .circularprogressindicator-progressTrack {
   pointer-events:none;
   position: absolute;
 }
@@ -20,14 +21,29 @@
 .circularprogressindicator-progressTrack {
   width: 40px;
   height: 40px;
   background-repeat: no-repeat;
   background-size: 40px 40px;
   background-image: url(chrome://browser/skin/images/progresscircle-bg.png);
 }
 
+.circularprogressindicator-progressNotification {
+    width: 40px;
+    height: 40px;
+    background-image: url(chrome://browser/skin/images/navbar-download-finished.png);
+    visibility: hidden;
+}
+
+.circularprogressindicator-progressNotification.progressNotification-active {
+  visibility: visible;
+  opacity: 0;
+  transform: scale(2);
+  transition: opacity @metro_animation_duration@,
+              transform @metro_animation_duration@;
+}
+
 .circularprogressindicator-progressRing:not([progress]),
 .circularprogressindicator-progressRing[progress="100"],
 .circularprogressindicator-progressTrack:not([progress]),
 .circularprogressindicator-progressTrack[progress="100"] {
   visibility: hidden;
 }