@theia/core 1.17.2 → 1.18.0-next.05f289b3

package/src/browser/index.ts

@@ -39,3 +39,4 @@ export * from './navigatable';
 export * from './diff-uris';
 export * from './core-preferences';
 export * from './view-container';
+export * from './breadcrumbs';

package/src/browser/label-provider.ts

@@ -23,15 +23,16 @@ import { Event, Emitter, Disposable, Path } from '../common';
 import { FrontendApplicationContribution } from './frontend-application';
 import { EnvVariablesServer } from '../common/env-variables/env-variables-protocol';
 import { ResourceLabelFormatter, ResourceLabelFormatting } from '../common/label-protocol';
+import { codicon } from './widgets';
 
 /**
  * @internal don't export it, use `LabelProvider.folderIcon` instead.
  */
-const DEFAULT_FOLDER_ICON = 'fa fa-folder';
+const DEFAULT_FOLDER_ICON = `${codicon('folder')} default-folder-icon`;
 /**
  * @internal don't export it, use `LabelProvider.fileIcon` instead.
  */
-const DEFAULT_FILE_ICON = 'fa fa-file';
+const DEFAULT_FILE_ICON = `${codicon('file')} default-file-icon`;
 
 /**
  * Internal folder icon class for the default (File Icons) theme.

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

@@ -18,7 +18,7 @@
 
 import { inject, injectable } from 'inversify';
 import { Menu } from '../widgets';
-import { ContextMenuAccess, ContextMenuRenderer, RenderContextMenuOptions } from '../context-menu-renderer';
+import { ContextMenuAccess, ContextMenuRenderer, coordinateFromAnchor, RenderContextMenuOptions } from '../context-menu-renderer';
 import { BrowserMainMenuFactory } from './browser-menu-plugin';
 
 export class BrowserContextMenuAccess extends ContextMenuAccess {
@@ -38,7 +38,7 @@ export class BrowserContextMenuRenderer extends ContextMenuRenderer {
 
     protected doRender({ menuPath, anchor, args, onHide }: RenderContextMenuOptions): BrowserContextMenuAccess {
         const contextMenu = this.menuFactory.createContextMenu(menuPath, args);
-        const { x, y } = anchor instanceof MouseEvent ? { x: anchor.clientX, y: anchor.clientY } : anchor!;
+        const { x, y } = coordinateFromAnchor(anchor);
         if (onHide) {
             contextMenu.aboutToClose.connect(() => onHide!());
         }

package/src/browser/navigatable-types.ts

@@ -0,0 +1,78 @@
+/********************************************************************************
+ * Copyright (C) 2021 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 URI from '../common/uri';
+import { MaybeArray } from '../common/types';
+import { Widget, BaseWidget } from './widgets';
+
+/**
+ * `Navigatable` provides an access to an URI of an underlying instance of `Resource`.
+ */
+export interface Navigatable {
+    /**
+     * Return an underlying resource URI.
+     */
+    getResourceUri(): URI | undefined;
+    /**
+     * Creates a new URI to which this navigatable should moved based on the given target resource URI.
+     */
+    createMoveToUri(resourceUri: URI): URI | undefined;
+}
+
+export namespace Navigatable {
+    export function is(arg: Object | undefined): arg is Navigatable {
+        return !!arg && 'getResourceUri' in arg && 'createMoveToUri' in arg;
+    }
+}
+
+export type NavigatableWidget = BaseWidget & Navigatable;
+export namespace NavigatableWidget {
+    export function is(arg: Object | undefined): arg is NavigatableWidget {
+        return arg instanceof BaseWidget && Navigatable.is(arg);
+    }
+    export function* getAffected<T extends Widget>(
+        widgets: Iterable<T>,
+        context: MaybeArray<URI>
+    ): IterableIterator<[URI, T & NavigatableWidget]> {
+        const uris = Array.isArray(context) ? context : [context];
+        return get(widgets, resourceUri => uris.some(uri => uri.isEqualOrParent(resourceUri)));
+    }
+    export function* get<T extends Widget>(
+        widgets: Iterable<T>,
+        filter: (resourceUri: URI) => boolean = () => true
+    ): IterableIterator<[URI, T & NavigatableWidget]> {
+        for (const widget of widgets) {
+            if (NavigatableWidget.is(widget)) {
+                const resourceUri = widget.getResourceUri();
+                if (resourceUri && filter(resourceUri)) {
+                    yield [resourceUri, widget];
+                }
+            }
+        }
+    }
+}
+
+export interface NavigatableWidgetOptions {
+    kind: 'navigatable',
+    uri: string,
+    counter?: number,
+}
+export namespace NavigatableWidgetOptions {
+    export function is(arg: Object | undefined): arg is NavigatableWidgetOptions {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return !!arg && 'kind' in arg && (arg as any).kind === 'navigatable';
+    }
+}

package/src/browser/navigatable.ts

@@ -15,68 +15,9 @@
  ********************************************************************************/
 
 import URI from '../common/uri';
-import { MaybeArray } from '../common/types';
-import { Widget, BaseWidget } from './widgets';
 import { WidgetOpenHandler, WidgetOpenerOptions } from './widget-open-handler';
-
-/**
- * `Navigatable` provides an access to an URI of an underlying instance of `Resource`.
- */
-export interface Navigatable {
-    /**
-     * Return an underlying resource URI.
-     */
-    getResourceUri(): URI | undefined;
-    /**
-     * Creates a new URI to which this navigatable should moved based on the given target resource URI.
-     */
-    createMoveToUri(resourceUri: URI): URI | undefined;
-}
-
-export namespace Navigatable {
-    export function is(arg: Object | undefined): arg is Navigatable {
-        return !!arg && 'getResourceUri' in arg && 'createMoveToUri' in arg;
-    }
-}
-
-export type NavigatableWidget = BaseWidget & Navigatable;
-export namespace NavigatableWidget {
-    export function is(arg: Object | undefined): arg is NavigatableWidget {
-        return arg instanceof BaseWidget && Navigatable.is(arg);
-    }
-    export function* getAffected<T extends Widget>(
-        widgets: Iterable<T>,
-        context: MaybeArray<URI>
-    ): IterableIterator<[URI, T & NavigatableWidget]> {
-        const uris = Array.isArray(context) ? context : [context];
-        return get(widgets, resourceUri => uris.some(uri => uri.isEqualOrParent(resourceUri)));
-    }
-    export function* get<T extends Widget>(
-        widgets: Iterable<T>,
-        filter: (resourceUri: URI) => boolean = () => true
-    ): IterableIterator<[URI, T & NavigatableWidget]> {
-        for (const widget of widgets) {
-            if (NavigatableWidget.is(widget)) {
-                const resourceUri = widget.getResourceUri();
-                if (resourceUri && filter(resourceUri)) {
-                    yield [resourceUri, widget];
-                }
-            }
-        }
-    }
-}
-
-export interface NavigatableWidgetOptions {
-    kind: 'navigatable',
-    uri: string,
-    counter?: number,
-}
-export namespace NavigatableWidgetOptions {
-    export function is(arg: Object | undefined): arg is NavigatableWidgetOptions {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return !!arg && 'kind' in arg && (arg as any).kind === 'navigatable';
-    }
-}
+import { NavigatableWidget, NavigatableWidgetOptions } from './navigatable-types';
+export * from './navigatable-types';
 
 export abstract class NavigatableWidgetOpenHandler<W extends NavigatableWidget> extends WidgetOpenHandler<W> {
 

package/src/browser/progress-status-bar-item.ts

@@ -73,7 +73,7 @@ export class ProgressStatusBarItem implements ProgressClient {
             this.statusBar.removeElement(this.id);
             return;
         }
-        const text = `$(refresh~spin) ${message}`;
+        const text = `$(codicon-sync~spin) ${message}`;
         this.statusBar.setElement(this.id, {
             text,
             alignment: StatusBarAlignment.LEFT,

package/src/browser/quick-input/quick-command-service.ts

@@ -22,6 +22,7 @@ import { CorePreferences } from '../core-preferences';
 import { QuickAccessContribution, QuickAccessProvider, QuickAccessRegistry } from './quick-access';
 import { filterItems, QuickPickItem, QuickPicks } from './quick-input-service';
 import { KeySequence } from '../keys';
+import { codiconArray } from '../widgets';
 
 export const quickCommand: Command = {
     id: 'workbench.action.showCommands'
@@ -139,7 +140,7 @@ export class QuickCommandService implements QuickAccessContribution, QuickAccess
     private getItemIconClasses(command: Command): string[] | undefined {
         const toggledHandler = this.commandRegistry.getToggledHandler(command.id);
         if (toggledHandler) {
-            return ['fa fa-check'];
+            return codiconArray('check');
         }
         return undefined;
     }

package/src/browser/quick-input/quick-input-service.ts

@@ -206,6 +206,10 @@ export interface QuickInputService {
         Promise<(O extends { canPickMany: true } ? T[] : T) | undefined>;
     showQuickPick<T extends QuickPickItem>(items: Array<T>, options?: QuickPickOptions<T>): Promise<T>;
     hide(): void;
+    /**
+     * Provides raw access to the quick pick controller.
+     */
+    createQuickPick<T extends QuickPickItem>(): QuickPick<T>;
 }
 
 /**

package/src/browser/shell/application-shell.ts

@@ -38,6 +38,7 @@ import { Emitter } from '../../common/event';
 import { waitForRevealed, waitForClosed } from '../widgets';
 import { CorePreferences } from '../core-preferences';
 import { environment } from '../../common';
+import { BreadcrumbsRendererFactory } from '../breadcrumbs/breadcrumbs-renderer';
 
 /** The class name added to ApplicationShell instances. */
 const APPLICATION_SHELL_CLASS = 'theia-ApplicationShell';
@@ -56,12 +57,14 @@ export type ApplicationShellLayoutVersion =
     /** view containers are introduced, backward compatible to 2.0 */
     3.0 |
     /** git history view is replaced by a more generic scm history view, backward compatible to 3.0 */
-    4.0;
+    4.0 |
+    /** Replace custom/font-awesome icons with codicons */
+    5.0;
 
 /**
  * When a version is increased, make sure to introduce a migration (ApplicationShellLayoutMigration) to this version.
  */
-export const applicationShellLayoutVersion: ApplicationShellLayoutVersion = 4.0;
+export const applicationShellLayoutVersion: ApplicationShellLayoutVersion = 5.0;
 
 export const ApplicationShellOptions = Symbol('ApplicationShellOptions');
 export const DockPanelRendererFactory = Symbol('DockPanelRendererFactory');
@@ -80,19 +83,24 @@ export class DockPanelRenderer implements DockLayout.IRenderer {
     constructor(
         @inject(TabBarRendererFactory) protected readonly tabBarRendererFactory: () => TabBarRenderer,
         @inject(TabBarToolbarRegistry) protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
-        @inject(TabBarToolbarFactory) protected readonly tabBarToolbarFactory: () => TabBarToolbar
+        @inject(TabBarToolbarFactory) protected readonly tabBarToolbarFactory: () => TabBarToolbar,
+        @inject(BreadcrumbsRendererFactory) protected readonly breadcrumbsRendererFactory: BreadcrumbsRendererFactory,
     ) { }
 
     createTabBar(): TabBar<Widget> {
         const renderer = this.tabBarRendererFactory();
-        const tabBar = new ToolbarAwareTabBar(this.tabBarToolbarRegistry, this.tabBarToolbarFactory, {
-            renderer,
-            // Scroll bar options
-            handlers: ['drag-thumb', 'keyboard', 'wheel', 'touch'],
-            useBothWheelAxes: true,
-            scrollXMarginOffset: 4,
-            suppressScrollY: true
-        });
+        const tabBar = new ToolbarAwareTabBar(
+            this.tabBarToolbarRegistry,
+            this.tabBarToolbarFactory,
+            this.breadcrumbsRendererFactory,
+            {
+                renderer,
+                // Scroll bar options
+                handlers: ['drag-thumb', 'keyboard', 'wheel', 'touch'],
+                useBothWheelAxes: true,
+                scrollXMarginOffset: 4,
+                suppressScrollY: true
+            });
         this.tabBarClasses.forEach(c => tabBar.addClass(c));
         renderer.tabBar = tabBar;
         tabBar.disposed.connect(() => renderer.dispose());
@@ -256,11 +264,11 @@ export class ApplicationShell extends Widget {
 
         if (!environment.electron.is()) {
             this.corePreferences.ready.then(() => {
-                this.setTopPanelVisibily(this.corePreferences['window.menuBarVisibility']);
+                this.setTopPanelVisibility(this.corePreferences['window.menuBarVisibility']);
             });
             this.corePreferences.onPreferenceChanged(preference => {
                 if (preference.preferenceName === 'window.menuBarVisibility') {
-                    this.setTopPanelVisibily(preference.newValue);
+                    this.setTopPanelVisibility(preference.newValue);
                 }
             });
         }
@@ -293,7 +301,7 @@ export class ApplicationShell extends Widget {
         this.activeChanged.connect(updateFocusContextKeys);
     }
 
-    protected setTopPanelVisibily(preference: string): void {
+    protected setTopPanelVisibility(preference: string): void {
         const hiddenPreferences = ['compact', 'hidden'];
         this.topPanel.setHidden(hiddenPreferences.includes(preference));
     }
@@ -1365,7 +1373,7 @@ export class ApplicationShell extends Widget {
             this.statusBar.removeElement(BOTTOM_PANEL_TOGGLE_ID);
         } else {
             const element: StatusBarEntry = {
-                text: '$(window-maximize)',
+                text: '$(codicon-window)',
                 alignment: StatusBarAlignment.RIGHT,
                 tooltip: 'Toggle Bottom Panel',
                 command: 'core.toggle.bottom.panel',

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

@@ -17,7 +17,7 @@
 import debounce = require('lodash.debounce');
 import * as React from 'react';
 import { inject, injectable, named } from 'inversify';
-import { Widget, ReactWidget } from '../widgets';
+import { Widget, ReactWidget, codicon, ACTION_ITEM } from '../widgets';
 import { LabelParser, LabelIcon } from '../label-parser';
 import { ContributionProvider } from '../../common/contribution-provider';
 import { FrontendApplicationContribution } from '../frontend-application';
@@ -369,8 +369,9 @@ export class TabBarToolbar extends ReactWidget {
             }
         }
         const command = this.commands.getCommand(item.command);
-        const iconClass = (typeof item.icon === 'function' && item.icon()) || item.icon || (command && command.iconClass);
+        let iconClass = (typeof item.icon === 'function' && item.icon()) || item.icon as string || (command && command.iconClass);
         if (iconClass) {
+            iconClass += ` ${ACTION_ITEM}`;
             classNames.push(iconClass);
         }
         const tooltip = item.tooltip || (command && command.label);
@@ -402,7 +403,7 @@ export class TabBarToolbar extends ReactWidget {
 
     protected renderMore(): React.ReactNode {
         return !!this.more.size && <div key='__more__' className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled'}>
-            <div id='__more__' className='fa fa-ellipsis-h' onClick={this.showMoreContextMenu} title='More Actions...' />
+            <div id='__more__' className={codicon('ellipsis', true)} onClick={this.showMoreContextMenu} title='More Actions...' />
         </div>;
     }
 

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

@@ -20,7 +20,7 @@ import { VirtualElement, h, VirtualDOM, ElementInlineStyle } from '@phosphor/vir
 import { Disposable, DisposableCollection, MenuPath, notEmpty } from '../../common';
 import { ContextMenuRenderer } from '../context-menu-renderer';
 import { Signal, Slot } from '@phosphor/signaling';
-import { Message } from '@phosphor/messaging';
+import { Message, MessageLoop } from '@phosphor/messaging';
 import { ArrayExt } from '@phosphor/algorithm';
 import { ElementExt } from '@phosphor/domutils';
 import { TabBarToolbarRegistry, TabBarToolbar } from './tab-bar-toolbar';
@@ -28,6 +28,8 @@ import { TheiaDockPanel, MAIN_AREA_ID, BOTTOM_AREA_ID } from './theia-dock-panel
 import { WidgetDecoration } from '../widget-decoration';
 import { TabBarDecoratorService } from './tab-bar-decorator';
 import { IconThemeService } from '../icon-theme-service';
+import { BreadcrumbsRenderer, BreadcrumbsRendererFactory } from '../breadcrumbs/breadcrumbs-renderer';
+import { NavigatableWidget } from '../navigatable-types';
 
 /** The class name added to hidden content nodes, which are required to render vertical side bars. */
 const HIDDEN_CONTENT_CLASS = 'theia-TabBar-hidden-content';
@@ -576,22 +578,38 @@ export class ScrollableTabBar extends TabBar<Widget> {
  *
  * +-------------------------+-----------------+
  * |[TAB_0][TAB_1][TAB_2][TAB|         Toolbar |
- * +-------------Scrollable--+-None-Scrollable-+
+ * +-------------Scrollable--+-Non-Scrollable-+
  *
  */
 export class ToolbarAwareTabBar extends ScrollableTabBar {
 
-    protected contentContainer: HTMLElement | undefined;
+    protected contentContainer: HTMLElement;
     protected toolbar: TabBarToolbar | undefined;
+    protected breadcrumbsContainer: HTMLElement;
+    protected readonly breadcrumbsRenderer: BreadcrumbsRenderer;
+    protected topRow: HTMLElement;
 
     constructor(
         protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
         protected readonly tabBarToolbarFactory: () => TabBarToolbar,
-        protected readonly options?: TabBar.IOptions<Widget> & PerfectScrollbar.Options) {
-
+        protected readonly breadcrumbsRendererFactory: BreadcrumbsRendererFactory,
+        protected readonly options?: TabBar.IOptions<Widget> & PerfectScrollbar.Options,
+    ) {
         super(options);
+        this.breadcrumbsRenderer = this.breadcrumbsRendererFactory();
         this.rewireDOM();
         this.toDispose.push(this.tabBarToolbarRegistry.onDidChange(() => this.update()));
+        this.toDispose.push(this.breadcrumbsRenderer);
+        this.toDispose.push(this.breadcrumbsRenderer.onDidChangeActiveState(active => {
+            this.node.classList.toggle('theia-tabBar-multirow', active);
+            if (this.parent) {
+                MessageLoop.sendMessage(this.parent, new Message('fit-request'));
+            }
+        }));
+        this.node.classList.toggle('theia-tabBar-multirow', this.breadcrumbsRenderer.active);
+        const handler = () => this.updateBreadcrumbs();
+        this.currentChanged.connect(handler);
+        this.toDispose.push(Disposable.create(() => this.currentChanged.disconnect(handler)));
     }
 
     /**
@@ -612,12 +630,22 @@ export class ToolbarAwareTabBar extends ScrollableTabBar {
         return this.node.getElementsByClassName(ToolbarAwareTabBar.Styles.TAB_BAR_CONTENT_CONTAINER)[0] as HTMLElement;
     }
 
+    protected async updateBreadcrumbs(): Promise<void> {
+        const current = this.currentTitle?.owner;
+        const uri = NavigatableWidget.is(current) ? current.getResourceUri() : undefined;
+        await this.breadcrumbsRenderer.refresh(uri);
+    }
+
     protected onAfterAttach(msg: Message): void {
         if (this.toolbar) {
             if (this.toolbar.isAttached) {
                 Widget.detach(this.toolbar);
             }
-            Widget.attach(this.toolbar, this.node);
+            Widget.attach(this.toolbar, this.topRow);
+            if (this.breadcrumbsContainer) {
+                this.node.appendChild(this.breadcrumbsContainer);
+            }
+            this.breadcrumbsRenderer?.refresh();
         }
         super.onAfterAttach(msg);
     }
@@ -660,16 +688,22 @@ export class ToolbarAwareTabBar extends ScrollableTabBar {
     protected rewireDOM(): void {
         const contentNode = this.node.getElementsByClassName(ToolbarAwareTabBar.Styles.TAB_BAR_CONTENT)[0];
         if (!contentNode) {
-            throw new Error("'this.node' does not have the content as a direct children with class name 'p-TabBar-content'.");
+            throw new Error("'this.node' does not have the content as a direct child with class name 'p-TabBar-content'.");
         }
         this.node.removeChild(contentNode);
+        this.topRow = document.createElement('div');
+        this.topRow.classList.add('theia-tabBar-tab-row');
         this.contentContainer = document.createElement('div');
         this.contentContainer.classList.add(ToolbarAwareTabBar.Styles.TAB_BAR_CONTENT_CONTAINER);
         this.contentContainer.appendChild(contentNode);
-        this.node.appendChild(this.contentContainer);
+        this.topRow.appendChild(this.contentContainer);
+        this.node.appendChild(this.topRow);
         this.toolbar = this.tabBarToolbarFactory();
+        this.breadcrumbsContainer = document.createElement('div');
+        this.breadcrumbsContainer.classList.add('theia-tabBar-breadcrumb-row');
+        this.breadcrumbsContainer.appendChild(this.breadcrumbsRenderer.host);
+        this.node.appendChild(this.breadcrumbsContainer);
     }
-
 }
 
 export namespace ToolbarAwareTabBar {