From 0cb16bc61661001f753723f377fe4c9639ed35aa Mon Sep 17 00:00:00 2001 From: Dennis Huebner Date: Fri, 9 Feb 2024 14:08:51 +0100 Subject: [PATCH 1/3] Show decorations in the editor tabs (#13301) --- packages/core/src/browser/core-preferences.ts | 6 +++ .../src/browser/shell/tab-bar-decorator.ts | 34 ++++++++++++++++- packages/core/src/browser/shell/tab-bars.ts | 37 ++++++++++++++++++- packages/core/src/browser/style/tabs.css | 6 +++ 4 files changed, 79 insertions(+), 4 deletions(-) diff --git a/packages/core/src/browser/core-preferences.ts b/packages/core/src/browser/core-preferences.ts index 74fc83ffa8105..8f54f5419f645 100644 --- a/packages/core/src/browser/core-preferences.ts +++ b/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; diff --git a/packages/core/src/browser/shell/tab-bar-decorator.ts b/packages/core/src/browser/shell/tab-bar-decorator.ts index 4b48d848876b1..ec5ef4ba15553 100644 --- a/packages/core/src/browser/shell/tab-bar-decorator.ts +++ b/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; + @inject(DecorationsService) + protected readonly decorationsService: DecorationsServiceImpl; + + @inject(ColorRegistry) + protected readonly colors: ColorRegistry; + initialize(): void { this.contributions.getContributions().map(decorator => decorator.onDidChangeDecorations(this.fireDidChangeDecorations)); } @@ -71,6 +80,27 @@ export class TabBarDecoratorService implements FrontendApplicationContribution { const decorations = decorator.decorate(title); all = all.concat(decorations); } + if (Navigatable.is(title.owner)) { + if (title.owner.getResourceUri() !== undefined) { + const serviceDecorations = this.decorationsService.getDecoration(title.owner.getResourceUri()!, false); + all = all.concat(serviceDecorations.map(d => this.toDecorator(d))); + } + } return all; } + + protected toDecorator(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 : '' + } + ] + }; + } } diff --git a/packages/core/src/browser/shell/tab-bars.ts b/packages/core/src/browser/shell/tab-bars.ts index c43f42c73bbcf..1a858707165ec 100644 --- a/packages/core/src/browser/shell/tab-bars.ts +++ b/packages/core/src/browser/shell/tab-bars.ts @@ -170,8 +170,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 +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,38 @@ 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 = this.getDecorationData(renderData.title, 'tailDecorations') + .filter(acc => acc !== undefined).reduce((acc, current) => acc!.concat(current!), []); + 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) { diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css index ef247de6fcfcd..a77ae0ad9f172 100644 --- a/packages/core/src/browser/style/tabs.css +++ b/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; } From 424fe864c8fb7461debbbfa78779ed3e1e4dbc57 Mon Sep 17 00:00:00 2001 From: Dennis Huebner Date: Fri, 9 Feb 2024 15:11:34 +0100 Subject: [PATCH 2/3] Update packages/core/src/browser/shell/tab-bar-decorator.ts Co-authored-by: Mark Sujew --- packages/core/src/browser/shell/tab-bar-decorator.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/core/src/browser/shell/tab-bar-decorator.ts b/packages/core/src/browser/shell/tab-bar-decorator.ts index ec5ef4ba15553..a19b71a7b260a 100644 --- a/packages/core/src/browser/shell/tab-bar-decorator.ts +++ b/packages/core/src/browser/shell/tab-bar-decorator.ts @@ -81,9 +81,10 @@ export class TabBarDecoratorService implements FrontendApplicationContribution { all = all.concat(decorations); } if (Navigatable.is(title.owner)) { - if (title.owner.getResourceUri() !== undefined) { - const serviceDecorations = this.decorationsService.getDecoration(title.owner.getResourceUri()!, false); - all = all.concat(serviceDecorations.map(d => this.toDecorator(d))); + const resourceUri = title.owner.getResourceUri(); + if (resourceUri) { + const serviceDecorations = this.decorationsService.getDecoration(resourceUri, false); + all.push(...serviceDecorations.map(d => this.toDecorator(d))); } } return all; From 3a795e18657cc135696490442d58443a41ab85c2 Mon Sep 17 00:00:00 2001 From: Dennis Huebner Date: Fri, 9 Feb 2024 15:25:14 +0100 Subject: [PATCH 3/3] Applied re-view suggestions --- packages/core/src/browser/shell/tab-bar-decorator.ts | 11 +++++------ packages/core/src/browser/shell/tab-bars.ts | 5 ++--- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/core/src/browser/shell/tab-bar-decorator.ts b/packages/core/src/browser/shell/tab-bar-decorator.ts index a19b71a7b260a..7b9d6a9756e9a 100644 --- a/packages/core/src/browser/shell/tab-bar-decorator.ts +++ b/packages/core/src/browser/shell/tab-bar-decorator.ts @@ -75,22 +75,21 @@ export class TabBarDecoratorService implements FrontendApplicationContribution { */ getDecorations(title: Title): 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)); } if (Navigatable.is(title.owner)) { const resourceUri = title.owner.getResourceUri(); if (resourceUri) { const serviceDecorations = this.decorationsService.getDecoration(resourceUri, false); - all.push(...serviceDecorations.map(d => this.toDecorator(d))); + decorations.push(...serviceDecorations.map(d => this.fromDecoration(d))); } } - return all; + return decorations; } - protected toDecorator(decoration: Decoration): WidgetDecoration.Data { + protected fromDecoration(decoration: Decoration): WidgetDecoration.Data { const colorVariable = decoration.colorId && this.colors.toCssVariableName(decoration.colorId); return { tailDecorations: [ diff --git a/packages/core/src/browser/shell/tab-bars.ts b/packages/core/src/browser/shell/tab-bars.ts index 1a858707165ec..657df6ef7b734 100644 --- a/packages/core/src/browser/shell/tab-bars.ts +++ b/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'; @@ -294,8 +294,7 @@ export class TabBarRenderer extends TabBar.Renderer { if (!this.corePreferences?.get('workbench.editor.decorations.badges')) { return []; } - const tailDecorations = this.getDecorationData(renderData.title, 'tailDecorations') - .filter(acc => acc !== undefined).reduce((acc, current) => acc!.concat(current!), []); + const tailDecorations = ArrayUtils.coalesce(this.getDecorationData(renderData.title, 'tailDecorations')).flat(); if (tailDecorations === undefined || tailDecorations.length === 0) { return []; }