Improve tabbar context menu

CHANGELOG.md

@@ -4,11 +4,14 @@
 
 [1.21.0 Milestone](https://github.com/eclipse-theia/theia/milestone/29)
 
+- [core, editor, editor-preview] additional commands added to tabbar context menu for editor widgets. [#10394](https://github.com/eclipse-theia/theia/pull/10394)
+
 <a name="breaking_changes_1.21.0">[Breaking Changes:](#breaking_changes_1.21.0)</a>
 
 - [webpack] Source maps for the frontend renamed from `webpack://[namespace]/[resource-filename]...`
   to `webpack:///[resource-path]?[loaders]` where `resource-path` is the path to the file relative
   to your application package's root.
+- [core] `SelectionService` added to constructor arguments of `TabBarRenderer`. [#10394](https://github.com/eclipse-theia/theia/pull/10394)
 
 ## v1.20.0 - 11/25/2021
 

packages/core/src/browser/frontend-application-module.ts

@@ -165,11 +165,12 @@ export const frontendApplicationModule = new ContainerModule((bind, unbind, isBo
 
     bind(DockPanelRendererFactory).toFactory(context => () => context.container.get(DockPanelRenderer));
     bind(DockPanelRenderer).toSelf();
-    bind(TabBarRendererFactory).toFactory(context => () => {
-        const contextMenuRenderer = context.container.get<ContextMenuRenderer>(ContextMenuRenderer);
-        const decoratorService = context.container.get<TabBarDecoratorService>(TabBarDecoratorService);
-        const iconThemeService = context.container.get<IconThemeService>(IconThemeService);
-        return new TabBarRenderer(contextMenuRenderer, decoratorService, iconThemeService);
+    bind(TabBarRendererFactory).toFactory(({ container }) => () => {
+        const contextMenuRenderer = container.get(ContextMenuRenderer);
+        const tabBarDecoratorService = container.get(TabBarDecoratorService);
+        const iconThemeService = container.get(IconThemeService);
+        const selectionService = container.get(SelectionService);
+        return new TabBarRenderer(contextMenuRenderer, tabBarDecoratorService, iconThemeService, selectionService);
     });
 
     bindContributionProvider(bind, TabBarDecorator);

packages/core/src/browser/shell/application-shell.ts

@@ -29,10 +29,10 @@ import { Saveable, SaveableWidget, SaveOptions } from '../saveable';
 import { StatusBarImpl, StatusBarEntry, StatusBarAlignment } from '../status-bar/status-bar';
 import { TheiaDockPanel, BOTTOM_AREA_ID, MAIN_AREA_ID } from './theia-dock-panel';
 import { SidePanelHandler, SidePanel, SidePanelHandlerFactory } from './side-panel-handler';
-import { TabBarRendererFactory, TabBarRenderer, SHELL_TABBAR_CONTEXT_MENU, ScrollableTabBar, ToolbarAwareTabBar } from './tab-bars';
+import { TabBarRendererFactory, SHELL_TABBAR_CONTEXT_MENU, ScrollableTabBar, ToolbarAwareTabBar } from './tab-bars';
 import { SplitPositionHandler, SplitPositionOptions } from './split-panels';
 import { FrontendApplicationStateService } from '../frontend-application-state';
-import { TabBarToolbarRegistry, TabBarToolbarFactory, TabBarToolbar } from './tab-bar-toolbar';
+import { TabBarToolbarRegistry, TabBarToolbarFactory } from './tab-bar-toolbar';
 import { ContextKeyService } from '../context-key-service';
 import { Emitter } from '../../common/event';
 import { waitForRevealed, waitForClosed } from '../widgets';
@@ -82,9 +82,9 @@ export class DockPanelRenderer implements DockLayout.IRenderer {
     readonly tabBarClasses: string[] = [];
 
     constructor(
-        @inject(TabBarRendererFactory) protected readonly tabBarRendererFactory: () => TabBarRenderer,
+        @inject(TabBarRendererFactory) protected readonly tabBarRendererFactory: TabBarRendererFactory,
         @inject(TabBarToolbarRegistry) protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
-        @inject(TabBarToolbarFactory) protected readonly tabBarToolbarFactory: () => TabBarToolbar,
+        @inject(TabBarToolbarFactory) protected readonly tabBarToolbarFactory: TabBarToolbarFactory,
         @inject(BreadcrumbsRendererFactory) protected readonly breadcrumbsRendererFactory: BreadcrumbsRendererFactory,
     ) { }
 
@@ -847,20 +847,15 @@ export class ApplicationShell extends Widget {
      */
     findTitle(tabBar: TabBar<Widget>, event?: Event): Title<Widget> | undefined {
         if (event?.target instanceof HTMLElement) {
-            let tabNode: HTMLElement | null = event.target;
-            while (tabNode && !tabNode.classList.contains('p-TabBar-tab')) {
-                tabNode = tabNode.parentElement;
-            }
-            if (tabNode && tabNode.title) {
-                let title = tabBar.titles.find(t => t.caption === tabNode!.title);
-                if (title) {
-                    return title;
-                }
-                title = tabBar.titles.find(t => t.label === tabNode!.title);
-                if (title) {
-                    return title;
-                }
+            const tabNode = event.target;
+
+            const titleIndex = Array.from(tabBar.contentNode.getElementsByClassName('p-TabBar-tab'))
+                .findIndex(node => node.contains(tabNode));
+
+            if (titleIndex !== -1) {
+                return tabBar.titles[titleIndex];
             }
+
         }
         return tabBar.currentTitle || undefined;
     }
@@ -1832,18 +1827,18 @@ export class ApplicationShell extends Widget {
         return undefined;
     }
 
-    canToggleMaximized(): boolean {
-        const area = this.currentWidget && this.getAreaFor(this.currentWidget);
+    canToggleMaximized(widget: Widget | undefined = this.currentWidget): boolean {
+        const area = widget && this.getAreaFor(widget);
         return area === 'main' || area === 'bottom';
     }
 
-    toggleMaximized(): void {
-        const area = this.currentWidget && this.getAreaPanelFor(this.currentWidget);
+    toggleMaximized(widget: Widget | undefined = this.currentWidget): void {
+        const area = widget && this.getAreaPanelFor(widget);
         if (area instanceof TheiaDockPanel && (area === this.mainPanel || area === this.bottomPanel)) {
             area.toggleMaximized();
+            this.revealWidget(widget!.id);
         }
     }
-
 }
 
 /**

packages/core/src/browser/shell/current-widget-command-adapter.ts

@@ -0,0 +1,57 @@
+/********************************************************************************
+ * Copyright (C) 2021 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { CommandHandler } from '../../common';
+import { TabBar, Title, Widget } from '../widgets';
+import { ApplicationShell } from './application-shell';
+
+type CurrentWidgetCommandAdapterBooleanCheck = (event: Event) => boolean;
+type CurrentWidgetCommandHandlerBooleanCheck = (title: Title<Widget> | undefined, tabbar: TabBar<Widget> | undefined, event: Event) => boolean;
+
+export interface TabBarContextMenuCommandHandler extends CommandHandler {
+    execute(title: Title<Widget> | undefined, tabbar: TabBar<Widget> | undefined, event: Event): unknown;
+    isEnabled?: CurrentWidgetCommandHandlerBooleanCheck;
+    isVisible?: CurrentWidgetCommandHandlerBooleanCheck;
+    isToggled?: CurrentWidgetCommandHandlerBooleanCheck;
+}
+
+/**
+ * Creates a command handler that acts on either the widget targeted by a DOM event or the current widget.
+ */
+export class CurrentWidgetCommandAdapter implements CommandHandler {
+    execute: (event: Event) => unknown;
+    isEnabled?: CurrentWidgetCommandAdapterBooleanCheck;
+    isVisible?: CurrentWidgetCommandAdapterBooleanCheck;
+    isToggled?: CurrentWidgetCommandAdapterBooleanCheck;
+    constructor(shell: ApplicationShell, handler: TabBarContextMenuCommandHandler) {
+        this.execute = (event: Event) => handler.execute(...this.transformArguments(shell, event));
+        if (handler.isEnabled) {
+            this.isEnabled = (event: Event) => !!handler.isEnabled?.(...this.transformArguments(shell, event));
+        }
+        if (handler.isVisible) {
+            this.isVisible = (event: Event) => !!handler.isVisible?.(...this.transformArguments(shell, event));
+        }
+        if (handler.isToggled) {
+            this.isToggled = (event: Event) => !!handler.isToggled?.(...this.transformArguments(shell, event));
+        }
+    }
+
+    protected transformArguments(shell: ApplicationShell, event: Event): [Title<Widget> | undefined, TabBar<Widget> | undefined, Event] {
+        const tabBar = shell.findTabBar(event);
+        const title = tabBar && shell.findTitle(tabBar, event);
+        return [title, tabBar, event];
+    }
+}

packages/core/src/browser/shell/tab-bars.ts

@@ -17,7 +17,7 @@
 import PerfectScrollbar from 'perfect-scrollbar';
 import { TabBar, Title, Widget } from '@phosphor/widgets';
 import { VirtualElement, h, VirtualDOM, ElementInlineStyle } from '@phosphor/virtualdom';
-import { Disposable, DisposableCollection, MenuPath, notEmpty } from '../../common';
+import { Disposable, DisposableCollection, MenuPath, notEmpty, SelectionService } from '../../common';
 import { ContextMenuRenderer } from '../context-menu-renderer';
 import { Signal, Slot } from '@phosphor/signaling';
 import { Message, MessageLoop } from '@phosphor/messaging';
@@ -37,8 +37,14 @@ const HIDDEN_CONTENT_CLASS = 'theia-TabBar-hidden-content';
 
 /** Menu path for tab bars used throughout the application shell. */
 export const SHELL_TABBAR_CONTEXT_MENU: MenuPath = ['shell-tabbar-context-menu'];
+export const SHELL_TABBAR_CONTEXT_CLOSE: MenuPath = [...SHELL_TABBAR_CONTEXT_MENU, '0_close'];
+export const SHELL_TABBAR_CONTEXT_COPY: MenuPath = [...SHELL_TABBAR_CONTEXT_MENU, '1_copy'];
+// Kept here in anticipation of tab pinning behavior implemented in tab-bars.ts
+export const SHELL_TABBAR_CONTEXT_PIN: MenuPath = [...SHELL_TABBAR_CONTEXT_MENU, '4_pin'];
+export const SHELL_TABBAR_CONTEXT_SPLIT: MenuPath = [...SHELL_TABBAR_CONTEXT_MENU, '5_split'];
 
 export const TabBarRendererFactory = Symbol('TabBarRendererFactory');
+export type TabBarRendererFactory = () => TabBarRenderer;
 
 /**
  * Size information of DOM elements used for rendering tabs in side bars.
@@ -66,7 +72,6 @@ export interface SideBarRenderData extends TabBar.IRenderData<Widget> {
  * automatically.
  */
 export class TabBarRenderer extends TabBar.Renderer {
-
     /**
      * The menu path used to render the context menu.
      */
@@ -80,7 +85,8 @@ export class TabBarRenderer extends TabBar.Renderer {
     constructor(
         protected readonly contextMenuRenderer?: ContextMenuRenderer,
         protected readonly decoratorService?: TabBarDecoratorService,
-        protected readonly iconThemeService?: IconThemeService
+        protected readonly iconThemeService?: IconThemeService,
+        protected readonly selectionService?: SelectionService,
     ) {
         super();
         if (this.decoratorService) {
@@ -437,7 +443,27 @@ export class TabBarRenderer extends TabBar.Renderer {
         if (this.contextMenuRenderer && this.contextMenuPath && event.currentTarget instanceof HTMLElement) {
             event.stopPropagation();
             event.preventDefault();
-            this.contextMenuRenderer.render(this.contextMenuPath, event);
+            let widget: Widget | undefined = undefined;
+            if (this.tabBar) {
+                const titleIndex = Array.from(this.tabBar.contentNode.getElementsByClassName('p-TabBar-tab'))
+                    .findIndex(node => node.contains(event.currentTarget as HTMLElement));
+                if (titleIndex !== -1) {
+                    widget = this.tabBar.titles[titleIndex].owner;
+                }
+            }
+
+            const oldSelection = this.selectionService?.selection;
+            if (widget && this.selectionService) {
+                this.selectionService.selection = NavigatableWidget.is(widget) ? { uri: widget.getResourceUri() } : widget;
+            }
+
+            this.contextMenuRenderer.render({
+                menuPath: this.contextMenuPath!,
+                anchor: event,
+                args: [event],
+                // We'd like to wait until the command triggered by the context menu has been run, but this should let it get through the preamble, at least.
+                onHide: () => setTimeout(() => { if (this.selectionService) { this.selectionService.selection = oldSelection; } })
+            });
         }
     };
 
@@ -452,7 +478,6 @@ export class TabBarRenderer extends TabBar.Renderer {
             }
         }
     };
-
 }
 
 /**

packages/editor-preview/src/browser/editor-preview-contribution.ts

@@ -14,11 +14,12 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { ApplicationShell, CommonCommands, KeybindingContribution, KeybindingRegistry, SHELL_TABBAR_CONTEXT_MENU, Widget } from '@theia/core/lib/browser';
+import { ApplicationShell, CommonCommands, KeybindingContribution, KeybindingRegistry, SHELL_TABBAR_CONTEXT_PIN, Widget } from '@theia/core/lib/browser';
 import { nls } from '@theia/core/lib/common/nls';
 import { Command, CommandContribution, CommandRegistry, MenuContribution, MenuModelRegistry } from '@theia/core/lib/common';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { EditorPreviewWidget } from './editor-preview-widget';
+import { CurrentWidgetCommandAdapter } from '@theia/core/lib/browser/shell/current-widget-command-adapter';
 
 export namespace EditorPreviewCommands {
     export const PIN_PREVIEW_COMMAND = Command.toDefaultLocalizedCommand({
@@ -33,23 +34,16 @@ export class EditorPreviewContribution implements CommandContribution, MenuContr
     @inject(ApplicationShell) protected readonly shell: ApplicationShell;
 
     registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(EditorPreviewCommands.PIN_PREVIEW_COMMAND, {
-            execute: async (event?: Event) => {
-                const widget = this.getTargetWidget(event);
-                if (widget instanceof EditorPreviewWidget) {
-                    widget.convertToNonPreview();
-                    await this.shell.activateWidget(widget.id);
+        registry.registerCommand(EditorPreviewCommands.PIN_PREVIEW_COMMAND, new CurrentWidgetCommandAdapter(this.shell, {
+            execute: async title => {
+                if (title?.owner instanceof EditorPreviewWidget) {
+                    title.owner.convertToNonPreview();
+                    await this.shell.activateWidget(title.owner.id);
                 }
             },
-            isEnabled: (event?: Event) => {
-                const widget = this.getTargetWidget(event);
-                return widget instanceof EditorPreviewWidget && widget.isPreview;
-            },
-            isVisible: (event?: Event) => {
-                const widget = this.getTargetWidget(event);
-                return widget instanceof EditorPreviewWidget;
-            }
-        });
+            isEnabled: title => title?.owner instanceof EditorPreviewWidget && title.owner.isPreview,
+            isVisible: title => title?.owner instanceof EditorPreviewWidget,
+        }));
     }
 
     registerKeybindings(registry: KeybindingRegistry): void {
@@ -60,7 +54,7 @@ export class EditorPreviewContribution implements CommandContribution, MenuContr
     }
 
     registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(SHELL_TABBAR_CONTEXT_MENU, {
+        registry.registerMenuAction(SHELL_TABBAR_CONTEXT_PIN, {
             commandId: EditorPreviewCommands.PIN_PREVIEW_COMMAND.id,
             label: nls.localizeByDefault('Keep Open'),
             order: '6',