Debounced tab-bar toolbar updates.

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

Diff for: arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -50,13 +50,17 @@ import {
   ApplicationShell as TheiaApplicationShell,
   ShellLayoutRestorer as TheiaShellLayoutRestorer,
   CommonFrontendContribution as TheiaCommonFrontendContribution,
+  DockPanelRenderer as TheiaDockPanelRenderer,
   TabBarRendererFactory,
   ContextMenuRenderer,
   createTreeContainer,
   TreeWidget,
 } from '@theia/core/lib/browser';
 import { MenuContribution } from '@theia/core/lib/common/menu';
-import { ApplicationShell } from './theia/core/application-shell';
+import {
+  ApplicationShell,
+  DockPanelRenderer,
+} from './theia/core/application-shell';
 import { FrontendApplication } from './theia/core/frontend-application';
 import {
   BoardsConfigDialog,
@@ -811,6 +815,10 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(StatusBarImpl).toSelf().inSingletonScope();
   rebind(TheiaStatusBarImpl).toService(StatusBarImpl);
 
+  // Debounced update for the tab-bar toolbar
+  bind(DockPanelRenderer).toSelf();
+  rebind(TheiaDockPanelRenderer).toService(DockPanelRenderer);
+
   // Preferences
   bindArduinoPreferences(bind);
 

Diff for: 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);
 };

Diff for: 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,19 @@ 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(() => {
+    console.log('super updating toolbar');
+    super.updateToolbar();
+  }, 500);
+  protected override updateToolbar(): void {
+    // Unlike Theia, IDE2 debounces the toolbar updates with 500ms
+    this.doUpdateToolbar();
+  }
+}