feat(AccessKit): Re-implement download-GIF-on-hover feature

[marcustyphoon]

Description

Bit of an experiment. Kind of surprised this appears to (maybe?) work, though in writing up the technique it seems rather obvious in retrospect.

Implemented in #1853, the "Download paused GIFs: when hovered" feature of AccessKit Disable GIFs made use of a Tumblr layout with both a "poster" stationary image element and an animated image element. It overrode the poster to be visible and the animated image element to be display: none when the user was not hovering over the GIF, and because Tumblr sets loading="lazy" on the animated image*, the browser did not download it eagerly.

As noted in #2243, this doesn't work anymore, since Tumblr now uses a single image element, swapping the source out for a poster version in some circumstances (media autoplay disabled; image element offscreen—I don't know why the latter condition, but I digress). Disable GIFs still works, using its good old fashioned code path of rendering the GIF onto a canvas element to make a "poster".

This PR attempts to bring back the behavior by setting the animated image element to display: none when not hovered, as before, and by grabbing the poster source URL from the react data and feeding it to our canvas-making code. Note that:

• We probably only want to use this code path in lazy mode. Downloading a poster image is way cheaper than downloading an animated GIF, but if we're in eager mode we're downloading the animated GIF eagerly anyway, so we may as well use it. (Using this code in both modes does make the paused image appear faster if you turn throttling on, though.)
• Tumblr's new code (with media autoplay enabled) doesn't show the poster while the animated image is downloading, like the old one did (I assume this was one reason they switched; it saves bandwidth if you were going to download the animated source anyway). Thus, naively implementing this means that when you hover a paused image, it turns into a gradient while the animated image is downloading. .${canvasClass}${parentHovered}:not(:has(~ ${keyToCss('loader')} > ${keyToCss('knightRiderLoader')})) is a fix for this (showing the canvas during the load). Hopefully there's a more elegant solution to this.

Not currently working with media autoplay disabled (#2270 clicks the images when they're first processed, which downloads the animated versions; this seems like it will be annoying to fix).

Oh, also, I have no idea if "the last image in the posterImages array" is actually the right source to pick. Realistically, if we were confident about mirroring Tumblr's processing, "display: none all of Tumblr's elements, grab the paused and animated source values from react data, and make two of our own image elements" would be a quite elegant solution that doesn't care about the media autoplay setting at all. Am I confident about that? Well... no.

*unless you're in blog view; I don't know why

Screenshots

tba

Testing steps

tba