Bug 1265341 - changing blocked download icons to be smaller overlays. r=jaws

MozReview-Commit-ID: HLN1f04vOz4

--HG--
extra : transplant_source : %91%15%C1%EB/%ECT%C1%7F%D4G%DF%BEL%D8%DD%8FS%BF0

browser/components/downloads/content/download.xml

@@ -18,10 +18,12 @@
     <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"

browser/components/downloads/content/downloads.css

@@ -53,12 +53,6 @@ richlistitem.download button {
 }
 
 /*** 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)   */)

browser/themes/linux/downloads/allDownloadsViewOverlay.css

@@ -10,18 +10,6 @@
   --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 {

browser/themes/linux/downloads/downloads.css

@@ -36,18 +36,6 @@
   --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;
 }

browser/themes/osx/downloads/allDownloadsViewOverlay.css

@@ -10,14 +10,6 @@
   --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 {

browser/themes/osx/downloads/downloads.css

@@ -47,14 +47,6 @@
   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@,

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>

browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css

@@ -31,10 +31,17 @@
 }
 %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
@@ -46,7 +53,17 @@
 %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 {

browser/themes/shared/downloads/downloads.inc.css

@@ -92,15 +92,32 @@ 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

browser/themes/shared/jar.inc.mn

@@ -51,6 +51,7 @@
   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)

browser/themes/windows/downloads/allDownloadsViewOverlay.css

@@ -10,14 +10,6 @@
   --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) {

browser/themes/windows/downloads/downloads.css

@@ -96,14 +96,6 @@
   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@ {