[chrome] ux: fix race conditions in frame unfocus logic and unfocus frames when dragging a tab

Author: velzie

packages/chrome/src/Browser.tsx

@@ -92,8 +92,6 @@ export class Browser extends StatefulClass {
 	sessionDownloadHistory: Stateful<DownloadEntry>[] = [];
 	globalDownloadHistory: Stateful<DownloadEntry>[] = [];
 
-	unfocusframes: boolean = false;
-
 	cookieJar: CookieJar = new CookieJar();
 
 	downloadProgress = 0;

packages/chrome/src/components/Menu.tsx

@@ -11,6 +11,7 @@ import { Icon } from "./Icon";
 import type { IconifyIcon } from "@iconify/types";
 import { emToPx } from "../utils";
 import { isPuter } from "../main";
+import { requestUnfocusFrames } from "./Shell";
 
 export const closeMenu = createDelegate<void>();
 
@@ -41,8 +42,10 @@ export function Menu(
 	this.x = 0;
 	this.y = 0;
 
+	const [lock, unlock] = requestUnfocusFrames();
+
 	const close = () => {
-		browser.unfocusframes = false;
+		unlock();
 
 		window.removeEventListener("click", ev, { capture: true });
 		window.removeEventListener("contextmenu", ev, { capture: true });
@@ -66,7 +69,7 @@ export function Menu(
 	};
 
 	cx.mount = () => {
-		browser.unfocusframes = true;
+		lock();
 		document.body.appendChild(cx.root);
 		const { width, height } = cx.root.getBoundingClientRect();
 		const docWidth = document.documentElement.clientWidth;

packages/chrome/src/components/Omnibar/Omnibox.tsx

@@ -25,6 +25,7 @@ import { SiteOptionsButton } from "./SiteOptionsButton";
 import { Favicon } from "../Favicon";
 import { UrlInput } from "./UrlInput";
 import { Suggestion } from "./Suggestion";
+import { requestUnfocusFrames } from "../Shell";
 
 export const focusOmnibox = createDelegate<void>();
 
@@ -76,6 +77,8 @@ export function Omnibox(
 	this.value = "";
 	this.trendingSuggestions = [];
 
+	const [lock, unlock] = requestUnfocusFrames();
+
 	cx.mount = () => {
 		setContextMenu(cx.root, [
 			{
@@ -179,11 +182,11 @@ export function Omnibox(
 	const activate = () => {
 		this.subtleinput = false;
 		this.active = true;
-		browser.unfocusframes = true;
+		lock();
 
 		const handleClickOutside = (e: MouseEvent) => {
 			this.active = false;
-			browser.unfocusframes = false;
+			unlock();
 			e.preventDefault();
 
 			document.body.removeEventListener("click", handleClickOutside);

packages/chrome/src/components/Shell.tsx

@@ -1,8 +1,26 @@
-import { css, type ComponentContext } from "dreamland/core";
+import { createDelegate, css, type ComponentContext } from "dreamland/core";
 import { browser } from "../Browser";
 import { forceScreenshot, popTab, pushTab } from "../Browser";
 import { takeScreenshotGDM } from "../screenshot";
 
+let locks: Symbol[] = [];
+let setUnfocus = createDelegate<boolean>();
+export function requestUnfocusFrames(): [() => void, () => void] {
+	let lock = Symbol();
+	return [
+		() => {
+			setUnfocus(true);
+			locks.push(lock);
+		},
+		() => {
+			locks = locks.filter((l) => l !== lock);
+			if (locks.length === 0) {
+				setUnfocus(false);
+			}
+		},
+	];
+}
+
 export function Shell(_, cx: ComponentContext) {
 	pushTab.listen((tab) => {
 		// paint the iframes
@@ -12,6 +30,9 @@ export function Shell(_, cx: ComponentContext) {
 		let mouseMoveListen = (e: MouseEvent) => {
 			tab.devtoolsWidth = window.innerWidth - e.clientX;
 		};
+
+		const [lock, unlock] = requestUnfocusFrames();
+
 		cx.root.appendChild(
 			<div
 				class="container"
@@ -20,10 +41,7 @@ export function Shell(_, cx: ComponentContext) {
 				class:active={use(browser.activetab).map((t) => t === tab)}
 				class:showframe={use(tab.internalpage).map((t) => !t)}
 			>
-				<div
-					class="mainframecontainer"
-					class:unfocus={use(browser.unfocusframes)}
-				>
+				<div class="mainframecontainer">
 					{use(tab.internalpage)}
 					{tab.frame.frame}
 				</div>
@@ -34,21 +52,18 @@ export function Shell(_, cx: ComponentContext) {
 				>
 					<div
 						on:mousedown={(e: MouseEvent) => {
-							browser.unfocusframes = true;
+							lock();
 							document.body.style.cursor = "ew-resize";
 							window.addEventListener("mousemove", mouseMoveListen);
 							window.addEventListener("mouseup", () => {
-								browser.unfocusframes = false;
+								unlock();
 								window.removeEventListener("mousemove", mouseMoveListen);
 								document.body.style.cursor = "";
 							});
 						}}
 						class="divider"
 					></div>
-					<div
-						class="devtoolsframecontainer"
-						class:unfocus={use(browser.unfocusframes)}
-					>
+					<div class="devtoolsframecontainer">
 						{/*{tab.devtoolsFrame.frame}*/}
 					</div>
 				</div>
@@ -73,6 +88,23 @@ export function Shell(_, cx: ComponentContext) {
 			// tab.screenshot = await takeScreenshotSvg(container);
 		}
 	});
+	setUnfocus.listen((unfocus) => {
+		if (unfocus) {
+			cx.root
+				.querySelectorAll(".mainframecontainer, .devtoolsframecontainer")
+				.forEach((el) => {
+					if (!(el instanceof HTMLElement)) return;
+					el.style.pointerEvents = "none";
+				});
+		} else {
+			cx.root
+				.querySelectorAll(".mainframecontainer, .devtoolsframecontainer")
+				.forEach((el) => {
+					if (!(el instanceof HTMLElement)) return;
+					el.style.pointerEvents = "";
+				});
+		}
+	});
 
 	return <div></div>;
 }
@@ -84,9 +116,6 @@ Shell.style = css`
 		width: 100%;
 		position: relative;
 	}
-	.unfocus {
-		pointer-events: none;
-	}
 	.container {
 		position: absolute;
 		width: 100%;

packages/chrome/src/components/TabStrip/TabStrip.tsx

@@ -16,6 +16,7 @@ import { browser, forceScreenshot, pushTab } from "../../Browser";
 import { defaultFaviconUrl } from "../../assets/favicon";
 import { DragTab } from "./DragTab";
 import { markDirty } from "../../storage";
+import { requestUnfocusFrames } from "../Shell";
 
 type VisualTab = {
 	tab: Tab;
@@ -48,6 +49,8 @@ export function TabStrip(
 	this.currentlydragging = -1;
 	this.visualtabs = [];
 
+	const [lock, unlock] = requestUnfocusFrames();
+
 	const TAB_PADDING = 6;
 	const TAB_MAX_SIZE = 231;
 	const TAB_TRANSITION = "250ms ease";
@@ -167,11 +170,13 @@ export function TabStrip(
 		tab.dragpos = -1;
 		layoutTabs(true);
 		this.currentlydragging = -1;
+		unlock();
 	});
 
 	const mouseDown = (e: MouseEvent, tab: VisualTab) => {
 		if (e.button != 0) return;
 		this.currentlydragging = tab.tab.id;
+		lock();
 
 		const rect = tab.root.getBoundingClientRect();
 		tab.root.style.zIndex = "100";