From 0569633261a809a5787fa4a56f743bae64b1b923 Mon Sep 17 00:00:00 2001 From: Paolo Amadini Date: Sun, 6 Jan 2013 12:18:21 +0100 Subject: [PATCH] Bug 812813 - The Downloads Panel needs to draw your attention when a download finishes. r=mak --HG-- rename : browser/themes/gnomestripe/downloads/download-notification.png => browser/themes/gnomestripe/downloads/download-notification-start.png rename : browser/themes/pinstripe/downloads/download-notification.png => browser/themes/pinstripe/downloads/download-notification-start.png rename : browser/themes/winstripe/downloads/download-notification.png => browser/themes/winstripe/downloads/download-notification-start.png --- .../components/downloads/content/indicator.js | 9 +++-- .../downloads/src/DownloadsCommon.jsm | 18 +++++++--- .../browser/browser_first_download_panel.js | 4 +-- .../download-notification-finish.png | Bin 0 -> 3626 bytes ...on.png => download-notification-start.png} | Bin .../gnomestripe/downloads/downloads.css | 31 +++++++++++++----- browser/themes/gnomestripe/jar.mn | 3 +- .../download-notification-finish.png | Bin 0 -> 4066 bytes ...on.png => download-notification-start.png} | Bin .../themes/pinstripe/downloads/downloads.css | 31 +++++++++++++----- browser/themes/pinstripe/jar.mn | 3 +- .../download-notification-finish.png | Bin 0 -> 3755 bytes ...on.png => download-notification-start.png} | Bin .../themes/winstripe/downloads/downloads.css | 31 +++++++++++++----- browser/themes/winstripe/jar.mn | 6 ++-- 15 files changed, 95 insertions(+), 41 deletions(-) create mode 100755 browser/themes/gnomestripe/downloads/download-notification-finish.png rename browser/themes/gnomestripe/downloads/{download-notification.png => download-notification-start.png} (100%) create mode 100755 browser/themes/pinstripe/downloads/download-notification-finish.png rename browser/themes/pinstripe/downloads/{download-notification.png => download-notification-start.png} (100%) create mode 100755 browser/themes/winstripe/downloads/download-notification-finish.png rename browser/themes/winstripe/downloads/{download-notification.png => download-notification-start.png} (100%) diff --git a/browser/components/downloads/content/indicator.js b/browser/components/downloads/content/indicator.js index 922e6104909..70a83e09c17 100644 --- a/browser/components/downloads/content/indicator.js +++ b/browser/components/downloads/content/indicator.js @@ -349,8 +349,11 @@ const DownloadsIndicatorView = { /** * If the status indicator is visible in its assigned position, shows for a * brief time a visual notification of a relevant event, like a new download. + * + * @param aType + * Set to "start" for new downloads, "finish" for completed downloads. */ - showEventNotification: function DIV_showEventNotification() + showEventNotification: function DIV_showEventNotification(aType) { if (!this._initialized) { return; @@ -366,7 +369,7 @@ const DownloadsIndicatorView = { DownloadsButton.updatePosition(); let indicator = this.indicator; - indicator.setAttribute("notification", "true"); + indicator.setAttribute("notification", aType); this._notificationTimeout = setTimeout( function () indicator.removeAttribute("notification"), 1000); } @@ -486,7 +489,7 @@ const DownloadsIndicatorView = { if (this._attention != aValue) { this._attention = aValue; if (aValue) { - this.indicator.setAttribute("attention", "true") + this.indicator.setAttribute("attention", "true"); } else { this.indicator.removeAttribute("attention"); } diff --git a/browser/components/downloads/src/DownloadsCommon.jsm b/browser/components/downloads/src/DownloadsCommon.jsm index 48c3a5653ec..6867ceaef41 100644 --- a/browser/components/downloads/src/DownloadsCommon.jsm +++ b/browser/components/downloads/src/DownloadsCommon.jsm @@ -985,7 +985,12 @@ DownloadsDataCtor.prototype = { if (isNew && !dataItem.newDownloadNotified) { dataItem.newDownloadNotified = true; - this._notifyNewDownload(); + this._notifyDownloadEvent("start"); + } + + // This is a final state of which we are only notified once. + if (dataItem.done) { + this._notifyDownloadEvent("finish"); } }, @@ -1042,10 +1047,13 @@ DownloadsDataCtor.prototype = { }, /** - * Displays a new download notification in the most recent browser window, if - * one is currently available. + * Displays a new or finished download notification in the most recent browser + * window, if one is currently available with the required privacy type. + * + * @param aType + * Set to "start" for new downloads, "finish" for completed downloads. */ - _notifyNewDownload: function DD_notifyNewDownload() + _notifyDownloadEvent: function DD_notifyDownloadEvent(aType) { if (DownloadsCommon.useToolkitUI) { return; @@ -1061,7 +1069,7 @@ DownloadsDataCtor.prototype = { // For new downloads after the first one, don't show the panel // automatically, but provide a visible notification in the topmost // browser window, if the status indicator is already visible. - browserWin.DownloadsIndicatorView.showEventNotification(); + browserWin.DownloadsIndicatorView.showEventNotification(aType); return; } this.panelHasShownBefore = true; diff --git a/browser/components/downloads/test/browser/browser_first_download_panel.js b/browser/components/downloads/test/browser/browser_first_download_panel.js index d390806308a..dc8f0ff4335 100644 --- a/browser/components/downloads/test/browser/browser_first_download_panel.js +++ b/browser/components/downloads/test/browser/browser_first_download_panel.js @@ -19,7 +19,7 @@ function gen_test() DownloadsCommon.getData(window).panelHasShownBefore = false; prepareForPanelOpen(); - DownloadsCommon.getData(window)._notifyNewDownload(); + DownloadsCommon.getData(window)._notifyDownloadEvent("start"); yield; // If we got here, that means the panel opened. @@ -31,7 +31,7 @@ function gen_test() // Next, make sure that if we start another download, we don't open // the panel automatically. panelShouldNotOpen(); - DownloadsCommon.getData(window)._notifyNewDownload(); + DownloadsCommon.getData(window)._notifyDownloadEvent("start"); yield waitFor(2); } catch(e) { ok(false, e); diff --git a/browser/themes/gnomestripe/downloads/download-notification-finish.png b/browser/themes/gnomestripe/downloads/download-notification-finish.png new file mode 100755 index 0000000000000000000000000000000000000000..7bcc7f569999b5e24184f8745d7618ed5cd7cd91 GIT binary patch literal 3626 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 #downloads-indicator[attention] > #downloads-indicat background-image: url("chrome://browser/skin/downloads/download-glow.png"); } -/*** Event notification ***/ +/*** Download notifications ***/ #downloads-indicator-notification { opacity: 0; - background: url("chrome://browser/skin/downloads/download-notification.png") - center no-repeat; background-size: 16px; + background-position: center; + background-repeat: no-repeat; } -@keyframes downloadsIndicatorNotificationRight { +@keyframes downloadsIndicatorNotificationStartRight { from { opacity: 0; transform: translate(-128px, 128px) scale(8); } 20% { opacity: .85; animation-timing-function: ease-out; } to { opacity: 0; transform: translate(0) scale(1); } } -@keyframes downloadsIndicatorNotificationLeft { +@keyframes downloadsIndicatorNotificationStartLeft { from { opacity: 0; transform: translate(128px, 128px) scale(8); } 20% { opacity: .85; animation-timing-function: ease-out; } to { opacity: 0; transform: translate(0) scale(1); } } -#downloads-indicator[notification] > #downloads-indicator-anchor > #downloads-indicator-notification { - animation-name: downloadsIndicatorNotificationRight; +#downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification { + background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); + animation-name: downloadsIndicatorNotificationStartRight; animation-duration: 1s; } -#downloads-indicator[notification]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { - animation-name: downloadsIndicatorNotificationLeft; +#downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { + animation-name: downloadsIndicatorNotificationStartLeft; +} + +@keyframes downloadsIndicatorNotificationFinish { + from { opacity: 0; transform: scale(1); } + 20% { opacity: .65; animation-timing-function: ease-in; } + to { opacity: 0; transform: scale(8); } +} + +#downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification { + background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); + animation-name: downloadsIndicatorNotificationFinish; + animation-duration: 1s; } /*** Progress bar and text ***/ diff --git a/browser/themes/gnomestripe/jar.mn b/browser/themes/gnomestripe/jar.mn index 4ce51b50387..5eab932a301 100644 --- a/browser/themes/gnomestripe/jar.mn +++ b/browser/themes/gnomestripe/jar.mn @@ -49,7 +49,8 @@ browser.jar: skin/classic/browser/downloads/buttons.png (downloads/buttons.png) skin/classic/browser/downloads/download-glow.png (downloads/download-glow.png) skin/classic/browser/downloads/download-glow-small.png (downloads/download-glow-small.png) - skin/classic/browser/downloads/download-notification.png (downloads/download-notification.png) + skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png) + skin/classic/browser/downloads/download-notification-start.png (downloads/download-notification-start.png) skin/classic/browser/downloads/download-summary.png (downloads/download-summary.png) skin/classic/browser/downloads/downloads.css (downloads/downloads.css) skin/classic/browser/downloads/allDownloadsViewOverlay.css (downloads/allDownloadsViewOverlay.css) diff --git a/browser/themes/pinstripe/downloads/download-notification-finish.png b/browser/themes/pinstripe/downloads/download-notification-finish.png new file mode 100755 index 0000000000000000000000000000000000000000..139bf0b539e3d978b05396f78269043275223b2f GIT binary patch literal 4066 zcmX|Edpy(a|K4T}Gv~?T355_v5|W68Z8=rWBqJeYk5ib_%sItS8p<&;Vx&1ABZng7 zOqdACVLZiX@tdCS^ZVm--}meOT-W=3y|4HE$9*SUGez=pi*W-00A4go{|0NuAAVdM ztg&6k=>uyL^*6BbH^;jA2RixQ0qD74o$nk+-*a-ibK{PaOR!JRol5`!e>7TO&mw4Y z?RlVu#h6H3`+)EZULKQoAX2_Fx>Em9^N-?68NR{)>R`ZR z*q2_k8XqgIqrC#JZxt4^6dTcNphm zs%LW39y5NiWD2V%JN9ZF%n_jE3zv@tFlE=?_M11a#YIQ>yvg=~s^$14WdFKAd6owk zFMs5@U{~iFeylhU6s|H1nTUhqg!p_Cd0AVGO??kjRG8^H9|R2nJWIU!%Y2E8eb-= zY0GN@`140$K5L34JU^Q8^dp1W+VRRvKiZi@)gZta{!&kt_|02T0*FK*NTx96ePk zX;KOw1Gdr6WHCJh02G}zH)+7iTpS~-lfc@ivV`e^ z&zj@$@xmVU_`^!T6?lNjfbki_KO+6ui$${$kCxJ8+o_2FSMFCi|g#u{}d&&eEQ=^=s*XKg`Q{SG{n<1U-TS$z=bIX z%(y!XuzU|n1S~=^N3#);Rfol@ooQtY`8h$pXZCD(9qwJ&=qQPWj)@tSb$L1fbU1b3 z0j7m@5qVk8^Dk^BGN^HR1S};yPlB8TmP(f9H43Kac-sVe)tzhiwBa6kZji|{_Hn6o zDgPt+{LWdg;&HHo74F@~=5Zl;247=m*wX+DSeB&Px0)xn#8VMXl?m-9TpgZ)^1Vydy*IJA)rl*a z#zLvzt5%%7hDes*Mnd{7Z_EVTulDQ8kX;&cyK%RxY|MH=GJ@by@Nc|pB2CV+|3xC@ z;m(hXAOY%~zt+wSzyAICch&U8{`dDILexax2Bua5yVqI#)?2 zs!opA8)+*LxX36WbU^j&P~!2;*B{>+I>1v5wI}@Kl}Gz0UiPkyYX0O*^y^X z2vmLoDgF>(vl<2+86Pa|GQ<^)y*Gk2N`KneGpjRDqklL#D(U*Jmn5$0lKyV8&Z6)5 zW{9qMqd|2zvVw!E+>B#;;6jW|$@Iq|q!>9`O_q;4RMpw4*SK;h z<5vPL4AQs@-R$1cU7eo5?wv3mtr$nemvLnJ?2SXPT!R5wxlm_9O4o z#=_JB8zi(=9-YzA0N9^n!WUg%-Da$0VC9c6V$k?xvA+-m2}fzmIa@p%POA_| zW8DSxsZM>4&jH%`{9jwnZ!D>Wo=Ar<5i<0*XA6KjzM<12c$rnj(Brv2%k8oG! z)DysdNKFr0(_(|NBc25pWl33Xh^ePK{+JrW%}3r;Mqy}(>lGcTDk<>w*Alf;TMlse ztw8qKQsX)JIWrmrvT}u>p>S1az8e}Lbr zYg4`oGS(7ObyTSs%oo4oHqlnr`l94ygL>h}U#@F7QD<`{bu02s5=O zRhUhIT4yd(dFT!D44g@;GJ=3(sR{c29qOmu9yop9sP^hQOVByA1P|^@Iu}DQ#J4`w z7k8=!xmjT0M~Cj-PtlU$iUqGVMELonyLIr_+=RXEKBJlQ`R^}6V7dd00&m@Tup=8D z@##D>f=HtdJbCICWU$)!?VL{H%@dJ|V%NxQ3?-h+%&yh)oaYYR8z#(Ui-Vr|Tw8_# zN?_O%)+AKF^`4VRi~Vo`MVF946}`{c0bB+ucg;0a%`%yvncSQ$!~+$7bD_r1-=|)Y zW4oV^l|E`fC=pxPdC3+)rpG*#Hv4V+>n{K99ow+T0_QeXm95#t-2N7d>2{KF%L)&q zM33O%Zd}Mk(_(cr;8z(%srTzn0XOe~q)ZUGKX6QTE@Hgu*}RfD6&>u(XSr$&Vlqm3 z4y<-4N*}H0Q6mU`zLU2G^a_NAW5CMW4k3O7Gnc(1FKZJQcp%RPi@7tfO277c# z@1Hh4cV%0ItrZwCDB63WXzv$Gzsl<}Xn$qgpSWwx{sccaUpNMn&K)@N^yR$v^2k*P z>-?=$fParpC+#E}H&_JpvilOirtUXmxMsb#Z3xwD z>MmU)XNz2|M8mR65QGx<7qV;&%P-|b>y9MPrk19QF-RTemLmPYmH5m{y`oP;f6U0x^=<=|hz5&cB}`FM(PZLJzs)(OUCIp^#MHL5oj@$6w8p6m2MS z+KF*>hrcbZ1O?ZtN2$*yl8>a}-a8H3`bLA3+$$_O>Ebi*#Iyy!MKm`pc7i1qw@^sh z)0>3RsG3ECG0_a%+m(~@_z1y7)fWzJ73vV_EVyu}b)=&y>0MLb^O?KQcvUGR~} zCiAy$dzk_r%g@jey!$lRG%Akj;lmM$g+OK|b^G~d(j^6tWo>7L_1^VGHO3XC1;{|? zNJklC7l$u(4+l(sC`V##AwdagE5zKdw6&rNT)|K{HBl42O>C6_yjM#Ic7caP&N;3o zYx2ZWM!&)sg)(~3bXsNLP|}1!j=Up8IP~)E$>7%Hc}*UwLTzG+EzSNKXo^$DUB^X> zH$+NFyIp;c|Fuyq@;=~35ioRW{2zQyW)I97)Z%rLzEPc>sYeK0NuKr@A7yAwJc_h9QS%2S| zFmurCo=our28R5mh?tB0r{|Y>fK!)oy^kvjpAw_AcYZ|t2`+SCv=J3a5r<@A20Lo( zjkPN*HKf{IRJYY9WJui{*Ca1)2KICY5kSbo{XIU}>>!aFG*2XfU}?gMIa0Q?Bw_#c z!fMyCtZ^fkD8;=4f@BU-{dRepH$%{TzGJ$96RXM#WV(7Ns=Gx}cp>W)OsCPP|1$NW zCj#TON2zY-Uz)=3U{x189j${9`;LJeBGT(36AuY8PF>w&wbE7dU2^cv2U9^5_qWo# z?6X!h&ntvqrBCQ%L*Fs4i`Wgh^0cjPp}jBqVCx-+KUP_`Z%{3#p+1 literal 0 HcmV?d00001 diff --git a/browser/themes/pinstripe/downloads/download-notification.png b/browser/themes/pinstripe/downloads/download-notification-start.png similarity index 100% rename from browser/themes/pinstripe/downloads/download-notification.png rename to browser/themes/pinstripe/downloads/download-notification-start.png diff --git a/browser/themes/pinstripe/downloads/downloads.css b/browser/themes/pinstripe/downloads/downloads.css index bb51853b875..79aa346f3f2 100644 --- a/browser/themes/pinstripe/downloads/downloads.css +++ b/browser/themes/pinstripe/downloads/downloads.css @@ -238,34 +238,47 @@ richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloa } } -/*** Event notification ***/ +/*** Download notifications ***/ #downloads-indicator-notification { opacity: 0; - background: url("chrome://browser/skin/downloads/download-notification.png") - center no-repeat; background-size: 16px; + background-position: center; + background-repeat: no-repeat; } -@keyframes downloadsIndicatorNotificationRight { +@keyframes downloadsIndicatorNotificationStartRight { from { opacity: 0; transform: translate(-128px, 128px) scale(8); } 20% { opacity: .85; animation-timing-function: ease-out; } to { opacity: 0; transform: translate(0) scale(1); } } -@keyframes downloadsIndicatorNotificationLeft { +@keyframes downloadsIndicatorNotificationStartLeft { from { opacity: 0; transform: translate(128px, 128px) scale(8); } 20% { opacity: .85; animation-timing-function: ease-out; } to { opacity: 0; transform: translate(0) scale(1); } } -#downloads-indicator[notification] > #downloads-indicator-anchor > #downloads-indicator-notification { - animation-name: downloadsIndicatorNotificationRight; +#downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification { + background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); + animation-name: downloadsIndicatorNotificationStartRight; animation-duration: 1s; } -#downloads-indicator[notification]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { - animation-name: downloadsIndicatorNotificationLeft; +#downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { + animation-name: downloadsIndicatorNotificationStartLeft; +} + +@keyframes downloadsIndicatorNotificationFinish { + from { opacity: 0; transform: scale(1); } + 20% { opacity: .65; animation-timing-function: ease-in; } + to { opacity: 0; transform: scale(8); } +} + +#downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification { + background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); + animation-name: downloadsIndicatorNotificationFinish; + animation-duration: 1s; } /*** Progress bar and text ***/ diff --git a/browser/themes/pinstripe/jar.mn b/browser/themes/pinstripe/jar.mn index e49eefb6968..0dbfc4feaa3 100644 --- a/browser/themes/pinstripe/jar.mn +++ b/browser/themes/pinstripe/jar.mn @@ -73,7 +73,8 @@ browser.jar: skin/classic/browser/downloads/buttons.png (downloads/buttons.png) skin/classic/browser/downloads/download-glow.png (downloads/download-glow.png) skin/classic/browser/downloads/download-glow@2x.png (downloads/download-glow@2x.png) - skin/classic/browser/downloads/download-notification.png (downloads/download-notification.png) + skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png) + skin/classic/browser/downloads/download-notification-start.png (downloads/download-notification-start.png) skin/classic/browser/downloads/download-summary.png (downloads/download-summary.png) skin/classic/browser/downloads/downloads.css (downloads/downloads.css) skin/classic/browser/downloads/allDownloadsViewOverlay.css (downloads/allDownloadsViewOverlay.css) diff --git a/browser/themes/winstripe/downloads/download-notification-finish.png b/browser/themes/winstripe/downloads/download-notification-finish.png new file mode 100755 index 0000000000000000000000000000000000000000..5194f5d59a4328f984b99a8d76be18175b793345 GIT binary patch literal 3755 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 RzgK+%aHdu!l~{cIe*pGC@p}LO literal 0 HcmV?d00001 diff --git a/browser/themes/winstripe/downloads/download-notification.png b/browser/themes/winstripe/downloads/download-notification-start.png similarity index 100% rename from browser/themes/winstripe/downloads/download-notification.png rename to browser/themes/winstripe/downloads/download-notification-start.png diff --git a/browser/themes/winstripe/downloads/downloads.css b/browser/themes/winstripe/downloads/downloads.css index c1111a47de9..1a265a1d79b 100644 --- a/browser/themes/winstripe/downloads/downloads.css +++ b/browser/themes/winstripe/downloads/downloads.css @@ -227,34 +227,47 @@ richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloa background-image: url("chrome://browser/skin/downloads/download-glow.png"); } -/*** Event notification ***/ +/*** Download notifications ***/ #downloads-indicator-notification { opacity: 0; - background: url("chrome://browser/skin/downloads/download-notification.png") - center no-repeat; background-size: 16px; + background-position: center; + background-repeat: no-repeat; } -@keyframes downloadsIndicatorNotificationRight { +@keyframes downloadsIndicatorNotificationStartRight { from { opacity: 0; transform: translate(-128px, 128px) scale(8); } 20% { opacity: .85; animation-timing-function: ease-out; } to { opacity: 0; transform: translate(0) scale(1); } } -@keyframes downloadsIndicatorNotificationLeft { +@keyframes downloadsIndicatorNotificationStartLeft { from { opacity: 0; transform: translate(128px, 128px) scale(8); } 20% { opacity: .85; animation-timing-function: ease-out; } to { opacity: 0; transform: translate(0) scale(1); } } -#downloads-indicator[notification] > #downloads-indicator-anchor > #downloads-indicator-notification { - animation-name: downloadsIndicatorNotificationRight; +#downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification { + background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); + animation-name: downloadsIndicatorNotificationStartRight; animation-duration: 1s; } -#downloads-indicator[notification]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { - animation-name: downloadsIndicatorNotificationLeft; +#downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { + animation-name: downloadsIndicatorNotificationStartLeft; +} + +@keyframes downloadsIndicatorNotificationFinish { + from { opacity: 0; transform: scale(1); } + 20% { opacity: .65; animation-timing-function: ease-in; } + to { opacity: 0; transform: scale(8); } +} + +#downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification { + background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); + animation-name: downloadsIndicatorNotificationFinish; + animation-duration: 1s; } /*** Progress bar and text ***/ diff --git a/browser/themes/winstripe/jar.mn b/browser/themes/winstripe/jar.mn index 11e3c3bfe5e..1a72ea04483 100644 --- a/browser/themes/winstripe/jar.mn +++ b/browser/themes/winstripe/jar.mn @@ -63,7 +63,8 @@ browser.jar: skin/classic/browser/webRTC-shareDevice-64.png skin/classic/browser/downloads/buttons.png (downloads/buttons.png) skin/classic/browser/downloads/download-glow.png (downloads/download-glow.png) - skin/classic/browser/downloads/download-notification.png (downloads/download-notification.png) + skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png) + skin/classic/browser/downloads/download-notification-start.png (downloads/download-notification-start.png) skin/classic/browser/downloads/download-summary.png (downloads/download-summary.png) * skin/classic/browser/downloads/downloads.css (downloads/downloads.css) * skin/classic/browser/downloads/allDownloadsViewOverlay.css (downloads/allDownloadsViewOverlay.css) @@ -283,7 +284,8 @@ browser.jar: skin/classic/aero/browser/webRTC-shareDevice-64.png skin/classic/aero/browser/downloads/buttons.png (downloads/buttons-aero.png) skin/classic/aero/browser/downloads/download-glow.png (downloads/download-glow.png) - skin/classic/aero/browser/downloads/download-notification.png (downloads/download-notification.png) + skin/classic/aero/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png) + skin/classic/aero/browser/downloads/download-notification-start.png (downloads/download-notification-start.png) skin/classic/aero/browser/downloads/download-summary.png (downloads/download-summary.png) * skin/classic/aero/browser/downloads/downloads.css (downloads/downloads-aero.css) * skin/classic/aero/browser/downloads/allDownloadsViewOverlay.css (downloads/allDownloadsViewOverlay-aero.css)