@theia/core 1.37.0-next.9 → 1.38.0-next.0

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

@@ -67,6 +67,10 @@ export interface SideBarRenderData extends TabBar.IRenderData<Widget> {
     paddingBottom?: number;
 }
 
+export interface ScrollableRenderData extends TabBar.IRenderData<Widget> {
+    tabWidth?: number;
+}
+
 /**
  * A tab bar renderer that offers a context menu. In addition, this renderer is able to
  * set an explicit position and size on the icon and label of each tab in a side bar.
@@ -157,9 +161,7 @@ export class TabBarRenderer extends TabBar.Renderer {
             ? nls.localizeByDefault('Unpin')
             : nls.localizeByDefault('Close');
 
-        const hover = this.tabBar && this.tabBar.orientation === 'horizontal' ? {
-            title: title.caption
-        } : {
+        const hover = this.tabBar && (this.tabBar.orientation === 'horizontal' && !this.corePreferences?.['window.tabbar.enhancedPreview']) ? { title: title.caption } : {
             onmouseenter: this.handleMouseEnterEvent
         };
 
@@ -204,11 +206,12 @@ export class TabBarRenderer extends TabBar.Renderer {
      * If size information is available for the label and icon, set an explicit height on the tab.
      * The height value also considers padding, which should be derived from CSS settings.
      */
-    override createTabStyle(data: SideBarRenderData): ElementInlineStyle {
+    override createTabStyle(data: SideBarRenderData & ScrollableRenderData): ElementInlineStyle {
         const zIndex = `${data.zIndex}`;
         const labelSize = data.labelSize;
         const iconSize = data.iconSize;
         let height: string | undefined;
+        let width: string | undefined;
         if (labelSize || iconSize) {
             const labelHeight = labelSize ? (this.tabBar && this.tabBar.orientation === 'horizontal' ? labelSize.height : labelSize.width) : 0;
             const iconHeight = iconSize ? iconSize.height : 0;
@@ -220,7 +223,12 @@ export class TabBarRenderer extends TabBar.Renderer {
             const paddingBottom = data.paddingBottom || 0;
             height = `${labelHeight + iconHeight + paddingTop + paddingBottom}px`;
         }
-        return { zIndex, height };
+        if (data.tabWidth) {
+            width = `${data.tabWidth}px`;
+        } else {
+            width = '';
+        }
+        return { zIndex, height, width };
     }
 
     /**
@@ -474,16 +482,41 @@ export class TabBarRenderer extends TabBar.Renderer {
         return h.div({ className: baseClassName, style }, data.title.iconLabel);
     }
 
+    protected renderEnhancedPreview = (title: Title<Widget>) => {
+        const hoverBox = document.createElement('div');
+        hoverBox.classList.add('theia-horizontal-tabBar-hover-div');
+        const labelElement = document.createElement('p');
+        labelElement.classList.add('theia-horizontal-tabBar-hover-title');
+        labelElement.textContent = title.label;
+        hoverBox.append(labelElement);
+        if (title.caption) {
+            const captionElement = document.createElement('p');
+            captionElement.classList.add('theia-horizontal-tabBar-hover-caption');
+            captionElement.textContent = title.caption;
+            hoverBox.appendChild(captionElement);
+        }
+        return hoverBox;
+    };
+
     protected handleMouseEnterEvent = (event: MouseEvent) => {
         if (this.tabBar && this.hoverService && event.currentTarget instanceof HTMLElement) {
             const id = event.currentTarget.id;
             const title = this.tabBar.titles.find(t => this.createTabId(t) === id);
             if (title) {
-                this.hoverService.requestHover({
-                    content: title.caption,
-                    target: event.currentTarget,
-                    position: 'right'
-                });
+                if (this.tabBar.orientation === 'horizontal') {
+                    this.hoverService.requestHover({
+                        content: this.renderEnhancedPreview(title),
+                        target: event.currentTarget,
+                        position: 'bottom',
+                        cssClasses: ['extended-tab-preview']
+                    });
+                } else {
+                    this.hoverService.requestHover({
+                        content: title.caption,
+                        target: event.currentTarget,
+                        position: 'right'
+                    });
+                }
             }
         }
     };
@@ -542,6 +575,13 @@ export class TabBarRenderer extends TabBar.Renderer {
 
 }
 
+export namespace ScrollableTabBar {
+    export interface Options {
+        minimumTabSize: number;
+        defaultTabSize: number;
+    }
+}
+
 /**
  * A specialized tab bar for the main and bottom areas.
  */
@@ -551,12 +591,26 @@ export class ScrollableTabBar extends TabBar<Widget> {
 
     private scrollBarFactory: () => PerfectScrollbar;
     private pendingReveal?: Promise<void>;
+    private isMouseOver = false;
+    protected needsRecompute = false;
+    protected tabSize = 0;
+    private _dynamicTabOptions?: ScrollableTabBar.Options;
 
     protected readonly toDispose = new DisposableCollection();
 
-    constructor(options?: TabBar.IOptions<Widget> & PerfectScrollbar.Options) {
+    constructor(options?: TabBar.IOptions<Widget> & PerfectScrollbar.Options, dynamicTabOptions?: ScrollableTabBar.Options) {
         super(options);
         this.scrollBarFactory = () => new PerfectScrollbar(this.scrollbarHost, options);
+        this._dynamicTabOptions = dynamicTabOptions;
+    }
+
+    set dynamicTabOptions(options: ScrollableTabBar.Options | undefined) {
+        this._dynamicTabOptions = options;
+        this.updateTabs();
+    }
+
+    get dynamicTabOptions(): ScrollableTabBar.Options | undefined {
+        return this._dynamicTabOptions;
     }
 
     override dispose(): void {
@@ -571,6 +625,14 @@ export class ScrollableTabBar extends TabBar<Widget> {
         if (!this.scrollBar) {
             this.scrollBar = this.scrollBarFactory();
         }
+        this.node.addEventListener('mouseenter', () => { this.isMouseOver = true; });
+        this.node.addEventListener('mouseleave', () => {
+            this.isMouseOver = false;
+            if (this.needsRecompute) {
+                this.updateTabs();
+            }
+        });
+
         super.onAfterAttach(msg);
     }
 
@@ -583,7 +645,34 @@ export class ScrollableTabBar extends TabBar<Widget> {
     }
 
     protected override onUpdateRequest(msg: Message): void {
-        super.onUpdateRequest(msg);
+        this.updateTabs();
+    }
+
+    protected updateTabs(): void {
+
+        const content = [];
+        if (this.dynamicTabOptions) {
+            if (this.isMouseOver) {
+                this.needsRecompute = true;
+            } else {
+                this.needsRecompute = false;
+                if (this.orientation === 'horizontal') {
+                    this.tabSize = Math.max(Math.min(this.scrollbarHost.clientWidth / this.titles.length,
+                        this.dynamicTabOptions.defaultTabSize), this.dynamicTabOptions.minimumTabSize);
+                }
+            }
+        }
+        for (let i = 0, n = this.titles.length; i < n; ++i) {
+            const title = this.titles[i];
+            const current = title === this.currentTitle;
+            const zIndex = current ? n : n - i - 1;
+            const renderData: ScrollableRenderData = { title: title, current: current, zIndex: zIndex };
+            if (this.dynamicTabOptions && this.orientation === 'horizontal') {
+                renderData.tabWidth = this.tabSize;
+            }
+            content[i] = this.renderer.renderTab(renderData);
+        }
+        VirtualDOM.render(content, this.contentNode);
         if (this.scrollBar) {
             this.scrollBar.update();
         }
@@ -591,6 +680,9 @@ export class ScrollableTabBar extends TabBar<Widget> {
 
     protected override onResize(msg: Widget.ResizeMessage): void {
         super.onResize(msg);
+        if (this.dynamicTabOptions) {
+            this.updateTabs();
+        }
         if (this.scrollBar) {
             if (this.currentIndex >= 0) {
                 this.revealTab(this.currentIndex);
@@ -680,9 +772,10 @@ export class ToolbarAwareTabBar extends ScrollableTabBar {
         protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
         protected readonly tabBarToolbarFactory: () => TabBarToolbar,
         protected readonly breadcrumbsRendererFactory: BreadcrumbsRendererFactory,
-        protected readonly options?: TabBar.IOptions<Widget> & PerfectScrollbar.Options,
+        options?: TabBar.IOptions<Widget> & PerfectScrollbar.Options,
+        dynamicTabOptions?: ScrollableTabBar.Options
     ) {
-        super(options);
+        super(options, dynamicTabOptions);
         this.breadcrumbsRenderer = this.breadcrumbsRendererFactory();
         this.rewireDOM();
         this.toDispose.push(this.tabBarToolbarRegistry.onDidChange(() => this.update()));
@@ -756,6 +849,7 @@ export class ToolbarAwareTabBar extends ScrollableTabBar {
         }
         const widget = this.currentTitle?.owner ?? undefined;
         this.toolbar.updateTarget(widget);
+        this.updateTabs();
     }
 
     override handleEvent(event: Event): void {
@@ -859,7 +953,7 @@ export class SideTabBar extends ScrollableTabBar {
 
     protected override onAfterAttach(msg: Message): void {
         super.onAfterAttach(msg);
-        this.renderTabBar();
+        this.updateTabs();
         this.node.addEventListener('p-dragenter', this);
         this.node.addEventListener('p-dragover', this);
         this.node.addEventListener('p-dragleave', this);
@@ -875,7 +969,7 @@ export class SideTabBar extends ScrollableTabBar {
     }
 
     protected override onUpdateRequest(msg: Message): void {
-        this.renderTabBar();
+        this.updateTabs();
         if (this.scrollBar) {
             this.scrollBar.update();
         }
@@ -885,7 +979,7 @@ export class SideTabBar extends ScrollableTabBar {
      * Render the tab bar in the _hidden content node_ (see `hiddenContentNode` for explanation),
      * then gather size information for labels and render it again in the proper content node.
      */
-    protected renderTabBar(): void {
+    protected override updateTabs(): void {
         if (this.isAttached) {
             // Render into the invisible node
             this.renderTabs(this.hiddenContentNode);

package/src/browser/style/hover-service.css

@@ -93,3 +93,7 @@
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
 }
+
+.theia-hover.extended-tab-preview {
+    border-radius: 10px;
+}

package/src/browser/style/tabs.css

@@ -410,3 +410,28 @@
   flex-flow: row nowrap;
   min-width: 100%;
 }
+
+.p-TabBar-tab .theia-tab-icon-label {
+  flex: 1;
+}
+
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-tab.p-mod-closable:hover .theia-tab-icon-label,
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-tab.p-mod-current .theia-tab-icon-label {
+  overflow: hidden;
+}
+
+.theia-horizontal-tabBar-hover-div {
+  margin: 0px 4px;
+}
+
+.theia-horizontal-tabBar-hover-title {
+  font-weight: bolder;
+  font-size: medium;
+  margin: 0px 0px;
+}
+
+.theia-horizontal-tabBar-hover-caption {
+  font-size: small;
+  margin: 0px 0px;
+  margin-top: 4px;
+}

package/src/browser/style/tree.css

@@ -177,6 +177,7 @@
     position: absolute;
     height: var(--theia-content-line-height);
     border-right: var(--theia-border-width) solid transparent;
+    pointer-events: none;
 }
 
 .theia-tree-node-indent.always,

package/src/browser/test/jsdom.ts

@@ -47,7 +47,7 @@ export function enableJSDOM(): () => void {
 
     const toCleanup: string[] = [];
     Object.getOwnPropertyNames((dom.window as any)).forEach(property => {
-        if (typeof (global as any)[property] === 'undefined') {
+        if (!(property in global)) {
             (global as any)[property] = (dom.window as any)[property];
             toCleanup.push(property);
         }

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

@@ -202,12 +202,12 @@ export namespace Iterators {
      * Generator for depth first, pre-order tree traversal iteration.
      */
     export function* depthFirst<T>(root: T, children: (node: T) => T[] | undefined, include: (node: T) => boolean = () => true): IterableIterator<T> {
-        const stack: T[] = [];
+        let stack: T[] = [];
         stack.push(root);
         while (stack.length > 0) {
             const top = stack.pop()!;
             yield top;
-            stack.push(...(children(top) || []).filter(include).reverse());
+            stack = stack.concat((children(top) || []).filter(include).reverse());
         }
     }
 
@@ -215,12 +215,12 @@ export namespace Iterators {
      * Generator for breadth first tree traversal iteration.
      */
     export function* breadthFirst<T>(root: T, children: (node: T) => T[] | undefined, include: (node: T) => boolean = () => true): IterableIterator<T> {
-        const queue: T[] = [];
+        let queue: T[] = [];
         queue.push(root);
         while (queue.length > 0) {
             const head = queue.shift()!;
             yield head;
-            queue.push(...(children(head) || []).filter(include));
+            queue = queue.concat((children(head) || []).filter(include));
         }
     }
 

package/src/browser/tree/tree-selection-state.spec.ts

@@ -16,10 +16,10 @@
 
 import { expect } from 'chai';
 import { MockTreeModel } from './test/mock-tree-model';
-import { TreeSelectionState } from './tree-selection-state';
 import { createTreeTestContainer } from './test/tree-test-container';
-import { SelectableTreeNode, TreeSelection } from './tree-selection';
 import { TreeModel } from './tree-model';
+import { SelectableTreeNode, TreeSelection } from './tree-selection';
+import { TreeSelectionState } from './tree-selection-state';
 
 namespace TreeSelectionState {
 
@@ -34,6 +34,16 @@ namespace TreeSelectionState {
 
 }
 
+const LARGE_FLAT_MOCK_ROOT = (length = 250000) => {
+    const children = Array.from({ length }, (_, idx) => ({ 'id': (idx + 1).toString() }));
+    return MockTreeModel.Node.toTreeNode({
+        'id': 'ROOT',
+        'children': [
+            ...children
+        ]
+    });
+};
+
 describe('tree-selection-state', () => {
 
     const model = createTreeModel();
@@ -391,6 +401,23 @@ describe('tree-selection-state', () => {
             });
     });
 
+    it('should be able to handle range selection on large tree', () => {
+        model.root = LARGE_FLAT_MOCK_ROOT();
+        expect(model.selectedNodes).to.be.empty;
+
+        const start = 10;
+        const end = 20;
+        newState()
+            .nextState('toggle', start.toString(), {
+                focus: start.toString(),
+                selection: [start.toString()]
+            })
+            .nextState('range', end.toString(), {
+                focus: start.toString(),
+                selection: Array.from({ length: end - start + 1 }, (_, idx) => (start + idx).toString())
+            });
+    });
+
     function newState(): TreeSelectionState.Assert {
         return nextState(new TreeSelectionState(model));
     }

package/src/common/i18n/localization.ts

@@ -39,22 +39,12 @@ export type FormatType = string | number | boolean | undefined;
 
 export namespace Localization {
 
-    export function format(message: string, args: FormatType[]): string {
-        let result = message;
-        if (args.length > 0) {
-            result = message.replace(/\{(\d+)\}/g, (match, rest) => {
-                const index = rest[0];
-                const arg = args[index];
-                let replacement = match;
-                if (typeof arg === 'string') {
-                    replacement = arg;
-                } else if (typeof arg === 'number' || typeof arg === 'boolean' || !arg) {
-                    replacement = String(arg);
-                }
-                return replacement;
-            });
-        }
-        return result;
+    const formatRegexp = /{([^}]+)}/g;
+
+    export function format(message: string, args: FormatType[]): string;
+    export function format(message: string, args: Record<string | number, FormatType>): string;
+    export function format(message: string, args: Record<string | number, FormatType> | FormatType[]): string {
+        return message.replace(formatRegexp, (match, group) => (args[group] ?? match) as string);
     }
 
     export function localize(localization: Localization | undefined, key: string, defaultValue: string, ...args: FormatType[]): string {

package/src/common/nls.ts

@@ -20,6 +20,8 @@ export namespace nls {
 
     export let localization: Localization | undefined;
 
+    export const defaultLocale = 'en';
+
     export const localeId = 'localeId';
 
     export const locale = typeof window === 'object' && window && window.localStorage.getItem(localeId) || undefined;
@@ -57,7 +59,7 @@ export namespace nls {
     }
 
     export function isSelectedLocale(id: string): boolean {
-        if (locale === undefined && id === 'en') {
+        if (locale === undefined && id === defaultLocale) {
             return true;
         }
         return locale === id;

package/src/common/quick-pick-service.ts

@@ -67,6 +67,7 @@ export interface QuickPickSeparator {
 }
 
 export type QuickPickItemOrSeparator = QuickPickItem | QuickPickSeparator;
+export type QuickPickInput<T = QuickPickItem> = T | QuickPickSeparator;
 
 export namespace QuickPickItem {
     export function is(item: QuickPickSeparator | QuickPickItem): item is QuickPickItem {
@@ -278,7 +279,7 @@ export interface QuickInputService {
     open(filter: string): void;
     createInputBox(): InputBox;
     input(options?: InputOptions, token?: CancellationToken): Promise<string | undefined>;
-    pick<T extends QuickPickItem, O extends PickOptions<T>>(picks: Promise<T[]> | T[], options?: O, token?: CancellationToken):
+    pick<T extends QuickPickItem, O extends PickOptions<T>>(picks: Promise<QuickPickInput<T>[]> | QuickPickInput<T>[], options?: O, token?: CancellationToken):
         Promise<(O extends { canPickMany: true } ? T[] : T) | undefined>;
     showQuickPick<T extends QuickPickItem>(items: Array<T | QuickPickSeparator>, options?: QuickPickOptions<T>): Promise<T | undefined>;
     hide(): void;

package/src/electron-browser/electron-clipboard-service.ts

@@ -15,7 +15,6 @@
 // *****************************************************************************
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { clipboard } from 'electron';
 import { injectable } from 'inversify';
 import { ClipboardService } from '../browser/clipboard-service';
 
@@ -23,11 +22,11 @@ import { ClipboardService } from '../browser/clipboard-service';
 export class ElectronClipboardService implements ClipboardService {
 
     readText(): string {
-        return clipboard.readText();
+        return window.electronTheiaCore.readClipboard();
     }
 
     writeText(value: string): void {
-        clipboard.writeText(value);
+        window.electronTheiaCore.writeClipboard(value);
     }
 
 }

package/src/electron-browser/keyboard/electron-keyboard-layout-change-notifier.ts

@@ -14,7 +14,6 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { ipcRenderer } from '@theia/electron/shared/electron';
 import { postConstruct, injectable } from 'inversify';
 import { KeyboardLayoutChangeNotifier, NativeKeyboardLayout } from '../../common/keyboard/keyboard-layout-provider';
 import { Emitter, Event } from '../../common/event';
@@ -34,7 +33,7 @@ export class ElectronKeyboardLayoutChangeNotifier implements KeyboardLayoutChang
 
     @postConstruct()
     protected initialize(): void {
-        ipcRenderer.on('keyboardLayoutChanged', (event: Electron.IpcRendererEvent, newLayout: NativeKeyboardLayout) => this.nativeLayoutChanged.fire(newLayout));
+        window.electronTheiaCore.onKeyboardLayoutChanged((newLayout: NativeKeyboardLayout) => this.nativeLayoutChanged.fire(newLayout));
     }
 
 }

package/src/electron-browser/menu/electron-context-menu-renderer.ts

@@ -16,7 +16,6 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import * as electron from '../../../electron-shared/electron';
 import { inject, injectable, postConstruct } from 'inversify';
 import {
     ContextMenuRenderer, RenderContextMenuOptions, ContextMenuAccess, FrontendApplicationContribution, CommonCommands, coordinateFromAnchor, PreferenceService
@@ -25,12 +24,11 @@ import { ElectronMainMenuFactory } from './electron-main-menu-factory';
 import { ContextMenuContext } from '../../browser/menu/context-menu-context';
 import { MenuPath, MenuContribution, MenuModelRegistry } from '../../common';
 import { BrowserContextMenuRenderer } from '../../browser/menu/browser-context-menu-renderer';
-import { RequestTitleBarStyle, TitleBarStyleAtStartup } from '../../electron-common/messaging/electron-messages';
 
 export class ElectronContextMenuAccess extends ContextMenuAccess {
-    constructor(readonly menu: electron.Menu) {
+    constructor(readonly menuHandle: Promise<number>) {
         super({
-            dispose: () => menu.closePopup()
+            dispose: () => menuHandle.then(handle => window.electronTheiaCore.closePopup(handle))
         });
     }
 }
@@ -93,10 +91,7 @@ export class ElectronContextMenuRenderer extends BrowserContextMenuRenderer {
 
     @postConstruct()
     protected async init(): Promise<void> {
-        electron.ipcRenderer.on(TitleBarStyleAtStartup, (_event, style: string) => {
-            this.useNativeStyle = style === 'native';
-        });
-        electron.ipcRenderer.send(RequestTitleBarStyle);
+        this.useNativeStyle = await window.electronTheiaCore.getTitleBarStyleAtStartup() === 'native';
     }
 
     protected override doRender(options: RenderContextMenuOptions): ContextMenuAccess {
@@ -104,17 +99,15 @@ export class ElectronContextMenuRenderer extends BrowserContextMenuRenderer {
             const { menuPath, anchor, args, onHide, context, contextKeyService } = options;
             const menu = this.electronMenuFactory.createElectronContextMenu(menuPath, args, context, contextKeyService);
             const { x, y } = coordinateFromAnchor(anchor);
-            const zoom = electron.webFrame.getZoomFactor();
-            // TODO: Remove the offset once Electron fixes https://github.com/electron/electron/issues/31641
-            const offset = process.platform === 'win32' ? 0 : 2;
-            // x and y values must be Ints or else there is a conversion error
-            menu.popup({ x: Math.round(x * zoom) + offset, y: Math.round(y * zoom) + offset });
+
+            const menuHandle = window.electronTheiaCore.popup(menu, x, y, () => {
+                if (onHide) {
+                    onHide();
+                }
+            });
             // native context menu stops the event loop, so there is no keyboard events
             this.context.resetAltPressed();
-            if (onHide) {
-                menu.once('menu-will-close', () => onHide());
-            }
-            return new ElectronContextMenuAccess(menu);
+            return new ElectronContextMenuAccess(menuHandle);
         } else {
             return super.doRender(options);
         }