use bg script for timeouts when loading deferred images

extension/core/bg/script-loader.js

@@ -29,7 +29,7 @@ singlefile.scriptLoader = (() => {
 		"/lib/single-file/vendor/html-srcset-parser.js",
 		"/lib/single-file/doc-helper.js",
 		"/lib/fetch/content/fetch.js",
-		"/lib/lazy/content-lazy-loader.js",
+		"/lib/lazy/content/content-lazy-loader.js",
 		"/lib/single-file/single-file-core.js",
 		"/lib/single-file/single-file-browser.js",
 		"/extension/index.js",
@@ -44,7 +44,7 @@ singlefile.scriptLoader = (() => {
 		"/lib/single-file/doc-helper.js",
 		"/lib/single-file/util/timeout.js",
 		"/lib/fetch/content/fetch.js",
-		"/lib/lazy/content-lazy-loader.js",
+		"/lib/lazy/content/content-lazy-loader.js",
 		"/lib/single-file/frame-tree.js",
 		"/extension/core/content/content-frame.js"
 	];

lib/lazy/bg/lazy-timeout.js

@@ -0,0 +1,19 @@
+/* global browser, setTimeout, clearTimeout */
+
+this.lazyTimeout = (() => {
+
+	"use strict";
+
+	browser.runtime.onMessage.addListener((request, sender) => {
+		if (request.setTimeoutRequest) {
+			const timeoutId = setTimeout(() => {
+				browser.tabs.sendMessage(sender.tab.id, { onTimeout: true, id: timeoutId });
+			}, request.delay);
+			return Promise.resolve(timeoutId);
+		}
+		if (request.clearTimeout) {
+			clearTimeout(request.id);
+		}
+	});
+
+})();

lib/lazy/content-lazy-loader.js → lib/lazy/content/content-lazy-loader.js

@@ -18,31 +18,36 @@
  *   along with SingleFile.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* global browser, document, timeout, MutationObserver, setTimeout, clearTimeout */
+/* global browser, document, MutationObserver */
 
 this.lazyLoader = this.lazyLoader || (() => {
 
 	const SCRIPT_TAG_NAME = "script";
 	const MONITORED_ATTRIBUTES = ["src", "srcset"];
 	const ATTRIBUTES_MUTATION_TYPE = "attributes";
-	const SCRIPT_BEFORE_PATH = "lib/lazy/web-lazy-loader-before.js";
-	const SCRIPT_AFTER_PATH = "lib/lazy/web-lazy-loader-after.js";
+	const SCRIPT_BEFORE_PATH = "lib/lazy/web/web-lazy-loader-before.js";
+	const SCRIPT_AFTER_PATH = "lib/lazy/web/web-lazy-loader-after.js";
 
 	return { process };
 
 	function process(options) {
-		return new Promise(resolve => {
+		return new Promise(async resolve => {
 			let timeoutId, srcAttributeChanged;
-			const idleTimeoutId = timeout.set(() => {
+			const idleTimeoutId = setTimeout(() => {
 				if (!srcAttributeChanged) {
-					timeout.clear(timeoutId);
+					clearTimeout(timeoutId);
 					lazyLoadEnd(maxTimeoutId, idleTimeoutId, observer, options, resolve);
 				}
 			}, options.maxLazyLoadImagesIdleTime * 1.2);
-			const maxTimeoutId = setTimeout(() => {
-				timeout.clear(timeoutId);
-				lazyLoadEnd(maxTimeoutId, idleTimeoutId, observer, options, resolve);
-			}, options.maxLazyLoadImagesIdleTime * 3);
+			const maxTimeoutId = await browser.runtime.sendMessage({ setTimeoutRequest: true, delay: options.maxLazyLoadImagesIdleTime * 3 });
+			const maxTimeoutCallback = message => {
+				browser.runtime.onMessage.removeListener(maxTimeoutCallback);
+				if (message.onTimeout) {
+					clearTimeout(timeoutId);
+					lazyLoadEnd(maxTimeoutId, idleTimeoutId, observer, options, resolve);
+				}
+			};
+			browser.runtime.onMessage.addListener(maxTimeoutCallback);
 			const observer = new MutationObserver(mutations => {
 				mutations = mutations.filter(mutation => mutation.type == ATTRIBUTES_MUTATION_TYPE);
 				if (mutations.length) {
@@ -61,13 +66,13 @@ this.lazyLoader = this.lazyLoader || (() => {
 	}
 
 	function deferLazyLoadEnd(timeoutId, maxTimeoutId, idleTimeoutId, observer, options, resolve) {
-		timeout.clear(timeoutId);
-		return timeout.set(() => lazyLoadEnd(maxTimeoutId, idleTimeoutId, observer, options, resolve), options.maxLazyLoadImagesIdleTime);
+		clearTimeout(timeoutId);
+		return setTimeout(() => lazyLoadEnd(maxTimeoutId, idleTimeoutId, observer, options, resolve), options.maxLazyLoadImagesIdleTime);
 	}
 
 	function lazyLoadEnd(maxTimeoutId, idleTimeoutId, observer, options, resolve) {
-		clearTimeout(maxTimeoutId);
-		timeout.clear(idleTimeoutId);
+		browser.runtime.sendMessage({ clearTimeout: true, id: maxTimeoutId });
+		clearTimeout(idleTimeoutId);
 		injectScript(SCRIPT_AFTER_PATH);
 		setTimeout(resolve, 100);
 		observer.disconnect();
@@ -80,4 +85,20 @@ this.lazyLoader = this.lazyLoader || (() => {
 		scriptElement.onload = () => scriptElement.remove();
 	}
 
+	async function setTimeout(callback, delay) {
+		const timeoutId = await browser.runtime.sendMessage({ setTimeoutRequest: true, delay });
+		const timeoutCallback = message => {
+			if (message.onTimeout && message.id == timeoutId) {
+				browser.runtime.onMessage.removeListener(timeoutCallback);
+				callback();
+			}
+		};
+		browser.runtime.onMessage.addListener(timeoutCallback);
+		return timeoutId;
+	}
+
+	async function clearTimeout(timeoutId) {
+		await browser.runtime.sendMessage({ clearTimeout: true, id: timeoutId });
+	}
+
 })();

manifest.json

@@ -22,7 +22,7 @@
 				"lib/single-file/doc-helper.js",
 				"lib/single-file/util/timeout.js",
 				"lib/fetch/content/fetch.js",
-				"/lib/lazy/content-lazy-loader.js",
+				"/lib/lazy/content/content-lazy-loader.js",
 				"lib/single-file/frame-tree.js",
 				"extension/core/content/content-frame.js"
 			],
@@ -63,6 +63,7 @@
 			"extension/ui/bg/ui-menu.js",
 			"extension/ui/bg/ui-button.js",
 			"extension/ui/bg/ui-autosave.js",
+			"lib/lazy/bg/lazy-timeout.js",
 			"lib/single-file/vendor/css-minifier.js",
 			"lib/single-file/vendor/css-tree.js",
 			"lib/single-file/vendor/css-media-query-parser.js",
@@ -115,8 +116,8 @@
 	},
 	"incognito": "spanning",
 	"web_accessible_resources": [
-		"lib/lazy/web-lazy-loader-before.js",
-		"lib/lazy/web-lazy-loader-after.js"
+		"lib/lazy/web/web-lazy-loader-before.js",
+		"lib/lazy/web/web-lazy-loader-after.js"
 	],
 	"manifest_version": 2,
 	"default_locale": "en"