install count and ratings in viewlet

fixes #7980

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

@@ -21,7 +21,7 @@ import { ExtensionsInput } from './extensionsInput';
 import { IExtensionsWorkbenchService } from './extensions';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { ITemplateData } from './extensionsList';
-import { RatingsWidget, Label } from './extensionsWidgets';
+import { RatingsWidget, InstallWidget } from './extensionsWidgets';
 import { EditorOptions } from 'vs/workbench/common/editor';
 import { shell } from 'electron';
 import product from 'vs/platform/product';
@@ -81,9 +81,9 @@ export class ExtensionEditor extends BaseEditor {
 		this.publisher = append(subtitle, $<HTMLAnchorElement>('a.publisher'));
 		this.publisher.href = '#';
 
-		const install = append(subtitle, $('span.install'));
-		append(install, $('span.octicon.octicon-cloud-download'));
-		this.installCount = append(install, $('span.count'));
+		this.installCount = append(subtitle, $('span.install'));
+		// append(install, $('span.octicon.octicon-cloud-download'));
+		// this.installCount = append(install, $('span.count'));
 
 		this.rating = append(subtitle, $<HTMLAnchorElement>('a.rating'));
 		this.rating.href = '#';
@@ -121,7 +121,7 @@ export class ExtensionEditor extends BaseEditor {
 			});
 		}
 
-		const install = this.instantiationService.createInstance(Label, this.installCount, extension, e => `${ e.installCount }`);
+		const install = this.instantiationService.createInstance(InstallWidget, this.installCount, extension, {});
 		this.transientDisposables.push(install);
 
 		const ratings = this.instantiationService.createInstance(RatingsWidget, this.rating, extension, {});

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

@@ -13,7 +13,7 @@ import { IDelegate } from 'vs/base/browser/ui/list/list';
 import { IPagedRenderer } from 'vs/base/browser/ui/list/listPaging';
 import { IExtension } from './extensions';
 import { CombinedInstallAction, UpdateAction } from './extensionsActions';
-import { Label } from './extensionsWidgets';
+import { Label, RatingsWidget, InstallWidget } from './extensionsWidgets';
 
 export interface ITemplateData {
 	extension: IExtension;
@@ -21,6 +21,8 @@ export interface ITemplateData {
 	icon: HTMLElement;
 	name: HTMLElement;
 	version: HTMLElement;
+	installCount: HTMLElement;
+	ratings: HTMLElement;
 	author: HTMLElement;
 	description: HTMLElement;
 	actionbar: ActionBar;
@@ -50,15 +52,17 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		const icon = append(element, $('.icon'));
 		const details = append(element, $('.details'));
 		const header = append(details, $('.header'));
-		const name = append(header, $('span.name.ellipsis'));
+		const name = append(header, $('span.name'));
 		const version = append(header, $('span.version.ellipsis'));
-		const author = append(header, $('span.author.ellipsis'));
+		const ratings = append(header, $('span.ratings'));
+		const installCount = append(header, $('span.install-count'));
 		const description = append(details, $('.description.ellipsis'));
 		const footer = append(details, $('.footer'));
+		const author = append(footer, $('.author.ellipsis'));
 		const actionbar = new ActionBar(footer, { animated: false });
 		const disposables = [];
 
-		const result = { extension: null, element, icon, name, version, author, description, actionbar, disposables };
+		const result = { extension: null, element, icon, name, version, installCount, ratings, author, description, actionbar, disposables };
 		this._templates.push(result);
 		return result;
 	}
@@ -87,12 +91,16 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		data.description.textContent = extension.description;
 
 		const version = this.instantiationService.createInstance(Label, data.version, extension, e => e.version);
+		const ratings = this.instantiationService.createInstance(RatingsWidget, data.ratings, extension, { small: true });
+		const installCount = this.instantiationService.createInstance(InstallWidget, data.installCount, extension, { small: true });
+
 		const installAction = this.instantiationService.createInstance(CombinedInstallAction, extension);
 		const updateAction = this.instantiationService.createInstance(UpdateAction, extension);
+
 		data.actionbar.clear();
 		data.actionbar.push([updateAction, installAction], actionOptions);
 
-		data.disposables.push(version, installAction, updateAction);
+		data.disposables.push(version, installCount, ratings, installAction, updateAction);
 	}
 
 	disposeTemplate(data: ITemplateData): void {

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

@@ -34,16 +34,57 @@ export class Label implements IDisposable {
 	}
 }
 
-export class RatingsWidget implements IDisposable {
+export class InstallWidget implements IDisposable {
+
+	private disposables: IDisposable[] = [];
 
-	static ID: string = 'workbench.editor.extension';
+	constructor(
+		private container: HTMLElement,
+		private extension: IExtension,
+		private options: IOptions,
+		@IExtensionsWorkbenchService extensionsWorkbenchService: IExtensionsWorkbenchService
+	) {
+		this.disposables.push(extensionsWorkbenchService.onChange(() => this.render()));
+		addClass(container, 'extension-install-count');
+		this.render();
+	}
+
+	private render(): void {
+		const installCount = this.extension.installCount;
+		this.container.innerHTML = '';
+
+		if (installCount === null) {
+			return;
+		}
+
+		let installLabel: string;
+
+		if (this.options.small) {
+			if (installCount > 1000000) {
+				installLabel = `${ Math.floor(installCount / 1000000) }M`;
+			} else if (installCount > 1000) {
+				installLabel = `${ Math.floor(installCount / 1000) }K`;
+			}
+		}
+
+		append(this.container, $('span.octicon.octicon-cloud-download'));
+		const count = append(this.container, $('span.count'));
+		count.textContent = installLabel || String(installCount);
+	}
+
+	dispose(): void {
+		this.disposables = dispose(this.disposables);
+	}
+}
+
+export class RatingsWidget implements IDisposable {
 
 	private disposables: IDisposable[] = [];
 
 	constructor(
 		private container: HTMLElement,
 		private extension: IExtension,
-		options: IOptions,
+		private options: IOptions,
 		@IExtensionsWorkbenchService extensionsWorkbenchService: IExtensionsWorkbenchService
 	) {
 		this.disposables.push(extensionsWorkbenchService.onChange(() => this.render()));
@@ -74,8 +115,10 @@ export class RatingsWidget implements IDisposable {
 			}
 		}
 
-		const count = append(this.container, $('span.count'));
-		count.textContent = String(this.extension.ratingCount);
+		if (!this.options.small) {
+			const count = append(this.container, $('span.count'));
+			count.textContent = String(this.extension.ratingCount);
+		}
 	}
 
 	dispose(): void {

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

@@ -31,7 +31,7 @@
 	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
-	padding: 0 19px 0 16px;
+	padding: 0 9px 0 16px;
 	overflow: hidden;
 	display: flex;
 }
@@ -64,23 +64,40 @@
 
 .extensions-viewlet > .extensions .extension > .details > .header {
 	display: flex;
+	align-items: baseline;
 }
 
 .extensions-viewlet > .extensions .extension > .details > .header > .name {
 	font-weight: bold;
+	min-width: fit-content;
 }
 
 .extensions-viewlet > .extensions .extension > .details > .header > .version {
 	opacity: 0.6;
 	font-size: 80%;
 	padding-left: 6px;
+	flex: 1;
 }
 
-.extensions-viewlet > .extensions .extension > .details > .header > .author {
-	flex: 1;
-	font-size: 90%;
+.extensions-viewlet > .extensions .extension > .details > .header > .install-count:not(:empty) {
+	opacity: 0.6;
+	font-size: 80%;
+	border: 1px solid rgba(173, 173, 173, 0.5);
+	border-radius: 3px;
+	display: inline-block;
+	line-height: 14px;
+	padding: 0 3px;
+	text-align: right;
+}
+
+.extensions-viewlet > .extensions .extension > .details > .header > .install-count > .octicon {
+	font-size: 100%;
+	margin-right: 2px;
+}
+
+.extensions-viewlet > .extensions .extension > .details > .header > .ratings {
+	margin-right: 6px;
 	text-align: right;
-	padding-left: 6px;
 }
 
 .extensions-viewlet > .extensions .extension > .details > .footer {
@@ -90,6 +107,14 @@
 	overflow: hidden;
 }
 
+.extensions-viewlet > .extensions .extension > .details > .footer > .author {
+	flex: 1;
+	font-size: 90%;
+	padding-right: 6px;
+	opacity: 0.6;
+	font-weight: 600;
+}
+
 .extensions-viewlet > .extensions .extension > .details > .footer > .monaco-action-bar > .actions-container {
 	flex-wrap: wrap-reverse;
 }

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

@@ -20,8 +20,8 @@
 }
 
 .extension-ratings.small > .star {
-	width: 12px;
-	height: 12px;
+	width: 10px;
+	height: 10px;
 }
 
 .extension-ratings > .full {