[frontend] improve contextmenu and make it work with nested iframes

Author: velzie

frontend/src/Menu.tsx

@@ -23,6 +23,14 @@ export const Menu: Component<{
 			},
 			{ once: true }
 		);
+		document.body.addEventListener(
+			"contextmenu",
+			() => {
+				cx.root.remove();
+				browser.unfocusframes = false;
+			},
+			{ once: true }
+		);
 
 		cx.root.addEventListener("click", (e) => {
 			e.stopPropagation();
@@ -46,9 +54,19 @@ Menu.css = `
     border-radius: 4px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     z-index: 1000;
-    padding: 8px;
     display: flex;
     flex-direction: column;
+    min-width: 10em;
+  }
+  button {
+    background: none;
+    border: none;
+    font-size: 0.8em;
+    padding: 1em;
+    text-align: left;
+  }
+  button:hover {
+    background: #f0f0f0;
   }
 `;
 

frontend/src/browser.tsx

@@ -69,15 +69,52 @@ export class Browser extends StatefulClass {
 		frame.frame.addEventListener("load", (e) => {
 			tab.url = frame.client.url.href;
 		});
-		frame.addEventListener("contextInit", (e) => {
-			const framedoc = frame.frame.contentDocument!;
+		frame.addEventListener("contextInit", (ctx) => {
+			const framedoc = ctx.window.document;
 
 			framedoc.addEventListener("contextmenu", (e) => {
-				createMenu(e.x, e.y, [
+				// need to calculate the real position of the frame relative to the top
+				let xoff = 0;
+				let yoff = 0;
+				let currentwin = ctx.window;
+				while (currentwin.parent && currentwin.frameElement) {
+					// this will return true until the end of the scramjet boundary
+					let { x, y } = currentwin.frameElement.getBoundingClientRect();
+					xoff += x;
+					yoff += y;
+					currentwin = currentwin.parent;
+				}
+				// parent is trapped, so it won't calculate the topmost iframe. do that manually
+				let { x, y } = frame.frame.getBoundingClientRect();
+				xoff += x;
+				yoff += y;
+				createMenu(xoff + e.pageX, yoff + e.pageY, [
+					{
+						label: "Back",
+						action: () => {
+							frame.back();
+						},
+					},
+					{
+						label: "Forward",
+						action: () => {
+							frame.forward();
+						},
+					},
+					{
+						label: "Reload",
+						action: () => {
+							frame.reload();
+						},
+					},
 					{
-						label: "??",
+						label: "Bookmark",
+						action: () => {
+							console.log("Bookmarking", tab.title, tab.url);
+						},
 					},
 				]);
+				e.preventDefault();
 			});
 			const head = framedoc.querySelector("head")!;
 			const observer = new MutationObserver(() => {

frontend/src/main.tsx

@@ -42,6 +42,9 @@ try {
 	built.id = "app";
 
 	app.replaceWith(built);
+	built.addEventListener("contextmenu", (e) => {
+		e.preventDefault();
+	});
 } catch (e) {
 	let err = e as any;
 	app.replaceWith(