@theia/core 1.55.1 → 1.57.0-next.22

package/src/browser/hover-service.ts

@@ -25,6 +25,10 @@ import '../../src/browser/style/hover-service.css';
 
 export type HoverPosition = 'left' | 'right' | 'top' | 'bottom';
 
+// Threshold, in milliseconds, over which a mouse movement is not considered
+// quick enough as to be ignored
+const quickMouseThresholdMillis = 200;
+
 export namespace HoverPosition {
     export function invertIfNecessary(position: HoverPosition, target: DOMRect, host: DOMRect, totalWidth: number, totalHeight: number): HoverPosition {
         if (position === 'left') {
@@ -100,11 +104,13 @@ export class HoverService {
         if (request.target !== this.hoverTarget) {
             this.cancelHover();
             this.pendingTimeout = disposableTimeout(() => this.renderHover(request), this.getHoverDelay());
+            this.hoverTarget = request.target;
+            this.listenForMouseOut();
         }
     }
 
     protected getHoverDelay(): number {
-        return Date.now() - this.lastHidHover < 200
+        return Date.now() - this.lastHidHover < quickMouseThresholdMillis
             ? 0
             : this.preferences.get('workbench.hover.delay', isOSX ? 1500 : 500);
     }
@@ -116,7 +122,6 @@ export class HoverService {
         if (cssClasses) {
             host.classList.add(...cssClasses);
         }
-        this.hoverTarget = target;
         if (content instanceof HTMLElement) {
             host.appendChild(content);
             firstChild = content;
@@ -155,8 +160,6 @@ export class HoverService {
                 }
             }
         });
-
-        this.listenForMouseOut();
     }
 
     protected setHostPosition(target: HTMLElement, host: HTMLElement, position: HoverPosition): HoverPosition {
@@ -197,7 +200,11 @@ export class HoverService {
     protected listenForMouseOut(): void {
         const handleMouseMove = (e: MouseEvent) => {
             if (e.target instanceof Node && !this.hoverHost.contains(e.target) && !this.hoverTarget?.contains(e.target)) {
-                this.cancelHover();
+                this.disposeOnHide.push(disposableTimeout(() => {
+                    if (!this.hoverHost.matches(':hover') && !this.hoverTarget?.matches(':hover')) {
+                        this.cancelHover();
+                    }
+                }, quickMouseThresholdMillis));
             }
         };
         document.addEventListener('mousemove', handleMouseMove);

package/src/browser/shell/view-contribution.ts

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { injectable, inject, interfaces, optional } from 'inversify';
+import { injectable, inject, interfaces, optional, unmanaged } from 'inversify';
 import { Widget } from '@phosphor/widgets';
 import {
     MenuModelRegistry, Command, CommandContribution,
@@ -64,7 +64,7 @@ export abstract class AbstractViewContribution<T extends Widget> implements Comm
     readonly toggleCommand?: Command;
 
     constructor(
-        protected readonly options: ViewContributionOptions
+        @unmanaged() protected readonly options: ViewContributionOptions
     ) {
         if (options.toggleCommandId) {
             this.toggleCommand = {

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

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { injectable } from 'inversify';
+import { injectable, unmanaged } from 'inversify';
 import { Tree, TreeNode } from './tree';
 import { Event, Emitter, Disposable, DisposableCollection, MaybePromise } from '../../common';
 import { WidgetDecoration } from '../widget-decoration';
@@ -170,7 +170,7 @@ export abstract class AbstractTreeDecoratorService implements TreeDecoratorServi
 
     protected readonly toDispose = new DisposableCollection();
 
-    constructor(protected readonly decorators: ReadonlyArray<TreeDecorator>) {
+    constructor(@unmanaged() protected readonly decorators: ReadonlyArray<TreeDecorator>) {
         this.toDispose.push(this.onDidChangeDecorationsEmitter);
         this.toDispose.pushAll(this.decorators.map(decorator =>
             decorator.onDidChangeDecorations(data =>

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

@@ -19,28 +19,35 @@
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
 // some code is copied and modified from: https://github.com/microsoft/vscode/blob/573e5145ae3b50523925a6f6315d373e649d1b06/src/vs/base/common/linkedText.ts
+// aligned the API and enablement behavior to https://github.com/microsoft/vscode/blob/c711bc9333ba339fde1a530de0094b3fa32f09de/src/vs/base/common/linkedText.ts
 
 import React = require('react');
 import { inject, injectable } from 'inversify';
-import { CommandRegistry } from '../../common';
+import { URI as CodeUri } from 'vscode-uri';
+import { CommandRegistry, DisposableCollection } from '../../common';
+import URI from '../../common/uri';
 import { ContextKeyService } from '../context-key-service';
+import { LabelIcon, LabelParser } from '../label-parser';
+import { OpenerService, open } from '../opener-service';
+import { codicon } from '../widgets';
+import { WindowService } from '../window/window-service';
 import { TreeModel } from './tree-model';
 import { TreeWidget } from './tree-widget';
-import { WindowService } from '../window/window-service';
 
-interface ViewWelcome {
+export interface ViewWelcome {
     readonly view: string;
     readonly content: string;
     readonly when?: string;
+    readonly enablement?: string;
     readonly order: number;
 }
 
-interface IItem {
+export interface IItem {
     readonly welcomeInfo: ViewWelcome;
     visible: boolean;
 }
 
-interface ILink {
+export interface ILink {
     readonly label: string;
     readonly href: string;
     readonly title?: string;
@@ -60,6 +67,14 @@ export class TreeViewWelcomeWidget extends TreeWidget {
     @inject(WindowService)
     protected readonly windowService: WindowService;
 
+    @inject(LabelParser)
+    protected readonly labelParser: LabelParser;
+
+    @inject(OpenerService)
+    protected readonly openerService: OpenerService;
+
+    protected readonly toDisposeBeforeUpdateViewWelcomeNodes = new DisposableCollection();
+
     protected viewWelcomeNodes: React.ReactNode[] = [];
     protected defaultItem: IItem | undefined;
     protected items: IItem[] = [];
@@ -130,13 +145,31 @@ export class TreeViewWelcomeWidget extends TreeWidget {
 
     protected updateViewWelcomeNodes(): void {
         this.viewWelcomeNodes = [];
+        this.toDisposeBeforeUpdateViewWelcomeNodes.dispose();
         const items = this.visibleItems.sort((a, b) => a.order - b.order);
 
-        for (const [iIndex, { content }] of items.entries()) {
+        const enablementKeys: Set<string>[] = [];
+        // the plugin-view-registry will push the changes when there is a change in the `when` prop  which controls the visibility
+        // this listener is to update the enablement of the components in the view welcome
+        this.toDisposeBeforeUpdateViewWelcomeNodes.push(
+            this.contextService.onDidChange(event => {
+                if (enablementKeys.some(keys => event.affects(keys))) {
+                    this.updateViewWelcomeNodes();
+                    this.update();
+                }
+            })
+        );
+        // Note: VS Code does not support the `renderSecondaryButtons` prop in welcome content either.
+        for (const { content, enablement } of items) {
+            const itemEnablementKeys = enablement
+                ? this.contextService.parseKeys(enablement)
+                : undefined;
+            if (itemEnablementKeys) {
+                enablementKeys.push(itemEnablementKeys);
+            }
             const lines = content.split('\n');
 
-            for (let [lIndex, line] of lines.entries()) {
-                const lineKey = `${iIndex}-${lIndex}`;
+            for (let line of lines) {
                 line = line.trim();
 
                 if (!line) {
@@ -146,42 +179,35 @@ export class TreeViewWelcomeWidget extends TreeWidget {
                 const linkedTextItems = this.parseLinkedText(line);
 
                 if (linkedTextItems.length === 1 && typeof linkedTextItems[0] !== 'string') {
+                    const node = linkedTextItems[0];
                     this.viewWelcomeNodes.push(
-                        this.renderButtonNode(linkedTextItems[0], lineKey)
+                        this.renderButtonNode(
+                            node,
+                            this.viewWelcomeNodes.length,
+                            enablement
+                        )
                     );
                 } else {
-                    const linkedTextNodes: React.ReactNode[] = [];
-
-                    for (const [nIndex, node] of linkedTextItems.entries()) {
-                        const linkedTextKey = `${lineKey}-${nIndex}`;
-
-                        if (typeof node === 'string') {
-                            linkedTextNodes.push(
-                                this.renderTextNode(node, linkedTextKey)
-                            );
-                        } else {
-                            linkedTextNodes.push(
-                                this.renderCommandLinkNode(node, linkedTextKey)
-                            );
-                        }
-                    }
+                    const renderNode = (item: LinkedTextItem, index: number) => typeof item == 'string'
+                        ? this.renderTextNode(item, index)
+                        : this.renderLinkNode(item, index, enablement);
 
                     this.viewWelcomeNodes.push(
-                        <div key={`line-${lineKey}`}>
-                            {...linkedTextNodes}
-                        </div>
+                        <p key={`p-${this.viewWelcomeNodes.length}`}>
+                            {...linkedTextItems.flatMap(renderNode)}
+                        </p>
                     );
                 }
             }
         }
     }
 
-    protected renderButtonNode(node: ILink, lineKey: string): React.ReactNode {
+    protected renderButtonNode(node: ILink, lineKey: string | number, enablement: string | undefined): React.ReactNode {
         return (
             <div key={`line-${lineKey}`} className='theia-WelcomeViewButtonWrapper'>
                 <button title={node.title}
                     className='theia-button theia-WelcomeViewButton'
-                    disabled={!this.isEnabledClick(node.href)}
+                    disabled={!this.isEnabledClick(enablement)}
                     onClick={e => this.openLinkOrCommand(e, node.href)}>
                     {node.label}
                 </button>
@@ -189,14 +215,22 @@ export class TreeViewWelcomeWidget extends TreeWidget {
         );
     }
 
-    protected renderTextNode(node: string, textKey: string): React.ReactNode {
-        return <span key={`text-${textKey}`}>{node}</span>;
+    protected renderTextNode(node: string, textKey: string | number): React.ReactNode {
+        return <span key={`text-${textKey}`}>
+            {this.labelParser.parse(node)
+                .map((segment, index) =>
+                    LabelIcon.is(segment)
+                        ? <span
+                            key={index}
+                            className={codicon(segment.name)}
+                        />
+                        : <span key={index}>{segment}</span>)}</span>;
     }
 
-    protected renderCommandLinkNode(node: ILink, linkKey: string): React.ReactNode {
+    protected renderLinkNode(node: ILink, linkKey: string | number, enablement: string | undefined): React.ReactNode {
         return (
             <a key={`link-${linkKey}`}
-                className={this.getLinkClassName(node.href)}
+                className={this.getLinkClassName(node.href, enablement)}
                 title={node.title || ''}
                 onClick={e => this.openLinkOrCommand(e, node.href)}>
                 {node.label}
@@ -204,37 +238,39 @@ export class TreeViewWelcomeWidget extends TreeWidget {
         );
     }
 
-    protected getLinkClassName(href: string): string {
+    protected getLinkClassName(href: string, enablement: string | undefined): string {
         const classNames = ['theia-WelcomeViewCommandLink'];
-        if (!this.isEnabledClick(href)) {
+        // Only command-backed links can be disabled. All other, https:, file: remain enabled
+        if (href.startsWith('command:') && !this.isEnabledClick(enablement)) {
             classNames.push('disabled');
         }
         return classNames.join(' ');
     }
 
-    protected isEnabledClick(href: string): boolean {
-        if (href.startsWith('command:')) {
-            const command = href.replace('command:', '');
-            return this.commands.isEnabled(command);
-        }
-        return true;
+    protected isEnabledClick(enablement: string | undefined): boolean {
+        return typeof enablement === 'string'
+            ? this.contextService.match(enablement)
+            : true;
     }
 
-    protected openLinkOrCommand = (event: React.MouseEvent, href: string): void => {
+    protected openLinkOrCommand = (event: React.MouseEvent, value: string): void => {
         event.stopPropagation();
 
-        if (href.startsWith('command:')) {
-            const command = href.replace('command:', '');
+        if (value.startsWith('command:')) {
+            const command = value.replace('command:', '');
             this.commands.executeCommand(command);
+        } else if (value.startsWith('file:')) {
+            const uri = value.replace('file:', '');
+            open(this.openerService, new URI(CodeUri.file(uri).toString()));
         } else {
-            this.windowService.openNewWindow(href, { external: true });
+            this.windowService.openNewWindow(value, { external: true });
         }
     };
 
     protected parseLinkedText(text: string): LinkedTextItem[] {
         const result: LinkedTextItem[] = [];
 
-        const linkRegex = /\[([^\]]+)\]\(((?:https?:\/\/|command:)[^\)\s]+)(?: ("|')([^\3]+)(\3))?\)/gi;
+        const linkRegex = /\[([^\]]+)\]\(((?:https?:\/\/|command:|file:)[^\)\s]+)(?: (["'])(.+?)(\3))?\)/gi;
         let index = 0;
         let match: RegExpExecArray | null;
 

package/src/browser/widgets/select-component.tsx

@@ -325,7 +325,7 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
 
         return <div key="dropdown" className="theia-select-component-dropdown" style={{
             top: invert ? 'none' : this.state.dimensions.bottom,
-            bottom: invert ? shellArea.top + shellArea.height - this.state.dimensions.top : 'none',
+            bottom: invert ? shellArea.top - this.state.dimensions.top : 'none',
             left: this.alignLeft ? this.state.dimensions.left : 'none',
             right: this.alignLeft ? 'none' : shellArea.width - this.state.dimensions.right,
             width: Math.min(Math.max(this.state.dimensions.width, this.optimalWidth), maxWidth),

package/src/browser/widgets/widget.ts

@@ -24,6 +24,7 @@ import { KeyCode, KeysOrKeyCodes } from '../keyboard/keys';
 
 import PerfectScrollbar from 'perfect-scrollbar';
 import { PreviewableWidget } from '../widgets/previewable-widget';
+import { Slot } from '@phosphor/signaling';
 
 decorate(injectable(), Widget);
 decorate(unmanaged(), Widget, 0);
@@ -116,7 +117,7 @@ export class BaseWidget extends Widget implements PreviewableWidget {
     protected scrollBar?: PerfectScrollbar;
     protected scrollOptions?: PerfectScrollbar.Options;
 
-    constructor(options?: Widget.IOptions) {
+    constructor(@unmanaged() options?: Widget.IOptions) {
         super(options);
     }
 
@@ -364,23 +365,37 @@ function waitForVisible(widget: Widget, visible: boolean, attached?: boolean): P
     });
 }
 
+const pinnedTitles = new Map<Title<Widget>, [boolean, Slot<Widget, void>]>();
+
 export function isPinned(title: Title<Widget>): boolean {
     const pinnedState = !title.closable && title.className.includes(PINNED_CLASS);
     return pinnedState;
 }
 
-export function unpin(title: Title<Widget>): void {
-    title.closable = true;
-    title.className = title.className.replace(PINNED_CLASS, '').trim();
-}
-
 export function pin(title: Title<Widget>): void {
+    const l = () => {
+        pinnedTitles.delete(title);
+    };
+    pinnedTitles.set(title, [title.closable, l]);
+    title.owner.disposed.connect(l);
     title.closable = false;
     if (!title.className.includes(PINNED_CLASS)) {
         title.className += ` ${PINNED_CLASS}`;
     }
 }
 
+export function unpin(title: Title<Widget>): void {
+    const entry = pinnedTitles.get(title);
+    if (entry) {
+        title.owner.disposed.disconnect(entry[1]);
+        title.closable = entry[0];
+        pinnedTitles.delete(title);
+    } else {
+        title.closable = true;
+    }
+    title.className = title.className.replace(PINNED_CLASS, '').trim();
+}
+
 export function isLocked(title: Title<Widget>): boolean {
     return title.className.includes(LOCKED_CLASS);
 }

package/src/common/performance/stopwatch.ts

@@ -16,7 +16,7 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { inject, injectable } from 'inversify';
+import { inject, injectable, unmanaged } from 'inversify';
 import { ILogger, LogLevel } from '../logger';
 import { MaybePromise } from '../types';
 import { Measurement, MeasurementOptions, MeasurementResult } from './measurement';
@@ -58,7 +58,7 @@ export abstract class Stopwatch {
         return this.onDidAddMeasurementResultEmitter.event;
     }
 
-    constructor(protected readonly defaultLogOptions: LogOptions) {
+    constructor(@unmanaged() protected readonly defaultLogOptions: LogOptions) {
         if (!defaultLogOptions.defaultLogLevel) {
             defaultLogOptions.defaultLogLevel = DEFAULT_LOG_LEVEL;
         }

package/src/common/theme.ts

@@ -38,7 +38,7 @@ export interface ThemeChangeEvent {
 }
 
 export interface ThemeColor {
-    id: string;
+    readonly id: string;
 }
 
 export interface ThemeIcon {

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

@@ -23,7 +23,7 @@ import {
 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 { BrowserContextMenuAccess, BrowserContextMenuRenderer } from '../../browser/menu/browser-context-menu-renderer';
 
 export class ElectronContextMenuAccess extends ContextMenuAccess {
     constructor(readonly menuHandle: Promise<number>) {
@@ -115,7 +115,15 @@ export class ElectronContextMenuRenderer extends BrowserContextMenuRenderer {
             this.context.resetAltPressed();
             return new ElectronContextMenuAccess(menuHandle);
         } else {
-            return super.doRender(options);
+            const menuAccess = super.doRender(options);
+            const node = (menuAccess as BrowserContextMenuAccess).menu.node;
+            const topPanelHeight = document.getElementById('theia-top-panel')?.clientHeight ?? 0;
+            // ensure the context menu is not displayed outside of the main area
+            if (node.style.top && parseInt(node.style.top.substring(0, node.style.top.length - 2)) < topPanelHeight) {
+                node.style.top = `${topPanelHeight}px`;
+                node.style.maxHeight = `calc(${node.style.maxHeight} - ${topPanelHeight}px)`;
+            }
+            return menuAccess;
         }
     }
 

package/src/electron-browser/messaging/electron-local-ws-connection-source.ts

@@ -23,6 +23,11 @@ export function getLocalPort(): string | undefined {
     return params.get('localPort') ?? undefined;
 }
 
+export function getCurrentPort(): string | undefined {
+    const params = new URLSearchParams(location.search);
+    return params.get('port') ?? undefined;
+}
+
 @injectable()
 export class ElectronLocalWebSocketConnectionSource extends WebSocketConnectionSource {
 

package/src/electron-main/electron-main-application.ts

@@ -272,6 +272,7 @@ export class ElectronMainApplication {
     }
 
     setBackgroundColor(webContents: WebContents, backgroundColor: string): void {
+        BrowserWindow.fromWebContents(webContents)?.setBackgroundColor(backgroundColor);
         this.customBackgroundColor = backgroundColor;
         this.saveState(webContents);
     }
@@ -628,7 +629,7 @@ export class ElectronMainApplication {
                 y: bounds.y,
                 frame: this.useNativeWindowFrame,
                 screenLayout: this.getCurrentScreenLayout(),
-                backgroundColor: this.customBackgroundColor
+                backgroundColor: this.customBackgroundColor ?? electronWindow.getBackgroundColor()
             };
             this.electronStore.set('windowstate', options);
         } catch (e) {

package/src/electron-main/theia-electron-window.ts

@@ -186,10 +186,18 @@ export class TheiaElectronWindow {
     }
 
     protected restoreMaximizedState(): void {
-        if (this.options.isMaximized) {
-            this._window.maximize();
+        const restore = () => {
+            if (this.options.isMaximized) {
+                this._window.maximize();
+            } else {
+                this._window.unmaximize();
+            }
+        };
+
+        if (this._window.isVisible()) {
+            restore();
         } else {
-            this._window.unmaximize();
+            this._window.once('show', () => restore());
         }
     }