feat: capture Electron IPC messages for opensumi devtools

packages/addons/src/browser/chrome-devtools.contribution.ts

@@ -1,5 +1,5 @@
 import { Autowired } from '@opensumi/di';
-import { ClientAppContribution } from '@opensumi/ide-core-browser';
+import { AppConfig, ClientAppContribution } from '@opensumi/ide-core-browser';
 import { Domain } from '@opensumi/ide-core-common/lib/di-helper';
 
 import { ConnectionRTTBrowserServiceToken, ConnectionRTTBrowserService } from './connection-rtt-service';
@@ -15,6 +15,9 @@ enum DevtoolsCommand {
 
 @Domain(ClientAppContribution)
 export class ChromeDevtoolsContribution implements ClientAppContribution {
+  @Autowired(AppConfig)
+  private readonly appConfig: AppConfig;
+
   @Autowired(ConnectionRTTBrowserServiceToken)
   protected readonly rttService: ConnectionRTTBrowserService;
 
@@ -23,25 +26,28 @@ export class ChromeDevtoolsContribution implements ClientAppContribution {
   static INTERVAL = 1000;
 
   initialize() {
-    // receive notification from opensumi devtools by custom event
-    window.addEventListener(DevtoolsEvent.Latency, (event) => {
-      const { command } = event.detail;
-      if (command === DevtoolsCommand.Start) {
+    // only runs when devtools supoprt is enabled
+    if (this.appConfig.devtools) {
+      // receive notification from opensumi devtools by custom event
+      window.addEventListener(DevtoolsEvent.Latency, (event) => {
+        const { command } = event.detail;
+        if (command === DevtoolsCommand.Start) {
+          if (!this.interval) {
+            this.startRTTInterval();
+          }
+        } else if (command === DevtoolsCommand.Stop) {
+          if (this.interval) {
+            global.clearInterval(this.interval);
+            this.interval = undefined;
+          }
+        }
+      });
+
+      // if opensumi devtools has started capturing before this contribution point is registered
+      if (window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__?.captureRPC) {
         if (!this.interval) {
           this.startRTTInterval();
         }
-      } else if (command === DevtoolsCommand.Stop) {
-        if (this.interval) {
-          global.clearInterval(this.interval);
-          this.interval = undefined;
-        }
-      }
-    });
-
-    // if opensumi devtools has started capturing before this contribution point is registered
-    if (window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__?.capture) {
-      if (!this.interval) {
-        this.startRTTInterval();
       }
     }
   }
@@ -52,7 +58,7 @@ export class ChromeDevtoolsContribution implements ClientAppContribution {
       await this.rttService.measure();
       const rtt = Date.now() - start;
       // "if" below is to prevent setting latency after stoping capturing
-      if (window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.capture) {
+      if (window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.captureRPC) {
         window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.latency = rtt;
       }
     }, ChromeDevtoolsContribution.INTERVAL);

packages/connection/src/common/utils.ts

@@ -37,8 +37,8 @@ export function parse(input: string, reviver?: (this: any, key: string, value: a
 }
 
 export function getCapturer() {
-  if (typeof window !== 'undefined' && window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__?.capture) {
-    return window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.capture;
+  if (typeof window !== 'undefined' && window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__?.captureRPC) {
+    return window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.captureRPC;
   }
   return;
 }

packages/core-browser/src/bootstrap/app.ts

@@ -146,10 +146,6 @@ export class ClientApp implements IClientApp, IDisposable {
   stateService: ClientAppStateService;
 
   constructor(opts: IClientAppOpts) {
-    // set a global so the opensumi devtools can identify that
-    // the current page is powered by opensumi core
-    window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__ = {};
-
     const {
       modules,
       contributions,
@@ -161,8 +157,10 @@ export class ClientApp implements IClientApp, IDisposable {
       editorBackgroundImage,
       defaultPreferences,
       allowSetDocumentTitleFollowWorkspaceDir = true,
+      devtools = false, // if not set, disable devtools support as default
       ...restOpts // rest part 为 AppConfig
     } = opts;
+
     this.initEarlyPreference(opts.workspaceDir || '');
     setLanguageId(getPreferenceLanguageId(defaultPreferences));
     this.injector = opts.injector || new Injector();
@@ -188,8 +186,15 @@ export class ClientApp implements IClientApp, IDisposable {
       layoutConfig: opts.layoutConfig as LayoutConfig,
       editorBackgroundImage: opts.editorBackgroundImage || editorBackgroundImage,
       allowSetDocumentTitleFollowWorkspaceDir,
+      devtools,
     };
 
+    if (devtools) {
+      // set a global so the opensumi devtools can identify that
+      // the current page is powered by opensumi core
+      window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__ = {};
+    }
+
     if (this.config.isElectronRenderer && electronEnv.metadata?.extensionDevelopmentHost) {
       this.config.extensionDevelopmentHost = electronEnv.metadata.extensionDevelopmentHost;
     }

packages/core-browser/src/react-providers/config-provider.tsx

@@ -218,6 +218,11 @@ export interface AppConfig {
    * 这将影响 Terminal 与 Extension 模块与子进程的连接方式
    */
   isRemote?: boolean;
+  /**
+   * 是否开启对 OpenSumi DevTools 的支持
+   * 默认值为 false
+   */
+  devtools?: boolean;
 }
 
 export const ConfigContext = React.createContext<AppConfig>({

packages/core-electron-main/browser-preload/index.js

@@ -3,6 +3,60 @@ const os = require('os');
 
 const { ipcRenderer } = require('electron');
 
+const initForDevtools = () => {
+  const getCapturer = () => {
+    if (window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__?.captureIPC) {
+      return window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.captureIPC;
+    }
+    return;
+  };
+
+  const capture = (message) => {
+    const capturer = getCapturer();
+    if (capturer !== undefined) {
+      capturer(message);
+    }
+  };
+
+  // ipcRenderer.on
+  const originalIpcRendererOn = ipcRenderer.on;
+  ipcRenderer.on = (channel, handler) => {
+    const proxyHandler = (event, ...args) => {
+      if (channel !== 'main->browser') {
+        capture({ ipcMethod: 'ipcRenderer.on', channel, args });
+      }
+      handler(event, ...args);
+    };
+    return originalIpcRendererOn.call(ipcRenderer, channel, proxyHandler);
+  };
+
+  // ipcRenderer.send
+  const originalIpcRendererSend = ipcRenderer.send;
+  ipcRenderer.send = (channel, ...args) => {
+    capture({ ipcMethod: 'ipcRenderer.send', channel, args });
+    return originalIpcRendererSend.call(ipcRenderer, channel, ...args);
+  };
+
+  // ipcRenderer.sendSync
+  const originalIpcRendererSendSync = ipcRenderer.sendSync;
+  ipcRenderer.sendSync = (channel, ...args) => {
+    capture({ ipcMethod: 'ipcRenderer.sendSync', channel, args });
+    return originalIpcRendererSendSync.call(ipcRenderer, channel, ...args);
+  };
+
+  // ipcRenderer.invoke
+  const originalIpcRendererInvoke = ipcRenderer.invoke;
+  ipcRenderer.invoke = (channel, ...args) => {
+    capture({ ipcMethod: 'ipcRenderer.invoke', channel, args });
+    return originalIpcRendererInvoke.call(ipcRenderer, channel, ...args);
+  };
+
+  // receive messages that transfered from main process and capture them
+  ipcRenderer.on('main->browser', (event, message) => {
+    capture(message);
+  });
+};
+
 const electronEnv = {};
 
 const urlParams = new URLSearchParams(decodeURIComponent(window.location.search));
@@ -32,7 +86,10 @@ electronEnv.currentWebContentsId = webContentsId;
 electronEnv.onigWasmPath = require.resolve('vscode-oniguruma/release/onig.wasm');
 
 const metaData = JSON.parse(ipcRenderer.sendSync('window-metadata', electronEnv.currentWindowId));
-
+// if devtools support enabled
+if (metaData.devtools) {
+  initForDevtools();
+}
 electronEnv.metadata = metaData;
 process.env = Object.assign({}, process.env, metaData.env, { WORKSPACE_DIR: metaData.workspace });
 

packages/core-electron-main/src/bootstrap/app.ts

@@ -100,6 +100,11 @@ export class ElectronMainApp {
     this.onBeforeReadyContribution();
     this.registerMainApis();
     this.registerURLHandlers();
+
+    // if not set, disable devtools support as default
+    if (this.config.devtools === undefined) {
+      this.config.devtools = false;
+    }
   }
 
   async init() {

packages/core-electron-main/src/bootstrap/devtools.ts

@@ -0,0 +1,33 @@
+import { ipcMain, BrowserWindow } from 'electron';
+
+export const initForDevtools = (mainWindow: BrowserWindow) => {
+  // `mainWindow.webContents.send` is used to transfer messages to main window
+  // wherer ipcRenderer.on('main->browser', xxx) is set to receive the messages
+  // then put them to window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.IPCMessages
+
+  // ipcMain.on
+  const originalIpcMainOn = ipcMain.on;
+  ipcMain.on = (channel: any, handler: any) => {
+    const proxyHandler = (event: any, ...args: any) => {
+      mainWindow.webContents.send('main->browser', { ipcMethod: 'ipcMain.on', channel, args });
+      handler(event, ...args);
+      // TODO event.returnValue会作为ipcRenderer.sendSync的response, 可捕获
+    };
+    return originalIpcMainOn.call(ipcMain, channel, proxyHandler);
+  };
+
+  // ipcMain.handle
+  const originalIpcMainHandle = ipcMain.handle;
+  ipcMain.handle = (channel: any, handler: any) => {
+    const proxyHandler = (event: any, ...args: any) => {
+      mainWindow.webContents.send('main->browser', { ipcMethod: 'ipcMain.handle', channel, args });
+      handler(event, ...args);
+      // TODO ipcMain.handle的返回值会作为ipcRenderer.invoke的response, 可捕获
+    };
+    return originalIpcMainHandle.call(ipcMain, channel, proxyHandler);
+  };
+
+  // TODO BrowserWindow.webContents.send
+  // 这是main进程向renderer进程发送消息的方式, 但BrowserWindow可以是任何实例,
+  // 所以我不知道怎么处理. 如果可以实现, 注意判断channel是否为'main->browser'
+};

packages/core-electron-main/src/bootstrap/types.ts

@@ -80,6 +80,12 @@ export interface ElectronAppConfig {
    * 如有外部 injector，优先使用外部
    */
   injector?: Injector;
+
+  /**
+   * 是否开启对 OpenSumi DevTools 的支持
+   * 默认值为 false
+   */
+  devtools?: boolean;
 }
 
 export const ElectronAppConfig = Symbol('ElectronAppConfig');

packages/core-electron-main/src/bootstrap/window.ts

@@ -25,6 +25,7 @@ import {
 } from '@opensumi/ide-core-common';
 import { normalizedIpcHandlerPathAsync } from '@opensumi/ide-core-common/lib/utils/ipc';
 
+import { initForDevtools } from './devtools';
 import { ElectronAppConfig, ICodeWindow, ICodeWindowOptions } from './types';
 
 const DEFAULT_WINDOW_HEIGHT = 700;
@@ -94,6 +95,12 @@ export class CodeWindow extends Disposable implements ICodeWindow {
       ...this.appConfig.overrideBrowserOptions,
       ...options,
     });
+
+    if (this.appConfig.devtools) {
+      // initialize for OpenSumi DevTools
+      initForDevtools(this.browser);
+    }
+
     if (options) {
       if (options.extensionDir) {
         this.extensionDir = options.extensionDir;
@@ -131,6 +138,7 @@ export class CodeWindow extends Disposable implements ICodeWindow {
           workerHostEntry: this.appConfig.extensionWorkerEntry,
           extensionDevelopmentHost: this.appConfig.extensionDevelopmentHost,
           appPath: app.getAppPath(),
+          devtools: this.appConfig.devtools,
         });
       }
     };

packages/startup/entry/web/app.tsx

@@ -46,4 +46,5 @@ renderApp({
     bottom: '@opensumi/ide-terminal-next',
     right: '',
   },
+  devtools: true, // 开启 core-browser 对 OpenSumi DevTools 的支持，默认为关闭
 });

tools/electron/src/browser/index.ts

@@ -103,4 +103,5 @@ renderApp({
   },
   modules: [...CommonBrowserModules, ElectronBasicModule],
   layoutConfig: customLayoutConfig,
+  devtools: true, // 开启 core-browser 对 OpenSumi DevTools 的支持，默认为关闭
 });

tools/electron/src/main/index.ts

@@ -27,6 +27,7 @@ const electronApp = new ElectronMainApp({
   extensionDir: getExtensionDir(),
   extensionCandidate: [],
   overrideWebPreferences: {},
+  devtools: true, // 开启 core-electron-main 对 OpenSumi DevTools 的支持，默认为关闭
 });
 
 electronApp.init().then(() => {