improve extension viewlet layout

fixes #8922
fixes #8510

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

@@ -48,7 +48,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		const details = append(element, $('.details'));
 		const header = append(details, $('.header'));
 		const name = append(header, $('span.name'));
-		const version = append(header, $('span.version.ellipsis'));
+		const version = append(header, $('span.version'));
 		const installCount = append(header, $('span.install-count'));
 		const ratings = append(header, $('span.ratings'));
 		const description = append(details, $('.description.ellipsis'));
@@ -88,8 +88,8 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		data.name.textContent = extension.displayName;
 		data.author.textContent = extension.publisherDisplayName;
 		data.description.textContent = extension.description;
-		data.installCount.style.display = 'initial';
-		data.ratings.style.display = 'initial';
+		data.installCount.style.display = '';
+		data.ratings.style.display = '';
 
 		const version = this.instantiationService.createInstance(Label, data.version, extension, e => e.version);
 		const installCount = this.instantiationService.createInstance(InstallWidget, data.installCount, extension, { small: true });

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

@@ -18,7 +18,7 @@ import { domEvent } from 'vs/base/browser/event';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { Viewlet } from 'vs/workbench/browser/viewlet';
-import { append, emmet as $, addStandardDisposableListener, EventType, addClass, removeClass } from 'vs/base/browser/dom';
+import { append, emmet as $, addStandardDisposableListener, EventType, addClass, removeClass, toggleClass } from 'vs/base/browser/dom';
 import { IPager, PagedModel } from 'vs/base/common/paging';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { PagedList } from 'vs/base/browser/ui/list/listPaging';
@@ -119,8 +119,13 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
 		this.searchBox.focus();
 	}
 
-	layout({ height }: Dimension):void {
+	layout({ height, width }: Dimension):void {
 		this.list.layout(height - 38);
+		toggleClass(this.root, 'narrow', width <= 300);
+	}
+
+	getOptimalWidth(): number {
+		return 400;
 	}
 
 	getActions(): IAction[] {

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

@@ -101,24 +101,30 @@ export class RatingsWidget implements IDisposable {
 		const rating = Math.round(this.extension.rating * 2) / 2;
 		this.container.innerHTML = '';
 
-		if (rating === null) {
+		if (this.extension.rating === null) {
 			return;
 		}
 
-		for (let i = 1; i <= 5; i++) {
-			if (rating >= i) {
-				append(this.container, $('span.full.star'));
-			} else if (rating >= i - 0.5) {
-				append(this.container, $('span.half.star'));
-			} else {
-				append(this.container, $('span.empty.star'));
-			}
+		if (this.options.small && this.extension.ratingCount === 0) {
+			return;
 		}
 
-		if (!this.options.small) {
-			const count = append(this.container, $('span.count'));
-			count.textContent = String(this.extension.ratingCount);
+		if (this.options.small) {
+			append(this.container, $('span.full.star'));
+		} else {
+			for (let i = 1; i <= 5; i++) {
+				if (rating >= i) {
+					append(this.container, $('span.full.star'));
+				} else if (rating >= i - 0.5) {
+					append(this.container, $('span.half.star'));
+				} else {
+					append(this.container, $('span.empty.star'));
+				}
+			}
 		}
+
+		const count = append(this.container, $('span.count'));
+		count.textContent = String(this.options.small ? rating : this.extension.ratingCount);
 	}
 
 	dispose(): void {

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

@@ -46,6 +46,10 @@
 	background-position: left center;
 }
 
+.extensions-viewlet.narrow > .extensions .extension > .icon {
+	display: none;
+}
+
 .extensions-viewlet > .extensions .extension.loading > .icon {
 	display: none;
 }
@@ -59,6 +63,9 @@
 .extensions-viewlet > .extensions .extension > .details > .header {
 	display: flex;
 	align-items: baseline;
+	flex-wrap: wrap;
+	height: 19px;
+	overflow: hidden;
 }
 
 .extensions-viewlet > .extensions .extension > .details > .header > .name {
@@ -71,6 +78,7 @@
 	font-size: 80%;
 	padding-left: 6px;
 	flex: 1;
+	min-width: fit-content;
 }
 
 .extensions-viewlet > .extensions .extension > .details > .header > .install-count:not(:empty) {
@@ -87,6 +95,11 @@
 	text-align: right;
 }
 
+.extensions-viewlet.narrow > .extensions .extension > .details > .header > .ratings,
+.extensions-viewlet.narrow > .extensions .extension > .details > .header > .install-count {
+	display: none;
+}
+
 .extensions-viewlet > .extensions .extension > .details > .footer {
 	display: flex;
 	justify-content: flex-end;

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

@@ -7,6 +7,10 @@
 	display: inline-block;
 }
 
+.extension-ratings.small {
+	font-size: 80%;
+}
+
 .extension-ratings > .star {
 	display: inline-block;
 	width: 16px;
@@ -38,4 +42,8 @@
 
 .extension-ratings > .count {
 	margin-left: 6px;
+}
+
+.extension-ratings.small > .count {
+	margin-left: 2px;
 }
\ No newline at end of file