1701691 - Match more browser components to the browser theme

Status: VERIFIED FIXED

(Firefox :: Theme, enhancement, P1)

Description

[Mark Striemer [:mstriemer]]

The infobars have a light/dark colour scheme, but this follows the OS-level preference, not the theme's. UX would prefer that we match the theme's preference (this is brighttext in the code) rather than the OS.

STR

1. Set your theme to light or dark, opposite your OS preference
2. Trigger an infobar

• Go to https://permission.site/
• Click "Protocol Handler"

Expected results: The infobar colours match your theme's dark/light
Actual results: The infobar is light on dark or dark on light, matching the OS

Comment 1

[Bernard Igiri]

Attachment: Bug 1701691 - Change infobars CSS to match browser theme instead of OS theme r=mstriemer,dao

I separated out the prefers-color-scheme: dark in common.inc.css so that we can a version with that and without that and use the version without that for infobars. Doing this eliminates the OS theme changes affect on the infobar. Unfortunately, it's still not perfect. The button styling seems to be off.

Comment 2

[Mark Striemer [:mstriemer]]

Attachment: Bug 1701691 - -moz-toolbar-prefers-color-scheme for dark theme detection

This also affects proton modals and infobars and whatever else
includes common.css in its shadow DOM in browser chrome.

Comment 3

[Tyler Duzan]

Promoted to P1 after discussions in Slack surrounding MR1 triage.

Comment 4

[Mark Striemer [:mstriemer]]

Attachment: Bug 1701691 - common/global -moz-toolbar-prefers-color-scheme support

Depends on D111486

Comment 5

[Mark Striemer [:mstriemer]]

Attachment: Bug 1701691 - message-bar/infobar -moz-toolbar-prefers-color-scheme support

Depends on D111970

Comment 6

[Mark Striemer [:mstriemer]]

Attachment: Bug 1701691 - about:newinstall -moz-toolbar-prefers-color-scheme support

Depends on D111971

Comment 7

[Mark Striemer [:mstriemer]]

Attachment: Bug 1701691 - about:logins -moz-toolbar-prefers-color-scheme support

Depends on D111972

Comment 8

[Mark Striemer [:mstriemer]]

Attachment: Bug 1701691 - print modal -moz-toolbar-prefers-color-scheme support

Depends on D111973

Comment 9

[Mark Striemer [:mstriemer]]

Attachment: Bug 1701691 - pdfjs -moz-toolbar-prefers-color-scheme support

Depends on D111974

Comment 10

[Mark Striemer [:mstriemer]]

Attachment: Bug 1701691 - statuspanel -moz-toolbar-prefers-color-scheme support

Depends on D111975

Comment 11

[Mark Striemer [:mstriemer]]

Attachment: Bug 1701691 - about:protections -moz-toolbar-prefers-color-scheme support

Depends on D111976

Comment 12

[Mark Striemer [:mstriemer]]

Attachment: Bug 1701691 - webrtc indicator -moz-toolbar-prefers-color-scheme support

Depends on D111977

Comment 13

[Mark Striemer [:mstriemer]]

Attachment: Bug 1701691 - handle extension based themes for -moz-toolbar-prefers-color-scheme

Depends on D111486

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/79c1392f7c43
moz-toolbar-prefers-color-scheme for dark theme detection r=desktop-theme-reviewers,emilio,harry

Comment 15

[Natalia Csoregi [:nataliaCs]]

Backed out for failures on browser_toolbar_prefers_color_scheme.js

backout: https://hg.mozilla.org/integration/autoland/rev/48a99646f183abc34e8eeb695fcede5bcc9463d1

push: https://treeherder.mozilla.org/jobs?repo=autoland&selectedTaskRun=Chl6doGmSeCF0Amm7_iYUQ.0&revision=79c1392f7c4303028fce92d68d399af21bd75a27&group_state=expanded

tier 1 failure seen on the next push: https://treeherder.mozilla.org/jobs?repo=autoland&selectedTaskRun=EqOo_4CkQduiGAkQZyvnsg.0&revision=f27f2a126a3a95f160ded1dc2c5802e44e964f52&searchStr=windows%2C10%2Cx64%2Copt%2Cmochitests%2Ctest-windows10-64%2Fopt-mochitest-browser-chrome-e10s%2Cbc7

failure log: https://treeherder.mozilla.org/logviewer?job_id=336694077&repo=autoland&lineNumber=3100

[task 2021-04-15T19:01:38.396Z] 19:01:38 INFO - TEST-PASS | browser/components/extensions/test/browser/browser_toolbar_prefers_color_scheme.js | OS dark mode unchanged -
[task 2021-04-15T19:01:38.396Z] 19:01:38 INFO - Buffered messages finished
[task 2021-04-15T19:01:38.396Z] 19:01:38 INFO - TEST-UNEXPECTED-FAIL | browser/components/extensions/test/browser/browser_toolbar_prefers_color_scheme.js | toolbar query is light mode -
[task 2021-04-15T19:01:38.396Z] 19:01:38 INFO - Stack trace:
[task 2021-04-15T19:01:38.396Z] 19:01:38 INFO - chrome://mochikit/content/browser-test.js:test_ok:1334
[task 2021-04-15T19:01:38.396Z] 19:01:38 INFO - chrome://mochitests/content/browser/browser/components/extensions/test/browser/browser_toolbar_prefers_color_scheme.js:testThemeDeterminesToolbarQuery:47
[task 2021-04-15T19:01:38.396Z] 19:01:38 INFO - Leaving test bound testThemeDeterminesToolbarQuery
[task 2021-04-15T19:01:38.396Z] 19:01:38 INFO - GECKO(3437) | MEMORY STAT | vsize 3114MB | residentFast 444MB | heapAllocated 200MB
[task 2021-04-15T19:01:38.396Z] 19:01:38 INFO - TEST-OK | browser/components/extensions/test/browser/browser_toolbar_prefers_color_scheme.js | took 418ms

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1c9943dacbdb
moz-toolbar-prefers-color-scheme for dark theme detection r=desktop-theme-reviewers,emilio,harry

Comment 17

[Noemi Erli[:noemi_erli]]

Backed out changeset 1c9943dacbdb (Bug 1701691) for causing failures in browser_toolbar_prefers_color_scheme.js CLOSED TREE

Range: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&collapsedPushes=842382&resultStatus=success%2Ctestfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&fromchange=d26e6241a27381f7d94a055d1dc8297a9d7a7fc2&searchStr=os%2Cx%2C10.14%2Cwebrender%2Cdebug%2Cmochitests%2Ctest-macosx1014-64-qr%2Fdebug-mochitest-browser-chrome-e10s%2Cbc7&tochange=35d7939ec0892e4d041c82606bcff69a0d5f0f15

The job didn't run on the original push because of some build bustages from another bug.

Log: https://treeherder.mozilla.org/logviewer?job_id=336747500&repo=autoland&lineNumber=30454

Backout: https://hg.mozilla.org/integration/autoland/rev/163d8a588c39ed388181a2b202c5235f95167adf

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7e864fb91533
moz-toolbar-prefers-color-scheme for dark theme detection r=desktop-theme-reviewers,emilio,harry
https://hg.mozilla.org/integration/autoland/rev/86d38280fedc
common/global -moz-toolbar-prefers-color-scheme support r=desktop-theme-reviewers,harry
https://hg.mozilla.org/integration/autoland/rev/e05824608cb9
message-bar/infobar -moz-toolbar-prefers-color-scheme support r=jaws
https://hg.mozilla.org/integration/autoland/rev/4c299a07326b
about:newinstall -moz-toolbar-prefers-color-scheme support r=desktop-theme-reviewers,harry
https://hg.mozilla.org/integration/autoland/rev/07d036bff2a2
about:logins -moz-toolbar-prefers-color-scheme support r=sfoster
https://hg.mozilla.org/integration/autoland/rev/fa6845ddd370
print modal -moz-toolbar-prefers-color-scheme support r=sfoster
https://hg.mozilla.org/integration/autoland/rev/69ffe4edadc1
pdfjs -moz-toolbar-prefers-color-scheme support r=jaws
https://hg.mozilla.org/integration/autoland/rev/054f9a3d20b1
about:protections -moz-toolbar-prefers-color-scheme support r=jaws
https://hg.mozilla.org/integration/autoland/rev/5a498c95f727
webrtc indicator -moz-toolbar-prefers-color-scheme support r=desktop-theme-reviewers,harry

Comment 20

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/7e864fb91533
https://hg.mozilla.org/mozilla-central/rev/86d38280fedc
https://hg.mozilla.org/mozilla-central/rev/e05824608cb9
https://hg.mozilla.org/mozilla-central/rev/4c299a07326b
https://hg.mozilla.org/mozilla-central/rev/07d036bff2a2
https://hg.mozilla.org/mozilla-central/rev/fa6845ddd370
https://hg.mozilla.org/mozilla-central/rev/69ffe4edadc1
https://hg.mozilla.org/mozilla-central/rev/054f9a3d20b1
https://hg.mozilla.org/mozilla-central/rev/5a498c95f727

Comment 22

[Peter Magyari (Desktop QA)]

Verified the fix on MacOS 11, Windows 10 and Ubuntu 20.04 using Firefox Nightly 90.0a1 (20210419221626)

Comment 23

[Mark Striemer [:mstriemer]]

Updating the description, since this updated our common styling. This updates the in-content pages (about:preferences, about:addons, etc that use our common styling), infobars, alerts, pdfjs, print modal, and the webrtc indicator (maybe not a definitive list). In general, if it's Firefox UI and the theme is "dark" then that Firefox UI should now be dark as well, rather than following the OS.