Fix #66213

src/vs/workbench/parts/extensions/browser/extensionsWidgets.ts

@@ -4,61 +4,49 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./media/extensionsWidgets';
-import { IDisposable, dispose } from 'vs/base/common/lifecycle';
-import { IExtension, IExtensionsWorkbenchService } from '../common/extensions';
+import { Disposable } from 'vs/base/common/lifecycle';
+import { IExtension, IExtensionsWorkbenchService, IExtensionContainer } from '../common/extensions';
 import { append, $, addClass } from 'vs/base/browser/dom';
 import * as platform from 'vs/base/common/platform';
 import { localize } from 'vs/nls';
 
-export interface IOptions {
-	extension?: IExtension;
-	small?: boolean;
-}
-
-export class Label implements IDisposable {
-
-	private listener: IDisposable;
+export abstract class ExtensionWidget extends Disposable implements IExtensionContainer {
 	private _extension: IExtension;
 	get extension(): IExtension { return this._extension; }
-	set extension(extension: IExtension) { this._extension = extension; this.render(); }
+	set extension(extension: IExtension) { this._extension = extension; this.update(); }
+	update(): void { this.render(); }
+	abstract render(): void;
+}
+
+export class Label extends ExtensionWidget {
 
 	constructor(
 		private element: HTMLElement,
 		private fn: (extension: IExtension) => string,
 		@IExtensionsWorkbenchService extensionsWorkbenchService: IExtensionsWorkbenchService
 	) {
+		super();
 		this.render();
-		this.listener = extensionsWorkbenchService.onChange(this.render, this);
 	}
 
-	private render(): void {
+	render(): void {
 		this.element.textContent = this.extension ? this.fn(this.extension) : '';
 	}
-
-	dispose(): void {
-		this.listener = dispose(this.listener);
-	}
 }
 
-export class InstallCountWidget implements IDisposable {
-
-	private disposables: IDisposable[] = [];
-	private _extension: IExtension;
-	get extension(): IExtension { return this._extension; }
-	set extension(extension: IExtension) { this._extension = extension; this.render(); }
+export class InstallCountWidget extends ExtensionWidget {
 
 	constructor(
 		private container: HTMLElement,
-		private options: IOptions,
+		private small: boolean,
 		@IExtensionsWorkbenchService extensionsWorkbenchService: IExtensionsWorkbenchService
 	) {
-		this._extension = options.extension;
-		this.disposables.push(extensionsWorkbenchService.onChange(() => this.render()));
+		super();
 		addClass(container, 'extension-install-count');
 		this.render();
 	}
 
-	private render(): void {
+	render(): void {
 		this.container.innerHTML = '';
 
 		if (!this.extension) {
@@ -73,7 +61,7 @@ export class InstallCountWidget implements IDisposable {
 
 		let installLabel: string;
 
-		if (this.options.small) {
+		if (this.small) {
 			if (installCount > 1000000) {
 				installLabel = `${Math.floor(installCount / 100000) / 10}M`;
 			} else if (installCount > 1000) {
@@ -90,36 +78,26 @@ export class InstallCountWidget implements IDisposable {
 		const count = append(this.container, $('span.count'));
 		count.textContent = installLabel;
 	}
-
-	dispose(): void {
-		this.disposables = dispose(this.disposables);
-	}
 }
 
-export class RatingsWidget implements IDisposable {
-
-	private disposables: IDisposable[] = [];
-	private _extension: IExtension;
-	get extension(): IExtension { return this._extension; }
-	set extension(extension: IExtension) { this._extension = extension; this.render(); }
+export class RatingsWidget extends ExtensionWidget {
 
 	constructor(
 		private container: HTMLElement,
-		private options: IOptions,
+		private small: boolean,
 		@IExtensionsWorkbenchService extensionsWorkbenchService: IExtensionsWorkbenchService
 	) {
-		this._extension = options.extension;
-		this.disposables.push(extensionsWorkbenchService.onChange(() => this.render()));
+		super();
 		addClass(container, 'extension-ratings');
 
-		if (options.small) {
+		if (this.small) {
 			addClass(container, 'small');
 		}
 
 		this.render();
 	}
 
-	private render(): void {
+	render(): void {
 		this.container.innerHTML = '';
 
 		if (!this.extension) {
@@ -130,13 +108,13 @@ export class RatingsWidget implements IDisposable {
 			return;
 		}
 
-		if (this.options.small && !this.extension.ratingCount) {
+		if (this.small && !this.extension.ratingCount) {
 			return;
 		}
 
 		const rating = Math.round(this.extension.rating * 2) / 2;
 
-		if (this.options.small) {
+		if (this.small) {
 			append(this.container, $('span.full.star'));
 
 			const count = append(this.container, $('span.count'));
@@ -154,8 +132,4 @@ export class RatingsWidget implements IDisposable {
 			}
 		}
 	}
-
-	dispose(): void {
-		this.disposables = dispose(this.disposables);
-	}
 }

src/vs/workbench/parts/extensions/common/extensions.ts

@@ -11,6 +11,8 @@ import { IQueryOptions, IExtensionManifest, LocalExtensionType, EnablementState,
 import { IViewContainersRegistry, ViewContainer, Extensions as ViewContainerExtensions } from 'vs/workbench/common/views';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { CancellationToken } from 'vs/base/common/cancellation';
+import { Disposable } from 'vs/base/common/lifecycle';
+import { areSameExtensions } from 'vs/platform/extensionManagement/common/extensionManagementUtil';
 
 export const VIEWLET_ID = 'workbench.view.extensions';
 export const VIEW_CONTAINER: ViewContainer = Registry.as<IViewContainersRegistry>(ViewContainerExtensions.ViewContainersRegistry).registerViewContainer(VIEWLET_ID);
@@ -106,3 +108,35 @@ export interface IExtensionsConfiguration {
 	showRecommendationsOnlyOnDemand: boolean;
 	closeExtensionDetailsOnViewChange: boolean;
 }
+
+export interface IExtensionContainer {
+	extension: IExtension | null;
+	update(): void;
+}
+
+export class ExtensionContainers extends Disposable {
+
+	constructor(
+		private readonly containers: IExtensionContainer[],
+		@IExtensionsWorkbenchService extensionsWorkbenchService: IExtensionsWorkbenchService
+	) {
+		super();
+		this._register(extensionsWorkbenchService.onChange(this.update, this));
+	}
+
+	set extension(extension: IExtension) {
+		this.containers.forEach(c => c.extension = extension);
+	}
+
+	private update(extension: IExtension): void {
+		for (const container of this.containers) {
+			if (extension && container.extension) {
+				if (areSameExtensions(container.extension.identifier, extension.identifier)) {
+					container.extension = extension;
+				}
+			} else {
+				container.update();
+			}
+		}
+	}
+}
\ No newline at end of file

src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts

@@ -23,7 +23,7 @@ import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiati
 import { IExtensionManifest, IKeyBinding, IView, IExtensionTipsService, LocalExtensionType, IViewContainer } from 'vs/platform/extensionManagement/common/extensionManagement';
 import { ResolvedKeybinding, KeyMod, KeyCode } from 'vs/base/common/keyCodes';
 import { ExtensionsInput } from 'vs/workbench/parts/extensions/common/extensionsInput';
-import { IExtensionsWorkbenchService, IExtensionsViewlet, VIEWLET_ID, IExtension, IExtensionDependencies } from 'vs/workbench/parts/extensions/common/extensions';
+import { IExtensionsWorkbenchService, IExtensionsViewlet, VIEWLET_ID, IExtension, IExtensionDependencies, ExtensionContainers } from 'vs/workbench/parts/extensions/common/extensions';
 import { RatingsWidget, InstallCountWidget } from 'vs/workbench/parts/extensions/browser/extensionsWidgets';
 import { EditorOptions } from 'vs/workbench/common/editor';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
@@ -348,29 +348,26 @@ export class ExtensionEditor extends BaseEditor {
 					this.repository.style.display = 'none';
 				}
 
-				const install = this.instantiationService.createInstance(InstallCountWidget, this.installCount, { extension });
-				this.transientDisposables.push(install);
-
-				const ratings = this.instantiationService.createInstance(RatingsWidget, this.rating, { extension });
-				this.transientDisposables.push(ratings);
-
-				const maliciousStatusAction = this.instantiationService.createInstance(MaliciousStatusLabelAction, true);
-				const disabledStatusAction = this.instantiationService.createInstance(DisabledStatusLabelAction, runningExtensions);
-				const installAction = this.instantiationService.createInstance(CombinedInstallAction);
-				const updateAction = this.instantiationService.createInstance(UpdateAction);
-				const enableAction = this.instantiationService.createInstance(EnableDropDownAction, extension, runningExtensions);
-				const disableAction = this.instantiationService.createInstance(DisableDropDownAction, extension, runningExtensions);
+				const widgets = [
+					this.instantiationService.createInstance(InstallCountWidget, this.installCount, false),
+					this.instantiationService.createInstance(RatingsWidget, this.rating, false)
+				];
 				const reloadAction = this.instantiationService.createInstance(ReloadAction);
-
-				installAction.extension = extension;
-				maliciousStatusAction.extension = extension;
-				disabledStatusAction.extension = extension;
-				updateAction.extension = extension;
-				reloadAction.extension = extension;
+				const actions = [
+					reloadAction,
+					this.instantiationService.createInstance(UpdateAction),
+					this.instantiationService.createInstance(EnableDropDownAction, runningExtensions),
+					this.instantiationService.createInstance(DisableDropDownAction, runningExtensions),
+					this.instantiationService.createInstance(CombinedInstallAction),
+					this.instantiationService.createInstance(MaliciousStatusLabelAction, true),
+					this.instantiationService.createInstance(DisabledStatusLabelAction, runningExtensions)
+				];
+				const extensionContainers: ExtensionContainers = this.instantiationService.createInstance(ExtensionContainers, [...actions, ...widgets]);
+				extensionContainers.extension = extension;
 
 				this.extensionActionBar.clear();
-				this.extensionActionBar.push([reloadAction, updateAction, enableAction, disableAction, installAction, maliciousStatusAction, disabledStatusAction], { icon: true, label: true });
-				this.transientDisposables.push(enableAction, updateAction, reloadAction, disableAction, installAction, maliciousStatusAction, disabledStatusAction);
+				this.extensionActionBar.push(actions, { icon: true, label: true });
+				this.transientDisposables.push(...[...actions, extensionContainers]);
 
 				this.setSubText(extension, reloadAction);
 				this.content.innerHTML = ''; // Clear content before setting navbar actions.

src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts

@@ -13,7 +13,7 @@ import { IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
 import { IPagedRenderer } from 'vs/base/browser/ui/list/listPaging';
 import { Event } from 'vs/base/common/event';
 import { domEvent } from 'vs/base/browser/event';
-import { IExtension, IExtensionsWorkbenchService } from 'vs/workbench/parts/extensions/common/extensions';
+import { IExtension, IExtensionsWorkbenchService, ExtensionContainers } from 'vs/workbench/parts/extensions/common/extensions';
 import { InstallAction, UpdateAction, ManageExtensionAction, ReloadAction, extensionButtonProminentBackground, extensionButtonProminentForeground, MaliciousStatusLabelAction, ExtensionActionItem } from 'vs/workbench/parts/extensions/electron-browser/extensionsActions';
 import { areSameExtensions } from 'vs/platform/extensionManagement/common/extensionManagementUtil';
 import { Label, RatingsWidget, InstallCountWidget } from 'vs/workbench/parts/extensions/browser/extensionsWidgets';
@@ -99,31 +99,28 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		});
 		actionbar.onDidRun(({ error }) => error && this.notificationService.error(error));
 
-		const versionWidget = this.instantiationService.createInstance(Label, version, (e: IExtension) => e.version);
-		const installCountWidget = this.instantiationService.createInstance(InstallCountWidget, installCount, { small: true });
-		const ratingsWidget = this.instantiationService.createInstance(RatingsWidget, ratings, { small: true });
-
-		const maliciousStatusAction = this.instantiationService.createInstance(MaliciousStatusLabelAction, false);
-		const installAction = this.instantiationService.createInstance(InstallAction);
-		const updateAction = this.instantiationService.createInstance(UpdateAction);
-		const reloadAction = this.instantiationService.createInstance(ReloadAction);
-		const manageAction = this.instantiationService.createInstance(ManageExtensionAction);
-
-		actionbar.push([updateAction, reloadAction, installAction, maliciousStatusAction, manageAction], actionOptions);
-		const disposables = [versionWidget, installCountWidget, ratingsWidget, maliciousStatusAction, updateAction, installAction, reloadAction, manageAction, actionbar, bookmarkStyler];
+		const widgets = [
+			this.instantiationService.createInstance(Label, version, (e: IExtension) => e.version),
+			this.instantiationService.createInstance(InstallCountWidget, installCount, true),
+			this.instantiationService.createInstance(RatingsWidget, ratings, true)
+		];
+		const actions = [
+			this.instantiationService.createInstance(UpdateAction),
+			this.instantiationService.createInstance(ReloadAction),
+			this.instantiationService.createInstance(InstallAction),
+			this.instantiationService.createInstance(MaliciousStatusLabelAction, false),
+			this.instantiationService.createInstance(ManageExtensionAction)
+		];
+		const extensionContainers: ExtensionContainers = this.instantiationService.createInstance(ExtensionContainers, [...actions, ...widgets]);
+
+		actionbar.push(actions, actionOptions);
+		const disposables = [...actions, ...widgets, actionbar, bookmarkStyler, extensionContainers];
 
 		return {
 			root, element, icon, name, installCount, ratings, author, description, disposables, actionbar,
 			extensionDisposables: [],
 			set extension(extension: IExtension) {
-				versionWidget.extension = extension;
-				installCountWidget.extension = extension;
-				ratingsWidget.extension = extension;
-				maliciousStatusAction.extension = extension;
-				installAction.extension = extension;
-				updateAction.extension = extension;
-				reloadAction.extension = extension;
-				manageAction.extension = extension;
+				extensionContainers.extension = extension;
 			}
 		};
 	}