Bug 1269957 - Unify height of download items and allow maximum 5 items to show in downloads panel. r=paolo draft
authorRex Lee <rexboy@mozilla.com>
Thu, 01 Dec 2016 20:42:05 +0800
changeset 456788 22a18644ae88edb3f51ef0096fb12532051b48f3
parent 452146 c36fbe84042debef0a5d58b7fc88185b401762ce
child 541320 1e443a1a8a46d76556bd40b0758289703a2a7a4e
push id40600
push userbmo:rexboy@mozilla.com
push dateFri, 06 Jan 2017 07:12:10 +0000
reviewerspaolo
bugs1269957
milestone53.0a1
Bug 1269957 - Unify height of download items and allow maximum 5 items to show in downloads panel. r=paolo MozReview-Commit-ID: 1EoBfLXyDVN
browser/components/downloads/content/downloads.js
browser/themes/linux/downloads/downloads.css
browser/themes/osx/downloads/downloads.css
browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
browser/themes/shared/downloads/downloads.inc.css
browser/themes/shared/downloads/progressmeter.inc.css
browser/themes/windows/downloads/downloads.css
--- 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 {