move shadow dom support into the frame script

extension/ui/bg/ui-editor.js

@@ -21,7 +21,7 @@
  *   Source.
  */
 
-/* global browser, singlefile, window, document, prompt, matchMedia, fetch */
+/* global browser, singlefile, window, document, prompt, matchMedia */
 
 singlefile.extension.ui.bg.editor = (() => {
 
@@ -251,7 +251,7 @@ singlefile.extension.ui.bg.editor = (() => {
 	let updatedResources = {};
 
 	window.onresize = viewportSizeChange;
-	window.onmessage = async event => {
+	window.onmessage = event => {
 		const message = JSON.parse(event.data);
 		if (message.method == "setMetadata") {
 			document.title = "[SingleFile] " + message.title;
@@ -266,8 +266,6 @@ singlefile.extension.ui.bg.editor = (() => {
 			}
 		}
 		if (message.method == "setContent") {
-			const initScriptContent = await (await fetch("../content/content-ui-editor-init-web.js")).text();
-			message.content = message.content.replace(/<script data-template-shadow-root.*<\/script>/g, `<script data-template-shadow-root>${initScriptContent.replace(/"/g, "&quot;")}</script>`);
 			const pageData = {
 				content: message.content,
 				filename: tabData.filename
@@ -287,6 +285,7 @@ singlefile.extension.ui.bg.editor = (() => {
 			tabData.docSaved = message.saved;
 		}
 		if (message.method == "onInit") {
+			tabData.docSaved = true;
 			const defaultEditorMode = tabData.options.defaultEditorMode;
 			if (defaultEditorMode == "edit") {
 				enableEditPage();
@@ -328,9 +327,7 @@ singlefile.extension.ui.bg.editor = (() => {
 				}
 				if (!message.truncated || message.finished) {
 					tabData = JSON.parse(tabDataContents.join(""));
-					tabData.docSaved = true;
 					tabDataContents = [];
-					tabData.content = tabData.content.replace(/<script data-template-shadow-root.*<\/script>/g, `<script data-template-shadow-root src=${"../content/content-ui-editor-init-web.js"}></script>`);
 					editorElement.contentWindow.postMessage(JSON.stringify({ method: "init", content: tabData.content }), "*");
 					editorElement.contentWindow.focus();
 					delete tabData.content;

extension/ui/content/content-ui-editor-web.js

@@ -815,13 +815,12 @@ table {
 
 	let NOTES_WEB_STYLESHEET, MASK_WEB_STYLESHEET, HIGHLIGHTS_WEB_STYLESHEET;
 	let selectedNote, anchorElement, maskNoteElement, maskPageElement, highlightSelectionMode, removeHighlightMode, resizingNoteMode, movingNoteMode, highlightColor, collapseNoteTimeout, cuttingOuterMode, cuttingMode, cuttingPath, cuttingPathIndex, previousContent;
-	let removedElements = [], removedElementIndex = 0;
+	let removedElements = [], removedElementIndex = 0, initScriptContent;
 
 	window.onmessage = async event => {
 		const message = JSON.parse(event.data);
 		if (message.method == "init") {
 			await init(message.content);
-			window.parent.postMessage(JSON.stringify({ "method": "onInit" }), "*");
 		}
 		if (message.method == "addNote") {
 			addNote(message);
@@ -909,7 +908,9 @@ table {
 		}
 		if (message.method == "getContent") {
 			onUpdate(true);
-			window.parent.postMessage(JSON.stringify({ "method": "setContent", content: getContent(message.compressHTML, message.updatedResources) }), "*");
+			let content = getContent(message.compressHTML, message.updatedResources);
+			content = content.replace(/<script data-template-shadow-root.*<\/script>/g, initScriptContent);
+			window.parent.postMessage(JSON.stringify({ method: "setContent", content }), "*");
 		}
 		if (message.method == "printPage") {
 			printPage();
@@ -928,6 +929,11 @@ table {
 
 	async function init(content, filename) {
 		await initConstants();
+		const initScriptContentMatch = content.match(/<script data-template-shadow-root.*<\/script>/);
+		if (initScriptContentMatch && initScriptContentMatch[0]) {
+			initScriptContent = initScriptContentMatch[0];
+		}
+		content = content.replace(/<script data-template-shadow-root.*<\/script>/g, "<script data-template-shadow-root src=../content/content-ui-editor-init-web.js></script>");
 		const contentDocument = (new DOMParser()).parseFromString(content, "text/html");
 		if (detectSavedPage(contentDocument)) {
 			if (contentDocument.doctype) {
@@ -967,6 +973,7 @@ table {
 			document.documentElement.onmouseout = onMouseOut;
 			document.documentElement.onkeydown = onKeyDown;
 			window.onclick = event => event.preventDefault();
+			window.parent.postMessage(JSON.stringify({ "method": "onInit" }), "*");
 		}
 	}