Closed Bug 1701691 Opened 8 months ago Closed 8 months ago

Match more browser components to the browser theme

Categories

(Firefox :: Theme, enhancement, P1)

enhancement

Tracking

()

VERIFIED FIXED
89 Branch
Tracking Status
firefox89 --- verified

People

(Reporter: mstriemer, Assigned: mstriemer)

References

(Blocks 1 open bug)

Details

(Whiteboard: [proton-infobars])

Attachments

(11 files, 1 obsolete file)

48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review

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

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

Priority: -- → P2
Whiteboard: [proton-infobars] → [proton-infobars][priority:2a]
Assignee: nobody → bigiri

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.

Attachment #9214516 - Attachment description: WIP: Bug 1701691 - WIP - Change infobars CSS to match browser theme instead of OS theme r=mstriemer,dao → Bug 1701691 - Change infobars CSS to match browser theme instead of OS theme r=mstriemer,dao
Assignee: bigiri → mstriemer
Status: NEW → ASSIGNED

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

Promoted to P1 after discussions in Slack surrounding MR1 triage.

Priority: P2 → P1
Whiteboard: [proton-infobars][priority:2a] → [proton-infobars]
Attachment #9214779 - Attachment description: WIP: Bug 1701691 - Use theme dark preference for in-content pages, chrome elements → WIP: Bug 1701691 - -moz-toolbar-prefers-color-scheme for dark theme detection
Attachment #9214779 - Attachment description: WIP: Bug 1701691 - -moz-toolbar-prefers-color-scheme for dark theme detection → Bug 1701691 - -moz-toolbar-prefers-color-scheme for dark theme detection
Attachment #9215663 - Attachment description: WIP: Bug 1701691 - common/global -moz-toolbar-prefers-color-scheme support → Bug 1701691 - common/global -moz-toolbar-prefers-color-scheme support
Attachment #9215664 - Attachment description: WIP: Bug 1701691 - message-bar/infobar -moz-toolbar-prefers-color-scheme support → Bug 1701691 - message-bar/infobar -moz-toolbar-prefers-color-scheme support
Attachment #9215665 - Attachment description: WIP: Bug 1701691 - about:newinstall -moz-toolbar-prefers-color-scheme support → Bug 1701691 - about:newinstall -moz-toolbar-prefers-color-scheme support
Attachment #9215666 - Attachment description: WIP: Bug 1701691 - about:logins -moz-toolbar-prefers-color-scheme support → Bug 1701691 - about:logins -moz-toolbar-prefers-color-scheme support
Attachment #9215667 - Attachment description: WIP: Bug 1701691 - print modal -moz-toolbar-prefers-color-scheme support → Bug 1701691 - print modal -moz-toolbar-prefers-color-scheme support
Attachment #9215668 - Attachment description: WIP: Bug 1701691 - pdfjs -moz-toolbar-prefers-color-scheme support → Bug 1701691 - pdfjs -moz-toolbar-prefers-color-scheme support
Attachment #9215669 - Attachment description: WIP: Bug 1701691 - statuspanel -moz-toolbar-prefers-color-scheme support → Bug 1701691 - statuspanel -moz-toolbar-prefers-color-scheme support
Attachment #9215670 - Attachment description: WIP: Bug 1701691 - about:protections -moz-toolbar-prefers-color-scheme support → Bug 1701691 - about:protections -moz-toolbar-prefers-color-scheme support
Attachment #9215671 - Attachment description: WIP: Bug 1701691 - webrtc indicator -moz-toolbar-prefers-color-scheme support → Bug 1701691 - webrtc indicator -moz-toolbar-prefers-color-scheme support
Pushed by mstriemer@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/79c1392f7c43
moz-toolbar-prefers-color-scheme for dark theme detection r=desktop-theme-reviewers,emilio,harry

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

Flags: needinfo?(mstriemer)
See Also: → 1705511
Pushed by mstriemer@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/1c9943dacbdb
moz-toolbar-prefers-color-scheme for dark theme detection r=desktop-theme-reviewers,emilio,harry
Blocks: 1529323
See Also: → 1705133
Duplicate of this bug: 1703632
Attachment #9215800 - Attachment is obsolete: true
Flags: needinfo?(mstriemer)
Pushed by mstriemer@mozilla.com:
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
Duplicate of this bug: 1588548

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

Status: RESOLVED → VERIFIED

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.

Component: Messaging System → Theme
Summary: Infobars light/dark theme should match theme, not OS → Match more browser components to the browser theme
See Also: → 1704602
You need to log in before you can comment on or make changes to this bug.