added support of CSS changes via the dev tools in the editor (Fix #495)

extension/ui/bg/ui-editor.js

@@ -169,6 +169,7 @@ singlefile.extension.ui.bg.editor = (() => {
 	savePageButton.onclick = () => {
 		savePage();
 	};
+	const updatedResources = {};
 	window.onmessage = event => {
 		const message = JSON.parse(event.data);
 		if (message.method == "setMetadata") {
@@ -186,6 +187,7 @@ singlefile.extension.ui.bg.editor = (() => {
 				filename: tabData.filename
 			};
 			tabData.options.openEditor = false;
+			// tabData.options.updatedResources = updatedResources;
 			singlefile.extension.core.content.download.downloadPage(pageData, tabData.options);
 		}
 		if (message.method == "disableFormatPage") {
@@ -204,6 +206,10 @@ singlefile.extension.ui.bg.editor = (() => {
 	};
 
 	browser.runtime.onMessage.addListener(message => {
+		if (message.method == "devtools.resourceCommitted") {
+			updatedResources[message.url] = { content: message.content, type: message.type, encoding: message.encoding };
+			return Promise.resolve({});
+		}
 		if (message.method == "content.save") {
 			tabData.options = message.options;
 			savePage();
@@ -232,7 +238,7 @@ singlefile.extension.ui.bg.editor = (() => {
 	});
 
 	function savePage() {
-		editorElement.contentWindow.postMessage(JSON.stringify({ method: "getContent", compressHTML: tabData.options.compressHTML }), "*");
+		editorElement.contentWindow.postMessage(JSON.stringify({ method: "getContent", compressHTML: tabData.options.compressHTML, updatedResources }), "*");
 	}
 
 	return {};

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

@@ -844,7 +844,7 @@ table {
 		if (message.method == "disableRemoveHighlights") {
 			removeHighlightMode = false;
 		}
-		if (message.method == "enableEditPage") {			
+		if (message.method == "enableEditPage") {
 			document.body.contentEditable = true;
 			onUpdate(false);
 		}
@@ -879,7 +879,7 @@ table {
 		}
 		if (message.method == "getContent") {
 			onUpdate(true);
-			getContent(message.compressHTML);
+			getContent(message.compressHTML, message.updatedResources);
 		}
 	};
 	window.onresize = reflowNotes;
@@ -1380,7 +1380,7 @@ table {
 		onUpdate(false);
 	}
 
-	function getContent(compressHTML) {
+	function getContent(compressHTML, updatedResources) {
 		serializeShadowRoots(document);
 		const doc = document.cloneNode(true);
 		deserializeShadowRoots(doc);
@@ -1411,6 +1411,12 @@ table {
 		scriptElement.setAttribute(SCRIPT_TEMPLATE_SHADOW_ROOT, "");
 		scriptElement.textContent = getEmbedScript();
 		doc.body.appendChild(scriptElement);
+		const newResources = Object.keys(updatedResources).filter(url => updatedResources[url].type == "stylesheet").map(url => updatedResources[url]);
+		newResources.forEach(resource => {
+			const element = doc.createElement("style");
+			doc.body.appendChild(element);
+			element.textContent = resource.content;
+		});
 		window.parent.postMessage(JSON.stringify({ "method": "setContent", content: singlefile.lib.modules.serializer.process(doc, compressHTML) }), "*");
 	}