fix interactions with the infobar

src/ui/bg/ui-editor.js

@@ -21,7 +21,7 @@
  *   Source.
  */
 
-/* global browser, document, matchMedia, addEventListener, navigator, prompt, URL, MouseEvent, Blob, setInterval */
+/* global browser, document, matchMedia, addEventListener, navigator, prompt, URL, MouseEvent, Blob, setInterval, DOMParser */
 
 import * as download from "../../core/common/download.js";
 import { onError } from "./../common/content-error.js";
@@ -29,6 +29,8 @@ import * as zip from "./../../../lib/single-file-zip.js";
 import * as yabson from "./../../lib/yabson/yabson.js";
 
 const FOREGROUND_SAVE = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent) && !/Vivaldi/.test(navigator.userAgent) && !/OPR/.test(navigator.userAgent);
+const SHADOWROOT_ATTRIBUTE_NAME = "shadowrootmode";
+const INFOBAR_TAGNAME = "single-file-infobar";
 
 const editorElement = document.querySelector(".editor");
 const toolbarElement = document.querySelector(".toolbar");
@@ -83,8 +85,10 @@ addPinkNoteButton.onmouseup = () => editorElement.contentWindow.postMessage(JSON
 addBlueNoteButton.onmouseup = () => editorElement.contentWindow.postMessage(JSON.stringify({ method: "addNote", color: "note-blue" }), "*");
 addGreenNoteButton.onmouseup = () => editorElement.contentWindow.postMessage(JSON.stringify({ method: "addNote", color: "note-green" }), "*");
 document.addEventListener("mouseup", event => {
-	editorElement.contentWindow.focus();
-	toolbarOnTouchEnd(event);
+	if (event.target.tagName.toLowerCase() != INFOBAR_TAGNAME) {
+		editorElement.contentWindow.focus();
+		toolbarOnTouchEnd(event);
+	}
 }, true);
 document.onmousemove = toolbarOnTouchMove;
 highlightButtons.forEach(highlightButton => {
@@ -341,6 +345,13 @@ addEventListener("message", event => {
 	if (message.method == "savePage") {
 		savePage();
 	}
+	if (message.method == "displayInfobar") {
+		const doc = new DOMParser().parseFromString(message.content, "text/html");
+		deserializeShadowRoots(doc.body);
+		const infobarElement = doc.querySelector(INFOBAR_TAGNAME);
+		infobarElement.shadowRoot.querySelector("style").textContent += ".infobar { position: absolute; }";
+		document.querySelector(".editor-container").appendChild(infobarElement);
+	}
 });
 
 browser.runtime.onMessage.addListener(message => {
@@ -603,4 +614,24 @@ function getPageDataResource(resource, prefixPath = "", pageData) {
 	} else {
 		return pageData;
 	}
+}
+
+function deserializeShadowRoots(node) {
+	node.querySelectorAll(`template[${SHADOWROOT_ATTRIBUTE_NAME}]`).forEach(element => {
+		if (element.parentElement) {
+			let shadowRoot;
+			try {
+				shadowRoot = element.parentElement.attachShadow({ mode: "open" });
+				const contentDocument = (new DOMParser()).parseFromString(element.innerHTML, "text/html");
+				Array.from(contentDocument.head.childNodes).forEach(node => shadowRoot.appendChild(node));
+				Array.from(contentDocument.body.childNodes).forEach(node => shadowRoot.appendChild(node));
+			} catch (error) {
+				// ignored
+			}
+			if (shadowRoot) {
+				deserializeShadowRoots(shadowRoot);
+				element.remove();
+			}
+		}
+	});
 }

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

@@ -1106,6 +1106,14 @@ pre code {
 		}
 		if (message.method == "displayInfobar") {
 			singlefile.helper.displayIcon(document, true);
+			const infobarDoc = document.implementation.createHTMLDocument();
+			infobarDoc.body.appendChild(document.querySelector(singlefile.helper.INFOBAR_TAGNAME));
+			serializeShadowRoots(infobarDoc.body);
+			const content = singlefile.helper.serialize(infobarDoc, true);
+			window.parent.postMessage(JSON.stringify({
+				method: "displayInfobar",
+				content
+			}), "*");
 		}
 		if (message.method == "download") {
 			const link = document.createElement("a");

src/ui/pages/editor.css

@@ -68,6 +68,12 @@ img[type=button].remove-highlight-disabled {
     margin-top: 6px;
 }
 
+.editor-container {
+    position: relative;
+    display: flex;
+    flex: auto;
+}
+
 .editor {
     background-color: white;
     flex: auto;

src/ui/pages/editor.html

@@ -67,9 +67,11 @@
 				draggable="false">
 		</div>
 	</div>
-	<iframe class="editor"
-		srcdoc="&lt;!DOCTYPE html&gt;&lt;body&gt;&lt;script src=/lib/web-stream.js&gt;&lt;/script&gt;&lt;script src=/lib/single-file-extension-editor-helper.js&gt;&lt;/script&gt;&lt;script src=/lib/single-file-extension-editor.js&gt;&lt;/script&gt;&lt;script src=/src/lib/readability/Readability.js&gt;&lt;/script&gt;&lt;script src=/src/lib/readability/Readability-readerable.js&gt;&lt;/script&gt;&lt;/body&gt;"
-		sandbox="allow-scripts allow-modals allow-downloads"></iframe>
+	<div class="editor-container">
+		<iframe class="editor"
+			srcdoc="&lt;!DOCTYPE html&gt;&lt;body&gt;&lt;script src=/lib/web-stream.js&gt;&lt;/script&gt;&lt;script src=/lib/single-file-extension-editor-helper.js&gt;&lt;/script&gt;&lt;script src=/lib/single-file-extension-editor.js&gt;&lt;/script&gt;&lt;script src=/src/lib/readability/Readability.js&gt;&lt;/script&gt;&lt;script src=/src/lib/readability/Readability-readerable.js&gt;&lt;/script&gt;&lt;/body&gt;"
+			sandbox="allow-scripts allow-modals allow-downloads"></iframe>
+	</div>
 	<script src="/lib/web-stream.js"></script>
 	<script src="/lib/chrome-browser-polyfill.js"></script>
 	<script src="/lib/single-file.js"></script>