Skip to content

Commit

Permalink
Show decorations in the editor tabs (eclipse-theia#13301)
Browse files Browse the repository at this point in the history
  • Loading branch information
dhuebner committed Feb 16, 2024
1 parent a433d42 commit e9908af
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 4 deletions.
6 changes: 6 additions & 0 deletions packages/core/src/browser/core-preferences.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down
34 changes: 32 additions & 2 deletions packages/core/src/browser/shell/tab-bar-decorator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -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));
}
Expand All @@ -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 : ''
}
]
};
}
}
37 changes: 35 additions & 2 deletions packages/core/src/browser/shell/tab-bars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(
{
Expand All @@ -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)
),
Expand Down Expand Up @@ -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) {
Expand Down
6 changes: 6 additions & 0 deletions packages/core/src/browser/style/tabs.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit e9908af

Please sign in to comment.