Closed Bug 1550804 Opened 6 years ago Closed 5 years ago

Add color scheme simulation to the inspector

Categories

(DevTools :: Inspector, enhancement, P3)

Product:
DevTools
Component:
Inspector
Type:
enhancement

Tracking

(firefox72 fixed)

Status:
RESOLVED FIXED
Milestone:
Firefox 72
Tracking Flags:
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)

Bug 1550804 - Add color scheme simulation to the inspector. r=pbro
(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.

Depends on: 1494034

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
Priority: -- → P3

I'm happy to help with the platform side if needed, just ni? me or something.

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.

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

Created attachment 9083317 [details]
Bug 1550804 - Add color-scheme simulation button to devtools. r=nchevobbe

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.

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.

I am also pinging Martin just to make sure of this work and to check it out.

Flags: needinfo?(mbalfanz)

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).

Flags: needinfo?(mbalfanz)

Can we make this three states? If the default state is no-preference then there's no opposite state.

Thanks, will take it into account!

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.

Problem is that Mac only has two states, but Windows / Android will have three in the near future.

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.

Windows previews have a light mode that we want to honor, so it'll stop being the case soon.

[ignore text]

Blocks: 1137699

Gonna work on getting this landed.

Assignee: nobody → gl
Status: NEW → ASSIGNED
Keywords: dev-doc-needed

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.

Attachment #9083317 - Attachment is obsolete: true
Depends on: 1591120
Pushed by gluong@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/f3fee3ded743 Add color scheme simulation to the inspector. r=pbro
Backout by rgurzau@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/f15206bb9e02 Backed out changeset f3fee3ded743 for many devtools failures e.g. browser_markup_accessibility_focus_blur.js on a CLOSED TREE.

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

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception&searchStr=devtools&revision=f3fee3ded743561f3d60d7cc2c60f2e90ab75bc1&selectedJob=272817324

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

Flags: needinfo?(gl)
Attachment #9102757 - Attachment description: Bug 1550804 - Add color scheme simulation to the inspector. r=rcaliman,pbro → Bug 1550804 - Add color scheme simulation to the inspector. r=pbro

(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

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception&searchStr=devtools&revision=f3fee3ded743561f3d60d7cc2c60f2e90ab75bc1&selectedJob=272817324

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.

Pushed by gluong@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/5eb5f44dcf96 Add color scheme simulation to the inspector. r=pbro
Flags: needinfo?(gl)
Summary: Add a way to emulate Dark Mode from DevTools → Add color scheme simulation to the inspector
Backout by rgurzau@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/aeb96d393460 Backed out changeset 5eb5f44dcf96 for failures at browser_parsable_css.js on a CLOSED TREE.

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

Flags: needinfo?(gl)
Pushed by gluong@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/f3e2042c2deb Add color scheme simulation to the inspector. r=pbro

Fixed and relanded.

Flags: needinfo?(gl)

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

Status: ASSIGNED → RESOLVED
Closed: 5 years ago
status-firefox72: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 72

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

Depends on: 1592284
QA Whiteboard: [qa-72b-p2]

Added info, screenshots and a new section to Examine and edit CSS

Depends on: 1606486

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.

Need-info for the next steps for this. See comment 28.

Sebastian

Flags: needinfo?(gl)

(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=pbro

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.

Flags: needinfo?(gl) → needinfo?(victoria)

I think the simulator should work even if privacy.resistFingerprinting is set to true, right now it doesn't

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.

It seems the toggle doesn't survive a reload or following a link.

  1. Enable dark mode using the toggle
  2. Reload the page

What we get:

  • dark mode is disabled
  • button state looks like when dark mode is enabled

Worth opening a bug?

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).

(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

Depends on: 1678945
Depends on: 1678949

Thanks for filling bug 1679408 for enabling this by default! Already followed… :)

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: