Bug 960484 - Download button should notify user on every completed download in case of multiple downloads. Signaling via concentric ring effect. r=sfoster

This commit is contained in:
Aleh Zasypkin 2014-02-12 22:00:02 +01:00
parent be43b7c648
commit 040a9e3ea2
3 changed files with 62 additions and 5 deletions

View File

@ -15,15 +15,32 @@
<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>
@ -92,6 +109,26 @@
]]>
</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>

View File

@ -532,7 +532,11 @@ var MetroDownloadsView = {
let notn = this._progressNotification;
if (notn)
this._notificationBox.removeNotification(notn);
ContextUI.displayNavbar();
}
this._downloadProgressIndicator.notify();
break;
case "dl-failed":
download = aSubject.QueryInterface(Ci.nsIDownload);

View File

@ -7,7 +7,8 @@
.circularprogressindicator-progressButton,
.circularprogressindicator-progressRing,
.circularprogressindicator-progressTrack {
.circularprogressindicator-progressTrack,
.circularprogressindicator-progressNotification {
margin: 0 @toolbar_horizontal_spacing@;
}
@ -25,6 +26,21 @@
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]),