dynamic ratings widget

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

@@ -98,10 +98,8 @@ export class ExtensionEditor extends BaseEditor {
 			this.rating.onclick = finalHandler(e => shell.openExternal(`${ extensionUrl }#review-details`));
 		}
 
-		if (extension.rating !== null) {
-			const ratings = new RatingsWidget(this.rating, input.model, extension);
-			this.transientDisposables.push(ratings);
-		}
+		const ratings = new RatingsWidget(this.rating, input.model, extension);
+		this.transientDisposables.push(ratings);
 
 		if (!extension.readmeUrl) {
 			// TODO@Joao

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

@@ -314,8 +314,6 @@ export class UpdateAction extends Action {
 		const isInstalled = this.extension.state === ExtensionState.Installed;
 		const canUpdate = semver.gt(this.extension.latestVersion, this.extension.version);
 
-		console.log(this.extension.latestVersion, this.extension.version);
-
 		this.enabled = canInstall && isInstalled && canUpdate;
 		this.class = this.enabled ? UpdateAction.EnabledClass : UpdateAction.DisabledClass;
 	}

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

@@ -13,6 +13,7 @@ import { IDelegate } from 'vs/base/browser/ui/list/list';
 import { IPagedRenderer } from 'vs/base/browser/ui/list/listPaging';
 import { IExtension, ExtensionsModel } from './extensionsModel';
 import { CombinedInstallAction, UpdateAction } from './extensionsActions';
+import { Label } from './extensionsWidgets';
 
 export interface ITemplateData {
 	extension: IExtension;
@@ -84,15 +85,17 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		data.extension = extension;
 		data.icon.style.backgroundImage = `url("${ extension.iconUrl }")`;
 		data.name.textContent = extension.displayName;
-		data.version.textContent = extension.version;
 		data.author.textContent = extension.publisherDisplayName;
 		data.description.textContent = extension.description;
 		data.actionbar.clear();
 
+		const version = new Label(data.version, this.model, extension, e => e.version);
+
 		const installAction = new CombinedInstallAction(this.model, extension);
 		const updateAction = new UpdateAction(this.model, extension);
 		data.actionbar.push([updateAction, installAction], actionOptions);
-		data.disposables.push(installAction, updateAction);
+
+		data.disposables.push(version, installAction, updateAction);
 	}
 
 	disposeTemplate(data: ITemplateData): void {

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

@@ -185,8 +185,6 @@ export class ExtensionsModel {
 		return this.galleryService.query(options).then(result => {
 			const installedByGalleryId = index(this.installed, e => e.local.metadata ? e.local.metadata.id : '');
 
-			console.log(installedByGalleryId);
-
 			return mapPager(result, gallery => {
 				const id = gallery.id;
 				const installed = installedByGalleryId[id];
@@ -218,8 +216,6 @@ export class ExtensionsModel {
 			return TPromise.as(null);
 		}
 
-		console.log('sync', ids);
-
 		return this.queryGallery({ ids, pageSize: ids.length }) as TPromise<any>;
 	}
 

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

@@ -14,24 +14,43 @@ export interface IOptions {
 	small?: boolean;
 }
 
+export class Label implements IDisposable {
+
+	private listener: IDisposable;
+
+	constructor(
+		element: HTMLElement,
+		model: ExtensionsModel,
+		extension: IExtension,
+		fn: (extension: IExtension) => string
+	) {
+		const render = () => element.textContent = fn(extension);
+		render();
+		this.listener = model.onChange(render);
+	}
+
+	dispose(): void {
+		this.listener = dispose(this.listener);
+	}
+}
+
 export class RatingsWidget implements IDisposable {
 
 	static ID: string = 'workbench.editor.extension';
 
-	private element: HTMLElement;
 	private disposables: IDisposable[] = [];
 
 	constructor(
-		container: HTMLElement,
+		private container: HTMLElement,
 		private model: ExtensionsModel,
 		private extension: IExtension,
 		options: IOptions = {}
 	) {
 		this.disposables.push(this.model.onChange(() => this.render()));
-		this.element = append(container, $('span.extension-ratings'));
+		addClass(container, 'extension-ratings');
 
 		if (options.small) {
-			addClass(this.element, 'small');
+			addClass(container, 'small');
 		}
 
 		this.render();
@@ -39,7 +58,7 @@ export class RatingsWidget implements IDisposable {
 
 	private render(): void {
 		const rating = this.extension.rating;
-		this.element.innerHTML = '';
+		this.container.innerHTML = '';
 
 		if (rating === null) {
 			return;
@@ -47,20 +66,19 @@ export class RatingsWidget implements IDisposable {
 
 		for (let i = 1; i <= 5; i++) {
 			if (rating >= i) {
-				append(this.element, $('span.full.star'));
+				append(this.container, $('span.full.star'));
 			} else if (rating >= i - 0.5) {
-				append(this.element, $('span.half.star'));
+				append(this.container, $('span.half.star'));
 			} else {
-				append(this.element, $('span.empty.star'));
+				append(this.container, $('span.empty.star'));
 			}
 		}
 
-		const count = append(this.element, $('span.count'));
+		const count = append(this.container, $('span.count'));
 		count.textContent = String(this.extension.ratingCount);
 	}
 
 	dispose(): void {
-		this.element.parentElement.removeChild(this.element);
 		this.disposables = dispose(this.disposables);
 	}
 }

src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css

@@ -49,6 +49,8 @@
 	font-size: 18px;
 	padding-top: 10px;
 	white-space: nowrap;
+	height: 20px;
+	line-height: 20px;
 }
 
 .extension-editor > .header > .details > .subtitle > span:not(:first-child):not(:empty),