single-file-core 1.5.118 → 1.5.120

package/core/helper.js

@@ -493,6 +493,15 @@ function getStylesheetsContent(styleSheets, adoptedStyleSheetsCache = new Map())
 	}
 }
 
+// an untouched canvas is fully transparent, so it encodes exactly like a blank one of the same
+// size: comparing the two is cheaper than reading the pixels back and needs no drawing context
+function isBlankCanvas(doc, element, dataURI) {
+	const blankElement = doc.createElement("canvas");
+	blankElement.width = element.width;
+	blankElement.height = element.height;
+	return blankElement.toDataURL("image/png") == dataURI;
+}
+
 function getResourcesInfo(win, doc, element, options, data, elementHidden, computedStyle) {
 	const tagName = element.tagName && element.tagName.toUpperCase();
 	if (tagName == "CANVAS") {
@@ -501,13 +510,19 @@ function getResourcesInfo(win, doc, element, options, data, elementHidden, compu
 			backgroundColor: canvasComputedStyle && canvasComputedStyle.getPropertyValue("background-color")
 		};
 		try {
-			canvasData.dataURI = element.toDataURL("image/png");
+			const dataURI = element.toDataURL("image/png");
+			// a canvas in a page SingleFile has already saved is empty, no script ran to draw into
+			// it, and the picture it displays is the background image the previous save left
+			// behind. An empty bitmap must not overwrite it
+			const backgroundImage = canvasComputedStyle ? canvasComputedStyle.getPropertyValue("background-image") : element.style.getPropertyValue("background-image");
+			if (backgroundImage && backgroundImage != "none" && isBlankCanvas(doc, element, dataURI)) {
+				canvasData.blank = true;
+			} else {
+				canvasData.dataURI = dataURI;
+			}
 			// eslint-disable-next-line no-unused-vars
 		} catch (error) {
-			// a canvas painted with a cross-origin resource is tainted and toDataURL throws for the
-			// whole element, its own drawing included. The entry is pushed and the element marked
-			// anyway: the loss is then counted and reported instead of being silent, and an
-			// out-of-page fallback re-rendering the element has something to find it by
+			// ignored
 		}
 		data.canvases.push(canvasData);
 		element.setAttribute(CANVAS_ATTRIBUTE_NAME, data.canvases.length - 1);
@@ -611,27 +626,11 @@ function getResourcesInfo(win, doc, element, options, data, elementHidden, compu
 	}
 }
 
-// Every family in the computed font-family is recorded, and the set of faces the document actually
-// resolved is deliberately NOT consulted. Narrowing the list to the loaded faces is the obvious
-// idea — a fallback stack names every family the page might need and only some are used — and it
-// was written in 2019, wired to an option nothing ever set, and dead until it was reconnected here.
-// Reconnected, it saved nothing measurable on nine real pages and cost fidelity twice: a face
-// matched on its declared style is not found when the browser SYNTHESIZED that style, so a family
-// drawn in an italic it declares no face for was dropped from the page that draws it; and a webfont
-// that merely failed to load on the capturing machine would be dropped from the archive for good.
-// It belongs with the unicode-range work, which needs the same information and can weigh a measured
-// benefit against those, not here.
 function getUsedFont(computedStyle, usedFonts) {
 	if (computedStyle) {
 		const fontStyle = computedStyle.getPropertyValue("font-style") || "normal";
 		computedStyle.getPropertyValue("font-family").split(",").forEach(fontFamilyName => {
 			fontFamilyName = normalizeFontFamily(fontFamilyName);
-			// an element with no computed font-family at all is one whose styles could not be read,
-			// not one drawn in a family with no name. It happens to every element of a frame that
-			// was re-parsed from its srcdoc, because the computed style is asked of the parent
-			// window and the document it belongs to is not the one being rendered. Recorded, it
-			// turns "nothing is known here" into a list of length one, which reads downstream as a
-			// complete answer and prunes every face the frame declares
 			if (fontFamilyName) {
 				const fontWeight = getFontWeight(computedStyle.getPropertyValue("font-weight"));
 				const fontVariant = computedStyle.getPropertyValue("font-variant") || "normal";
@@ -899,7 +898,9 @@ function getComputedStyle(win, element, pseudoElement) {
 function getValidFilename(filename, replacedCharacters = DEFAULT_REPLACED_CHARACTERS, replacementCharacter = DEFAULT_REPLACEMENT_CHARACTER, replacementCharacters = DEFAULT_REPLACEMENT_CHARACTERS) {
 	replacementCharacters.forEach((indexReplacementCharacter, index) => {
 		if (replacedCharacters[index] !== undefined && indexReplacementCharacter != replacedCharacters[index]) {
-			filename = filename.replace(new RegExp("[" + getCharacterClassContent(replacedCharacters[index]) + "]+", "g"), indexReplacementCharacter);
+			// no "+" here, unlike the fallback below: a lookalike replaces its character one for
+			// one, so collapsing a run would drop characters the name needs ("C++" -> "C＋")
+			filename = filename.replace(new RegExp("[" + getCharacterClassContent(replacedCharacters[index]) + "]", "g"), indexReplacementCharacter);
 		}
 	});
 	replacedCharacters.forEach((replacedCharacter, index) => {

package/core/index.js

@@ -530,6 +530,10 @@ class Processor {
 				" \n url: " + infobarURL +
 				(this.options.removeSavedDate ? " " : " \n saved date: " + infobarSaveDate) +
 				(infobarContent ? " \n info: " + infobarContent : "") + "\n";
+			// the infobar template resolves {page-title} and its kind against the captured page, so
+			// this text can carry "-->" and close the comment early, turning the rest into markup.
+			// A comment cannot escape its own delimiters, so the run is broken with a space
+			commentText = commentText.replace(/--(!?)>/g, "--$1 >");
 			const commentNode = this.doc.createComment(commentText);
 			this.doc.documentElement.insertBefore(commentNode, this.doc.documentElement.firstChild);
 		}
@@ -826,11 +830,6 @@ class Processor {
 		});
 	}
 
-	// a media element left without any source can never start, and the attribute
-	// would keep it announcing a playback that never happens. The sources are
-	// dropped whenever they could not be stored, so this is not specific to
-	// blocked videos, and it runs on the final state to leave alone an element
-	// that kept one of several sources
 	removeEmptyMediaAutoplay() {
 		this.doc.querySelectorAll("video[autoplay], audio[autoplay]").forEach(element => {
 			const sourceElements = Array.from(element.querySelectorAll("source"));
@@ -1069,7 +1068,7 @@ class Processor {
 							}
 							this.processorHelper.setBackgroundImage(canvasElement, "url(" + canvasData.dataURI + ")", backgroundStyle);
 							this.stats.add("processed", "canvas", 1);
-						} else {
+						} else if (!canvasData.blank) {
 							discardedCount++;
 							this.stats.add("discarded", "canvas", 1);
 						}

package/core/lib/doctype.js

@@ -21,9 +21,6 @@
  *   Source.
  */
 
-// this module is imported by the script embedded in self-extracting archives, it
-// must stay free of dependencies
-
 export {
 	getDoctypeString
 };

package/core/lib/processor-helper-common.js

@@ -102,10 +102,6 @@ class ProcessorHelperCommon {
 			["image, feImage", "xlink:href"],
 			["image, feImage", "href"]
 		];
-		// an inline svg is document content, not a fetched resource: blocking images empties the
-		// references it makes outwards (image, feImage and use are all processed below) and leaves
-		// the markup itself alone. Removing it deleted JS-drawn charts, inline icons, and the
-		// <defs> holding gradients and filters that CSS applies to ordinary HTML elements
 		let resourcePromises = processAttributeArgs.map(([selector, attributeName, removeElementIfMissing, processDuplicates]) =>
 			this.processAttribute(doc, doc.querySelectorAll(selector), attributeName, baseURI, options, "image", resources, removeElementIfMissing, batchRequest, styles, processDuplicates)
 		);
@@ -137,9 +133,6 @@ class ProcessorHelperCommon {
 				resourceElement.setAttribute("data-sf-original-href", originalResourceURL);
 			}
 			let resourceURL = normalizeURL(originalResourceURL);
-			// a reference into the page itself costs no request, so blocking images must not empty
-			// it: normalizeURL drops the fragment, which leaves a bare "#symbol" as the empty path
-			// below and a same-document URL matching options.url
 			if (testValidPath(resourceURL) && !testIgnoredPath(resourceURL)) {
 				resourceElement.setAttribute(attributeName, util.EMPTY_RESOURCE);
 				if (!options.blockImages) {
@@ -257,9 +250,6 @@ class ProcessorHelperCommon {
 		}));
 	}
 
-	// a video or an audio element gets the attribute REMOVED rather than emptied: util.EMPTY_RESOURCE
-	// is inert on an image but not on a media element, which would attempt the load, fail, and sit
-	// in an error state where removing the attribute leaves the poster showing cleanly
 	setAttributeEmpty(resourceElement, attributeName, expectedType) {
 		if (expectedType == "video" || expectedType == "audio") {
 			resourceElement.removeAttribute(attributeName);
@@ -454,11 +444,6 @@ class ProcessorHelperCommon {
 				const key = this.getFontKey(ruleData);
 				const fontInfo = fontsDetails.fonts.get(key);
 				if (fontInfo) {
-					// a face declaring the same descriptors and the same sources as one already kept
-					// cannot change what that one did, and its sources are embedded a second time. A
-					// stylesheet reached from two <link> elements, or imported by two sheets, repeats
-					// every face it carries. The test is made before the await: the sources are read
-					// as they stand for both rules, and processing them is what would interleave
 					const ruleKey = key + " " + this.getPropertyValue(ruleData, "src");
 					if (fontsDetails.emittedFonts.has(ruleKey)) {
 						removedRules.push(cssRule);
@@ -524,10 +509,6 @@ class ProcessorHelperCommon {
 			medias: new Map(),
 			supports: new Map(),
 			layers: new Map(),
-			// the faces already emitted in this cascade context, so a second declaration of one of
-			// them can be dropped instead of embedding the same bytes again. Each media, supports
-			// and layer block gets its own info, so only rules that apply under the same conditions
-			// are ever compared
 			emittedFonts: new Set()
 		};
 	}

package/core/lib/processor-helper-inline.js

@@ -44,8 +44,6 @@ const EMPTY_URL_SOURCE = /^url\(["']?data:[^,]*,?["']?\)/;
 const LOCAL_SOURCE = "local(";
 const FONT_MAX_LOAD_DELAY = 5000;
 const DUPLICATE_STYLESHEET_ATTRIBUTE_NAME = "data-sf-duplicate-stylesheet-ref";
-// the attributes that say how the link fetched its stylesheet, which the style element now holding
-// that stylesheet has no use for. Everything else identified the element in the page
 const LINK_FETCH_ATTRIBUTE_NAMES = ["rel", "href", "type", "media", "as", "crossorigin", "integrity",
 	"referrerpolicy", "hreflang", "sizes", "imagesrcset", "imagesizes", "fetchpriority"];
 
@@ -166,10 +164,6 @@ function getProcessorHelperClass(utilInstance) {
 				if (stylesheetInfo) {
 					stylesheets.delete(linkElement);
 					const styleElement = doc.createElement("style");
-					// the element is replaced rather than rewritten, so whatever identified it in
-					// the page has to be carried over: an id a script still looks up, a class a
-					// selector still matches. The attributes left out are the ones that describe
-					// the fetch the style element no longer performs
 					Array.from(linkElement.attributes).forEach(({ name, value }) => {
 						if (!LINK_FETCH_ATTRIBUTE_NAMES.includes(name.toLowerCase())) {
 							styleElement.setAttribute(name, value);

package/core/lib/processor-helper.js

@@ -36,6 +36,7 @@ const CANVAS_TAG_FOUND = /<canvas/gi;
 const EMPTY_URL_SOURCE = /^url\(["']?data:[^,]*,?["']?\)/;
 const LOCAL_SOURCE = "local(";
 const FONT_MAX_LOAD_DELAY = 5000;
+const SCRIPT_EXTENSION = ".js";
 const LINK_OWN_ATTRIBUTE_NAMES = ["rel", "type", "href", "media"];
 
 let util;
@@ -108,10 +109,6 @@ function getProcessorHelperClass(utilInstance) {
 				linkElement.setAttribute("type", "text/css");
 				const name = "stylesheet_" + resources.stylesheets.size + ".css";
 				linkElement.setAttribute("href", name);
-				// the shared copy is generated from the stylesheet of the element the duplicates were
-				// folded into, not from the text that was captured: that text still names the resources
-				// by their addresses in the original page, which resolve to nothing once the page is
-				// inside the archive
 				const { styleElement, content } = options.inlineStylesheets.get(stylesheetRefIndex);
 				const sharedEntry = entries.find(([key]) => key.element == styleElement);
 				const stylesheet = sharedEntry
@@ -119,10 +116,6 @@ function getProcessorHelperClass(utilInstance) {
 					: cssTree.parse(content, { context: "stylesheet", parseCustomProperty: true });
 				resources.stylesheets.set(resources.stylesheets.size, { name, content: this.generateStylesheetContent(stylesheet, options) });
 				linkElements.set(stylesheetRefIndex, linkElement);
-				// the element the duplicates were folded into is not itself a duplicate, so it is
-				// absent from inlineStylesheetsRefs and would keep its content inline: the archive
-				// would then hold the same stylesheet twice, once as the entry the links point at
-				// and once in the page
 				sharedStyleElements.set(styleElement, stylesheetRefIndex);
 			});
 			for (const [key, stylesheetInfo] of entries) {
@@ -149,10 +142,6 @@ function getProcessorHelperClass(utilInstance) {
 						styleElement.textContent = this.generateStylesheetContent(stylesheetInfo.stylesheet, options);
 					} else {
 						const linkElement = linkElements.get(stylesheetRefIndex).cloneNode(true);
-						// the element is replaced rather than rewritten, so whatever identified it in
-						// the page has to be carried over: an id a script still looks up, a class a
-						// selector still matches. The attributes left out are the ones that describe
-						// the link itself, which the code around here sets
 						Array.from(styleElement.attributes).forEach(({ name, value }) => {
 							if (!LINK_OWN_ATTRIBUTE_NAMES.includes(name.toLowerCase())) {
 								linkElement.setAttribute(name, value);
@@ -191,9 +180,6 @@ function getProcessorHelperClass(utilInstance) {
 						} catch (error) {
 							// ignored
 						}
-						// a sheet already open higher in this import chain must not be entered again: the
-						// ancestors are carried down the branch, not accumulated across the whole document,
-						// so two sibling imports of one sheet are still both resolved
 						if (testValidURL(resourceURL) && !importedStyleSheets.has(resourceURL)) {
 							const mediaQueryListNode = cssTree.find(node, node => node.type == "MediaQueryList");
 							let mediaText, layerName, supportsCondition;
@@ -231,9 +217,6 @@ function getProcessorHelperClass(utilInstance) {
 								stylesheetInfo.stylesheet = cssTree.parse(content.data, { context: "stylesheet", parseCustomProperty: true });
 								stylesheet = stylesheetInfo.stylesheet;
 								const ancestorStyleSheets = new Set(importedStyleSheets);
-								// both identities of the sheet are remembered: a redirect makes the URL that was
-								// requested and the URL that answered differ, and an import of either one is the
-								// same cycle
 								ancestorStyleSheets.add(requestedURL);
 								ancestorStyleSheets.add(resourceURL);
 								await this.resolveImportURLs(stylesheetInfo, resourceURL, options, workStylesheet, resources, stylesheets, ancestorStyleSheets);
@@ -472,7 +455,11 @@ function getProcessorHelperClass(utilInstance) {
 				networkTimeout: options.networkTimeout
 			});
 			content = getUpdatedResourceContent(resourceURL, options) || content;
-			const name = "scripts/" + indexResource + extension;
+			// the extension is taken from the URL when the content type is not in the map, and a
+			// script URL says nothing about the content: a module served as text/javascript from a
+			// ".ts" URL was named ".ts", stored uncompressed and served back as video/mp2t, which
+			// the browser refuses to execute. Stylesheets have always been named this way
+			const name = "scripts/" + indexResource + SCRIPT_EXTENSION;
 			element.setAttribute("src", name);
 			resources.scripts.set(indexResource, { name, content, extension, contentType, url: resourceURL });
 		}
@@ -491,7 +478,7 @@ function getProcessorHelperClass(utilInstance) {
 				acceptHeaders: options.acceptHeaders,
 				networkTimeout: options.networkTimeout
 			});
-			const name = "scripts/" + indexResource + extension;
+			const name = "scripts/" + indexResource + SCRIPT_EXTENSION;
 			if (workletOptions) {
 				scriptElement.textContent += `  CSS.paintWorklet.addModule("${name}", ${JSON.stringify(workletOptions)});\n`;
 			} else {