[frontend] add back devtools, only activate after first inspect

Author: velzie

frontend/src/Tab.tsx

@@ -70,14 +70,20 @@ export class Tab extends StatefulClass {
 		this.pos = 0;
 
 		addHistoryListeners(frame, this);
+		let injected = false;
 		frame.addEventListener("contextInit", (ctx) => {
 			injectContextMenu(ctx.client, this);
 
 			// make sure it's top level, ctxInit calls for all frames too
 			if (ctx.window == frame.frame.contentWindow) {
 				injectTitleWatcher(ctx.client, this);
 				injectHistoryEmulation(ctx.client, this);
-				// injectDevtools(ctx.client, this);
+
+				use(this.devtoolsOpen).listen((open) => {
+					if (!open || injected) return;
+					injected = true;
+					injectDevtools(ctx.client, this);
+				});
 			}
 		});
 

frontend/src/components/Shell.tsx

@@ -98,6 +98,10 @@ Shell.style = css`
 		display: flex;
 	}
 
+	.devtoolsframecontainer {
+		width: 100%;
+	}
+
 	.mainframecontainer {
 		display: flex;
 		flex: 1;