Bug 1265341: Add document icon for blocked downloads with an overlay information and warning symbol draft
authorJonathan Kingston <jkingston@mozilla.com>
Tue, 26 Apr 2016 15:33:03 +0100
changeset 356520 0ffb122d8bfaa825ed738ac948d018eed8e489f7
parent 356464 9ce31e9f90cb0e534611b0f617c5bbc232ffe748
child 356908 abf520306328ac8874274c20aed0760d74d6d07d
push id16536
push userjkingston@mozilla.com
push dateTue, 26 Apr 2016 14:38:39 +0000
bugs1265341
milestone49.0a1
Bug 1265341: Add document icon for blocked downloads with an overlay information and warning symbol MozReview-Commit-ID: 55F2bcKPBEI
browser/components/downloads/content/download.xml
browser/components/downloads/content/downloads.css
browser/themes/linux/downloads/allDownloadsViewOverlay.css
browser/themes/linux/downloads/downloads.css
browser/themes/osx/downloads/allDownloadsViewOverlay.css
browser/themes/osx/downloads/downloads.css
browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
browser/themes/shared/downloads/downloads.inc.css
browser/themes/windows/downloads/allDownloadsViewOverlay.css
browser/themes/windows/downloads/downloads.css
--- 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;
 }