Add color scheme simulation to the inspector
Categories
(DevTools :: Inspector, enhancement, P3)
Tracking
(firefox72 fixed)
Tracking | Status | |
---|---|---|
firefox72 | --- | fixed |
People
(Reporter: kohei, Assigned: gl, NeedInfo)
References
(Blocks 1 open bug)
Details
(Keywords: dev-doc-complete)
Attachments
(1 file, 1 obsolete file)
(deleted),
text/x-phabricator-request
|
Details |
While developing Dark Mode for Bugzilla, I noticed that Safari’s Web Inspector offered a Dark Mode toggle button along with the print media button, which has been added to Firefox too. It would be nice to have the Dark Mode emulator in Firefox DevTools.
Reporter | ||
Updated•6 years ago
|
Comment 1•6 years ago
|
||
Thanks for filing Kohei.
Here's the excerpt from Safari's site:
Web Inspector now includes a navigation bar button in the Elements tab to toggle dark or light mode, depending on your current overall system preference. This allows you to quickly test pages in both appearances without having to toggle the whole system appearance in System Preferences. The Styles sidebar updates to reflect the current matching rules, as well as any CSS color variables.
To try it out, you can do the following:
- open Safari
- open this page: https://bugzilla.mozilla.org/show_bug.cgi?id=1550804
- open the Safari devtools, the Elements tab
- select the <html> element
- click the little dark browser window in the toolbar
- notice how the page shifts to its dark mode, even though you didn't change the system preference
- also notice how the
:root
CSS rule in the Styles tab now shows the@media prefers-color-scheme
rule
Comment 3•5 years ago
|
||
I'm happy to help with the platform side if needed, just ni? me or something.
Comment 4•5 years ago
|
||
I've tried to add the button to the new rules view as well, but that's untested
since I couldn't make it work by toggling
devtools.inspector.new-rulesview.enabled
(it kept showing the old one even
after a restart).
The major missing part is the UI. There's no icon (which is a pity since there
are 4 different states: default, dark, light, no-preference).
Is there any chance that someone could take it from here? I'm unsure what the
best way to proceed to add the icon and such is.
Assignee | ||
Comment 5•5 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)
Created attachment 9083317 [details]
Bug 1550804 - Add color-scheme simulation button to devtools. r=nchevobbeI've tried to add the button to the new rules view as well, but that's untested
since I couldn't make it work by toggling
devtools.inspector.new-rulesview.enabled
(it kept showing the old one even
after a restart).The major missing part is the UI. There's no icon (which is a pity since there
are 4 different states: default, dark, light, no-preference).Is there any chance that someone could take it from here? I'm unsure what the
best way to proceed to add the icon and such is.
Added this comment on phab:
The new rules-view is shown in the far right sidebar (which has Layout, Computed, etc.). If you have the pref on, you should be able to see both rules view side-by-side.
I didn't see this comment earlier, but if you would like, I can also take over from here and make the changes I already left on phabricator. Just let me know what you would prefer.
Assignee | ||
Comment 6•5 years ago
|
||
I am also pinging Martin just to make sure of this work and to check it out.
Comment 7•5 years ago
|
||
Thanks for working on this! I started a mini-PRD suggesting the UX for this feature.
TL;DR: We should try to simplify it down to 2 states (default + opposite) and use a different icon (tbd).
Comment 8•5 years ago
|
||
Can we make this three states? If the default state is no-preference then there's no opposite state.
Comment 9•5 years ago
|
||
Thanks, will take it into account!
Reporter | ||
Comment 10•5 years ago
|
||
Safari’s implementation is just a toggle button. When the OS is in the Light mode, the button says Force Dark Appearance. When in the Dark mode, it says Force Light Appearance. It’s better than a tristate UI.
Comment 11•5 years ago
|
||
Problem is that Mac only has two states, but Windows / Android will have three in the near future.
Reporter | ||
Comment 12•5 years ago
|
||
I know prefers-color-scheme
accepts 3 values, but the current state is either dark or light even if no preference is given, so I’d like to see a simple toggle/inverting button.
Comment 13•5 years ago
|
||
Windows previews have a light mode that we want to honor, so it'll stop being the case soon.
Assignee | ||
Comment 16•5 years ago
|
||
Gonna work on getting this landed.
Assignee | ||
Updated•5 years ago
|
Assignee | ||
Updated•5 years ago
|
Assignee | ||
Comment 17•5 years ago
|
||
This adds a color scheme simulation toggle button in the rules view,
which will toggle between 4 different states: default, dark, light,
and no-preference.
This feature is currently hidden away under a preference:
devtools.inspector.color-scheme-simulation.enabled
The final UI/UX still needs to be figured out, however, this initial step is
to land the ability to prototype this feature.
Updated•5 years ago
|
Comment 18•5 years ago
|
||
Comment 19•5 years ago
|
||
Comment 20•5 years ago
|
||
Backed out changeset f3fee3ded743 (bug 1550804) for many devtools failures e.g. browser_markup_accessibility_focus_blur.js on a CLOSED TREE.
Backout link: https://hg.mozilla.org/integration/autoland/rev/f15206bb9e0210473db7855ed0dd56a2c7280c83
Log link: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=272817324&repo=autoland&lineNumber=1686
Log snippet:
sk 2019-10-24T18:11:10.895Z] 18:11:10 INFO - TEST-INFO | started process screentopng
[task 2019-10-24T18:11:11.144Z] 18:11:11 INFO - TEST-INFO | screentopng: exit 0
[task 2019-10-24T18:11:11.145Z] 18:11:11 INFO - Buffered messages logged at 18:09:40
[task 2019-10-24T18:11:11.145Z] 18:11:11 INFO - Entering test bound
[task 2019-10-24T18:11:11.146Z] 18:11:11 INFO - Adding a new tab with URL: data:text/html;charset=utf-8,<h1>Add node</h1>
[task 2019-10-24T18:11:11.146Z] 18:11:11 INFO - Buffered messages logged at 18:09:41
[task 2019-10-24T18:11:11.146Z] 18:11:11 INFO - Tab added and finished loading
[task 2019-10-24T18:11:11.147Z] 18:11:11 INFO - Opening the inspector
[task 2019-10-24T18:11:11.147Z] 18:11:11 INFO - Opening the toolbox
[task 2019-10-24T18:11:11.148Z] 18:11:11 INFO - Buffered messages logged at 18:09:42
[task 2019-10-24T18:11:11.148Z] 18:11:11 INFO - Console message: [JavaScript Error: "Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)." {file: "chrome://global/content/elements/panel.js" line: 62}]
[task 2019-10-24T18:11:11.148Z] 18:11:11 INFO - Buffered messages logged at 18:09:43
[task 2019-10-24T18:11:11.149Z] 18:11:11 INFO - Console message: [JavaScript Error: "Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)." {file: "chrome://global/content/elements/panel.js" line: 62}]
[task 2019-10-24T18:11:11.149Z] 18:11:11 INFO - Buffered messages finished
[task 2019-10-24T18:11:11.149Z] 18:11:11 INFO - TEST-UNEXPECTED-FAIL | devtools/client/inspector/test/browser_inspector_addNode_01.js | Test timed out -
[task 2019-10-24T18:17:20.901Z] 18:17:20 INFO - Buffered messages finished
[task 2019-10-24T18:17:20.902Z] 18:17:20 ERROR - TEST-UNEXPECTED-TIMEOUT | devtools/client/inspector/test/browser_inspector_addNode_01.js | application timed out after 370 seconds with no output
[task 2019-10-24T18:17:20.902Z] 18:17:20 ERROR - Force-terminating active process(es).
[task 2019-10-24T18:17:20.903Z] 18:17:20 INFO - Determining child pids from psutil...
[task 2019-10-24T18:17:20.908Z] 18:17:20 INFO - [1352, 1237, 1327, 1215, 1297]
[task 2019-10-24T18:17:20.908Z] 18:17:20 INFO - ==> process 1158 launched child process 1176
[task 2019-10-24T18:17:20.909Z] 18:17:20 INFO - ==> process 1158 launched child process 1215
[task 2019-10-24T18:17:20.909Z] 18:17:20 INFO - ==> process 1158 launched child process 1237
[task 2019-10-24T18:17:20.909Z] 18:17:20 INFO - ==> process 1158 launched child process 1297
[task 2019-10-24T18:17:20.910Z] 18:17:20 INFO - ==> process 1158 launched child process 1327
[task 2019-10-24T18:17:20.911Z] 18:17:20 INFO - ==> process 1158 launched child process 1352
[task 2019-10-24T18:17:20.912Z] 18:17:20 INFO - Found child pids: set([1352, 1327, 1297, 1237, 1176, 1215])
[task 2019-10-24T18:17:20.912Z] 18:17:20 INFO - Failed to get child procs
[task 2019-10-24T18:17:20.912Z] 18:17:20 INFO - Killing process: 1352
Updated•5 years ago
|
Assignee | ||
Comment 21•5 years ago
|
||
(In reply to Raul Gurzau (:RaulGurzau) from comment #20)
Backed out changeset f3fee3ded743 (bug 1550804) for many devtools failures e.g. browser_markup_accessibility_focus_blur.js on a CLOSED TREE.
Backout link: https://hg.mozilla.org/integration/autoland/rev/f15206bb9e0210473db7855ed0dd56a2c7280c83
Log link: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=272817324&repo=autoland&lineNumber=1686
Log snippet:
sk 2019-10-24T18:11:10.895Z] 18:11:10 INFO - TEST-INFO | started process screentopng
[task 2019-10-24T18:11:11.144Z] 18:11:11 INFO - TEST-INFO | screentopng: exit 0
[task 2019-10-24T18:11:11.145Z] 18:11:11 INFO - Buffered messages logged at 18:09:40
[task 2019-10-24T18:11:11.145Z] 18:11:11 INFO - Entering test bound
[task 2019-10-24T18:11:11.146Z] 18:11:11 INFO - Adding a new tab with URL: data:text/html;charset=utf-8,<h1>Add node</h1>
[task 2019-10-24T18:11:11.146Z] 18:11:11 INFO - Buffered messages logged at 18:09:41
[task 2019-10-24T18:11:11.146Z] 18:11:11 INFO - Tab added and finished loading
[task 2019-10-24T18:11:11.147Z] 18:11:11 INFO - Opening the inspector
[task 2019-10-24T18:11:11.147Z] 18:11:11 INFO - Opening the toolbox
[task 2019-10-24T18:11:11.148Z] 18:11:11 INFO - Buffered messages logged at 18:09:42
[task 2019-10-24T18:11:11.148Z] 18:11:11 INFO - Console message: [JavaScript Error: "Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)." {file: "chrome://global/content/elements/panel.js" line: 62}]
[task 2019-10-24T18:11:11.148Z] 18:11:11 INFO - Buffered messages logged at 18:09:43
[task 2019-10-24T18:11:11.149Z] 18:11:11 INFO - Console message: [JavaScript Error: "Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)." {file: "chrome://global/content/elements/panel.js" line: 62}]
[task 2019-10-24T18:11:11.149Z] 18:11:11 INFO - Buffered messages finished
[task 2019-10-24T18:11:11.149Z] 18:11:11 INFO - TEST-UNEXPECTED-FAIL | devtools/client/inspector/test/browser_inspector_addNode_01.js | Test timed out -
[task 2019-10-24T18:17:20.901Z] 18:17:20 INFO - Buffered messages finished
[task 2019-10-24T18:17:20.902Z] 18:17:20 ERROR - TEST-UNEXPECTED-TIMEOUT | devtools/client/inspector/test/browser_inspector_addNode_01.js | application timed out after 370 seconds with no output
[task 2019-10-24T18:17:20.902Z] 18:17:20 ERROR - Force-terminating active process(es).
[task 2019-10-24T18:17:20.903Z] 18:17:20 INFO - Determining child pids from psutil...
[task 2019-10-24T18:17:20.908Z] 18:17:20 INFO - [1352, 1237, 1327, 1215, 1297]
[task 2019-10-24T18:17:20.908Z] 18:17:20 INFO - ==> process 1158 launched child process 1176
[task 2019-10-24T18:17:20.909Z] 18:17:20 INFO - ==> process 1158 launched child process 1215
[task 2019-10-24T18:17:20.909Z] 18:17:20 INFO - ==> process 1158 launched child process 1237
[task 2019-10-24T18:17:20.909Z] 18:17:20 INFO - ==> process 1158 launched child process 1297
[task 2019-10-24T18:17:20.910Z] 18:17:20 INFO - ==> process 1158 launched child process 1327
[task 2019-10-24T18:17:20.911Z] 18:17:20 INFO - ==> process 1158 launched child process 1352
[task 2019-10-24T18:17:20.912Z] 18:17:20 INFO - Found child pids: set([1352, 1327, 1297, 1237, 1176, 1215])
[task 2019-10-24T18:17:20.912Z] 18:17:20 INFO - Failed to get child procs
[task 2019-10-24T18:17:20.912Z] 18:17:20 INFO - Killing process: 1352
This turned out to be a bad rebase where I missed fixing one of the conflicts.
Comment 22•5 years ago
|
||
Assignee | ||
Updated•5 years ago
|
Comment 23•5 years ago
|
||
Comment 24•5 years ago
|
||
Backed out changeset 5eb5f44dcf96 (bug 1550804) for failures at browser_parsable_css.js on a CLOSED TREE.
Backout link: https://hg.mozilla.org/integration/autoland/rev/aeb96d3934601c92f64dfe5bfc695d3ddc35df33
Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception&revision=5eb5f44dcf96cedbfeef132741fffc41dc329756&selectedJob=272851627
Log link: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=272851627&repo=autoland&lineNumber=1381
Log snippet:
[task 2019-10-24T21:48:30.827Z] 21:48:30 INFO - Ignored error "Unknown pseudo-class or pseudo-element ‘-moz-native-anonymous’. Ruleset ignored due to bad selector." on resource://devtools/server/actors/highlighters.css because of whitelist item {"sourceName":"/highlighters\.css$/i","errorMessage":"/Unknown pseudo-class.*moz-native-anonymous/i","isFromDevTools":true,"used":true}
[task 2019-10-24T21:48:30.828Z] 21:48:30 INFO - Ignored error "Unknown pseudo-class or pseudo-element ‘-moz-native-anonymous’. Ruleset ignored due to bad selector." on resource://devtools/server/actors/highlighters.css because of whitelist item {"sourceName":"/highlighters\.css$/i","errorMessage":"/Unknown pseudo-class.*moz-native-anonymous/i","isFromDevTools":true,"used":true}
[task 2019-10-24T21:48:30.828Z] 21:48:30 INFO - Ignored error "Unknown pseudo-class or pseudo-element ‘-moz-native-anonymous’. Ruleset ignored due to bad selector." on resource://devtools/server/actors/highlighters.css because of whitelist item {"sourceName":"/highlighters\.css$/i","errorMessage":"/Unknown pseudo-class.*moz-native-anonymous/i","isFromDevTools":true,"used":true}
[task 2019-10-24T21:48:30.828Z] 21:48:30 INFO - Ignored error "Unknown pseudo-class or pseudo-element ‘-moz-native-anonymous’. Ruleset ignored due to bad selector." on resource://devtools/server/actors/highlighters.css because of whitelist item {"sourceName":"/highlighters\.css$/i","errorMessage":"/Unknown pseudo-class.*moz-native-anonymous/i","isFromDevTools":true,"used":true}
[task 2019-10-24T21:48:30.828Z] 21:48:30 INFO - Buffered messages finished
[task 2019-10-24T21:48:30.830Z] 21:48:30 INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | Got error message for chrome://devtools/skin/rules.css: Unknown property ‘fill-color’. Declaration dropped. -
[task 2019-10-24T21:48:30.830Z] 21:48:30 INFO - Stack trace:
[task 2019-10-24T21:48:30.830Z] 21:48:30 INFO - chrome://mochikit/content/browser-test.js:test_ok:1297
[task 2019-10-24T21:48:30.830Z] 21:48:30 INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:messageIsCSSError:282
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllTheCSS:503
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1067
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1102
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - chrome://mochikit/content/browser-test.js:nextTest/<:930
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:805
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - Not taking screenshot here: see the one that was previously logged
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | All the styles (182) loaded without errors. - Got 1, expected 0
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - Stack trace:
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - chrome://mochikit/content/browser-test.js:test_is:1312
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllTheCSS:504
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1067
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1102
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - chrome://mochikit/content/browser-test.js:nextTest/<:930
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:805
[task 2019-10-24T21:48:30.831Z] 21:48:30 INFO - Leaving test bound checkAllTheCSS
Updated•5 years ago
|
Comment 25•5 years ago
|
||
Comment 27•5 years ago
|
||
bugherder |
Comment 28•5 years ago
|
||
I've documented it on the experimental features page.
What are the next steps here? Will the discussion about the UI happen in the UX GitHub repo?
Sebastian
Updated•5 years ago
|
Updated•5 years ago
|
Comment 29•5 years ago
|
||
Added info, screenshots and a new section to Examine and edit CSS
Comment 30•5 years ago
|
||
In Chrome 79 a function was added to the DevTools, which allows simulating prefers-color-scheme (and prefers-reduced-motion).
Chromes announcement of the feature
Maybe Chromes approach is of interest to this thread.
Comment 31•5 years ago
|
||
Need-info for the next steps for this. See comment 28.
Sebastian
Assignee | ||
Comment 32•5 years ago
|
||
(In reply to Sebastian Zartner [:sebo] from comment #28)
I've documented it on the experimental features page.
What are the next steps here? Will the discussion about the UI happen in the UX GitHub repo?
Sebastian
Hi Victoria,
Pinging you about next steps here or at least to get this on your radar since this is a feature that was implemented and hidden behind a pref. More details about what it does can be found in https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features#Color_scheme_simulation and below:
(In reply to Gabriel [:gl] (ΦωΦ) from comment #17)
Created attachment 9102757 [details]
Bug 1550804 - Add color scheme simulation to the inspector. r=pbroThis adds a color scheme simulation toggle button in the rules view,
which will toggle between 4 different states: default, dark, light,
and no-preference.This feature is currently hidden away under a preference:
devtools.inspector.color-scheme-simulation.enabledThe final UI/UX still needs to be figured out, however, this initial step is
to land the ability to prototype this feature.
Comment 33•5 years ago
|
||
I think the simulator should work even if privacy.resistFingerprinting
is set to true, right now it doesn't
Comment 34•5 years ago
|
||
Safari’s implementation is just a toggle button. When the OS is in the Light mode, the button says Force Dark Appearance. When in the Dark mode, it says Force Light Appearance. It’s better than a tristate UI.
I think that this behavior would be much more intuitive and desiderable, right now it is impossible to know which mode is actually enabled. According to me a toggle like the one used for print media simulation would be perfect.
I don't think that the way it currently works has any advantage, considering that its purpose is just to show the page in the opposite color scheme.
Comment 35•4 years ago
|
||
It seems the toggle doesn't survive a reload or following a link.
- Enable dark mode using the toggle
- Reload the page
What we get:
- dark mode is disabled
- button state looks like when dark mode is enabled
Worth opening a bug?
Comment 36•4 years ago
|
||
Why is this bug closed? IMHO it should be re-opened. Let alone, because devtools.inspector.color-scheme-simulation.enabled
is not enabled by default (Linux/Fedora/GNOME here, FF 83 here).
This is a very useful feature that should IMHO be shown by default. Also, somewhat related, it would be awesome if Bug 1547818 is finally solved, so also add-ons can have more influence on that setting (maybe also supporting developers).
Comment 37•4 years ago
|
||
(In reply to rugk from comment #36)
Why is this bug closed?
This bug is closed because it was tracking the experimental implementation of that feature. As far as I can see, there is no bug filed yet to enable it by default but there are still some open issues related to it. See the bugs listed under the 'Depends on' section at the top.
(In reply to Vincent Bernat from comment #35)
It seems the toggle doesn't survive a reload or following a link.
Worth opening a bug?
Yes because this one is closed.
Sebastian
Comment 38•4 years ago
|
||
Thanks for filling bug 1679408 for enabling this by default! Already followed… :)
Description
•