feat(AccessKit Disable GIFs): Pause "background" gifs instead of blanking them

[marcustyphoon]

Description

We currently have a bit of workaround behavior where AccessKit "pauses" a small number of GIFs in the Tumblr UI by making them a solid color when they're not hovered. This occurs when Tumblr sets the background-image CSS property to a value that contains an animated image, which our code doesn't know how to freeze.

This correctly pauses those GIFs. The technique used is to parse the background-image property string, extract the image URL, fetch the URL, create a canvas element containing its first frame, then create a blob URL containing the paused image and replace the image URL in the property string with this new paused image URL when the element is not hovered. This preserves the rest of the property string, so things like gradients that are added to the animated version will also be added to the non-animated version.

It's a bit of a gnarly-looking regex, but I didn't find a native way to parse these things or anything. Any ideas to improve that?

Notably, this may be a small memory leak for each unique image that is processed in this way. Blob URLs can be revoked when they are no longer needed, but it is impractical to track when a paused element that references one is garbage collected (I did try; weakrefs are fun). I think for this PR this is probably not an issue; the kinds of UI elements affected by this PR are limited in number and algorithmic/don't change a lot. I have tested versions of this code that make a blob URL for every image in every post and didn't observe crashing or memory use that seemed especially out of the ordinary, but I obviously want to be cautious about this because we know some users use the same Tumblr tabs for extremely large amounts of time. Be aware that this may also be a complete nonissue; it seems to me that Chrome stores (most?) blobs on the file system rather than in-memory, though I couldn't figure out for sure if Firefox also does so.

Anyway, this also adds the communities browse page tiles to the list of paused GIFs; I could have added them earlier but it looked pretty silly to grey them out.

Related prior PR: #1727

Closes #1877.

Testing steps

• Confirm that all of the gifBackgroundImage elements this feature can pause, as listed in the code, are paused correctly (including the gradient overlay on the tagged page sidebar header) and unpause seamlessly on hover.
• Confirm that the createImageBitmap code path works by verifying functionality in Firefox 128 ESR or similar or with the code modified to use it. (I download old Firefox versions from https://ftp.mozilla.org/pub/firefox/releases/ and use npx web-ext run --firefox='/path/to/Firefox 121.app/Contents/MacOS/firefox').

Ideally one would confirm that this code works correctly on WebP images and on images with transparency, but finding a relevant element may be nearly impossible. #1862 can be modified to use this code path for all images and tested on the images in https://www.tumblr.com/communities/test-community-46174.

[marcustyphoon]

I guess in theory I could make this work on an element with two different images referenced in its background-image css value, but that sounds like a pain, we don't have any of those, and it seems fairly unlikely that Tumblr would do that?