spawn new window where to instantiate serial plotter app

Author: Alberto Iannaccone

arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -253,6 +253,7 @@ import {
   UploadCertificateDialogProps,
   UploadCertificateDialogWidget,
 } from './dialogs/certificate-uploader/certificate-uploader-dialog';
+import { PlotterContribution } from './plotter/plotter-contribution';
 
 const ElementQueries = require('css-element-queries/src/ElementQueries');
 
@@ -596,6 +597,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   Contribution.configure(bind, AddFile);
   Contribution.configure(bind, ArchiveSketch);
   Contribution.configure(bind, AddZipLibrary);
+  Contribution.configure(bind, PlotterContribution);
 
   bind(ResponseServiceImpl)
     .toSelf()

arduino-ide-extension/src/browser/menu/arduino-menus.ts

@@ -86,7 +86,7 @@ export namespace ArduinoMenus {
 
   // -- Tools
   export const TOOLS = [...MAIN_MENU_BAR, '4_tools'];
-  // `Auto Format`, `Archive Sketch`, `Manage Libraries...`, `Serial Monitor`
+  // `Auto Format`, `Archive Sketch`, `Manage Libraries...`, `Serial Monitor`, Serial Plotter
   export const TOOLS__MAIN_GROUP = [...TOOLS, '0_main'];
   // `WiFi101 /  WiFiNINA Firmware Updater`
   export const TOOLS__FIRMWARE_UPLOADER_GROUP = [

arduino-ide-extension/src/browser/plotter/plotter-contribution.ts

@@ -0,0 +1,69 @@
+import { injectable, inject } from 'inversify';
+import { Command, CommandRegistry, MenuModelRegistry } from '@theia/core';
+import { MonitorModel } from '../monitor/monitor-model';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { Contribution } from '../contributions/contribution';
+import { MonitorConfig } from '../../common/protocol';
+
+export namespace SerialPlotter {
+  export namespace Commands {
+    export const OPEN: Command = {
+      id: 'serial-plotter-open',
+      label: 'Serial Plotter',
+      category: 'Arduino',
+    };
+  }
+  export type InitMessage = {
+    baudrate: MonitorConfig.BaudRate;
+    darkTheme: boolean;
+    wsPort: number;
+  };
+}
+
+@injectable()
+export class PlotterContribution extends Contribution {
+  protected window: Window | null;
+
+  @inject(MonitorModel)
+  protected readonly model: MonitorModel;
+
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(SerialPlotter.Commands.OPEN, {
+      execute: async () => this.open(),
+    });
+  }
+
+  registerMenus(menus: MenuModelRegistry): void {
+    menus.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
+      commandId: SerialPlotter.Commands.OPEN.id,
+      label: SerialPlotter.Commands.OPEN.label,
+      order: '7',
+    });
+  }
+
+  protected async open(): Promise<void> {
+    const url = 'http://localhost:8080/index.html';
+    if (this.window) {
+      this.window.focus();
+    } else {
+      this.window = window.open(url, 'serialPlotter');
+      window.addEventListener('message', handlePostMessage);
+      const initMessage: SerialPlotter.InitMessage = {
+        baudrate: this.model.baudRate,
+        darkTheme: false,
+        wsPort: 0,
+      };
+      if (this.window) {
+        this.window.postMessage(initMessage, url);
+        this.window.onclose = () => {
+          window.removeEventListener('message', handlePostMessage);
+          this.window = null;
+        };
+      }
+    }
+  }
+}
+
+const handlePostMessage = (event: MessageEvent) => {
+  console.log(event.data);
+};

arduino-ide-extension/src/electron-main/theia/electron-main-application.ts

@@ -18,6 +18,8 @@ import {
 } from '@theia/core/lib/electron-main/electron-main-application';
 import { SplashServiceImpl } from '../splash/splash-service-impl';
 
+app.commandLine.appendSwitch('disable-http-cache');
+
 @injectable()
 export class ElectronMainApplication extends TheiaElectronMainApplication {
   protected _windows: BrowserWindow[] = [];
@@ -88,6 +90,25 @@ export class ElectronMainApplication extends TheiaElectronMainApplication {
         this.splashService.onCloseRequested
       );
     }
+
+    electronWindow.webContents.on(
+      'new-window',
+      (event, url, frameName, disposition, options, additionalFeatures) => {
+        if (frameName === 'serialPlotter') {
+          event.preventDefault();
+          Object.assign(options, {
+            webPreferences: {
+              devTools: true,
+              nativeWindowOpen: true,
+              openerId: electronWindow?.webContents.id,
+            },
+          });
+          event.newGuest = new BrowserWindow(options);
+          event.newGuest?.loadURL(url);
+        }
+      }
+    );
+
     this._windows.push(electronWindow);
     electronWindow.on('closed', () => {
       if (electronWindow) {