AccessKit Disable GIFs: Remove white background workaround

[marcustyphoon]

Description

We currently have a workaround for "pausing" certain GIF elements (the ones which use CSS background-image) where we simply replace the GIF with a white background instead of properly freezing them until they're hovered. It dawned on me, however, that there is a way to pause these properly: a CSS property override replacing the gif URL with a blob URL referencing a de-animated version of the gif, which we can generate from a canvas element.

This implements this. Functionality-wise, it seems to work quite well. Unfortunately, this relies on quite a bit of inelegant string parsing; I assume the regex I wrote can be cleaned up a little bit, but it's still fundamentally quite complex and I don't know of a better way to parse the url out of e.g. background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)), url("https://64.media.tumblr.com/e6ca525d90692476df81e72bdd9cdfe5/539b205af19f15b8-ec/s400x600/a1c55d65fb3374ae5945af2a6ec16d429842cacc.gifv").

So it's quite cool that it works, but... yeah, I dunno.

Aside: can you use CSS to effectively replace the contents of an <img> element? If so, this method could theoretically replace the entire feature and allow for pausing a whole bunch of random elements we currently don't hit (blog header images, search result thumbnails), which would be kind of wild. I think you might be able to? edit: Yes, see #1708.

Testing steps

Confirm that the gifs in the right column of the tagged page (e.g. https://www.tumblr.com/tagged/gif) and atop the tags search (e.g. https://www.tumblr.com/search/gif?v=tag) are paused correctly and become unpaused when hovered.

[marcustyphoon]

• use Extract memoize helper function #1710

[marcustyphoon]

Ah, great. This doesn't work as-written in Firefox because of CORS.

[marcustyphoon]

I'm not the happiest camper in the world about the change I just made, moving the method of fetching gif source data from an image element to a fetch call and createImageBitmap(), because—in Chromium, where it worked—the image element we create would often load the gif source from the browser cache where it'd just been placed by the element we're pausing. The fetch call appears to never do this, so the browser is downloading each image twice in a row, which is obviously inefficient and delays gif pausing by quite a lot. (No, cache: 'force-cache' doesn't help.)

It seems, however, that the other way doesn't work in Firefox due to their CORS implementation for content scripts. I believe requesting host permissions for *://*.tumblr.com/* would fix this, but I'm not sure how that would work, particularly with upgrades.