Bug 1287384 - Fix icon and progress bar alignment in the Downloads Panel. r=jaws

MozReview-Commit-ID: 1Im2tA3CLr2

--HG--
extra : rebase_source : 21a7c3090466332643a9cf90901e1f187659d689
This commit is contained in:
Paolo Amadini 2016-08-22 13:01:40 +01:00
Родитель aebadaa666
Коммит aee56ee331
5 изменённых файлов: 39 добавлений и 53 удалений

Просмотреть файл

@ -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"

Просмотреть файл

@ -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) */

Просмотреть файл

@ -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>

Просмотреть файл

@ -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 {

Просмотреть файл

@ -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