Skip to content
Permalink
Browse files
Web Inspector: Relocate toggle for media feature prefers-color-scheme…
… / appearance

https://bugs.webkit.org/show_bug.cgi?id=248393

Reviewed by Patrick Angle.

Adds a new way to override the color scheme user preference
for the inspected page.

Replaces the mechanism that used `Page.setForcedAppearance()` with
`Page.overrideUserPreference()`  which takes a new property/value pair:
`PrefersColorScheme: Light | Dark`.

The `Page.defaultUserPreferencesDidChange` event payload is augmented with
the default system value of the color scheme preference. The event is now
also dispatched whenever the default system color scheme changes.
This replaces the `Page.defaultAppearanceDidChange` event.

The new UI lives within the User Preferences Overrides popover implemented in 257383@main.
It supports backwards compatibility with older backends:
- the old `Page.defaultAppearanceDidChange` event payload is mapped to
`WI.CSSManager._defaultUserPreferences[PrefersColorScheme]`;
- the action to set the override invokes `Page.setForcedAppearance()` where available.

* LayoutTests/inspector/css/force-page-appearance-expected.txt: Removed.
* LayoutTests/inspector/css/force-page-appearance.html: Removed.
* LayoutTests/inspector/css/overrideUserPreferenceMatchedStyles-expected.txt: Added.
* LayoutTests/inspector/css/overrideUserPreferenceMatchedStyles.html: Added.

Replaces the old test which used the `Page.setForcedAppearance()` call
with a new test that exercises `Page.overrideUserPreference()` and
checks that the expected node styles match whenever the color scheme override is in force.

* LayoutTests/inspector/page/overrideUserPreference-expected.txt:
* LayoutTests/inspector/page/overrideUserPreference.html:
* Source/JavaScriptCore/inspector/protocol/Page.json:
* Source/WebCore/inspector/agents/InspectorPageAgent.cpp:
(WebCore::InspectorPageAgent::enable):
(WebCore::InspectorPageAgent::disable):
(WebCore::InspectorPageAgent::overrideUserPreference):
(WebCore::InspectorPageAgent::overridePrefersColorScheme):
(WebCore::InspectorPageAgent::defaultUserPreferencesDidChange):
(WebCore::InspectorPageAgent::defaultAppearanceDidChange):
(WebCore::InspectorPageAgent::setForcedAppearance): Deleted.
* Source/WebCore/inspector/agents/InspectorPageAgent.h:
* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:
* Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js:
(WI.CSSManager):
(WI.CSSManager.prototype.get defaultUserPreferences):
(WI.CSSManager.prototype.set defaultUserPreferences):
(WI.CSSManager.prototype.get overridenUserPreferences):
(WI.CSSManager.prototype.setForcedAppearance):
(WI.CSSManager.prototype.overrideUserPreference):
(WI.CSSManager.prototype.defaultAppearanceDidChange):
(WI.CSSManager.prototype._mainResourceDidChange):
(WI.CSSManager.prototype.get defaultAppearance): Deleted.
(WI.CSSManager.prototype.get forcedAppearance): Deleted.
(WI.CSSManager.prototype.set forcedAppearance): Deleted.
(WI.CSSManager.prototype.canForceAppearance): Deleted.
* Source/WebInspectorUI/UserInterface/Images/Appearance.svg: Removed.
* Source/WebInspectorUI/UserInterface/Protocol/PageObserver.js:
* Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js:
(WI.DOMTreeContentView):
(WI.DOMTreeContentView.prototype.get navigationItems):
(WI.DOMTreeContentView.prototype.closed):
(WI.DOMTreeContentView.prototype._defaultAppearanceDidChange): Deleted.
(WI.DOMTreeContentView.prototype._toggleAppearance): Deleted.
* Source/WebInspectorUI/UserInterface/Views/OverrideUserPreferencesPopover.css:
(.popover .user-preferences-content > h1:not(:first-of-type)):
* Source/WebInspectorUI/UserInterface/Views/OverrideUserPreferencesPopover.js:
(WI.OverrideUserPreferencesPopover.prototype._createContentElement):
(WI.OverrideUserPreferencesPopover.prototype._userPreferenceValueLabel):

Canonical link: https://commits.webkit.org/257744@main
  • Loading branch information
rcaliman-apple committed Dec 12, 2022
1 parent 65a3297 commit 963f144d283f1da6959d15bbd102d766a47f7375
Show file tree
Hide file tree
Showing 21 changed files with 319 additions and 389 deletions.
@@ -134,7 +134,7 @@ fast/forms/search/search-results-hidden-crash.html [ Skip ]
# Only applicable on platforms with dark mode support
css-dark-mode [ Skip ]
fast/css/apple-system-control-colors.html [ Skip ]
inspector/css/force-page-appearance.html [ Skip ]
inspector/css/overrideUserPreferenceMatchedStyles.html [ Skip ]
editing/pasteboard/paste-dark-mode-color-filtered.html [ Skip ]
fast/forms/number/number-dark-appearance.html [ Skip ]
fast/loader/plain-text-document-dark-mode.html [ Skip ]

This file was deleted.

This file was deleted.

@@ -0,0 +1,19 @@
Tests for matched styles when forcing media features with CSSManager.overrideUserPreference().


== Running test suite: CSSManager.overrideUserPreference
-- Running test case: Override PrefersReducedMotion: Reduce
Override preference PrefersReducedMotion to Reduce
PASS: --test-prefers-reduced-motion value matches reduce
Clear override for PrefersReducedMotion

-- Running test case: Override PrefersContrast: More
Override preference PrefersContrast to More
PASS: --test-prefers-contrast value matches more
Clear override for PrefersContrast

-- Running test case: PrefersColorScheme.Dark
Override preference PrefersColorScheme to Dark
PASS: --test-prefers-color-scheme value matches dark
Clear override for PrefersColorScheme

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>

function test()
{
let suite = InspectorTest.createAsyncSuite("CSSManager.overrideUserPreference");

function addTestCase({name, description, propertyName, expectedValue, preferenceName, preferenceValue})
{
suite.addTestCase({
name,
description,
async test() {
let documentNode = await WI.domManager.requestDocument();
let nodeId = await documentNode.querySelector("body");
let domNode = await WI.domManager.nodeForId(nodeId);
let domNodeStyles = WI.cssManager.stylesForNode(domNode);

InspectorTest.log(`Override preference ${preferenceName} to ${preferenceValue}`);
WI.cssManager.overrideUserPreference(preferenceName, preferenceValue);
await WI.cssManager.awaitEvent(WI.CSSManager.Event.OverridenUserPreferencesDidChange);
await domNodeStyles.refreshIfNeeded();

let cssProperty = domNodeStyles.computedStyle.enabledProperties.find((cssProperty) => cssProperty.name === propertyName);
InspectorTest.assert(cssProperty, `Found CSS property with name '${propertyName}'.`);
InspectorTest.expectEqual(cssProperty.value, expectedValue, `${propertyName} value matches ${expectedValue}`);

InspectorTest.log(`Clear override for ${preferenceName}`);
WI.cssManager.overrideUserPreference(preferenceName);
await WI.cssManager.awaitEvent(WI.CSSManager.Event.OverridenUserPreferencesDidChange);
},
});
}

addTestCase({
name: "Override PrefersReducedMotion: Reduce",
description: "Check that matched styles respect prefers reduced motion override.",
preferenceName: InspectorBackend.Enum.Page.UserPreferenceName.PrefersReducedMotion,
preferenceValue: InspectorBackend.Enum.Page.UserPreferenceValue.Reduce,
propertyName: "--test-prefers-reduced-motion",
expectedValue: "reduce",
});

addTestCase({
name: "Override PrefersContrast: More",
description: "Check that matched styles respect prefers contrast override.",
preferenceName: InspectorBackend.Enum.Page.UserPreferenceName.PrefersContrast,
preferenceValue: InspectorBackend.Enum.Page.UserPreferenceValue.More,
propertyName: "--test-prefers-contrast",
expectedValue: "more",
});

addTestCase({
name: "PrefersColorScheme.Dark",
description: "Check that matched styles respect color scheme overriden to dark.",
preferenceName: InspectorBackend.Enum.Page.UserPreferenceName.PrefersColorScheme,
preferenceValue: InspectorBackend.Enum.Page.UserPreferenceValue.Dark,
propertyName: "--test-prefers-color-scheme",
expectedValue: "dark",
});

suite.runTestCasesAndFinish();
}

</script>
</head>
<body onload="runTest()">
<p>Tests for matched styles when forcing media features with CSSManager.overrideUserPreference().</p>

<style>
body {
--test-prefers-reduced-motion: no-preference;
--test-prefers-contrast: no-preference;
--test-prefers-color-scheme: light;
}

@media (prefers-reduced-motion) {
body {
--test-prefers-reduced-motion: reduce;
}
}

@media (prefers-contrast) {
body {
--test-prefers-contrast: more;
}
}

@media (prefers-color-scheme: dark) {
body {
--test-prefers-color-scheme: dark;
}
}
</style>
</body>
</html>
@@ -28,3 +28,16 @@ Removing PrefersContrast override
PASS: (prefers-contrast) media query does not match.
PASS: --test-prefers-contrast: no-preference

-- Running test case: Page.overrideUserPreference.PrefersColorScheme
PASS: (prefers-color-scheme: dark) media query does not match.
PASS: --test-prefers-color-scheme: light
Overriding PrefersColorScheme value to Dark
PASS: (prefers-color-scheme: dark) media query matches.
PASS: --test-prefers-color-scheme: dark
Overriding PrefersColorScheme value to Light
PASS: (prefers-color-scheme: dark) media query does not match.
PASS: --test-prefers-color-scheme: light
Removing PrefersColorScheme override
PASS: (prefers-color-scheme: dark) media query does not match.
PASS: --test-prefers-color-scheme: light

0 comments on commit 963f144

Please sign in to comment.