Bug 1265341: Adding new svg icons and change overlay position of blocked downloads draft
authorJonathan Kingston <jkingston@mozilla.com>
Wed, 27 Apr 2016 15:12:30 +0100
changeset 356908 abf520306328ac8874274c20aed0760d74d6d07d
parent 356520 0ffb122d8bfaa825ed738ac948d018eed8e489f7
child 519517 a6aabfc17104f8ae6f736a467d97e668f1b3c908
push id16638
push userjkingston@mozilla.com
push dateWed, 27 Apr 2016 14:12:51 +0000
bugs1265341
milestone49.0a1
Bug 1265341: Adding new svg icons and change overlay position of blocked downloads MozReview-Commit-ID: HFaV5axeXnw
browser/components/downloads/content/download.xml
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,17 +13,17 @@
           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:stack>
+      <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"
--- 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 {
-  background: url("moz-icon://stock/gtk-dialog-error?size=32") var(--overlay-image-dimentions);
-}
-
-@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
-  background: url("moz-icon://stock/gtk-dialog-warning?size=32") var(--overlay-image-dimentions);
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
-  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 {
   -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 {
-  background: url("moz-icon://stock/gtk-dialog-error?size=32") var(--overlay-image-dimentions);
-}
-
-@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
-  background: url("moz-icon://stock/gtk-dialog-warning?size=32") var(--overlay-image-dimentions);
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
-  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 ***/
 
 @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 {
-  background: url("chrome://global/skin/icons/warning-32.png") var(--overlay-image-dimentions);
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
-  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 {
   -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 {
-  background: url("chrome://global/skin/icons/warning-32.png") var(--overlay-image-dimentions);
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
-  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);
   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>
\ No newline at end of file
--- a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
+++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
@@ -26,33 +26,49 @@
 %endif
 #downloadsRichListBox > richlistitem.download {
   padding: 5px 8px;
 }
 %ifdef XP_WIN
 }
 %endif
 
+.downloadStackIcon {
+  --inline-offset: 8px;
+  --block-offset: 4px;
+  --icon-size: 32px;
+}
+
 .downloadTypeIcon {
   -moz-margin-end: 8px;
-  width: 32px;
-  height: 32px;
+  width: calc(--icon-size + --inline-offset);
+  height: calc(--icon-size + --block-offset);
+  padding: var(--block-offset) var(--inline-offset) 0 0;
 }
 
 %ifdef XP_WIN
 @media not all and (-moz-os-version: windows-xp) {
   .downloadTypeIcon {
     -moz-margin-start: 8px;
   }
 }
 %endif
 
 .blockedIcon {
-  --overlay-image-dimentions: bottom right / 16px no-repeat;
-  background: url("chrome://global/skin/icons/Error.png") var(--overlay-image-dimentions);
+  --overlay-image-dimentions: top right / 16px no-repeat;
+  padding: 0;
+  background: url("chrome://browser/skin/download-blocked.svg") var(--overlay-image-dimentions);
+}
+
+@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
+  background: url("chrome://browser/skin/warning.svg") var(--overlay-image-dimentions);
+}
+
+@item@[verdict="Uncommon"] .blockedIcon {
+  background: url("chrome://browser/skin/info.svg") 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
@@ -87,26 +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 {
   -moz-margin-end: 8px;
   /* Prevent flickering when changing states. */
-  height: 32px;
-  width: 32px;
+  width: calc(--icon-size + --inline-offset);
+  height: calc(--icon-size + --block-offset);
+  padding: var(--block-offset) var(--inline-offset) 0 0;
 }
 
 .blockedIcon {
   --overlay-image-dimentions: top right / 16px no-repeat;
-  background: url("chrome://global/skin/icons/Error.png") var(--overlay-image-dimentions);
+  padding: 0;
+  background: url("chrome://browser/skin/download-blocked.svg") var(--overlay-image-dimentions);
+}
+
+@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
+  background: url("chrome://browser/skin/warning.svg") var(--overlay-image-dimentions);
+}
+
+@item@[verdict="Uncommon"] .blockedIcon {
+  background: url("chrome://browser/skin/info.svg") 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/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 {
-  background: url("chrome://global/skin/icons/Warning.png") var(--overlay-image-dimentions);
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
-  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
     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 {
-  background: url("chrome://global/skin/icons/Warning.png") var(--overlay-image-dimentions);
-}
-
-@item@[verdict="Uncommon"] .blockedIcon {
-  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;
 }
 
 @notKeyfocus@ @itemFinished@[exists]:hover {