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

LayoutTests/TestExpectations

@@ -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 ]

LayoutTests/inspector/css/overrideUserPreferenceMatchedStyles-expected.txt

@@ -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
+

LayoutTests/inspector/css/overrideUserPreferenceMatchedStyles.html

@@ -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>

LayoutTests/inspector/page/overrideUserPreference-expected.txt

@@ -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
+