зеркало из https://github.com/mozilla/gecko-dev.git
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
This commit is contained in:
Rex Lee
Родитель
b3512d775a
Коммит
1801ff7637
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -25,12 +25,14 @@
|
|||
its arrow unexpectedly. -->
|
||||
<stack id="downloads-indicator-anchor"
|
||||
consumeanchor="downloads-button">
|
||||
<vbox id="downloads-indicator-icon">
|
||||
<vbox id="downloads-indicator-progress-icon"/>
|
||||
</vbox>
|
||||
<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"/>
|
||||
</stack>
|
||||
</toolbarbutton>
|
||||
</overlay>
|
||||
|
|
|
|||
|
|
@ -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 ***/
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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 ***/
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче