These are the rules I have. They haven't been updated for Fx29 yet (they still refer to modes text and icons+text and to multiple iconsize values, all of which are gone for Fx29) so YMMV, but the comments have some good information. Also, my icon/image file names may be different from the ones used in the default theme.
Code: Select all
/*** Downloads indicator toolbarbutton ***/
/* The outermost toolbarbutton, having .toolbarbutton-1 */
#downloads-button {
/* magic number: wide enough that width doesn't change between download states */
min-width: 38px;
}
#downloads-indicator-anchor {
/* min sizes to work with large icons mode */
min-width: 24px;
min-height: 24px;
}
toolbar[iconsize="small"] #downloads-indicator-anchor {
/* smaller sizes to work with small icons */
min-width: 16px;
min-height: 16px;
}
/*** Progress text (counter) and progress bar ***/
#downloads-indicator-counter {
height: 9px;
margin: 0;
color: #bbbbbb;
font-size: 95%;
line-height: 9px;
text-align: center;
text-shadow: 0 1px 0px rgba(0,0,0,0.9);
}
toolbar[iconsize="small"] #downloads-indicator-counter {
font-size: 9px;
}
#downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
color: #fdfdfd;
}
/* When showing time remaining, progressmeter is too low because of counter font size, so snug it up. */
toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"]:not([paused]) #downloads-indicator-counter {
margin-top: -1px;
margin-bottom: -1px;
}
/* We don't care about Personas yet.
* #downloads-indicator-counter:-moz-lwtheme-brighttext {
* color: white;
* text-shadow: 0 0 1px rgba(0,0,0,.7),
* 0 1px 1.5px rgba(0,0,0,.5);
* }
*/
/* Font size makes the counter too tall when not showing time remaining, so use a smaller font size. */
toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[paused="true"] #downloads-indicator-counter {
font-size: 1px;
}
/* NOTE: the following comment was written regarding Firefox 20. It may or may not still be true
* for Firefox 27 and up, as of Bug 845408.
*
* The next few rules handle the case of a visible progressmeter in the tbb but no counter.
* This occurs with a paused download, and the result is showing a smaller icon above the progressmeter,
* where the counter would otherwise be if a download were active.
*
* This icon is smaller than usual for the given toolbar iconsize.
* If in large icons mode and in either text+icons or icons only and showing the progressmeter
* (with either the normal or alert icon showing), use a 16px icon as bg image.
* If in small icons mode and in either text+icons or icons only and showing the progressmeter
* (with either the normal or alert icon showing), use a 10px icon as bg image.
* The rule is that any icon+progressmeter or time-remaining-text+progressmeter must occupy
* the same vertical space as would the icon on a regular tbb-1 in the the same toolbar mode,
* namely, 24px vertical size in large icons mode and 16px vertical size in small icons mode.
* After removing space for the progressmeter, this leaves 16px icon height in large icons mode
* and 10px icon height in small icons mode.
*
* Note that we use [progress="true"]:not([counter]) rather than [progress="true"][paused="true"] to avoid
* a missing icon that would otherwise occur when both of the following are true:
*
* - there is at least one paused download
* - there is one and only one running download, and that download completes
*
* After the download completes, it's virus-scanned and may trigger other activity (such as playing media),
* both of which have a non-zero duration. Attr [paused] is removed while there's any running download, and
* apparently isn't re-added until after virus scan/other activity. This means that using [paused] in the
* selector can and does result in a missing icon, for a brief but noticable time, when the download completes.
* However, [counter] is removed the instant the download completes, which makes it suitable for use in the
* selector to apply the icon in the paused state, so that's what we do (and the def theme does too).
*
* The sequence of events wrt attr in this case seems like this:
*
* attr state following event
* event paused counter progress attention
* --------------------------------------------------------------------- ------ ---------- ---------- ---------
* 1. start with only paused downloads true - true -
* 2. start a new download - true true -
* 3. active download completes - - true ?
* 4. virus scan starts, possibly followed by other activity - - true ?
* 5. virus scan/other activity finished true - true true
* 6. finish with only paused downloads true - true true
*
*
* NOTE for Firefox 27: there's a similar but separate issue when switching from paused to running, in which case the full-sized
* icon on #downloads-indicator-icon flashes for a significant fraction of a second after [paused] is removed and
* before [progress] and [counter] are added. For this issue, however, there is no readily-apparent fix.
* See nlnext.notes.txt for Bug 845408.
*/
toolbar:not([iconsize="small"]):not([mode="text"]) #downloads-button[progress="true"] #downloads-indicator-counter {
height: 16px;
background-size: 16px;
}
toolbar:not([iconsize="small"]):not([mode="text"]) #downloads-button[progress="true"]:not([counter]) #downloads-indicator-counter {
background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow.png), 0, 16, 16, 0 ) center no-repeat;
}
toolbar:not([iconsize="small"]):not([mode="text"]) #downloads-button[progress="true"]:not([counter]):hover #downloads-indicator-counter {
background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow.png), 16, 16, 32, 0 ) center no-repeat;
}
toolbar:not([iconsize="small"]):not([mode="text"]) #downloads-button[progress="true"]:not([counter])[attention="true"] #downloads-indicator-counter {
background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow.png), 0, 32, 16, 16 ) center no-repeat;
}
toolbar:not([iconsize="small"]):not([mode="text"]) #downloads-button[progress="true"]:not([counter])[attention="true"]:hover #downloads-indicator-counter {
background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow.png), 16, 32, 32, 16 ) center no-repeat;
}
/* In small icons switch to a 10px icon. */
toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"] #downloads-indicator-counter {
height: 10px;
background-size: 10px;
}
toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"]:not([counter]) #downloads-indicator-counter {
background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow-small.png), 0, 10, 10, 0 ) center no-repeat;
}
toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"]:not([counter]):hover #downloads-indicator-counter {
background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow-small.png), 10, 10, 20, 0 ) center no-repeat;
}
toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"]:not([counter])[attention="true"] #downloads-indicator-counter {
background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow-small.png), 0, 20, 10, 10 ) center no-repeat;
}
toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"]:not([counter])[attention="true"]:hover #downloads-indicator-counter {
background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow-small.png), 10, 20, 20, 10 ) center no-repeat;
}
#downloads-indicator-progress {
height: 4px;
min-width: 0;
min-height: 0;
margin-top: 2px !important; /* important because .plain */
margin-bottom: 2px !important; /* important because .plain */
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
toolbar[iconsize="small"] #downloads-indicator-progress {
margin-top: 1px !important; /* important because .plain */
margin-bottom: 1px !important; /* important because .plain */
}
#downloads-indicator-progress > .progress-bar {
min-width: 0;
min-height: 0;
border: 1px solid;
-moz-border-end: none;
border-color: #bdc969 transparent #b3bd58 #b1bc5b;
border-radius: 1px 0 0 1px;
background-image: -moz-linear-gradient(#b8c15c, #b8c15c);
background-color: transparent;
}
#downloads-indicator-progress:-moz-locale-dir(rtl) > .progress-bar {
border-color: #bdc969 #b1bc5b #b3bd58 transparent;
border-radius: 0 1px 1px 0;
}
#downloads-indicator-progress > .progress-remainder {
min-width: 0;
min-height: 0;
border: 1px solid;
-moz-border-start: none;
border-color: #979f40 #909829 #8b931e transparent;
border-radius: 0 1px 1px 0;
background-image: -moz-linear-gradient(#000000, #090909);
}
#downloads-indicator-progress:-moz-locale-dir(rtl) > .progress-remainder {
border-color: #979f40 transparent #8b931e #909829;
border-radius: 1px 0 0 1px;
}
#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
border-color: #a6a6a6 transparent #868686 #999999;
background-image: -moz-linear-gradient(#6d6d6d, #6d6d6d);
}
#downloads-button[paused]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
border-color: #a6a6a6 #999999 #868686 transparent;
}
#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
border-color: #a6a6a6 #929292 #868686 transparent;
}
#downloads-button[paused]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
border-color: #a6a6a6 transparent #868686 #929292;
}
/*** Main indicator icon ***/
/* Note that unlike typical tbb-1, the icon isn't always carried on .toolbarbutton-icon, and
* it's not always applied with list-style-image. Rather, once the indicator overlay has been applied,
* and the internal elements of the downloads-button have been fully instantiated, it's applied
* as a background image, either here or on #downloads-indicator-counter. Once the indicator overlay
* has been applied, this is where the toolbarbutton icon (possibly glowing to indicate alert) is applied
* if and only if the progressmeter isn't showing, i.e., when there's no download either paused or active.
* If there exists one or more paused or active downloads, then #downloads-indicator-icon is hidden by content CSS and,
* if there are no active downloads, the icon is shown as background-image on #downloads-indicator-counter.
*
* Summary of icon location for Fx27:
*
* if not initialized or if in palette
* icon on image.toolbarbutton-icon, like normal tbb-1
* else (initialized and not in palette)
* if any download running then
* no icon shown
* else if any paused download then
* icon shown on description#downloads-indicator-counter
* else
* icon shown on vbox#downloads-indicator-icon
*
*/
#downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon {
background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
0, 144, 24, 120) center no-repeat;
}
#downloads-button:not([attention]):hover > #downloads-indicator-anchor > #downloads-indicator-icon {
background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
24, 144, 48, 120) center no-repeat;
}
toolbar[iconsize="small"] #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon {
background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"),
0, 96, 16, 80) center no-repeat;
}
toolbar[iconsize="small"] #downloads-button:not([attention]):hover > #downloads-indicator-anchor > #downloads-indicator-icon {
background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"),
16, 96, 32, 80) center no-repeat;
}
/* We don't care about Personas styling yet.
* #downloads-indicator-icon:-moz-lwtheme-brighttext {
* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
* 0, 144, 24, 120) center no-repeat;
* }
*/
/* Show a glowing icon when a download has completed. */
#downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
background: -moz-image-rect(url("chrome://browser/skin/downloads/download-glow.png"),
0, 24, 24, 0) center no-repeat;
}
toolbar[iconsize="small"] #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
background: -moz-image-rect(url("chrome://browser/skin/downloads/download-glow.png"),
0, 24, 24, 0) center no-repeat;
background-size: 16px;
}
/*** Toolbarbutton label ***/
/* For some reason, our rule in toolbarbutton.css doesn't apply to .toolbarbutton-text
* when under #downloads-button (even though it has the same binding as a toolbarbutton-1)
* so reapply this needed setting.
*/
toolbar:not([mode="icons"]) #downloads-button > .toolbarbutton-text {
margin: 0;
}
/* In text-only mode, since the progressmeter and counter are hidden, use colored text ("Downloads") to indicate downloads state,
* with running taking priority over alerting, just like the way in modes other than text-only the counter text (time remaining) replaces the alert icon.
* Fx19 has no label, so this is Fx20 and up.
*/
toolbar[mode="text"] #downloads-button[attention="true"] > .toolbarbutton-text {
color: #ddb575; /* arbitrary one-off color, picked out of the alert icon */
}
toolbar[mode="text"] #downloads-button[attention="true"]:hover .toolbarbutton-text,
toolbar[mode="text"] #downloads-button[attention="true"][open="true"] .toolbarbutton-text {
/* color: #f7cb83; like alert normal, but brightness plus 10 */
color: #ffd187; /* like alert normal, but brightness bumped up to 100% */
}
toolbar[mode="text"] #downloads-button[counter="true"]:not([paused="true"]) .toolbarbutton-text {
/* color: #9ed46c; arbitrary one-off color */
color: #88d442; /* arbitrary one-off color */
}
toolbar[mode="text"] #downloads-button[counter="true"]:not([paused="true"]):hover .toolbarbutton-text,
toolbar[mode="text"] #downloads-button[counter="true"]:not([paused="true"])[open="true"] .toolbarbutton-text {
/* color: #99ed4a; like running normal, but brightness plus 10 */
color: #a4ff4f; /* like running normal, but brightness bumped up to 100% */
}
/*** Event notification ***/
#downloads-animation-container {
/* Limit the size of #mainPopupSet, which would otherwise occupy space at the top of the window. */
min-width: 1px;
min-height: 1px;
height: 1px;
margin-bottom: -1px;
/* 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;
/* z-index prevents the selected tab from overlapping the notification animation.
* Possibly only needed for OS X, but taking for all platforms. See Bug 827899.
*/
z-index: 5;
}
@-moz-keyframes downloadsIndicatorNotificationStartRight {
/* This animation is used as the "download starting" animation for both Fx19 and down and for Fx20 and up. */
from { opacity: 0; -moz-transform: translate(-128px, 128px) scale(8); transform: translate(-128px, 128px) scale(8); }
20% { opacity: .85; -moz-animation-timing-function: ease-out; }
to { opacity: 0; -moz-transform: translate(0) scale(1); transform: translate(0) scale(1); }
}
@-moz-keyframes downloadsIndicatorNotificationStartLeft {
/* This animation is used as the "download starting" animation for both Fx19 and down and for Fx20 and up. */
from { opacity: 0; -moz-transform: translate(128px, 128px) scale(8); transform: translate(128px, 128px) scale(8); }
20% { opacity: .85; -moz-animation-timing-function: ease-out; }
to { opacity: 0; -moz-transform: translate(0) scale(1); transform: translate(0) scale(1); }
}
@-moz-keyframes downloadsIndicatorNotificationFinish {
/* This animation is used as the "download finished" animation for Fx20 and up. */
from { opacity: 0; -moz-transform: scale(1); transform: scale(1); }
20% { opacity: .65; -moz-animation-timing-function: ease-in; }
to { opacity: 0; -moz-transform: scale(8); transform: scale(8); }
}
#downloads-indicator-notification {
opacity: 0;
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
height: 16px;
width: 16px;
}
#downloads-button[notification="true"] > #downloads-indicator-anchor > #downloads-indicator-notification,
#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification,
#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
/* #downloads-indicator[notification="true"] is for Fx19 and down.
* #downloads-indicator[notification="start"] is for Fx20 and up.
* #downloads-indicator-anchor[notification="start"] is for Fx27 and up.
* download-notification.png could be used for Fx19, but it's the same as download-notification-start.png,
* so we combine the rules instead.
*/
background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
-moz-animation-name: downloadsIndicatorNotificationStartRight;
-moz-animation-duration: 1s;
}
#downloads-button[notification="true"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification,
#downloads-button[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification,
#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
-moz-animation-name: downloadsIndicatorNotificationStartLeft;
}
#downloads-button[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification,
#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
/* #downloads-button[notification="finish"] makes this specific to Fx20 and up. */
/* #downloads-indicator-anchor[notification="finish"] makes this specific to Fx27 and up. */
background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
-moz-animation-name: downloadsIndicatorNotificationFinish;
-moz-animation-duration: 1s;
}
Making this into a sticky at least for a while.
