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

package/src/browser/style/tree.css

@@ -73,7 +73,6 @@
 }
 
 .theia-ExpansionToggle.theia-mod-busy {
-    background: var(--theia-icon-loading) center center no-repeat;
     animation: theia-spin 1.25s linear infinite;
 }
 

package/src/browser/style/view-container.css

@@ -75,10 +75,19 @@
 }
 
 .theia-view-container .part > .header .label {
+    flex: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.theia-view-container .part > .header .description {
     flex: 1;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    padding-left: var(--theia-ui-padding);
+    text-transform: none;
+    opacity: 0.6;
 }
 
 .theia-view-container .part > .body {

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

@@ -20,7 +20,9 @@ import { Disposable, MenuPath, SelectionService } from '../../common';
 import { Key, KeyCode, KeyModifier } from '../keyboard/keys';
 import { ContextMenuRenderer } from '../context-menu-renderer';
 import { StatefulWidget } from '../shell';
-import { EXPANSION_TOGGLE_CLASS, SELECTED_CLASS, COLLAPSED_CLASS, FOCUS_CLASS, BUSY_CLASS, CODICON_TREE_ITEM_CLASSES, Widget, UnsafeWidgetUtilities } from '../widgets';
+import {
+    EXPANSION_TOGGLE_CLASS, SELECTED_CLASS, COLLAPSED_CLASS, FOCUS_CLASS, BUSY_CLASS, CODICON_TREE_ITEM_CLASSES, CODICON_LOADING_CLASSES, Widget, UnsafeWidgetUtilities
+} from '../widgets';
 import { TreeNode, CompositeTreeNode } from './tree';
 import { TreeModel } from './tree-model';
 import { ExpandableTreeNode } from './tree-expansion';
@@ -564,7 +566,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             classes.push(COLLAPSED_CLASS);
         }
         if (node.busy) {
-            classes.push(BUSY_CLASS);
+            classes.push(BUSY_CLASS, ...CODICON_LOADING_CLASSES);
         } else {
             classes.push(...CODICON_TREE_ITEM_CLASSES);
         }

package/src/browser/view-container.ts

@@ -47,6 +47,17 @@ export class ViewContainerIdentifier {
     progressLocationId?: string;
 }
 
+export interface DescriptionWidget {
+    description: string;
+    onDidChangeDescription: Emitter<void>;
+}
+
+export namespace DescriptionWidget {
+    export function is(arg: Object | undefined): arg is DescriptionWidget {
+        return !!arg && typeof arg === 'object' && 'onDidChangeDescription' in arg;
+    }
+}
+
 /**
  * A view container holds an arbitrary number of widgets inside a split panel.
  * Each widget is wrapped in a _part_ that displays the widget title and toolbar
@@ -704,6 +715,8 @@ export class ViewContainerPart extends BaseWidget {
     readonly onTitleChanged = this.onTitleChangedEmitter.event;
     protected readonly onDidFocusEmitter = new Emitter<this>();
     readonly onDidFocus = this.onDidFocusEmitter.event;
+    protected readonly onDidChangeDescriptionEmitter = new Emitter<void>();
+    readonly onDidChangeDescription = this.onDidChangeDescriptionEmitter.event;
 
     protected readonly toolbar: TabBarToolbar;
 
@@ -732,6 +745,11 @@ export class ViewContainerPart extends BaseWidget {
         this.wrapped.title.changed.connect(fireTitleChanged);
         this.toDispose.push(Disposable.create(() => this.wrapped.title.changed.disconnect(fireTitleChanged)));
 
+        if (DescriptionWidget.is(this.wrapped)) {
+            const fireDescriptionChanged = () => this.onDidChangeDescriptionEmitter.fire(undefined);
+            this.toDispose.push(this.wrapped?.onDidChangeDescription.event(fireDescriptionChanged));
+        }
+
         const { header, body, disposable } = this.createContent();
         this.header = header;
         this.body = body;
@@ -747,6 +765,7 @@ export class ViewContainerPart extends BaseWidget {
             this.collapsedEmitter,
             this.contextMenuEmitter,
             this.onTitleChangedEmitter,
+            this.onDidChangeDescriptionEmitter,
             this.registerContextMenu(),
             this.onDidFocusEmitter,
             // focus event does not bubble, capture it
@@ -892,15 +911,29 @@ export class ViewContainerPart extends BaseWidget {
 
         const title = document.createElement('span');
         title.classList.add('label', 'noselect');
+
+        const description = document.createElement('span');
+        description.classList.add('description');
+
         const updateTitle = () => title.innerText = this.wrapped.title.label;
         const updateCaption = () => title.title = this.wrapped.title.caption || this.wrapped.title.label;
+        const updateDescription = () => {
+            description.innerText = DescriptionWidget.is(this.wrapped) && !this.collapsed && this.wrapped.description || '';
+        };
+
         updateTitle();
         updateCaption();
+        updateDescription();
+
         disposable.pushAll([
             this.onTitleChanged(updateTitle),
-            this.onTitleChanged(updateCaption)
+            this.onTitleChanged(updateCaption),
+            this.onDidChangeDescription(updateDescription),
+            this.onCollapsed(updateDescription),
         ]);
         header.appendChild(title);
+        header.appendChild(description);
+
         return {
             header,
             disposable
@@ -998,6 +1031,7 @@ export namespace ViewContainerPart {
         collapsed: boolean;
         hidden: boolean;
         relativeSize?: number;
+        description?: string;
     }
 
     export function closestPart(element: Element | EventTarget | null, selector: string = 'div.part'): Element | undefined {

package/src/browser/widgets/alert-message.tsx

@@ -15,6 +15,7 @@
  ********************************************************************************/
 
 import React = require('react');
+import { codicon } from './widget';
 
 export type MessageType = keyof AlertMessageIcon;
 
@@ -26,10 +27,10 @@ interface AlertMessageIcon {
 }
 
 const AlertMessageIcon = {
-    INFO: 'fa fa-info-circle',
-    SUCCESS: 'fa fa-check-circle',
-    WARNING: 'fa fa-exclamation-circle',
-    ERROR: 'fa fa-times-circle'
+    INFO: codicon('info'),
+    SUCCESS: codicon('pass'),
+    WARNING: codicon('warning'),
+    ERROR: codicon('error')
 };
 
 export interface AlertMessageProps {

package/src/browser/widgets/react-renderer.tsx

@@ -14,16 +14,19 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { injectable } from 'inversify';
+import { inject, injectable, optional } from 'inversify';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Disposable } from '../../common';
 
+export type RendererHost = HTMLElement;
+export const RendererHost = Symbol('RendererHost');
+
 @injectable()
 export class ReactRenderer implements Disposable {
     readonly host: HTMLElement;
     constructor(
-        host?: HTMLElement
+        @inject(RendererHost) @optional() host?: RendererHost
     ) {
         this.host = host || document.createElement('div');
     }

package/src/browser/widgets/widget.ts

@@ -30,11 +30,26 @@ decorate(unmanaged(), Widget, 0);
 export * from '@phosphor/widgets';
 export * from '@phosphor/messaging';
 
+export const ACTION_ITEM = 'action-item';
+
+export function codiconArray(name: string, actionItem = false): string[] {
+    const array = ['codicon', `codicon-${name}`];
+    if (actionItem) {
+        array.push(ACTION_ITEM);
+    }
+    return array;
+}
+
+export function codicon(name: string, actionItem = false): string {
+    return `codicon codicon-${name}${actionItem ? ` ${ACTION_ITEM}` : ''}`;
+}
+
 export const DISABLED_CLASS = 'theia-mod-disabled';
 export const EXPANSION_TOGGLE_CLASS = 'theia-ExpansionToggle';
-export const CODICON_TREE_ITEM_CLASSES = ['codicon', 'codicon-chevron-down'];
+export const CODICON_TREE_ITEM_CLASSES = codiconArray('chevron-down');
 export const COLLAPSED_CLASS = 'theia-mod-collapsed';
 export const BUSY_CLASS = 'theia-mod-busy';
+export const CODICON_LOADING_CLASSES = codiconArray('loading');
 export const SELECTED_CLASS = 'theia-mod-selected';
 export const FOCUS_CLASS = 'theia-mod-focus';
 export const DEFAULT_SCROLL_OPTIONS: PerfectScrollbar.Options = {

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

@@ -18,7 +18,7 @@
 
 import * as electron from '../../../shared/electron';
 import { inject, injectable } from 'inversify';
-import { ContextMenuRenderer, RenderContextMenuOptions, ContextMenuAccess, FrontendApplicationContribution, CommonCommands } from '../../browser';
+import { ContextMenuRenderer, RenderContextMenuOptions, ContextMenuAccess, FrontendApplicationContribution, CommonCommands, coordinateFromAnchor } from '../../browser';
 import { ElectronMainMenuFactory } from './electron-main-menu-factory';
 import { ContextMenuContext } from '../../browser/menu/context-menu-context';
 import { MenuPath, MenuContribution, MenuModelRegistry } from '../../common';
@@ -84,7 +84,7 @@ export class ElectronContextMenuRenderer extends ContextMenuRenderer {
 
     protected doRender({ menuPath, anchor, args, onHide }: RenderContextMenuOptions): ElectronContextMenuAccess {
         const menu = this.menuFactory.createContextMenu(menuPath, args);
-        const { x, y } = anchor instanceof MouseEvent ? { x: anchor.clientX, y: anchor.clientY } : anchor!;
+        const { x, y } = coordinateFromAnchor(anchor);
         const zoom = electron.webFrame.getZoomFactor();
         // x and y values must be Ints or else there is a conversion error
         menu.popup({ x: Math.round(x * zoom), y: Math.round(y * zoom) });