Bug 1280825 - Download panel is truncated in French when running more than 3 downloads. r?jaws draft
authorDrew Willcoxon <adw@mozilla.com>
Mon, 27 Jun 2016 17:16:31 -0700
changeset 381720 e2a019cf5fe6a79a94385999739d049a8871e53d
parent 379627 13bdb28018357af151edadbb3f76a474ff00ec07
child 524011 0a4ba91bb2a79696490c77670ee0e3a0a5117c68
push id21531
push userdwillcoxon@mozilla.com
push dateTue, 28 Jun 2016 00:16:44 +0000
reviewersjaws
bugs1280825
milestone50.0a1
Bug 1280825 - Download panel is truncated in French when running more than 3 downloads. r?jaws This part fixes the truncation problem shown in comment 0: > +/* Make the panel wide enough to show the download list items without improperly > + truncating them. */ > +#downloadsPanel-multiView > .panel-viewcontainer, > +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack, > +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-mainview { > + overflow: visible; > + max-width: unset; > +} > + The translateX(101%) changes are necessary to prevent a sliver of the left edge of the blocked subview panel from appearing at the right edge of the main view when the subview isn't shown. I don't understand why the #downloadsSummaryChildBox -moz-margin-end change is necessary, but without it, the #downloadsSummary box doesn't actually get any padding on its right side even though it's there in the CSS, which means that the progress bar in the summary box nearly touches the right edge of the panel. I also don't understand why the .downloadStackIcon -> .downloadTypeIcon change is necessary, but without it the down-arrow image in the summary box is too big, like the size specified in the CSS isn't getting applied at all. MozReview-Commit-ID: Csw8BHdAA5z
browser/components/downloads/content/downloads.css
browser/components/downloads/content/downloadsOverlay.xul
browser/themes/shared/downloads/downloads.inc.css
--- a/browser/components/downloads/content/downloads.css
+++ b/browser/components/downloads/content/downloads.css
@@ -172,31 +172,40 @@ richlistitem.download button {
 #downloadsPanel-mainView .download-state[state="8"] .downloadConfirmBlock,
 #downloadsPanel-mainView .download-state[state="8"] .downloadChooseUnblock,
 #downloadsPanel-mainView .download-state[state="8"] .downloadChooseOpen,
 #downloadsPanel-mainView .download-state[state="8"] .downloadRetry,
 #downloadsPanel-mainView .download-state[state="8"] .downloadShow {
   display: none;
 }
 
+/* Make the panel wide enough to show the download list items without improperly
+   truncating them. */
+#downloadsPanel-multiView > .panel-viewcontainer,
+#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack,
+#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-mainview {
+  overflow: visible;
+  max-width: unset;
+}
+
 /* Show the "show blocked info" button. */
 #downloadsPanel-mainView .download-state[state="8"] .downloadShowBlockedInfo {
   display: inline;
 }
 
 /** When the main view is showing... **/
 
 /* The subview should be off to the right and not visible at all. */
 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
-  transform: translateX(100%);
+  transform: translateX(101%);
   transition: transform var(--panelui-subview-transition-duration);
 }
 
 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews:-moz-locale-dir(rtl) {
-  transform: translateX(-100%);
+  transform: translateX(-101%);
 }
 
 /** When the subview is showing... **/
 
 /* Hide the buttons of all downloads except the one that triggered the
    subview. */
 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state:not([showingsubview]) .downloadButton {
   display: none;
--- a/browser/components/downloads/content/downloadsOverlay.xul
+++ b/browser/components/downloads/content/downloadsOverlay.xul
@@ -129,17 +129,17 @@
           <spacer flex="1"/>
           <vbox id="downloadsFooter">
             <hbox id="downloadsSummary"
                   align="center"
                   orient="horizontal"
                   onkeydown="DownloadsSummary.onKeyDown(event);"
                   onclick="DownloadsSummary.onClick(event);">
               <image class="downloadTypeIcon" />
-              <vbox>
+              <vbox id="downloadsSummaryChildBox">
                 <description id="downloadsSummaryDescription"
                              style="min-width: &downloadsSummary.minWidth2;"/>
                 <progressmeter id="downloadsSummaryProgress"
                                class="downloadProgress"
                                min="0"
                                max="100"
                                mode="normal" />
                 <description id="downloadsSummaryDetails"
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -32,16 +32,21 @@
 }
 
 #downloadsSummary {
   padding: 8px 38px 8px 12px;
   cursor: pointer;
   -moz-user-focus: normal;
 }
 
+#downloadsSummaryChildBox {
+   /* This value should match the right-side padding of #downloadsSummary. */
+  -moz-margin-end: 38px;
+}
+
 #downloadsSummary > .downloadTypeIcon {
   list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
 }
 
 %ifdef XP_MACOSX
 @media (min-resolution: 2dppx) {
   #downloadsSummary > .downloadTypeIcon {
     list-style-image: url("chrome://browser/skin/downloads/download-summary@2x.png");
@@ -82,17 +87,17 @@ richlistitem[type="download"] {
 richlistitem[type="download"]:first-child {
   border-top: 1px solid transparent;
 }
 
 richlistitem[type="download"]:last-child {
   border-bottom: 1px solid transparent;
 }
 
-.downloadStackIcon {
+.downloadTypeIcon {
   --inline-offset: 8px;
   --block-offset: 4px;
   --icon-size: 32px;
 }
 
 .downloadTypeIcon {
   margin-inline-end: 8px;
   /* Prevent flickering when changing states. */