From aee56ee3318331038a01f6aea31384668927a301 Mon Sep 17 00:00:00 2001
From: Paolo Amadini <paolo.mozmail@amadzone.org>
Date: Mon, 22 Aug 2016 13:01:40 +0100
Subject: [PATCH] Bug 1287384 - Fix icon and progress bar alignment in the
 Downloads Panel. r=jaws

MozReview-Commit-ID: 1Im2tA3CLr2

--HG--
extra : rebase_source : 21a7c3090466332643a9cf90901e1f187659d689
---
 .../components/downloads/content/download.xml |  4 +-
 .../downloads/content/downloads.css           |  2 +-
 .../downloads/content/downloadsOverlay.xul    |  5 +-
 .../downloads/allDownloadsViewOverlay.inc.css | 35 +++++++-------
 .../themes/shared/downloads/downloads.inc.css | 46 +++++++------------
 5 files changed, 39 insertions(+), 53 deletions(-)

diff --git a/browser/components/downloads/content/download.xml b/browser/components/downloads/content/download.xml
index e0cdf04be62b..5981171e8382 100644
--- a/browser/components/downloads/content/download.xml
+++ b/browser/components/downloads/content/download.xml
@@ -18,11 +18,11 @@
     <content orient="horizontal"
              align="center"
              onclick="DownloadsView.onDownloadClick(event);">
-      <xul:stack class="downloadStackIcon">
+      <xul:stack>
         <xul:image class="downloadTypeIcon"
                    validate="always"
                    xbl:inherits="src=image"/>
-        <xul:image class="downloadTypeIcon blockedIcon" />
+        <xul:image class="downloadBlockedBadge" />
       </xul:stack>
       <xul:vbox pack="center"
                 flex="1"
diff --git a/browser/components/downloads/content/downloads.css b/browser/components/downloads/content/downloads.css
index 7077618ef24d..49a4fa4c8eb4 100644
--- a/browser/components/downloads/content/downloads.css
+++ b/browser/components/downloads/content/downloads.css
@@ -56,7 +56,7 @@ richlistitem.download button {
 .download-state:not(:-moz-any([state="6"], /* Blocked (parental) */
                               [state="8"], /* Blocked (dirty)    */
                               [state="9"]) /* Blocked (policy)   */)
-                                           .downloadTypeIcon.blockedIcon,
+                                           .downloadBlockedBadge,
 
 .download-state:not(:-moz-any([state="-1"],/* Starting (initial) */
                               [state="5"], /* Starting (queued)  */
diff --git a/browser/components/downloads/content/downloadsOverlay.xul b/browser/components/downloads/content/downloadsOverlay.xul
index 96569569780f..f728e7147eac 100644
--- a/browser/components/downloads/content/downloadsOverlay.xul
+++ b/browser/components/downloads/content/downloadsOverlay.xul
@@ -135,7 +135,9 @@
                   onkeydown="DownloadsSummary.onKeyDown(event);"
                   onclick="DownloadsSummary.onClick(event);">
               <image class="downloadTypeIcon" />
-              <vbox id="downloadsSummaryChildBox">
+              <vbox pack="center"
+                    class="downloadContainer"
+                    style="width: &downloadDetails.width;">
                 <description id="downloadsSummaryDescription"
                              style="min-width: &downloadsSummary.minWidth2;"/>
                 <progressmeter id="downloadsSummaryProgress"
@@ -144,7 +146,6 @@
                                max="100"
                                mode="normal" />
                 <description id="downloadsSummaryDetails"
-                             style="width: &downloadDetails.width;"
                              crop="end"/>
               </vbox>
             </hbox>
diff --git a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
index d45202f53509..bf4c7674c575 100644
--- a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
+++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
@@ -31,17 +31,13 @@
 }
 %endif
 
-.downloadStackIcon {
-  --inline-offset: 8px;
-  --block-offset: 4px;
-  --icon-size: 32px;
-}
-
 .downloadTypeIcon {
-  margin-inline-end: 8px;
-  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;
+  margin-top: 8px;
+  margin-inline-end: 12px;
+  margin-bottom: 8px;
+  margin-inline-start: 0;
+  width: 32px;
+  height: 32px;
 }
 
 %ifdef XP_WIN
@@ -52,18 +48,21 @@
 }
 %endif
 
-.blockedIcon {
-  --overlay-image-dimensions: top right / 16px no-repeat;
-  padding: 0;
-  background: url("chrome://browser/skin/downloads/download-blocked.svg") var(--overlay-image-dimensions);
+.downloadBlockedBadge {
+  margin: 0 4px;
+  background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
 }
 
-@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
-  background: url("chrome://browser/skin/warning.svg") var(--overlay-image-dimensions);
+.downloadBlockedBadge:-moz-locale-dir(rtl) {
+  background-position-x: left;
 }
 
-@item@[verdict="Uncommon"] .blockedIcon {
-  background: url("chrome://browser/skin/info.svg") var(--overlay-image-dimensions);
+@item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
+  background-image: url("chrome://browser/skin/warning.svg");
+}
+
+@item@[verdict="Uncommon"] .downloadBlockedBadge {
+  background-image: url("chrome://browser/skin/info.svg");
 }
 
 .downloadTarget {
diff --git a/browser/themes/shared/downloads/downloads.inc.css b/browser/themes/shared/downloads/downloads.inc.css
index e12494afbedd..245bfc49b627 100644
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -83,23 +83,11 @@
 }
 
 #downloadsSummary {
-  --summary-padding-end: 38px;
-  --summary-padding-start: 12px;
-  padding: 8px var(--summary-padding-end) 8px var(--summary-padding-start);
+  padding: 0 12px;
   cursor: pointer;
   -moz-user-focus: normal;
 }
 
-#downloadsSummary:-moz-locale-dir(rtl) {
-  padding-right: var(--summary-padding-start);
-  padding-left: var(--summary-padding-end);
-}
-
-#downloadsSummaryChildBox {
-  -moz-margin-start: var(--summary-padding-start);
-  -moz-margin-end: var(--summary-padding-end);
-}
-
 #downloadsSummary > .downloadTypeIcon {
   list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
 }
@@ -142,31 +130,29 @@ richlistitem[type="download"]:last-child {
 }
 
 .downloadTypeIcon {
-  --inline-offset: 8px;
-  --block-offset: 4px;
-  --icon-size: 32px;
+  margin-top: 8px;
+  margin-inline-end: 12px;
+  margin-bottom: 8px;
+  margin-inline-start: 0;
+  width: 32px;
+  height: 32px;
 }
 
-.downloadTypeIcon {
-  margin-inline-end: 8px;
-  /* Prevent flickering when changing states. */
-  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;
+.downloadBlockedBadge {
+  margin: 0 4px;
+  background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
 }
 
-.blockedIcon {
-  --overlay-image-dimensions: top right / 16px no-repeat;
-  padding: 0;
-  background: url("chrome://browser/skin/downloads/download-blocked.svg") var(--overlay-image-dimensions);
+.downloadBlockedBadge:-moz-locale-dir(rtl) {
+  background-position-x: left;
 }
 
-@item@[verdict="PotentiallyUnwanted"] .blockedIcon {
-  background: url("chrome://browser/skin/warning.svg") var(--overlay-image-dimensions);
+@item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
+  background-image: url("chrome://browser/skin/warning.svg");
 }
 
-@item@[verdict="Uncommon"] .blockedIcon {
-  background: url("chrome://browser/skin/info.svg") var(--overlay-image-dimensions);
+@item@[verdict="Uncommon"] .downloadBlockedBadge {
+  background-image: url("chrome://browser/skin/info.svg");
 }
 
 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of