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
--- 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. */