Merge pull request microsoft#272378 from mjbvz/dev/mjbvz/custom-editor-icons

mjbvz · web-flow · commit 9f92d07a0bf9 · 2025-10-21T14:21:25.000-07:00
Allow custom editors to set custom icons
diff --git a/src/vs/base/browser/ui/iconLabel/iconlabel.css b/src/vs/base/browser/ui/iconLabel/iconlabel.css
@@ -33,9 +33,8 @@
 
 .monaco-icon-label-iconpath {
 	width: 16px;
-	height: 16px;
-	padding-left: 2px;
-	margin-top: 2px;
+	height: 22px;
+	margin-right: 6px;
 	display: flex;
 }
 
diff --git a/src/vs/workbench/api/browser/mainThreadCustomEditors.ts b/src/vs/workbench/api/browser/mainThreadCustomEditors.ts
@@ -671,6 +671,7 @@ class MainThreadCustomEditorModel extends ResourceWorkingCopy implements ICustom
 			viewType: this.viewType,
 			editorResource: this._editorResource,
 			customTitle: primaryEditor.getCustomTitle(),
+			iconPath: primaryEditor.iconPath,
 			backupId: '',
 			extension: primaryEditor.extension ? {
 				id: primaryEditor.extension.id.value,
diff --git a/src/vs/workbench/api/browser/mainThreadWebviewPanels.ts b/src/vs/workbench/api/browser/mainThreadWebviewPanels.ts
@@ -13,8 +13,7 @@ import { IStorageService } from '../../../platform/storage/common/storage.js';
 import { DiffEditorInput } from '../../common/editor/diffEditorInput.js';
 import { EditorInput } from '../../common/editor/editorInput.js';
 import { ExtensionKeyedWebviewOriginStore, WebviewOptions } from '../../contrib/webview/browser/webview.js';
-import { WebviewInput } from '../../contrib/webviewPanel/browser/webviewEditorInput.js';
-import { WebviewIcons } from '../../contrib/webviewPanel/browser/webviewIconManager.js';
+import { WebviewIcons, WebviewInput } from '../../contrib/webviewPanel/browser/webviewEditorInput.js';
 import { IWebViewShowOptions, IWebviewWorkbenchService } from '../../contrib/webviewPanel/browser/webviewWorkbenchService.js';
 import { editorGroupToColumn } from '../../services/editor/common/editorGroupColumn.js';
 import { GroupLocation, GroupsOrder, IEditorGroup, IEditorGroupsService, preferredSideBySideGroupDirection } from '../../services/editor/common/editorGroupsService.js';
@@ -171,7 +170,7 @@ export class MainThreadWebviewPanels extends Disposable implements extHostProtoc
 			options: reviveWebviewOptions(initData.panelOptions),
 			contentOptions: reviveWebviewContentOptions(initData.webviewOptions),
 			extension
-		}, this.webviewPanelViewType.fromExternal(viewType), initData.title, mainThreadShowOptions);
+		}, this.webviewPanelViewType.fromExternal(viewType), initData.title, undefined, mainThreadShowOptions);
 
 		this.addWebviewInput(handle, webview, { serializeBuffersForPostMessage: initData.serializeBuffersForPostMessage });
 	}
diff --git a/src/vs/workbench/browser/parts/editor/media/editortabscontrol.css b/src/vs/workbench/browser/parts/editor/media/editortabscontrol.css
@@ -34,8 +34,11 @@
 	cursor: pointer;
 }
 
-.monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label::before {
-	height: var(--editor-group-tab-height); /* tweak the icon size of the editor labels when icons are enabled */
+.monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label {
+	&::before,
+	& > .monaco-icon-label-iconpath {
+		height: var(--editor-group-tab-height); /* tweak the icon size of the editor labels when icons are enabled */
+	}
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .monaco-icon-label::after,
diff --git a/src/vs/workbench/common/editor/editorInput.ts b/src/vs/workbench/common/editor/editorInput.ts
@@ -183,7 +183,7 @@ export abstract class EditorInput extends AbstractEditorInput {
 	 * Returns the icon which represents this editor input.
 	 * If undefined, the default icon will be used.
 	 */
-	getIcon(): ThemeIcon | undefined {
+	getIcon(): ThemeIcon | URI | undefined {
 		return undefined;
 	}
 
diff --git a/src/vs/workbench/contrib/customEditor/browser/customEditorInput.ts b/src/vs/workbench/contrib/customEditor/browser/customEditorInput.ts
@@ -32,11 +32,14 @@ import { IEditorGroupsService } from '../../../services/editor/common/editorGrou
 import { IFilesConfigurationService } from '../../../services/filesConfiguration/common/filesConfigurationService.js';
 import { IWorkbenchLayoutService } from '../../../services/layout/browser/layoutService.js';
 import { IUntitledTextEditorService } from '../../../services/untitled/common/untitledTextEditorService.js';
+import { IThemeService } from '../../../../platform/theme/common/themeService.js';
+import { WebviewIcons } from '../../webviewPanel/browser/webviewEditorInput.js';
 
 interface CustomEditorInputInitInfo {
 	readonly resource: URI;
 	readonly viewType: string;
 	readonly customTitle: string | undefined;
+	readonly iconPath: WebviewIcons | undefined;
 }
 
 export class CustomEditorInput extends LazilyResolvedWebviewEditorInput {
@@ -87,6 +90,7 @@ export class CustomEditorInput extends LazilyResolvedWebviewEditorInput {
 		init: CustomEditorInputInitInfo,
 		webview: IOverlayWebview,
 		options: { startsDirty?: boolean; backupId?: string; untitledDocumentData?: VSBuffer; readonly oldResource?: URI },
+		@IThemeService themeService: IThemeService,
 		@IWebviewWorkbenchService webviewWorkbenchService: IWebviewWorkbenchService,
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
 		@ILabelService private readonly labelService: ILabelService,
@@ -99,7 +103,7 @@ export class CustomEditorInput extends LazilyResolvedWebviewEditorInput {
 		@IWorkbenchLayoutService private readonly layoutService: IWorkbenchLayoutService,
 		@ICustomEditorLabelService private readonly customEditorLabelService: ICustomEditorLabelService,
 	) {
-		super({ providedId: init.viewType, viewType: init.viewType, name: '' }, webview, webviewWorkbenchService);
+		super({ providedId: init.viewType, viewType: init.viewType, name: '', iconPath: init.iconPath }, webview, themeService, webviewWorkbenchService);
 		this._editorResource = init.resource;
 		this.oldResource = options.oldResource;
 		this._defaultDirtyState = options.startsDirty;
@@ -290,7 +294,7 @@ export class CustomEditorInput extends LazilyResolvedWebviewEditorInput {
 
 	public override copy(): EditorInput {
 		return CustomEditorInput.create(this.instantiationService,
-			{ resource: this.resource, viewType: this.viewType, customTitle: this._customTitle },
+			{ resource: this.resource, viewType: this.viewType, customTitle: this._customTitle, iconPath: this.iconPath, },
 			this.group,
 			this.webview.options);
 	}
diff --git a/src/vs/workbench/contrib/customEditor/browser/customEditorInputFactory.ts b/src/vs/workbench/contrib/customEditor/browser/customEditorInputFactory.ts
@@ -25,6 +25,7 @@ export interface CustomDocumentBackupData extends IWorkingCopyBackupMeta {
 	readonly editorResource: UriComponents;
 
 	readonly customTitle: string | undefined;
+	readonly iconPath: { dark: UriComponents; light: UriComponents } | undefined;
 
 	backupId: string;
 
@@ -99,6 +100,7 @@ export class CustomEditorInputSerializer extends WebviewEditorInputSerializer {
 			resource: data.editorResource,
 			viewType: data.viewType,
 			customTitle: data.title,
+			iconPath: data.iconPath,
 		}, webview, { startsDirty: data.dirty, backupId: data.backupId });
 		if (typeof data.group === 'number') {
 			customInput.updateGroup(data.group);
@@ -199,6 +201,9 @@ export class ComplexCustomWorkingCopyEditorHandler extends Disposable implements
 			resource: URI.revive(backupData.editorResource),
 			viewType: backupData.viewType,
 			customTitle: backupData.customTitle,
+			iconPath: backupData.iconPath
+				? { dark: URI.revive(backupData.iconPath.dark), light: URI.revive(backupData.iconPath.light) }
+				: undefined
 		}, webview, { backupId: backupData.backupId });
 		editor.updateGroup(0);
 		return editor;
diff --git a/src/vs/workbench/contrib/customEditor/browser/customEditors.ts b/src/vs/workbench/contrib/customEditor/browser/customEditors.ts
@@ -138,10 +138,10 @@ export class CustomEditorService extends Disposable implements ICustomEditorServ
 					},
 					{
 						createEditorInput: ({ resource }, group) => {
-							return { editor: CustomEditorInput.create(this.instantiationService, { resource, viewType: contributedEditor.id, customTitle: undefined }, group.id) };
+							return { editor: CustomEditorInput.create(this.instantiationService, { resource, viewType: contributedEditor.id, customTitle: undefined, iconPath: undefined }, group.id) };
 						},
 						createUntitledEditorInput: ({ resource }, group) => {
-							return { editor: CustomEditorInput.create(this.instantiationService, { resource: resource ?? URI.from({ scheme: Schemas.untitled, authority: `Untitled-${this._untitledCounter++}` }), viewType: contributedEditor.id, customTitle: undefined }, group.id) };
+							return { editor: CustomEditorInput.create(this.instantiationService, { resource: resource ?? URI.from({ scheme: Schemas.untitled, authority: `Untitled-${this._untitledCounter++}` }), viewType: contributedEditor.id, customTitle: undefined, iconPath: undefined }, group.id) };
 						},
 						createDiffEditorInput: (diffEditorInput, group) => {
 							return { editor: this.createDiffEditorInput(diffEditorInput, contributedEditor.id, group) };
@@ -157,8 +157,8 @@ export class CustomEditorService extends Disposable implements ICustomEditorServ
 		editorID: string,
 		group: IEditorGroup
 	): DiffEditorInput {
-		const modifiedOverride = CustomEditorInput.create(this.instantiationService, { resource: assertReturnsDefined(editor.modified.resource), viewType: editorID, customTitle: undefined }, group.id, { customClasses: 'modified' });
-		const originalOverride = CustomEditorInput.create(this.instantiationService, { resource: assertReturnsDefined(editor.original.resource), viewType: editorID, customTitle: undefined }, group.id, { customClasses: 'original' });
+		const modifiedOverride = CustomEditorInput.create(this.instantiationService, { resource: assertReturnsDefined(editor.modified.resource), viewType: editorID, customTitle: undefined, iconPath: undefined }, group.id, { customClasses: 'modified' });
+		const originalOverride = CustomEditorInput.create(this.instantiationService, { resource: assertReturnsDefined(editor.original.resource), viewType: editorID, customTitle: undefined, iconPath: undefined }, group.id, { customClasses: 'original' });
 		return this.instantiationService.createInstance(DiffEditorInput, editor.label, editor.description, originalOverride, modifiedOverride, true);
 	}
 
@@ -259,7 +259,7 @@ export class CustomEditorService extends Disposable implements ICustomEditorServ
 				let replacement: EditorInput | IResourceEditorInput;
 				if (possibleEditors.defaultEditor) {
 					const viewType = possibleEditors.defaultEditor.id;
-					replacement = CustomEditorInput.create(this.instantiationService, { resource: newResource, viewType, customTitle: undefined }, group);
+					replacement = CustomEditorInput.create(this.instantiationService, { resource: newResource, viewType, customTitle: undefined, iconPath: undefined }, group);
 				} else {
 					replacement = { resource: newResource, options: { override: DEFAULT_EDITOR_ASSOCIATION.id } };
 				}
diff --git a/src/vs/workbench/contrib/search/browser/anythingQuickAccess.ts b/src/vs/workbench/contrib/search/browser/anythingQuickAccess.ts
@@ -992,7 +992,7 @@ export class AnythingQuickAccessProvider extends PickerQuickAccessProvider<IAnyt
 		let description: string | undefined = undefined;
 		let isDirty: boolean | undefined = undefined;
 		let extraClasses: string[];
-		let icon: ThemeIcon | undefined = undefined;
+		let icon: ThemeIcon | URI | undefined = undefined;
 
 		if (isEditorInput(resourceOrEditor)) {
 			resource = EditorResourceAccessor.getOriginalUri(resourceOrEditor);
diff --git a/src/vs/workbench/contrib/update/browser/releaseNotesEditor.ts b/src/vs/workbench/contrib/update/browser/releaseNotesEditor.ts
@@ -119,6 +119,7 @@ export class ReleaseNotesManager extends Disposable {
 				},
 				'releaseNotes',
 				title,
+				undefined,
 				{ group: ACTIVE_GROUP, preserveFocus: false });
 
 			const disposables = new DisposableStore();
diff --git a/src/vs/workbench/contrib/webviewPanel/browser/webviewEditorInput.ts b/src/vs/workbench/contrib/webviewPanel/browser/webviewEditorInput.ts
@@ -8,15 +8,17 @@ import { Schemas } from '../../../../base/common/network.js';
 import { URI } from '../../../../base/common/uri.js';
 import { generateUuid } from '../../../../base/common/uuid.js';
 import { IContextKeyService } from '../../../../platform/contextkey/common/contextkey.js';
+import { isDark } from '../../../../platform/theme/common/theme.js';
+import { IThemeService } from '../../../../platform/theme/common/themeService.js';
 import { EditorInputCapabilities, GroupIdentifier, IUntypedEditorInput, Verbosity } from '../../../common/editor.js';
 import { EditorInput } from '../../../common/editor/editorInput.js';
 import { IOverlayWebview } from '../../webview/browser/webview.js';
-import { WebviewIconManager, WebviewIcons } from './webviewIconManager.js';
 
 export interface WebviewInputInitInfo {
 	readonly viewType: string;
 	readonly providedId: string | undefined;
 	readonly name: string;
+	readonly iconPath: WebviewIcons | undefined;
 }
 
 export class WebviewInput extends EditorInput {
@@ -58,7 +60,7 @@ export class WebviewInput extends EditorInput {
 	constructor(
 		init: WebviewInputInitInfo,
 		webview: IOverlayWebview,
-		private readonly _iconManager: WebviewIconManager,
+		@IThemeService private readonly _themeService: IThemeService,
 	) {
 		super();
 
@@ -67,6 +69,11 @@ export class WebviewInput extends EditorInput {
 
 		this._name = init.name;
 		this._webview = webview;
+
+		this._register(_themeService.onDidColorThemeChange(() => {
+			// Potentially update icon
+			this._onDidChangeLabel.fire();
+		}));
 	}
 
 	override dispose() {
@@ -104,13 +111,23 @@ export class WebviewInput extends EditorInput {
 		return this.webview.extension;
 	}
 
+	override getIcon(): URI | undefined {
+		if (!this._iconPath) {
+			return;
+		}
+
+		return isDark(this._themeService.getColorTheme().type)
+			? this._iconPath.dark
+			: (this._iconPath.light ?? this._iconPath.dark);
+	}
+
 	public get iconPath() {
 		return this._iconPath;
 	}
 
 	public set iconPath(value: WebviewIcons | undefined) {
 		this._iconPath = value;
-		this._iconManager.setIcons(this._resourceId, value);
+		this._onDidChangeLabel.fire();
 	}
 
 	public override matches(other: EditorInput | IUntypedEditorInput): boolean {
@@ -138,3 +155,8 @@ export class WebviewInput extends EditorInput {
 		return this._webview.claim(claimant, targetWindow, scopedContextKeyService);
 	}
 }
+export interface WebviewIcons {
+	readonly light: URI;
+	readonly dark: URI;
+}
+
diff --git a/src/vs/workbench/contrib/webviewPanel/browser/webviewEditorInputSerializer.ts b/src/vs/workbench/contrib/webviewPanel/browser/webviewEditorInputSerializer.ts
@@ -8,8 +8,7 @@ import { ExtensionIdentifier } from '../../../../platform/extensions/common/exte
 import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
 import { IEditorSerializer } from '../../../common/editor.js';
 import { WebviewContentOptions, WebviewExtensionDescription, WebviewOptions } from '../../webview/browser/webview.js';
-import { WebviewIcons } from './webviewIconManager.js';
-import { WebviewInput } from './webviewEditorInput.js';
+import { WebviewIcons, WebviewInput } from './webviewEditorInput.js';
 import { IWebviewWorkbenchService } from './webviewWorkbenchService.js';
 
 export type SerializedWebviewOptions = WebviewOptions & WebviewContentOptions;
diff --git a/src/vs/workbench/contrib/webviewPanel/browser/webviewIconManager.ts b/src/vs/workbench/contrib/webviewPanel/browser/webviewIconManager.ts
diff --git a/src/vs/workbench/contrib/webviewPanel/browser/webviewWorkbenchService.ts b/src/vs/workbench/contrib/webviewPanel/browser/webviewWorkbenchService.ts

Original file line number	Diff line number	Diff line change
`@@ -34,8 +34,11 @@`
`34`	`34`	`cursor: pointer;`
`35`	`35`	`}`
`36`	`36`
`37`		`-.monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label::before {`
`38`		`- height: var(--editor-group-tab-height); /* tweak the icon size of the editor labels when icons are enabled */`
	`37`	`+.monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label {`
	`38`	`+ &::before,`
	`39`	`+ & > .monaco-icon-label-iconpath {`
	`40`	`+ height: var(--editor-group-tab-height); /* tweak the icon size of the editor labels when icons are enabled */`
	`41`	`+ }`
`39`	`42`	`}`
`40`	`43`
`41`	`44`	`.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .monaco-icon-label::after,`
Original file line number	Diff line number	Diff line change
`@@ -183,7 +183,7 @@ export abstract class EditorInput extends AbstractEditorInput {`
`183`	`183`	`* Returns the icon which represents this editor input.`
`184`	`184`	`* If undefined, the default icon will be used.`
`185`	`185`	`*/`
`186`		`- getIcon(): ThemeIcon \| undefined {`
	`186`	`+ getIcon(): ThemeIcon \| URI \| undefined {`
`187`	`187`	`return undefined;`
`188`	`188`	`}`
`189`	`189`