fix mcp server icon in extensions view (microsoft#250727)

Author: sandy081

src/vs/workbench/contrib/mcp/browser/mcpServerWidgets.ts

@@ -18,7 +18,7 @@ import { IHoverService } from '../../../../platform/hover/browser/hover.js';
 import { IOpenerService } from '../../../../platform/opener/common/opener.js';
 import { verifiedPublisherIcon } from '../../../services/extensionManagement/common/extensionsIcons.js';
 import { installCountIcon, starEmptyIcon, starFullIcon, starHalfIcon } from '../../extensions/browser/extensionsIcons.js';
-import { IMcpServerContainer, IWorkbenchMcpServer } from '../common/mcpTypes.js';
+import { IMcpServerContainer, IWorkbenchMcpServer, mcpServerIcon } from '../common/mcpTypes.js';
 
 export abstract class McpServerWidget extends Disposable implements IMcpServerContainer {
 	private _mcpServer: IWorkbenchMcpServer | null = null;
@@ -42,6 +42,71 @@ export function onClick(element: HTMLElement, callback: () => void): IDisposable
 	return disposables;
 }
 
+export class McpServerIconWidget extends McpServerWidget {
+
+	private readonly disposables = this._register(new DisposableStore());
+	private readonly element: HTMLElement;
+	private readonly iconElement: HTMLImageElement;
+	private readonly defaultIconElement: HTMLElement;
+
+	private iconUrl: string | undefined;
+
+	constructor(
+		container: HTMLElement,
+	) {
+		super();
+		this.element = dom.append(container, dom.$('.extension-icon'));
+
+		this.iconElement = dom.append(this.element, dom.$('img.icon', { alt: '' }));
+		this.iconElement.style.display = 'none';
+
+		this.defaultIconElement = dom.append(this.element, dom.$(ThemeIcon.asCSSSelector(mcpServerIcon)));
+		this.defaultIconElement.style.display = 'none';
+
+		this.render();
+		this._register(toDisposable(() => this.clear()));
+	}
+
+	private clear(): void {
+		this.iconUrl = undefined;
+		this.iconElement.src = '';
+		this.iconElement.style.display = 'none';
+		this.defaultIconElement.style.display = 'none';
+		this.disposables.clear();
+	}
+
+	render(): void {
+		if (!this.mcpServer) {
+			this.clear();
+			return;
+		}
+
+		if (this.mcpServer.iconUrl) {
+			this.iconElement.style.display = 'inherit';
+			this.defaultIconElement.style.display = 'none';
+			if (this.iconUrl !== this.mcpServer.iconUrl) {
+				this.iconUrl = this.mcpServer.iconUrl;
+				this.disposables.add(dom.addDisposableListener(this.iconElement, 'error', () => {
+					this.iconElement.style.display = 'none';
+					this.defaultIconElement.style.display = 'inherit';
+				}, { once: true }));
+				this.iconElement.src = this.iconUrl;
+				if (!this.iconElement.complete) {
+					this.iconElement.style.visibility = 'hidden';
+					this.iconElement.onload = () => this.iconElement.style.visibility = 'inherit';
+				} else {
+					this.iconElement.style.visibility = 'inherit';
+				}
+			}
+		} else {
+			this.iconUrl = undefined;
+			this.iconElement.style.display = 'none';
+			this.iconElement.src = '';
+			this.defaultIconElement.style.display = 'inherit';
+		}
+	}
+}
+
 export class PublisherWidget extends McpServerWidget {
 
 	private element: HTMLElement | undefined;

src/vs/workbench/contrib/mcp/browser/mcpServersView.ts

@@ -23,12 +23,11 @@ import { IThemeService } from '../../../../platform/theme/common/themeService.js
 import { getLocationBasedViewColors, ViewPane } from '../../../browser/parts/views/viewPane.js';
 import { IViewletViewOptions } from '../../../browser/parts/views/viewsViewlet.js';
 import { IViewDescriptorService } from '../../../common/views.js';
-import { IMcpWorkbenchService, IWorkbenchMcpServer, McpServerContainers, mcpServerIcon } from '../common/mcpTypes.js';
+import { IMcpWorkbenchService, IWorkbenchMcpServer, McpServerContainers } from '../common/mcpTypes.js';
 import { DropDownAction, InstallAction, ManageMcpServerAction } from './mcpServerActions.js';
-import { PublisherWidget, InstallCountWidget, RatingsWidget } from './mcpServerWidgets.js';
+import { PublisherWidget, InstallCountWidget, RatingsWidget, McpServerIconWidget } from './mcpServerWidgets.js';
 import { ActionRunner, IAction, Separator } from '../../../../base/common/actions.js';
 import { IActionViewItemOptions } from '../../../../base/browser/ui/actionbar/actionViewItems.js';
-import { ThemeIcon } from '../../../../base/common/themables.js';
 
 export class McpServersListView extends ViewPane {
 
@@ -136,7 +135,6 @@ export class McpServersListView extends ViewPane {
 interface IMcpServerTemplateData {
 	root: HTMLElement;
 	element: HTMLElement;
-	icon: HTMLElement;
 	name: HTMLElement;
 	description: HTMLElement;
 	installCount: HTMLElement;
@@ -159,7 +157,8 @@ class McpServerRenderer implements IListRenderer<IWorkbenchMcpServer, IMcpServer
 
 	renderTemplate(root: HTMLElement): IMcpServerTemplateData {
 		const element = dom.append(root, dom.$('.mcp-server-item.extension-list-item'));
-		const icon = dom.append(element, dom.$('.icon-container'));
+		const iconContainer = dom.append(element, dom.$('.icon-container'));
+		const iconWidget = this.instantiationService.createInstance(McpServerIconWidget, iconContainer);
 		const details = dom.append(element, dom.$('.details'));
 		const headerContainer = dom.append(details, dom.$('.header-container'));
 		const header = dom.append(headerContainer, dom.$('.header'));
@@ -188,6 +187,7 @@ class McpServerRenderer implements IListRenderer<IWorkbenchMcpServer, IMcpServer
 		];
 
 		const widgets = [
+			iconWidget,
 			publisherWidget,
 			this.instantiationService.createInstance(InstallCountWidget, installCount, true),
 			this.instantiationService.createInstance(RatingsWidget, ratings, true),
@@ -198,7 +198,7 @@ class McpServerRenderer implements IListRenderer<IWorkbenchMcpServer, IMcpServer
 		const disposable = combinedDisposable(...actions, ...widgets, actionbar, actionBarListener, extensionContainers);
 
 		return {
-			root, element, icon, name, description, installCount, ratings, disposables: [disposable], actionbar,
+			root, element, name, description, installCount, ratings, disposables: [disposable], actionbar,
 			mcpServerDisposables: [],
 			set mcpServer(mcpServer: IWorkbenchMcpServer) {
 				extensionContainers.mcpServer = mcpServer;
@@ -210,25 +210,6 @@ class McpServerRenderer implements IListRenderer<IWorkbenchMcpServer, IMcpServer
 		data.element.classList.remove('loading');
 		data.mcpServerDisposables = dispose(data.mcpServerDisposables);
 		data.root.setAttribute('data-mcp-server-id', mcpServer.id);
-
-		dom.clearNode(data.icon);
-		if (mcpServer.iconUrl) {
-			const icon = dom.append(data.icon, dom.$<HTMLImageElement>('img.icon', { alt: '' }));
-			data.mcpServerDisposables.push(dom.addDisposableListener(icon, 'error', () => {
-				dom.clearNode(data.icon);
-				dom.append(data.icon, dom.$(ThemeIcon.asCSSSelector(mcpServerIcon)));
-			}, { once: true }));
-			icon.src = mcpServer.iconUrl;
-			if (!icon.complete) {
-				data.icon.style.visibility = 'hidden';
-				icon.onload = () => icon.style.visibility = 'inherit';
-			} else {
-				icon.style.visibility = 'inherit';
-			}
-		} else {
-			dom.append(data.icon, dom.$(ThemeIcon.asCSSSelector(mcpServerIcon)));
-		}
-
 		data.name.textContent = mcpServer.label;
 		data.description.textContent = mcpServer.description;