1728636 - Download progress bar doesn't follow theme on a dark Linux theme.

Status: VERIFIED FIXED

(Firefox :: Downloads Panel, defect, P3)

Description

[Emilio Cobos Álvarez (:emilio)]

Attachment: Screenshot

This is a regression from bug 1710918.

That bug introduced the following CSS:

:root {
  --download-progress-fill-color: -moz-accent-color;
  --download-progress-paused-color: GrayText;
  --download-progress-flare-color: rgba(255,255,255,0.75);
}

/* download progress bar is used in contexts which are not LightweightThemeConsumers and
   do not get the lwt- theme variables. So we duplicate the fallbacks here. */
:root:-moz-lwtheme {
  --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,97,224));
}

@media (-moz-toolbar-prefers-color-scheme: dark) {
  :root {
    --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255));
  }
  #contentAreaDownloadsView {
    --download-progress-fill-color: var(--in-content-item-selected);
  }
}

Which means that if -moz-toolbar-prefers-color-scheme: dark evaluates to true, we override the -moz-accent-color rule above, which I believe is not intended. This can be seen with any dark Linux theme.

I believe it's not intended, and probably the :root selector inside the media query needs to also be :root:-moz-lwtheme. Sam?

Comment 1

[Sam Foster [:sfoster] (he/him)]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #0)

I believe it's not intended, and probably the :root selector inside the media query needs to also be :root:-moz-lwtheme. Sam?

Yeah that looks right, I'll attach a patch.

It won't fix the colors in about:downloads, as those use the in-content variables, where the item selected color is --in-content-item-selected (which in turn is --in-content-primary-button-background) and kinda forces our hand here.

Comment 2

[Sam Foster [:sfoster] (he/him)]

Attachment: Bug 1728636 - Use theme colors for the progress bar with a dark system theme. r?emilio,#desktop-theme-reviewers

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1710918

Comment 4

[:Gijs (he/him)]

Picking S4 here as this seems unlikely to impair functionality (only if the teal clashes with the dark theme which seems unlikely?) and this is Linux-specific.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c650985fc2b2
Use theme colors for the progress bar with a dark system theme. r=emilio

Comment 6

[Cosmin Sabou [:CosminS]]

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

Comment 7

[Pascal Chevrel:pascalc]

Sam, this is a 93 regression, is that worth uplifting to beta? thanks

Comment 8

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 9239002 [details]
Bug 1728636 - Use theme colors for the progress bar with a dark system theme. r?emilio,#desktop-theme-reviewers

Beta/Release Uplift Approval Request

• User impact if declined: Progress bar color will not match other UI elements using the OS' theme
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Using linux, select a dark system theme
  In firefox' customize UI , select the "system theme"
  Begin a download in firefox

Expected:
The color of the progress bar in the download panel should match that of the "pie" progress in the toolbar - which is the accent color defined by the system theme

• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Simple CSS-only change, scoped to the download panel.
• String changes made/needed: None

Comment 9

[Simona Badau, Desktop QA]

Reproduced this issue on Firefox 93 beta 2 on Ubuntu 20.04 x64.

Verified as fixed on the latest Nightly 94.0a1 on Ubuntu 20.04 x64.

Comment 10

[Pascal Chevrel:pascalc]

Comment on attachment 9239002 [details]
Bug 1728636 - Use theme colors for the progress bar with a dark system theme. r?emilio,#desktop-theme-reviewers

Uplift approved for 93 beta 3, thanks.

Comment 11

[Pascal Chevrel:pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/6aaa0cef7f1a

Comment 12

[Simona Badau, Desktop QA]

Verified as fixed on Firefox 93 beta 3 on Ubuntu 20.04 x64 - download progress bar follows theme on a dark Linux theme.