Add dev console button

src/css/index.css

@@ -5,6 +5,7 @@
 
 :root {
     --window-frame-height: 36px;
+    --window-control-size: 28px;
 }
 
 p {
@@ -64,15 +65,17 @@ body {
 }
 
 .window-control {
-    width: 30px;
-    height: 24px;
+    width: var(--window-control-size);
+    height: var(--window-control-size);
     padding: 0;
     border-radius: 6px;
     background: rgba(148, 163, 184, 0.2);
     border: 1px solid rgba(148, 163, 184, 0.25);
     color: #e2e8f0;
-    font-size: 16px;
+    font-size: 14px;
     line-height: 1;
+    display: grid;
+    place-items: center;
     box-shadow: none;
 }
 

src/index.html

@@ -12,6 +12,9 @@
                 <button class="window-control" type="button" data-window-action="minimize" aria-label="Minimize">
                     &minus;
                 </button>
+                <button class="window-control" type="button" data-window-action="devtools" aria-label="Toggle dev tools">
+                    &#9881;
+                </button>
                 <button
                     class="window-control window-control-close"
                     type="button"
@@ -113,6 +116,9 @@
                     if (action === "minimize") {
                         window.store.minimizeWindow();
                     }
+                    if (action === "devtools") {
+                        window.store.toggleDevTools();
+                    }
                     if (action === "close") {
                         window.store.closeWindow();
                     }

src/main.js

@@ -70,6 +70,16 @@ ipcMain.handle("close-window", () => {
     }
 });
 
+ipcMain.handle("toggle-devtools", () => {
+    if (ELECTRON_WINDOW && !ELECTRON_WINDOW.isDestroyed()) {
+        if (ELECTRON_WINDOW.webContents.isDevToolsOpened()) {
+            ELECTRON_WINDOW.webContents.closeDevTools();
+        } else {
+            ELECTRON_WINDOW.webContents.openDevTools({ mode: "detach" });
+        }
+    }
+});
+
 ipcMain.handle("save-broadcaster", (_, broadcaster) => {
     const store = readStore(STORE_PATH);
     store.lastBroadcaster = broadcaster;

src/preload.js

@@ -9,4 +9,5 @@ contextBridge.exposeInMainWorld("store", {
     setWindowSize: (width, height) => ipcRenderer.invoke("set-window-size", width, height),
     minimizeWindow: () => ipcRenderer.invoke("minimize-window"),
     closeWindow: () => ipcRenderer.invoke("close-window"),
+    toggleDevTools: () => ipcRenderer.invoke("toggle-devtools"),
 });