Bug 1265341 - changing blocked download icons to be smaller overlays. r=jaws
authorJonathan Kingston <jkingston@mozilla.com>
Thu, 19 May 2016 03:03:16 +0100
changeset 300647 adaef7e670642b497a35d433702e2c08d5626e2a
parent 300646 5662da82f125a6f8f2e8346cf55277b7f39e7581
child 300648 8195a327e37da24b96e3f9fcc11e19fe4fd27579
push id30320
push usercbook@mozilla.com
push dateTue, 07 Jun 2016 13:22:11 +0000
treeherdermozilla-central@bc9db3800f3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1265341
milestone50.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1265341 - changing blocked download icons to be smaller overlays. r=jaws MozReview-Commit-ID: HLN1f04vOz4
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/download-blocked.svg
browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
browser/themes/shared/downloads/downloads.inc.css
browser/themes/shared/jar.inc.mn
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"
-                 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 {