Add open devtools (ComfyUI) tray action

Comfy-Org · Oct 26, 2024 · 1415902 · 1415902
1 parent 968cfe9
commit 1415902
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -14,6 +14,7 @@ export const IPC_CHANNELS = {
   TOGGLE_LOGS: 'toggle-logs',
   COMFYUI_READY: 'comfyui-ready',
   GET_PRELOAD_SCRIPT: 'get-preload-script',
+  OPEN_DEVTOOLS: 'open-devtools',
 } as const;
 
 export const COMFY_ERROR_MESSAGE =

diff --git a/src/preload.ts b/src/preload.ts
@@ -23,6 +23,7 @@ export interface ElectronAPI {
   sendReady: () => void;
   restartApp: () => void;
   onToggleLogsView: (callback: () => void) => void;
+  onOpenDevTools: (callback: () => void) => void;
   isPackaged: () => Promise<boolean>;
   openDialog: (options: Electron.OpenDialogOptions) => Promise<string[] | undefined>;
   getComfyUIUrl: () => Promise<string>;
@@ -60,6 +61,9 @@ const electronAPI: ElectronAPI = {
   onToggleLogsView: (callback: () => void) => {
     ipcRenderer.on(IPC_CHANNELS.TOGGLE_LOGS, () => callback());
   },
+  onOpenDevTools: (callback: () => void) => {
+    ipcRenderer.on(IPC_CHANNELS.OPEN_DEVTOOLS, () => callback());
+  },
   onShowSelectDirectory: (callback: () => void) => {
     ipcRenderer.on(IPC_CHANNELS.SHOW_SELECT_DIRECTORY, () => callback());
   },

diff --git a/src/renderer/components/ComfyUIContainer.tsx b/src/renderer/components/ComfyUIContainer.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import LogViewer from './LogViewer';
 import { ElectronAPI } from 'src/preload';
 import { ELECTRON_BRIDGE_API } from 'src/constants';
+import { WebviewTag } from 'electron';
 
 interface ComfyUIContainerProps {
   comfyPort: number;
@@ -29,13 +30,17 @@ const logContainerStyle: React.CSSProperties = {
 
 const ComfyUIContainer: React.FC<ComfyUIContainerProps> = ({ comfyPort, preloadScript }) => {
   const [showStreamingLogs, setShowStreamingLogs] = useState(false);
+  const webviewRef = useRef<WebviewTag>(null);
 
   useEffect(() => {
     const electronAPI: ElectronAPI = (window as any)[ELECTRON_BRIDGE_API];
 
     electronAPI.onToggleLogsView(() => {
       setShowStreamingLogs((prevState) => !prevState);
     });
+    electronAPI.onOpenDevTools(() => {
+      webviewRef.current?.openDevTools();
+    });
   }, []);
 
   return (
@@ -45,6 +50,7 @@ const ComfyUIContainer: React.FC<ComfyUIContainerProps> = ({ comfyPort, preloadS
         src={`http://localhost:${comfyPort}`}
         style={iframeStyle}
         preload={`file://${preloadScript}`}
+        ref={webviewRef}
       />
       {showStreamingLogs && (
         <div style={logContainerStyle}>

diff --git a/src/tray.ts b/src/tray.ts
@@ -1,5 +1,6 @@
 import { Tray, Menu, BrowserWindow, app, shell } from 'electron';
 import path from 'path';
+import { IPC_CHANNELS } from './constants';
 
 export function SetupTray(
   mainView: BrowserWindow,
@@ -83,9 +84,13 @@ export function SetupTray(
       click: () => shell.openPath(app.getPath('logs')),
     },
     {
-      label: 'Open devtools',
+      label: 'Open devtools (Electron)',
       click: () => mainView.webContents.openDevTools(),
     },
+    {
+      label: 'Open devtools (ComfyUI)',
+      click: () => mainView.webContents.send(IPC_CHANNELS.OPEN_DEVTOOLS),
+    },
     {
       label: 'Toggle Log Viewer',
       click: () => toggleLogs(),