AprilSylph
AccessKit Disable GIFs: Pause ALL the GIFs!
Description
This applies AccessKit Disable GIFs to basically everything.
Consists of #1727 (see its description for technical details) plus an expanded list of element selectors and a few miscellaneous tweaks for functionality on newly enabled elements. One may simply consider this PR the canonical version of these changes; it's of course the meaningfully testable one.
Known elements that are not paused:
- Tumblrmart rainbow checkmark/lunar badge modal images (technical: can't position the label effectively; intentional: moon is invisible when paused)
- rainbow checkmark/lunar badge hover modals
- gifs in the post editor/post editor gif selector (intentional: you probably want to see what your post looks like)
- gifs in lightboxes (intentional)
- Tumblr TV modal images (intentional but somewhat technical: tumblr's layout relies on
sizes="100vw", which doesn't affect content-replaced images)
Supersedes #1682, #1706, and #1708.
Yes, as you may have guessed, this is pretty close in functionality to simply writing:
pageModifications.register(`img:not(${keyToCss('poster')})`, processGifs);
pageModifications.register('[style*="background-image:"]', processBackgroundGifs);
Like https://github.com/marcustyphoon/XKit-Rewritten/blob/77a3d6734c33373e9c0fafb37c677fcf963febcf/src/features/mute.js#L84-L94, it would be far fewer lines of code to use a blacklist than a whitelist. That would result in the feature potentially being active on a missed or just-released piece of site UI, however. For both of these features, that's probably fine in most cases, but it has some possibility to lead to user confusion on a deeper level than the feature not working until we test and approve it.
(That is: you can mute your own e.g. reblogged posts, making it appear as though a new non-blacklisted timeline is missing elements; sufficiently complex css can make paused gifs not have visible labels or hover-to-play functionality, making it appear as though a new non-blacklisted animated element is not animated. The likelihood of this happening is so small, but the moment it happens and I have to read a post in which a user blames Staff for the "site being broken" due to this I will throw my laptop into the ocean. So, you know, swings and roundabouts.)
Testing steps
Find an unpaused GIF in the Tumblr interface. Do it, I dare you.
No, but actually:
- Confirm that each type of animated element listed in the source code is paused and receives a size-appropriate and visible label, and becomes unpaused and labelless when hovered.
https://www.tumblr.com/dashboard/tumblr_tv cards apparently change their background image each time you navigate within them; React changes only the background-image style property, so our paused images go out of sync with the on-hover images/sometimes we don't pause an image because it wasn't originally animated.
- [x] fix this (or just don't process the Tumblr TV page)