@theia/core 1.28.0-next.9 → 1.28.0

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar-registry.ts

@@ -0,0 +1,170 @@
+// *****************************************************************************
+// Copyright (C) 2022 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 debounce = require('lodash.debounce');
+import { inject, injectable, named } from 'inversify';
+// eslint-disable-next-line max-len
+import { CommandMenuNode, CommandRegistry, CompoundMenuNode, ContributionProvider, Disposable, DisposableCollection, Emitter, Event, MenuModelRegistry, MenuPath } from '../../../common';
+import { ContextKeyService } from '../../context-key-service';
+import { FrontendApplicationContribution } from '../../frontend-application';
+import { Widget } from '../../widgets';
+import { MenuDelegate, ReactTabBarToolbarItem, TabBarToolbarItem } from './tab-bar-toolbar-types';
+import { ToolbarMenuNodeWrapper } from './tab-bar-toolbar-menu-adapters';
+
+/**
+ * Clients should implement this interface if they want to contribute to the tab-bar toolbar.
+ */
+export const TabBarToolbarContribution = Symbol('TabBarToolbarContribution');
+/**
+ * Representation of a tabbar toolbar contribution.
+ */
+export interface TabBarToolbarContribution {
+    /**
+     * Registers toolbar items.
+     * @param registry the tabbar toolbar registry.
+     */
+    registerToolbarItems(registry: TabBarToolbarRegistry): void;
+}
+
+function yes(): true { return true; }
+const menuDelegateSeparator = '=@=';
+
+/**
+ * Main, shared registry for tab-bar toolbar items.
+ */
+@injectable()
+export class TabBarToolbarRegistry implements FrontendApplicationContribution {
+
+    protected items = new Map<string, TabBarToolbarItem | ReactTabBarToolbarItem>();
+    protected menuDelegates = new Map<string, MenuDelegate>();
+
+    @inject(CommandRegistry) protected readonly commandRegistry: CommandRegistry;
+    @inject(ContextKeyService) protected readonly contextKeyService: ContextKeyService;
+    @inject(MenuModelRegistry) protected readonly menuRegistry: MenuModelRegistry;
+
+    @inject(ContributionProvider) @named(TabBarToolbarContribution)
+    protected readonly contributionProvider: ContributionProvider<TabBarToolbarContribution>;
+
+    protected readonly onDidChangeEmitter = new Emitter<void>();
+    readonly onDidChange: Event<void> = this.onDidChangeEmitter.event;
+    // debounce in order to avoid to fire more than once in the same tick
+    protected fireOnDidChange = debounce(() => this.onDidChangeEmitter.fire(undefined), 0);
+
+    onStart(): void {
+        const contributions = this.contributionProvider.getContributions();
+        for (const contribution of contributions) {
+            contribution.registerToolbarItems(this);
+        }
+    }
+
+    /**
+     * Registers the given item. Throws an error, if the corresponding command cannot be found or an item has been already registered for the desired command.
+     *
+     * @param item the item to register.
+     */
+    registerItem(item: TabBarToolbarItem | ReactTabBarToolbarItem): Disposable {
+        const { id } = item;
+        if (this.items.has(id)) {
+            throw new Error(`A toolbar item is already registered with the '${id}' ID.`);
+        }
+        this.items.set(id, item);
+        this.fireOnDidChange();
+        const toDispose = new DisposableCollection(
+            Disposable.create(() => this.fireOnDidChange()),
+            Disposable.create(() => this.items.delete(id))
+        );
+        if (item.onDidChange) {
+            toDispose.push(item.onDidChange(() => this.fireOnDidChange()));
+        }
+        return toDispose;
+    }
+
+    /**
+     * Returns an array of tab-bar toolbar items which are visible when the `widget` argument is the current one.
+     *
+     * By default returns with all items where the command is enabled and `item.isVisible` is `true`.
+     */
+    visibleItems(widget: Widget): Array<TabBarToolbarItem | ReactTabBarToolbarItem> {
+        if (widget.isDisposed) {
+            return [];
+        }
+        const result: Array<TabBarToolbarItem | ReactTabBarToolbarItem> = [];
+        for (const item of this.items.values()) {
+            const visible = TabBarToolbarItem.is(item)
+                ? this.commandRegistry.isVisible(item.command, widget)
+                : (!item.isVisible || item.isVisible(widget));
+            if (visible && (!item.when || this.contextKeyService.match(item.when, widget.node))) {
+                result.push(item);
+            }
+        }
+        for (const delegate of this.menuDelegates.values()) {
+            if (delegate.isVisible(widget)) {
+                const menu = this.menuRegistry.getMenu(delegate.menuPath);
+                const children = CompoundMenuNode.getFlatChildren(menu.children);
+                for (const child of children) {
+                    if (!child.when || this.contextKeyService.match(child.when, widget.node)) {
+                        if (child.children) {
+                            for (const grandchild of child.children) {
+                                if (!grandchild.when || this.contextKeyService.match(grandchild.when, widget.node)) {
+                                    if (CommandMenuNode.is(grandchild)) {
+                                        result.push(new ToolbarMenuNodeWrapper(grandchild, child.id, delegate.menuPath));
+                                    } else if (CompoundMenuNode.is(grandchild)) {
+                                        let menuPath;
+                                        if (menuPath = this.menuRegistry.getPath(grandchild)) {
+                                            result.push(new ToolbarMenuNodeWrapper(grandchild, child.id, menuPath));
+                                        }
+                                    }
+                                }
+                            }
+                        } else if (child.command) {
+                            result.push(new ToolbarMenuNodeWrapper(child, '', delegate.menuPath));
+                        }
+                    }
+                }
+            }
+        }
+        return result;
+    }
+
+    unregisterItem(itemOrId: TabBarToolbarItem | ReactTabBarToolbarItem | string): void {
+        const id = typeof itemOrId === 'string' ? itemOrId : itemOrId.id;
+        if (this.items.delete(id)) {
+            this.fireOnDidChange();
+        }
+    }
+
+    registerMenuDelegate(menuPath: MenuPath, when?: string | ((widget: Widget) => boolean)): Disposable {
+        const id = menuPath.join(menuDelegateSeparator);
+        if (!this.menuDelegates.has(id)) {
+            const isVisible: MenuDelegate['isVisible'] = !when
+                ? yes
+                : typeof when === 'function'
+                    ? when
+                    : widget => this.contextKeyService.match(when, widget?.node);
+            this.menuDelegates.set(id, { menuPath, isVisible });
+            this.fireOnDidChange();
+            return { dispose: () => this.unregisterMenuDelegate(menuPath) };
+        }
+        console.warn('Unable to register menu delegate. Delegate has already been registered', menuPath);
+        return Disposable.NULL;
+    }
+
+    unregisterMenuDelegate(menuPath: MenuPath): void {
+        if (this.menuDelegates.delete(menuPath.join(menuDelegateSeparator))) {
+            this.fireOnDidChange();
+        }
+    }
+}

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar-types.ts

@@ -0,0 +1,186 @@
+// *****************************************************************************
+// Copyright (C) 2022 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 * as React from 'react';
+import { ArrayUtils, Event, MenuPath } from '../../../common';
+import { Widget } from '../../widgets';
+
+/** Items whose group is exactly 'navigation' will be rendered inline. */
+export const NAVIGATION = 'navigation';
+export const TAB_BAR_TOOLBAR_CONTEXT_MENU = ['TAB_BAR_TOOLBAR_CONTEXT_MENU'];
+
+export interface TabBarDelegator extends Widget {
+    getTabBarDelegate(): Widget | undefined;
+}
+
+export namespace TabBarDelegator {
+    export const is = (candidate?: Widget): candidate is TabBarDelegator => {
+        if (candidate) {
+            const asDelegator = candidate as TabBarDelegator;
+            return typeof asDelegator.getTabBarDelegate === 'function';
+        }
+        return false;
+    };
+}
+
+interface RegisteredToolbarItem {
+    /**
+     * The unique ID of the toolbar item.
+     */
+    id: string;
+}
+
+interface RenderedToolbarItem {
+    /**
+     * Optional icon for the item.
+     */
+    icon?: string | (() => string);
+
+    /**
+     * Optional text of the item.
+     *
+     * Strings in the format `$(iconIdentifier~animationType) will be treated as icon references.
+     * If the iconIdentifier begins with fa-, Font Awesome icons will be used; otherwise it will be treated as Codicon name.
+     *
+     * You can find Codicon classnames here: https://microsoft.github.io/vscode-codicons/dist/codicon.html
+     * You can find Font Awesome classnames here: http://fontawesome.io/icons/
+     * The type of animation can be either `spin` or `pulse`.
+     */
+    text?: string;
+
+    /**
+     * Optional tooltip for the item.
+     */
+    tooltip?: string;
+}
+
+interface SelfRenderingToolbarItem {
+    render(widget?: Widget): React.ReactNode;
+}
+
+interface ExecutableToolbarItem {
+    /**
+     * The command to execute when the item is selected.
+     */
+    command: string;
+}
+
+export interface MenuToolbarItem {
+    /**
+     * A menu path with which this item is associated.
+     * If accompanied by a command, this data will be passed to the {@link MenuCommandExecutor}.
+     * If no command is present, this menu will be opened.
+     */
+    menuPath: MenuPath;
+}
+
+interface ConditionalToolbarItem {
+    /**
+     * https://code.visualstudio.com/docs/getstarted/keybindings#_when-clause-contexts
+     */
+    when?: string;
+    /**
+     * Checked before the item is shown.
+     */
+    isVisible?(widget?: Widget): boolean;
+    /**
+     * When defined, the container tool-bar will be updated if this event is fired.
+     *
+     * Note: currently, each item of the container toolbar will be re-rendered if any of the items have changed.
+     */
+    onDidChange?: Event<void>;
+}
+
+interface InlineToolbarItemMetadata {
+    /**
+     * Priority among the items. Can be negative. The smaller the number the left-most the item will be placed in the toolbar. It is `0` by default.
+     */
+    priority?: number;
+    group: 'navigation' | undefined;
+}
+
+interface MenuToolbarItemMetadata {
+    /**
+     * Optional group for the item. Default `navigation`.
+     * `navigation` group will be inlined, while all the others will appear in the `...` dropdown.
+     * A group in format `submenu_group_1/submenu 1/.../submenu_group_n/ submenu n/item_group` means that the item will be located in a submenu(s) of the `...` dropdown.
+     * The submenu's title is named by the submenu section name, e.g. `group/<submenu name>/subgroup`.
+     */
+    group: string;
+    /**
+     * Optional ordering string for placing the item within its group
+     */
+    order?: string;
+}
+
+/**
+ * Representation of an item in the tab
+ */
+export interface TabBarToolbarItem extends RegisteredToolbarItem,
+    ExecutableToolbarItem,
+    RenderedToolbarItem,
+    Omit<ConditionalToolbarItem, 'isVisible'>,
+    Pick<InlineToolbarItemMetadata, 'priority'>,
+    Partial<MenuToolbarItemMetadata> { }
+
+/**
+ * Tab-bar toolbar item backed by a `React.ReactNode`.
+ * Unlike the `TabBarToolbarItem`, this item is not connected to the command service.
+ */
+export interface ReactTabBarToolbarItem extends RegisteredToolbarItem,
+    SelfRenderingToolbarItem,
+    ConditionalToolbarItem,
+    Pick<InlineToolbarItemMetadata, 'priority'>,
+    Pick<Partial<MenuToolbarItemMetadata>, 'group'> { }
+
+export interface AnyToolbarItem extends RegisteredToolbarItem,
+    Partial<ExecutableToolbarItem>,
+    Partial<RenderedToolbarItem>,
+    Partial<SelfRenderingToolbarItem>,
+    Partial<ConditionalToolbarItem>,
+    Partial<MenuToolbarItem>,
+    Pick<InlineToolbarItemMetadata, 'priority'>,
+    Partial<MenuToolbarItemMetadata> { }
+
+export interface MenuDelegate extends MenuToolbarItem, Required<Pick<ConditionalToolbarItem, 'isVisible'>> { }
+
+export namespace TabBarToolbarItem {
+
+    /**
+     * Compares the items by `priority` in ascending. Undefined priorities will be treated as `0`.
+     */
+    export const PRIORITY_COMPARATOR = (left: TabBarToolbarItem, right: TabBarToolbarItem) => {
+        const leftGroup = left.group ?? NAVIGATION;
+        const rightGroup = right.group ?? NAVIGATION;
+        if (leftGroup === NAVIGATION && rightGroup !== NAVIGATION) { return ArrayUtils.Sort.LeftBeforeRight; }
+        if (rightGroup === NAVIGATION && leftGroup !== NAVIGATION) { return ArrayUtils.Sort.RightBeforeLeft; }
+        if (leftGroup !== rightGroup) { return leftGroup.localeCompare(rightGroup); }
+        return (left.priority || 0) - (right.priority || 0);
+    };
+
+    export function is(arg: Object | undefined): arg is TabBarToolbarItem {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return !!arg && 'command' in arg && typeof (arg as any).command === 'string';
+    }
+
+}
+
+export namespace MenuToolbarItem {
+    export function getMenuPath(item: AnyToolbarItem): MenuPath | undefined {
+        const asDelegate = item as MenuToolbarItem;
+        return Array.isArray(asDelegate.menuPath) ? asDelegate.menuPath : undefined;
+    }
+}

package/src/browser/shell/{tab-bar-toolbar.spec.ts → tab-bar-toolbar/tab-bar-toolbar.spec.ts}

@@ -14,11 +14,11 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { enableJSDOM } from '../test/jsdom';
+import { enableJSDOM } from '../../test/jsdom';
 
 let disableJSDOM = enableJSDOM();
 import { expect } from 'chai';
-import { TabBarToolbarItem } from './tab-bar-toolbar';
+import { TabBarToolbarItem } from './tab-bar-toolbar-types';
 
 disableJSDOM();
 

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar.tsx

@@ -0,0 +1,261 @@
+// *****************************************************************************
+// Copyright (C) 2018 TypeFox 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 { inject, injectable } from 'inversify';
+import * as React from 'react';
+import { CommandRegistry, CompoundMenuNodeRole, Disposable, DisposableCollection, MenuCommandExecutor, MenuModelRegistry, MenuPath, nls } from '../../../common';
+import { Anchor, ContextMenuAccess, ContextMenuRenderer } from '../../context-menu-renderer';
+import { LabelIcon, LabelParser } from '../../label-parser';
+import { ACTION_ITEM, codicon, ReactWidget, Widget } from '../../widgets';
+import { TabBarToolbarRegistry } from './tab-bar-toolbar-registry';
+import { AnyToolbarItem, ReactTabBarToolbarItem, TabBarDelegator, TabBarToolbarItem, TAB_BAR_TOOLBAR_CONTEXT_MENU } from './tab-bar-toolbar-types';
+
+/**
+ * Factory for instantiating tab-bar toolbars.
+ */
+export const TabBarToolbarFactory = Symbol('TabBarToolbarFactory');
+export interface TabBarToolbarFactory {
+    (): TabBarToolbar;
+}
+
+/**
+ * Tab-bar toolbar widget representing the active [tab-bar toolbar items](TabBarToolbarItem).
+ */
+@injectable()
+export class TabBarToolbar extends ReactWidget {
+
+    protected current: Widget | undefined;
+    protected inline = new Map<string, TabBarToolbarItem | ReactTabBarToolbarItem>();
+    protected more = new Map<string, TabBarToolbarItem>();
+
+    @inject(CommandRegistry) protected readonly commands: CommandRegistry;
+    @inject(LabelParser) protected readonly labelParser: LabelParser;
+    @inject(MenuModelRegistry) protected readonly menus: MenuModelRegistry;
+    @inject(MenuCommandExecutor) protected readonly menuCommandExecutor: MenuCommandExecutor;
+    @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
+    @inject(TabBarToolbarRegistry) protected readonly toolbarRegistry: TabBarToolbarRegistry;
+
+    constructor() {
+        super();
+        this.addClass(TabBarToolbar.Styles.TAB_BAR_TOOLBAR);
+        this.hide();
+    }
+
+    updateItems(items: Array<TabBarToolbarItem | ReactTabBarToolbarItem>, current: Widget | undefined): void {
+        this.inline.clear();
+        this.more.clear();
+        for (const item of items.sort(TabBarToolbarItem.PRIORITY_COMPARATOR).reverse()) {
+            if ('render' in item || item.group === undefined || item.group === 'navigation') {
+                this.inline.set(item.id, item);
+            } else {
+                this.more.set(item.id, item);
+            }
+        }
+        this.setCurrent(current);
+        if (!items.length) {
+            this.hide();
+        }
+        this.onRender.push(Disposable.create(() => {
+            if (items.length) {
+                this.show();
+            }
+        }));
+        this.update();
+    }
+
+    updateTarget(current?: Widget): void {
+        const operativeWidget = TabBarDelegator.is(current) ? current.getTabBarDelegate() : current;
+        const items = operativeWidget ? this.toolbarRegistry.visibleItems(operativeWidget) : [];
+        this.updateItems(items, operativeWidget);
+    }
+
+    protected readonly toDisposeOnSetCurrent = new DisposableCollection();
+    protected setCurrent(current: Widget | undefined): void {
+        this.toDisposeOnSetCurrent.dispose();
+        this.toDispose.push(this.toDisposeOnSetCurrent);
+        this.current = current;
+        if (current) {
+            const resetCurrent = () => {
+                this.setCurrent(undefined);
+                this.update();
+            };
+            current.disposed.connect(resetCurrent);
+            this.toDisposeOnSetCurrent.push(Disposable.create(() =>
+                current.disposed.disconnect(resetCurrent)
+            ));
+        }
+    }
+
+    protected render(): React.ReactNode {
+        return <React.Fragment>
+            {this.renderMore()}
+            {[...this.inline.values()].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render(this.current))}
+        </React.Fragment>;
+    }
+
+    protected renderItem(item: AnyToolbarItem): React.ReactNode {
+        let innerText = '';
+        const classNames = [];
+        if (item.text) {
+            for (const labelPart of this.labelParser.parse(item.text)) {
+                if (typeof labelPart !== 'string' && LabelIcon.is(labelPart)) {
+                    const className = `fa fa-${labelPart.name}${labelPart.animation ? ' fa-' + labelPart.animation : ''}`;
+                    classNames.push(...className.split(' '));
+                } else {
+                    innerText = labelPart;
+                }
+            }
+        }
+        const command = item.command ? this.commands.getCommand(item.command) : undefined;
+        let iconClass = (typeof item.icon === 'function' && item.icon()) || item.icon as string || (command && command.iconClass);
+        if (iconClass) {
+            iconClass += ` ${ACTION_ITEM}`;
+            classNames.push(iconClass);
+        }
+        const tooltip = item.tooltip || (command && command.label);
+        const toolbarItemClassNames = this.getToolbarItemClassNames(command?.id ?? item.command);
+        if (item.menuPath && !item.command) { toolbarItemClassNames.push('enabled'); }
+        return <div key={item.id}
+            className={toolbarItemClassNames.join(' ')}
+            onMouseDown={this.onMouseDownEvent}
+            onMouseUp={this.onMouseUpEvent}
+            onMouseOut={this.onMouseUpEvent} >
+            <div id={item.id} className={classNames.join(' ')}
+                onClick={this.executeCommand}
+                title={tooltip}>{innerText}
+            </div>
+        </div>;
+    }
+
+    protected getToolbarItemClassNames(commandId: string | undefined): string[] {
+        const classNames = [TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM];
+        if (commandId) {
+            if (this.commandIsEnabled(commandId)) {
+                classNames.push('enabled');
+            }
+            if (this.commandIsToggled(commandId)) {
+                classNames.push('toggled');
+            }
+        }
+        return classNames;
+    }
+
+    protected renderMore(): React.ReactNode {
+        return !!this.more.size && <div key='__more__' className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled'}>
+            <div id='__more__' className={codicon('ellipsis', true)} onClick={this.showMoreContextMenu}
+                title={nls.localizeByDefault('More Actions...')} />
+        </div>;
+    }
+
+    protected showMoreContextMenu = (event: React.MouseEvent) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const anchor = this.toAnchor(event);
+        this.renderMoreContextMenu(anchor);
+    };
+
+    protected toAnchor(event: React.MouseEvent): Anchor {
+        const itemBox = event.currentTarget.closest('.' + TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM)?.getBoundingClientRect();
+        return itemBox ? { y: itemBox.bottom, x: itemBox.left } : event.nativeEvent;
+    }
+
+    renderMoreContextMenu(anchor: Anchor, subpath?: MenuPath): ContextMenuAccess {
+        const toDisposeOnHide = new DisposableCollection();
+        this.addClass('menu-open');
+        toDisposeOnHide.push(Disposable.create(() => this.removeClass('menu-open')));
+        if (subpath) {
+            toDisposeOnHide.push(this.menus.linkSubmenu(TAB_BAR_TOOLBAR_CONTEXT_MENU, subpath, { role: CompoundMenuNodeRole.Flat, when: '' }));
+        } else {
+            for (const item of this.more.values() as IterableIterator<AnyToolbarItem>) {
+                if (item.menuPath && !item.command) {
+                    toDisposeOnHide.push(this.menus.linkSubmenu(TAB_BAR_TOOLBAR_CONTEXT_MENU, item.menuPath, { role: CompoundMenuNodeRole.Flat, when: '' }, item.group));
+                } else if (item.command) {
+                    // Register a submenu for the item, if the group is in format `<submenu group>/<submenu name>/.../<item group>`
+                    if (item.group?.includes('/')) {
+                        const split = item.group.split('/');
+                        const paths: string[] = [];
+                        for (let i = 0; i < split.length - 1; i += 2) {
+                            paths.push(split[i], split[i + 1]);
+                            toDisposeOnHide.push(this.menus.registerSubmenu([...TAB_BAR_TOOLBAR_CONTEXT_MENU, ...paths], split[i + 1], { order: item.order }));
+                        }
+                    }
+                    toDisposeOnHide.push(this.menus.registerMenuAction([...TAB_BAR_TOOLBAR_CONTEXT_MENU, ...item.group!.split('/')], {
+                        label: item.tooltip,
+                        commandId: item.command,
+                        when: item.when,
+                        order: item.order,
+                    }));
+                }
+            }
+        }
+        return this.contextMenuRenderer.render({
+            menuPath: TAB_BAR_TOOLBAR_CONTEXT_MENU,
+            args: [this.current],
+            anchor,
+            context: this.current?.node,
+            onHide: () => toDisposeOnHide.dispose()
+        });
+    }
+
+    shouldHandleMouseEvent(event: MouseEvent): boolean {
+        return event.target instanceof Element && this.node.contains(event.target);
+    }
+
+    protected commandIsEnabled(command: string): boolean {
+        return this.commands.isEnabled(command, this.current);
+    }
+
+    protected commandIsToggled(command: string): boolean {
+        return this.commands.isToggled(command, this.current);
+    }
+
+    protected executeCommand = (e: React.MouseEvent<HTMLElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const item: AnyToolbarItem | undefined = this.inline.get(e.currentTarget.id);
+        if (item?.command && item.menuPath) {
+            this.menuCommandExecutor.executeCommand(item.menuPath, item.command, this.current);
+        } else if (item?.command) {
+            this.commands.executeCommand(item.command, this.current);
+        } else if (item?.menuPath) {
+            this.renderMoreContextMenu(this.toAnchor(e), item.menuPath);
+        }
+        this.update();
+    };
+
+    protected onMouseDownEvent = (e: React.MouseEvent<HTMLElement>) => {
+        if (e.button === 0) {
+            e.currentTarget.classList.add('active');
+        }
+    };
+
+    protected onMouseUpEvent = (e: React.MouseEvent<HTMLElement>) => {
+        e.currentTarget.classList.remove('active');
+    };
+
+}
+
+export namespace TabBarToolbar {
+
+    export namespace Styles {
+
+        export const TAB_BAR_TOOLBAR = 'p-TabBar-toolbar';
+        export const TAB_BAR_TOOLBAR_ITEM = 'item';
+
+    }
+
+}

package/src/browser/style/alert-messages.css

@@ -25,6 +25,12 @@
     padding-right: 3px;
 }
 
+.theia-alert-message-container .theia-message-header,
+.theia-alert-message-container .theia-message-content {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
 /* information message */
 .theia-info-alert {
     background-color: var(--theia-inputValidation-infoBackground);

package/src/browser/view-container.ts

@@ -282,16 +282,7 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
             }
         }
         this.updateToolbarItems(allParts);
-        const caption = title?.caption || title?.label;
-        if (caption) {
-            this.title.caption = caption;
-            if (visibleParts.length === 1) {
-                const partCaption = visibleParts[0].wrapped.title.caption || visibleParts[0].wrapped.title.label;
-                if (partCaption) {
-                    this.title.caption += ': ' + partCaption;
-                }
-            }
-        }
+        this.title.caption = title?.caption || title?.label;
         if (title.iconClass) {
             this.title.iconClass = title.iconClass;
         }

package/src/browser/widget-manager.spec.ts

@@ -63,4 +63,18 @@ describe('widget-manager', () => {
         expect(wA).equals(await widgetManager.getOrCreateWidget('test', 'widgetA'));
     });
 
+    it('produces the same widget key regardless of object key order', () => {
+        const options1 = {
+            factoryId: 'a',
+            key1: 1,
+            key2: 2,
+        };
+        const options2 = {
+            key2: 2,
+            key1: 1,
+            factoryId: 'a',
+        };
+        expect(widgetManager['toKey'](options1)).equals(widgetManager['toKey'](options2));
+    });
+
 });