single-file-core 1.0.63 → 1.0.65

package/common/content-infobar-web.js

@@ -21,111 +21,11 @@
  *   Source.
  */
 
-/* global globalThis, window, document, Node, getComputedStyle, XPathResult */
+/* global globalThis, window, document */
 
-(globalThis => {
+import { appendInfobar, refreshInfobarInfo, extractInfobarData } from "./infobar.js";
 
-	const INFOBAR_TAGNAME = "singlefile-infobar";
-	const LINK_ICON = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAABhmlDQ1BJQ0MgcHJvZmlsZQAAKJF9kj1Iw0AYht+mSkUrDnYQcchQnSyIijqWKhbBQmkrtOpgcukfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVK/C4ptIjx4LiH9+59+e67A4RGhalm1wSgapaRisfEbG5VDLyiDwEAvZiVmKkn0osZeI6ve/j4ehfhWd7n/hz9St5kgE8kjjLdsIg3iGc2LZ3zPnGIlSSF+Jx43KACiR+5Lrv8xrnosMAzQ0YmNU8cIhaLHSx3MCsZKvE0cVhRNcoXsi4rnLc4q5Uaa9XJbxjMaytprtMcQRxLSCAJETJqKKMCCxFaNVJMpGg/5uEfdvxJcsnkKoORYwFVqJAcP/gb/O6tWZiadJOCMaD7xbY/RoHALtCs2/b3sW03TwD/M3Cltf3VBjD3SXq9rYWPgIFt4OK6rcl7wOUOMPSkS4bkSH6aQqEAvJ/RM+WAwVv6EGtu31r7OH0AMtSr5Rvg4BAYK1L2use9ezr79u+ZVv9+AFlNcp0UUpiqAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AsHAB8H+DhhoQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAJUExURQAAAICHi4qKioTuJAkAAAABdFJOUwBA5thmAAAAAWJLR0QCZgt8ZAAAAJJJREFUOI3t070NRCEMA2CnYAOyDyPwpHj/Va7hJ3FzV7zy3ET5JIwoAF6Jk4wzAJAkzxAYG9YRTgB+24wBgKmfrGAKTcEfAY4KRlRoIeBTgKOCERVaCPgU4Khge2GqKOBTgKOCERVaAEC/4PNcnyoSWHpjqkhwKxbcig0Q6AorXYF/+A6eIYD1lVbwG/jdA6/kA2THRAURVubcAAAAAElFTkSuQmCC";
-	const CLOSE_ICON = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAABhmlDQ1BJQ0MgcHJvZmlsZQAAKJF9kj1Iw0AYht+mSkUrDnYQcchQnSyIijqWKhbBQmkrtOpgcukfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVK/C4ptIjx4LiH9+59+e67A4RGhalm1wSgapaRisfEbG5VDLyiDwEAvZiVmKkn0osZeI6ve/j4ehfhWd7n/hz9St5kgE8kjjLdsIg3iGc2LZ3zPnGIlSSF+Jx43KACiR+5Lrv8xrnosMAzQ0YmNU8cIhaLHSx3MCsZKvE0cVhRNcoXsi4rnLc4q5Uaa9XJbxjMaytprtMcQRxLSCAJETJqKKMCCxFaNVJMpGg/5uEfdvxJcsnkKoORYwFVqJAcP/gb/O6tWZiadJOCMaD7xbY/RoHALtCs2/b3sW03TwD/M3Cltf3VBjD3SXq9rYWPgIFt4OK6rcl7wOUOMPSkS4bkSH6aQqEAvJ/RM+WAwVv6EGtu31r7OH0AMtSr5Rvg4BAYK1L2use9ezr79u+ZVv9+AFlNcp0UUpiqAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AsHAB8VC4EQ6QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAJUExURQAAAICHi4qKioTuJAkAAAABdFJOUwBA5thmAAAAAWJLR0QCZgt8ZAAAAJtJREFUOI3NkrsBgCAMRLFwBPdxBArcfxXFkO8rbKWAAJfHJ9faf9vuYX/749T5NmShm3bEwbe2SxeuM4+2oxDL1cDoKtVUjRy+tH78Cv2CS+wIiQNC1AEhk4AQeUTMWUJMfUJMSEJMSEY8kIx4IONroaYAimNxsXp1PA7PxwfVL8QnowwoVC0lig07wDDVUjAdbAnjwtow/z/bDW7eI4M2KruJAAAAAElFTkSuQmCC";
-	const IMAGE_ICON = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAABhmlDQ1BJQ0MgcHJvZmlsZQAAKJF9kj1Iw0AYht+mSkUrDnYQcchQnSyIijqWKhbBQmkrtOpgcukfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVK/C4ptIjx4LiH9+59+e67A4RGhalm1wSgapaRisfEbG5VDLyiDwEAvZiVmKkn0osZeI6ve/j4ehfhWd7n/hz9St5kgE8kjjLdsIg3iGc2LZ3zPnGIlSSF+Jx43KACiR+5Lrv8xrnosMAzQ0YmNU8cIhaLHSx3MCsZKvE0cVhRNcoXsi4rnLc4q5Uaa9XJbxjMaytprtMcQRxLSCAJETJqKKMCCxFaNVJMpGg/5uEfdvxJcsnkKoORYwFVqJAcP/gb/O6tWZiadJOCMaD7xbY/RoHALtCs2/b3sW03TwD/M3Cltf3VBjD3SXq9rYWPgIFt4OK6rcl7wOUOMPSkS4bkSH6aQqEAvJ/RM+WAwVv6EGtu31r7OH0AMtSr5Rvg4BAYK1L2use9ezr79u+ZVv9+AFlNcp0UUpiqAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AsHADIRLMaOHwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAPUExURQAAAIqKioyNjY2OjvDw8L2y1DEAAAABdFJOUwBA5thmAAAAAWJLR0QB/wIt3gAAAGNJREFUSMdjYCAJsLi4OBCQx6/CBQwIGIDPCBcXAkYQUsACU+AwlBVQHg6Eg5pgZBGOboIJZugDFwRwoJECJCUOhJI1wZwzqmBUwagCuipgIqTABG9h7YIKaKGAURAFEF/6AQAO4HqSoDP8bgAAAABJRU5ErkJggg==";
-	const SINGLEFILE_COMMENT = "SingleFile";
-	const SINGLE_FILE_UI_ELEMENT_CLASS = "single-file-ui-element";
-	const INFOBAR_STYLES = `
-	.infobar {
-		background-color: #737373;
-		color: white;
-		display: flex;
-		position: fixed;
-		top: 16px;
-		right: 16px;
-		height: auto;
-		width: auto;
-		min-height: 24px;
-		min-width: 24px;
-		background-position: center;
-		background-repeat: no-repeat;
-		z-index: 2147483647;
-		margin: 0 0 0 16px;
-		background-image: url(${IMAGE_ICON});
-		border-radius: 16px;
-		user-select: none;
-		-moz-user-select: none;
-		opacity: .7;
-		cursor: pointer;
-		padding-left: 0;
-		padding-right: 0;
-		padding-top: 0;
-		padding-bottom: 0;
-		border: 2px solid #eee;
-		background-size: 70% 70%;
-		transition: all 250ms;
-		font-size: 13px;
-	}
-	.infobar:hover {
-		opacity: 1;
-	}
-	.infobar-open {
-		opacity: 1;
-		background-color: #f9f9f9;
-		cursor: auto;
-		color: #2d2d2d;
-		padding-top: 2px;
-		padding-bottom: 2px;
-		border: 2px solid #878787;
-		background-image: none;
-		border-radius: 8px;
-		user-select: initial;
-		-moz-user-select: initial;
-	}
-	.infobar-close-button {
-		display: none;
-		opacity: .7;
-		padding-top: 4px;
-		padding-left: 8px;
-		padding-right: 8px;
-		cursor: pointer;
-		transition: opacity 250ms;
-		height: 16px;
-	}
-	.infobar-close-button:hover {
-		opacity: 1;
-	}
-	.infobar-content {
-		display: none;
-		font-family: Arial;
-		font-size: 14px;
-		line-height: 22px;
-		word-break: break-word;
-		white-space: pre-wrap;
-		position: relative;
-		top: 1px;
-		text-align: left;
-	}
-	.infobar-link {
-		display: none;
-		padding-left: 8px;
-		padding-right: 8px;
-		line-height: 11px;
-		cursor: pointer;
-		user-select: none;
-		outline: 0;
-	}
-	.infobar-link-icon {
-		padding-top: 4px;
-		padding-left: 2px;
-		cursor: pointer;
-		opacity: .7;
-		transition: opacity 250ms;
-		height: 16px;
-	}
-	.infobar-link-icon:hover {
-		opacity: 1;
-	}
-	.infobar-open .infobar-close-button, .infobar-open .infobar-content, .infobar-open .infobar-link {
-		display: inline-block;
-	}`;
-	let SHADOW_DOM_SUPPORTED = true;
+(globalThis => {
 
 	const browser = globalThis.browser;
 
@@ -137,169 +37,26 @@
 		}
 	}
 	if (globalThis.singlefile) {
-		globalThis.singlefile.infobar = { 
+		globalThis.singlefile.infobar = {
 			displayIcon
 		};
 	}
 
 	async function displayIcon() {
-		const result = document.evaluate("//comment()", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
-		let singleFileComment = result && result.singleNodeValue;
-		if (singleFileComment && isSingleFileComment(singleFileComment)) {
-			const info = singleFileComment.textContent.split("\n");
-			const [, , urlData, ...optionalData] = info;
-			const urlMatch = urlData.match(/^ url: (.*) ?$/);
-			const url = urlMatch && urlMatch[1];
-			if (url) {
-				let options;
-				if (browser && browser.runtime && browser.runtime.sendMessage) {
-					try {
-						options = await browser.runtime.sendMessage({ method: "tabs.getOptions", url });
-					} catch (error) {
-						options = { displayInfobar: true };
-					}
-				} else {
-					options = { displayInfobar: true };
-				}
-				if (options.displayInfobar) {
-					await initInfobar(url, optionalData);
+		let options = { displayInfobar: true };
+		const infoData = extractInfobarData(document);
+		if (infoData && infoData.saveUrl) {
+			if (browser && browser.runtime && browser.runtime.sendMessage) {
+				try {
+					options = await browser.runtime.sendMessage({ method: "tabs.getOptions", url: infoData.saveUrl });
+				} catch (error) {
+					// ignored
 				}
 			}
-		}
-	}
-
-	function isSingleFileComment(node) {
-		return node.nodeType == Node.COMMENT_NODE && node.textContent.includes(SINGLEFILE_COMMENT);
-	}
-
-	async function initInfobar(url, optionalData /* saveDate, infoData */) {
-		let infobarElement = document.querySelector(INFOBAR_TAGNAME);
-		if (!infobarElement) {
-			let infoData = "";
-			if (optionalData.length) {
-				const saveDate = optionalData[0].split("saved date: ")[1];
-				if (saveDate) {
-					optionalData.shift();
-				}
-				if (optionalData.length > 1) {
-					let content = optionalData[0].split("info: ")[1].trim();
-					for (let indexLine = 1; indexLine < optionalData.length - 1; indexLine++) {
-						content += "\n" + optionalData[indexLine].trim();
-					}
-					infoData = content.trim();
-				} else {
-					infoData = saveDate;
-				}
+			if (options.displayInfobar) {
+				appendInfobar(document, options, true);
+				refreshInfobarInfo(document, infoData);
 			}
-			infoData = infoData || "No info";
-			infobarElement = createElement(INFOBAR_TAGNAME, document.body);
-			infobarElement.className = SINGLE_FILE_UI_ELEMENT_CLASS;
-			const shadowRoot = await getShadowRoot(infobarElement);
-			const styleElement = document.createElement("style");
-			styleElement.textContent = INFOBAR_STYLES;
-			shadowRoot.appendChild(styleElement);
-			const infobarContent = document.createElement("div");
-			infobarContent.classList.add("infobar");
-			shadowRoot.appendChild(infobarContent);
-			const closeElement = document.createElement("img");
-			closeElement.classList.add("infobar-close-button");
-			infobarContent.appendChild(closeElement);
-			closeElement.src = CLOSE_ICON;
-			closeElement.onclick = event => {
-				if (event.button === 0) {
-					infobarElement.remove();
-				}
-			};
-			const infoElement = document.createElement("span");
-			infobarContent.appendChild(infoElement);
-			infoElement.classList.add("infobar-content");
-			infoElement.textContent = infoData;
-			const linkElement = document.createElement("a");
-			linkElement.classList.add("infobar-link");
-			infobarContent.appendChild(linkElement);
-			linkElement.target = "_blank";
-			linkElement.rel = "noopener noreferrer";
-			linkElement.title = "Open source URL: " + url;
-			linkElement.href = url;
-			const imgElement = document.createElement("img");
-			imgElement.classList.add("infobar-link-icon");
-			linkElement.appendChild(imgElement);
-			imgElement.src = LINK_ICON;
-			hideInfobar(infobarContent);
-
-			document.addEventListener("click", event => {
-				if (event.button === 0) {
-					let element = event.target;
-					while (element && element != infobarElement) {
-						element = element.parentElement;
-					}
-					if (element != infobarElement) {
-						hideInfobar(infobarContent);
-					}
-				}
-			});
-		}
-	}
-
-	function displayInfobar(infobarContent) {
-		if (!SHADOW_DOM_SUPPORTED) {
-			const infobarElement = document.querySelector(INFOBAR_TAGNAME);
-			const frameElement = infobarElement.childNodes[0];
-			frameElement.contentWindow.getSelection().removeAllRanges();
-		}
-		infobarContent.classList.add("infobar-open");
-		infobarContent.onclick = null;
-		infobarContent.onmouseout = null;
-		if (!SHADOW_DOM_SUPPORTED) {
-			const infobarElement = document.querySelector(INFOBAR_TAGNAME);
-			const frameElement = infobarElement.childNodes[0];
-			frameElement.style.setProperty("width", "100vw", "important");
-			frameElement.style.setProperty("height", "100vh", "important");
-			frameElement.style.setProperty("width", (infobarContent.getBoundingClientRect().width + 33) + "px", "important");
-			frameElement.style.setProperty("height", (infobarContent.getBoundingClientRect().height + 21) + "px", "important");
-		}
-	}
-
-	function hideInfobar(infobarContent) {
-		infobarContent.classList.remove("infobar-open");
-		infobarContent.onclick = event => {
-			if (event.button === 0) {
-				displayInfobar(infobarContent);
-				return false;
-			}
-		};
-		if (!SHADOW_DOM_SUPPORTED) {
-			const infobarElement = document.querySelector(INFOBAR_TAGNAME);
-			const frameElement = infobarElement.childNodes[0];
-			frameElement.style.setProperty("width", "44px", "important");
-			frameElement.style.setProperty("height", "48px", "important");
-		}
-	}
-
-	function createElement(tagName, parentElement) {
-		const element = document.createElement(tagName);
-		parentElement.appendChild(element);
-		Array.from(getComputedStyle(element)).forEach(property => element.style.setProperty(property, "initial", "important"));
-		return element;
-	}
-
-	async function getShadowRoot(element) {
-		if (element.attachShadow) {
-			return element.attachShadow({ mode: "open" });
-		} else {
-			SHADOW_DOM_SUPPORTED = false;
-			const iframe = createElement("iframe", element);
-			iframe.style.setProperty("background-color", "transparent", "important");
-			iframe.style.setProperty("position", "fixed", "important");
-			iframe.style.setProperty("top", 0, "important");
-			iframe.style.setProperty("right", 0, "important");
-			iframe.style.setProperty("width", "44px", "important");
-			iframe.style.setProperty("height", "48px", "important");
-			iframe.style.setProperty("z-index", 2147483647, "important");
-			return new Promise(resolve => {
-				iframe.contentDocument.body.style.setProperty("margin", 0);
-				iframe.onload = () => resolve(iframe.contentDocument.body);
-			});
 		}
 	}
 

package/common/infobar.js

@@ -0,0 +1,277 @@
+/*
+ * Copyright 2010-2022 Gildas Lormeau
+ * contact : gildas.lormeau <at> gmail.com
+ * 
+ * This file is part of SingleFile.
+ *
+ *   The code in this file is free software: you can redistribute it and/or 
+ *   modify it under the terms of the GNU Affero General Public License 
+ *   (GNU AGPL) as published by the Free Software Foundation, either version 3
+ *   of the License, or (at your option) any later version.
+ * 
+ *   The code in this file is distributed in the hope that it will be useful, 
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of 
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero 
+ *   General Public License for more details.
+ *
+ *   As additional permission under GNU AGPL version 3 section 7, you may 
+ *   distribute UNMODIFIED VERSIONS OF THIS file without the copy of the GNU 
+ *   AGPL normally required by section 4, provided you include this license 
+ *   notice and a URL through which recipients can access the Corresponding 
+ *   Source.
+ */
+
+/* global getComputedStyle, XPathResult, Node */
+
+const INFOBAR_TAGNAME = "single-file-infobar";
+const INFOBAR_STYLES = `
+.infobar,
+.infobar .infobar-icon,
+.infobar .infobar-link-icon {
+  min-inline-size: 28px;
+  min-block-size: 28px;
+  box-sizing: border-box;
+}
+
+.infobar,
+.infobar .infobar-close-icon,
+.infobar .infobar-link-icon {
+  opacity: 0.7;
+  transition: opacity 250ms;
+}
+
+.infobar:hover,
+.infobar .infobar-close-icon:hover,
+.infobar .infobar-link-icon:hover {
+  opacity: 1;
+}
+
+.infobar,
+.infobar-content {
+  display: flex;
+}
+
+.infobar {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  margin-inline-start: 16px;
+  margin-block-end: 16px;
+  color: #2d2d2d;
+  background-color: #737373;
+  border: 2px solid;
+  border-color: #eee;
+  border-radius: 16px;
+  z-index: 2147483647;
+}
+
+.infobar:valid, .infobar:not(:focus-within) .infobar-content {
+  display: none;
+}
+
+.infobar:focus-within {
+  background-color: #f9f9f9;
+  border-color: #878787;
+  border-radius: 8px;
+  opacity: 1;
+  transition-property: opacity, background-color, border-color, border-radius,
+    color;
+}
+
+.infobar-content {
+  align-items: center;
+}
+
+.infobar-content span {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 18px;
+  word-break: break-word;
+  white-space: pre-wrap;
+  margin-inline: 4px;
+  margin-block: 4px;
+}
+
+.infobar .infobar-icon,
+.infobar .infobar-close-icon,
+.infobar .infobar-link-icon {
+  cursor: pointer;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.infobar .infobar-close-icon,
+.infobar .infobar-link-icon {
+  align-self: flex-start;
+}
+
+.infobar .infobar-icon {
+  position: absolute;
+  min-inline-size: 24px;
+  min-block-size: 24px;
+}
+
+.infobar:focus-within .infobar-icon {
+  z-index: -1;
+  background-image: none;
+}
+
+.infobar .infobar-close-icon {
+  min-inline-size: 22px;
+  min-block-size: 22px;
+}
+
+.infobar .infobar-icon {
+  background-color: transparent;
+  background-size: 70%;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAABhmlDQ1BJQ0MgcHJvZmlsZQAAKJF9kj1Iw0AYht+mSkUrDnYQcchQnSyIijqWKhbBQmkrtOpgcukfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVK/C4ptIjx4LiH9+59+e67A4RGhalm1wSgapaRisfEbG5VDLyiDwEAvZiVmKkn0osZeI6ve/j4ehfhWd7n/hz9St5kgE8kjjLdsIg3iGc2LZ3zPnGIlSSF+Jx43KACiR+5Lrv8xrnosMAzQ0YmNU8cIhaLHSx3MCsZKvE0cVhRNcoXsi4rnLc4q5Uaa9XJbxjMaytprtMcQRxLSCAJETJqKKMCCxFaNVJMpGg/5uEfdvxJcsnkKoORYwFVqJAcP/gb/O6tWZiadJOCMaD7xbY/RoHALtCs2/b3sW03TwD/M3Cltf3VBjD3SXq9rYWPgIFt4OK6rcl7wOUOMPSkS4bkSH6aQqEAvJ/RM+WAwVv6EGtu31r7OH0AMtSr5Rvg4BAYK1L2use9ezr79u+ZVv9+AFlNcp0UUpiqAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AsHADIRLMaOHwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAPUExURQAAAIqKioyNjY2OjvDw8L2y1DEAAAABdFJOUwBA5thmAAAAAWJLR0QB/wIt3gAAAGNJREFUSMdjYCAJsLi4OBCQx6/CBQwIGIDPCBcXAkYQUsACU+AwlBVQHg6Eg5pgZBGOboIJZugDFwRwoJECJCUOhJI1wZwzqmBUwagCuipgIqTABG9h7YIKaKGAURAFEF/6AQAO4HqSoDP8bgAAAABJRU5ErkJggg==);
+}
+
+.infobar .infobar-link-icon {
+  background-size: 60%;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAABhmlDQ1BJQ0MgcHJvZmlsZQAAKJF9kj1Iw0AYht+mSkUrDnYQcchQnSyIijqWKhbBQmkrtOpgcukfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVK/C4ptIjx4LiH9+59+e67A4RGhalm1wSgapaRisfEbG5VDLyiDwEAvZiVmKkn0osZeI6ve/j4ehfhWd7n/hz9St5kgE8kjjLdsIg3iGc2LZ3zPnGIlSSF+Jx43KACiR+5Lrv8xrnosMAzQ0YmNU8cIhaLHSx3MCsZKvE0cVhRNcoXsi4rnLc4q5Uaa9XJbxjMaytprtMcQRxLSCAJETJqKKMCCxFaNVJMpGg/5uEfdvxJcsnkKoORYwFVqJAcP/gb/O6tWZiadJOCMaD7xbY/RoHALtCs2/b3sW03TwD/M3Cltf3VBjD3SXq9rYWPgIFt4OK6rcl7wOUOMPSkS4bkSH6aQqEAvJ/RM+WAwVv6EGtu31r7OH0AMtSr5Rvg4BAYK1L2use9ezr79u+ZVv9+AFlNcp0UUpiqAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AsHAB8H+DhhoQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAJUExURQAAAICHi4qKioTuJAkAAAABdFJOUwBA5thmAAAAAWJLR0QCZgt8ZAAAAJJJREFUOI3t070NRCEMA2CnYAOyDyPwpHj/Va7hJ3FzV7zy3ET5JIwoAF6Jk4wzAJAkzxAYG9YRTgB+24wBgKmfrGAKTcEfAY4KRlRoIeBTgKOCERVaCPgU4Khge2GqKOBTgKOCERVaAEC/4PNcnyoSWHpjqkhwKxbcig0Q6AorXYF/+A6eIYD1lVbwG/jdA6/kA2THRAURVubcAAAAAElFTkSuQmCC);
+}
+
+.infobar .infobar-close-icon {
+  appearance: none;
+  background-size: 80%;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAABhmlDQ1BJQ0MgcHJvZmlsZQAAKJF9kj1Iw0AYht+mSkUrDnYQcchQnSyIijqWKhbBQmkrtOpgcukfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVK/C4ptIjx4LiH9+59+e67A4RGhalm1wSgapaRisfEbG5VDLyiDwEAvZiVmKkn0osZeI6ve/j4ehfhWd7n/hz9St5kgE8kjjLdsIg3iGc2LZ3zPnGIlSSF+Jx43KACiR+5Lrv8xrnosMAzQ0YmNU8cIhaLHSx3MCsZKvE0cVhRNcoXsi4rnLc4q5Uaa9XJbxjMaytprtMcQRxLSCAJETJqKKMCCxFaNVJMpGg/5uEfdvxJcsnkKoORYwFVqJAcP/gb/O6tWZiadJOCMaD7xbY/RoHALtCs2/b3sW03TwD/M3Cltf3VBjD3SXq9rYWPgIFt4OK6rcl7wOUOMPSkS4bkSH6aQqEAvJ/RM+WAwVv6EGtu31r7OH0AMtSr5Rvg4BAYK1L2use9ezr79u+ZVv9+AFlNcp0UUpiqAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AsHAB8VC4EQ6QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAJUExURQAAAICHi4qKioTuJAkAAAABdFJOUwBA5thmAAAAAWJLR0QCZgt8ZAAAAJtJREFUOI3NkrsBgCAMRLFwBPdxBArcfxXFkO8rbKWAAJfHJ9faf9vuYX/749T5NmShm3bEwbe2SxeuM4+2oxDL1cDoKtVUjRy+tH78Cv2CS+wIiQNC1AEhk4AQeUTMWUJMfUJMSEJMSEY8kIx4IONroaYAimNxsXp1PA7PxwfVL8QnowwoVC0lig07wDDVUjAdbAnjwtow/z/bDW7eI4M2KruJAAAAAElFTkSuQmCC);
+}
+`;
+
+export { displayIcon, appendInfobar, refreshInfobarInfo, extractInfobarData, INFOBAR_TAGNAME };
+
+function appendInfobar(doc, options, useShadowRoot) {
+	if (!doc.querySelector(INFOBAR_TAGNAME)) {
+		let infoData = options.infobarContent ? options.infobarContent : options.saveDate;
+		infoData = infoData || "No info";
+		const infobarElement = createElement(doc, INFOBAR_TAGNAME, doc.body);
+		let infobarContainer;
+		if (useShadowRoot) {
+			infobarContainer = infobarElement.attachShadow({ mode: "open" });
+		} else {
+			const shadowRootTemplate = doc.createElement("template");
+			shadowRootTemplate.setAttribute("shadowroot", "open");
+			infobarElement.appendChild(shadowRootTemplate);
+			infobarContainer = shadowRootTemplate;
+		}
+		const shadowRootContent = doc.createElement("div");
+		const styleElement = doc.createElement("style");
+		styleElement.textContent = INFOBAR_STYLES
+			.replace(/ {2}/g, "")
+			.replace(/\n/g, "")
+			.replace(/: /g, ":")
+			.replace(/, /g, ",");
+		shadowRootContent.appendChild(styleElement);
+		const infobarContent = doc.createElement("form");
+		infobarContent.classList.add("infobar");
+		shadowRootContent.appendChild(infobarContent);
+		const iconElement = doc.createElement("span");
+		iconElement.tabIndex = -1;
+		iconElement.classList.add("infobar-icon");
+		infobarContent.appendChild(iconElement);
+		const contentElement = doc.createElement("span");
+		contentElement.tabIndex = -1;
+		contentElement.classList.add("infobar-content");
+		const closeButtonElement = doc.createElement("input");
+		closeButtonElement.type = "checkbox";
+		closeButtonElement.required = true;
+		closeButtonElement.classList.add("infobar-close-icon");
+		contentElement.appendChild(closeButtonElement);
+		const textElement = doc.createElement("span");
+		textElement.textContent = infoData;
+		contentElement.appendChild(textElement);
+		const linkElement = doc.createElement("a");
+		linkElement.classList.add("infobar-link-icon");
+		linkElement.target = "_blank";
+		linkElement.rel = "noopener noreferrer";
+		linkElement.title = "Open source URL: " + options.saveUrl;
+		linkElement.href = options.saveUrl;
+		contentElement.appendChild(linkElement);
+		infobarContent.appendChild(contentElement);
+		if (useShadowRoot) {
+			infobarContainer.appendChild(shadowRootContent);
+		} else {
+			const scriptElement = doc.createElement("script");
+			let scriptContent = (refreshInfobarInfo.toString());
+			scriptContent += (extractInfobarData.toString());
+			scriptContent += "refreshInfobarInfo(document, extractInfobarData(document))";
+			scriptContent = scriptContent
+				.replace(/ == /g, "==")
+				.replace(/ > /g, ">")
+				.replace(/ < /g, "<")
+				.replace(/ \+ /g, "+")
+				.replace(/ - /g, "-")
+				.replace(/ = /g, "=")
+				.replace(/ \+= /g, "+=")
+				.replace(/ && /g, "&&")
+				.replace(/ \|\| /g, "||")
+				.replace(/{ /g, "{")
+				.replace(/ }/g, "}")
+				.replace(/, /g, ",")
+				.replace(/; /g, ";")
+				.replace(/ \(/g, "(")
+				.replace(/ \)/g, ")")
+				.replace(/\t/g, "")
+				.replace(/\n/g, "");
+			scriptElement.textContent = scriptContent;
+			shadowRootContent.appendChild(scriptElement);
+			infobarContainer.innerHTML = shadowRootContent.outerHTML;
+		}
+		doc.body.appendChild(infobarElement);
+	}
+}
+
+function extractInfobarData(doc) {
+	const result = doc.evaluate("//comment()", doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
+	let singleFileComment = result && result.singleNodeValue;
+	if (singleFileComment && singleFileComment.nodeType == Node.COMMENT_NODE && singleFileComment.textContent.includes("SingleFile")) {
+		const info = singleFileComment.textContent.split("\n");
+		const [, , urlData, ...optionalData] = info;
+		const urlMatch = urlData.match(/^ url: (.*) ?$/);
+		const saveUrl = urlMatch && urlMatch[1];
+		if (saveUrl) {
+			let infobarContent, saveDate;
+			if (optionalData.length) {
+				saveDate = optionalData[0].split("saved date: ")[1];
+				if (saveDate) {
+					optionalData.shift();
+				}
+				if (optionalData.length > 1) {
+					let content = optionalData[0].split("info: ")[1].trim();
+					for (let indexLine = 1; indexLine < optionalData.length - 1; indexLine++) {
+						content += "\n" + optionalData[indexLine].trim();
+					}
+					infobarContent = content.trim();
+				}
+			}
+			return { saveUrl, infobarContent, saveDate };
+		}
+	}
+}
+
+function refreshInfobarInfo(doc, { saveUrl, infobarContent, saveDate }) {
+	if (saveUrl) {
+		const infobarElement = doc.querySelector("single-file-infobar");
+		const shadowRootFragment = infobarElement.shadowRoot;
+		const infobarContentElement = shadowRootFragment.querySelector(".infobar-content span");
+		infobarContentElement.textContent = infobarContent || saveDate;
+		const linkElement = shadowRootFragment.querySelector(".infobar-content .infobar-link-icon");
+		linkElement.href = saveUrl;
+	}
+}
+
+function displayIcon(doc, useShadowRoot) {
+	const infoData = extractInfobarData(doc);
+	if (infoData.saveUrl) {
+		appendInfobar(doc, infoData, useShadowRoot);
+		refreshInfobarInfo(doc, infoData);
+	}
+}
+
+function createElement(doc, tagName, parentElement) {
+	const element = doc.createElement(tagName);
+	parentElement.appendChild(element);
+	Array.from(getComputedStyle(element)).forEach(property => element.style.setProperty(property, "initial", "important"));
+	return element;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "single-file-core",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "SingleFile Core",
   "author": "Gildas Lormeau",
   "license": "AGPL-3.0-or-later",

package/processors/hooks/content/content-hooks-frames-web.js

@@ -314,10 +314,12 @@
 
 	addEventListener(GET_ADOPTED_STYLESHEETS_REQUEST_EVENT, event => {
 		const shadowRoot = event.target.shadowRoot;
-		const adoptedStyleSheets = Array.from(shadowRoot.adoptedStyleSheets).map(stylesheet => Array.from(stylesheet.cssRules).map(cssRule => cssRule.cssText).join("\n"));
-		if (adoptedStyleSheets.length) {
-			event.target.dispatchEvent(new CustomEvent(GET_ADOPTED_STYLESHEETS_RESPONSE_EVENT, { detail: { adoptedStyleSheets } }));
-		}
+		if (shadowRoot) {
+			const adoptedStyleSheets = Array.from(shadowRoot.adoptedStyleSheets).map(stylesheet => Array.from(stylesheet.cssRules).map(cssRule => cssRule.cssText).join("\n"));
+			if (adoptedStyleSheets.length) {
+				event.target.dispatchEvent(new CustomEvent(GET_ADOPTED_STYLESHEETS_RESPONSE_EVENT, { detail: { adoptedStyleSheets } }));
+			}
+		}		
 	}, { capture: true });
 
 	if (globalThis.FontFace) {

package/single-file-core.js

@@ -494,6 +494,18 @@ class Processor {
 			);
 			this.doc.documentElement.insertBefore(commentNode, this.doc.documentElement.firstChild);
 		}
+		if (this.options.includeInfobar) {
+			util.appendInfobar(this.doc, this.options);
+		}
+		if (this.doc.querySelector("template[" + SHADOWROOT_ATTRIBUTE_NAME + "]") || (this.options.shadowRoots && this.options.shadowRoots.length)) {
+			if (this.options.blockScripts) {
+				this.doc.querySelectorAll("script[" + SCRIPT_TEMPLATE_SHADOW_ROOT + "]").forEach(element => element.remove());
+			}
+			const scriptElement = this.doc.createElement("script");
+			scriptElement.setAttribute(SCRIPT_TEMPLATE_SHADOW_ROOT, "");
+			scriptElement.textContent = `(()=>{document.currentScript.remove();processNode(document);function processNode(node){node.querySelectorAll("template[${SHADOWROOT_ATTRIBUTE_NAME}]").forEach(element=>{let shadowRoot = element.parentElement.shadowRoot;if (!shadowRoot) {try {shadowRoot=element.parentElement.attachShadow({mode:element.getAttribute("${SHADOWROOT_ATTRIBUTE_NAME}")});shadowRoot.innerHTML=element.innerHTML;element.remove()} catch (error) {} if (shadowRoot) {processNode(shadowRoot)}}})}})()`;
+			this.doc.body.appendChild(scriptElement);
+		}
 		if (this.options.insertCanonicalLink && this.options.saveUrl.match(HTTP_URI_PREFIX)) {
 			let canonicalLink = this.doc.querySelector("link[rel=canonical]");
 			if (!canonicalLink) {
@@ -724,15 +736,16 @@ class Processor {
 
 	removeEmbedScripts() {
 		const JAVASCRIPT_URI_PREFIX = "javascript:";
+		const DISABLED_SCRIPT = "javascript:void(0)";
 		this.onEventAttributeNames.forEach(attributeName => this.doc.querySelectorAll("[" + attributeName + "]").forEach(element => element.removeAttribute(attributeName)));
 		this.doc.querySelectorAll("[href]").forEach(element => {
 			if (element.href && element.href.match && element.href.trim().startsWith(JAVASCRIPT_URI_PREFIX)) {
-				element.removeAttribute("href");
+				element.setAttribute("href", DISABLED_SCRIPT);
 			}
 		});
 		this.doc.querySelectorAll("[src]").forEach(element => {
 			if (element.src && element.src.trim().startsWith(JAVASCRIPT_URI_PREFIX)) {
-				element.removeAttribute("src");
+				element.setAttribute("src", DISABLED_SCRIPT);
 			}
 		});
 		const scriptElements = this.doc.querySelectorAll("script:not([type=\"application/ld+json\"]):not([" + SCRIPT_TEMPLATE_SHADOW_ROOT + "])");
@@ -874,7 +887,11 @@ class Processor {
 				if (attributeValue) {
 					const canvasData = this.options.canvases[Number(attributeValue)];
 					if (canvasData) {
-						ProcessorHelper.setBackgroundImage(canvasElement, "url(" + canvasData.dataURI + ")");
+						const backgroundStyle = {};
+						if (canvasData.backgroundColor) {
+							backgroundStyle["background-color"] = canvasData.backgroundColor;
+						}
+						ProcessorHelper.setBackgroundImage(canvasElement, "url(" + canvasData.dataURI + ")", backgroundStyle);
 						this.stats.add("processed", "canvas", 1);
 					}
 				}
@@ -1139,13 +1156,6 @@ class Processor {
 		const options = this.options;
 		if (options.shadowRoots && options.shadowRoots.length) {
 			processElement(this.doc);
-			if (options.blockScripts) {
-				this.doc.querySelectorAll("script[" + SCRIPT_TEMPLATE_SHADOW_ROOT + "]").forEach(element => element.remove());
-			}
-			const scriptElement = doc.createElement("script");
-			scriptElement.setAttribute(SCRIPT_TEMPLATE_SHADOW_ROOT, "");
-			scriptElement.textContent = `(()=>{document.currentScript.remove();processNode(document);function processNode(node){node.querySelectorAll("template[${SHADOWROOT_ATTRIBUTE_NAME}]").forEach(element=>{let shadowRoot = element.parentElement.shadowRoot;if (!shadowRoot) {try {shadowRoot=element.parentElement.attachShadow({mode:element.getAttribute("${SHADOWROOT_ATTRIBUTE_NAME}")});shadowRoot.innerHTML=element.innerHTML;element.remove()} catch (error) {} if (shadowRoot) {processNode(shadowRoot)}}})}})()`;
-			doc.body.appendChild(scriptElement);
 		}
 
 		function processElement(element) {
@@ -1157,13 +1167,6 @@ class Processor {
 					if (shadowRootData) {
 						const templateElement = doc.createElement("template");
 						templateElement.setAttribute(SHADOWROOT_ATTRIBUTE_NAME, shadowRootData.mode);
-						if (shadowRootData.adoptedStyleSheets) {
-							shadowRootData.adoptedStyleSheets.forEach(stylesheetContent => {
-								const styleElement = doc.createElement("style");
-								styleElement.textContent = stylesheetContent;
-								templateElement.appendChild(styleElement);
-							});
-						}
 						const shadowDoc = util.parseDocContent(shadowRootData.content);
 						if (shadowDoc.head) {
 							const metaCharset = shadowDoc.head.querySelector("meta[charset]");
@@ -1181,6 +1184,13 @@ class Processor {
 						} else {
 							element.appendChild(templateElement);
 						}
+						if (shadowRootData.adoptedStyleSheets) {
+							shadowRootData.adoptedStyleSheets.forEach(stylesheetContent => {
+								const styleElement = doc.createElement("style");
+								styleElement.textContent = stylesheetContent;
+								templateElement.appendChild(styleElement);
+							});
+						}
 					}
 				}
 			});

package/single-file-helper.js

@@ -25,6 +25,7 @@
 
 import * as cssUnescape from "./vendor/css-unescape.js";
 import * as hooksFrames from "./processors/hooks/content/content-hooks-frames.js";
+import * as infobar from "./common/infobar.js";
 
 const ON_BEFORE_CAPTURE_EVENT_NAME = "single-file-on-before-capture";
 const ON_AFTER_CAPTURE_EVENT_NAME = "single-file-on-after-capture";
@@ -79,6 +80,7 @@ export {
 	getFontWeight,
 	normalizeFontFamily,
 	getShadowRoot,
+	appendInfobar,
 	ON_BEFORE_CAPTURE_EVENT_NAME,
 	ON_AFTER_CAPTURE_EVENT_NAME,
 	WIN_ID_ATTRIBUTE_NAME,
@@ -265,7 +267,10 @@ function getResourcesInfo(win, doc, element, options, data, elementHidden, compu
 	const tagName = element.tagName && element.tagName.toUpperCase();
 	if (tagName == "CANVAS") {
 		try {
-			data.canvases.push({ dataURI: element.toDataURL("image/png", "") });
+			data.canvases.push({ 
+				dataURI: element.toDataURL("image/png", ""), 
+				backgroundColor: computedStyle.getPropertyValue("background-color") 
+			});
 			element.setAttribute(CANVAS_ATTRIBUTE_NAME, data.canvases.length - 1);
 			data.markedElements.push(element);
 		} catch (error) {
@@ -395,6 +400,10 @@ function getShadowRoot(element) {
 	}
 }
 
+function appendInfobar(doc, options, useShadowRoot) {
+	return infobar.appendInfobar(doc, options, useShadowRoot);
+}
+
 function normalizeFontFamily(fontFamilyName = "") {
 	return removeQuotes(cssUnescape.process(fontFamilyName.trim())).toLowerCase();
 }

package/single-file-mini-helper.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2010-2020 Gildas Lormeau
+ * contact : gildas.lormeau <at> gmail.com
+ * 
+ * This file is part of SingleFile.
+ *
+ *   The code in this file is free software: you can redistribute it and/or 
+ *   modify it under the terms of the GNU Affero General Public License 
+ *   (GNU AGPL) as published by the Free Software Foundation, either version 3
+ *   of the License, or (at your option) any later version.
+ * 
+ *   The code in this file is distributed in the hope that it will be useful, 
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of 
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero 
+ *   General Public License for more details.
+ *
+ *   As additional permission under GNU AGPL version 3 section 7, you may 
+ *   distribute UNMODIFIED VERSIONS OF THIS file without the copy of the GNU 
+ *   AGPL normally required by section 4, provided you include this license 
+ *   notice and a URL through which recipients can access the Corresponding 
+ *   Source.
+ */
+
+import * as serializer from "./modules/html-serializer.js";
+import * as infobar from "./common/infobar.js";
+
+const helper = {
+	serialize(doc, compressHTML) {
+		return serializer.process(doc, compressHTML);
+	},
+	appendInfobar(doc, options, useShadowRoot) {
+		return infobar.appendInfobar(doc, options, useShadowRoot);
+	},
+	extractInfobarData(doc) {
+		return infobar.extractInfobarData(doc);
+	},
+	displayIcon(doc, useShadowRoot) {
+		return infobar.displayIcon(doc, useShadowRoot);
+	},
+	INFOBAR_TAGNAME: infobar.INFOBAR_TAGNAME
+};
+
+export {
+	helper
+};

package/single-file-util.js

@@ -160,6 +160,9 @@ function getInstance(utilOptions) {
 		removeQuotes(string) {
 			return helper.removeQuotes(string);
 		},
+		appendInfobar(doc, options) {
+			return helper.appendInfobar(doc, options);
+		},
 		ON_BEFORE_CAPTURE_EVENT_NAME: helper.ON_BEFORE_CAPTURE_EVENT_NAME,
 		ON_AFTER_CAPTURE_EVENT_NAME: helper.ON_AFTER_CAPTURE_EVENT_NAME,
 		WIN_ID_ATTRIBUTE_NAME: helper.WIN_ID_ATTRIBUTE_NAME,