@theia/core 1.25.0-next.9 → 1.25.0

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

@@ -0,0 +1,340 @@
+// *****************************************************************************
+// Copyright (C) 2022 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 * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as DOMPurify from 'dompurify';
+import { codicon } from './widget';
+import { measureTextHeight, measureTextWidth } from '../browser';
+
+import '../../../src/browser/style/select-component.css';
+
+export interface SelectOption {
+    value?: string
+    label?: string
+    separator?: boolean
+    disabled?: boolean
+    detail?: string
+    description?: string
+    markdown?: boolean
+}
+
+export interface SelectComponentProps {
+    options: SelectOption[]
+    value?: string | number
+    onChange?: (option: SelectOption, index: number) => void
+}
+
+export interface SelectComponentDropdownDimensions {
+    top: number
+    left: number
+    width: number
+    parentHeight: number
+};
+
+export interface SelectComponentState {
+    dimensions?: SelectComponentDropdownDimensions
+    selected: number
+    original: number
+    hover: number
+}
+
+export const SELECT_COMPONENT_CONTAINER = 'select-component-container';
+
+export class SelectComponent extends React.Component<SelectComponentProps, SelectComponentState> {
+    protected dropdownElement: HTMLElement;
+    protected fieldRef = React.createRef<HTMLDivElement>();
+    protected mountedListeners: Map<string, EventListenerOrEventListenerObject> = new Map();
+    protected optimalWidth = 0;
+    protected optimalHeight = 0;
+
+    constructor(props: SelectComponentProps) {
+        super(props);
+        let selected = 0;
+        if (typeof props.value === 'number') {
+            selected = props.value;
+        } else if (typeof props.value === 'string') {
+            selected = Math.max(props.options.findIndex(e => e.value === props.value), 0);
+        }
+        this.state = {
+            selected,
+            original: selected,
+            hover: selected
+        };
+
+        let list = document.getElementById(SELECT_COMPONENT_CONTAINER);
+        if (!list) {
+            list = document.createElement('div');
+            list.id = SELECT_COMPONENT_CONTAINER;
+            document.body.appendChild(list);
+        }
+        this.dropdownElement = list;
+    }
+
+    get value(): string | number | undefined {
+        return this.props.options[this.state.selected].value ?? this.state.selected;
+    }
+
+    set value(value: string | number | undefined) {
+        let index = -1;
+        if (typeof value === 'number') {
+            index = value;
+        } else if (typeof value === 'string') {
+            index = this.props.options.findIndex(e => e.value === value);
+        }
+        if (index >= 0) {
+            this.setState({
+                selected: index,
+                original: index,
+                hover: index
+            });
+        }
+    }
+
+    protected getOptimalWidth(): number {
+        const textWidth = measureTextWidth(this.props.options.map(e => e.label || e.value || '' + (e.detail || '')));
+        return Math.ceil(textWidth + 16);
+    }
+
+    protected getOptimalHeight(maxWidth?: number): number {
+        const firstLine = this.props.options.find(e => e.label || e.value || e.detail);
+        if (!firstLine) {
+            return 0;
+        }
+        if (maxWidth) {
+            maxWidth = Math.ceil(maxWidth) + 10; // Increase width by 10 due to side padding
+        }
+        const descriptionHeight = measureTextHeight(this.props.options.map(e => e.description || ''), { maxWidth: `${maxWidth}px` }) + 18;
+        const singleLineHeight = measureTextHeight(firstLine.label || firstLine.value || firstLine.detail || '') + 6;
+        const optimal = descriptionHeight + singleLineHeight * this.props.options.length;
+        return optimal + 20; // Just to be safe, add another 20 pixels here
+    }
+
+    protected attachListeners(): void {
+        const hide = () => {
+            this.hide();
+        };
+        this.mountedListeners.set('scroll', hide);
+        this.mountedListeners.set('wheel', hide);
+
+        let parent = this.fieldRef.current?.parentElement;
+        while (parent) {
+            // Workaround for perfect scrollbar, since using `overflow: hidden`
+            // neither triggers the `scroll`, `wheel` nor `blur` event
+            if (parent.classList.contains('ps')) {
+                parent.addEventListener('ps-scroll-y', hide);
+            }
+            parent = parent.parentElement;
+        }
+
+        for (const [key, listener] of this.mountedListeners.entries()) {
+            window.addEventListener(key, listener);
+        }
+    }
+
+    override componentWillUnmount(): void {
+        if (this.mountedListeners.size > 0) {
+            const eventListener = this.mountedListeners.get('scroll')!;
+            let parent = this.fieldRef.current?.parentElement;
+            while (parent) {
+                parent.removeEventListener('ps-scroll-y', eventListener);
+                parent = parent.parentElement;
+            }
+            for (const [key, listener] of this.mountedListeners.entries()) {
+                window.removeEventListener(key, listener);
+            }
+        }
+    }
+
+    override render(): React.ReactNode {
+        const { options } = this.props;
+        let { selected } = this.state;
+        while (options[selected]?.separator) {
+            selected = (selected + 1) % this.props.options.length;
+        }
+        const selectedItemLabel = options[selected].label ?? options[selected].value;
+        return <>
+            <div
+                key="select-component"
+                ref={this.fieldRef}
+                tabIndex={0}
+                className="theia-select-component"
+                onClick={e => this.handleClickEvent(e)}
+                onBlur={() => this.hide()}
+                onKeyDown={e => this.handleKeypress(e)}
+            >
+                <div key="label" className="theia-select-component-label">{selectedItemLabel}</div>
+                <div key="icon" className={`theia-select-component-chevron ${codicon('chevron-down')}`} />
+            </div>
+            {ReactDOM.createPortal(this.renderDropdown(), this.dropdownElement)}
+        </>;
+    }
+
+    protected handleKeypress(ev: React.KeyboardEvent<HTMLDivElement>): void {
+        if (!this.fieldRef.current) {
+            return;
+        }
+        if (ev.key === 'ArrowUp') {
+            let selected = this.state.selected;
+            if (selected <= 0) {
+                selected = this.props.options.length - 1;
+            } else {
+                selected--;
+            }
+            this.setState({
+                selected,
+                hover: selected
+            });
+        } else if (ev.key === 'ArrowDown') {
+            if (this.state.dimensions) {
+                const selected = (this.state.selected + 1) % this.props.options.length;
+                this.setState({
+                    selected,
+                    hover: selected
+                });
+            } else {
+                this.toggleVisibility();
+                this.setState({
+                    hover: 0,
+                    selected: 0
+                });
+            }
+        } else if (ev.key === 'Enter') {
+            if (!this.state.dimensions) {
+                this.toggleVisibility();
+            } else {
+                const selected = this.state.selected;
+                this.selectOption(selected, this.props.options[selected]);
+            }
+        } else if (ev.key === 'Escape' || ev.key === 'Tab') {
+            this.hide();
+        }
+        ev.stopPropagation();
+        ev.nativeEvent.stopImmediatePropagation();
+    }
+
+    protected handleClickEvent(event: React.MouseEvent<HTMLElement>): void {
+        this.toggleVisibility();
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+    }
+
+    protected toggleVisibility(): void {
+        if (!this.fieldRef.current) {
+            return;
+        }
+        if (!this.state.dimensions) {
+            const rect = this.fieldRef.current.getBoundingClientRect();
+            this.setState({
+                dimensions: {
+                    top: rect.top + rect.height,
+                    left: rect.left,
+                    width: rect.width,
+                    parentHeight: rect.height
+                },
+            });
+        } else {
+            this.hide();
+        }
+    }
+
+    protected hide(index?: number): void {
+        const selectedIndex = index === undefined ? this.state.original : index;
+        this.setState({
+            dimensions: undefined,
+            selected: selectedIndex,
+            original: selectedIndex,
+            hover: selectedIndex
+        });
+    }
+
+    protected renderDropdown(): React.ReactNode {
+        if (!this.state.dimensions) {
+            return;
+        }
+        if (this.mountedListeners.size === 0) {
+            // Only attach our listeners once we render our dropdown menu
+            this.attachListeners();
+            // We can now also calculate the optimal width
+            this.optimalWidth = this.getOptimalWidth();
+            this.optimalHeight = this.getOptimalHeight(Math.max(this.state.dimensions.width, this.optimalWidth));
+        }
+        const clientRect = document.getElementById('theia-app-shell')!.getBoundingClientRect();
+        const invert = this.optimalHeight > clientRect.height - this.state.dimensions.top;
+        const { options } = this.props;
+        const { hover } = this.state;
+        const description = options[hover].description;
+        const markdown = options[hover].markdown;
+        const items = options.map((item, i) => this.renderOption(i, item));
+        if (description) {
+            let descriptionNode: React.ReactNode | undefined;
+            const className = 'theia-select-component-description';
+            if (markdown) {
+                descriptionNode = <div key="description" className={className}
+                    dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(description) }} />; // eslint-disable-line react/no-danger
+            } else {
+                descriptionNode = <div key="description" className={className}>
+                    {description}
+                </div>;
+            }
+            if (invert) {
+                items.unshift(descriptionNode);
+            } else {
+                items.push(descriptionNode);
+            }
+        }
+        const calculatedWidth = Math.max(this.state.dimensions.width, this.optimalWidth);
+        const maxWidth = clientRect.width - this.state.dimensions.left;
+        return <div key="dropdown" className="theia-select-component-dropdown" style={{
+            top: invert ? 'none' : this.state.dimensions.top,
+            bottom: invert ? clientRect.height - this.state.dimensions.top + this.state.dimensions.parentHeight : 'none',
+            left: this.state.dimensions.left,
+            width: Math.min(calculatedWidth, maxWidth),
+            position: 'absolute'
+        }}>
+            {items}
+        </div>;
+    }
+
+    protected renderOption(index: number, option: SelectOption): React.ReactNode {
+        if (option.separator) {
+            return <div key={index} className="theia-select-component-separator" />;
+        }
+        const selected = this.state.hover;
+        return (
+            <div
+                key={index}
+                className={`theia-select-component-option${index === selected ? ' selected' : ''}`}
+                onMouseOver={() => {
+                    this.setState({
+                        hover: index
+                    });
+                }}
+                onMouseDown={() => {
+                    this.selectOption(index, option);
+                }}
+            >
+                <div key="value" className="theia-select-component-option-value">{option.label ?? option.value}</div>
+                {option.detail && <div key="detail" className="theia-select-component-option-detail">{option.detail}</div>}
+            </div>
+        );
+    }
+
+    protected selectOption(index: number, option: SelectOption): void {
+        this.props.onChange?.(option, index);
+        this.hide(index);
+    }
+}

package/src/common/application-protocol.ts

@@ -23,6 +23,9 @@ export const ApplicationServer = Symbol('ApplicationServer');
 export interface ApplicationServer {
     getExtensionsInfos(): Promise<ExtensionInfo[]>;
     getApplicationInfo(): Promise<ApplicationInfo | undefined>;
+    /**
+     * @deprecated since 1.25.0. Use `OS.backend.type()` instead.
+     */
     getBackendOS(): Promise<OS.Type>;
 }
 

package/src/common/disposable.spec.ts

@@ -0,0 +1,30 @@
+// *****************************************************************************
+// 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 { expect } from 'chai';
+import { DisposableCollection, Disposable } from './disposable';
+
+describe('Disposables', () => {
+    /* eslint-disable no-unused-expressions */
+    it('Is safe to use Disposable.NULL', () => {
+        const collectionA = new DisposableCollection(Disposable.NULL);
+        const collectionB = new DisposableCollection(Disposable.NULL);
+        expect(!collectionA.disposed && !collectionB.disposed, 'Neither should be disposed before either is disposed.').to.be.true;
+        collectionA.dispose();
+        expect(collectionA.disposed, 'A should be disposed after being disposed.').to.be.true;
+        expect(collectionB.disposed, 'B should not be disposed because A was disposed.').to.be.false;
+    });
+});

package/src/common/disposable.ts

@@ -28,13 +28,24 @@ export namespace Disposable {
         return !!arg && typeof arg === 'object' && 'dispose' in arg && typeof arg['dispose'] === 'function';
     }
     export function create(func: () => void): Disposable {
-        return {
-            dispose: func
-        };
+        return { dispose: func };
     }
-    export const NULL = create(() => { });
+    /** Always provides a reference to a new disposable. */
+    export declare const NULL: Disposable;
 }
 
+/**
+ * Ensures that every reference to {@link Disposable.NULL} returns a new object,
+ * as sharing a disposable between multiple {@link DisposableCollection} can have unexpected side effects
+ */
+Object.defineProperty(Disposable, 'NULL', {
+    configurable: false,
+    enumerable: true,
+    get(): Disposable {
+        return { dispose: () => { } };
+    }
+});
+
 export class DisposableCollection implements Disposable {
 
     protected readonly disposables: Disposable[] = [];

package/src/common/i18n/localization.ts

@@ -20,16 +20,19 @@ export const AsyncLocalizationProvider = Symbol('AsyncLocalizationProvider');
 export interface AsyncLocalizationProvider {
     getCurrentLanguage(): Promise<string>
     setCurrentLanguage(languageId: string): Promise<void>
-    getAvailableLanguages(): Promise<string[]>
+    getAvailableLanguages(): Promise<LanguageInfo[]>
     loadLocalization(languageId: string): Promise<Localization>
 }
 
-export interface Localization {
+export interface Localization extends LanguageInfo {
+    translations: { [key: string]: string };
+}
+
+export interface LanguageInfo {
     languageId: string;
     languageName?: string;
     languagePack?: boolean;
     localizedLanguageName?: string;
-    translations: { [key: string]: string };
 }
 
 export type FormatType = string | number | boolean | undefined;

package/src/common/json-schema.ts

@@ -47,6 +47,7 @@ export interface IJSONSchema {
     maxProperties?: number;
     dependencies?: IJSONSchemaMap | { [prop: string]: string[] };
     items?: IJSONSchema | IJSONSchema[];
+    prefixItems?: IJSONSchema[];
     minItems?: number;
     maxItems?: number;
     uniqueItems?: boolean;

package/src/common/nls.ts

@@ -71,7 +71,8 @@ class LocalizationKeyProvider {
     private data = this.buildData();
 
     get(defaultValue: string): string | undefined {
-        return this.data.get(Localization.normalize(defaultValue.toLowerCase()));
+        const normalized = Localization.normalize(defaultValue);
+        return this.data.get(normalized) || this.data.get(normalized.toUpperCase());
     }
 
     /**
@@ -86,16 +87,36 @@ class LocalizationKeyProvider {
         const keys: NlsKeys = bundles.keys;
         const messages: Record<string, string[]> = bundles.messages;
         const data = new Map<string, string>();
+        const keysAndMessages = this.buildKeyMessageTuples(keys, messages);
+        for (const { key, message } of keysAndMessages) {
+            data.set(message, key);
+        }
+        // Second pass adds each message again in upper case, if the message doesn't already exist in upper case
+        // The second pass is needed to not accidentally override any translations which actually use the upper case message
+        for (const { key, message } of keysAndMessages) {
+            const upperMessage = message.toUpperCase();
+            if (!data.has(upperMessage)) {
+                data.set(upperMessage, key);
+            }
+        }
+        return data;
+    }
+
+    private buildKeyMessageTuples(keys: NlsKeys, messages: Record<string, string[]>): { key: string, message: string }[] {
+        const list: { key: string, message: string }[] = [];
         for (const [fileKey, messageBundle] of Object.entries(messages)) {
             const keyBundle = keys[fileKey];
             for (let i = 0; i < messageBundle.length; i++) {
-                const message = Localization.normalize(messageBundle[i]).toLowerCase();
+                const message = Localization.normalize(messageBundle[i]);
                 const key = keyBundle[i];
                 const localizationKey = this.buildKey(typeof key === 'string' ? key : key.key, fileKey);
-                data.set(message, localizationKey);
+                list.push({
+                    key: localizationKey,
+                    message
+                });
             }
         }
-        return data;
+        return list;
     }
 
     private buildKey(key: string, filepath: string): string {

package/src/common/os.ts

@@ -62,4 +62,10 @@ export namespace OS {
         return Type.Linux;
     }
 
+    export const backend = {
+        type,
+        isWindows,
+        isOSX
+    };
+
 }

package/src/common/path.spec.ts

@@ -357,6 +357,50 @@ describe('Path', () => {
 
     });
 
+    describe('fsPath#windows', () => {
+        it('should retain windows style path', () => {
+            const path = 'C:\\path\\to\\file.txt';
+            expect(new Path(path).fsPath(Path.Format.Windows)).eq(path);
+        });
+
+        it('should create windows style path with slashes', () => {
+            const path = 'C:/path/to/file.txt';
+            const expected = 'C:\\path\\to\\file.txt';
+            expect(new Path(path).fsPath(Path.Format.Windows)).eq(expected);
+        });
+
+        it('should append slashes to drive letter', () => {
+            const path = 'C:';
+            const expected = 'C:\\';
+            expect(new Path(path).fsPath(Path.Format.Windows)).eq(expected);
+        });
+
+        it('should create windows style path from posix', () => {
+            const path = '/path/to/file.txt';
+            const expected = '\\path\\to\\file.txt';
+            expect(new Path(path).fsPath(Path.Format.Windows)).eq(expected);
+        });
+    });
+
+    describe('fsPath#posix', () => {
+        it('should retain posix style path', () => {
+            const path = '/path/to/file.txt';
+            expect(new Path(path).fsPath(Path.Format.Posix)).eq(path);
+        });
+
+        it('should create posix style path from windows with slashes', () => {
+            const path = 'C:/path/to/file.txt';
+            const expected = '/c:/path/to/file.txt';
+            expect(new Path(path).fsPath(Path.Format.Posix)).eq(expected);
+        });
+
+        it('should create posix style path from windows', () => {
+            const path = 'C:\\path\\to\\file.txt';
+            const expected = '/c:/path/to/file.txt';
+            expect(new Path(path).fsPath(Path.Format.Posix)).eq(expected);
+        });
+    });
+
     function checkResolution(original: string, segments: string[], expected: string | undefined): void {
         it(`should resolve ${original} and ${segments.join(', ')} to ${expected}`, () => {
             const start = new Path(original);

package/src/common/path.ts

@@ -31,6 +31,9 @@
  * "  /c: / home/user/dir / file  .txt "
  * └──────┴───────────────┴──────┴─────┘
  */
+
+import { OS } from './os';
+
 export class Path {
     static separator: '/' = '/';
 
@@ -70,6 +73,22 @@ export class Path {
         return path.split(/[\\]/).join(Path.separator);
     }
 
+    /**
+     * Creates a windows path from the given path string.
+     * A windows path uses an upper case drive letter and backwards slashes.
+     * @param path The input path
+     * @returns Windows style path
+     */
+    static windowsPath(path: string): string {
+        const offset = path.charAt(0) === '/' ? 1 : 0;
+        if (path.charAt(offset + 1) === ':') {
+            const driveLetter = path.charAt(offset).toUpperCase();
+            const substring = path.substring(offset + 2).replace(/\//g, '\\');
+            return `${driveLetter}:${substring || '\\'}`;
+        }
+        return path.replace(/\//g, '\\');
+    }
+
     /**
      * Tildify path, replacing `home` with `~` if user's `home` is present at the beginning of the path.
      * This is a non-operation for Windows.
@@ -230,6 +249,20 @@ export class Path {
         return this.raw;
     }
 
+    /**
+     * Converts the current path into a file system path.
+     * @param format Determines the format of the path.
+     * If `undefined`, the format will be determined by the `OS.backend.type` value.
+     * @returns A file system path.
+     */
+    fsPath(format?: Path.Format): string {
+        if (format === Path.Format.Windows || (format === undefined && OS.backend.isWindows)) {
+            return Path.windowsPath(this.raw);
+        } else {
+            return this.raw;
+        }
+    }
+
     relative(path: Path): Path | undefined {
         if (this.raw === path.raw) {
             return new Path('');
@@ -292,3 +325,10 @@ export class Path {
         return new Path((this.isAbsolute ? '/' : '') + resultArray.join('/') + (trailingSlash ? '/' : ''));
     }
 }
+
+export namespace Path {
+    export enum Format {
+        Posix,
+        Windows
+    }
+}

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

@@ -14,22 +14,6 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
 
-// *****************************************************************************
-// Copyright (C) 2021 SAP SE or an SAP affiliate company 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 URI from './uri';
 import * as fuzzy from 'fuzzy';
 import { Event } from './event';
@@ -295,7 +279,7 @@ export interface QuickInputService {
     input(options?: InputOptions, token?: CancellationToken): Promise<string | undefined>;
     pick<T extends QuickPickItem, O extends PickOptions<T>>(picks: Promise<T[]> | 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>;
+    showQuickPick<T extends QuickPickItem>(items: Array<T | QuickPickSeparator>, options?: QuickPickOptions<T>): Promise<T | undefined>;
     hide(): void;
     /**
      * Provides raw access to the quick pick controller.

package/src/common/selection-service.ts

@@ -13,16 +13,22 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { injectable } from 'inversify';
 import { Emitter, Event } from '../common/event';
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
+/**
+ * `SelectionProvider` is implemented by services to notify listeners about selection changes.
+ */
 export interface SelectionProvider<T> {
     onSelectionChanged: Event<T | undefined>;
 }
 
+/**
+ * Singleton service that is used to share the current selection globally in a Theia application.
+ * On each change of selection, subscribers are notified and receive the updated selection object.
+ */
 @injectable()
 export class SelectionService implements SelectionProvider<Object | undefined> {