Permalink
Show file tree
Hide file tree
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Web Inspector: Add emulation toggles for prefers-reduced-motion and p…
…refers-contrast https://bugs.webkit.org/show_bug.cgi?id=246882 Reviewed by Patrick Angle. This was previously reviewed in #5650 then reverted by f306cbb Adds controls in Web Inspector to override preferences for reduced motion and increased contrast for the inspected page. These correspond to CSS media features `prefers-reduced-motion: reduce | no-preference` and `prefers-contrast: more | no-preference`. The UI in Web Inspector starts off with preference values set to `System` meaning there is no override applied. A user can pick `On` or `Off` to force a value for the preference on the inspected page for the duration of the Web Inspector session. When a preference is overriden in Web Inspector, changes after the fact to corresponding settings in System Settings > Accessibility > Display have no effect on the inspected page until Web Inspector is closed or the preference values are returned to `System`. * LayoutTests/inspector/page/overrideUserPreference-expected.txt: Added. * LayoutTests/inspector/page/overrideUserPreference.html: Added. * Source/JavaScriptCore/inspector/protocol/Page.json: * Source/WebCore/inspector/InspectorInstrumentation.cpp: (WebCore::InspectorInstrumentation::accessibilitySettingsDidChangeImpl): * Source/WebCore/inspector/InspectorInstrumentation.h: (WebCore::InspectorInstrumentation::accessibilitySettingsDidChange): * Source/WebCore/inspector/agents/InspectorPageAgent.cpp: (WebCore::InspectorPageAgent::enable): (WebCore::InspectorPageAgent::disable): (WebCore::InspectorPageAgent::overrideUserPreference): (WebCore::InspectorPageAgent::overridePrefersReducedMotion): (WebCore::InspectorPageAgent::overridePrefersContrast): (WebCore::InspectorPageAgent::accessibilitySettingsDidChange): (WebCore::InspectorPageAgent::defaultUserPreferencesDidChange): * Source/WebCore/inspector/agents/InspectorPageAgent.h: * Source/WebCore/page/Page.cpp: (WebCore::Page::accessibilitySettingsDidChange): * Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js: * Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js: (WI.CSSManager): (WI.CSSManager.prototype.get overridenUserPreferences): (WI.CSSManager.prototype.get defaultUserPreferences): (WI.CSSManager.prototype.overrideUserPreference): (WI.CSSManager.prototype.defaultUserPreferencesDidChange): * Source/WebInspectorUI/UserInterface/Images/AppearanceOverride.svg: Added. * Source/WebInspectorUI/UserInterface/Main.html: * Source/WebInspectorUI/UserInterface/Protocol/PageObserver.js: (WI.PageObserver.prototype.defaultUserPreferencesDidChange): * Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js: (WI.DOMTreeContentView): (WI.DOMTreeContentView.prototype.get navigationItems): (WI.DOMTreeContentView.prototype._handleOverrideUserPreferencesButtonClicked): (WI.DOMTreeContentView.prototype._overridenUserPreferencesDidChange): (WI.DOMTreeContentView.prototype.didDismissPopover): * Source/WebInspectorUI/UserInterface/Views/OverrideUserPreferencesPopover.css: Added. (.popover .user-preferences-content): (.popover .user-preferences-content > h1): (.popover .user-preferences-content > label): (.popover .user-preferences-content > select): * Source/WebInspectorUI/UserInterface/Views/OverrideUserPreferencesPopover.js: Added. (WI.OverrideUserPreferencesPopover): (WI.OverrideUserPreferencesPopover.prototype.show): (WI.OverrideUserPreferencesPopover.prototype.dismiss): (WI.OverrideUserPreferencesPopover.prototype._presentOverTargetElement): (WI.OverrideUserPreferencesPopover.prototype._createSelectElement): (WI.OverrideUserPreferencesPopover.prototype._createContentElement): (WI.OverrideUserPreferencesPopover.prototype._userPreferenceValueLabel): (WI.OverrideUserPreferencesPopover.prototype._defaultUserPreferencesDidChange): Canonical link: https://commits.webkit.org/257383@main
- Loading branch information
1 parent
0fdf996
commit 808a9c220b48e53a2a49a93b2560d33eb481d1bc
Showing
16 changed files
with
611 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| Tests for the Page.overrideUserPreference command. | ||
|
|
||
|
|
||
| == Running test suite: Page.overrideUserPreference | ||
| -- Running test case: Page.overrideUserPreference.PrefersReducedMotion | ||
| PASS: (prefers-reduced-motion) media query does not match. | ||
| PASS: --test-prefers-reduced-motion: no-preference | ||
| Overriding PrefersReducedMotion value to Reduce | ||
| PASS: (prefers-reduced-motion) media query matches. | ||
| PASS: --test-prefers-reduced-motion: reduce | ||
| Overriding PrefersReducedMotion value to NoPreference | ||
| PASS: (prefers-reduced-motion) media query does not match. | ||
| PASS: --test-prefers-reduced-motion: no-preference | ||
| Removing PrefersReducedMotion override | ||
| PASS: (prefers-reduced-motion) media query does not match. | ||
| PASS: --test-prefers-reduced-motion: no-preference | ||
|
|
||
| -- Running test case: Page.overrideUserPreference.PrefersContrast | ||
| PASS: (prefers-contrast) media query does not match. | ||
| PASS: --test-prefers-contrast: no-preference | ||
| Overriding PrefersContrast value to More | ||
| PASS: (prefers-contrast) media query matches. | ||
| PASS: --test-prefers-contrast: more | ||
| Overriding PrefersContrast value to NoPreference | ||
| PASS: (prefers-contrast) media query does not match. | ||
| PASS: --test-prefers-contrast: no-preference | ||
| Removing PrefersContrast override | ||
| PASS: (prefers-contrast) media query does not match. | ||
| PASS: --test-prefers-contrast: no-preference | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> | ||
| <script> | ||
|
|
||
| function test() | ||
| { | ||
| async function testOverridePreference({cssPropertyName, mediaQuery, testCases}) | ||
| { | ||
| for (let {preferenceName, preferenceValue, expectedMatchMedia, expectedValue} of testCases) { | ||
| if (preferenceName && preferenceValue) { | ||
| InspectorTest.log(`Overriding ${preferenceName} value to ${preferenceValue}`); | ||
| await PageAgent.overrideUserPreference(preferenceName, preferenceValue); | ||
| } else if (preferenceName && !preferenceValue) { | ||
| InspectorTest.log(`Removing ${preferenceName} override`); | ||
| await PageAgent.overrideUserPreference(preferenceName); | ||
| } | ||
|
|
||
| let matches = await InspectorTest.evaluateInPage(`window.matchMedia("${mediaQuery}").matches`); | ||
| let value = await InspectorTest.evaluateInPage(`window.getComputedStyle(document.body).getPropertyValue("${cssPropertyName}")`); | ||
|
|
||
| if (expectedMatchMedia) | ||
| InspectorTest.expectTrue(matches, `${mediaQuery} media query matches.`); | ||
| else | ||
| InspectorTest.expectFalse(matches, `${mediaQuery} media query does not match.`); | ||
|
|
||
| InspectorTest.expectEqual(value, expectedValue, `${cssPropertyName}: ${expectedValue}`); | ||
| } | ||
| } | ||
|
|
||
| let suite = InspectorTest.createAsyncSuite("Page.overrideUserPreference"); | ||
|
|
||
| suite.addTestCase({ | ||
| name: "Page.overrideUserPreference.PrefersReducedMotion", | ||
| description: "", | ||
| async test() { | ||
| let cssPropertyName = "--test-prefers-reduced-motion"; | ||
| let mediaQuery = "(prefers-reduced-motion)"; | ||
| let testCases = [ | ||
| { | ||
| expectedValue: "no-preference", | ||
| expectedMatchMedia: false, | ||
| }, | ||
| { | ||
| preferenceName: InspectorBackend.Enum.Page.UserPreferenceName.PrefersReducedMotion, | ||
| preferenceValue: InspectorBackend.Enum.Page.UserPreferenceValue.Reduce, | ||
| expectedValue: "reduce", | ||
| expectedMatchMedia: true, | ||
| }, | ||
| { | ||
| preferenceName: InspectorBackend.Enum.Page.UserPreferenceName.PrefersReducedMotion, | ||
| preferenceValue: InspectorBackend.Enum.Page.UserPreferenceValue.NoPreference, | ||
| expectedValue: "no-preference", | ||
| expectedMatchMedia: false, | ||
| }, | ||
| { | ||
| preferenceName: InspectorBackend.Enum.Page.UserPreferenceName.PrefersReducedMotion, | ||
| preferenceValue: null, | ||
| expectedValue: "no-preference", | ||
| expectedMatchMedia: false, | ||
| }, | ||
| ]; | ||
|
|
||
| await testOverridePreference({cssPropertyName, mediaQuery, testCases}); | ||
| }, | ||
| }); | ||
|
|
||
| suite.addTestCase({ | ||
| name: "Page.overrideUserPreference.PrefersContrast", | ||
| description: "", | ||
| async test() { | ||
| let cssPropertyName = "--test-prefers-contrast"; | ||
| let mediaQuery = "(prefers-contrast)"; | ||
| let testCases = [ | ||
| { | ||
| expectedValue: "no-preference", | ||
| expectedMatchMedia: false, | ||
| }, | ||
| { | ||
| preferenceName: InspectorBackend.Enum.Page.UserPreferenceName.PrefersContrast, | ||
| preferenceValue: InspectorBackend.Enum.Page.UserPreferenceValue.More, | ||
| expectedValue: "more", | ||
| expectedMatchMedia: true, | ||
| }, | ||
| { | ||
| preferenceName: InspectorBackend.Enum.Page.UserPreferenceName.PrefersContrast, | ||
| preferenceValue: InspectorBackend.Enum.Page.UserPreferenceValue.NoPreference, | ||
| expectedValue: "no-preference", | ||
| expectedMatchMedia: false, | ||
| }, | ||
| { | ||
| preferenceName: InspectorBackend.Enum.Page.UserPreferenceName.PrefersContrast, | ||
| preferenceValue: null, | ||
| expectedValue: "no-preference", | ||
| expectedMatchMedia: false, | ||
| }, | ||
| ]; | ||
|
|
||
| await testOverridePreference({cssPropertyName, mediaQuery, testCases}); | ||
| }, | ||
| }); | ||
|
|
||
| suite.runTestCasesAndFinish(); | ||
| } | ||
|
|
||
| </script> | ||
| </head> | ||
| <body onload="runTest()"> | ||
| <p>Tests for the Page.overrideUserPreference command.</p> | ||
|
|
||
| <style> | ||
| body { | ||
| --test-prefers-reduced-motion: no-preference; | ||
| --test-prefers-contrast: no-preference; | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion) { | ||
| body { | ||
| --test-prefers-reduced-motion: reduce; | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-contrast) { | ||
| body { | ||
| --test-prefers-contrast: more; | ||
| } | ||
| } | ||
| </style> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.