From 1801ff7637b853e5549d500fe15913b76d5bda90 Mon Sep 17 00:00:00 2001 From: Rex Lee Date: Wed, 24 Aug 2016 18:39:53 +0800 Subject: [PATCH] Bug 1270006 - Fill portion of the icon on download button as indicator to download progress r=Paolo MozReview-Commit-ID: BqYow8jWCVD --HG-- extra : rebase_source : 4b365535089619a5faf0d3c4f0c4dcd6b4067a43 --- browser/base/content/browser.css | 12 ++- .../components/downloads/DownloadsCommon.jsm | 7 ++ .../components/downloads/content/indicator.js | 91 ++++++++++++++----- .../downloads/content/indicatorOverlay.xul | 4 +- browser/themes/linux/downloads/indicator.css | 34 +++---- browser/themes/osx/downloads/indicator.css | 73 ++++++--------- .../themes/shared/downloads/indicator.inc.css | 21 +++++ .../themes/windows/downloads/indicator.css | 34 +++---- 8 files changed, 173 insertions(+), 103 deletions(-) create mode 100644 browser/themes/shared/downloads/indicator.inc.css diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css index 44f149b47ca2..e0f0bbfb4094 100644 --- a/browser/base/content/browser.css +++ b/browser/base/content/browser.css @@ -975,10 +975,14 @@ toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads- display: none; } -#downloads-button:-moz-any([progress], [counter], [paused]) #downloads-indicator-icon, -#downloads-button:not(:-moz-any([progress], [counter], [paused])) - #downloads-indicator-progress-area -{ +#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; } diff --git a/browser/components/downloads/DownloadsCommon.jsm b/browser/components/downloads/DownloadsCommon.jsm index 55bf9125ed0f..98f031b063e0 100644 --- a/browser/components/downloads/DownloadsCommon.jsm +++ b/browser/components/downloads/DownloadsCommon.jsm @@ -146,6 +146,13 @@ this.DownloadsCommon = { 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 diff --git a/browser/components/downloads/content/indicator.js b/browser/components/downloads/content/indicator.js index 58c6e3978a78..1e38d03b7aca 100644 --- a/browser/components/downloads/content/indicator.js +++ b/browser/components/downloads/content/indicator.js @@ -217,10 +217,21 @@ const DownloadsIndicatorView = { } 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. */ @@ -411,21 +422,40 @@ const DownloadsIndicatorView = { _counter: null, /** - * Progress indication to display, from 0 to 100, or -1 if unknown. The - * progress bar is hidden if the current progress is unknown and no status - * text is set in the "counter" property. + * 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. */ set percentComplete(aValue) { + // For arrow type only: + // We show portion of the success icon in propotional with the download + // progress as an indicator. the PROGRESS_ICON_EMPTY_HEIGHT_PERCENT and + // PROGRESS_ICON_FULL_HEIGHT_PERCENT correspond to how much portion of the + // icon should be displayed in 0% and 100%. + const PROGRESS_ICON_EMPTY_HEIGHT_PERCENT = 35; + const PROGRESS_ICON_FULL_HEIGHT_PERCENT = 87; + if (!this._operational) { return this._percentComplete; } if (this._percentComplete !== aValue) { this._percentComplete = aValue; - if (this._percentComplete >= 0) + this._refreshAttention(); + + if (this._percentComplete >= 0) { this.indicator.setAttribute("progress", "true"); - else + this._progressIcon.style.height = (this._percentComplete * + (PROGRESS_ICON_FULL_HEIGHT_PERCENT - + PROGRESS_ICON_EMPTY_HEIGHT_PERCENT) / 100 + + PROGRESS_ICON_EMPTY_HEIGHT_PERCENT) + "%"; + } else { this.indicator.removeAttribute("progress"); + this._progressIcon.style.height = "0"; + } // 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)); @@ -463,29 +493,39 @@ const DownloadsIndicatorView = { if (!this._operational) { return this._attention; } - if (this._attention != aValue) { this._attention = aValue; + this._refreshAttention(); + } + return this._attention; + }, - // 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; + _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; - if (aValue == DownloadsCommon.ATTENTION_NONE) { - this.indicator.removeAttribute("attention"); - if (inMenu) { - gMenuButtonBadgeManager.removeBadge(gMenuButtonBadgeManager.BADGEID_DOWNLOAD); - } - } else { - this.indicator.setAttribute("attention", aValue); - if (inMenu) { - let badgeClass = "download-" + aValue; - gMenuButtonBadgeManager.addBadge(gMenuButtonBadgeManager.BADGEID_DOWNLOAD, badgeClass); - } + // For arrow-Styled indicator, suppress success attention if we have + // progress in toolbar + let suppressAttention = DownloadsCommon.arrowStyledIndicator && !inMenu && + this._attention == DownloadsCommon.ATTENTION_SUCCESS && + this._percentComplete >= 0; + + if (suppressAttention || this._attention == DownloadsCommon.ATTENTION_NONE) { + this.indicator.removeAttribute("attention"); + if (inMenu) { + gMenuButtonBadgeManager.removeBadge( + gMenuButtonBadgeManager.BADGEID_DOWNLOAD); + } + } else { + this.indicator.setAttribute("attention", this._attention); + if (inMenu) { + let badgeClass = "download-" + this._attention; + gMenuButtonBadgeManager.addBadge( + gMenuButtonBadgeManager.BADGEID_DOWNLOAD, badgeClass); } } - return aValue; }, _attention: DownloadsCommon.ATTENTION_NONE, @@ -539,6 +579,7 @@ const DownloadsIndicatorView = { _indicator: null, __indicatorCounter: null, __indicatorProgress: null, + __progressIcon: null, /** * Returns a reference to the main indicator element, or null if the element @@ -576,6 +617,11 @@ const DownloadsIndicatorView = { (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")); @@ -583,6 +629,7 @@ const DownloadsIndicatorView = { _onCustomizedAway() { this._indicator = null; + this.__progressIcon = null; this.__indicatorCounter = null; this.__indicatorProgress = null; }, diff --git a/browser/components/downloads/content/indicatorOverlay.xul b/browser/components/downloads/content/indicatorOverlay.xul index 07987c88cd87..d91bb3ba0ef1 100644 --- a/browser/components/downloads/content/indicatorOverlay.xul +++ b/browser/components/downloads/content/indicatorOverlay.xul @@ -25,12 +25,14 @@ its arrow unexpectedly. --> + + + - diff --git a/browser/themes/linux/downloads/indicator.css b/browser/themes/linux/downloads/indicator.css index 6e9d9ace5c07..0f750c25ba3c 100644 --- a/browser/themes/linux/downloads/indicator.css +++ b/browser/themes/linux/downloads/indicator.css @@ -2,6 +2,8 @@ * 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/. */ +%include ../../shared/downloads/indicator.inc.css + /*** Status and progress indicator ***/ #downloads-animation-container { @@ -21,31 +23,31 @@ @media not all and (min-resolution: 1.1dppx) { #downloads-button { - --downloads-indicator-icon: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180); - --downloads-indicator-icon-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 18, 198, 36, 180); - --downloads-indicator-icon-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); - --downloads-indicator-icon-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180); + --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180); + --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 18, 198, 36, 180); + --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); + --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180); } } @media (min-resolution: 1.1dppx) { #downloads-button { - --downloads-indicator-icon: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360); - --downloads-indicator-icon-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 36, 396, 72, 360); - --downloads-indicator-icon-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360); - --downloads-indicator-icon-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 36, 396, 72, 360); + --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360); + --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 36, 396, 72, 360); + --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360); + --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 36, 396, 72, 360); } } #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon { - background: var(--downloads-indicator-icon) center no-repeat; + background: var(--downloads-indicator-image) center no-repeat; width: 18px; height: 18px; background-size: 18px; } toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: var(--downloads-indicator-icon-inverted); + background-image: var(--downloads-indicator-image-inverted); } #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, @@ -79,11 +81,11 @@ toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="su } #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: var(--downloads-indicator-icon-attention); + background-image: var(--downloads-indicator-image-attention); } toolbar[brighttext] #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: var(--downloads-indicator-icon-attention-inverted); + background-image: var(--downloads-indicator-image-attention-inverted); } #downloads-button[cui-areatype="menu-panel"][attention="success"] { @@ -95,20 +97,20 @@ toolbar[brighttext] #downloads-button[cui-areatype="toolbar"][attention="success equivalent to -moz-any([progress], [paused]). */ #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background: var(--downloads-indicator-icon) center no-repeat; + background: var(--downloads-indicator-image) center no-repeat; background-size: 12px; } toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter { - background-image: var(--downloads-indicator-icon-inverted); + background-image: var(--downloads-indicator-image-inverted); } #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: var(--downloads-indicator-icon-attention); + background-image: var(--downloads-indicator-image-attention); } toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: var(--downloads-indicator-icon-attention-inverted); + background-image: var(--downloads-indicator-image-attention-inverted); } /*** Download notifications ***/ diff --git a/browser/themes/osx/downloads/indicator.css b/browser/themes/osx/downloads/indicator.css index eb88f074e9c1..250064a26037 100644 --- a/browser/themes/osx/downloads/indicator.css +++ b/browser/themes/osx/downloads/indicator.css @@ -2,6 +2,8 @@ * 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/. */ +%include ../../shared/downloads/indicator.inc.css + /*** Status and progress indicator ***/ #downloads-indicator-anchor { @@ -24,13 +26,29 @@ /*** Main indicator icon ***/ +#downloads-button { + --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180); + --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 36, 198, 54, 180); + --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); + --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 36, 198, 54, 180); +} + +@media (min-resolution: 2dppx) { + #downloads-button { + --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360); + --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 72, 396, 108, 360); + --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360); + --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 72, 396, 108, 360); + } +} + #downloads-indicator-icon { - background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), - 0, 198, 18, 180) center no-repeat; + background: var(--downloads-indicator-image) center no-repeat; + background-size: 18px; } toolbar[brighttext] #downloads-indicator-icon { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); + background-image: var(--downloads-indicator-image-inverted); } #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, @@ -64,11 +82,11 @@ toolbar[brighttext] #downloads-indicator-icon { } #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 36, 198, 54, 180); + background-image: var(--downloads-indicator-image-attention); } toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 36, 198, 54, 180); + background-image: var(--downloads-indicator-image-attention-inverted); } #downloads-button[cui-areatype="menu-panel"][attention="success"] { @@ -80,61 +98,26 @@ toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicato equivalent to -moz-any([progress], [paused]). */ #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, 198, 18, 180) center no-repeat; + background: var(--downloads-indicator-image) center no-repeat; background-size: 12px; } toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); + background-image: var(--downloads-indicator-image-inverted); } #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 36, 198, 54, 180); + background-image: var(--downloads-indicator-image-attention); } toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 36, 198, 54, 180); + background-image: var(--downloads-indicator-image-attention-inverted); } @media (min-resolution: 2dppx) { - #downloads-indicator-icon { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360); - background-size: 18px; - } - - toolbar[brighttext] #downloads-indicator-icon { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360); - } - - #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, 396, 36, 360); - } - - toolbar[brighttext] #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), - 0, 396, 36, 360); - } - - #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 72, 396, 108, 360); - } - - toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 72, 396, 108, 360); - } - #downloads-button[cui-areatype="menu-panel"][attention="success"] { list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel@2x.png"); } - - #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 72, 396, 108, 360); - } - - toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 72, 396, 108, 360); - } } /*** Download notifications ***/ @@ -148,6 +131,8 @@ toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #dow height: 16px; } +/*** Progress bar and text ***/ + @keyframes downloadsIndicatorNotificationStartRight { from { opacity: 0; transform: translate(-128px, 128px) scale(8); } 20% { opacity: .85; animation-timing-function: ease-out; } diff --git a/browser/themes/shared/downloads/indicator.inc.css b/browser/themes/shared/downloads/indicator.inc.css new file mode 100644 index 000000000000..e721c1148b00 --- /dev/null +++ b/browser/themes/shared/downloads/indicator.inc.css @@ -0,0 +1,21 @@ +/* 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/. */ + +#downloads-indicator-icon { + position: relative; +} + +#downloads-indicator-progress-icon { + background: var(--downloads-indicator-image-attention) bottom no-repeat; + background-size: 18px; + position: absolute; + bottom: 0; + width: 100%; + height: 0; + transition: height 0.5s; +} + +toolbar[brighttext] #downloads-indicator-progress-icon { + background-image: var(--downloads-indicator-image-attention-inverted); +} diff --git a/browser/themes/windows/downloads/indicator.css b/browser/themes/windows/downloads/indicator.css index 7f921f8defc5..46f5d746d4be 100644 --- a/browser/themes/windows/downloads/indicator.css +++ b/browser/themes/windows/downloads/indicator.css @@ -2,6 +2,8 @@ * 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/. */ +%include ../../shared/downloads/indicator.inc.css + /*** Status and progress indicator ***/ #downloads-animation-container { @@ -21,31 +23,31 @@ @media not all and (min-resolution: 1.1dppx) { #downloads-button { - --downloads-indicator-icon: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180); - --downloads-indicator-icon-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 18, 198, 36, 180); - --downloads-indicator-icon-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); - --downloads-indicator-icon-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180); + --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180); + --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 18, 198, 36, 180); + --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); + --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180); } } @media (min-resolution: 1.1dppx) { #downloads-button { - --downloads-indicator-icon: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360); - --downloads-indicator-icon-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 36, 396, 72, 360); - --downloads-indicator-icon-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360); - --downloads-indicator-icon-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 36, 396, 72, 360); + --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360); + --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 36, 396, 72, 360); + --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360); + --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 36, 396, 72, 360); } } #downloads-indicator-icon { - background: var(--downloads-indicator-icon) center no-repeat; + background: var(--downloads-indicator-image) center no-repeat; width: 18px; height: 18px; background-size: 18px; } toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: var(--downloads-indicator-icon-inverted); + background-image: var(--downloads-indicator-image-inverted); } #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, @@ -79,11 +81,11 @@ toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-in } #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: var(--downloads-indicator-icon-attention); + background-image: var(--downloads-indicator-image-attention); } toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: var(--downloads-indicator-icon-attention-inverted); + background-image: var(--downloads-indicator-image-attention-inverted); } #downloads-button[cui-areatype="menu-panel"][attention="success"] { @@ -95,20 +97,20 @@ toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicato equivalent to -moz-any([progress], [paused]). */ #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background: var(--downloads-indicator-icon) center no-repeat; + background: var(--downloads-indicator-image) center no-repeat; background-size: 12px; } toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter { - background-image: var(--downloads-indicator-icon-inverted); + background-image: var(--downloads-indicator-image-inverted); } #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: var(--downloads-indicator-icon-attention); + background-image: var(--downloads-indicator-image-attention); } toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: var(--downloads-indicator-icon-attention-inverted); + background-image: var(--downloads-indicator-image-attention-inverted); } /*** Download notifications ***/