ATL-469: Fixed various serial-monitor issues.

 - Fixed a monitor reconnecting issue after upload.
 - Serial monitor connection was not disposed when the widget was closed
from the toolbar with the magnifier (:mag:) icon. It worked only iff the
user closed the view with the `X`.
 - This commit also fixes a warning that was related to the incorrect focus
handling of the widget.
 - Switched to `board list -w` instead of polling.
 - Added a singleton for the board discovery to spare the CPU.
 - Fixed DI scopes on the backend. Each frontend gets its own service.
 - Switched to the `20201112` nightly CLI.
 - Fixed the Monitor view's image when the view is on the side-bar.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>

Author: Akos Kitta

arduino-ide-extension/package.json

@@ -120,7 +120,7 @@
   ],
   "arduino": {
     "cli": {
-      "version": "20201104"
+      "version": "20201112"
     }
   }
 }

arduino-ide-extension/src/browser/boards/boards-service-provider.ts

@@ -265,6 +265,29 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
         return this._availableBoards;
     }
 
+    async waitUntilAvailable(what: Board & { port: Port }, timeout?: number): Promise<void> {
+        const find = (needle: Board & { port: Port }, haystack: AvailableBoard[]) =>
+            haystack.find(board => Board.equals(needle, board) && Port.equals(needle.port, board.port));
+        const timeoutTask = !!timeout && timeout > 0
+            ? new Promise<void>((_, reject) => setTimeout(() => reject(new Error(`Timeout after ${timeout} ms.`)), timeout))
+            : new Promise<void>(() => { /* never */ });
+        const waitUntilTask = new Promise<void>(resolve => {
+            let candidate = find(what, this.availableBoards);
+            if (candidate) {
+                resolve();
+                return;
+            }
+            const disposable = this.onAvailableBoardsChanged(availableBoards => {
+                candidate = find(what, availableBoards);
+                if (candidate) {
+                    disposable.dispose();
+                    resolve();
+                }
+            });
+        });
+        return await Promise.race([waitUntilTask, timeoutTask]);
+    }
+
     protected async reconcileAvailableBoards(): Promise<void> {
         const attachedBoards = this._attachedBoards;
         const availablePorts = this._availablePorts;

arduino-ide-extension/src/browser/contributions/upload-sketch.ts

@@ -77,9 +77,14 @@ export class UploadSketch extends SketchContribution {
         if (!uri) {
             return;
         }
+        let shouldAutoConnect = false;
         const monitorConfig = this.monitorConnection.monitorConfig;
         if (monitorConfig) {
             await this.monitorConnection.disconnect();
+            if (this.monitorConnection.autoConnect) {
+                shouldAutoConnect = true;
+            }
+            this.monitorConnection.autoConnect = false;
         }
         try {
             const { boardsConfig } = this.boardsServiceClientImpl;
@@ -122,7 +127,18 @@ export class UploadSketch extends SketchContribution {
             this.messageService.error(e.toString());
         } finally {
             if (monitorConfig) {
-                await this.monitorConnection.connect(monitorConfig);
+                const { board, port } = monitorConfig;
+                try {
+                    await this.boardsServiceClientImpl.waitUntilAvailable(Object.assign(board, { port }), 10_000);
+                    if (shouldAutoConnect) {
+                        // Enabling auto-connect will trigger a connect.
+                        this.monitorConnection.autoConnect = true;
+                    } else {
+                        await this.monitorConnection.connect(monitorConfig);
+                    }
+                } catch (waitError) {
+                    this.messageService.error(`Could not reconnect to serial monitor. ${waitError.toString()}`);
+                }
             }
         }
     }

arduino-ide-extension/src/browser/icons/monitor-tab-icon.svg

@@ -5,7 +5,7 @@ import { OptionsType } from 'react-select/src/types';
 import { isOSX } from '@theia/core/lib/common/os';
 import { Event, Emitter } from '@theia/core/lib/common/event';
 import { Key, KeyCode } from '@theia/core/lib/browser/keys';
-import { DisposableCollection } from '@theia/core/lib/common/disposable'
+import { DisposableCollection, Disposable } from '@theia/core/lib/common/disposable'
 import { ReactWidget, Message, Widget, MessageLoop } from '@theia/core/lib/browser/widgets';
 import { Board, Port } from '../../common/protocol/boards-service';
 import { MonitorConfig } from '../../common/protocol/monitor-service';
@@ -45,10 +45,16 @@ export class MonitorWidget extends ReactWidget {
         super();
         this.id = MonitorWidget.ID;
         this.title.label = 'Serial Monitor';
-        this.title.iconClass = 'arduino-serial-monitor-tab-icon';
+        this.title.iconClass = 'monitor-tab-icon';
         this.title.closable = true;
         this.scrollOptions = undefined;
         this.toDispose.push(this.clearOutputEmitter);
+        this.toDispose.push(Disposable.create(() => {
+            this.monitorConnection.autoConnect = false;
+            if (this.monitorConnection.connected) {
+                this.monitorConnection.disconnect();
+            }
+        }));
     }
 
     @postConstruct()
@@ -73,10 +79,6 @@ export class MonitorWidget extends ReactWidget {
 
     onCloseRequest(msg: Message): void {
         this.closing = true;
-        this.monitorConnection.autoConnect = false;
-        if (this.monitorConnection.connected) {
-            this.monitorConnection.disconnect();
-        }
         super.onCloseRequest(msg);
     }
 
@@ -100,6 +102,9 @@ export class MonitorWidget extends ReactWidget {
     }
 
     protected onFocusResolved = (element: HTMLElement | undefined) => {
+        if (this.closing || !this.isAttached) {
+            return;
+        }
         this.focusNode = element;
         requestAnimationFrame(() => MessageLoop.sendMessage(this, Widget.Msg.ActivateRequest));
     }

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

@@ -1,8 +1,6 @@
-.p-TabBar.theia-app-centers .p-TabBar-tabIcon.arduino-serial-monitor-tab-icon {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 41px;
-    background-position-x: 19px;
+.monitor-tab-icon {
+    -webkit-mask: url('../icons/monitor-tab-icon.svg');
+    mask: url('../icons/monitor-tab-icon.svg');
 }
 
 .serial-monitor {

arduino-ide-extension/src/browser/style/monitor.css

@@ -4,6 +4,8 @@ import { Searchable } from './searchable';
 import { Installable } from './installable';
 import { ArduinoComponent } from './arduino-component';
 
+export type AvailablePorts = Record<string, [Port, Array<Board>]>;
+
 export interface AttachedBoardsChangeEvent {
     readonly oldState: Readonly<{ boards: Board[], ports: Port[] }>;
     readonly newState: Readonly<{ boards: Board[], ports: Port[] }>;
@@ -86,8 +88,17 @@ export namespace AttachedBoardsChangeEvent {
 export const BoardsServicePath = '/services/boards-service';
 export const BoardsService = Symbol('BoardsService');
 export interface BoardsService extends Installable<BoardsPackage>, Searchable<BoardsPackage> {
+    /**
+     * Deprecated. `getState` should be used to correctly map a board with a port.
+     * @deprecated
+     */
     getAttachedBoards(): Promise<Board[]>;
+    /**
+     * Deprecated. `getState` should be used to correctly map a board with a port.
+     * @deprecated
+     */
     getAvailablePorts(): Promise<Port[]>;
+    getState(): Promise<AvailablePorts>;
     getBoardDetails(options: { fqbn: string }): Promise<BoardDetails>;
     getBoardPackage(options: { id: string }): Promise<BoardsPackage | undefined>;
     getContainerBoardPackage(options: { fqbn: string }): Promise<BoardsPackage | undefined>;

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

@@ -13,7 +13,7 @@ import { CoreServiceImpl } from './core-service-impl';
 import { CoreService, CoreServicePath } from '../common/protocol/core-service';
 import { ConnectionContainerModule } from '@theia/core/lib/node/messaging/connection-container-module';
 import { CoreClientProvider } from './core-client-provider';
-import { ConnectionHandler, JsonRpcConnectionHandler, JsonRpcProxy } from '@theia/core';
+import { ConnectionHandler, JsonRpcConnectionHandler } from '@theia/core';
 import { DefaultWorkspaceServer } from './theia/workspace/default-workspace-server';
 import { WorkspaceServer as TheiaWorkspaceServer } from '@theia/workspace/lib/common';
 import { SketchesServiceImpl } from './sketches-service-impl';
@@ -39,6 +39,7 @@ import { OutputServicePath, OutputService } from '../common/protocol/output-serv
 import { NotificationServiceServerImpl } from './notification-service-server';
 import { NotificationServiceServer, NotificationServiceClient, NotificationServicePath } from '../common/protocol';
 import { BackendApplication } from './theia/core/backend-application';
+import { BoardDiscovery } from './board-discovery';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(BackendApplication).toSelf().inSingletonScope();
@@ -60,9 +61,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
 
     // Examples service. One per backend, each connected FE gets a proxy.
     bind(ConnectionContainerModule).toConstantValue(ConnectionContainerModule.create(({ bind, bindBackendService }) => {
-        // const ExamplesServiceProxy = Symbol('ExamplesServiceProxy');
-        // bind(ExamplesServiceProxy).toDynamicValue(ctx => new Proxy(ctx.container.get(ExamplesService), {}));
-        // bindBackendService(ExamplesServicePath, ExamplesServiceProxy);
         bind(ExamplesServiceImpl).toSelf().inSingletonScope();
         bind(ExamplesService).toService(ExamplesServiceImpl);
         bindBackendService(ExamplesServicePath, ExamplesService);
@@ -75,9 +73,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
 
     // Library service. Singleton per backend, each connected FE gets its proxy.
     bind(ConnectionContainerModule).toConstantValue(ConnectionContainerModule.create(({ bind, bindBackendService }) => {
-        // const LibraryServiceProxy = Symbol('LibraryServiceProxy');
-        // bind(LibraryServiceProxy).toDynamicValue(ctx => new Proxy(ctx.container.get(LibraryService), {}));
-        // bindBackendService(LibraryServicePath, LibraryServiceProxy);
         bind(LibraryServiceImpl).toSelf().inSingletonScope();
         bind(LibraryService).toService(LibraryServiceImpl);
         bindBackendService(LibraryServicePath, LibraryService);
@@ -88,27 +83,21 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(SketchesService).toService(SketchesServiceImpl);
     bind(ConnectionHandler).toDynamicValue(context => new JsonRpcConnectionHandler(SketchesServicePath, () => context.container.get(SketchesService))).inSingletonScope();
 
-    // Boards service. One singleton per backend that does the board and port polling. Each connected FE gets its proxy.
+    // Boards service. One instance per connected frontend.
     bind(ConnectionContainerModule).toConstantValue(ConnectionContainerModule.create(({ bind, bindBackendService }) => {
-        // const BoardsServiceProxy = Symbol('BoardsServiceProxy');
-        // bind(BoardsServiceProxy).toDynamicValue(ctx => new Proxy(ctx.container.get(BoardsService), {}));
-        // bindBackendService(BoardsServicePath, BoardsServiceProxy);
         bind(BoardsServiceImpl).toSelf().inSingletonScope();
         bind(BoardsService).toService(BoardsServiceImpl);
-        bindBackendService<BoardsServiceImpl, JsonRpcProxy<object>>(BoardsServicePath, BoardsService, (service, client) => {
-            client.onDidCloseConnection(() => service.dispose());
-            return service;
-        });
+        bindBackendService(BoardsServicePath, BoardsService);
     }));
 
     // Shared Arduino core client provider service for the backend.
     bind(CoreClientProvider).toSelf().inSingletonScope();
 
+    // Shared port/board discovery for the server
+    bind(BoardDiscovery).toSelf().inSingletonScope();
+
     // Core service -> `verify` and `upload`. Singleton per BE, each FE connection gets its proxy.
     bind(ConnectionContainerModule).toConstantValue(ConnectionContainerModule.create(({ bind, bindBackendService }) => {
-        // const CoreServiceProxy = Symbol('CoreServiceProxy');
-        // bind(CoreServiceProxy).toDynamicValue(ctx => new Proxy(ctx.container.get(CoreService), {}));
-        // bindBackendService(CoreServicePath, CoreServiceProxy);
         bind(CoreServiceImpl).toSelf().inSingletonScope();
         bind(CoreService).toService(CoreServiceImpl);
         bindBackendService(CoreServicePath, CoreService);
@@ -127,14 +116,12 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
 
     // #endregion Theia customizations
 
-    // Shared monitor client provider service for the backend.
-    bind(MonitorClientProvider).toSelf().inSingletonScope();
-    bind(MonitorServiceImpl).toSelf().inSingletonScope();
-    bind(MonitorService).toService(MonitorServiceImpl);
+    // Monitor client provider per connected frontend.
     bind(ConnectionContainerModule).toConstantValue(ConnectionContainerModule.create(({ bind, bindBackendService }) => {
-        const MonitorServiceProxy = Symbol('MonitorServiceProxy');
-        bind(MonitorServiceProxy).toDynamicValue(ctx => new Proxy(ctx.container.get(MonitorService), {}));
-        bindBackendService<MonitorService, MonitorServiceClient>(MonitorServicePath, MonitorServiceProxy, (service, client) => {
+        bind(MonitorClientProvider).toSelf().inSingletonScope();
+        bind(MonitorServiceImpl).toSelf().inSingletonScope();
+        bind(MonitorService).toService(MonitorServiceImpl);
+        bindBackendService<MonitorService, MonitorServiceClient>(MonitorServicePath, MonitorService, (service, client) => {
             service.setClient(client);
             client.onDidCloseConnection(() => service.dispose());
             return service;