Fixed #1278: implemented tab bar decorator & supported error marker in editor tabs

CHANGELOG.md

@@ -11,6 +11,7 @@
 - [task] allowed users to override any task properties other than the ones used in the task definition [#5777](https://github.com/theia-ide/theia/pull/5777)
 - [task] notified clients of TaskDefinitionRegistry on change [#5915](https://github.com/theia-ide/theia/pull/5915)
 - [outline] added `OutlineViewTreeModel` for the outline view tree widget [#5687](https://github.com/theia-ide/theia/pull/5687)
+- [core] supported diagnostic marker in the tab bar [#5845](https://github.com/theia-ide/theia/pull/5845)
 
 Breaking changes:
 
@@ -23,6 +24,7 @@ Breaking changes:
   - `Source Control` and `Explorer` are view containers now and previous layout data cannot be loaded for them. Because of it the layout is completely reset.
 - [vscode] complete support of variable substitution [#5835](https://github.com/theia-ide/theia/pull/5835)
   - inline `VariableQuickOpenItem`
+- [core] refactored `TreeDecoration` to `WidgetDecoration` and moved it to shell, since it is a generic decoration that can be used by different types of widgets (currently by tree nodes and tabs) [#5845](https://github.com/theia-ide/theia/pull/5845)
 
 ## v0.9.0
 - [core] added `theia-widget-noInfo` css class to be used by widgets when displaying no information messages [#5717](https://github.com/theia-ide/theia/pull/5717)

packages/core/src/browser/frontend-application-module.ts

@@ -83,6 +83,7 @@ import { ProgressClient } from '../common/progress-service-protocol';
 import { ProgressService } from '../common/progress-service';
 import { DispatchingProgressClient } from './progress-client';
 import { ProgressStatusBarItem } from './progress-status-bar-item';
+import { TabBarDecoratorService, TabBarDecorator } from './shell/tab-bar-decorator';
 
 export const frontendApplicationModule = new ContainerModule((bind, unbind, isBound, rebind) => {
     const themeService = ThemeService.get();
@@ -119,9 +120,13 @@ export const frontendApplicationModule = new ContainerModule((bind, unbind, isBo
     bind(DockPanelRenderer).toSelf();
     bind(TabBarRendererFactory).toFactory(context => () => {
         const contextMenuRenderer = context.container.get<ContextMenuRenderer>(ContextMenuRenderer);
-        return new TabBarRenderer(contextMenuRenderer);
+        const decoratorService = context.container.get<TabBarDecoratorService>(TabBarDecoratorService);
+        return new TabBarRenderer(contextMenuRenderer, decoratorService);
     });
 
+    bindContributionProvider(bind, TabBarDecorator);
+    bind(TabBarDecoratorService).toSelf().inSingletonScope();
+
     bindContributionProvider(bind, OpenHandler);
     bind(DefaultOpenerService).toSelf().inSingletonScope();
     bind(OpenerService).toService(DefaultOpenerService);

packages/core/src/browser/shell/tab-bar-decorator.ts

@@ -0,0 +1,89 @@
+/********************************************************************************
+ * Copyright (C) 2019 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 { inject, injectable, named, postConstruct } from 'inversify';
+import { Event, Emitter, Disposable, DisposableCollection, ContributionProvider } from '../../common';
+import { Title, Widget } from '@phosphor/widgets';
+import { WidgetDecoration } from '../widget-decoration';
+
+export const TabBarDecorator = Symbol('TabBarDecorator');
+
+export interface TabBarDecorator {
+
+    /**
+     * The unique identifier of the tab bar decorator.
+     */
+    readonly id: string;
+
+    /**
+     * Event that is fired when any of the available tab bar decorators has changes.
+     */
+    readonly onDidChangeDecorations: Event<void>;
+
+    /**
+     * Decorate tabs by the underlying URI.
+     * @param {Title<Widget>[]} titles An array of the titles of the tabs.
+     * @returns A map from the URI of the tab to its decoration data.
+     */
+    decorate(titles: Title<Widget>[]): Map<string, WidgetDecoration.Data>;
+}
+
+@injectable()
+export class TabBarDecoratorService implements Disposable {
+
+    protected readonly onDidChangeDecorationsEmitter = new Emitter<void>();
+
+    readonly onDidChangeDecorations = this.onDidChangeDecorationsEmitter.event;
+
+    protected readonly toDispose = new DisposableCollection();
+
+    @inject(ContributionProvider) @named(TabBarDecorator)
+    protected readonly contributions: ContributionProvider<TabBarDecorator>;
+
+    @postConstruct()
+    protected init(): void {
+        const decorators = this.contributions.getContributions();
+        this.toDispose.pushAll(decorators.map(decorator =>
+            decorator.onDidChangeDecorations(data =>
+                this.onDidChangeDecorationsEmitter.fire(undefined)
+            ))
+        );
+    }
+
+    dispose(): void {
+        this.toDispose.dispose();
+    }
+
+    /**
+     * Assign tabs the decorators provided by all the contributions.
+     * @param {Title<Widget>[]} titles An array of the titles of the tabs.
+     * @returns A map from the URI of the tab to an array of its decoration data.
+     */
+    getDecorations(titles: Title<Widget>[]): Map<string, WidgetDecoration.Data[]> {
+        const decorators = this.contributions.getContributions();
+        const changes: Map<string, WidgetDecoration.Data[]> = new Map();
+        for (const decorator of decorators) {
+            for (const [id, data] of (decorator.decorate(titles)).entries()) {
+                if (changes.has(id)) {
+                    changes.get(id)!.push(data);
+                } else {
+                    changes.set(id, [data]);
+                }
+            }
+        }
+        return changes;
+    }
+}

packages/core/src/browser/shell/tab-bars.ts

@@ -17,14 +17,16 @@
 import PerfectScrollbar from 'perfect-scrollbar';
 import { TabBar, Title, Widget } from '@phosphor/widgets';
 import { VirtualElement, h, VirtualDOM, ElementInlineStyle } from '@phosphor/virtualdom';
-import { MenuPath } from '../../common';
+import { DisposableCollection, MenuPath, notEmpty } from '../../common';
 import { ContextMenuRenderer } from '../context-menu-renderer';
 import { Signal } from '@phosphor/signaling';
 import { Message } from '@phosphor/messaging';
 import { ArrayExt } from '@phosphor/algorithm';
 import { ElementExt } from '@phosphor/domutils';
 import { TabBarToolbarRegistry, TabBarToolbar } from './tab-bar-toolbar';
 import { TheiaDockPanel, MAIN_AREA_ID, BOTTOM_AREA_ID } from './theia-dock-panel';
+import { WidgetDecoration } from '../widget-decoration';
+import { TabBarDecoratorService } from './tab-bar-decorator';
 
 /** The class name added to hidden content nodes, which are required to render vertical side bars. */
 const HIDDEN_CONTENT_CLASS = 'theia-TabBar-hidden-content';
@@ -71,17 +73,26 @@ export class TabBarRenderer extends TabBar.Renderer {
      */
     contextMenuPath?: MenuPath;
 
+    protected readonly toDispose = new DisposableCollection();
+
     // TODO refactor shell, rendered should only receive props with event handlers
     // events should be handled by clients, like ApplicationShell
     // right now it is mess: (1) client logic belong to renderer, (2) cyclic dependencies between renderes and clients
-    constructor(protected readonly contextMenuRenderer?: ContextMenuRenderer) {
+    constructor(
+        protected readonly contextMenuRenderer?: ContextMenuRenderer,
+        protected readonly decoratorService?: TabBarDecoratorService
+    ) {
         super();
+        if (this.decoratorService) {
+            this.toDispose.push(this.decoratorService);
+            this.toDispose.push(this.decoratorService.onDidChangeDecorations(() => this.tabBar && this.tabBar.update()));
+        }
     }
 
     /**
      * Render tabs with the default DOM structure, but additionally register a context menu listener.
-     * @param data {SideBarRenderData} data used to render the tab.
-     * @param isInSidePanel {boolean} an optional check which determines if the tab is in the side-panel.
+     * @param {SideBarRenderData} data Data used to render the tab.
+     * @param {boolean} isInSidePanel An optional check which determines if the tab is in the side-panel.
      * @returns {VirtualElement} The virtual element of the rendered tab.
      */
     renderTab(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement {
@@ -97,7 +108,7 @@ export class TabBarRenderer extends TabBar.Renderer {
                 oncontextmenu: this.handleContextMenuEvent,
                 ondblclick: this.handleDblClickEvent
             },
-            this.renderIcon(data),
+            this.renderIcon(data, isInSidePanel),
             this.renderLabel(data, isInSidePanel),
             this.renderCloseIcon(data)
         );
@@ -131,10 +142,10 @@ export class TabBarRenderer extends TabBar.Renderer {
     }
 
     /**
-     * If size information is available for the label, set it as inline style. Tab padding
-     * and icon size are also considered in the `top` position.
-     * @param data {SideBarRenderData} data used to render the tab.
-     * @param isInSidePanel {boolean} an optional check which determines if the tab is in the side-panel.
+     * If size information is available for the label, set it as inline style.
+     * Tab padding and icon size are also considered in the `top` position.
+     * @param {SideBarRenderData} data Data used to render the tab.
+     * @param {boolean} isInSidePanel An optional check which determines if the tab is in the side-panel.
      * @returns {VirtualElement} The virtual element of the rendered label.
      */
     renderLabel(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement {
@@ -157,7 +168,7 @@ export class TabBarRenderer extends TabBar.Renderer {
             top = `${paddingTop + iconHeight}px`;
         }
         const style: ElementInlineStyle = { width, height, top };
-        // No need to check for duplicate labels if the tab is rendered in the side panel (title is not displayed)
+        // No need to check for duplicate labels if the tab is rendered in the side panel (title is not displayed),
         // or if there are less than two files in the tab bar.
         if (isInSidePanel || (this.tabBar && this.tabBar.titles.length < 2)) {
             return h.div({ className: 'p-TabBar-tabLabel', style }, data.title.label);
@@ -172,14 +183,49 @@ export class TabBarRenderer extends TabBar.Renderer {
         return h.div({ className: 'p-TabBar-tabLabel', style }, data.title.label);
     }
 
+    /**
+     * Get all available decorations of a given tab.
+     * @param {string} tab The URI of the tab.
+     */
+    protected getDecorations(tab: string): WidgetDecoration.Data[] {
+        const tabDecorations = [];
+        if (this.tabBar && this.decoratorService) {
+            const allDecorations = this.decoratorService.getDecorations([...this.tabBar.titles]);
+            if (allDecorations.has(tab)) {
+                tabDecorations.push(...allDecorations.get(tab));
+            }
+        }
+        return tabDecorations;
+    }
+
+    /**
+     * Get the decoration data given the tab URI and the decoration data type.
+     * @param {string} tab The URI of the tab.
+     * @param {K} key The type of the decoration data.
+     */
+    protected getDecorationData<K extends keyof WidgetDecoration.Data>(tab: string, key: K): WidgetDecoration.Data[K][] {
+        return this.getDecorations(tab).filter(data => data[key] !== undefined).map(data => data[key]);
+
+    }
+
+    /**
+     * Get the class of an icon.
+     * @param {string | string[]} iconName The name of the icon.
+     * @param {string[]} additionalClasses Additional classes of the icon.
+     */
+    private getIconClass(iconName: string | string[], additionalClasses: string[] = []): string {
+        const iconClass = (typeof iconName === 'string') ? ['a', 'fa', `fa-${iconName}`] : ['a'].concat(iconName);
+        return iconClass.concat(additionalClasses).join(' ');
+    }
+
     /**
      * Find duplicate labels from the currently opened tabs in the tab bar.
-     * Return the approriate partial paths that can distinguish the identical labels.
+     * Return the appropriate partial paths that can distinguish the identical labels.
      *
      * E.g., a/p/index.ts => a/..., b/p/index.ts => b/...
      *
      * To prevent excessively long path displayed, show at maximum three levels from the end by default.
-     * @param {Title<Widget>[]} titles - array of titles in the current tab bar.
+     * @param {Title<Widget>[]} titles Array of titles in the current tab bar.
      * @returns {Map<string, string>} A map from each tab's original path to its displayed partial path.
      */
     findDuplicateLabels(titles: Title<Widget>[]): Map<string, string> {
@@ -260,15 +306,54 @@ export class TabBarRenderer extends TabBar.Renderer {
     /**
      * If size information is available for the icon, set it as inline style. Tab padding
      * is also considered in the `top` position.
+     * @param {SideBarRenderData} data Data used to render the tab icon.
+     * @param {boolean} isInSidePanel An optional check which determines if the tab is in the side-panel.
      */
-    renderIcon(data: SideBarRenderData): VirtualElement {
+    renderIcon(data: SideBarRenderData, inSidePanel?: boolean): VirtualElement {
         let top: string | undefined;
         if (data.paddingTop) {
             top = `${data.paddingTop || 0}px`;
         }
-        const className = this.createIconClass(data);
         const style: ElementInlineStyle = { top };
-        return h.div({ className, style }, data.title.iconLabel);
+        const baseClassName = this.createIconClass(data);
+
+        const overlayIcons: VirtualElement[] = [];
+        const decorationData = this.getDecorationData(data.title.caption, 'iconOverlay');
+
+        // Check if the tab has decoration markers to be rendered on top.
+        if (decorationData.length > 0) {
+            const baseIcon: VirtualElement = h.div({ className: baseClassName, style }, data.title.iconLabel);
+            const wrapperClassName: string = WidgetDecoration.Styles.ICON_WRAPPER_CLASS;
+            const decoratorSizeClassName: string = inSidePanel ? WidgetDecoration.Styles.DECORATOR_SIDEBAR_SIZE_CLASS : WidgetDecoration.Styles.DECORATOR_SIZE_CLASS;
+
+            decorationData
+                .filter(notEmpty)
+                .map(overlay => [overlay.position, overlay] as [WidgetDecoration.IconOverlayPosition, WidgetDecoration.IconOverlay | WidgetDecoration.IconClassOverlay])
+                .forEach(([position, overlay]) => {
+                    const iconAdditionalClasses: string[] = [decoratorSizeClassName, WidgetDecoration.IconOverlayPosition.getStyle(position, inSidePanel)];
+                    const overlayIconStyle = (color?: string) => {
+                        if (color === undefined) {
+                            return {};
+                        }
+                        return { color };
+                    };
+                    // Parse the optional background (if it exists) of the overlay icon.
+                    if (overlay.background) {
+                        const backgroundIconClassName = this.getIconClass(overlay.background.shape, iconAdditionalClasses);
+                        overlayIcons.push(
+                            h.div({ key: data.title.label + '-background', className: backgroundIconClassName, style: overlayIconStyle(overlay.background.color) })
+                        );
+                    }
+                    // Parse the overlay icon.
+                    const overlayIcon = (overlay as WidgetDecoration.IconOverlay).icon || (overlay as WidgetDecoration.IconClassOverlay).iconClass;
+                    const overlayIconClassName = this.getIconClass(overlayIcon, iconAdditionalClasses);
+                    overlayIcons.push(
+                        h.span({ key: data.title.label, className: overlayIconClassName, style: overlayIconStyle(overlay.color) })
+                    );
+                });
+            return h.div({ className: wrapperClassName, style }, [baseIcon, ...overlayIcons]);
+        }
+        return h.div({ className: baseClassName, style }, data.title.iconLabel);
     }
 
     protected handleContextMenuEvent = (event: MouseEvent) => {

packages/core/src/browser/style/tree-decorators.css

@@ -31,6 +31,7 @@
 }
 
 .theia-icon-wrapper {
+    top: 0px !important;
     position: relative;
     display: inline-block
 }
@@ -42,6 +43,13 @@
     width: 100%;
 }
 
+.theia-decorator-sidebar-size {
+    height: 100%;
+    text-align: center;
+    transform: scale(1.2);
+    width: 100%;
+}
+
 .theia-top-right {
     position: absolute;
     bottom: 40%;
@@ -54,6 +62,12 @@
     left: 25%;
 }
 
+.theia-bottom-right-sidebar {
+    position: absolute;
+    top: 80%;
+    left: 50%;
+}
+
 .theia-bottom-left {
     position: absolute;
     top: 40%;