Bug 812813 - The Downloads Panel needs to draw your attention when a download finishes. r=mak
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Sun, 06 Jan 2013 12:18:21 +0100
changeset 126901 9cb6dcfb0b85600d08bbc2a30fc8f5fcdabade4b
parent 126900 f80f9b1e217b459bca541512d20258e39f14da94
child 126902 6104f18f25276d9026b7140d312738ef988a1761
push id2151
push userlsblakk@mozilla.com
push dateTue, 19 Feb 2013 18:06:57 +0000
treeherdermozilla-beta@4952e88741ec [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak
bugs812813
milestone20.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 812813 - The Downloads Panel needs to draw your attention when a download finishes. r=mak
browser/components/downloads/content/indicator.js
browser/components/downloads/src/DownloadsCommon.jsm
browser/components/downloads/test/browser/browser_first_download_panel.js
browser/themes/gnomestripe/downloads/download-notification-finish.png
browser/themes/gnomestripe/downloads/download-notification-start.png
browser/themes/gnomestripe/downloads/download-notification.png
browser/themes/gnomestripe/downloads/downloads.css
browser/themes/gnomestripe/jar.mn
browser/themes/pinstripe/downloads/download-notification-finish.png
browser/themes/pinstripe/downloads/download-notification-start.png
browser/themes/pinstripe/downloads/download-notification.png
browser/themes/pinstripe/downloads/downloads.css
browser/themes/pinstripe/jar.mn
browser/themes/winstripe/downloads/download-notification-finish.png
browser/themes/winstripe/downloads/download-notification-start.png
browser/themes/winstripe/downloads/download-notification.png
browser/themes/winstripe/downloads/downloads.css
browser/themes/winstripe/jar.mn
--- a/browser/components/downloads/content/indicator.js
+++ b/browser/components/downloads/content/indicator.js
@@ -344,34 +344,37 @@ const DownloadsIndicatorView = {
   /**
    * Set while we are waiting for a notification to fade out.
    */
   _notificationTimeout: null,
 
   /**
    * 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;
     }
 
     function DIV_SEN_callback() {
       if (this._notificationTimeout) {
         clearTimeout(this._notificationTimeout);
       }
 
       // Now that the overlay is loaded, place the indicator in its final
       // position.
       DownloadsButton.updatePosition();
 
       let indicator = this.indicator;
-      indicator.setAttribute("notification", "true");
+      indicator.setAttribute("notification", aType);
       this._notificationTimeout = setTimeout(
         function () indicator.removeAttribute("notification"), 1000);
     }
 
     this._ensureOperational(DIV_SEN_callback.bind(this));
   },
 
   //////////////////////////////////////////////////////////////////////////////
@@ -481,17 +484,17 @@ const DownloadsIndicatorView = {
   {
     if (!this._operational) {
       return this._attention;
     }
 
     if (this._attention != aValue) {
       this._attention = aValue;
       if (aValue) {
-        this.indicator.setAttribute("attention", "true")
+        this.indicator.setAttribute("attention", "true");
       } else {
         this.indicator.removeAttribute("attention");
       }
     }
     return aValue;
   },
   _attention: false,
 
--- a/browser/components/downloads/src/DownloadsCommon.jsm
+++ b/browser/components/downloads/src/DownloadsCommon.jsm
@@ -980,17 +980,22 @@ DownloadsDataCtor.prototype = {
     }
 
     this._views.forEach(
       function (view) view.getViewItem(dataItem).onStateChange()
     );
 
     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");
     }
   },
 
   onProgressChange: function DD_onProgressChange(aWebProgress, aRequest,
                                                   aCurSelfProgress,
                                                   aMaxSelfProgress,
                                                   aCurTotalProgress,
                                                   aMaxTotalProgress, aDownload)
@@ -1037,36 +1042,39 @@ DownloadsDataCtor.prototype = {
   },
 
   set panelHasShownBefore(aValue) {
     Services.prefs.setBoolPref("browser.download.panel.shown", aValue);
     return aValue;
   },
 
   /**
-   * 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;
     }
 
     // Show the panel in the most recent browser window, if present.
     let browserWin = RecentWindow.getMostRecentBrowserWindow({ private: this._isPrivate });
     if (!browserWin) {
       return;
     }
 
     if (this.panelHasShownBefore) {
       // 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;
     browserWin.DownloadsPanel.showPanel();
   }
 };
 
 XPCOMUtils.defineLazyGetter(this, "PrivateDownloadsData", function() {
--- a/browser/components/downloads/test/browser/browser_first_download_panel.js
+++ b/browser/components/downloads/test/browser/browser_first_download_panel.js
@@ -14,29 +14,29 @@ function gen_test()
     // Ensure that state is reset in case previous tests didn't finish.
     for (let yy in gen_resetState(DownloadsCommon.getData(window))) yield;
 
     // With this set to false, we should automatically open the panel
     // the first time a download is started.
     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.
     DownloadsPanel.hidePanel();
 
     ok(DownloadsCommon.getData(window).panelHasShownBefore,
        "Should have recorded that the panel was opened on a download.")
 
     // 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);
   } finally {
     // Clean up when the test finishes.
     for (let yy in gen_resetState(DownloadsCommon.getData(window))) yield;
   }
 }
new file mode 100755
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..7bcc7f569999b5e24184f8745d7618ed5cd7cd91
GIT binary patch
literal 3626
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
rename from browser/themes/gnomestripe/downloads/download-notification.png
rename to browser/themes/gnomestripe/downloads/download-notification-start.png
--- a/browser/themes/gnomestripe/downloads/downloads.css
+++ b/browser/themes/gnomestripe/downloads/downloads.css
@@ -225,44 +225,57 @@ toolbar[iconsize="large"] > #downloads-i
                               0, 16, 16, 0) center no-repeat;
   background-size: 12px;
 }
 
 #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   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 ***/
 
 #downloads-indicator-counter {
   height: 10px;
   margin: 0;
   color: hsl(0,0%,30%);
--- a/browser/themes/gnomestripe/jar.mn
+++ b/browser/themes/gnomestripe/jar.mn
@@ -44,17 +44,18 @@ browser.jar:
   skin/classic/browser/Toolbar.png
   skin/classic/browser/Toolbar-small.png
   skin/classic/browser/urlbar-arrow.png
   skin/classic/browser/webRTC-shareDevice-16.png
   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-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)
   skin/classic/browser/downloads/contentAreaDownloadsView.css  (downloads/contentAreaDownloadsView.css)
   skin/classic/browser/feeds/feedIcon.png             (feeds/feedIcon.png)
   skin/classic/browser/feeds/feedIcon16.png           (feeds/feedIcon16.png)
   skin/classic/browser/feeds/videoFeedIcon.png        (feeds/feedIcon.png)
   skin/classic/browser/feeds/videoFeedIcon16.png      (feeds/feedIcon16.png)
new file mode 100755
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..139bf0b539e3d978b05396f78269043275223b2f
GIT binary patch
literal 4066
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
G(*FP&3#p+1
rename from browser/themes/pinstripe/downloads/download-notification.png
rename to browser/themes/pinstripe/downloads/download-notification-start.png
--- a/browser/themes/pinstripe/downloads/downloads.css
+++ b/browser/themes/pinstripe/downloads/downloads.css
@@ -233,44 +233,57 @@ richlistitem[type="download"][state="1"]
   }
 
   #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor >
   #downloads-indicator-progress-area > #downloads-indicator-counter {
     background-image: url("chrome://browser/skin/downloads/download-glow@2x.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 ***/
 
 #downloads-indicator-counter {
   height: 9px;
   margin: -3px 0 0;
   color: hsl(0,0%,30%);
--- a/browser/themes/pinstripe/jar.mn
+++ b/browser/themes/pinstripe/jar.mn
@@ -68,17 +68,18 @@ browser.jar:
   skin/classic/browser/urlbar-popup-blocked.png
   skin/classic/browser/urlbar-popup-blocked@2x.png
   skin/classic/browser/webRTC-shareDevice-16.png
   skin/classic/browser/webRTC-shareDevice-16@2x.png
   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-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)
   skin/classic/browser/downloads/contentAreaDownloadsView.css (downloads/contentAreaDownloadsView.css)
   skin/classic/browser/feeds/subscribe.css                  (feeds/subscribe.css)
   skin/classic/browser/feeds/subscribe-ui.css               (feeds/subscribe-ui.css)
   skin/classic/browser/feeds/feedIcon.png                   (feeds/feedIcon.png)
   skin/classic/browser/feeds/feedIcon16.png                 (feeds/feedIcon16.png)
new file mode 100755
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..5194f5d59a4328f984b99a8d76be18175b793345
GIT binary patch
literal 3755
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
G+<yS}K=FG3
rename from browser/themes/winstripe/downloads/download-notification.png
rename to browser/themes/winstripe/downloads/download-notification-start.png
--- a/browser/themes/winstripe/downloads/downloads.css
+++ b/browser/themes/winstripe/downloads/downloads.css
@@ -222,44 +222,57 @@ richlistitem[type="download"][state="1"]
                               0, 108, 18, 90) center no-repeat;
   background-size: 12px;
 }
 
 #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   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 ***/
 
 #downloads-indicator-counter {
   height: 9px;
   margin: -3px 0px 0px 0px;
   color: hsl(0,0%,30%);
--- a/browser/themes/winstripe/jar.mn
+++ b/browser/themes/winstripe/jar.mn
@@ -58,17 +58,18 @@ browser.jar:
         skin/classic/browser/urlbar-popup-blocked.png
         skin/classic/browser/urlbar-history-dropmarker.png
         skin/classic/browser/webapps-16.png
         skin/classic/browser/webapps-64.png
         skin/classic/browser/webRTC-shareDevice-16.png
         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)
         skin/classic/browser/downloads/contentAreaDownloadsView.css  (downloads/contentAreaDownloadsView.css)
         skin/classic/browser/feeds/feedIcon.png                      (feeds/feedIcon.png)
         skin/classic/browser/feeds/feedIcon16.png                    (feeds/feedIcon16.png)
         skin/classic/browser/feeds/audioFeedIcon.png                 (feeds/feedIcon.png)
         skin/classic/browser/feeds/audioFeedIcon16.png               (feeds/feedIcon16.png)
@@ -278,17 +279,18 @@ browser.jar:
         skin/classic/aero/browser/urlbar-popup-blocked.png
         skin/classic/aero/browser/urlbar-history-dropmarker.png
         skin/classic/aero/browser/webapps-16.png
         skin/classic/aero/browser/webapps-64.png
         skin/classic/aero/browser/webRTC-shareDevice-16.png
         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)
         skin/classic/aero/browser/downloads/contentAreaDownloadsView.css (downloads/contentAreaDownloadsView.css)
         skin/classic/aero/browser/feeds/feedIcon.png                 (feeds/feedIcon-aero.png)
         skin/classic/aero/browser/feeds/feedIcon16.png               (feeds/feedIcon16-aero.png)
         skin/classic/aero/browser/feeds/audioFeedIcon.png            (feeds/feedIcon-aero.png)
         skin/classic/aero/browser/feeds/audioFeedIcon16.png          (feeds/feedIcon16-aero.png)