@theia/core 1.45.1 → 1.46.0-next.137

package/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 : ''
+                }
+            ]
+        };
     }
 }

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

@@ -70,11 +70,11 @@ export class TabBarToolbar extends ReactWidget {
 
     @postConstruct()
     protected init(): void {
-        this.toDispose.push(this.keybindings.onKeybindingsChanged(() => this.update()));
+        this.toDispose.push(this.keybindings.onKeybindingsChanged(() => this.maybeUpdate()));
 
         this.toDispose.push(this.contextKeyService.onDidChange(e => {
             if (e.affects(this.keybindingContextKeys)) {
-                this.update();
+                this.maybeUpdate();
             }
         }));
     }
@@ -90,7 +90,7 @@ export class TabBarToolbar extends ReactWidget {
             if ('command' in item) {
                 this.commands.getAllHandlers(item.command).forEach(handler => {
                     if (handler.onDidChangeEnabled) {
-                        this.toDisposeOnUpdateItems.push(handler.onDidChangeEnabled(() => this.update()));
+                        this.toDisposeOnUpdateItems.push(handler.onDidChangeEnabled(() => this.maybeUpdate()));
                     }
                 });
             }
@@ -113,7 +113,7 @@ export class TabBarToolbar extends ReactWidget {
         } else {
             this.hide();
         }
-        this.update();
+        this.maybeUpdate();
     }
 
     updateTarget(current?: Widget): void {
@@ -130,7 +130,7 @@ export class TabBarToolbar extends ReactWidget {
         if (current) {
             const resetCurrent = () => {
                 this.setCurrent(undefined);
-                this.update();
+                this.maybeUpdate();
             };
             current.disposed.connect(resetCurrent);
             this.toDisposeOnSetCurrent.push(Disposable.create(() =>
@@ -144,7 +144,7 @@ export class TabBarToolbar extends ReactWidget {
         if (contextKeys.size > 0) {
             this.contextKeyListener = this.contextKeyService.onDidChange(event => {
                 if (event.affects(contextKeys)) {
-                    this.update();
+                    this.maybeUpdate();
                 }
             });
         }
@@ -321,8 +321,8 @@ export class TabBarToolbar extends ReactWidget {
     protected renderMenuItem(item: TabBarToolbarItem & MenuToolbarItem): React.ReactNode {
         const icon = typeof item.icon === 'function' ? item.icon() : item.icon ?? 'ellipsis';
         return <div key={item.id}
-                    className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled menu'}
-                    onClick={this.showPopupMenu.bind(this, item.menuPath)}>
+            className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled menu'}
+            onClick={this.showPopupMenu.bind(this, item.menuPath)}>
             <div id={item.id} className={codicon(icon, true)}
                 title={item.text} />
             <div className={codicon('chevron-down') + ' chevron'} />
@@ -397,9 +397,15 @@ export class TabBarToolbar extends ReactWidget {
         } else if (item.menuPath) {
             this.renderMoreContextMenu(this.toAnchor(e), item.menuPath);
         }
-        this.update();
+        this.maybeUpdate();
     };
 
+    protected maybeUpdate(): void {
+        if (!this.isDisposed) {
+            this.update();
+        }
+    }
+
     protected onMouseDownEvent = (e: React.MouseEvent<HTMLElement>) => {
         if (e.button === 0) {
             e.currentTarget.classList.add('active');
@@ -419,5 +425,4 @@ export namespace TabBarToolbar {
         export const TAB_BAR_TOOLBAR_ITEM = 'item';
 
     }
-
 }

package/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';
@@ -39,6 +39,7 @@ import { SelectComponent } from '../widgets/select-component';
 import { createElement } from 'react';
 import { PreviewableWidget } from '../widgets/previewable-widget';
 import { EnhancedPreviewWidget } from '../widgets/enhanced-preview-widget';
+import { ContextKeyService } from '../context-key-service';
 
 /** The class name added to hidden content nodes, which are required to render vertical side bars. */
 const HIDDEN_CONTENT_CLASS = 'theia-TabBar-hidden-content';
@@ -102,7 +103,8 @@ export class TabBarRenderer extends TabBar.Renderer {
         protected readonly selectionService?: SelectionService,
         protected readonly commandService?: CommandService,
         protected readonly corePreferences?: CorePreferences,
-        protected readonly hoverService?: HoverService
+        protected readonly hoverService?: HoverService,
+        protected readonly contextKeyService?: ContextKeyService,
     ) {
         super();
         if (this.decoratorService) {
@@ -170,8 +172,8 @@ export class TabBarRenderer extends TabBar.Renderer {
         const hover = this.tabBar && (this.tabBar.orientation === 'horizontal' && this.corePreferences?.['window.tabbar.enhancedPreview'] === 'classic')
             ? { title: title.caption }
             : {
-            onmouseenter: this.handleMouseEnterEvent
-        };
+                onmouseenter: this.handleMouseEnterEvent
+            };
 
         return h.li(
             {
@@ -188,6 +190,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 +292,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) {
@@ -614,10 +648,12 @@ export class TabBarRenderer extends TabBar.Renderer {
                 this.selectionService.selection = NavigatableWidget.is(widget) ? { uri: widget.getResourceUri() } : widget;
             }
 
+            const contextKeyServiceOverlay = this.contextKeyService?.createOverlay([['isTerminalTab', widget && 'terminalId' in widget]]);
             this.contextMenuRenderer.render({
                 menuPath: this.contextMenuPath!,
                 anchor: event,
                 args: [event],
+                contextKeyService: contextKeyServiceOverlay,
                 // We'd like to wait until the command triggered by the context menu has been run, but this should let it get through the preamble, at least.
                 onHide: () => setTimeout(() => { if (this.selectionService) { this.selectionService.selection = oldSelection; } })
             });
@@ -967,7 +1003,7 @@ export class ToolbarAwareTabBar extends ScrollableTabBar {
 
     protected override onBeforeDetach(msg: Message): void {
         if (this.toolbar && this.toolbar.isAttached) {
-            Widget.detach(this.toolbar);
+            this.toolbar.dispose();
         }
         super.onBeforeDetach(msg);
     }