@theia/core 1.40.1 → 1.42.0

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

@@ -22,7 +22,7 @@ import { Anchor, ContextMenuAccess, ContextMenuRenderer } from '../../context-me
 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';
+import { AnyToolbarItem, ReactTabBarToolbarItem, TabBarDelegator, TabBarToolbarItem, TAB_BAR_TOOLBAR_CONTEXT_MENU, MenuToolbarItem } from './tab-bar-toolbar-types';
 import { KeybindingRegistry } from '../..//keybinding';
 
 /**
@@ -33,6 +33,11 @@ export interface TabBarToolbarFactory {
     (): TabBarToolbar;
 }
 
+/**
+ * Class name indicating rendering of a toolbar item without an icon but instead with a text label.
+ */
+const NO_ICON_CLASS = 'no-icon';
+
 /**
  * Tab-bar toolbar widget representing the active [tab-bar toolbar items](TabBarToolbarItem).
  */
@@ -149,7 +154,9 @@ export class TabBarToolbar extends ReactWidget {
         this.keybindingContextKeys.clear();
         return <React.Fragment>
             {this.renderMore()}
-            {[...this.inline.values()].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render(this.current))}
+            {[...this.inline.values()].map(item => TabBarToolbarItem.is(item)
+                ? (MenuToolbarItem.is(item) && !item.command ? this.renderMenuItem(item) : this.renderItem(item))
+                : item.render(this.current))}
         </React.Fragment>;
     }
 
@@ -176,8 +183,12 @@ export class TabBarToolbar extends ReactWidget {
     protected renderItem(item: AnyToolbarItem): React.ReactNode {
         let innerText = '';
         const classNames = [];
-        if (item.text) {
-            for (const labelPart of this.labelParser.parse(item.text)) {
+        const command = item.command ? this.commands.getCommand(item.command) : undefined;
+        // Fall back to the item ID in extremis so there is _something_ to render in the
+        // case that there is neither an icon nor a title
+        const itemText = item.text || command?.label || command?.id || item.id;
+        if (itemText) {
+            for (const labelPart of this.labelParser.parse(itemText)) {
                 if (LabelIcon.is(labelPart)) {
                     const className = `fa fa-${labelPart.name}${labelPart.animation ? ' fa-' + labelPart.animation : ''}`;
                     classNames.push(...className.split(' '));
@@ -186,13 +197,23 @@ export class TabBarToolbar extends ReactWidget {
                 }
             }
         }
-        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);
+        const 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) || ''}${this.resolveKeybindingForCommand(command?.id)}`;
+        const tooltipText = item.tooltip || (command && command.label) || '';
+        const tooltip = `${this.labelParser.stripIcons(tooltipText)}${this.resolveKeybindingForCommand(command?.id)}`;
+
+        // Only present text if there is no icon
+        if (classNames.length) {
+            innerText = '';
+        } else if (innerText) {
+            // Make room for the label text
+            classNames.push(NO_ICON_CLASS);
+        }
+
+        // In any case, this is an action item, with or without icon.
+        classNames.push(ACTION_ITEM);
 
         const toolbarItemClassNames = this.getToolbarItemClassNames(item);
         return <div key={item.id}
@@ -224,6 +245,10 @@ export class TabBarToolbar extends ReactWidget {
             if (this.commandIsToggled(item.command)) {
                 classNames.push('toggled');
             }
+        } else {
+            if (this.isEnabled(item)) {
+                classNames.push('enabled');
+            }
         }
         return classNames;
     }
@@ -281,6 +306,60 @@ export class TabBarToolbar extends ReactWidget {
             args: [this.current],
             anchor,
             context: this.current?.node,
+            onHide: () => toDisposeOnHide.dispose(),
+            skipSingleRootNode: true,
+        });
+    }
+
+    /**
+     * Renders a toolbar item that is a menu, presenting it as a button with a little
+     * chevron decoration that pops up a floating menu when clicked.
+     *
+     * @param item a toolbar item that is a menu item
+     * @returns the rendered toolbar item
+     */
+    protected renderMenuItem(item: TabBarToolbarItem & MenuToolbarItem): React.ReactNode {
+        const icon = typeof item.icon === 'function' ? item.icon() : item.icon ?? 'ellipsis';
+        return <div key={item.id}
+                    className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled menu'}
+                    onClick={this.showPopupMenu.bind(this, item.menuPath)}>
+            <div id={item.id} className={codicon(icon, true)}
+                title={item.text} />
+            <div className={codicon('chevron-down') + ' chevron'} />
+        </div >;
+    }
+
+    /**
+     * Presents the menu to popup on the `event` that is the clicking of
+     * a menu toolbar item.
+     *
+     * @param menuPath the path of the registered menu to show
+     * @param event the mouse event triggering the menu
+     */
+    protected showPopupMenu = (menuPath: MenuPath, event: React.MouseEvent) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const anchor = this.toAnchor(event);
+        this.renderPopupMenu(menuPath, anchor);
+    };
+
+    /**
+     * Renders the menu popped up on a menu toolbar item.
+     *
+     * @param menuPath the path of the registered menu to render
+     * @param anchor a description of where to render the menu
+     * @returns platform-specific access to the rendered context menu
+     */
+    protected renderPopupMenu(menuPath: MenuPath, anchor: Anchor): ContextMenuAccess {
+        const toDisposeOnHide = new DisposableCollection();
+        this.addClass('menu-open');
+        toDisposeOnHide.push(Disposable.create(() => this.removeClass('menu-open')));
+
+        return this.contextMenuRenderer.render({
+            menuPath,
+            args: [this.current],
+            anchor,
+            context: this.current?.node,
             onHide: () => toDisposeOnHide.dispose()
         });
     }

package/src/browser/shell/tab-bars.ts

@@ -38,6 +38,7 @@ import { Root, createRoot } from 'react-dom/client';
 import { SelectComponent } from '../widgets/select-component';
 import { createElement } from 'react';
 import { PreviewableWidget } from '../widgets/previewable-widget';
+import { EnhancedPreviewWidget } from '../widgets/enhanced-preview-widget';
 
 /** The class name added to hidden content nodes, which are required to render vertical side bars. */
 const HIDDEN_CONTENT_CLASS = 'theia-TabBar-hidden-content';
@@ -504,7 +505,13 @@ export class TabBarRenderer extends TabBar.Renderer {
         labelElement.classList.add('theia-horizontal-tabBar-hover-title');
         labelElement.textContent = title.label;
         hoverBox.append(labelElement);
-        if (title.caption) {
+        const widget = title.owner;
+        if (EnhancedPreviewWidget.is(widget)) {
+            const enhancedPreviewNode = widget.getEnhancedPreviewNode();
+            if (enhancedPreviewNode) {
+                hoverBox.appendChild(enhancedPreviewNode);
+            }
+        } else if (title.caption) {
             const captionElement = document.createElement('p');
             captionElement.classList.add('theia-horizontal-tabBar-hover-caption');
             captionElement.textContent = title.caption;

package/src/browser/style/tabs.css

@@ -254,8 +254,8 @@
 }
 
 .p-TabBar.theia-app-centers
-  .p-TabBar-tab:hover.p-mod-closable
-  > .p-TabBar-tabCloseIcon {
+  .p-TabBar-tab.p-mod-closable
+  > .p-TabBar-tabCloseIcon:hover {
   border-radius: 5px;
   background-color: rgba(50%, 50%, 50%, 0.2);
 }
@@ -459,6 +459,10 @@
   cursor: pointer;
 }
 
+.p-TabBar-toolbar .item.enabled .action-label::before {
+  display: flex;
+}
+
 .p-TabBar-toolbar :not(.item.enabled) .action-label {
   background: transparent;
   cursor: default;
@@ -476,6 +480,11 @@
   line-height: 18px;
 }
 
+.p-TabBar-toolbar .item > div.no-icon {
+  /* Make room for a text label instead of an icon. */
+  width: 100%;
+}
+
 .p-TabBar-toolbar .item .collapse-all {
   background: var(--theia-icon-collapse-all) no-repeat;
 }
@@ -496,6 +505,27 @@
   background: var(--theia-icon-close) no-repeat;
 }
 
+/** Configure layout of a toolbar item that shows a pop-up menu. */
+.p-TabBar-toolbar .item.menu {
+  display: grid;
+}
+
+/** The elements of the item that shows a pop-up menu are stack atop one other. */
+.p-TabBar-toolbar .item.menu > div {
+  grid-area: 1 / 1;
+}
+
+/**
+ * The chevron for the pop-up menu indication is shrunk and
+ * stuffed in the bottom-right corner.
+ */
+.p-TabBar-toolbar .item.menu > .chevron {
+  scale: 50%;
+  align-self: end;
+  justify-self: end;
+  translate: 5px 3px;
+}
+
 #theia-main-content-panel
   .p-TabBar:not(.theia-tabBar-active)
   .p-TabBar-toolbar {

package/src/browser/tree/tree-model.ts

@@ -472,6 +472,14 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
         return this.tree.markAsBusy(node, ms, token);
     }
 
+    get onDidUpdate(): Event<TreeNode[]> {
+        return this.tree.onDidUpdate;
+    }
+
+    markAsChecked(node: TreeNode, checked: boolean): void {
+        this.tree.markAsChecked(node, checked);
+    }
+
 }
 export namespace TreeModelImpl {
     export interface State {

package/src/browser/tree/tree-widget.tsx

@@ -243,12 +243,16 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                 }),
             ]);
         }
+        this.node.addEventListener('mousedown', this.handleMiddleClickEvent.bind(this));
+        this.node.addEventListener('mouseup', this.handleMiddleClickEvent.bind(this));
+        this.node.addEventListener('auxclick', this.handleMiddleClickEvent.bind(this));
         this.toDispose.pushAll([
             this.model,
             this.model.onChanged(() => this.updateRows()),
             this.model.onSelectionChanged(() => this.scheduleUpdateScrollToRow({ resize: false })),
             this.focusService.onDidChangeFocus(() => this.scheduleUpdateScrollToRow({ resize: false })),
             this.model.onDidChangeBusy(() => this.update()),
+            this.model.onDidUpdate(() => this.update()),
             this.model.onNodeRefreshed(() => this.updateDecorations()),
             this.model.onExpansionChanged(() => this.updateDecorations()),
             this.decoratorService,
@@ -575,6 +579,40 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         </div>;
     }
 
+    /**
+     * Render the node expansion toggle.
+     * @param node the tree node.
+     * @param props the node properties.
+     */
+    protected renderCheckbox(node: TreeNode, props: NodeProps): React.ReactNode {
+        if (node.checkboxInfo === undefined) {
+            // eslint-disable-next-line no-null/no-null
+            return null;
+        }
+        return <input data-node-id={node.id}
+            readOnly
+            type='checkbox'
+            checked={!!node.checkboxInfo.checked}
+            title={node.checkboxInfo.tooltip}
+            aria-label={node.checkboxInfo.accessibilityInformation?.label}
+            role={node.checkboxInfo.accessibilityInformation?.role}
+            className='theia-input'
+            onClick={event => this.toggleChecked(event)} />;
+    }
+
+    protected toggleChecked(event: React.MouseEvent<HTMLElement>): void {
+        const nodeId = event.currentTarget.getAttribute('data-node-id');
+        if (nodeId) {
+            const node = this.model.getNode(nodeId);
+            if (node) {
+                this.model.markAsChecked(node, !node.checkboxInfo!.checked);
+            } else {
+                this.handleClickEvent(node, event);
+            }
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
     /**
      * Render the tree node caption given the node properties.
      * @param node the tree node.
@@ -902,6 +940,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         const attributes = this.createNodeAttributes(node, props);
         const content = <div className={TREE_NODE_CONTENT_CLASS}>
             {this.renderExpansionToggle(node, props)}
+            {this.renderCheckbox(node, props)}
             {this.decorateIcon(node, this.renderIcon(node, props))}
             {this.renderCaptionAffixes(node, props, 'captionPrefixes')}
             {this.renderCaption(node, props)}
@@ -924,6 +963,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             style,
             onClick: event => this.handleClickEvent(node, event),
             onDoubleClick: event => this.handleDblClickEvent(node, event),
+            onAuxClick: event => this.handleAuxClickEvent(node, event),
             onContextMenu: event => this.handleContextMenuEvent(node, event),
         };
     }
@@ -1238,6 +1278,32 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         event.stopPropagation();
     }
 
+    /**
+     * Handle the middle-click mouse event.
+     * @param node the tree node if available.
+     * @param event the middle-click mouse event.
+     */
+    protected handleAuxClickEvent(node: TreeNode | undefined, event: React.MouseEvent<HTMLElement>): void {
+        if (event.button === 1) {
+            this.model.openNode(node);
+            if (SelectableTreeNode.is(node)) {
+                this.model.selectNode(node);
+            }
+        }
+        event.stopPropagation();
+    }
+
+    /**
+     * Handle the middle-click mouse event.
+     * @param event the middle-click mouse event.
+     */
+    protected handleMiddleClickEvent(event: MouseEvent): void {
+        // Prevents auto-scrolling behavior when middle-clicking.
+        if (event.button === 1) {
+            event.preventDefault();
+        }
+    }
+
     /**
      * Handle the context menu click event.
      * - The context menu click event is triggered by the right-click.

package/src/browser/tree/tree.ts

@@ -20,6 +20,7 @@ import { Disposable, DisposableCollection } from '../../common/disposable';
 import { CancellationToken, CancellationTokenSource } from '../../common/cancellation';
 import { timeout } from '../../common/promise-util';
 import { isObject, Mutable } from '../../common';
+import { AccessibilityInformation } from '../../common/accessibility';
 
 export const Tree = Symbol('Tree');
 
@@ -70,6 +71,19 @@ export interface Tree extends Disposable {
      * A token source of the given token should be canceled to unmark.
      */
     markAsBusy(node: Readonly<TreeNode>, ms: number, token: CancellationToken): Promise<void>;
+
+    /**
+     * An update to the tree node occurred, but the tree structure remains unchanged
+     */
+    readonly onDidUpdate: Event<TreeNode[]>;
+
+    markAsChecked(node: TreeNode, checked: boolean): void;
+}
+
+export interface TreeViewItemCheckboxInfo {
+    checked: boolean;
+    tooltip?: string;
+    accessibilityInformation?: AccessibilityInformation
 }
 
 /**
@@ -120,6 +134,11 @@ export interface TreeNode {
      * Whether this node is busy. Greater than 0 then busy; otherwise not.
      */
     readonly busy?: number;
+
+    /**
+     * Whether this node is checked.
+     */
+    readonly checkboxInfo?: TreeViewItemCheckboxInfo;
 }
 
 export namespace TreeNode {
@@ -238,6 +257,8 @@ export class TreeImpl implements Tree {
 
     protected readonly onDidChangeBusyEmitter = new Emitter<TreeNode>();
     readonly onDidChangeBusy = this.onDidChangeBusyEmitter.event;
+    protected readonly onDidUpdateEmitter = new Emitter<TreeNode[]>();
+    readonly onDidUpdate = this.onDidUpdateEmitter.event;
 
     protected nodes: {
         [id: string]: Mutable<TreeNode> | undefined
@@ -368,6 +389,12 @@ export class TreeImpl implements Tree {
             await this.doMarkAsBusy(node, ms, token);
         }
     }
+
+    markAsChecked(node: Mutable<TreeNode>, checked: boolean): void {
+        node.checkboxInfo!.checked = checked;
+        this.onDidUpdateEmitter.fire([node]);
+    }
+
     protected async doMarkAsBusy(node: Mutable<TreeNode>, ms: number, token: CancellationToken): Promise<void> {
         try {
             await timeout(ms, token);

package/src/browser/widgets/enhanced-preview-widget.ts

@@ -0,0 +1,27 @@
+// *****************************************************************************
+// Copyright (C) 2023 STMicroelectronics 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-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { isFunction, isObject } from '../../common';
+
+export interface EnhancedPreviewWidget {
+    getEnhancedPreviewNode(): Node | undefined;
+}
+
+export namespace EnhancedPreviewWidget {
+    export function is(arg: unknown): arg is EnhancedPreviewWidget {
+        return isObject<EnhancedPreviewWidget>(arg) && isFunction(arg.getEnhancedPreviewNode);
+    }
+}

package/src/browser/window-contribution.ts

@@ -51,7 +51,7 @@ export class WindowContribution implements CommandContribution, KeybindingContri
     }
 
     registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(CommonMenus.FILE_NEW, {
+        registry.registerMenuAction(CommonMenus.FILE_NEW_TEXT, {
             commandId: WindowCommands.NEW_WINDOW.id,
             order: 'c'
         });

package/src/common/array-utils.ts

@@ -106,4 +106,24 @@ export namespace ArrayUtils {
     export function coalesce<T>(array: ReadonlyArray<T | undefined | null>): T[] {
         return <T[]>array.filter(e => !!e);
     }
+
+    /**
+     * groups array elements through a comparator function
+     * @param data array of elements to group
+     * @param compare comparator function: return of 0 means should group, anything above means not group
+     * @returns array of arrays with grouped elements
+     */
+    export function groupBy<T>(data: ReadonlyArray<T>, compare: (a: T, b: T) => number): T[][] {
+        const result: T[][] = [];
+        let currentGroup: T[] | undefined = undefined;
+        for (const element of data.slice(0).sort(compare)) {
+            if (!currentGroup || compare(currentGroup[0], element) !== 0) {
+                currentGroup = [element];
+                result.push(currentGroup);
+            } else {
+                currentGroup.push(element);
+            }
+        }
+        return result;
+    }
 }

package/src/common/event.ts

@@ -16,7 +16,7 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { Disposable, DisposableGroup } from './disposable';
+import { Disposable, DisposableGroup, DisposableCollection } from './disposable';
 import { MaybePromise } from './types';
 
 /**
@@ -67,6 +67,16 @@ export namespace Event {
             set maxListeners(maxListeners: number) { }
         });
     }
+
+    /**
+     * Given a collection of events, returns a single event which emits whenever any of the provided events emit.
+     */
+    export function any<T>(...events: Event<T>[]): Event<T>;
+    export function any(...events: Event<any>[]): Event<void>;
+    export function any<T>(...events: Event<T>[]): Event<T> {
+        return (listener, thisArgs = undefined, disposables?: Disposable[]) =>
+            new DisposableCollection(...events.map(event => event(e => listener.call(thisArgs, e), undefined, disposables)));
+    }
 }
 
 type Callback = (...args: any[]) => any;
@@ -276,7 +286,7 @@ export class Emitter<T = any> {
      */
     fire(event: T): any {
         if (this._callbacks) {
-            this._callbacks.invoke(event);
+            return this._callbacks.invoke(event);
         }
     }
 

package/src/common/i18n/localization-server.ts

@@ -0,0 +1,25 @@
+// *****************************************************************************
+// Copyright (C) 2023 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-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { Localization } from './localization';
+
+export const LocalizationServerPath = '/localization-server';
+
+export const LocalizationServer = Symbol('LocalizationServer');
+
+export interface LocalizationServer {
+    loadLocalization(languageId: string): Promise<Localization>;
+}