Bug 1265341: Add document icon for blocked downloads with an overlay information and warning symbol
MozReview-Commit-ID: 55F2bcKPBEI
--- a/browser/components/downloads/content/download.xml
+++ b/browser/components/downloads/content/download.xml
@@ -13,20 +13,22 @@
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xbl="http://www.mozilla.org/xbl">
<binding id="download"
extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
<content orient="horizontal"
align="center"
onclick="DownloadsView.onDownloadClick(event);">
- <xul:image class="downloadTypeIcon"
+ <xul:stack>
+ <xul:image class="downloadTypeIcon"
validate="always"
xbl:inherits="src=image"/>
- <xul:image class="downloadTypeIcon blockedIcon"/>
+ <xul:image class="downloadTypeIcon blockedIcon" />
+ </xul:stack>
<xul:vbox pack="center"
flex="1"
class="downloadContainer"
style="width: &downloadDetails.width;">
<!-- We're letting localizers put a min-width in here primarily
because of the downloads summary at the bottom of the list of
download items. An element in the summary has the same min-width
on a description, and we don't want the panel to change size if the
--- a/browser/components/downloads/content/downloads.css
+++ b/browser/components/downloads/content/downloads.css
@@ -48,27 +48,20 @@ richlistitem.download[active] {
richlistitem.download button {
/* These buttons should never get focus, as that would "disable"
the downloads view controller (it's only used when the richlistbox
is focused). */
-moz-user-focus: none;
}
/*** Visibility of controls inside download items ***/
-
-.download-state:-moz-any( [state="6"], /* Blocked (parental) */
- [state="8"], /* Blocked (dirty) */
- [state="9"]) /* Blocked (policy) */
- .downloadTypeIcon:not(.blockedIcon),
-
.download-state:not(:-moz-any([state="6"], /* Blocked (parental) */
[state="8"], /* Blocked (dirty) */
[state="9"]) /* Blocked (policy) */)
.downloadTypeIcon.blockedIcon,
-
.download-state:not(:-moz-any([state="-1"],/* Starting (initial) */
[state="5"], /* Starting (queued) */
[state="0"], /* Downloading */
[state="4"], /* Paused */
[state="7"]) /* Scanning */)
.downloadProgress,
.download-state:not( [state="0"] /* Downloading */)
--- a/browser/themes/linux/downloads/allDownloadsViewOverlay.css
+++ b/browser/themes/linux/downloads/allDownloadsViewOverlay.css
@@ -6,25 +6,25 @@
/*** List items ***/
:root {
--downloads-item-height: 5em;
}
.blockedIcon {
- list-style-image: url("moz-icon://stock/gtk-dialog-error?size=32");
+ background: url("moz-icon://stock/gtk-dialog-error?size=32") var(--overlay-image-dimentions);
}
@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
- list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=32");
+ background: url("moz-icon://stock/gtk-dialog-warning?size=32") var(--overlay-image-dimentions);
}
@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("moz-icon://stock/gtk-dialog-info?size=32");
+ background: url("moz-icon://stock/gtk-dialog-info?size=32") var(--overlay-image-dimentions);
}
/*** Button icons ***/
.downloadButton.downloadIconCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
@item@:hover .downloadButton.downloadIconCancel {
--- a/browser/themes/linux/downloads/downloads.css
+++ b/browser/themes/linux/downloads/downloads.css
@@ -32,25 +32,25 @@
--downloads-item-border-bottom-color: hsla(0,0%,0%,.15);
--downloads-item-font-size-factor: 0.9;
--downloads-item-target-margin-bottom: 7px;
--downloads-item-details-margin-top: 1px;
--downloads-item-details-opacity: 0.6;
}
.blockedIcon {
- list-style-image: url("moz-icon://stock/gtk-dialog-error?size=32");
+ background: url("moz-icon://stock/gtk-dialog-error?size=32") var(--overlay-image-dimentions);
}
@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
- list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=32");
+ background: url("moz-icon://stock/gtk-dialog-warning?size=32") var(--overlay-image-dimentions);
}
@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("moz-icon://stock/gtk-dialog-info?size=32");
+ background: url("moz-icon://stock/gtk-dialog-info?size=32") var(--overlay-image-dimentions);
}
.downloadButton:focus > .button-box {
outline: 1px -moz-dialogtext dotted;
}
/*** Highlighted list items ***/
--- a/browser/themes/osx/downloads/allDownloadsViewOverlay.css
+++ b/browser/themes/osx/downloads/allDownloadsViewOverlay.css
@@ -6,21 +6,21 @@
/*** List items ***/
:root {
--downloads-item-height: 6em;
}
@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/warning-32.png");
+ background: url("chrome://global/skin/icons/warning-32.png") var(--overlay-image-dimentions);
}
@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/information-32.png");
+ background: url("chrome://global/skin/icons/information-32.png") var(--overlay-image-dimentions);
}
/*** Button icons ***/
.downloadButton.downloadIconCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
@item@:hover .downloadButton.downloadIconCancel {
--- a/browser/themes/osx/downloads/downloads.css
+++ b/browser/themes/osx/downloads/downloads.css
@@ -43,21 +43,21 @@
}
.downloadButton:focus > .button-box {
outline: 2px -moz-mac-focusring solid;
outline-offset: -2px;
}
@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/warning-32.png");
+ background: url("chrome://global/skin/icons/warning-32.png") var(--overlay-image-dimentions);
}
@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/information-32.png");
+ background: url("chrome://global/skin/icons/information-32.png") var(--overlay-image-dimentions);
}
/*** Highlighted list items ***/
@keyfocus@ @itemFocused@,
@notKeyfocus@ @itemFinished@[exists]:hover {
border-radius: 3px;
border-top: 1px solid hsla(0,0%,100%,.2);
--- a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
+++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
@@ -41,17 +41,18 @@
@media not all and (-moz-os-version: windows-xp) {
.downloadTypeIcon {
-moz-margin-start: 8px;
}
}
%endif
.blockedIcon {
- list-style-image: url("chrome://global/skin/icons/Error.png");
+ --overlay-image-dimentions: bottom right / 16px no-repeat;
+ background: url("chrome://global/skin/icons/Error.png") var(--overlay-image-dimentions);
}
.downloadTarget {
margin-bottom: 3px;
cursor: inherit;
}
.downloadDetails {
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -95,17 +95,18 @@ richlistitem[type="download"]:last-child
.downloadTypeIcon {
-moz-margin-end: 8px;
/* Prevent flickering when changing states. */
height: 32px;
width: 32px;
}
.blockedIcon {
- list-style-image: url("chrome://global/skin/icons/Error.png");
+ --overlay-image-dimentions: top right / 16px no-repeat;
+ background: url("chrome://global/skin/icons/Error.png") var(--overlay-image-dimentions);
}
/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
a vbox with class .downloadContainer. We set the font-size of the entire
container to --downloads-item-font-size-factor because:
1) This is the size that we want .downloadDetails to be
2) The container's width is set by localizers by &downloadDetails.width;,
--- a/browser/themes/windows/downloads/allDownloadsViewOverlay.css
+++ b/browser/themes/windows/downloads/allDownloadsViewOverlay.css
@@ -6,21 +6,21 @@
/*** List items ***/
:root {
--downloads-item-height: 6em;
}
@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/Warning.png");
+ background: url("chrome://global/skin/icons/Warning.png") var(--overlay-image-dimentions);
}
@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/information-32.png");
+ background: url("chrome://global/skin/icons/information-32.png") var(--overlay-image-dimentions);
}
/*** Highlighted list items ***/
@media not all and (-moz-os-version: windows-xp) {
@media (-moz-windows-default-theme) {
/*
-moz-appearance: menuitem is almost right, but the hover effect is not
--- a/browser/themes/windows/downloads/downloads.css
+++ b/browser/themes/windows/downloads/downloads.css
@@ -92,21 +92,21 @@
border: 1px solid transparent;
}
@keyfocus@ .downloadButton:focus > .button-box {
border: 1px dotted ThreeDDarkShadow;
}
@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/Warning.png");
+ background: url("chrome://global/skin/icons/Warning.png") var(--overlay-image-dimentions);
}
@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/information-32.png");
+ background: url("chrome://global/skin/icons/information-32.png") var(--overlay-image-dimentions);
}
/*** Highlighted list items ***/
@keyfocus@ @itemFocused@ {
outline: 1px -moz-dialogtext dotted;
outline-offset: -1px;
}