1280825 - Download panel is truncated in French when running more than 3 downloads

Status: RESOLVED FIXED

(Firefox :: Downloads Panel, defect, P2)

Description

[Théo Chevalier]

Attachment: Nightly French

The downloads panel is now truncated in French when more than 3 downloads are running. Cancel buttons are not visible anymore (see attached screenshots)

+ On Mac OS, the "Remaining time" string is now truncated (even with a single download)

It was working with 2016-06-11, it’s broken with 2016-06-15. Unfortunately I can’t use Mozregression since I can only reproduce with localized builds. More locales might be affected.

STR:

- Run 4 downloads at the same time
- Open Download panel from the toolbar

Comment 1

[Théo Chevalier]

Attachment: Truncated panel on Ubuntu

Comment 2

[Théo Chevalier]

Attachment: Truncated string on OS X with a single download

Comment 3

[Panos Astithas (he/him) [:past] (please ni?)]

The date range in comment 0 likely points to bug 1252509.

Comment 4

[Drew Willcoxon :adw]

Attachment: Bug 1280825 - Download panel is truncated in French when running more than 3 downloads.

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.

Review commit: https://reviewboard.mozilla.org/r/60926/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/60926/

Comment 5

[Drew Willcoxon :adw]

(I'd ask Jared for review since he reviewed the original patch, but he's not accepting requests right now.)

Comment 6

[:Paolo Amadini]

Comment on attachment 8765669 [details]
Bug 1280825 - Download panel is truncated in French when running more than 3 downloads.

Jared would be a better reviewer, having worked on the original patch, and I won't be able to get to this review until he's back anyways.

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8765669 [details]
Bug 1280825 - Download panel is truncated in French when running more than 3 downloads.

https://reviewboard.mozilla.org/r/60926/#review60192

::: browser/themes/shared/downloads/downloads.inc.css:41
(Diff revision 1)
> +   /* This value should match the right-side padding of #downloadsSummary. */
> +  -moz-margin-end: 38px;

Can you pull 38px out to a CSS variable?

Comment 8

[Drew Willcoxon :adw]

https://hg.mozilla.org/integration/fx-team/rev/e2ddf53209916302a81ca331f88b4df8df0ca7c7
Bug 1280825 - Download panel is truncated in French when running more than 3 downloads. r=jaws

Comment 9

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/e2ddf5320991