#714: UX improvements of the Arduino LS in IDE2

- Debounced the connectivity status update.
 - Silent the output channel for the Arduino LS.
 - Delay the problem markers update with 500ms.
 - Do not update the status bar on every `keypress` event.
 - Debounced the tab-bar toolbar updates when typing in editor.
 - Fixed electron menu contribution binding.
 - Aligned the editor widget factory's API to Theia.
 - Set the zoom level when the app is ready (Closes #1244)
 - Fixed event listener leak (Closes #1062)

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

arduino-ide-extension/src/browser/theia/core/application-shell.ts

@@ -10,28 +10,35 @@ import {
 import {
   ApplicationShell as TheiaApplicationShell,
   DockPanel,
+  DockPanelRenderer as TheiaDockPanelRenderer,
   Panel,
+  TabBar,
   Widget,
+  SHELL_TABBAR_CONTEXT_MENU,
 } from '@theia/core/lib/browser';
 import { Sketch } from '../../../common/protocol';
 import { SaveAsSketch } from '../../contributions/save-as-sketch';
-import { CurrentSketch, SketchesServiceClientImpl } from '../../../common/protocol/sketches-service-client-impl';
+import {
+  CurrentSketch,
+  SketchesServiceClientImpl,
+} from '../../../common/protocol/sketches-service-client-impl';
 import { nls } from '@theia/core/lib/common';
 import URI from '@theia/core/lib/common/uri';
+import { ToolbarAwareTabBar } from './tab-bars';
 
 @injectable()
 export class ApplicationShell extends TheiaApplicationShell {
   @inject(CommandService)
-  protected readonly commandService: CommandService;
+  private readonly commandService: CommandService;
 
   @inject(MessageService)
-  protected readonly messageService: MessageService;
+  private readonly messageService: MessageService;
 
   @inject(SketchesServiceClientImpl)
-  protected readonly sketchesServiceClient: SketchesServiceClientImpl;
+  private readonly sketchesServiceClient: SketchesServiceClientImpl;
 
   @inject(ConnectionStatusService)
-  protected readonly connectionStatusService: ConnectionStatusService;
+  private readonly connectionStatusService: ConnectionStatusService;
 
   protected override track(widget: Widget): void {
     super.track(widget);
@@ -43,7 +50,7 @@ export class ApplicationShell extends TheiaApplicationShell {
       this.sketchesServiceClient.currentSketch().then((sketch) => {
         if (CurrentSketch.isValid(sketch)) {
           if (!this.isSketchFile(widget.editor.uri, sketch.uri)) {
-              return;
+            return;
           }
           if (Sketch.isInSketch(widget.editor.uri, sketch)) {
             widget.title.closable = false;
@@ -54,11 +61,11 @@ export class ApplicationShell extends TheiaApplicationShell {
   }
 
   private isSketchFile(uri: URI, sketchUriString: string): boolean {
-      const sketchUri = new URI(sketchUriString);
-      if (uri.parent.isEqual(sketchUri)) {
-          return true;
-      }
-      return false;
+    const sketchUri = new URI(sketchUriString);
+    if (uri.parent.isEqual(sketchUri)) {
+      return true;
+    }
+    return false;
   }
 
   override async addWidget(
@@ -120,15 +127,41 @@ export class ApplicationShell extends TheiaApplicationShell {
   }
 }
 
+export class DockPanelRenderer extends TheiaDockPanelRenderer {
+  override createTabBar(): TabBar<Widget> {
+    const renderer = this.tabBarRendererFactory();
+    // `ToolbarAwareTabBar` is from IDE2 and not from Theia. Check the imports.
+    const tabBar = new ToolbarAwareTabBar(
+      this.tabBarToolbarRegistry,
+      this.tabBarToolbarFactory,
+      this.breadcrumbsRendererFactory,
+      {
+        renderer,
+        // Scroll bar options
+        handlers: ['drag-thumb', 'keyboard', 'wheel', 'touch'],
+        useBothWheelAxes: true,
+        scrollXMarginOffset: 4,
+        suppressScrollY: true,
+      }
+    );
+    this.tabBarClasses.forEach((c) => tabBar.addClass(c));
+    renderer.tabBar = tabBar;
+    tabBar.disposed.connect(() => renderer.dispose());
+    renderer.contextMenuPath = SHELL_TABBAR_CONTEXT_MENU;
+    tabBar.currentChanged.connect(this.onCurrentTabChanged, this);
+    return tabBar;
+  }
+}
+
 const originalHandleEvent = DockPanel.prototype.handleEvent;
 
 DockPanel.prototype.handleEvent = function (event) {
   switch (event.type) {
-      case 'p-dragenter':
-      case 'p-dragleave':
-      case 'p-dragover':
-      case 'p-drop':
-        return;
+    case 'p-dragenter':
+    case 'p-dragleave':
+    case 'p-dragover':
+    case 'p-drop':
+      return;
   }
   originalHandleEvent.bind(this)(event);
 };

arduino-ide-extension/src/browser/theia/core/connection-status-service.ts

@@ -13,6 +13,7 @@ import {
 import { ArduinoDaemon } from '../../../common/protocol';
 import { NotificationCenter } from '../../notification-center';
 import { nls } from '@theia/core/lib/common';
+import debounce = require('lodash.debounce');
 
 @injectable()
 export class FrontendConnectionStatusService extends TheiaFrontendConnectionStatusService {
@@ -36,10 +37,11 @@ export class FrontendConnectionStatusService extends TheiaFrontendConnectionStat
     this.notificationCenter.onDaemonDidStop(
       () => (this.connectedPort = undefined)
     );
-    this.wsConnectionProvider.onIncomingMessageActivity(() => {
+    const refresh = debounce(() => {
       this.updateStatus(!!this.connectedPort);
       this.schedulePing();
-    });
+    }, this.options.offlineTimeout - 10);
+    this.wsConnectionProvider.onIncomingMessageActivity(() => refresh());
   }
 }
 

arduino-ide-extension/src/browser/theia/core/status-bar.ts

@@ -0,0 +1,13 @@
+import { injectable } from '@theia/core/shared/inversify';
+import { StatusBarImpl as TheiaStatusBarImpl } from '@theia/core/lib/browser';
+
+@injectable()
+export class StatusBarImpl extends TheiaStatusBarImpl {
+  override async removeElement(id: string): Promise<void> {
+    await this.ready;
+    if (this.entries.delete(id)) {
+      // Unlike Theia, IDE2 updates the status bar only if the element to remove was among the entries. Otherwise, it's a NOOP.
+      this.update();
+    }
+  }
+}

arduino-ide-extension/src/browser/theia/core/tab-bars.ts

@@ -1,8 +1,13 @@
-import { TabBar } from '@theia/core/shared/@phosphor/widgets';
+import type { TabBar } from '@theia/core/shared/@phosphor/widgets';
 import { Saveable } from '@theia/core/lib/browser/saveable';
-import { TabBarRenderer as TheiaTabBarRenderer } from '@theia/core/lib/browser/shell/tab-bars';
+import {
+  TabBarRenderer as TheiaTabBarRenderer,
+  ToolbarAwareTabBar as TheiaToolbarAwareTabBar,
+} from '@theia/core/lib/browser/shell/tab-bars';
+import debounce = require('lodash.debounce');
 
 export class TabBarRenderer extends TheiaTabBarRenderer {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   override createTabClass(data: TabBar.IRenderData<any>): string {
     let className = super.createTabClass(data);
     if (!data.title.closable && Saveable.isDirty(data.title.owner)) {
@@ -16,3 +21,16 @@ export class TabBarRenderer extends TheiaTabBarRenderer {
     // Context menus are empty, so they have been removed
   };
 }
+
+export class ToolbarAwareTabBar extends TheiaToolbarAwareTabBar {
+  protected override async updateBreadcrumbs(): Promise<void> {
+    // NOOP
+    // IDE2 does not use breadcrumbs.
+  }
+
+  private readonly doUpdateToolbar = debounce(() => super.updateToolbar(), 500);
+  protected override updateToolbar(): void {
+    // Unlike Theia, IDE2 debounces the toolbar updates with 500ms
+    this.doUpdateToolbar();
+  }
+}

arduino-ide-extension/src/browser/theia/editor/editor-widget-factory.ts

@@ -1,7 +1,7 @@
 import { inject, injectable } from '@theia/core/shared/inversify';
 import URI from '@theia/core/lib/common/uri';
 import { EditorWidget } from '@theia/editor/lib/browser';
-import { LabelProvider } from '@theia/core/lib/browser';
+import type { NavigatableWidgetOptions } from '@theia/core/lib/browser';
 import { EditorWidgetFactory as TheiaEditorWidgetFactory } from '@theia/editor/lib/browser/editor-widget-factory';
 import {
   CurrentSketch,
@@ -13,16 +13,16 @@ import { nls } from '@theia/core/lib/common';
 @injectable()
 export class EditorWidgetFactory extends TheiaEditorWidgetFactory {
   @inject(SketchesService)
-  protected readonly sketchesService: SketchesService;
+  private readonly sketchesService: SketchesService;
 
   @inject(SketchesServiceClientImpl)
-  protected readonly sketchesServiceClient: SketchesServiceClientImpl;
+  private readonly sketchesServiceClient: SketchesServiceClientImpl;
 
-  @inject(LabelProvider)
-  protected override readonly labelProvider: LabelProvider;
-
-  protected override async createEditor(uri: URI): Promise<EditorWidget> {
-    const widget = await super.createEditor(uri);
+  protected override async createEditor(
+    uri: URI,
+    options: NavigatableWidgetOptions
+  ): Promise<EditorWidget> {
+    const widget = await super.createEditor(uri, options);
     return this.maybeUpdateCaption(widget);
   }
 

arduino-ide-extension/src/browser/theia/markers/problem-manager.ts

@@ -1,10 +1,15 @@
-import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import {
+  inject,
+  injectable,
+  postConstruct,
+} from '@theia/core/shared/inversify';
 import { Diagnostic } from 'vscode-languageserver-types';
 import URI from '@theia/core/lib/common/uri';
 import { ILogger } from '@theia/core';
 import { Marker } from '@theia/markers/lib/common/marker';
 import { ProblemManager as TheiaProblemManager } from '@theia/markers/lib/browser/problem/problem-manager';
 import { ConfigService } from '../../../common/protocol/config-service';
+import debounce = require('lodash.debounce');
 
 @injectable()
 export class ProblemManager extends TheiaProblemManager {
@@ -37,4 +42,12 @@ export class ProblemManager extends TheiaProblemManager {
     }
     return super.setMarkers(uri, owner, data);
   }
+
+  private readonly debouncedFireOnDidChangeMakers = debounce(
+    (uri: URI) => this.onDidChangeMarkersEmitter.fire(uri),
+    500
+  );
+  protected override fireOnDidChangeMarkers(uri: URI): void {
+    this.debouncedFireOnDidChangeMakers(uri);
+  }
 }