implement delayed load preference

AprilSylph · Feb 21, 2025 · fffc7e0 · fffc7e0
1 parent 0a92bde
commit fffc7e0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/src/features/accesskit.json b/src/features/accesskit.json
@@ -14,6 +14,15 @@
       "label": "Pause GIFs until they are hovered over",
       "default": false
     },
+    "disable_gifs_loading_mode": {
+      "type": "select",
+      "label": "Download paused GIFs:",
+      "options": [
+        { "value": "eager", "label": "immediately" },
+        { "value": "lazy", "label": "when hovered" }
+      ],
+      "default": "eager"
+    },
     "boring_tag_chiclets": {
       "type": "checkbox",
       "label": "De-animate the Changes/Shop/etc. links carousel",

diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js
@@ -3,6 +3,7 @@ import { keyToCss } from '../../utils/css_map.js';
 import { dom } from '../../utils/dom.js';
 import { buildStyle, postSelector } from '../../utils/interface.js';
 import { memoize } from '../../utils/memoize.js';
+import { getPreferences } from '../../utils/preferences.js';
 
 const posterAttribute = 'data-paused-gif-placeholder';
 const pausedContentVar = '--xkit-paused-gif-content';
@@ -11,6 +12,8 @@ const hoverContainerAttribute = 'data-paused-gif-hover-container';
 const labelClass = 'xkit-paused-gif-label';
 const containerClass = 'xkit-paused-gif-container';
 
+let loadingMode;
+
 const hovered = `:is(:hover > *, [${hoverContainerAttribute}]:hover *)`;
 
 export const styleElement = buildStyle(`
@@ -51,6 +54,9 @@ ${keyToCss('background')} > .${labelClass} {
 img:has(~ [${posterAttribute}]):not(${hovered}) {
   visibility: hidden !important;
 }
+img:has(~ [${posterAttribute}="lazy"]):not(${hovered}) {
+  display: none;
+}
 
 img[style*="${pausedContentVar}"]:not(${hovered}) {
   content: var(${pausedContentVar});
@@ -114,7 +120,7 @@ const processGifs = function (gifElements) {
 
     const posterElement = gifElement.parentElement.querySelector(keyToCss('poster'));
     if (posterElement) {
-      posterElement.setAttribute(posterAttribute, '');
+      posterElement.setAttribute(posterAttribute, loadingMode);
     } else {
       const sourceUrl = gifElement.currentSrc ||
         await new Promise(resolve => gifElement.addEventListener('load', () => resolve(gifElement.currentSrc), { once: true }));
@@ -166,7 +172,18 @@ const processRows = function (rowsElements) {
 const processHoverableElements = elements =>
   elements.forEach(element => element.setAttribute(hoverContainerAttribute, ''));
 
+const onStorageChanged = async function (changes, areaName) {
+  if (areaName !== 'local') return;
+
+  const { 'accesskit.preferences.disable_gifs_loading_mode': modeChanges } = changes;
+  if (modeChanges?.oldValue === undefined) return;
+
+  loadingMode = modeChanges.newValue;
+};
+
 export const main = async function () {
+  ({ disable_gifs_loading_mode: loadingMode } = await getPreferences('accesskit'));
+
   const gifImage = `
     :is(figure, ${keyToCss('tagImage', 'takeoverBanner')}) img:is([srcset*=".gif"], [src*=".gif"], [srcset*=".webp"], [src*=".webp"]):not(${keyToCss('poster')})
   `;
@@ -186,9 +203,13 @@ export const main = async function () {
     `:is(${postSelector}, ${keyToCss('blockEditorContainer')}) ${keyToCss('rows')}`,
     processRows
   );
+
+  browser.storage.onChanged.addListener(onStorageChanged);
 };
 
 export const clean = async function () {
+  browser.storage.onChanged.removeListener(onStorageChanged);
+
   pageModifications.unregister(processGifs);
   pageModifications.unregister(processBackgroundGifs);
   pageModifications.unregister(processRows);