From b8469d5938e7db544d49c984a1f1098e465830fd Mon Sep 17 00:00:00 2001 From: Marcus Date: Wed, 22 Jan 2025 00:02:38 -0800 Subject: [PATCH 1/8] remove white background --- src/features/accesskit/disable_gifs.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 002603fc2f..1b8ad7eb49 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -36,8 +36,6 @@ export const styleElement = buildStyle(` .${canvasClass} { position: absolute; visibility: visible; - - background-color: rgb(var(--white)); } *:hover > .${canvasClass}, From a7c40c6c6bd299b303a3132c863101bf276640ed Mon Sep 17 00:00:00 2001 From: Marcus Date: Wed, 22 Jan 2025 00:03:10 -0800 Subject: [PATCH 2/8] hide real gifs when not hovered --- src/features/accesskit/disable_gifs.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 1b8ad7eb49..f0287498b1 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -8,6 +8,8 @@ const labelClass = 'xkit-paused-gif-label'; const containerClass = 'xkit-paused-gif-container'; const backgroundGifClass = 'xkit-paused-background-gif'; +const hovered = `:is(:hover > *, .${containerClass}:hover *)`; + export const styleElement = buildStyle(` .${labelClass} { position: absolute; @@ -38,10 +40,9 @@ export const styleElement = buildStyle(` visibility: visible; } -*:hover > .${canvasClass}, -*:hover > .${labelClass}, -.${containerClass}:hover .${canvasClass}, -.${containerClass}:hover .${labelClass} { +.${canvasClass}${hovered}, +.${labelClass}${hovered}, +img:has(~ .${canvasClass}):not(${hovered}) { display: none; } From 6bc6630309e42ac6e4a548511173f29f6a7e7b9f Mon Sep 17 00:00:00 2001 From: Marcus Date: Wed, 22 Jan 2025 00:24:48 -0800 Subject: [PATCH 3/8] invert canvas element order --- src/features/accesskit/disable_gifs.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index f0287498b1..907e7a4b43 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -42,7 +42,7 @@ export const styleElement = buildStyle(` .${canvasClass}${hovered}, .${labelClass}${hovered}, -img:has(~ .${canvasClass}):not(${hovered}) { +.${canvasClass} ~ img:not(${hovered}) { display: none; } @@ -78,7 +78,7 @@ const pauseGif = function (gifElement) { canvas.className = gifElement.className; canvas.classList.add(canvasClass); canvas.getContext('2d').drawImage(image, 0, 0); - gifElement.parentNode.append(canvas); + gifElement.before(canvas); addLabel(gifElement); } }; @@ -87,12 +87,11 @@ const pauseGif = function (gifElement) { const processGifs = function (gifElements) { gifElements.forEach(gifElement => { if (gifElement.closest('.block-editor-writing-flow')) return; - const pausedGifElements = [ - ...gifElement.parentNode.querySelectorAll(`.${canvasClass}`), - ...gifElement.parentNode.querySelectorAll(`.${labelClass}`) - ]; - if (pausedGifElements.length) { - gifElement.after(...pausedGifElements); + const existingCanvasElements = gifElement.parentNode.querySelectorAll(`.${canvasClass}`); + const existingLabelElements = gifElement.parentNode.querySelectorAll(`.${labelClass}`); + if (existingCanvasElements.length || existingLabelElements.length) { + gifElement.before(...existingCanvasElements); + gifElement.after(...existingLabelElements); return; } From 9165901d4fc3704b5bc2ff707ec640600858f22f Mon Sep 17 00:00:00 2001 From: Marcus Date: Wed, 22 Jan 2025 00:59:19 -0800 Subject: [PATCH 4/8] fix mini labels --- src/features/accesskit/disable_gifs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 907e7a4b43..17dfbd2072 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -78,8 +78,8 @@ const pauseGif = function (gifElement) { canvas.className = gifElement.className; canvas.classList.add(canvasClass); canvas.getContext('2d').drawImage(image, 0, 0); - gifElement.before(canvas); addLabel(gifElement); + gifElement.before(canvas); } }; }; From 32f0f127db739a96850b0a8521a65fd616c12e8b Mon Sep 17 00:00:00 2001 From: Marcus Date: Sat, 8 Feb 2025 03:48:25 -0800 Subject: [PATCH 5/8] ensure image decoding is not delayed --- src/features/accesskit/disable_gifs.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 17dfbd2072..9e647fcc1d 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -67,7 +67,9 @@ const addLabel = (element, inside = false) => { } }; -const pauseGif = function (gifElement) { +const pauseGif = async function (gifElement) { + gifElement.decode(); + const image = new Image(); image.src = gifElement.currentSrc; image.onload = () => { From cbcda6f8fc6853ee19d4c5bd106a8db7510c441c Mon Sep 17 00:00:00 2001 From: Marcus Date: Sat, 8 Feb 2025 22:31:46 -0800 Subject: [PATCH 6/8] Revert "fix mini labels" This reverts commit 9165901d4fc3704b5bc2ff707ec640600858f22f. --- src/features/accesskit/disable_gifs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 9e647fcc1d..9b57c546c4 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -80,8 +80,8 @@ const pauseGif = async function (gifElement) { canvas.className = gifElement.className; canvas.classList.add(canvasClass); canvas.getContext('2d').drawImage(image, 0, 0); - addLabel(gifElement); gifElement.before(canvas); + addLabel(gifElement); } }; }; From ed3bd2acdd2925f5800e0ec8ae47c5bfb73a260c Mon Sep 17 00:00:00 2001 From: Marcus Date: Sat, 8 Feb 2025 22:31:49 -0800 Subject: [PATCH 7/8] Revert "invert canvas element order" This reverts commit 6bc6630309e42ac6e4a548511173f29f6a7e7b9f. --- src/features/accesskit/disable_gifs.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index 9b57c546c4..b1239faf20 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -42,7 +42,7 @@ export const styleElement = buildStyle(` .${canvasClass}${hovered}, .${labelClass}${hovered}, -.${canvasClass} ~ img:not(${hovered}) { +img:has(~ .${canvasClass}):not(${hovered}) { display: none; } @@ -80,7 +80,7 @@ const pauseGif = async function (gifElement) { canvas.className = gifElement.className; canvas.classList.add(canvasClass); canvas.getContext('2d').drawImage(image, 0, 0); - gifElement.before(canvas); + gifElement.parentNode.append(canvas); addLabel(gifElement); } }; @@ -89,11 +89,12 @@ const pauseGif = async function (gifElement) { const processGifs = function (gifElements) { gifElements.forEach(gifElement => { if (gifElement.closest('.block-editor-writing-flow')) return; - const existingCanvasElements = gifElement.parentNode.querySelectorAll(`.${canvasClass}`); - const existingLabelElements = gifElement.parentNode.querySelectorAll(`.${labelClass}`); - if (existingCanvasElements.length || existingLabelElements.length) { - gifElement.before(...existingCanvasElements); - gifElement.after(...existingLabelElements); + const pausedGifElements = [ + ...gifElement.parentNode.querySelectorAll(`.${canvasClass}`), + ...gifElement.parentNode.querySelectorAll(`.${labelClass}`) + ]; + if (pausedGifElements.length) { + gifElement.after(...pausedGifElements); return; } From 0554f5a7eb4e50d1a875f4378df7bd1af6a0b21d Mon Sep 17 00:00:00 2001 From: Marcus Date: Sat, 8 Feb 2025 22:33:01 -0800 Subject: [PATCH 8/8] fix mini labels --- src/features/accesskit/disable_gifs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index b1239faf20..b4905d0894 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -81,7 +81,7 @@ const pauseGif = async function (gifElement) { canvas.classList.add(canvasClass); canvas.getContext('2d').drawImage(image, 0, 0); gifElement.parentNode.append(canvas); - addLabel(gifElement); + addLabel(canvas); } }; };