Show decorations in the editor tabs (#13301) (#13371)

Author: dhuebner

packages/core/src/browser/core-preferences.ts

@@ -200,6 +200,11 @@ export const corePreferenceSchema: PreferenceSchema = {
             'description': nls.localizeByDefault('Controls whether an editor is revealed in any of the visible groups if opened. If disabled, an editor will prefer to open in the currently active editor group. If enabled, an already opened editor will be revealed instead of opened again in the currently active editor group. Note that there are some cases where this setting is ignored, such as when forcing an editor to open in a specific group or to the side of the currently active group.'),
             'default': false
         },
+        'workbench.editor.decorations.badges': {
+            'type': 'boolean',
+            'description': nls.localizeByDefault('Controls whether editor file decorations should use badges.'),
+            'default': true
+        },
         'workbench.commandPalette.history': {
             type: 'number',
             default: 50,
@@ -295,6 +300,7 @@ export interface CoreConfiguration {
     'workbench.editor.mouseBackForwardToNavigate': boolean;
     'workbench.editor.closeOnFileDelete': boolean;
     'workbench.editor.revealIfOpen': boolean;
+    'workbench.editor.decorations.badges': boolean;
     'workbench.colorTheme': string;
     'workbench.iconTheme': string;
     'workbench.silentNotifications': boolean;

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

@@ -17,9 +17,12 @@
 import debounce = require('lodash.debounce');
 import { Title, Widget } from '@phosphor/widgets';
 import { inject, injectable, named } from 'inversify';
-import { Event, Emitter, ContributionProvider } from '../../common';
-import { WidgetDecoration } from '../widget-decoration';
+import { ContributionProvider, Emitter, Event } from '../../common';
+import { ColorRegistry } from '../color-registry';
+import { Decoration, DecorationsService, DecorationsServiceImpl } from '../decorations-service';
 import { FrontendApplicationContribution } from '../frontend-application-contribution';
+import { Navigatable } from '../navigatable-types';
+import { WidgetDecoration } from '../widget-decoration';
 
 export const TabBarDecorator = Symbol('TabBarDecorator');
 
@@ -53,6 +56,12 @@ export class TabBarDecoratorService implements FrontendApplicationContribution {
     @inject(ContributionProvider) @named(TabBarDecorator)
     protected readonly contributions: ContributionProvider<TabBarDecorator>;
 
+    @inject(DecorationsService)
+    protected readonly decorationsService: DecorationsServiceImpl;
+
+    @inject(ColorRegistry)
+    protected readonly colors: ColorRegistry;
+
     initialize(): void {
         this.contributions.getContributions().map(decorator => decorator.onDidChangeDecorations(this.fireDidChangeDecorations));
     }
@@ -66,11 +75,32 @@ export class TabBarDecoratorService implements FrontendApplicationContribution {
      */
     getDecorations(title: Title<Widget>): WidgetDecoration.Data[] {
         const decorators = this.contributions.getContributions();
-        let all: WidgetDecoration.Data[] = [];
+        const decorations: WidgetDecoration.Data[] = [];
         for (const decorator of decorators) {
-            const decorations = decorator.decorate(title);
-            all = all.concat(decorations);
+            decorations.push(...decorator.decorate(title));
         }
-        return all;
+        if (Navigatable.is(title.owner)) {
+            const resourceUri = title.owner.getResourceUri();
+            if (resourceUri) {
+                const serviceDecorations = this.decorationsService.getDecoration(resourceUri, false);
+                decorations.push(...serviceDecorations.map(d => this.fromDecoration(d)));
+            }
+        }
+        return decorations;
+    }
+
+    protected fromDecoration(decoration: Decoration): WidgetDecoration.Data {
+        const colorVariable = decoration.colorId && this.colors.toCssVariableName(decoration.colorId);
+        return {
+            tailDecorations: [
+                {
+                    data: decoration.letter ? decoration.letter : '',
+                    fontData: {
+                        color: colorVariable && `var(${colorVariable})`
+                    },
+                    tooltip: decoration.tooltip ? decoration.tooltip : ''
+                }
+            ]
+        };
     }
 }

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

@@ -17,7 +17,7 @@
 import PerfectScrollbar from 'perfect-scrollbar';
 import { TabBar, Title, Widget } from '@phosphor/widgets';
 import { VirtualElement, h, VirtualDOM, ElementInlineStyle } from '@phosphor/virtualdom';
-import { Disposable, DisposableCollection, MenuPath, notEmpty, SelectionService, CommandService, nls } from '../../common';
+import { Disposable, DisposableCollection, MenuPath, notEmpty, SelectionService, CommandService, nls, ArrayUtils } from '../../common';
 import { ContextMenuRenderer } from '../context-menu-renderer';
 import { Signal, Slot } from '@phosphor/signaling';
 import { Message, MessageLoop } from '@phosphor/messaging';
@@ -188,6 +188,7 @@ export class TabBarRenderer extends TabBar.Renderer {
                 { className: 'theia-tab-icon-label' },
                 this.renderIcon(data, isInSidePanel),
                 this.renderLabel(data, isInSidePanel),
+                this.renderTailDecorations(data, isInSidePanel),
                 this.renderBadge(data, isInSidePanel),
                 this.renderLock(data, isInSidePanel)
             ),
@@ -289,6 +290,37 @@ export class TabBarRenderer extends TabBar.Renderer {
         return h.div({ className: 'p-TabBar-tabLabel', style }, data.title.label);
     }
 
+    protected renderTailDecorations(renderData: SideBarRenderData, isInSidePanel?: boolean): VirtualElement[] {
+        if (!this.corePreferences?.get('workbench.editor.decorations.badges')) {
+            return [];
+        }
+        const tailDecorations = ArrayUtils.coalesce(this.getDecorationData(renderData.title, 'tailDecorations')).flat();
+        if (tailDecorations === undefined || tailDecorations.length === 0) {
+            return [];
+        }
+        let dotDecoration: WidgetDecoration.TailDecoration.AnyPartial | undefined;
+        const otherDecorations: WidgetDecoration.TailDecoration.AnyPartial[] = [];
+        tailDecorations.reverse().forEach(decoration => {
+            const partial = decoration as WidgetDecoration.TailDecoration.AnyPartial;
+            if (WidgetDecoration.TailDecoration.isDotDecoration(partial)) {
+                dotDecoration ||= partial;
+            } else if (partial.data || partial.icon || partial.iconClass) {
+                otherDecorations.push(partial);
+            }
+        });
+        const decorationsToRender = dotDecoration ? [dotDecoration, ...otherDecorations] : otherDecorations;
+        return decorationsToRender.map((decoration, index) => {
+            const { tooltip, data, fontData, color, icon, iconClass } = decoration;
+            const iconToRender = icon ?? iconClass;
+            const className = ['p-TabBar-tail', 'flex'].join(' ');
+            const style = fontData ? fontData : color ? { color } : undefined;
+            const content = (data ? data : iconToRender
+                ? h.span({ className: this.getIconClass(iconToRender, iconToRender === 'circle' ? [WidgetDecoration.Styles.DECORATOR_SIZE_CLASS] : []) })
+                : '') + (index !== decorationsToRender.length - 1 ? ',' : '');
+            return h.span({ key: ('tailDecoration_' + index), className, style, title: tooltip ?? content }, content);
+        });
+    }
+
     renderBadge(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement {
         const totalBadge = this.getDecorationData(data.title, 'badge').reduce((sum, badge) => sum! + badge!, 0);
         if (!totalBadge) {

packages/core/src/browser/style/tabs.css

@@ -123,6 +123,12 @@
   white-space: nowrap;
 }
 
+.p-TabBar-tail {
+  padding-left: 5px;
+  text-align: center;
+  justify-content: center;
+}
+
 .p-TabBar.theia-app-centers .p-TabBar-tabLabelWrapper {
   display: flex;
 }