removed responsiveImageData

extension/core/bg/processor.js

@@ -37,7 +37,6 @@ singlefile.processor = (() => {
 		options.canvasData = message.canvasData;
 		options.fontsData = message.fontsData;
 		options.stylesheetContents = message.stylesheetContents;
-		options.responsiveImageData = message.responsiveImageData;
 		options.imageData = message.imageData;
 		options.postersData = message.postersData;
 		options.usedFonts = message.usedFonts;

extension/core/content/content-autosave.js

@@ -54,7 +54,6 @@ this.singlefile.autosave = this.singlefile.autosave || (async () => {
 					canvasData: docData.canvasData,
 					fontsData: docData.fontsData,
 					stylesheetContents: docData.stylesheetContents,
-					responsiveImageData: docData.responsiveImageData,
 					imageData: docData.imageData,
 					postersData: docData.postersData,
 					usedFonts: docData.usedFonts,
@@ -95,7 +94,6 @@ this.singlefile.autosave = this.singlefile.autosave || (async () => {
 				canvasData: docData.canvasData,
 				fontsData: docData.fontsData,
 				stylesheetContents: docData.stylesheetContents,
-				responsiveImageData: docData.responsiveImageData,
 				imageData: docData.imageData,
 				postersData: docData.postersData,
 				usedFonts: docData.usedFonts,

lib/lazy/content-lazy-loader.js

@@ -47,7 +47,13 @@ this.lazyLoader = this.lazyLoader || (() => {
 				lazyLoadEnd(maxTimeoutId, idleTimeoutId, observer, resolve);
 			}, MAX_LAZY_LOADING_TIMEOUT);
 			const observer = new MutationObserver(mutations => {
-				if (mutations.find(mutation => mutation.type == ATTRIBUTES_MUTATION_TYPE)) {
+				mutations = mutations.filter(mutation => mutation.type == ATTRIBUTES_MUTATION_TYPE);
+				if (mutations.length) {
+					mutations.forEach(mutation => {
+						if (mutation.target.src) {
+							mutation.target.dataset.lazySrc = mutation.target.src;
+						}
+					});
 					srcAttributeChanged = true;
 					timeoutId = deferLazyLoadEnd(timeoutId, maxTimeoutId, idleTimeoutId, observer, resolve);
 				}

lib/single-file/doc-helper.js

@@ -25,7 +25,6 @@ this.docHelper = this.docHelper || (() => {
 	const REMOVED_CONTENT_ATTRIBUTE_NAME = "data-single-file-removed-content";
 	const PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME = "data-single-file-preserved-space-element";
 	const WIN_ID_ATTRIBUTE_NAME = "data-frame-tree-win-id";
-	const RESPONSIVE_IMAGE_ATTRIBUTE_NAME = "data-single-file-responsive-image";
 	const IMAGE_ATTRIBUTE_NAME = "data-single-file-image";
 	const INPUT_VALUE_ATTRIBUTE_NAME = "data-single-file-value";
 	const SHEET_ATTRIBUTE_NAME = "data-single-file-sheet";
@@ -47,7 +46,6 @@ this.docHelper = this.docHelper || (() => {
 		windowIdAttributeName,
 		preservedSpaceAttributeName,
 		removedContentAttributeName,
-		responsiveImagesAttributeName,
 		imagesAttributeName,
 		inputValueAttributeName,
 		sheetAttributeName
@@ -102,7 +100,6 @@ this.docHelper = this.docHelper || (() => {
 			canvasData,
 			fontsData: getFontsData(doc),
 			stylesheetContents: getStylesheetContents(doc),
-			responsiveImageData: getResponsiveImageData(doc, options),
 			imageData,
 			postersData: getPostersData(doc),
 			usedFonts
@@ -211,15 +208,10 @@ this.docHelper = this.docHelper || (() => {
 		if (options.compressHTML) {
 			doc.querySelectorAll("[" + preservedSpaceAttributeName(options.sessionId) + "]").forEach(element => element.removeAttribute(preservedSpaceAttributeName(options.sessionId)));
 		}
-		doc.querySelectorAll("[" + responsiveImagesAttributeName(options.sessionId) + "]").forEach(element => element.removeAttribute(responsiveImagesAttributeName(options.sessionId)));
 		doc.querySelectorAll("[" + imagesAttributeName(options.sessionId) + "]").forEach(element => element.removeAttribute(imagesAttributeName(options.sessionId)));
 		doc.querySelectorAll("[" + inputValueAttributeName(options.sessionId) + "]").forEach(element => element.removeAttribute(inputValueAttributeName(options.sessionId)));
 	}
 
-	function responsiveImagesAttributeName(sessionId) {
-		return RESPONSIVE_IMAGE_ATTRIBUTE_NAME + (sessionId ? "-" + sessionId : "");
-	}
-
 	function imagesAttributeName(sessionId) {
 		return IMAGE_ATTRIBUTE_NAME + (sessionId || "");
 	}
@@ -287,12 +279,12 @@ this.docHelper = this.docHelper || (() => {
 			doc.querySelectorAll("img").forEach((imageElement, imageElementIndex) => {
 				imageElement.setAttribute(imagesAttributeName(options.sessionId), imageElementIndex);
 				const imageData = {
-					src: imageElement.currentSrc || imageElement.src
+					currentSrc: (options.lazyLoadImages && imageElement.dataset.lazySrc) || imageElement.currentSrc
 				};
+				delete imageElement.dataset.lazySrc;
 				const computedStyle = win.getComputedStyle(imageElement);
 				if (computedStyle) {
 					imageData.size = getSize(win, imageElement);
-					imageData.empty = imageElement.naturalWidth <= 1 && imageElement.naturalHeight <= 1;
 					if ((!computedStyle.getPropertyValue("background-image") || computedStyle.getPropertyValue("background-image") == "none") && imageData.size.pxWidth > 1 && imageData.size.pxHeight > 1) {
 						imageData.replaceable = true;
 						imageData.backgroundColor = computedStyle.getPropertyValue("background-color");
@@ -335,44 +327,6 @@ this.docHelper = this.docHelper || (() => {
 		}
 	}
 
-	function getResponsiveImageData(doc, options) {
-		if (doc) {
-			const data = [];
-			doc.querySelectorAll("picture, img[srcset]").forEach((element, elementIndex) => {
-				const tagName = element.tagName.toLowerCase();
-				let imageData = {}, imageElement;
-				element.setAttribute(responsiveImagesAttributeName(options.sessionId), elementIndex);
-				if (tagName == "picture") {
-					const sources = Array.from(element.querySelectorAll("source")).map(sourceElement => (
-						{ src: sourceElement.src, srcset: sourceElement.srcset }
-					));
-					imageElement = element.querySelector("img");
-					imageData.sources = sources;
-				}
-				if (tagName == "img") {
-					imageElement = element;
-				}
-				if (imageElement) {
-					let naturalWidth = imageElement.naturalWidth, naturalHeight = imageElement.naturalHeight;
-					if (naturalWidth <= 1 && naturalHeight <= 1) {
-						const imgElement = doc.createElement("img");
-						imgElement.src = imageElement.src;
-						doc.body.appendChild(imgElement);
-						naturalWidth = imgElement.width;
-						naturalHeight = imgElement.height;
-						imgElement.remove();
-					}
-					if (naturalWidth > 1 && naturalHeight > 1) {
-						imageData.src = (!imageElement.currentSrc.startsWith("data:") && imageElement.currentSrc) || (!imageElement.src.startsWith("data:") && imageElement.src);
-						imageData.srcset = imageElement.srcset;
-					}
-				}
-				data.push(imageData);
-			});
-			return data;
-		}
-	}
-
 	function getPostersData(doc) {
 		if (doc) {
 			const postersData = [];

lib/single-file/frame-tree.js

@@ -96,7 +96,6 @@ this.frameTree = this.frameTree || (() => {
 					frameData.baseURI = messageFrameData.baseURI;
 					frameData.title = messageFrameData.title;
 					frameData.stylesheetContents = messageFrameData.stylesheetContents;
-					frameData.responsiveImageData = messageFrameData.responsiveImageData;
 					frameData.imageData = messageFrameData.imageData;
 					frameData.postersData = messageFrameData.postersData;
 					frameData.canvasData = messageFrameData.canvasData;
@@ -262,7 +261,6 @@ this.frameTree = this.frameTree || (() => {
 			baseURI,
 			title: document.title,
 			stylesheetContents: docData.stylesheetContents,
-			responsiveImageData: docData.responsiveImageData,
 			imageData: docData.imageData,
 			postersData: docData.postersData,
 			canvasData: docData.canvasData,

lib/single-file/html-alt-images.js

@@ -18,56 +18,42 @@
  *   along with SingleFile.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* global docHelper, parseSrcset */
+/* global parseSrcset */
 
 this.altImages = this.altImages || (() => {
 
 	const EMPTY_IMAGE = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
 
 	return {
-		process(doc, options) {
-			const dataAttributeName = docHelper.responsiveImagesAttributeName(options.sessionId);
+		process(doc) {
 			doc.querySelectorAll("picture").forEach(pictureElement => {
 				const imgElement = pictureElement.querySelector("img");
 				if (imgElement) {
-					let srcData = getImgSrcData(pictureElement, imgElement, options);
+					let srcData = getImgSrcData(imgElement);
 					let { src, srcset } = srcData;
 					if (!src) {
 						const sources = Array.from(pictureElement.querySelectorAll("source")).reverse();
 						const data = getSourceSrcData(Array.from(sources));
 						src = data.src;
-						srcset = srcset || data.srcset;
-					}
-					if (!src && options.responsiveImageData) {
-						const responsiveImageData = options.responsiveImageData[Number(pictureElement.getAttribute(dataAttributeName))];
-						if (responsiveImageData.src) {
-							src = responsiveImageData.src;
-						} else if (responsiveImageData.sources) {
-							const sources = responsiveImageData.sources.reverse();
-							const data = getSourceSrcData(sources);
-							src = data.src;
-							srcset = srcset || data.srcset;
+						if (!srcset) {
+							srcset = data.srcset;
 						}
 					}
-					setSrc({ src, srcset }, pictureElement.querySelector("img"), pictureElement);
+					setSrc({ src, srcset }, imgElement, pictureElement);
 				}
 			});
-			doc.querySelectorAll(":not(picture) > img[srcset]").forEach(imgElement => setSrc(getImgSrcData(imgElement, imgElement, options), imgElement));
+			doc.querySelectorAll(":not(picture) > img[srcset]").forEach(imgElement => setSrc(getImgSrcData(imgElement), imgElement));
 		}
 	};
 
-	function getImgSrcData(pictureElement, imgElement, options) {
-		const dataAttributeName = docHelper.responsiveImagesAttributeName(options.sessionId);
+	function getImgSrcData(imgElement) {
 		let src = imgElement.getAttribute("src");
+		if (src == EMPTY_IMAGE) {
+			src = null;
+		}
 		let srcset = getSourceSrc(imgElement.getAttribute("srcset"));
-		if (options.responsiveImageData) {
-			const responsiveImageData = options.responsiveImageData[Number(pictureElement.getAttribute(dataAttributeName))];
-			if (!src && responsiveImageData.src) {
-				src = responsiveImageData.src;
-			}
-			if (srcset && responsiveImageData.srcset) {
-				srcset = getSourceSrc(responsiveImageData.srcset);
-			}
+		if (srcset == EMPTY_IMAGE) {
+			srcset = null;
 		}
 		return { src, srcset };
 	}
@@ -79,26 +65,31 @@ this.altImages = this.altImages || (() => {
 		if (!src) {
 			source = sources.find(source => getSourceSrc(source.src));
 			src = source && source.src;
+			if (src == EMPTY_IMAGE) {
+				src = null;
+			}
 		}
 		if (!srcset) {
 			source = sources.find(source => getSourceSrc(source.srcset));
 			srcset = source && source.srcset;
+			if (srcset == EMPTY_IMAGE) {
+				srcset = null;
+			}
 		}
 		return { src, srcset };
 	}
 
 	function setSrc(srcData, imgElement, pictureElement) {
-		imgElement.src = EMPTY_IMAGE;
-		imgElement.setAttribute("srcset", "");
 		if (srcData.src) {
-			imgElement.src = srcData.src;
+			imgElement.setAttribute("src", srcData.src);
 		} else {
-			if (imgElement.getAttribute("srcset")) {
-				imgElement.setAttribute("srcset", srcData.srcset || "");
-				if (!srcData.srcset) {
-					imgElement.setAttribute("sizes", "");
-				}
-			}
+			imgElement.setAttribute("src", EMPTY_IMAGE);
+		}
+		if (srcData.srcset) {
+			imgElement.setAttribute("srcset", srcData.srcset);
+		} else {
+			imgElement.setAttribute("srcset", "");
+			imgElement.setAttribute("sizes", "");
 		}
 		if (pictureElement) {
 			pictureElement.querySelectorAll("source").forEach(sourceElement => sourceElement.remove());

lib/single-file/single-file-browser.js

@@ -271,10 +271,6 @@ this.SingleFile = this.SingleFile || (() => {
 			return docHelper.removedContentAttributeName(sessionId);
 		}
 
-		static responsiveImagesAttributeName(sessionId) {
-			return docHelper.responsiveImagesAttributeName(sessionId);
-		}
-
 		static imagesAttributeName(sessionId) {
 			return docHelper.imagesAttributeName(sessionId);
 		}

lib/single-file/single-file-core.js

@@ -147,7 +147,6 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 				this.options.canvasData = docData.canvasData;
 				this.options.fontsData = docData.fontsData;
 				this.options.stylesheetContents = docData.stylesheetContents;
-				this.options.responsiveImageData = docData.responsiveImageData;
 				this.options.imageData = docData.imageData;
 				this.options.postersData = docData.postersData;
 				this.options.usedFonts = docData.usedFonts;
@@ -442,27 +441,25 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 				const dataAttributeName = DOM.imagesAttributeName(this.options.sessionId);
 				this.doc.querySelectorAll("img").forEach(imgElement => {
 					const imgData = this.options.imageData[Number(imgElement.getAttribute(dataAttributeName))];
-					if (imgData.src) {
-						imgElement.setAttribute("src", imgData.src);
+					if (imgData.currentSrc) {
+						imgElement.setAttribute("src", imgData.currentSrc);
 					}
 				});
 				if (this.options.lazyLoadImages) {
-					this.doc.querySelectorAll("img[data-srcset]").forEach(imgElement => {
-						const imgData = this.options.imageData[Number(imgElement.getAttribute(dataAttributeName))];
-						if (!imgData.srcset && imgElement.getAttribute("data-srcset")) {
-							imgElement.setAttribute("srcset", imgElement.dataset.srcset);
-							imgElement.removeAttribute("data-srcset");
-						}
-					});
 					this.doc.querySelectorAll("img[data-src]").forEach(imgElement => {
 						const imgData = this.options.imageData[Number(imgElement.getAttribute(dataAttributeName))];
-						if ((!imgData.src || imgData.empty) && !imgData.srcset && imgElement.getAttribute("data-src")) {
+						if (!imgElement.getAttribute("src") && imgElement.getAttribute("data-src")) {
 							imgData.src = imgElement.dataset.src;
-							imgData.empty = false;
 							imgElement.setAttribute("src", imgElement.dataset.src);
 							imgElement.removeAttribute("data-src");
 						}
 					});
+					this.doc.querySelectorAll("img[data-srcset]").forEach(imgElement => {
+						if (!imgElement.getAttribute("srcset") && imgElement.getAttribute("data-srcset")) {
+							imgElement.setAttribute("srcset", imgElement.dataset.srcset);
+							imgElement.removeAttribute("data-srcset");
+						}
+					});
 				}
 			}
 		}
@@ -553,7 +550,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 		}
 
 		removeAlternativeImages() {
-			DOM.removeAlternativeImages(this.doc, this.options);
+			DOM.removeAlternativeImages(this.doc);
 		}
 
 		removeHiddenElements() {
@@ -750,7 +747,6 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 					options.currentSrcImages = frameData.currentSrcImages;
 					options.fontsData = frameData.fontsData;
 					options.imageData = frameData.imageData;
-					options.responsiveImageData = frameData.responsiveImageData;
 					options.usedFonts = frameData.usedFonts;
 					frameData.processor = new PageProcessor(options);
 					frameData.frameElement = frameElement;