[frontend] fix iframes eating focus for context menu clickouts

Author: velzie

frontend/src/Menu.tsx

@@ -1,11 +1,13 @@
 import type { Component, DLElement } from "dreamland/core";
+import { browser } from "./main";
 
 export const Menu: Component<{
 	x: number;
 	y: number;
 	items: { label: string; action?: () => void }[];
 }> = function (cx) {
 	cx.mount = () => {
+		browser.unfocusframes = true;
 		document.body.appendChild(cx.root);
 		const { top, left, width, height } = cx.root.getBoundingClientRect();
 		let maxX = document.documentElement.clientWidth - width;
@@ -17,6 +19,7 @@ export const Menu: Component<{
 			"click",
 			() => {
 				cx.root.remove();
+				browser.unfocusframes = false;
 			},
 			{ once: true }
 		);

frontend/src/Omnibox.tsx

@@ -10,7 +10,7 @@ import iconShield from "@ktibow/iconset-material-symbols/shield";
 import iconStar from "@ktibow/iconset-material-symbols/star";
 import iconSearch from "@ktibow/iconset-material-symbols/search";
 import { createMenu } from "./Menu";
-import { client } from "./main";
+import { browser, client } from "./main";
 
 export const Spacer: Component = function (cx) {
 	return <div></div>;
@@ -70,8 +70,10 @@ export const UrlInput: Component<
 		<div
 			on:click={(e: MouseEvent) => {
 				this.active = true;
+				browser.unfocusframes = true;
 				document.body.addEventListener("click", (e) => {
 					this.active = false;
+					browser.unfocusframes = false;
 					e.stopPropagation();
 				});
 				this.input.focus();

frontend/src/Shell.tsx

@@ -1,5 +1,6 @@
 import type { Component } from "dreamland/core";
 import type { Tab } from "./tabs";
+import { browser } from "./main";
 
 export let pushTab: (tab: Tab) => void;
 export let popTab: (tab: Tab) => void;
@@ -28,12 +29,15 @@ export const Shell: Component<{
 		}
 	};
 
-	return <div></div>;
+	return <div class:unfocus={use(browser.unfocusframes)}></div>;
 };
 Shell.css = `
   :scope {
     flex: 1;
   }
+  .unfocus {
+    pointer-events: none;
+  }
   .container {
     width: 100%;
     height: 100%;

frontend/src/browser.tsx

@@ -5,6 +5,7 @@ import { IconButton, Omnibox } from "./Omnibox";
 import { scramjet } from "./main";
 import iconAdd from "@ktibow/iconset-material-symbols/add";
 import { popTab, pushTab, Shell } from "./Shell";
+import { createMenu } from "./Menu";
 
 // let a = createState({
 // 	b: createState({
@@ -29,6 +30,8 @@ export class Browser extends StatefulClass {
 	tabs: Tab[] = [];
 	activetab: Tab;
 
+	unfocusframes: boolean = false;
+
 	constructor(state: Stateful<any>) {
 		super(state);
 
@@ -68,6 +71,14 @@ export class Browser extends StatefulClass {
 		});
 		frame.addEventListener("contextInit", (e) => {
 			const framedoc = frame.frame.contentDocument!;
+
+			framedoc.addEventListener("contextmenu", (e) => {
+				createMenu(e.x, e.y, [
+					{
+						label: "??",
+					},
+				]);
+			});
 			const head = framedoc.querySelector("head")!;
 			const observer = new MutationObserver(() => {
 				const title = framedoc.querySelector("title");

frontend/src/main.tsx

@@ -34,20 +34,12 @@ export const scramjet = new ScramjetController({
 scramjet.init();
 navigator.serviceWorker.register("./sw.js");
 
-let browser = createBrowser();
+export let browser = createBrowser();
 (self as any).browser = browser;
 
 try {
 	let built = browser.build();
 	built.id = "app";
-	built.addEventListener("contextmenu", (e) => {
-		createMenu(e.x, e.y, [
-			{
-				label: "Reload",
-			},
-		]);
-		e.preventDefault();
-	});
 
 	app.replaceWith(built);
 } catch (e) {