Bug 1265341 - changing blocked download icons to be smaller overlays
MozReview-Commit-ID: HLN1f04vOz4
--- 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"
- validate="always"
- xbl:inherits="src=image"/>
- <xul:image class="downloadTypeIcon blockedIcon"/>
+ <xul:stack class="downloadStackIcon">
+ <xul:image class="downloadTypeIcon"
+ validate="always"
+ xbl:inherits="src=image"/>
+ <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,22 +48,16 @@ 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 */
--- a/browser/themes/linux/downloads/allDownloadsViewOverlay.css
+++ b/browser/themes/linux/downloads/allDownloadsViewOverlay.css
@@ -5,28 +5,16 @@
%include ../../shared/downloads/allDownloadsViewOverlay.inc.css
/*** List items ***/
:root {
--downloads-item-height: 5em;
}
-.blockedIcon {
- list-style-image: url("moz-icon://stock/gtk-dialog-error?size=32");
-}
-
-@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
- list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=32");
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("moz-icon://stock/gtk-dialog-info?size=32");
-}
-
/*** Button icons ***/
.downloadButton.downloadIconCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
@item@:hover .downloadButton.downloadIconCancel {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
--- a/browser/themes/linux/downloads/downloads.css
+++ b/browser/themes/linux/downloads/downloads.css
@@ -31,28 +31,16 @@
--downloads-item-border-top-color: hsla(0,0%,100%,.2);
--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");
-}
-
-@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
- list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=32");
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("moz-icon://stock/gtk-dialog-info?size=32");
-}
-
.downloadButton:focus > .button-box {
outline: 1px -moz-dialogtext dotted;
}
/*** Highlighted list items ***/
@keyfocus@ @itemFocused@ {
outline: 1px -moz-dialogtext dotted;
--- a/browser/themes/osx/downloads/allDownloadsViewOverlay.css
+++ b/browser/themes/osx/downloads/allDownloadsViewOverlay.css
@@ -5,24 +5,16 @@
%include ../../shared/downloads/allDownloadsViewOverlay.inc.css
/*** List items ***/
:root {
--downloads-item-height: 6em;
}
-@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/warning-32.png");
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/information-32.png");
-}
-
/*** Button icons ***/
.downloadButton.downloadIconCancel {
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
@item@:hover .downloadButton.downloadIconCancel {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
--- a/browser/themes/osx/downloads/downloads.css
+++ b/browser/themes/osx/downloads/downloads.css
@@ -42,24 +42,16 @@
--downloads-item-details-opacity: 0.7;
}
.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");
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/information-32.png");
-}
-
/*** Highlighted list items ***/
@keyfocus@ @itemFocused@,
@notKeyfocus@ @itemFinished@[exists]:hover {
border-radius: 3px;
border-top: 1px solid hsla(0,0%,100%,.2);
border-bottom: 1px solid hsla(0,0%,0%,.4);
background-color: Highlight;
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/download-blocked.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+ <style>
+ circle {
+ fill: #D92215;
+ }
+
+ rect {
+ fill: #fff;
+ }
+ </style>
+
+ <circle cx="8" cy="8" r="8" />
+ <rect x="3" y="6" width="10" height="4" rx=".5" ry=".5" />
+</svg>
--- a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
+++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
@@ -26,32 +26,49 @@
%endif
#downloadsRichListBox > richlistitem.download {
padding: 5px 8px;
}
%ifdef XP_WIN
}
%endif
+.downloadStackIcon {
+ --inline-offset: 8px;
+ --block-offset: 4px;
+ --icon-size: 32px;
+}
+
.downloadTypeIcon {
margin-inline-end: 8px;
- width: 32px;
- height: 32px;
+ width: calc(var(--icon-size) + var(--inline-offset));
+ height: calc(var(--icon-size) + var(--block-offset));
+ padding: var(--block-offset) var(--inline-offset) 0 0;
}
%ifdef XP_WIN
@media not all and (-moz-os-version: windows-xp) {
.downloadTypeIcon {
margin-inline-start: 8px;
}
}
%endif
.blockedIcon {
- list-style-image: url("chrome://global/skin/icons/Error.png");
+ --overlay-image-dimensions: top right / 16px no-repeat;
+ padding: 0;
+ background: url("chrome://browser/skin/download-blocked.svg") var(--overlay-image-dimensions);
+}
+
+@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
+ background: url("chrome://browser/skin/warning.svg") var(--overlay-image-dimensions);
+}
+
+@item@[verdict="Uncommon"] .blockedIcon {
+ background: url("chrome://browser/skin/info.svg") var(--overlay-image-dimensions);
}
.downloadTarget {
margin-bottom: 3px;
cursor: inherit;
}
.downloadDetails {
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -87,25 +87,42 @@ richlistitem[type="download"] {
richlistitem[type="download"]:first-child {
border-top: 1px solid transparent;
}
richlistitem[type="download"]:last-child {
border-bottom: 1px solid transparent;
}
+.downloadStackIcon {
+ --inline-offset: 8px;
+ --block-offset: 4px;
+ --icon-size: 32px;
+}
+
.downloadTypeIcon {
margin-inline-end: 8px;
/* Prevent flickering when changing states. */
- height: 32px;
- width: 32px;
+ width: calc(var(--icon-size) + var(--inline-offset));
+ height: calc(var(--icon-size) + var(--block-offset));
+ padding: var(--block-offset) var(--inline-offset) 0 0;
}
.blockedIcon {
- list-style-image: url("chrome://global/skin/icons/Error.png");
+ --overlay-image-dimensions: top right / 16px no-repeat;
+ padding: 0;
+ background: url("chrome://browser/skin/download-blocked.svg") var(--overlay-image-dimensions);
+}
+
+@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
+ background: url("chrome://browser/skin/warning.svg") var(--overlay-image-dimensions);
+}
+
+@item@[verdict="Uncommon"] .blockedIcon {
+ background: url("chrome://browser/skin/info.svg") var(--overlay-image-dimensions);
}
/* 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/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -46,16 +46,17 @@
skin/classic/browser/customizableui/panelarrow-customizeTip.png (../shared/customizableui/panelarrow-customizeTip.png)
skin/classic/browser/customizableui/panelarrow-customizeTip@2x.png (../shared/customizableui/panelarrow-customizeTip@2x.png)
skin/classic/browser/customizableui/subView-arrow-back-inverted.png (../shared/customizableui/subView-arrow-back-inverted.png)
skin/classic/browser/customizableui/subView-arrow-back-inverted@2x.png (../shared/customizableui/subView-arrow-back-inverted@2x.png)
skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl.png (../shared/customizableui/subView-arrow-back-inverted-rtl.png)
skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl@2x.png (../shared/customizableui/subView-arrow-back-inverted-rtl@2x.png)
skin/classic/browser/customizableui/whimsy.png (../shared/customizableui/whimsy.png)
skin/classic/browser/customizableui/whimsy@2x.png (../shared/customizableui/whimsy@2x.png)
+ skin/classic/browser/download-blocked.svg (../shared/download-blocked.svg)
skin/classic/browser/downloads/contentAreaDownloadsView.css (../shared/downloads/contentAreaDownloadsView.css)
skin/classic/browser/drm-icon.svg (../shared/drm-icon.svg)
skin/classic/browser/fullscreen/insecure.svg (../shared/fullscreen/insecure.svg)
skin/classic/browser/fullscreen/secure.svg (../shared/fullscreen/secure.svg)
skin/classic/browser/heartbeat-icon.svg (../shared/heartbeat-icon.svg)
skin/classic/browser/heartbeat-star-lit.svg (../shared/heartbeat-star-lit.svg)
skin/classic/browser/heartbeat-star-off.svg (../shared/heartbeat-star-off.svg)
skin/classic/browser/identity-icon.svg (../shared/identity-block/identity-icon.svg)
--- a/browser/themes/windows/downloads/allDownloadsViewOverlay.css
+++ b/browser/themes/windows/downloads/allDownloadsViewOverlay.css
@@ -5,24 +5,16 @@
%include ../../shared/downloads/allDownloadsViewOverlay.inc.css
/*** List items ***/
:root {
--downloads-item-height: 6em;
}
-@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/Warning.png");
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/information-32.png");
-}
-
/*** 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
transparent and is lighter than desired.
--- a/browser/themes/windows/downloads/downloads.css
+++ b/browser/themes/windows/downloads/downloads.css
@@ -91,24 +91,16 @@
.downloadButton > .button-box {
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");
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
- list-style-image: url("chrome://global/skin/icons/information-32.png");
-}
-
/*** Highlighted list items ***/
@keyfocus@ @itemFocused@ {
outline: 1px -moz-dialogtext dotted;
outline-offset: -1px;
}
@notKeyfocus@ @itemFinished@[exists]:hover {