replace canvas with css content; pause remaining things

Author: marcustyphoon

src/features/accesskit/disable_gifs.js

@@ -5,8 +5,8 @@ import { buildStyle, postSelector } from '../../utils/interface.js';
 import { getPreferences } from '../../utils/preferences.js';
 import { memoize } from '../../utils/memoize.js';
 
-const canvasClass = 'xkit-paused-gif-placeholder';
 const pausedPosterAttribute = 'data-paused-gif-use-poster';
+const pausedContentVar = '--xkit-paused-gif-content';
 const pausedBackgroundImageVar = '--xkit-paused-gif-background-image';
 const hoverContainerAttribute = 'data-paused-gif-hover-container';
 const labelAttribute = 'data-paused-gif-label';
@@ -16,7 +16,6 @@ const containerClass = 'xkit-paused-gif-container';
 let loadingMode;
 
 const hovered = `:is(:hover, [${hoverContainerAttribute}]:hover *)`;
-const parentHovered = `:is(:hover > *, [${hoverContainerAttribute}]:hover *)`;
 
 export const styleElement = buildStyle(`
 [${labelAttribute}]::after {
@@ -46,16 +45,17 @@ export const styleElement = buildStyle(`
   transform: translateY(-50%);
 }
 
-.${canvasClass} {
-  position: absolute;
-  visibility: visible;
+[${labelAttribute}]${hovered}::after,
+[${pausedPosterAttribute}]:not(${hovered}) > div > ${keyToCss('knightRiderLoader')} {
+  display: none;
+}
 
-  background-color: rgb(var(--white));
+${keyToCss('blogCard')} ${keyToCss('headerImage')}${keyToCss('small')}[${labelAttribute}]::after {
+  font-size: 0.8rem;
+  top: calc(140px - 1em - 2.2ch);
 }
 
-.${canvasClass}${parentHovered},
-[${labelAttribute}]${hovered}::after,
-[${pausedPosterAttribute}]:not(${hovered}) > div > ${keyToCss('knightRiderLoader')} {
+img:is([${pausedPosterAttribute}], [style*="${pausedContentVar}"]):not(${hovered}) ~ div > ${keyToCss('knightRiderLoader')} {
   display: none;
 }
 ${keyToCss('background')}[${labelAttribute}]::after {
@@ -73,6 +73,9 @@ ${keyToCss('background')}[${labelAttribute}]::after {
   display: none;
 }
 
+img[style*="${pausedContentVar}"]:not(${hovered}) {
+  content: var(${pausedContentVar});
+}
 [style*="${pausedBackgroundImageVar}"]:not(${hovered}) {
   background-image: var(${pausedBackgroundImageVar}) !important;
 }
@@ -95,12 +98,12 @@ const addLabel = (element, inside = false) => {
 };
 
 /**
- * Fetches the selected image, tests if it is animated, and returns a canvas element with the paused
- * image if it is. This is expensive; avoid using this where practical. On older browsers without
- * ImageDecoder support, GIF images are assumed to be animated and WebP images are assumed to not be
- * animated.
+ * Fetches the selected image, tests if it is animated, and returns a blob URL with the paused image
+ * if it is. This is expensive and is a small memory leak, as the blob URL will never be revoked;
+ * avoid using this where practical. On older browsers without ImageDecoder support, GIF images are
+ * assumed to be animated and WebP images are assumed to not be animated.
  */
-const createPausedCanvasIfAnimated = memoize(async sourceUrl => {
+const createPausedUrlIfAnimated = memoize(async sourceUrl => {
   const response = await fetch(sourceUrl, { headers: { Accept: 'image/webp,*/*' } });
   const contentType = response.headers.get('Content-Type');
   const canvas = document.createElement('canvas');
@@ -129,75 +132,31 @@ const createPausedCanvasIfAnimated = memoize(async sourceUrl => {
     canvas.height = imageBitmap.height;
     canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
   }
-  return canvas;
+  const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/webp', 1));
+  return URL.createObjectURL(blob);
 });
 
-/**
- * Fetches the selected image, tests if it is animated, and returns a blob URL with the paused image
- * if it is. This is expensive and is a small memory leak, as the blob URL will never be revoked;
- * avoid using this where practical.
- */
-const createPausedUrlIfAnimated = memoize(async sourceUrl => {
-  const canvas = await createPausedCanvasIfAnimated(sourceUrl);
-  if (canvas) {
-    const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/webp', 1));
-    return URL.createObjectURL(blob);
-  }
-});
-
-const pauseGif = function (gifElement) {
-  const image = new Image();
-  image.src = gifElement.currentSrc;
-  image.onload = () => {
-    if (gifElement.parentNode && gifElement.parentNode.querySelector(`.${canvasClass}`) === null) {
-      const canvas = document.createElement('canvas');
-      canvas.width = image.naturalWidth;
-      canvas.height = image.naturalHeight;
-      canvas.className = gifElement.className;
-      canvas.classList.add(canvasClass);
-      canvas.setAttribute('style', gifElement.getAttribute('style'));
-      canvas.getContext('2d').drawImage(image, 0, 0);
-      gifElement.after(canvas);
-      addLabel(gifElement);
-    }
-  };
-};
-
-const pauseWebP = async function (gifElement) {
-  const canvas = await createPausedCanvasIfAnimated(gifElement.currentSrc);
-  if (canvas) {
-    canvas.className = gifElement.className;
-    canvas.classList.add(canvasClass);
-    canvas.setAttribute('style', gifElement.getAttribute('style'));
-    gifElement.after(canvas);
-    addLabel(gifElement);
-  }
-};
-
 const processGifs = function (gifElements) {
   gifElements.forEach(async gifElement => {
     if (gifElement.closest(`${keyToCss('avatarImage', 'subAvatarImage')}, .block-editor-writing-flow`)) return;
-    const pausedGifElements = [...gifElement.parentNode.querySelectorAll(`.${canvasClass}`)];
-    if (pausedGifElements.length) {
-      gifElement.after(...pausedGifElements);
-      return;
-    }
-
     gifElement.decoding = 'sync';
 
     const posterElement = gifElement.parentElement.querySelector(keyToCss('poster'));
     if (posterElement) {
       gifElement.parentElement.setAttribute(pausedPosterAttribute, loadingMode);
-      addLabel(posterElement);
-      return;
-    }
+    } else {
+      const sourceUrl = gifElement.currentSrc ||
+        await new Promise(resolve => gifElement.addEventListener('load', () => resolve(gifElement.currentSrc), { once: true }));
 
-    const sourceUrl = gifElement.currentSrc ||
-      await new Promise(resolve => gifElement.addEventListener('load', () => resolve(gifElement.currentSrc), { once: true }));
+      const pausedUrl = await createPausedUrlIfAnimated(sourceUrl);
+      if (!pausedUrl) return;
 
-    sourceUrl.endsWith('.webp') ? pauseWebP(gifElement) : pauseGif(gifElement);
+      gifElement.style.setProperty(pausedContentVar, `url(${pausedUrl})`);
+    }
+    addLabel(gifElement);
 
     gifElement.closest(keyToCss(
+      'albumImage', // post audio element
       'imgLink' // trending tag: https://www.tumblr.com/explore/trending
     ))?.setAttribute(hoverFixAttribute, '');
   });
@@ -262,10 +221,18 @@ export const main = async function () {
       ${
         'figure' // post image/imageset; recommended blog carousel entry; blog view sidebar "more like this"; post in grid view; blog card modal post entry
       },
+      ${
+        'main.labs' // labs settings header: https://www.tumblr.com/settings/labs
+      },
       ${keyToCss(
         'linkCard', // post link element
+        'albumImage', // post audio element
+        'messageImage', // direct message attached image
+        'messagePost', // direct message linked post
         'typeaheadRow', // modal search dropdown entry
         'tagImage', // search page sidebar related tags, recommended tag carousel entry: https://www.tumblr.com/search/gif, https://www.tumblr.com/explore/recommended-for-you
+        'headerBanner', // blog view header
+        'headerImage', // modal blog card header, activity page "biggest fans" header
         'topPost', // activity page top post
         'colorfulListItemWrapper', // trending tag: https://www.tumblr.com/explore/trending
         'takeoverBanner' // advertisement
@@ -313,11 +280,12 @@ export const clean = async function () {
     wrapper.replaceWith(...wrapper.children)
   );
 
-  $(`.${canvasClass}`).remove();
   $(`[${labelAttribute}]`).removeAttr(labelAttribute);
   $(`[${pausedPosterAttribute}]`).removeAttr(pausedPosterAttribute);
   $(`[${hoverContainerAttribute}]`).removeAttr(hoverContainerAttribute);
   $(`[${hoverFixAttribute}]`).removeAttr(hoverFixAttribute);
+  [...document.querySelectorAll(`img[style*="${pausedContentVar}"]`)]
+    .forEach(element => element.style.removeProperty(pausedContentVar));
   [...document.querySelectorAll(`[style*="${pausedBackgroundImageVar}"]`)]
     .forEach(element => element.style.removeProperty(pausedBackgroundImageVar));
 };