Bug 845408 - unify download-indicator and download-button, r=mconley
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 18 Sep 2013 21:32:16 +0200
changeset 149348 14457fb49b983e8f0ad1c92ab67f13e5645262eb
parent 149347 78fb1730c9d3b7925bd1f54aff6c54ea94d3baf1
child 149349 d95ef98e7b05ddde7740af2f8f90ffa3ed0addad
push id25385
push useremorley@mozilla.com
push dateTue, 01 Oct 2013 09:25:32 +0000
treeherdermozilla-central@a55240c523be [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs845408
milestone27.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 845408 - unify download-indicator and download-button, r=mconley
browser/base/content/browser.css
browser/base/content/browser.xul
browser/components/downloads/content/indicator.css
browser/components/downloads/content/indicator.js
browser/components/downloads/content/indicatorOverlay.xul
browser/components/downloads/jar.mn
browser/themes/linux/browser.css
browser/themes/linux/downloads/indicator.css
browser/themes/linux/jar.mn
browser/themes/osx/browser.css
browser/themes/osx/downloads/indicator.css
browser/themes/osx/jar.mn
browser/themes/shared/browser.inc
browser/themes/windows/browser-aero.css
browser/themes/windows/browser.css
browser/themes/windows/downloads/indicator-aero.css
browser/themes/windows/downloads/indicator.css
browser/themes/windows/jar.mn
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -679,20 +679,59 @@ chatbox[minimized="true"] {
 chatbar {
   -moz-binding: url("chrome://browser/content/socialchat.xml#chatbar");
   height: 0;
   max-height: 0;
 }
 
 /** See bug 872317 for why the following rule is necessary. */
 
-#downloads-indicator {
+#downloads-button {
   -moz-binding: url("chrome://browser/content/downloads/download.xml#download-toolbarbutton");
 }
 
+/*** Visibility of downloads indicator controls ***/
+
+#downloads-button[indicator] > image.toolbarbutton-icon {
+  display: none;
+}
+
+toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > image.toolbarbutton-icon {
+  display: -moz-box;
+}
+
+toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > stack.toolbarbutton-icon {
+  display: none;
+}
+
+#downloads-button:-moz-any([progress], [counter], [paused]) #downloads-indicator-icon,
+#downloads-button:not(:-moz-any([progress], [counter], [paused]))
+                                                   #downloads-indicator-progress-area
+{
+  visibility: hidden;
+}
+
+/* Hacks for toolbar full and text modes, until bug 573329 removes them */
+
+toolbar[mode="text"] > #downloads-button {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-pack: center;
+}
+
+toolbar[mode="text"] > #downloads-button > .toolbarbutton-text {
+  -moz-box-ordinal-group: 1;
+}
+
+toolbar[mode="text"] > #downloads-button > .toolbarbutton-icon {
+  display: -moz-box;
+  -moz-box-ordinal-group: 2;
+  visibility: collapse;
+}
+
 /* full screen chat window support */
 chatbar:-moz-full-screen-ancestor,
 chatbox:-moz-full-screen-ancestor  {
   border: none;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -907,18 +907,26 @@
       <!-- This is a placeholder for the Downloads Indicator.  It is visible
            during the customization of the toolbar, in the palette, and before
            the Downloads Indicator overlay is loaded. -->
       <toolbarbutton id="downloads-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
                      oncommand="DownloadsIndicatorView.onCommand(event);"
                      ondrop="DownloadsIndicatorView.onDrop(event);"
                      ondragover="DownloadsIndicatorView.onDragOver(event);"
                      ondragenter="DownloadsIndicatorView.onDragOver(event);"
+                     xmlns:xbl="http://www.mozilla.org/xbl"
                      label="&downloads.label;"
-                     tooltiptext="&downloads.tooltip;"/>
+                     tooltiptext="&downloads.tooltip;">
+        <!-- We need a different binding for the notification and progress bar, which means
+             we don't get these for free. Adding them in our binding loses them when dragging
+             to the customize window, so we add them in here as 'real' children -->
+        <image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
+        <label class="toolbarbutton-text" crop="right" flex="1"
+               xbl:inherits="value=label,accesskey,crop"/>
+      </toolbarbutton>
 
       <toolbarbutton id="history-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
                      observes="viewHistorySidebar" label="&historyButton.label;"
                      tooltiptext="&historyButton.tooltip;"/>
 
       <toolbarbutton id="bookmarks-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
                      observes="viewBookmarksSidebar"
                      tooltiptext="&bookmarksButton.tooltip;"
deleted file mode 100644
--- a/browser/components/downloads/content/indicator.css
+++ /dev/null
@@ -1,36 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * 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/. */
-
-/*** Visibility of indicator controls ***/
-
-#downloads-indicator:-moz-any([progress],
-                              [counter],
-                              [paused])    #downloads-indicator-icon,
-
-#downloads-indicator:not(:-moz-any([progress],
-                                   [counter],
-                                   [paused]))
-                                           #downloads-indicator-progress-area
-
-{
-  visibility: hidden;
-}
-
-/* Hacks for toolbar full and text modes, until bug 573329 removes them */
-
-toolbar[mode="text"] > #downloads-indicator {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  -moz-box-pack: center;
-}
-
-toolbar[mode="text"] > #downloads-indicator > .toolbarbutton-text {
-  -moz-box-ordinal-group: 1;
-}
-
-toolbar[mode="text"] > #downloads-indicator > .toolbarbutton-icon {
-  display: -moz-box;
-  -moz-box-ordinal-group: 2;
-  visibility: collapse;
-}
--- a/browser/components/downloads/content/indicator.js
+++ b/browser/components/downloads/content/indicator.js
@@ -56,17 +56,21 @@ const DownloadsButton = {
    * This function is called asynchronously just after window initialization.
    *
    * NOTE: This function should limit the input/output it performs to improve
    *       startup time, and in particular should not cause the Download Manager
    *       service to start.
    */
   initializeIndicator: function DB_initializeIndicator()
   {
-    this._update();
+    if (!DownloadsCommon.useToolkitUI) {
+      DownloadsIndicatorView.ensureInitialized();
+    } else {
+      DownloadsIndicatorView.ensureTerminated();
+    }
   },
 
   /**
    * Indicates whether toolbar customization is in progress.
    */
   _customizing: false,
 
   /**
@@ -74,110 +78,54 @@ const DownloadsButton = {
    *
    * During customization, we never show the actual download progress indication
    * or the event notifications, but we show a neutral placeholder.  The neutral
    * placeholder is an ordinary button defined in the browser window that can be
    * moved freely between the toolbars and the customization palette.
    */
   customizeStart: function DB_customizeStart()
   {
-    // Hide the indicator and prevent it to be displayed as a temporary anchor
+    // Prevent the indicator from being displayed as a temporary anchor
     // during customization, even if requested using the getAnchor method.
     this._customizing = true;
     this._anchorRequested = false;
-
-    let indicator = DownloadsIndicatorView.indicator;
-    if (indicator) {
-      indicator.collapsed = true;
-    }
-
-    let placeholder = this._placeholder;
-    if (placeholder) {
-      placeholder.collapsed = false;
-    }
   },
 
   /**
    * This function is called when toolbar customization ends.
    */
   customizeDone: function DB_customizeDone()
   {
     this._customizing = false;
-    this._update();
-  },
-
-  /**
-   * This function is called during initialization or when toolbar customization
-   * ends.  It determines if we should enable or disable the object that keeps
-   * the indicator updated, and ensures that the placeholder is hidden unless it
-   * has been moved to the customization palette.
-   *
-   * NOTE: This function is also called on startup, thus it should limit the
-   *       input/output it performs, and in particular should not cause the
-   *       Download Manager service to start.
-   */
-  _update: function DB_update() {
-    this._updatePositionInternal();
-
     if (!DownloadsCommon.useToolkitUI) {
-      DownloadsIndicatorView.ensureInitialized();
+      DownloadsIndicatorView.afterCustomize();
     } else {
       DownloadsIndicatorView.ensureTerminated();
     }
   },
 
   /**
    * Determines the position where the indicator should appear, and moves its
-   * associated element to the new position.  This does not happen if the
-   * indicator is currently being used as the anchor for the panel, to ensure
-   * that the panel doesn't flicker because we move the DOM element to which
-   * it's anchored.
-   */
-  updatePosition: function DB_updatePosition()
-  {
-    if (!this._anchorRequested) {
-      this._updatePositionInternal();
-    }
-  },
-
-  /**
-   * Determines the position where the indicator should appear, and moves its
    * associated element to the new position.
    *
    * @return Anchor element, or null if the indicator is not visible.
    */
-  _updatePositionInternal: function DB_updatePositionInternal()
+  _getAnchorInternal: function DB_getAnchorInternal()
   {
     let indicator = DownloadsIndicatorView.indicator;
     if (!indicator) {
-      // Exit now if the indicator overlay isn't loaded yet.
+      // Exit now if the indicator overlay isn't loaded yet, or if the button
+      // is not in the document.
       return null;
     }
 
-    let placeholder = this._placeholder;
-    if (!placeholder) {
-      // The placeholder has been removed from the browser window.
-      indicator.collapsed = true;
-      // Move the indicator to a safe position on the toolbar, since otherwise
-      // it may break the merge of adjacent items, like back/forward + urlbar.
-      indicator.parentNode.appendChild(indicator);
-      return null;
-    }
-
-    // Position the indicator where the placeholder is located.  We should
-    // update the position even if the placeholder is located on an invisible
-    // toolbar, because the toolbar may be displayed later.
-    placeholder.parentNode.insertBefore(indicator, placeholder);
-    placeholder.collapsed = true;
-    indicator.collapsed = false;
-
     indicator.open = this._anchorRequested;
 
-    // Determine if the placeholder is located on an invisible toolbar.
-    if (!isElementVisible(placeholder.parentNode)) {
+    // Determine if we're located on an invisible toolbar.
+    if (!isElementVisible(indicator.parentNode)) {
       return null;
     }
 
     return DownloadsIndicatorView.indicatorAnchor;
   },
 
   /**
    * Checks whether the indicator is, or will soon be visible in the browser
@@ -220,30 +168,30 @@ const DownloadsButton = {
     // Do not allow anchoring the panel to the element while customizing.
     if (this._customizing) {
       aCallback(null);
       return;
     }
 
     function DB_GA_callback() {
       this._anchorRequested = true;
-      aCallback(this._updatePositionInternal());
+      aCallback(this._getAnchorInternal());
     }
 
     DownloadsOverlayLoader.ensureOverlayLoaded(this.kIndicatorOverlay,
                                                DB_GA_callback.bind(this));
   },
 
   /**
    * Allows the temporary anchor to be hidden.
    */
   releaseAnchor: function DB_releaseAnchor()
   {
     this._anchorRequested = false;
-    this._updatePositionInternal();
+    this._getAnchorInternal();
   },
 
   get _tabsToolbar()
   {
     delete this._tabsToolbar;
     return this._tabsToolbar = document.getElementById("TabsToolbar");
   },
 
@@ -312,30 +260,40 @@ const DownloadsIndicatorView = {
 
   /**
    * Ensures that the user interface elements required to display the indicator
    * are loaded, then invokes the given callback.
    */
   _ensureOperational: function DIV_ensureOperational(aCallback)
   {
     if (this._operational) {
-      aCallback();
+      if (aCallback) {
+        aCallback();
+      }
+      return;
+    }
+
+    // If we don't have a _placeholder, there's no chance that the overlay
+    // will load correctly: bail (and don't set _operational to true!)
+    if (!DownloadsButton._placeholder) {
       return;
     }
 
     function DIV_EO_callback() {
       this._operational = true;
 
       // If the view is initialized, we need to update the elements now that
       // they are finally available in the document.
       if (this._initialized) {
         DownloadsCommon.getIndicatorData(window).refreshView(this);
       }
 
-      aCallback();
+      if (aCallback) {
+        aCallback();
+      }
     }
 
     DownloadsOverlayLoader.ensureOverlayLoaded(
                                  DownloadsButton.kIndicatorOverlay,
                                  DIV_EO_callback.bind(this));
   },
 
   //////////////////////////////////////////////////////////////////////////////
@@ -368,20 +326,16 @@ const DownloadsIndicatorView = {
       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", aType);
       this._notificationTimeout = setTimeout(
         function () indicator.removeAttribute("notification"), 1000);
     }
 
     this._ensureOperational(DIV_SEN_callback.bind(this));
   },
@@ -394,21 +348,18 @@ const DownloadsIndicatorView = {
    * downloads to be displayed.
    */
   set hasDownloads(aValue)
   {
     if (this._hasDownloads != aValue) {
       this._hasDownloads = aValue;
 
       // If there is at least one download, ensure that the view elements are
-      // loaded before determining the position of the downloads button.
       if (aValue) {
-        this._ensureOperational(function() DownloadsButton.updatePosition());
-      } else {
-        DownloadsButton.updatePosition();
+        this._ensureOperational();
       }
     }
     return aValue;
   },
   get hasDownloads()
   {
     return this._hasDownloads;
   },
@@ -550,45 +501,68 @@ const DownloadsIndicatorView = {
       }
 
       let sourceDoc = dt.mozSourceNode ? dt.mozSourceNode.ownerDocument : document;
       saveURL(url, name.value, null, true, true, null, sourceDoc);
       aEvent.preventDefault();
     }
   },
 
+  _indicator: null,
+  _indicatorAnchor: null,
+  __indicatorCounter: null,
+  __indicatorProgress: null,
+
   /**
    * Returns a reference to the main indicator element, or null if the element
    * is not present in the browser window yet.
    */
   get indicator()
   {
-    let indicator = document.getElementById("downloads-indicator");
-    if (!indicator) {
+    if (this._indicator) {
+      return this._indicator;
+    }
+
+    let indicator = document.getElementById("downloads-button");
+    if (!indicator || indicator.getAttribute("indicator") != "true") {
       return null;
     }
 
-    // Once the element is loaded, it will never be unloaded.
-    delete this.indicator;
-    return this.indicator = indicator;
+    return this._indicator = indicator;
   },
 
   get indicatorAnchor()
   {
-    delete this.indicatorAnchor;
-    return this.indicatorAnchor =
-      document.getElementById("downloads-indicator-anchor");
+    return this._indicatorAnchor ||
+      (this._indicatorAnchor = document.getElementById("downloads-indicator-anchor"));
   },
 
   get _indicatorCounter()
   {
-    delete this._indicatorCounter;
-    return this._indicatorCounter =
-      document.getElementById("downloads-indicator-counter");
+    return this.__indicatorCounter ||
+      (this.__indicatorCounter = document.getElementById("downloads-indicator-counter"));
   },
 
   get _indicatorProgress()
   {
-    delete this._indicatorProgress;
-    return this._indicatorProgress =
-      document.getElementById("downloads-indicator-progress");
+    return this.__indicatorProgress ||
+      (this.__indicatorProgress = document.getElementById("downloads-indicator-progress"));
+  },
+
+  _onCustomizedAway: function() {
+    this._indicator = null;
+    this._indicatorAnchor = null;
+    this.__indicatorCounter = null;
+    this.__indicatorProgress = null;
+  },
+
+  afterCustomize: function() {
+    // If the cached indicator is not the one currently in the document,
+    // invalidate our references
+    if (this._indicator != document.getElementById("downloads-button")) {
+      this._onCustomizedAway();
+      this._operational = false;
+      this.ensureTerminated();
+      this.ensureInitialized();
+    }
   }
 };
+
--- a/browser/components/downloads/content/indicatorOverlay.xul
+++ b/browser/components/downloads/content/indicatorOverlay.xul
@@ -1,60 +1,36 @@
 <?xml version="1.0"?>
 <!-- -*- Mode: HTML; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- -->
 <!-- vim: set ts=2 et sw=2 tw=80: -->
 
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - 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/. -->
 
-<?xml-stylesheet href="chrome://browser/content/downloads/indicator.css"?>
-<?xml-stylesheet href="chrome://browser/skin/downloads/indicator.css"?>
-
 <!DOCTYPE overlay [
   <!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd" >
   %browserDTD;
-  <!ENTITY % downloadsDTD SYSTEM "chrome://browser/locale/downloads/downloads.dtd" >
-  %downloadsDTD;
 ]>
 
 <overlay xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
          id="indicatorOverlay">
 
-  <popupset>
-    <!-- The downloads indicator is placed in its final toolbar location
-         programmatically, and can be shown temporarily even when its
-         placeholder is removed from the toolbars.  Its initial location within
-         the document must not be a toolbar or the toolbar palette, otherwise the
-         toolbar handling code could remove it from the document. -->
-    <toolbarbutton id="downloads-indicator"
-                   class="toolbarbutton-1 chromeclass-toolbar-additional"
-                   tooltiptext="&downloads.tooltip;"
-                   collapsed="true"
-                   oncommand="DownloadsIndicatorView.onCommand(event);"
-                   ondrop="DownloadsIndicatorView.onDrop(event);"
-                   ondragover="DownloadsIndicatorView.onDragOver(event);"
-                   ondragenter="DownloadsIndicatorView.onDragOver(event);"
-                   ondragleave="DownloadsIndicatorView.onDragLeave(event);"
-                   skipintoolbarset="true">
-      <!-- The panel's anchor area is smaller than the outer button, but must
-           always be visible and must not move or resize when the indicator
-           state changes, otherwise the panel could change its position or lose
-           its arrow unexpectedly. -->
-      <stack id="downloads-indicator-anchor"
-             class="toolbarbutton-icon">
-        <vbox id="downloads-indicator-progress-area"
-              pack="center">
-          <description id="downloads-indicator-counter"/>
-          <progressmeter id="downloads-indicator-progress"
-                         class="plain"
-                         min="0"
-                         max="100"/>
-        </vbox>
-        <vbox id="downloads-indicator-icon"/>
-        <vbox id="downloads-indicator-notification"/>
-      </stack>
-      <label class="toolbarbutton-text" crop="right" flex="1"
-             value="&downloads.label;"/>
-    </toolbarbutton>
-  </popupset>
+  <!-- We dynamically add the stack with the progress meter and notification icon,
+       originally loaded lazily because of performance reasons, to the existing
+       downloads-button. -->
+  <toolbarbutton id="downloads-button" indicator="true">
+    <!-- The panel's anchor area is smaller than the outer button, but must
+         always be visible and must not move or resize when the indicator
+         state changes, otherwise the panel could change its position or lose
+         its arrow unexpectedly. -->
+    <stack id="downloads-indicator-anchor" class="toolbarbutton-icon">
+      <vbox id="downloads-indicator-progress-area" pack="center">
+        <description id="downloads-indicator-counter"/>
+        <progressmeter id="downloads-indicator-progress" class="plain"
+                       min="0" max="100"/>
+      </vbox>
+      <vbox id="downloads-indicator-icon"/>
+      <vbox id="downloads-indicator-notification"/>
+    </stack>
+  </toolbarbutton>
 </overlay>
--- a/browser/components/downloads/jar.mn
+++ b/browser/components/downloads/jar.mn
@@ -3,17 +3,16 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 browser.jar:
 *       content/browser/downloads/download.xml           (content/download.xml)
         content/browser/downloads/download.css           (content/download.css)
         content/browser/downloads/downloads.css          (content/downloads.css)
 *       content/browser/downloads/downloads.js           (content/downloads.js)
 *       content/browser/downloads/downloadsOverlay.xul   (content/downloadsOverlay.xul)
-        content/browser/downloads/indicator.css          (content/indicator.css)
         content/browser/downloads/indicator.js           (content/indicator.js)
         content/browser/downloads/indicatorOverlay.xul   (content/indicatorOverlay.xul)
 *       content/browser/downloads/allDownloadsViewOverlay.xul (content/allDownloadsViewOverlay.xul)
         content/browser/downloads/allDownloadsViewOverlay.js  (content/allDownloadsViewOverlay.js)
         content/browser/downloads/allDownloadsViewOverlay.css (content/allDownloadsViewOverlay.css)
 *       content/browser/downloads/contentAreaDownloadsView.xul (content/contentAreaDownloadsView.xul)
         content/browser/downloads/contentAreaDownloadsView.js  (content/contentAreaDownloadsView.js)
         content/browser/downloads/contentAreaDownloadsView.css (content/contentAreaDownloadsView.css)
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -2063,16 +2063,18 @@ toolbar[mode="text"] toolbarbutton.chevr
   font-size: 120%;
 }
 
 %include ../shared/devtools/responsivedesign.inc.css
 %include ../shared/devtools/highlighter.inc.css
 %include ../shared/devtools/commandline.inc.css
 %include ../shared/plugin-doorhanger.inc.css
 
+%include downloads/indicator.css
+
 .gcli-panel {
   padding: 0;
 }
 
 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
   color: hsl(210,11%,16%);
 }
 
--- a/browser/themes/linux/downloads/indicator.css
+++ b/browser/themes/linux/downloads/indicator.css
@@ -6,56 +6,56 @@
 
 #downloads-indicator-anchor {
   /* Makes the outermost stack element positioned, so that its contents are
      rendered over the main browser window in the Z order.  This is required by
      the animated event notification. */
   position: relative;
 }
 
-toolbar[iconsize="small"] > #downloads-indicator > #downloads-indicator-anchor {
+toolbar[iconsize="small"] > #downloads-button > #downloads-indicator-anchor {
   min-width: 16px;
   min-height: 16px;
 }
 
-toolbar[iconsize="large"] > #downloads-indicator > #downloads-indicator-anchor {
+toolbar[iconsize="large"] > #downloads-button > #downloads-indicator-anchor {
   min-width: 24px;
   min-height: 24px;
 }
 
 /*** Main indicator icon ***/
 
-toolbar[iconsize="small"] > #downloads-indicator > #downloads-indicator-anchor > #downloads-indicator-icon {
+toolbar[iconsize="small"] > #downloads-button > #downloads-indicator-anchor > #downloads-indicator-icon {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"),
                               0, 16, 16, 0) center no-repeat;
 }
 
-toolbar[iconsize="large"] > #downloads-indicator > #downloads-indicator-anchor > #downloads-indicator-icon {
+toolbar[iconsize="large"] > #downloads-button > #downloads-indicator-anchor > #downloads-indicator-icon {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                               0, 24, 24, 0) center no-repeat;
 }
 
-toolbar[iconsize="small"] > #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
+toolbar[iconsize="small"] > #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
   background-image: url("chrome://browser/skin/downloads/download-glow-small.png");
 }
 
-toolbar[iconsize="large"] > #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
+toolbar[iconsize="large"] > #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 }
 
 /* In the next few rules, we use :not([counter]) as a shortcut that is
    equivalent to -moz-any([progress], [paused]). */
 
-#downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
+#downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"),
                               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 {
+#downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 }
 
 /*** Download notifications ***/
 
 #downloads-indicator-notification {
   opacity: 0;
   background-size: 16px;
@@ -70,33 +70,33 @@ toolbar[iconsize="large"] > #downloads-i
 }
 
 @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="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-button[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="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-button[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 {
+#downloads-button[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 {
@@ -139,20 +139,20 @@ toolbar[iconsize="large"] > #downloads-i
   min-height: 0;
   background-image: linear-gradient(#505050, #575757);
   border: 1px solid;
   border-color: hsla(0,0%,0%,.6) hsla(0,0%,0%,.4) hsla(0,0%,0%,.4);
   -moz-border-start: none;
   border-radius: 0 2px 2px 0;
 }
 
-#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
+#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
   background-color: rgb(220, 230, 81);
 }
 
-#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
+#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
   background-image: linear-gradient(#4b5000, #515700);
 }
 
-toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {
+toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {
   margin: 0;
   text-align: center;
 }
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -65,17 +65,16 @@ browser.jar:
   skin/classic/browser/downloads/buttons.png          (downloads/buttons.png)
   skin/classic/browser/downloads/contentAreaDownloadsView.css  (downloads/contentAreaDownloadsView.css)
   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-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/indicator.css        (downloads/indicator.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)
   skin/classic/browser/feeds/audioFeedIcon.png        (feeds/feedIcon.png)
   skin/classic/browser/feeds/audioFeedIcon16.png      (feeds/feedIcon16.png)
   skin/classic/browser/feeds/subscribe.css            (feeds/subscribe.css)
   skin/classic/browser/feeds/subscribe-ui.css         (feeds/subscribe-ui.css)
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -3659,16 +3659,18 @@ toolbarbutton.chevron > .toolbarbutton-m
   font-size: 120%;
 }
 
 %include ../shared/devtools/responsivedesign.inc.css
 %include ../shared/devtools/highlighter.inc.css
 %include ../shared/devtools/commandline.inc.css
 %include ../shared/plugin-doorhanger.inc.css
 
+%include downloads/indicator.css
+
 /* On mac, the popup notification contents are indented by default and so
   the default closebutton margins from notification.css require adjustment */
 
 .click-to-play-plugins-notification-description-box > .popup-notification-closebutton {
   -moz-margin-end: -6px;
   margin-top: -7px;
 }
 
--- a/browser/themes/osx/downloads/indicator.css
+++ b/browser/themes/osx/downloads/indicator.css
@@ -17,53 +17,53 @@
 
 /*** Main indicator icon ***/
 
 #downloads-indicator-icon {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                               0, 140, 20, 120) center no-repeat;
 }
 
-#downloads-indicator[attention]
+#downloads-button[attention]
 #downloads-indicator-icon {
   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 }
 
 /* In the next few rules, we use :not([counter]) as a shortcut that is
    equivalent to -moz-any([progress], [paused]). */
 
-#downloads-indicator:not([counter])
+#downloads-button:not([counter])
 #downloads-indicator-counter {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                               0, 140, 20, 120) center no-repeat;
   background-size: 12px;
 }
 
-#downloads-indicator:not([counter])[attention]
+#downloads-button:not([counter])[attention]
 #downloads-indicator-counter {
   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 }
 
 @media (min-resolution: 2dppx) {
   #downloads-indicator-icon:not(:-moz-lwtheme-brighttext) {
     background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 280, 40, 240);
     background-size: 20px;
   }
 
-  #downloads-indicator:not([counter]) > #downloads-indicator-anchor >
+  #downloads-button:not([counter]) > #downloads-indicator-anchor >
   #downloads-indicator-progress-area > #downloads-indicator-counter {
     background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 280, 40, 240);
   }
 
-  #downloads-indicator[attention] > #downloads-indicator-anchor >
+  #downloads-button[attention] > #downloads-indicator-anchor >
   #downloads-indicator-icon {
     background-image: url("chrome://browser/skin/downloads/download-glow@2x.png");
   }
 
-  #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor >
+  #downloads-button:not([counter])[attention] > #downloads-indicator-anchor >
   #downloads-indicator-progress-area > #downloads-indicator-counter {
     background-image: url("chrome://browser/skin/downloads/download-glow@2x.png");
   }
 }
 
 /*** Download notifications ***/
 
 #downloads-indicator-notification {
@@ -80,46 +80,46 @@
 }
 
 @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="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-button[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;
 }
 
 @media (min-resolution: 2dppx) {
-  #downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+  #downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
     background-image: url("chrome://browser/skin/downloads/download-notification-start@2x.png");
   }
 }
 
-#downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-button[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 {
+#downloads-button[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;
 }
 
 @media (min-resolution: 2dppx) {
-  #downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+  #downloads-button[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
     background-image: url("chrome://browser/skin/downloads/download-notification-finish@2x.png");
   }
 }
 
 /*** Progress bar and text ***/
 
 #downloads-indicator-counter {
   height: 9px;
@@ -161,22 +161,22 @@
   min-height: 0;
   background-image: linear-gradient(#505050, #575757);
   border: 1px solid;
   border-color: hsla(0,0%,0%,.6) hsla(0,0%,0%,.4) hsla(0,0%,0%,.4);
   -moz-border-start: none;
   border-radius: 0 2px 2px 0;
 }
 
-#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
+#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
   background-color: rgb(220, 230, 81);
 }
 
-#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
+#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
   background-image: linear-gradient(#4b5000, #515700);
 }
 
-toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {
+toolbar[mode="full"] > #downloads-button[indicator] > .toolbarbutton-text {
   margin: 2px 0 0;
   padding: 0;
   text-align: center;
   vertical-align: middle;
 }
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -107,17 +107,16 @@ browser.jar:
   skin/classic/browser/downloads/download-glow@2x.png       (downloads/download-glow@2x.png)
   skin/classic/browser/downloads/download-notification-finish.png  (downloads/download-notification-finish.png)
   skin/classic/browser/downloads/download-notification-finish@2x.png  (downloads/download-notification-finish@2x.png)
   skin/classic/browser/downloads/download-notification-start.png  (downloads/download-notification-start.png)
   skin/classic/browser/downloads/download-notification-start@2x.png  (downloads/download-notification-start@2x.png)
   skin/classic/browser/downloads/download-summary.png       (downloads/download-summary.png)
   skin/classic/browser/downloads/download-summary@2x.png    (downloads/download-summary@2x.png)
   skin/classic/browser/downloads/downloads.css              (downloads/downloads.css)
-  skin/classic/browser/downloads/indicator.css              (downloads/indicator.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)
   skin/classic/browser/feeds/videoFeedIcon.png              (feeds/feedIcon.png)
   skin/classic/browser/feeds/videoFeedIcon16.png            (feeds/feedIcon16.png)
   skin/classic/browser/feeds/audioFeedIcon.png              (feeds/feedIcon.png)
   skin/classic/browser/feeds/audioFeedIcon16.png            (feeds/feedIcon16.png)
--- a/browser/themes/shared/browser.inc
+++ b/browser/themes/shared/browser.inc
@@ -1,3 +1,3 @@
 %filter substitution
 
-%define primaryToolbarButtons #back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #history-button, #bookmarks-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button
+%define primaryToolbarButtons #back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #history-button, #bookmarks-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -5,16 +5,18 @@
 %define WINDOWS_AERO
 %include browser.css
 %undef WINDOWS_AERO
 
 %define customToolbarColor hsl(210,75%,92%)
 %define glassActiveBorderColor rgb(37, 44, 51)
 %define glassInactiveBorderColor rgb(102, 102, 102)
 
+%include downloads/indicator-aero.css
+
 @media not all and (-moz-windows-classic) {
   #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container {
     margin-top: 1px;
   }
 
   #appmenu-button {
     border-width: 2px;
     -moz-border-left-colors: @appMenuButtonBorderColor@;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -2813,16 +2813,18 @@ toolbarbutton.bookmark-item[dragover="tr
   font-size: 120%;
 }
 
 %include ../shared/devtools/responsivedesign.inc.css
 %include ../shared/devtools/highlighter.inc.css
 %include ../shared/devtools/commandline.inc.css
 %include ../shared/plugin-doorhanger.inc.css
 
+%include downloads/indicator.css
+
 /* Error counter */
 
 #developer-toolbar-toolbox-button[error-count]:before {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
   background-image: linear-gradient(#B4211B, #8A1915);
   border-radius: 1px;
--- a/browser/themes/windows/downloads/indicator-aero.css
+++ b/browser/themes/windows/downloads/indicator-aero.css
@@ -1,37 +1,33 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
-%define WINDOWS_AERO
-%include indicator.css
-%undef WINDOWS_AERO
-
 @media (-moz-windows-compositor) {
   /* The following rules are for the downloads indicator when in its normal,
      non-downloading, non-paused state (ie, it's just showing the downloads
      button icon). */
-  #toolbar-menubar #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
-  #TabsToolbar[tabsontop=true] #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
-  #navigator-toolbox[tabsontop=false] > #nav-bar #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
-  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
+  #toolbar-menubar #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
+  #TabsToolbar[tabsontop=true] #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
+  #navigator-toolbox[tabsontop=false] > #nav-bar #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
+  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
 
   /* The following rules are for the downloads indicator when in its paused
      or undetermined progress state. We use :not([counter]) as a shortcut for
      :-moz-any([progress], [paused]). */
 
   /* This is the case where the downloads indicator has been moved next to the menubar */
-  #toolbar-menubar #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
+  #toolbar-menubar #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
   /* This is the case where the downloads indicator is in the tabstrip toolbar with tabs on top. */
-  #TabsToolbar[tabsontop=true] #downloads-indicator:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
+  #TabsToolbar[tabsontop=true] #downloads-button:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
   /* This is the case where the downloads indicator is anywhere in the nav-bar with tabs on bottom. */
-  #navigator-toolbox[tabsontop=false] > #nav-bar #downloads-indicator:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
+  #navigator-toolbox[tabsontop=false] > #nav-bar #downloads-button:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
   /* This is the case where the downloads indicator is in the tabstrip when the tabstrip is the last item in the toolbox (and is therefore over glass) */
-  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-indicator:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
+  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-button:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
     background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 108, 18, 90);
   }
 
   #toolbar-menubar #downloads-indicator-counter:not(:-moz-lwtheme),
   #TabsToolbar[tabsontop=true] #downloads-indicator-counter:not(:-moz-lwtheme),
   #navigator-toolbox[tabsontop=false] > #nav-bar #downloads-indicator-counter:not(:-moz-lwtheme),
   #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-indicator-counter:not(:-moz-lwtheme) {
     color: white;
--- a/browser/themes/windows/downloads/indicator.css
+++ b/browser/themes/windows/downloads/indicator.css
@@ -20,30 +20,30 @@
   min-height: 18px;
 }
 
 #downloads-indicator-icon:-moz-lwtheme-brighttext {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
                               0, 108, 18, 90) center no-repeat;
 }
 
-#downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
+#downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 }
 
 /* In the next few rules, we use :not([counter]) as a shortcut that is
    equivalent to -moz-any([progress], [paused]). */
 
-#downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
+#downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                               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 {
+#downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 }
 
 /*** Download notifications ***/
 
 #downloads-indicator-notification {
   opacity: 0;
   background-size: 16px;
@@ -58,33 +58,33 @@
 }
 
 @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="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-button[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="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-button[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 {
+#downloads-button[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 {
@@ -133,20 +133,20 @@
   min-height: 0;
   background-image: linear-gradient(#505050, #575757);
   border: 1px solid;
   border-color: hsla(0,0%,0%,.6) hsla(0,0%,0%,.4) hsla(0,0%,0%,.4);
   -moz-border-start: none;
   border-radius: 0 2px 2px 0;
 }
 
-#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
+#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
   background-color: rgb(220, 230, 81);
 }
 
-#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
+#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
   background-image: linear-gradient(#4b5000, #515700);
 }
 
-toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {
+toolbar[mode="full"] > #downloads-button[indicator] > .toolbarbutton-text {
   margin: 0;
   text-align: center;
 }
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -82,17 +82,16 @@ browser.jar:
 *       skin/classic/browser/downloads/allDownloadsViewOverlay.css   (downloads/allDownloadsViewOverlay.css)
         skin/classic/browser/downloads/buttons.png                   (downloads/buttons.png)
         skin/classic/browser/downloads/contentAreaDownloadsView.css  (downloads/contentAreaDownloadsView.css)
         skin/classic/browser/downloads/download-glow.png             (downloads/download-glow.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/indicator.css                 (downloads/indicator.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)
         skin/classic/browser/feeds/videoFeedIcon.png                 (feeds/feedIcon.png)
         skin/classic/browser/feeds/videoFeedIcon16.png               (feeds/feedIcon16.png)
         skin/classic/browser/feeds/subscribe.css                     (feeds/subscribe.css)
         skin/classic/browser/feeds/subscribe-ui.css                  (feeds/subscribe-ui.css)
@@ -357,17 +356,16 @@ browser.jar:
 *       skin/classic/aero/browser/downloads/allDownloadsViewOverlay.css (downloads/allDownloadsViewOverlay-aero.css)
         skin/classic/aero/browser/downloads/buttons.png              (downloads/buttons-aero.png)
         skin/classic/aero/browser/downloads/contentAreaDownloadsView.css (downloads/contentAreaDownloadsView.css)
         skin/classic/aero/browser/downloads/download-glow.png        (downloads/download-glow.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/indicator.css            (downloads/indicator-aero.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)
         skin/classic/aero/browser/feeds/videoFeedIcon.png            (feeds/feedIcon-aero.png)
         skin/classic/aero/browser/feeds/videoFeedIcon16.png          (feeds/feedIcon16-aero.png)
         skin/classic/aero/browser/feeds/subscribe.css                (feeds/subscribe.css)
         skin/classic/aero/browser/feeds/subscribe-ui.css             (feeds/subscribe-ui.css)