Bug 1329109 - remove unused time and progressbar code from downloads toolbar icon. r?paolo draft
authorSam Foster <sfoster@mozilla.com>
Mon, 08 May 2017 10:11:52 -0700
changeset 574445 e92f0b2dedcc8d6f59b97428bd95a1b6479df4c7
parent 574065 1fda52a1f3b81cf1a821155998dca637bb64e3d9
child 627599 86df452310d1dc7fc0e51b4a6a723e4612ccb654
push id57713
push userbmo:sfoster@mozilla.com
push dateMon, 08 May 2017 21:35:06 +0000
reviewerspaolo
bugs1329109
milestone55.0a1
Bug 1329109 - remove unused time and progressbar code from downloads toolbar icon. r?paolo This removes the arrowStyledIndicator killswitch and the associated ability for system add-ons to restore the previous design of the Downloads Indicator in the toolbar. The removal includes all the related code, styles, and strings. Based on the original patch by :rexboy. MozReview-Commit-ID: 2OEBzPNzl0O
browser/base/content/browser.css
browser/components/downloads/DownloadsCommon.jsm
browser/components/downloads/content/indicator.js
browser/components/downloads/content/indicatorOverlay.xul
browser/components/downloads/moz.build
browser/components/downloads/test/unit/.eslintrc.js
browser/components/downloads/test/unit/head.js
browser/components/downloads/test/unit/test_DownloadsCommon.js
browser/components/downloads/test/unit/xpcshell.ini
browser/locales/en-US/chrome/browser/downloads/downloads.properties
browser/themes/linux/downloads/indicator.css
browser/themes/osx/downloads/indicator.css
browser/themes/shared/compacttheme.inc.css
browser/themes/windows/downloads/indicator.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -992,27 +992,16 @@ notification[value="translation"] {
 toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > .toolbarbutton-badge-stack > image.toolbarbutton-icon {
   display: -moz-box;
 }
 
 toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads-indicator-anchor {
   display: none;
 }
 
-#downloads-button.withProgressBar:-moz-any([progress], [counter], [paused]) #downloads-indicator-icon,
-#downloads-button:not(:-moz-any([progress], [counter], [paused])) #downloads-indicator-progress-area {
-  visibility: hidden;
-}
-
-/* Hide elements for another type of progressmeter if it's not in use. */
-#downloads-button.withProgressBar #downloads-indicator-progress-icon,
-#downloads-button:not(.withProgressBar) #downloads-indicator-progress-area {
-  visibility: hidden;
-}
-
 /* Combobox dropdown renderer */
 #ContentSelectDropdown > menupopup {
   /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
    * the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
   direction: ltr;
 }
 
 /* Indent options in optgroups */
--- a/browser/components/downloads/DownloadsCommon.jsm
+++ b/browser/components/downloads/DownloadsCommon.jsm
@@ -73,20 +73,16 @@ XPCOMUtils.defineLazyGetter(this, "Downl
 
 const nsIDM = Ci.nsIDownloadManager;
 
 const kDownloadsStringBundleUrl =
   "chrome://browser/locale/downloads/downloads.properties";
 
 const kDownloadsStringsRequiringFormatting = {
   sizeWithUnits: true,
-  shortTimeLeftSeconds: true,
-  shortTimeLeftMinutes: true,
-  shortTimeLeftHours: true,
-  shortTimeLeftDays: true,
   statusSeparator: true,
   statusSeparatorBeforeNumber: true,
   fileExecutableSecurityWarning: true
 };
 
 const kDownloadsStringsRequiringPluralForm = {
   otherDownloads3: true
 };
@@ -140,23 +136,16 @@ PrefObserver.register({
  */
 this.DownloadsCommon = {
   ATTENTION_NONE: "",
   ATTENTION_SUCCESS: "success",
   ATTENTION_WARNING: "warning",
   ATTENTION_SEVERE: "severe",
 
   /**
-   * This can be used by add-on experiments as a killswitch for the new style
-   * progress indication. This will be removed in bug 1329109 after the new
-   * indicator is released.
-   **/
-  arrowStyledIndicator: true,
-
-  /**
    * Returns an object whose keys are the string names from the downloads string
    * bundle, and whose values are either the translated strings or functions
    * returning formatted strings.
    */
   get strings() {
     let strings = {};
     let sb = Services.strings.createBundle(kDownloadsStringBundleUrl);
     let enumerator = sb.getSimpleEnumeration();
@@ -182,46 +171,16 @@ this.DownloadsCommon = {
         strings[stringName] = string.value;
       }
     }
     delete this.strings;
     return this.strings = strings;
   },
 
   /**
-   * Generates a very short string representing the given time left.
-   *
-   * @param aSeconds
-   *        Value to be formatted.  It represents the number of seconds, it must
-   *        be positive but does not need to be an integer.
-   *
-   * @return Formatted string, for example "30s" or "2h".  The returned value is
-   *         maximum three characters long, at least in English.
-   */
-  formatTimeLeft(aSeconds) {
-    // Decide what text to show for the time
-    let seconds = Math.round(aSeconds);
-    if (!seconds) {
-      return "";
-    } else if (seconds <= 30) {
-      return DownloadsCommon.strings["shortTimeLeftSeconds"](seconds);
-    }
-    let minutes = Math.round(aSeconds / 60);
-    if (minutes < 60) {
-      return DownloadsCommon.strings["shortTimeLeftMinutes"](minutes);
-    }
-    let hours = Math.round(minutes / 60);
-    if (hours < 48) { // two days
-      return DownloadsCommon.strings["shortTimeLeftHours"](hours);
-    }
-    let days = Math.round(hours / 24);
-    return DownloadsCommon.strings["shortTimeLeftDays"](Math.min(days, 99));
-  },
-
-  /**
    * Indicates whether we should show visual notification on the indicator
    * when a download event is triggered.
    */
   get animateNotifications() {
     return PrefObserver.animateNotifications;
   },
 
   /**
@@ -1194,39 +1153,33 @@ DownloadsIndicatorDataCtor.prototype = {
         this.attention = DownloadsCommon.ATTENTION_SUCCESS;
       }
     } else if (download.error) {
       // Existing higher level attention indication trumps ATTENTION_WARNING.
       if (this._attention != DownloadsCommon.ATTENTION_SEVERE) {
         this.attention = DownloadsCommon.ATTENTION_WARNING;
       }
     }
-
-    // Since the state of a download changed, reset the estimated time left.
-    this._lastRawTimeLeft = -1;
-    this._lastTimeLeft = -1;
   },
 
   onDownloadChanged(download) {
     this._updateViews();
   },
 
   onDownloadRemoved(download) {
     this._itemCount--;
     this._updateViews();
   },
 
   // Propagation of properties to our views
 
   // The following properties are updated by _refreshProperties and are then
   // propagated to the views.  See _refreshProperties for details.
   _hasDownloads: false,
-  _counter: "",
   _percentComplete: -1,
-  _paused: false,
 
   /**
    * Indicates whether the download indicators should be highlighted.
    */
   set attention(aValue) {
     this._attention = aValue;
     this._updateViews();
     return aValue;
@@ -1261,47 +1214,29 @@ DownloadsIndicatorDataCtor.prototype = {
   /**
    * Updates the specified view with the current aggregate values.
    *
    * @param aView
    *        DownloadsIndicatorView object to be updated.
    */
   _updateView(aView) {
     aView.hasDownloads = this._hasDownloads;
-    aView.counter = this._counter;
     aView.percentComplete = this._percentComplete;
-    aView.paused = this._paused;
     aView.attention = this._attentionSuppressed ? DownloadsCommon.ATTENTION_NONE
                                                 : this._attention;
   },
 
   // Property updating based on current download status
 
   /**
    * Number of download items that are available to be displayed.
    */
   _itemCount: 0,
 
   /**
-   * Floating point value indicating the last number of seconds estimated until
-   * the longest download will finish.  We need to store this value so that we
-   * don't continuously apply smoothing if the actual download state has not
-   * changed.  This is set to -1 if the previous value is unknown.
-   */
-  _lastRawTimeLeft: -1,
-
-  /**
-   * Last number of seconds estimated until all in-progress downloads with a
-   * known size and speed will finish.  This value is stored to allow smoothing
-   * in case of small variations.  This is set to -1 if the previous value is
-   * unknown.
-   */
-  _lastTimeLeft: -1,
-
-  /**
    * A generator function for the Download objects this summary is currently
    * interested in. This generator is passed off to summarizeDownloads in order
    * to generate statistics about the downloads we care about - in this case,
    * it's all active downloads.
    */
   * _activeDownloads() {
     let downloads = this._isPrivate ? PrivateDownloadsData.downloads
                                     : DownloadsData.downloads;
@@ -1317,37 +1252,17 @@ DownloadsIndicatorDataCtor.prototype = {
    */
   _refreshProperties() {
     let summary =
       DownloadsCommon.summarizeDownloads(this._activeDownloads());
 
     // Determine if the indicator should be shown or get attention.
     this._hasDownloads = (this._itemCount > 0);
 
-    // If all downloads are paused, show the progress indicator as paused.
-    this._paused = summary.numActive > 0 &&
-                   summary.numActive == summary.numPaused;
-
     this._percentComplete = summary.percentComplete;
-
-    // Display the estimated time left, if present.
-    if (summary.rawTimeLeft == -1) {
-      // There are no downloads with a known time left.
-      this._lastRawTimeLeft = -1;
-      this._lastTimeLeft = -1;
-      this._counter = "";
-    } else {
-      // Compute the new time left only if state actually changed.
-      if (this._lastRawTimeLeft != summary.rawTimeLeft) {
-        this._lastRawTimeLeft = summary.rawTimeLeft;
-        this._lastTimeLeft = DownloadsCommon.smoothSeconds(summary.rawTimeLeft,
-                                                           this._lastTimeLeft);
-      }
-      this._counter = DownloadsCommon.formatTimeLeft(this._lastTimeLeft);
-    }
   }
 };
 
 XPCOMUtils.defineLazyGetter(this, "PrivateDownloadsIndicatorData", function() {
   return new DownloadsIndicatorDataCtor(true);
 });
 
 XPCOMUtils.defineLazyGetter(this, "DownloadsIndicatorData", function() {
--- a/browser/components/downloads/content/indicator.js
+++ b/browser/components/downloads/content/indicator.js
@@ -211,48 +211,35 @@ const DownloadsIndicatorView = {
    * Prepares the downloads indicator to be displayed.
    */
   ensureInitialized() {
     if (this._initialized) {
       return;
     }
     this._initialized = true;
 
-    this._setIndicatorType();
     window.addEventListener("unload", this.onWindowUnload);
     DownloadsCommon.getIndicatorData(window).addView(this);
   },
 
-  _setIndicatorType() {
-    // We keep a killerswitch for old-styled progressbar for now. Corresponding
-    // css class is added here to reflect the type chosen for showing progress.
-    let node = CustomizableUI.getWidget("downloads-button")
-                             .forWindow(window).node;
-
-    node.classList.toggle("withProgressBar",
-                          !DownloadsCommon.arrowStyledIndicator);
-  },
-
   /**
    * Frees the internal resources related to the indicator.
    */
   ensureTerminated() {
     if (!this._initialized) {
       return;
     }
     this._initialized = false;
 
     window.removeEventListener("unload", this.onWindowUnload);
     DownloadsCommon.getIndicatorData(window).removeView(this);
 
     // Reset the view properties, so that a neutral indicator is displayed if we
     // are visible only temporarily as an anchor.
-    this.counter = "";
     this.percentComplete = 0;
-    this.paused = false;
     this.attention = DownloadsCommon.ATTENTION_NONE;
   },
 
   /**
    * Ensures that the user interface elements required to display the indicator
    * are loaded, then invokes the given callback.
    */
   _ensureOperational(aCallback) {
@@ -394,45 +381,18 @@ const DownloadsIndicatorView = {
     return aValue;
   },
   get hasDownloads() {
     return this._hasDownloads;
   },
   _hasDownloads: false,
 
   /**
-   * Status text displayed in the indicator.  If this is set to an empty value,
-   * then the small downloads icon is displayed instead of the text.
-   */
-  set counter(aValue) {
-    if (!this._operational) {
-      return this._counter;
-    }
-
-    if (this._counter !== aValue) {
-      this._counter = aValue;
-      if (this._counter)
-        this.indicator.setAttribute("counter", "true");
-      else
-        this.indicator.removeAttribute("counter");
-      // We have to set the attribute instead of using the property because the
-      // XBL binding isn't applied if the element is invisible for any reason.
-      this._indicatorCounter.setAttribute("value", aValue);
-    }
-    return aValue;
-  },
-  _counter: null,
-
-  /**
    * Progress indication to display, from 0 to 100, or -1 if unknown.
-   * Bar-type:
-   *   The progress bar is hidden if the current progress is unknown and no
-   *   status text is set in the "counter" property.
-   * Arrow-type:
-   *   progress is not visible if the current progress is unknown.
+   * Progress is not visible if the current progress is unknown.
    */
   set percentComplete(aValue) {
     if (!this._operational) {
       return this._percentComplete;
     }
 
     if (this._percentComplete !== aValue) {
       this._percentComplete = aValue;
@@ -443,47 +403,22 @@ const DownloadsIndicatorView = {
         // For arrow type only:
         // We set animationDelay to a minus value (0s ~ -100s) to show the
         // corresponding frame needed for progress.
         this._progressIcon.style.animationDelay = (-this._percentComplete) + "s";
       } else {
         this.indicator.removeAttribute("progress");
         this._progressIcon.style.animationDelay = "1s";
       }
-      // We have to set the attribute instead of using the property because the
-      // XBL binding isn't applied if the element is invisible for any reason.
-      this._indicatorProgress.setAttribute("value", Math.max(aValue, 0));
     }
     return aValue;
   },
   _percentComplete: null,
 
   /**
-   * Indicates whether the progress won't advance because of a paused state.
-   * Setting this property forces a paused progress bar to be displayed, even if
-   * the current progress information is unavailable.
-   */
-  set paused(aValue) {
-    if (!this._operational) {
-      return this._paused;
-    }
-
-    if (this._paused != aValue) {
-      this._paused = aValue;
-      if (this._paused) {
-        this.indicator.setAttribute("paused", "true")
-      } else {
-        this.indicator.removeAttribute("paused");
-      }
-    }
-    return aValue;
-  },
-  _paused: false,
-
-  /**
    * Set when the indicator should draw user attention to itself.
    */
   set attention(aValue) {
     if (!this._operational) {
       return this._attention;
     }
     if (this._attention != aValue) {
       this._attention = aValue;
@@ -495,17 +430,17 @@ const DownloadsIndicatorView = {
   _refreshAttention() {
     // Check if the downloads button is in the menu panel, to determine which
     // button needs to get a badge.
     let widgetGroup = CustomizableUI.getWidget("downloads-button");
     let inMenu = widgetGroup.areaType == CustomizableUI.TYPE_MENU_PANEL;
 
     // For arrow-Styled indicator, suppress success attention if we have
     // progress in toolbar
-    let suppressAttention = DownloadsCommon.arrowStyledIndicator && !inMenu &&
+    let suppressAttention = !inMenu &&
       this._attention == DownloadsCommon.ATTENTION_SUCCESS &&
       this._percentComplete >= 0;
 
     if (suppressAttention || this._attention == DownloadsCommon.ATTENTION_NONE) {
       this.indicator.removeAttribute("attention");
       if (inMenu) {
         PanelUI.removeNotification(/^download-/);
       }
@@ -561,18 +496,16 @@ const DownloadsIndicatorView = {
       handled = true;
     }
     if (handled) {
       aEvent.preventDefault();
     }
   },
 
   _indicator: null,
-  __indicatorCounter: null,
-  __indicatorProgress: null,
   __progressIcon: null,
 
   /**
    * Returns a reference to the main indicator element, or null if the element
    * is not present in the browser window yet.
    */
   get indicator() {
     if (this._indicator) {
@@ -591,41 +524,29 @@ const DownloadsIndicatorView = {
     let widget = CustomizableUI.getWidget("downloads-button")
                                .forWindow(window);
     if (widget.overflowed) {
       return widget.anchor;
     }
     return document.getElementById("downloads-indicator-anchor");
   },
 
-  get _indicatorCounter() {
-    return this.__indicatorCounter ||
-      (this.__indicatorCounter = document.getElementById("downloads-indicator-counter"));
-  },
-
-  get _indicatorProgress() {
-    return this.__indicatorProgress ||
-      (this.__indicatorProgress = document.getElementById("downloads-indicator-progress"));
-  },
-
   get _progressIcon() {
     return this.__progressIcon ||
       (this.__progressIcon = document.getElementById("downloads-indicator-progress-icon"));
   },
 
   get notifier() {
     return this._notifier ||
       (this._notifier = document.getElementById("downloads-notification-anchor"));
   },
 
   _onCustomizedAway() {
     this._indicator = null;
     this.__progressIcon = null;
-    this.__indicatorCounter = null;
-    this.__indicatorProgress = null;
   },
 
   afterCustomize() {
     // 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;
--- a/browser/components/downloads/content/indicatorOverlay.xul
+++ b/browser/components/downloads/content/indicatorOverlay.xul
@@ -23,16 +23,11 @@
          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"
            consumeanchor="downloads-button">
       <stack id="downloads-indicator-icon">
         <vbox id="downloads-indicator-progress-icon"/>
       </stack>
-      <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>
     </stack>
   </toolbarbutton>
 </overlay>
--- a/browser/components/downloads/moz.build
+++ b/browser/components/downloads/moz.build
@@ -2,17 +2,16 @@
 # vim: set filetype=python:
 # 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/.
 
 with Files('*'):
     BUG_COMPONENT = ('Firefox', 'Downloads Panel')
 
-XPCSHELL_TESTS_MANIFESTS += ['test/unit/xpcshell.ini']
 BROWSER_CHROME_MANIFESTS += ['test/browser/browser.ini']
 
 JAR_MANIFESTS += ['jar.mn']
 
 EXTRA_JS_MODULES += [
     'DownloadsCommon.jsm',
     'DownloadsTaskbar.jsm',
     'DownloadsViewUI.jsm',
deleted file mode 100644
--- a/browser/components/downloads/test/unit/.eslintrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-"use strict";
-
-module.exports = {
-  "extends": [
-    "plugin:mozilla/xpcshell-test"
-  ]
-};
deleted file mode 100644
--- a/browser/components/downloads/test/unit/head.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-/**
- * Provides infrastructure for automated download components tests.
- */
-
-// Globals
-
-var Cc = Components.classes;
-var Ci = Components.interfaces;
-var Cu = Components.utils;
-var Cr = Components.results;
-
-Cu.import("resource:///modules/DownloadsCommon.jsm");
deleted file mode 100644
--- a/browser/components/downloads/test/unit/test_DownloadsCommon.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-/**
- * Tests for the functions located directly in the "DownloadsCommon" object.
- */
-
-function testFormatTimeLeft(aSeconds, aExpectedValue, aExpectedUnitString) {
-  let expected = "";
-  if (aExpectedValue) {
-    // Format the expected result based on the current language.
-    expected = DownloadsCommon.strings[aExpectedUnitString](aExpectedValue);
-  }
-  do_check_eq(DownloadsCommon.formatTimeLeft(aSeconds), expected);
-}
-
-function run_test() {
-  testFormatTimeLeft(0, "", "");
-  testFormatTimeLeft(1, "1", "shortTimeLeftSeconds");
-  testFormatTimeLeft(29, "29", "shortTimeLeftSeconds");
-  testFormatTimeLeft(30, "30", "shortTimeLeftSeconds");
-  testFormatTimeLeft(31, "1", "shortTimeLeftMinutes");
-  testFormatTimeLeft(60, "1", "shortTimeLeftMinutes");
-  testFormatTimeLeft(89, "1", "shortTimeLeftMinutes");
-  testFormatTimeLeft(90, "2", "shortTimeLeftMinutes");
-  testFormatTimeLeft(91, "2", "shortTimeLeftMinutes");
-  testFormatTimeLeft(3600, "1", "shortTimeLeftHours");
-  testFormatTimeLeft(86400, "24", "shortTimeLeftHours");
-  testFormatTimeLeft(169200, "47", "shortTimeLeftHours");
-  testFormatTimeLeft(172800, "2", "shortTimeLeftDays");
-  testFormatTimeLeft(8553600, "99", "shortTimeLeftDays");
-  testFormatTimeLeft(8640000, "99", "shortTimeLeftDays");
-}
deleted file mode 100644
--- a/browser/components/downloads/test/unit/xpcshell.ini
+++ /dev/null
@@ -1,6 +0,0 @@
-[DEFAULT]
-head = head.js
-firefox-appdir = browser
-skip-if = toolkit == 'android'
-
-[test_DownloadsCommon.js]
--- a/browser/locales/en-US/chrome/browser/downloads/downloads.properties
+++ b/browser/locales/en-US/chrome/browser/downloads/downloads.properties
@@ -74,27 +74,16 @@ unblockButtonOpen=Open
 unblockButtonUnblock=Allow download
 unblockButtonConfirmBlock=Remove file
 
 # LOCALIZATION NOTE (sizeWithUnits):
 # %1$S is replaced with the size number, and %2$S with the measurement unit.
 sizeWithUnits=%1$S %2$S
 sizeUnknown=Unknown size
 
-# LOCALIZATION NOTE (shortTimeLeftSeconds, shortTimeLeftMinutes,
-#                    shortTimeLeftHours, shortTimeLeftDays):
-# These values are displayed in the downloads indicator in the main browser
-# window, where space is available for three characters maximum.  %1$S is
-# replaced with the time left for the given measurement unit.  Even for days,
-# the value is never longer than two digits.
-shortTimeLeftSeconds=%1$Ss
-shortTimeLeftMinutes=%1$Sm
-shortTimeLeftHours=%1$Sh
-shortTimeLeftDays=%1$Sd
-
 # LOCALIZATION NOTE (statusSeparator, statusSeparatorBeforeNumber):
 # These strings define templates for the separation of different elements in the
 # status line of a download item.  As a separator, by default we use the Unicode
 # character U+2014 'EM DASH' (long dash).  Examples of status lines include
 # "Canceled - 222.net", "1.1 MB - website2.com", or "Paused -  1.1 MB".  Note
 # that we use a wider space after the separator when it is followed by a number,
 # just to avoid visually confusing it with with a minus sign with some fonts.
 # If you use a different separator, this might not be necessary.  However, there
--- a/browser/themes/linux/downloads/indicator.css
+++ b/browser/themes/linux/downloads/indicator.css
@@ -72,36 +72,16 @@ toolbar[brighttext] #downloads-button[cu
   fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
   -moz-image-region: auto;
 }
 
-/* In the next few rules, we use :not([counter]) as a shortcut that is
-   equivalent to -moz-any([progress], [paused]). */
-
-#downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background: var(--downloads-indicator-image) center no-repeat;
-  -moz-context-properties: fill;
-  fill: var(--toolbarbutton-icon-fill);
-  background-size: 12px;
-}
-
-toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter {
-  fill: var(--toolbarbutton-icon-fill-inverted);
-}
-
-#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  fill: var(--toolbarbutton-icon-fill-attention);
-}
-
-/*** Download notifications ***/
-
 #downloads-indicator-notification {
   opacity: 0;
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
 }
@@ -134,69 +114,8 @@ toolbar[brighttext] #downloads-button:no
   to   { opacity: 0; transform: scale(8); }
 }
 
 #downloads-notification-anchor[notification="finish"] > #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%);
-  text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
-  font-size: 10px;
-  line-height: 10px;
-  text-align: center;
-}
-
-toolbar[brighttext] #downloads-indicator-counter {
-  color: white;
-  text-shadow: 0 0 1px rgba(0,0,0,.7),
-               0 1px 1.5px rgba(0,0,0,.5);
-}
-
-#downloads-indicator-progress {
-  width: 18px;
-  height: 6px;
-  min-width: 0;
-  min-height: 0;
-  margin-top: 1px;
-  margin-bottom: 2px;
-  border-radius: 2px;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.4);
-}
-
-#downloads-indicator-progress > .progress-bar {
-  -moz-appearance: none;
-  min-width: 0;
-  min-height: 0;
-  /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */
-  background-clip: padding-box, border-box;
-  background-color: rgb(255, 135, 94);
-  background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none;
-  border: 1px solid;
-  border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4);
-  border-radius: 2px 0 0 2px;
-}
-
-#downloads-indicator-progress > .progress-remainder {
-  -moz-appearance: none;
-  min-width: 0;
-  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);
-  border-inline-start: none;
-  border-radius: 0 2px 2px 0;
-}
-
-#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
-  background-color: rgb(220, 230, 81);
-}
-
-#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
-  background-image: linear-gradient(#4b5000, #515700);
-}
--- a/browser/themes/osx/downloads/indicator.css
+++ b/browser/themes/osx/downloads/indicator.css
@@ -75,34 +75,16 @@ toolbar[brighttext] #downloads-indicator
   fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
   -moz-image-region: auto;
 }
 
-/* In the next few rules, we use :not([counter]) as a shortcut that is
-   equivalent to -moz-any([progress], [paused]). */
-
-#downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background: var(--downloads-indicator-image) center no-repeat;
-  -moz-context-properties: fill;
-  fill: var(--toolbarbutton-icon-fill);
-  background-size: 12px;
-}
-
-toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  fill: var(--toolbarbutton-icon-fill-inverted);
-}
-
-#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  fill: var(--toolbarbutton-icon-fill-attention);
-}
-
 @media (min-resolution: 2dppx) {
   #downloads-button[cui-areatype="menu-panel"][attention="success"] {
     list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel@2x.png");
   }
 }
 
 /*** Download notifications ***/
 
@@ -157,63 +139,8 @@ toolbar[brighttext] #downloads-button:no
   animation-duration: 1s;
 }
 
 @media (min-resolution: 2dppx) {
   #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
     background-image: url("chrome://browser/skin/downloads/download-notification-finish@2x.png");
   }
 }
-
-/*** Progress bar and text ***/
-
-#downloads-indicator-counter {
-  height: 9px;
-  margin: -3px 0 0;
-  color: hsl(0,0%,30%);
-  text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
-  font-size: 9px;
-  line-height: 9px;
-  text-align: center;
-}
-
-#downloads-indicator-progress {
-  width: 16px;
-  height: 5px;
-  min-width: 0;
-  min-height: 0;
-  margin-top: 1px;
-  margin-bottom: 2px;
-  border-radius: 2px;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.4);
-}
-
-#downloads-indicator-progress > .progress-bar {
-  -moz-appearance: none;
-  min-width: 0;
-  min-height: 0;
-  /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */
-  background-clip: padding-box, border-box;
-  background-color: rgb(90, 185, 255);
-  background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none;
-  border: 1px solid;
-  border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4);
-  border-radius: 2px 0 0 2px;
-}
-
-#downloads-indicator-progress > .progress-remainder {
-  -moz-appearance: none;
-  min-width: 0;
-  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);
-  border-inline-start: none;
-  border-radius: 0 2px 2px 0;
-}
-
-#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
-  background-color: rgb(220, 230, 81);
-}
-
-#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
-  background-image: linear-gradient(#4b5000, #515700);
-}
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -173,22 +173,16 @@ toolbar:-moz-lwtheme-darktext {
 
 #navigator-toolbox .toolbarbutton-1,
 .browserContainer > findbar .findbar-button,
 #PlacesToolbar toolbarbutton.bookmark-item {
   color: var(--chrome-color);
   text-shadow: var(--toolbarbutton-text-shadow);
 }
 
-/* Using toolbar[brighttext] instead of important to override linux */
-toolbar[brighttext] #downloads-indicator-counter {
-  text-shadow: var(--toolbarbutton-text-shadow);
-  color: var(--chrome-color);
-}
-
 #TabsToolbar {
   text-shadow: none !important;
 }
 
 /* Back and forward button */
 
 #back-button > .toolbarbutton-icon,
 #forward-button > .toolbarbutton-icon {
--- a/browser/themes/windows/downloads/indicator.css
+++ b/browser/themes/windows/downloads/indicator.css
@@ -72,34 +72,16 @@ toolbar[brighttext] #downloads-button:no
   fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
   -moz-image-region: auto;
 }
 
-/* In the next few rules, we use :not([counter]) as a shortcut that is
-   equivalent to -moz-any([progress], [paused]). */
-
-#downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background: var(--downloads-indicator-image) center no-repeat;
-  -moz-context-properties: fill;
-  fill: var(--toolbarbutton-icon-fill);
-  background-size: 12px;
-}
-
-toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter {
-  fill: var(--toolbarbutton-icon-fill-inverted);
-}
-
-#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  fill: var(--toolbarbutton-icon-fill-attention);
-}
-
 /*** Download notifications ***/
 
 #downloads-indicator-notification {
   opacity: 0;
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
   width: 16px;
@@ -134,72 +116,8 @@ toolbar[brighttext] #downloads-button:no
   to   { opacity: 0; transform: scale(8); }
 }
 
 #downloads-notification-anchor[notification="finish"] > #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%);
-  text-shadow: hsla(0,0%,100%,.5) 0 1px;
-  font-size: 9px;
-  line-height: 9px;
-  text-align: center;
-
-  /* Bug 812345 added this... */
-  margin-bottom: -1px;
-}
-
-toolbar[brighttext] #downloads-indicator-counter {
-  color: white;
-  text-shadow: 0 0 1px rgba(0,0,0,.7),
-               0 1px 1.5px rgba(0,0,0,.5);
-}
-
-#downloads-indicator-progress {
-  width: 16px;
-  height: 5px;
-  min-width: 0;
-  min-height: 0;
-  margin-top: 1px;
-  margin-bottom: 2px;
-  border-radius: 2px;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.4);
-}
-
-#downloads-indicator-progress > .progress-bar {
-  -moz-appearance: none;
-  min-width: 0;
-  min-height: 0;
-  /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */
-  background-clip: padding-box, border-box;
-  background-color: rgb(90, 201, 66);
-  background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none;
-  border: 1px solid;
-  border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4);
-  border-radius: 2px 0 0 2px;
-}
-
-#downloads-indicator-progress > .progress-remainder {
-  -moz-appearance: none;
-  min-width: 0;
-  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);
-  border-inline-start: none;
-  border-radius: 0 2px 2px 0;
-}
-
-#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
-  background-color: rgb(220, 230, 81);
-}
-
-#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
-  background-image: linear-gradient(#4b5000, #515700);
-}