wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
browser/metro/base/content/bindings/circularprogress.xml
View File

@ -15,15 +15,32 @@
<content> <content>
<xul:stack> <xul:stack>
<xul:toolbarbutton anonid="progressButton" class="circularprogressindicator-progressButton"/> <xul:toolbarbutton anonid="progressButton"
<html:div anonid="progressTrack" xbl:inherits="progress" class="circularprogressindicator-progressTrack"></html:div> class="circularprogressindicator-progressButton"/>
<html:canvas anonid="progressRing" xbl:inherits="progress" class="circularprogressindicator-progressRing" width="40" height="40"></html:canvas> <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> </xul:stack>
</content> </content>
<implementation> <implementation>
<field name="_progressCanvas"> <field name="_progressCanvas">
document.getAnonymousElementByAttribute(this, "anonid", "progressRing"); document.getAnonymousElementByAttribute(this, "anonid", "progressRing");
</field>
<field name="_progressNotification">
document.getAnonymousElementByAttribute(this, "anonid",
"progressNotification");
</field> </field>
<field name="_progressCircleCtx">null</field> <field name="_progressCircleCtx">null</field>
<field name="_img">null</field> <field name="_img">null</field>
@ -92,6 +109,26 @@
]]> ]]>
</body> </body>
</method> </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> </implementation>
</binding> </binding>
</bindings> </bindings>

4
browser/metro/base/content/downloads.js
View File

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

18
browser/metro/theme/circularprogress.css
View File

@ -7,7 +7,8 @@
.circularprogressindicator-progressButton, .circularprogressindicator-progressButton,
.circularprogressindicator-progressRing, .circularprogressindicator-progressRing,
.circularprogressindicator-progressTrack { .circularprogressindicator-progressTrack,
.circularprogressindicator-progressNotification {
margin: 0 @toolbar_horizontal_spacing@; margin: 0 @toolbar_horizontal_spacing@;
} }
@ -25,6 +26,21 @@
background-image: url(chrome://browser/skin/images/progresscircle-bg.png); 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:not([progress]),
.circularprogressindicator-progressRing[progress="100"], .circularprogressindicator-progressRing[progress="100"],
.circularprogressindicator-progressTrack:not([progress]), .circularprogressindicator-progressTrack:not([progress]),