Bug 1269957 - Unify height of download items and allow maximum 5 items to show in downloads panel. r=paolo
MozReview-Commit-ID: 1EoBfLXyDVN
--- a/browser/components/downloads/content/downloads.js
+++ b/browser/components/downloads/content/downloads.js
@@ -715,17 +715,17 @@ XPCOMUtils.defineConstant(this, "Downloa
*/
const DownloadsView = {
//////////////////////////////////////////////////////////////////////////////
//// Functions handling download items in the list
/**
* Maximum number of items shown by the list at any given time.
*/
- kItemCountLimit: 3,
+ kItemCountLimit: 5,
/**
* Indicates whether we are still loading downloads data asynchronously.
*/
loading: false,
/**
* Ordered array of all Download objects. We need to keep this array because
--- a/browser/themes/linux/downloads/downloads.css
+++ b/browser/themes/linux/downloads/downloads.css
@@ -1,34 +1,21 @@
/* 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/. */
%include ../../shared/downloads/downloads.inc.css
-/*** Panel and outer controls ***/
-
-@keyfocus@ #downloadsSummary:focus,
-@keyfocus@ .downloadsPanelFooterButton:focus {
- outline: 1px -moz-dialogtext dotted;
- outline-offset: -5px;
-}
-
/*** List items and similar elements in the summary ***/
:root {
- --downloads-item-height: 6em;
+ --downloads-item-height: 5.5em;
--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;
}
-.downloadButton:focus > .button-box {
- outline: 1px -moz-dialogtext dotted;
-}
-
-/*** Highlighted list items ***/
-
-@keyfocus@ @itemFocused@ {
+@keyfocus@ @itemFocused@,
+@keyfocus@ #downloadsSummary:focus,
+@keyfocus@ .downloadsPanelFooterButton:focus,
+.downloadButton:focus {
outline: 1px -moz-dialogtext dotted;
outline-offset: -1px;
}
--- a/browser/themes/osx/downloads/downloads.css
+++ b/browser/themes/osx/downloads/downloads.css
@@ -14,20 +14,18 @@
@keyfocus@ .downloadsPanelFooterButton:focus {
outline: 2px -moz-mac-focusring solid;
outline-offset: -2px;
}
/*** List items and similar elements in the summary ***/
:root {
- --downloads-item-height: 7em;
+ --downloads-item-height: 6em;
--downloads-item-font-size-factor: 0.95;
- --downloads-item-target-margin-bottom: 6px;
- --downloads-item-details-margin-top: 0;
--downloads-item-details-opacity: 0.7;
}
.downloadButton:focus > .button-box {
outline: 2px -moz-mac-focusring solid;
outline-offset: -2px;
}
--- a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
+++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
@@ -16,45 +16,24 @@
}
/*** List items ***/
#downloadsRichListBox > richlistitem.download {
height: var(--downloads-item-height);
}
-%ifdef XP_WIN
-@media (-moz-os-version: windows-xp) {
-%endif
-#downloadsRichListBox > richlistitem.download {
- padding: 5px 8px;
-}
-%ifdef XP_WIN
-}
-%endif
-
.downloadTypeIcon {
- margin-top: 8px;
- margin-inline-end: 12px;
- margin-bottom: 8px;
- margin-inline-start: 0;
+ margin: 8px 13px;
width: 32px;
height: 32px;
}
-%ifdef XP_WIN
-@media not all and (-moz-os-version: windows-xp) {
- .downloadTypeIcon {
- margin-inline-start: 8px;
- }
-}
-%endif
-
.downloadBlockedBadge {
- margin: 0 4px;
+ margin: 0 5px;
background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
}
.downloadBlockedBadge:-moz-locale-dir(rtl) {
background-position-x: left;
}
@item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
@@ -65,34 +44,37 @@
background-image: url("chrome://browser/skin/info.svg");
}
@item@ > toolbarseparator {
display: none;
}
.downloadTarget {
- margin-bottom: 3px;
+ margin: 0;
}
.downloadDetails {
opacity: 0.7;
font-size: 95%;
+ /* Use calc() to keep the height consistent with .downloadTarget, so that the
+ progress bar can be vertically centered. */
+ margin: 4px 0 calc(1em / 0.95 - 1em);
}
.downloadButton {
-moz-appearance: none;
-moz-box-align: center;
background: transparent;
min-width: 0;
min-height: 0;
- margin: 3px;
+ margin: 0;
border: none;
- padding: 5px;
color: inherit;
+ padding: 0 18px;
}
.downloadButton > .button-box {
-moz-appearance: none;
padding: 2px !important;
border-radius: 50%;
}
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -20,21 +20,19 @@
#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
padding: 0;
}
#downloadsListBox {
background: transparent;
- padding: 0;
color: inherit;
-moz-appearance: none;
margin: 0;
- border: none;
}
#emptyDownloads {
padding: 16px 25px;
margin: 0;
/* The panel can be wider than this description after the blocked subview is
shown, so center the text. */
text-align: center;
@@ -145,63 +143,52 @@ toolbarseparator.downloadsDropmarkerSpli
/* Override default icon size which is too small for this dropdown */
.downloadsDropmarker > .button-box > .button-menu-dropmarker {
width: 16px;
height: 16px;
}
#downloadsSummary {
- padding: 0 12px;
-moz-user-focus: normal;
}
#downloadsSummary > .downloadTypeIcon {
list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
}
#downloadsSummaryDescription {
color: -moz-nativehyperlinktext;
}
/*** List items and similar elements in the summary ***/
#downloadsSummary,
richlistitem[type="download"] {
height: var(--downloads-item-height);
- padding-inline-end: 0;
- color: inherit;
}
richlistitem[type="download"] {
- margin: 0;
border-bottom: 1px solid var(--panel-separator-color);
background: transparent;
- padding: 0;
+ color: inherit;
}
richlistitem[type="download"]:last-child {
border-bottom: none;
}
-richlistitem[type="download"] > .downloadMainArea {
- padding: 8px;
-}
-
.downloadTypeIcon {
- margin-top: 8px;
- margin-inline-end: 12px;
- margin-bottom: 8px;
- margin-inline-start: 0;
+ margin: 8px 13px;
width: 32px;
height: 32px;
}
.downloadBlockedBadge {
- margin: 0 4px;
+ margin: 0 5px;
background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
}
.downloadBlockedBadge:-moz-locale-dir(rtl) {
background-position-x: left;
}
@item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
@@ -221,47 +208,46 @@ richlistitem[type="download"] > .downloa
which is a ch unit. Since this is the value that should control the
panel width, we apply it to the outer container to constrain
.downloadTarget and .downloadProgress.
Finally, since we want .downloadTarget's font-size to be at 100% of the
font-size of .downloadContainer's parent, we use calc to go from the
smaller font-size back to the original font-size.
*/
-#downloadsSummaryDetails,
.downloadContainer {
font-size: calc(100% * var(--downloads-item-font-size-factor));
+ margin-inline-end: 13px;
}
#downloadsSummaryDescription,
.downloadTarget {
- margin-bottom: var(--downloads-item-target-margin-bottom);
-}
-
-.downloadTarget {
+ margin: 0;
font-size: calc(100% / var(--downloads-item-font-size-factor));
}
#downloadsSummaryDetails,
.downloadDetails {
- margin-top: var(--downloads-item-details-margin-top);
opacity: var(--downloads-item-details-opacity);
+ /* Use calc() to keep the height consistent with .downloadTarget, so that the
+ progress bar can be vertically centered. */
+ margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
}
@item@[verdict] > toolbarseparator {
visibility: hidden;
}
.downloadButton {
-moz-appearance: none;
min-width: 58px;
margin: 0;
border: none;
background: transparent;
- padding: 8px;
+ padding: 0;
color: inherit;
}
.downloadButton > .button-box > .button-icon {
width: 16px;
height: 16px;
margin: 1px;
filter: url("chrome://global/skin/filters.svg#fill");
--- a/browser/themes/shared/downloads/progressmeter.inc.css
+++ b/browser/themes/shared/downloads/progressmeter.inc.css
@@ -1,15 +1,13 @@
/*** Common-styled progressmeter ***/
.downloadProgress {
height: 8px;
border-radius: 1px;
- margin-top: 2px;
- margin-bottom: 2px;
- margin-inline-start: 6px;
+ margin: 4px 0 0;
margin-inline-end: 12px;
/* for overriding rules in progressmeter.css */
-moz-appearance: none;
border-style: none;
background-color: transparent;
min-width: initial;
min-height: initial;
--- a/browser/themes/windows/downloads/downloads.css
+++ b/browser/themes/windows/downloads/downloads.css
@@ -14,20 +14,18 @@
@keyfocus@ #downloadsSummary:focus {
outline-offset: -5px;
}
/*** List items and similar elements in the summary ***/
:root {
- --downloads-item-height: 7em;
+ --downloads-item-height: 5.5em;
--downloads-item-font-size-factor: 0.9;
- --downloads-item-target-margin-bottom: 6px;
- --downloads-item-details-margin-top: 0;
--downloads-item-details-opacity: 0.6;
}
.downloadButton > .button-box {
border: 1px solid transparent;
}
@keyfocus@ .downloadButton:focus > .button-box {