From 97422d483ff3d7735f808e172556bb565332f10b Mon Sep 17 00:00:00 2001 From: Marcus Date: Fri, 3 Jan 2025 21:24:10 -0800 Subject: [PATCH 01/13] use blob urls to pause background gifs --- src/features/accesskit/disable_gifs.js | 47 ++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 002603fc2..cb0bd8ec9 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -2,6 +2,7 @@ import { pageModifications } from '../../utils/mutations.js'; import { keyToCss } from '../../utils/css_map.js'; import { dom } from '../../utils/dom.js'; import { buildStyle, postSelector } from '../../utils/interface.js'; +import { sha256 } from '../../utils/crypto.js'; const canvasClass = 'xkit-paused-gif-placeholder'; const labelClass = 'xkit-paused-gif-label'; @@ -105,9 +106,47 @@ const processGifs = function (gifElements) { }); }; +const sourceUrlRegex = /(?<=url\(["'])[^)]*?\.gifv?(?=["']\))/g; + +const pausedBackgroundRules = {}; + +const backgroundStyleElement = buildStyle(); +const updateBackgroundStyle = () => { + backgroundStyleElement.textContent = Object.entries(pausedBackgroundRules) + .map(([id, style]) => `[data-disable-gifs-id="${id}"]:not(:hover) ${style}`) + .join('\n'); +}; + +const createPausedBackgroundRule = (sourceRule, sourceUrl) => new Promise(resolve => { + const image = new Image(); + image.crossOrigin = 'anonymous'; + image.src = sourceUrl; + image.onload = () => { + const canvas = document.createElement('canvas'); + canvas.width = image.naturalWidth; + canvas.height = image.naturalHeight; + canvas.getContext('2d').drawImage(image, 0, 0); + canvas.toBlob(blob => { + const blobUrl = URL.createObjectURL(blob); + resolve(`{ background-image: ${sourceRule.replaceAll(sourceUrlRegex, blobUrl)} !important; }`); + }); + }; +}); + const processBackgroundGifs = function (gifBackgroundElements) { - gifBackgroundElements.forEach(gifBackgroundElement => { - gifBackgroundElement.classList.add(backgroundGifClass); + gifBackgroundElements.forEach(async gifBackgroundElement => { + const sourceRule = gifBackgroundElement.style.backgroundImage; + const sourceUrl = sourceRule.match(sourceUrlRegex)?.[0]; + + if (sourceUrl) { + const id = await sha256(sourceRule); + pausedBackgroundRules[id] ??= await createPausedBackgroundRule(sourceRule, sourceUrl); + updateBackgroundStyle(); + + gifBackgroundElement.dataset.disableGifsId = id; + } else { + gifBackgroundElement.classList.add(backgroundGifClass); + } addLabel(gifBackgroundElement, true); }); }; @@ -138,6 +177,7 @@ export const main = async function () { ${keyToCss('communityHeaderImage', 'bannerImage')}[style*=".gif"] `; pageModifications.register(gifBackgroundImage, processBackgroundGifs); + document.documentElement.append(backgroundStyleElement); pageModifications.register( `:is(${postSelector}, ${keyToCss('blockEditorContainer')}) ${keyToCss('rows')}`, @@ -156,4 +196,7 @@ export const clean = async function () { $(`.${canvasClass}, .${labelClass}`).remove(); $(`.${backgroundGifClass}`).removeClass(backgroundGifClass); + $('[data-disable-gifs-id]').removeAttr('data-disable-gifs-id'); + + backgroundStyleElement.remove(); }; From 777e417281ef8a325bc58783cd5490d1d2d6f4fd Mon Sep 17 00:00:00 2001 From: Marcus Date: Wed, 22 Jan 2025 06:40:47 -0800 Subject: [PATCH 02/13] clarifying refactors --- src/features/accesskit/disable_gifs.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index cb0bd8ec9..70d0d3160 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -108,16 +108,16 @@ const processGifs = function (gifElements) { const sourceUrlRegex = /(?<=url\(["'])[^)]*?\.gifv?(?=["']\))/g; -const pausedBackgroundRules = {}; +const pausedBackgroundImageValues = {}; const backgroundStyleElement = buildStyle(); const updateBackgroundStyle = () => { - backgroundStyleElement.textContent = Object.entries(pausedBackgroundRules) - .map(([id, style]) => `[data-disable-gifs-id="${id}"]:not(:hover) ${style}`) + backgroundStyleElement.textContent = Object.entries(pausedBackgroundImageValues) + .map(([id, value]) => `[data-disable-gifs-id="${id}"]:not(:hover) { background-image: ${value} !important; }`) .join('\n'); }; -const createPausedBackgroundRule = (sourceRule, sourceUrl) => new Promise(resolve => { +const createPausedCssValue = (sourceValue, sourceUrl) => new Promise(resolve => { const image = new Image(); image.crossOrigin = 'anonymous'; image.src = sourceUrl; @@ -128,19 +128,19 @@ const createPausedBackgroundRule = (sourceRule, sourceUrl) => new Promise(resolv canvas.getContext('2d').drawImage(image, 0, 0); canvas.toBlob(blob => { const blobUrl = URL.createObjectURL(blob); - resolve(`{ background-image: ${sourceRule.replaceAll(sourceUrlRegex, blobUrl)} !important; }`); + resolve(sourceValue.replaceAll(sourceUrlRegex, blobUrl)); }); }; }); const processBackgroundGifs = function (gifBackgroundElements) { gifBackgroundElements.forEach(async gifBackgroundElement => { - const sourceRule = gifBackgroundElement.style.backgroundImage; - const sourceUrl = sourceRule.match(sourceUrlRegex)?.[0]; + const sourceValue = gifBackgroundElement.style.backgroundImage; + const sourceUrl = sourceValue.match(sourceUrlRegex)?.[0]; if (sourceUrl) { - const id = await sha256(sourceRule); - pausedBackgroundRules[id] ??= await createPausedBackgroundRule(sourceRule, sourceUrl); + const id = await sha256(sourceValue); + pausedBackgroundImageValues[id] ??= await createPausedCssValue(sourceValue, sourceUrl); updateBackgroundStyle(); gifBackgroundElement.dataset.disableGifsId = id; From 0db40f3881945264b04e98accdf37461ca76659b Mon Sep 17 00:00:00 2001 From: Marcus Date: Wed, 22 Jan 2025 16:11:40 -0800 Subject: [PATCH 03/13] generalizing refactor --- src/features/accesskit/disable_gifs.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 70d0d3160..78c13d285 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -117,7 +117,7 @@ const updateBackgroundStyle = () => { .join('\n'); }; -const createPausedCssValue = (sourceValue, sourceUrl) => new Promise(resolve => { +const createPausedUrl = (sourceUrl) => new Promise(resolve => { const image = new Image(); image.crossOrigin = 'anonymous'; image.src = sourceUrl; @@ -126,10 +126,9 @@ const createPausedCssValue = (sourceValue, sourceUrl) => new Promise(resolve => canvas.width = image.naturalWidth; canvas.height = image.naturalHeight; canvas.getContext('2d').drawImage(image, 0, 0); - canvas.toBlob(blob => { - const blobUrl = URL.createObjectURL(blob); - resolve(sourceValue.replaceAll(sourceUrlRegex, blobUrl)); - }); + canvas.toBlob(blob => + resolve(URL.createObjectURL(blob)) + ); }; }); @@ -140,7 +139,7 @@ const processBackgroundGifs = function (gifBackgroundElements) { if (sourceUrl) { const id = await sha256(sourceValue); - pausedBackgroundImageValues[id] ??= await createPausedCssValue(sourceValue, sourceUrl); + pausedBackgroundImageValues[id] ??= sourceValue.replaceAll(sourceUrlRegex, await createPausedUrl(sourceUrl)); updateBackgroundStyle(); gifBackgroundElement.dataset.disableGifsId = id; From 7c204e70e03110c3747635f4a88049eaffc8e9e2 Mon Sep 17 00:00:00 2001 From: Marcus Date: Wed, 22 Jan 2025 16:37:58 -0800 Subject: [PATCH 04/13] remove complicated style element use --- src/features/accesskit/disable_gifs.js | 30 ++++++++++---------------- 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 78c13d285..a3ce639d1 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -2,11 +2,11 @@ import { pageModifications } from '../../utils/mutations.js'; import { keyToCss } from '../../utils/css_map.js'; import { dom } from '../../utils/dom.js'; import { buildStyle, postSelector } from '../../utils/interface.js'; -import { sha256 } from '../../utils/crypto.js'; const canvasClass = 'xkit-paused-gif-placeholder'; const labelClass = 'xkit-paused-gif-label'; const containerClass = 'xkit-paused-gif-container'; +const pausedBackgroundImageVar = '--xkit-paused-gif-background-image'; const backgroundGifClass = 'xkit-paused-background-gif'; export const styleElement = buildStyle(` @@ -48,6 +48,10 @@ export const styleElement = buildStyle(` display: none; } +[style*="${pausedBackgroundImageVar}"]:not(:hover) { + background-image: var(${pausedBackgroundImageVar}) !important; +} + .${backgroundGifClass}:not(:hover) { background-image: none !important; background-color: rgb(var(--secondary-accent)); @@ -108,15 +112,6 @@ const processGifs = function (gifElements) { const sourceUrlRegex = /(?<=url\(["'])[^)]*?\.gifv?(?=["']\))/g; -const pausedBackgroundImageValues = {}; - -const backgroundStyleElement = buildStyle(); -const updateBackgroundStyle = () => { - backgroundStyleElement.textContent = Object.entries(pausedBackgroundImageValues) - .map(([id, value]) => `[data-disable-gifs-id="${id}"]:not(:hover) { background-image: ${value} !important; }`) - .join('\n'); -}; - const createPausedUrl = (sourceUrl) => new Promise(resolve => { const image = new Image(); image.crossOrigin = 'anonymous'; @@ -138,11 +133,10 @@ const processBackgroundGifs = function (gifBackgroundElements) { const sourceUrl = sourceValue.match(sourceUrlRegex)?.[0]; if (sourceUrl) { - const id = await sha256(sourceValue); - pausedBackgroundImageValues[id] ??= sourceValue.replaceAll(sourceUrlRegex, await createPausedUrl(sourceUrl)); - updateBackgroundStyle(); - - gifBackgroundElement.dataset.disableGifsId = id; + gifBackgroundElement.style.setProperty( + pausedBackgroundImageVar, + sourceValue.replaceAll(sourceUrlRegex, await createPausedUrl(sourceUrl)) + ); } else { gifBackgroundElement.classList.add(backgroundGifClass); } @@ -176,7 +170,6 @@ export const main = async function () { ${keyToCss('communityHeaderImage', 'bannerImage')}[style*=".gif"] `; pageModifications.register(gifBackgroundImage, processBackgroundGifs); - document.documentElement.append(backgroundStyleElement); pageModifications.register( `:is(${postSelector}, ${keyToCss('blockEditorContainer')}) ${keyToCss('rows')}`, @@ -195,7 +188,6 @@ export const clean = async function () { $(`.${canvasClass}, .${labelClass}`).remove(); $(`.${backgroundGifClass}`).removeClass(backgroundGifClass); - $('[data-disable-gifs-id]').removeAttr('data-disable-gifs-id'); - - backgroundStyleElement.remove(); + [...document.querySelectorAll(`img[style*="${pausedBackgroundImageVar}"]`)] + .forEach(element => element.style.removeProperty(pausedBackgroundImageVar)); }; From 49a71634422f9e6d789f9398bb9667e8d6a84880 Mon Sep 17 00:00:00 2001 From: Marcus Date: Wed, 22 Jan 2025 16:42:33 -0800 Subject: [PATCH 05/13] add (back) caching --- src/features/accesskit/disable_gifs.js | 32 +++++++++++++++----------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index a3ce639d1..07a44098a 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -112,20 +112,24 @@ const processGifs = function (gifElements) { const sourceUrlRegex = /(?<=url\(["'])[^)]*?\.gifv?(?=["']\))/g; -const createPausedUrl = (sourceUrl) => new Promise(resolve => { - const image = new Image(); - image.crossOrigin = 'anonymous'; - image.src = sourceUrl; - image.onload = () => { - const canvas = document.createElement('canvas'); - canvas.width = image.naturalWidth; - canvas.height = image.naturalHeight; - canvas.getContext('2d').drawImage(image, 0, 0); - canvas.toBlob(blob => - resolve(URL.createObjectURL(blob)) - ); - }; -}); +const pausedUrlCache = {}; +const createPausedUrl = (sourceUrl) => { + pausedUrlCache[sourceUrl] ??= new Promise(resolve => { + const image = new Image(); + image.crossOrigin = 'anonymous'; + image.src = sourceUrl; + image.onload = () => { + const canvas = document.createElement('canvas'); + canvas.width = image.naturalWidth; + canvas.height = image.naturalHeight; + canvas.getContext('2d').drawImage(image, 0, 0); + canvas.toBlob(blob => + resolve(URL.createObjectURL(blob)) + ); + }; + }); + return pausedUrlCache[sourceUrl]; +}; const processBackgroundGifs = function (gifBackgroundElements) { gifBackgroundElements.forEach(async gifBackgroundElement => { From deec6c605e078b0d74cfc5cd4e6c4ca7d97ddfb0 Mon Sep 17 00:00:00 2001 From: Marcus Date: Wed, 22 Jan 2025 17:48:45 -0800 Subject: [PATCH 06/13] remove old code --- src/features/accesskit/disable_gifs.js | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 07a44098a..64e0e8403 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -7,7 +7,6 @@ const canvasClass = 'xkit-paused-gif-placeholder'; const labelClass = 'xkit-paused-gif-label'; const containerClass = 'xkit-paused-gif-container'; const pausedBackgroundImageVar = '--xkit-paused-gif-background-image'; -const backgroundGifClass = 'xkit-paused-background-gif'; export const styleElement = buildStyle(` .${labelClass} { @@ -51,15 +50,6 @@ export const styleElement = buildStyle(` [style*="${pausedBackgroundImageVar}"]:not(:hover) { background-image: var(${pausedBackgroundImageVar}) !important; } - -.${backgroundGifClass}:not(:hover) { - background-image: none !important; - background-color: rgb(var(--secondary-accent)); -} - -.${backgroundGifClass}:not(:hover) > div { - color: rgb(var(--black)); -} `); const addLabel = (element, inside = false) => { @@ -141,10 +131,8 @@ const processBackgroundGifs = function (gifBackgroundElements) { pausedBackgroundImageVar, sourceValue.replaceAll(sourceUrlRegex, await createPausedUrl(sourceUrl)) ); - } else { - gifBackgroundElement.classList.add(backgroundGifClass); + addLabel(gifBackgroundElement, true); } - addLabel(gifBackgroundElement, true); }); }; @@ -191,7 +179,6 @@ export const clean = async function () { ); $(`.${canvasClass}, .${labelClass}`).remove(); - $(`.${backgroundGifClass}`).removeClass(backgroundGifClass); [...document.querySelectorAll(`img[style*="${pausedBackgroundImageVar}"]`)] .forEach(element => element.style.removeProperty(pausedBackgroundImageVar)); }; From d69a1a35aff992820f63ce9b9347690a468c2990 Mon Sep 17 00:00:00 2001 From: Marcus Date: Fri, 7 Feb 2025 15:39:01 -0800 Subject: [PATCH 07/13] refactor: create createCanvas function --- src/features/accesskit/disable_gifs.js | 29 +++++++++++++++----------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 64e0e8403..67be1d0cd 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -63,21 +63,26 @@ const addLabel = (element, inside = false) => { } }; -const pauseGif = function (gifElement) { +const createCanvas = src => new Promise(resolve => { const image = new Image(); - image.src = gifElement.currentSrc; + image.src = src; 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.getContext('2d').drawImage(image, 0, 0); - gifElement.parentNode.append(canvas); - addLabel(gifElement); - } + const canvas = document.createElement('canvas'); + canvas.width = image.naturalWidth; + canvas.height = image.naturalHeight; + canvas.getContext('2d').drawImage(image, 0, 0); + resolve(canvas); }; +}); + +const pauseGif = async function (gifElement) { + const canvas = await createCanvas(gifElement.currentSrc); + if (gifElement.parentNode && gifElement.parentNode.querySelector(`.${canvasClass}`) === null) { + canvas.className = gifElement.className; + canvas.classList.add(canvasClass); + gifElement.parentNode.append(canvas); + addLabel(gifElement); + } }; const processGifs = function (gifElements) { From 2fa471b7f40f0ec83bdbfe1f7e8ab1eefc5135af Mon Sep 17 00:00:00 2001 From: Marcus Date: Fri, 7 Feb 2025 15:39:13 -0800 Subject: [PATCH 08/13] use crossOrigin=anonymous --- src/features/accesskit/disable_gifs.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 67be1d0cd..fa7d4a14a 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -66,6 +66,7 @@ const addLabel = (element, inside = false) => { const createCanvas = src => new Promise(resolve => { const image = new Image(); image.src = src; + image.crossOrigin = 'anonymous'; image.onload = () => { const canvas = document.createElement('canvas'); canvas.width = image.naturalWidth; From b9e4a29529fe8142055800f6e8d26abb7557e16c Mon Sep 17 00:00:00 2001 From: Marcus Date: Fri, 7 Feb 2025 15:40:13 -0800 Subject: [PATCH 09/13] use createCanvas --- src/features/accesskit/disable_gifs.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index fa7d4a14a..4f00d7b4c 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -109,21 +109,14 @@ const processGifs = function (gifElements) { const sourceUrlRegex = /(?<=url\(["'])[^)]*?\.gifv?(?=["']\))/g; const pausedUrlCache = {}; -const createPausedUrl = (sourceUrl) => { - pausedUrlCache[sourceUrl] ??= new Promise(resolve => { - const image = new Image(); - image.crossOrigin = 'anonymous'; - image.src = sourceUrl; - image.onload = () => { - const canvas = document.createElement('canvas'); - canvas.width = image.naturalWidth; - canvas.height = image.naturalHeight; - canvas.getContext('2d').drawImage(image, 0, 0); +const createPausedUrl = sourceUrl => { + pausedUrlCache[sourceUrl] ??= new Promise(resolve => + createCanvas(sourceUrl).then(canvas => canvas.toBlob(blob => resolve(URL.createObjectURL(blob)) - ); - }; - }); + ) + ) + ); return pausedUrlCache[sourceUrl]; }; From 6bd0a39c0b6650a03e44b07b352847600216ca26 Mon Sep 17 00:00:00 2001 From: Marcus Date: Fri, 7 Feb 2025 17:00:59 -0800 Subject: [PATCH 10/13] Revert "use createCanvas" This reverts commit b9e4a29529fe8142055800f6e8d26abb7557e16c. --- src/features/accesskit/disable_gifs.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 4f00d7b4c..fa7d4a14a 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -109,14 +109,21 @@ const processGifs = function (gifElements) { const sourceUrlRegex = /(?<=url\(["'])[^)]*?\.gifv?(?=["']\))/g; const pausedUrlCache = {}; -const createPausedUrl = sourceUrl => { - pausedUrlCache[sourceUrl] ??= new Promise(resolve => - createCanvas(sourceUrl).then(canvas => +const createPausedUrl = (sourceUrl) => { + pausedUrlCache[sourceUrl] ??= new Promise(resolve => { + const image = new Image(); + image.crossOrigin = 'anonymous'; + image.src = sourceUrl; + image.onload = () => { + const canvas = document.createElement('canvas'); + canvas.width = image.naturalWidth; + canvas.height = image.naturalHeight; + canvas.getContext('2d').drawImage(image, 0, 0); canvas.toBlob(blob => resolve(URL.createObjectURL(blob)) - ) - ) - ); + ); + }; + }); return pausedUrlCache[sourceUrl]; }; From a61498180da724851cdec4ac6ed131d0f75edef4 Mon Sep 17 00:00:00 2001 From: Marcus Date: Fri, 7 Feb 2025 17:07:59 -0800 Subject: [PATCH 11/13] Revert "use crossOrigin=anonymous" This reverts commit 2fa471b7f40f0ec83bdbfe1f7e8ab1eefc5135af. --- src/features/accesskit/disable_gifs.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index fa7d4a14a..67be1d0cd 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -66,7 +66,6 @@ const addLabel = (element, inside = false) => { const createCanvas = src => new Promise(resolve => { const image = new Image(); image.src = src; - image.crossOrigin = 'anonymous'; image.onload = () => { const canvas = document.createElement('canvas'); canvas.width = image.naturalWidth; From 0296f5f8357a494c55642c1cb7436e43360bb833 Mon Sep 17 00:00:00 2001 From: Marcus Date: Fri, 7 Feb 2025 17:08:01 -0800 Subject: [PATCH 12/13] Revert "refactor: create createCanvas function" This reverts commit d69a1a35aff992820f63ce9b9347690a468c2990. --- src/features/accesskit/disable_gifs.js | 29 +++++++++++--------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 67be1d0cd..64e0e8403 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -63,26 +63,21 @@ const addLabel = (element, inside = false) => { } }; -const createCanvas = src => new Promise(resolve => { +const pauseGif = function (gifElement) { const image = new Image(); - image.src = src; + image.src = gifElement.currentSrc; image.onload = () => { - const canvas = document.createElement('canvas'); - canvas.width = image.naturalWidth; - canvas.height = image.naturalHeight; - canvas.getContext('2d').drawImage(image, 0, 0); - resolve(canvas); + 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.getContext('2d').drawImage(image, 0, 0); + gifElement.parentNode.append(canvas); + addLabel(gifElement); + } }; -}); - -const pauseGif = async function (gifElement) { - const canvas = await createCanvas(gifElement.currentSrc); - if (gifElement.parentNode && gifElement.parentNode.querySelector(`.${canvasClass}`) === null) { - canvas.className = gifElement.className; - canvas.classList.add(canvasClass); - gifElement.parentNode.append(canvas); - addLabel(gifElement); - } }; const processGifs = function (gifElements) { From 99c8cfd8a204876bdc6b1f1dce4be4f27f574a7d Mon Sep 17 00:00:00 2001 From: Marcus Date: Fri, 7 Feb 2025 18:37:38 -0800 Subject: [PATCH 13/13] firefox compatible fetch --- src/features/accesskit/disable_gifs.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 64e0e8403..f6570dda7 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -105,18 +105,18 @@ const sourceUrlRegex = /(?<=url\(["'])[^)]*?\.gifv?(?=["']\))/g; const pausedUrlCache = {}; const createPausedUrl = (sourceUrl) => { pausedUrlCache[sourceUrl] ??= new Promise(resolve => { - const image = new Image(); - image.crossOrigin = 'anonymous'; - image.src = sourceUrl; - image.onload = () => { - const canvas = document.createElement('canvas'); - canvas.width = image.naturalWidth; - canvas.height = image.naturalHeight; - canvas.getContext('2d').drawImage(image, 0, 0); - canvas.toBlob(blob => - resolve(URL.createObjectURL(blob)) - ); - }; + fetch(sourceUrl, { headers: { Accept: 'image/webp,*/*' } }) + .then(response => response.blob()) + .then(blob => createImageBitmap(blob)) + .then(imageBitmap => { + const canvas = document.createElement('canvas'); + canvas.width = imageBitmap.width; + canvas.height = imageBitmap.height; + canvas.getContext('2d').drawImage(imageBitmap, 0, 0); + canvas.toBlob(blob => + resolve(URL.createObjectURL(blob)) + ); + }); }); return pausedUrlCache[sourceUrl]; };