1600358 - Inspector cannot disable site css on front page of Internet Archive.

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[MarjaE]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:56.0) Gecko/20100101 Firefox/56.0 Waterfox/56.3

Steps to reproduce:

(Tested in Firefox 70)

The Internet Archive sometimes uses a carousel on their front page. This can hurt, this can make it hard to see anything and navigate the page, and can trigger migraines.

I tried to use the inspector to identify and disable the gorram pain-css.

Actual results:

I was unable to do so.

In FF 70 (1) the inspector itself is hard to read or navigate, (2) the list of objects keeps pain-flashing, since it's constantly updating the positions of pain-movng pain-objects, (3) the checkboxes don't all work, (4) nothing seems to stop the gorram animation.

Expected results:

The inspector should work.

The inspector shouldn't fire blinding updates.

The inspector should visually distinguish check-boxes which users can uncheck to protect themselves from ones users can't uncheck.

And Firefox should include an accessible way to disable the pain-animation which can make the web inaccessible!

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Patrick Brosset <:pbro>]

Hi MarjaE, thanks for filing. Would you mind providing a URL where the carousel can be seen? https://archive.org/ does not seem to have one when I open it locally.

Comment 3

[MarjaE]

https://web.archive.org/

Comment 4

[Patrick Brosset <:pbro>]

Thank you. The only thing that would stop the animation is pausing the JavaScript execution. This animation is driven by JavaScript code, so the inspector tool won't be of much help unfortunately. You could potentially go to the debugger and hit the pause button. That should pause JavaScript execution at the next statement and will pause the animation. Now, there are 2 drawbacks to this:

1. when the debugger is paused, it displays an overlay on the entire page to tell users that execution is paused. You can however turn this feature off by going to about:config and turning devtools.debugger.features.overlay to false.
2. pausing JavaScript will pause all of the code that runs in the page's process. So if there's any other feature in that page that uses JS, it won't work anymore. If all you want to do on that page is click a link though, or read text, etc. then that will continue to work fine.

The other thing you mentioned is that the DOM elements that are animated keep on paint flashing inside the inspector panel. This is indeed a feature that is supposed to draw users' attention to those nodes so they can see that some elements are being mutated.
The code for this feature is here: https://searchfox.org/mozilla-central/rev/04d8e7629354bab9e6a285183e763410860c5006/devtools/client/inspector/markup/views/markup-container.js#667-684

Would it help if we added a setting that removed the rapid yellow flashing? (we would still want to show the new attribute values in the DOM tree, but removing the yellow flashing sounds like something we could/should do, in fact, we could make that dependent on the prefers-reduced-motion media feature).

Comment 5

[MarjaE]

I also had trouble with the position numbers flashing because they're constantly changing.