add settings to monitor model

Author: Alberto Iannaccone

arduino-ide-extension/src/browser/monitor-model.ts

@@ -26,12 +26,20 @@ export class MonitorModel implements FrontendApplicationContribution {
   protected _timestamp: boolean;
   protected _lineEnding: MonitorModel.EOL;
   protected _interpolate: boolean;
+  protected _darkTheme: boolean;
+  protected _wsPort: number;
+  protected _serialPort: string;
+  protected _connected: boolean;
 
   constructor() {
     this._autoscroll = true;
     this._timestamp = false;
     this._interpolate = false;
     this._lineEnding = MonitorModel.EOL.DEFAULT;
+    this._darkTheme = false;
+    this._wsPort = 0;
+    this._serialPort = '';
+    this._connected = false;
 
     this.onChangeEmitter = new Emitter<
       MonitorModel.State.Change<keyof MonitorModel.State>
@@ -60,6 +68,7 @@ export class MonitorModel implements FrontendApplicationContribution {
     this._timestamp = state.timestamp;
     this._lineEnding = state.lineEnding;
     this._interpolate = state.interpolate;
+    this._serialPort = state.serialPort;
   }
 
   protected async storeState(): Promise<void> {
@@ -68,6 +77,7 @@ export class MonitorModel implements FrontendApplicationContribution {
       timestamp: this._timestamp,
       lineEnding: this._lineEnding,
       interpolate: this._interpolate,
+      serialPort: this._serialPort,
     });
   }
 
@@ -151,16 +161,94 @@ export class MonitorModel implements FrontendApplicationContribution {
     );
   }
 
+  get darkTheme(): boolean {
+    return this._darkTheme;
+  }
+
+  set darkTheme(darkTheme: boolean) {
+    if (darkTheme === this._darkTheme) return;
+    this._darkTheme = darkTheme;
+    this.monitorManagerProxy.changeSettings({
+      monitorUISettings: { darkTheme },
+    });
+    this.onChangeEmitter.fire({
+      property: 'darkTheme',
+      value: this._darkTheme,
+    });
+  }
+
+  get wsPort(): number {
+    return this._wsPort;
+  }
+
+  set wsPort(wsPort: number) {
+    if (wsPort === this._wsPort) return;
+    this._wsPort = wsPort;
+    this.monitorManagerProxy.changeSettings({
+      monitorUISettings: { wsPort },
+    });
+    this.onChangeEmitter.fire({
+      property: 'wsPort',
+      value: this._wsPort,
+    });
+  }
+
+  get serialPort(): string {
+    return this._serialPort;
+  }
+
+  set serialPort(serialPort: string) {
+    if (serialPort === this._serialPort) return;
+    this._serialPort = serialPort;
+    this.monitorManagerProxy.changeSettings({
+      monitorUISettings: { serialPort },
+    });
+    this.storeState().then(() =>
+      this.onChangeEmitter.fire({
+        property: 'serialPort',
+        value: this._serialPort,
+      })
+    );
+  }
+
+  get connected(): boolean {
+    return this._connected;
+  }
+
+  set connected(connected: boolean) {
+    if (connected === this._connected) return;
+    this._connected = connected;
+    this.monitorManagerProxy.changeSettings({
+      monitorUISettings: { connected },
+    });
+    this.onChangeEmitter.fire({
+      property: 'connected',
+      value: this._connected,
+    });
+  }
+
   protected onMonitorSettingsDidChange = (settings: MonitorSettings): void => {
     const { monitorUISettings } = settings;
     if (!monitorUISettings) return;
-    const { autoscroll, interpolate, lineEnding, timestamp } =
-      monitorUISettings;
+    const {
+      autoscroll,
+      interpolate,
+      lineEnding,
+      timestamp,
+      darkTheme,
+      wsPort,
+      serialPort,
+      connected,
+    } = monitorUISettings;
 
     if (!isNullOrUndefined(autoscroll)) this.autoscroll = autoscroll;
     if (!isNullOrUndefined(interpolate)) this.interpolate = interpolate;
     if (!isNullOrUndefined(lineEnding)) this.lineEnding = lineEnding;
     if (!isNullOrUndefined(timestamp)) this.timestamp = timestamp;
+    if (!isNullOrUndefined(darkTheme)) this.darkTheme = darkTheme;
+    if (!isNullOrUndefined(wsPort)) this.wsPort = wsPort;
+    if (!isNullOrUndefined(serialPort)) this.serialPort = serialPort;
+    if (!isNullOrUndefined(connected)) this.connected = connected;
   };
 }
 
@@ -171,6 +259,10 @@ export namespace MonitorModel {
     timestamp: boolean;
     lineEnding: EOL;
     interpolate: boolean;
+    darkTheme: boolean;
+    wsPort: number;
+    serialPort: string;
+    connected: boolean;
   }
   export namespace State {
     export interface Change<K extends keyof State> {

arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx

@@ -207,6 +207,7 @@ export class MonitorWidget extends ReactWidget {
             <SerialMonitorSendInput
               boardsServiceProvider={this.boardsServiceProvider}
               monitorManagerProxy={this.monitorManagerProxy}
+              monitorModel={this.monitorModel}
               resolveFocus={this.onFocusResolved}
               onSend={this.onSend}
             />

arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-input.tsx

@@ -5,12 +5,13 @@ import { isOSX } from '@theia/core/lib/common/os';
 import { DisposableCollection, nls } from '@theia/core/lib/common';
 import { MonitorManagerProxyClient } from '../../../common/protocol';
 import { BoardsServiceProvider } from '../../boards/boards-service-provider';
-import { timeout } from '@theia/core/lib/common/promise-util';
+import { MonitorModel } from '../../monitor-model';
 
 export namespace SerialMonitorSendInput {
   export interface Props {
     readonly boardsServiceProvider: BoardsServiceProvider;
     readonly monitorManagerProxy: MonitorManagerProxyClient;
+    readonly monitorModel: MonitorModel;
     readonly onSend: (text: string) => void;
     readonly resolveFocus: (element: HTMLElement | undefined) => void;
   }
@@ -35,25 +36,12 @@ export class SerialMonitorSendInput extends React.Component<
   }
 
   componentDidMount(): void {
-    this.setState({ connected: true });
-
-    const checkWSConnection = new Promise<boolean>((resolve) => {
-      this.props.monitorManagerProxy.onWSConnectionChanged((connected) => {
-        this.setState({ connected });
-        resolve(true);
-      });
-    });
-
-    const checkWSTimeout = timeout(1000).then(() => false);
-
-    Promise.race<boolean>([checkWSConnection, checkWSTimeout]).then(
-      async (resolved) => {
-        if (!resolved) {
-          const connected =
-            await this.props.monitorManagerProxy.isWSConnected();
-          this.setState({ connected });
-        }
-      }
+    this.setState({ connected: this.props.monitorModel.connected });
+    this.toDisposeBeforeUnmount.push(
+      this.props.monitorModel.onChange(({ property }) => {
+        if (property === 'connected')
+          this.setState({ connected: this.props.monitorModel.connected });
+      })
     );
   }
 

arduino-ide-extension/src/common/protocol/monitor-service.ts

@@ -65,6 +65,7 @@ export namespace Monitor {
     CHANGE_SETTINGS = 'CHANGE_SETTINGS',
   }
 
+  // Commands sent by the backend to the clients
   export enum MiddlewareCommand {
     ON_SETTINGS_DID_CHANGE = 'ON_SETTINGS_DID_CHANGE',
   }

arduino-ide-extension/src/node/monitor-manager.ts

@@ -62,7 +62,7 @@ export class MonitorManager extends CoreClientAware {
     if (!monitor) {
       monitor = this.createMonitor(board, port);
     }
-    return await monitor.start(monitorID);
+    return await monitor.start();
   }
 
   /**
@@ -142,7 +142,7 @@ export class MonitorManager extends CoreClientAware {
       return Status.NOT_CONNECTED;
     }
     monitor.setUploadInProgress(false);
-    return await monitor.start(monitorID);
+    return await monitor.start();
   }
 
   /**

arduino-ide-extension/src/node/monitor-service.ts

@@ -123,11 +123,11 @@ export class MonitorService extends CoreClientAware implements Disposable {
    * Start and connects a monitor using currently set board and port.
    * If a monitor is already started or board fqbn, port address and/or protocol
    * are missing nothing happens.
-   * @param id
    * @returns a status to verify connection has been established.
    */
-  async start(monitorID: string): Promise<Status> {
+  async start(): Promise<Status> {
     if (this.duplex) {
+      this.updateClientsSettings({ monitorUISettings: { connected: true } });
       return Status.ALREADY_CONNECTED;
     }
 
@@ -152,7 +152,7 @@ export class MonitorService extends CoreClientAware implements Disposable {
       pluggableMonitorSettings: {
         ...this.settings.pluggableMonitorSettings,
         ...(await this.monitorSettingsProvider.getSettings(
-          monitorID,
+          this.monitorID,
           defaultSettings
         )),
       },
@@ -165,12 +165,14 @@ export class MonitorService extends CoreClientAware implements Disposable {
     this.duplex
       .on('close', () => {
         this.duplex = null;
+        this.updateClientsSettings({ monitorUISettings: { connected: false } });
         this.logger.info(
           `monitor to ${this.port?.address} using ${this.port?.protocol} closed by client`
         );
       })
       .on('end', () => {
         this.duplex = null;
+        this.updateClientsSettings({ monitorUISettings: { connected: false } });
         this.logger.info(
           `monitor to ${this.port?.address} using ${this.port?.protocol} closed by server`
         );
@@ -223,6 +225,7 @@ export class MonitorService extends CoreClientAware implements Disposable {
         this.logger.info(
           `started monitor to ${this.port?.address} using ${this.port?.protocol}`
         );
+        this.updateClientsSettings({ monitorUISettings: { connected: true } });
         resolve(Status.OK);
         return;
       }
@@ -385,12 +388,10 @@ export class MonitorService extends CoreClientAware implements Disposable {
       }
     }
 
-    const command: Monitor.Message = {
-      command: Monitor.MiddlewareCommand.ON_SETTINGS_DID_CHANGE,
-      data: { ...settings, pluggableMonitorSettings: reconciledSettings },
-    };
-
-    this.webSocketProvider.sendMessage(JSON.stringify(command));
+    this.updateClientsSettings({
+      ...settings,
+      pluggableMonitorSettings: reconciledSettings,
+    });
 
     if (!this.duplex) {
       return Status.NOT_CONNECTED;
@@ -439,6 +440,15 @@ export class MonitorService extends CoreClientAware implements Disposable {
     }
   }
 
+  updateClientsSettings(settings: MonitorSettings): void {
+    const command: Monitor.Message = {
+      command: Monitor.MiddlewareCommand.ON_SETTINGS_DID_CHANGE,
+      data: settings,
+    };
+
+    this.webSocketProvider.sendMessage(JSON.stringify(command));
+  }
+
   /**
    * Stops the necessary handlers to send and receive messages to
    * and from the frontend and the running monitor