From 563a4b3a7cbc8e77592c3cb9b80b0792a6d2d632 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 8 Feb 2023 14:42:13 -0800
Subject: [PATCH] Add button to open browser devtools

---
 src/main/main.ts                              |  4 +++
 src/main/preload/browser.ts                   |  5 ++++
 .../features/titlebar/components/app-menu.tsx | 28 ++++++++++++++++++-
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/main/main.ts b/src/main/main.ts
index 2ba9bbc4..454f3ad8 100644
--- a/src/main/main.ts
+++ b/src/main/main.ts
@@ -89,6 +89,10 @@ const createWindow = async () => {
     mainWindow?.webContents.openDevTools();
   });
 
+  ipcMain.on('window-dev-tools', () => {
+    mainWindow?.webContents.openDevTools();
+  });
+
   ipcMain.on('window-maximize', () => {
     mainWindow?.maximize();
   });
diff --git a/src/main/preload/browser.ts b/src/main/preload/browser.ts
index 432339ba..0ca1ede7 100644
--- a/src/main/preload/browser.ts
+++ b/src/main/preload/browser.ts
@@ -13,7 +13,12 @@ const unmaximize = () => {
   ipcRenderer.send('window-unmaximize');
 };
 
+const devtools = () => {
+  ipcRenderer.send('window-dev-tools');
+};
+
 export const browser = {
+  devtools,
   exit,
   maximize,
   minimize,
diff --git a/src/renderer/features/titlebar/components/app-menu.tsx b/src/renderer/features/titlebar/components/app-menu.tsx
index 1afc10c3..a74489c9 100644
--- a/src/renderer/features/titlebar/components/app-menu.tsx
+++ b/src/renderer/features/titlebar/components/app-menu.tsx
@@ -1,6 +1,13 @@
 import { Group } from '@mantine/core';
 import { openModal, closeAllModals } from '@mantine/modals';
-import { RiLockLine, RiServerFill, RiEdit2Fill, RiSettings3Fill } from 'react-icons/ri';
+import isElectron from 'is-electron';
+import {
+  RiLockLine,
+  RiServerFill,
+  RiEdit2Fill,
+  RiSettings3Fill,
+  RiWindowFill,
+} from 'react-icons/ri';
 import { useNavigate } from 'react-router';
 import { DropdownMenu, Text } from '/@/renderer/components';
 import { ServerList } from '/@/renderer/features/servers';
@@ -10,6 +17,8 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useServerList, useAuthStoreActions } from '/@/renderer/store';
 import { ServerListItem, ServerType } from '/@/renderer/types';
 
+const browser = isElectron() ? window.electron.browser : null;
+
 export const AppMenu = () => {
   const navigate = useNavigate();
   const currentServer = useCurrentServer();
@@ -55,6 +64,12 @@ export const AppMenu = () => {
     });
   };
 
+  const handleBrowserDevTools = () => {
+    browser?.devtools();
+  };
+
+  const showBrowserDevToolsButton = isElectron();
+
   return (
     <>
       <DropdownMenu.Label>Select a server</DropdownMenu.Label>
@@ -90,6 +105,17 @@ export const AppMenu = () => {
       >
         Settings
       </DropdownMenu.Item>
+      {showBrowserDevToolsButton && (
+        <>
+          <DropdownMenu.Divider />
+          <DropdownMenu.Item
+            icon={<RiWindowFill />}
+            onClick={handleBrowserDevTools}
+          >
+            Open browser devtools
+          </DropdownMenu.Item>
+        </>
+      )}
     </>
   );
 };