[frontend] resizable devtools & bump dreamland

Author: velzie

dreamlandjs

@@ -33,6 +33,9 @@ export class Tab extends StatefulClass {
 
 	internalpage: HTMLElement | null;
 
+	devtoolsOpen: boolean = true;
+	devtoolsWidth = 200;
+
 	constructor(public url: URL = new URL("puter://newtab")) {
 		super(createState(Object.create(Tab.prototype)));
 
@@ -256,6 +259,12 @@ function pageContextItems(client: ScramjetClient, tab: Tab, e: MouseEvent) {
 				console.log("Bookmarking", tab.title, tab.url);
 			},
 		},
+		{
+			label: "Inspect",
+			action: () => {
+				tab.devtoolsOpen = !tab.devtoolsOpen;
+			},
+		},
 	];
 }
 

frontend/src/Tab.tsx

@@ -8,7 +8,7 @@ import { Shell } from "./components/Shell";
 import { createMenu } from "./components/Menu";
 import { StatefulClass } from "./StatefulClass";
 import { Tab } from "./Tab";
-import { createDelegate } from "dreamland/utils";
+import { createDelegate } from "dreamland/core";
 
 export const pushTab = createDelegate<Tab>();
 export const popTab = createDelegate<Tab>();

frontend/src/browser.tsx

@@ -10,7 +10,7 @@ import iconSearch from "@ktibow/iconset-ion/search";
 import { createMenu, setContextMenu } from "./Menu";
 import { browser, client } from "../main";
 import { IconButton } from "./IconButton";
-import { createDelegate, type Delegate } from "dreamland/utils";
+import { createDelegate, type Delegate } from "dreamland/core";
 
 export const Spacer: Component = function (cx) {
 	return <div></div>;

frontend/src/components/Omnibox.tsx

@@ -10,17 +10,46 @@ export const Shell: Component<{
 }> = function (cx) {
 	pushTab.listen((tab) => {
 		tab.frame.frame.classList.add(cx.id);
-		let devtoolsFrame: HTMLIFrameElement = <iframe class={cx.id}></iframe>;
+		let devtoolsFrame: HTMLIFrameElement = (
+			<iframe class:unfocus={use(browser.unfocusframes)}></iframe>
+		);
+		let mouseMoveListen = (e: MouseEvent) => {
+			tab.devtoolsWidth = window.innerWidth - e.clientX;
+		};
 		cx.root.appendChild(
 			<div
-				class={`container ${cx.id}`}
+				class="container"
 				data-tab={tab.id}
 				class:active={use(this.activetab).map((t) => t === tab)}
 				class:showframe={use(tab.internalpage).map((t) => !t)}
 			>
-				{use(tab.internalpage)}
-				{tab.frame.frame}
-				<div class={`devtools ${cx.id}`}>{devtoolsFrame}</div>
+				<div
+					class="mainframecontainer"
+					class:unfocus={use(browser.unfocusframes)}
+				>
+					{use(tab.internalpage)}
+					{tab.frame.frame}
+				</div>
+				<div
+					class="devtools"
+					class:active={use(tab.devtoolsOpen)}
+					style={use`width: ${tab.devtoolsWidth}px`}
+				>
+					<div
+						on:mousedown={(e: MouseEvent) => {
+							browser.unfocusframes = true;
+							document.body.style.cursor = "ew-resize";
+							window.addEventListener("mousemove", mouseMoveListen);
+							window.addEventListener("mouseup", () => {
+								browser.unfocusframes = false;
+								window.removeEventListener("mousemove", mouseMoveListen);
+								document.body.style.cursor = "";
+							});
+						}}
+						class="divider"
+					></div>
+					{devtoolsFrame}
+				</div>
 			</div>
 		);
 		tab.devtoolsFrame = devtoolsFrame;
@@ -42,7 +71,7 @@ export const Shell: Component<{
 		tab.screenshot = canvas.toDataURL();
 	});
 
-	return <div class:unfocus={use(browser.unfocusframes)}></div>;
+	return <div></div>;
 };
 Shell.style = css`
 	:scope {
@@ -60,11 +89,32 @@ Shell.style = css`
 		display: flex;
 	}
 	.container .devtools {
-		display: block;
+		position: relative;
+		display: none;
 		width: 20em;
 	}
+	.container .devtools.active {
+		display: flex;
+	}
+
+	.mainframecontainer {
+		display: flex;
+		flex: 1;
+	}
+
+	.divider {
+		position: absolute;
+		top: 0;
+		left: -5px;
+		width: 5px;
+		/* background: #ccc; */
+		border-right: 1px solid #ccc;
+		height: 100%;
+		cursor: ew-resize;
+	}
+
 	iframe {
-		width: 100%;
+		flex: 1;
 		height: 100%;
 		border: none;
 		display: none;