1734195 - DevTools highlighters should avoid flashing the screen when prefers-reduced-motion is on

Status: RESOLVED FIXED

(DevTools :: General, defect, P2)

Description

[Julian Descottes [:jdescottes]]

DevTools highlighters can cause very quick color flashes on the screen if they are applied on big elements. When prefers-reduced-motion is enabled we should try to use less intrusive visuals. Maybe draw borders only instead of filled rectangles, however this might be an issue when highlighting items which are bigger than the viewport?

Maybe very light stripes + borders could be a decent compromise.

Comment 1

[Julian Descottes [:jdescottes]]

Attachment: flashing_example.gif

(sorry for the watermark)
Just hover in the markup view. Depending on the page and the elements you hover the effect will probably not be as bad, but you get the idea.

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: Bug 1734195 - [devtools] use stroke instead of fill for main highlighters when prefers-reduced-motion is on

When prefers-reduced-motion is enabled, the most impacting highlighters can use stroke instead of fill.
This requires to join the paths on the JS side, otherwise the change is purely handled in CSS.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/74997b9cb4ba
[devtools] use stroke instead of fill for main highlighters when prefers-reduced-motion is on r=nchevobbe

Comment 5

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/74997b9cb4ba