Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[vscode] support theme icons #8267

Merged
merged 1 commit into from
Jul 30, 2020
Merged

[vscode] support theme icons #8267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/monaco/src/browser/monaco-loader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export function loadMonaco(vsRequire: any): Promise<void> {
'vs/base/parts/quickopen/browser/quickOpenWidget',
'vs/base/parts/quickopen/browser/quickOpenModel',
'vs/base/common/filters',
'vs/platform/theme/common/themeService',
'vs/platform/theme/common/styler',
'vs/platform/theme/common/colorRegistry',
'vs/base/common/color',
Expand All @@ -81,7 +82,7 @@ export function loadMonaco(vsRequire: any): Promise<void> {
keybindingsRegistry: any, keybindingResolver: any, resolvedKeybinding: any, keybindingLabels: any,
keyCodes: any, mime: any, editorExtensions: any, simpleServices: any,
standaloneServices: any, standaloneLanguages: any, quickOpenWidget: any, quickOpenModel: any,
filters: any, styler: any, colorRegistry: any, color: any,
filters: any, themeService: any, styler: any, colorRegistry: any, color: any,
platform: any, modes: any, suggest: any, snippetParser: any,
configuration: any, configurationModels: any,
resolverService: any,
Expand All @@ -99,7 +100,7 @@ export function loadMonaco(vsRequire: any): Promise<void> {
resolverService, codeEditorService, codeEditorServiceImpl, markerService, openerService);
global.monaco.quickOpen = Object.assign({}, quickOpenWidget, quickOpenModel);
global.monaco.filters = filters;
global.monaco.theme = styler;
global.monaco.theme = Object.assign({}, themeService, styler);
global.monaco.color = Object.assign({}, colorRegistry, color);
global.monaco.platform = platform;
global.monaco.editorExtensions = editorExtensions;
Expand Down
4 changes: 4 additions & 0 deletions packages/monaco/src/typings/monaco/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -748,6 +748,10 @@ declare module monaco.theme {
export interface ThemeIcon {
readonly id: string;
}
export namespace ThemeIcon {
export function fromString(value: string): ThemeIcon | undefined;
export function asClassName(icon: ThemeIcon): string | undefined;
}
}

declare module monaco.color {
Expand Down
2 changes: 1 addition & 1 deletion packages/plugin-ext/src/common/plugin-api-rpc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -591,7 +591,7 @@ export interface TreeViewItem {
icon?: string;
iconUrl?: IconUrl;

themeIconId?: 'folder' | 'file';
themeIconId?: string;

resourceUri?: UriComponents;

Expand Down
1 change: 1 addition & 0 deletions packages/plugin-ext/src/common/plugin-protocol.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -616,6 +616,7 @@ export interface PluginCommand {
title: string;
category?: string;
iconUrl?: IconUrl;
themeIcon?: string;
}

export type IconUrl = string | { light: string; dark: string; };
Expand Down
9 changes: 7 additions & 2 deletions packages/plugin-ext/src/hosted/node/scanners/scanner-theia.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,18 +299,23 @@ export class TheiaPluginScanner implements PluginScanner {
}

protected readCommand({ command, title, category, icon }: PluginPackageCommand, pck: PluginPackage): PluginCommand {
let themeIcon: string | undefined;
let iconUrl: IconUrl | undefined;
if (icon) {
if (typeof icon === 'string') {
iconUrl = this.toPluginUrl(pck, icon);
if (icon.startsWith('$(')) {
themeIcon = icon;
} else {
iconUrl = this.toPluginUrl(pck, icon);
}
} else {
iconUrl = {
light: this.toPluginUrl(pck, icon.light),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess since icons from the theme implicitly have a light/dark form, it would be wrong to reference them here, right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, checked with VS Code that it does not expect codeicons here

dark: this.toPluginUrl(pck, icon.dark)
};
}
}
return { command, title, category, iconUrl };
return { command, title, category, iconUrl, themeIcon };
}

protected toPluginUrl(pck: PluginPackage, relativePath: string): string {
Expand Down
5 changes: 4 additions & 1 deletion packages/plugin-ext/src/main/browser/plugin-contribution-handler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,12 +313,15 @@ export class PluginContributionHandler {
return Disposable.NULL;
}
const toDispose = new DisposableCollection();
for (const { iconUrl, command, category, title } of contribution.commands) {
for (const { iconUrl, themeIcon, command, category, title } of contribution.commands) {
const reference = iconUrl && this.style.toIconClass(iconUrl);
const icon = themeIcon && monaco.theme.ThemeIcon.fromString(themeIcon);
let iconClass;
if (reference) {
toDispose.push(reference);
iconClass = reference.object.iconClass;
} else if (icon) {
iconClass = monaco.theme.ThemeIcon.asClassName(icon);
}
toDispose.push(this.registerCommand({ id: command, category, label: title, iconClass }));
}
Expand Down
8 changes: 4 additions & 4 deletions packages/plugin-ext/src/main/browser/quick-open-main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export class QuickOpenMainImpl implements QuickOpenMain, QuickOpenModel, Disposa
protected convertQuickInputButton(quickInputButton: QuickInputButton, index: number, toDispose: DisposableCollection): QuickInputTitleButtonHandle {
const currentIconPath = quickInputButton.iconPath;
let newIcon = '';
let newIconClass = '';
let newIconClass: string | undefined;
if ('id' in currentIconPath || currentIconPath instanceof ThemeIcon) {
newIconClass = this.resolveIconClassFromThemeIcon(currentIconPath);
} else if (currentIconPath instanceof URI) {
Expand All @@ -197,8 +197,8 @@ export class QuickOpenMainImpl implements QuickOpenMain, QuickOpenModel, Disposa
};
}

private resolveIconClassFromThemeIcon(themeIconID: ThemeIcon): string {
switch (themeIconID.id) {
private resolveIconClassFromThemeIcon(themeIcon: ThemeIcon): string | undefined {
switch (themeIcon.id) {
case 'folder': {
return this.labelProvider.folderIcon;
}
Expand All @@ -209,7 +209,7 @@ export class QuickOpenMainImpl implements QuickOpenMain, QuickOpenModel, Disposa
return 'fa fa-arrow-left';
}
default: {
return '';
return monaco.theme.ThemeIcon.asClassName(themeIcon);
}
}
}
Expand Down
7 changes: 5 additions & 2 deletions packages/plugin-ext/src/main/browser/view/plugin-tree-view-node-label-provider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,11 @@ export class PluginTreeViewNodeLabelProvider implements LabelProviderContributio
return node.icon;
}
if (node.themeIconId) {
const uri = node.resourceUri && new URI(node.resourceUri) || undefined;
return this.labelProvider.getIcon(URIIconReference.create(node.themeIconId, uri));
if (node.themeIconId === 'file' || node.themeIconId === 'folder') {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these two special-cased so we can get stuff like the "Java" icon for *.java files?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

correct

const uri = node.resourceUri && new URI(node.resourceUri) || undefined;
return this.labelProvider.getIcon(URIIconReference.create(node.themeIconId, uri));
}
return monaco.theme.ThemeIcon.asClassName({ id: node.themeIconId });
}
if (node.resourceUri) {
return this.labelProvider.getIcon(new URI(node.resourceUri));
Expand Down
2 changes: 1 addition & 1 deletion packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export interface TreeViewNode extends SelectableTreeNode {
contextValue?: string;
command?: Command;
resourceUri?: string;
themeIconId?: 'folder' | 'file';
themeIconId?: string | 'folder' | 'file';
tooltip?: string;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
description?: string | boolean | any;
Expand Down