Revert use of version label to show recommendation #36650

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

@@ -18,12 +18,11 @@ import { domEvent } from 'vs/base/browser/event';
 import { IExtension, IExtensionsWorkbenchService } from 'vs/workbench/parts/extensions/common/extensions';
 import { InstallAction, UpdateAction, BuiltinStatusLabelAction, ManageExtensionAction, ReloadAction } from 'vs/workbench/parts/extensions/browser/extensionsActions';
 import { areSameExtensions } from 'vs/platform/extensionManagement/common/extensionManagementUtil';
-import { RatingsWidget, InstallWidget } from 'vs/workbench/parts/extensions/browser/extensionsWidgets';
+import { Label, RatingsWidget, InstallWidget } from 'vs/workbench/parts/extensions/browser/extensionsWidgets';
 import { EventType } from 'vs/base/common/events';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IExtensionService } from 'vs/platform/extensions/common/extensions';
 import { IExtensionTipsService } from 'vs/platform/extensionManagement/common/extensionManagement';
-import { localize } from 'vs/nls';
 
 export interface ITemplateData {
 	root: HTMLElement;
@@ -34,7 +33,6 @@ export interface ITemplateData {
 	ratings: HTMLElement;
 	author: HTMLElement;
 	description: HTMLElement;
-	subText: HTMLElement;
 	extension: IExtension;
 	disposables: IDisposable[];
 	extensionDisposables: IDisposable[];
@@ -65,14 +63,15 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 	get templateId() { return 'extension'; }
 
 	renderTemplate(root: HTMLElement): ITemplateData {
+		const bookmark = append(root, $('span.bookmark'));
+		append(bookmark, $('span.octicon.octicon-star'));
 		const element = append(root, $('.extension'));
 		const icon = append(element, $<HTMLImageElement>('img.icon'));
 		const details = append(element, $('.details'));
 		const headerContainer = append(details, $('.header-container'));
 		const header = append(headerContainer, $('.header'));
 		const name = append(header, $('span.name'));
-		const subTextContainer = append(header, $('span.subtext-container'));
-		const subText = append(subTextContainer, $('span.subtext'));
+		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'));
@@ -89,6 +88,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		});
 		actionbar.addListener(EventType.RUN, ({ error }) => error && this.messageService.show(Severity.Error, error));
 
+		const versionWidget = this.instantiationService.createInstance(Label, version, (e: IExtension) => e.version);
 		const installCountWidget = this.instantiationService.createInstance(InstallWidget, installCount, { small: true });
 		const ratingsWidget = this.instantiationService.createInstance(RatingsWidget, ratings, { small: true });
 
@@ -99,12 +99,13 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		const manageAction = this.instantiationService.createInstance(ManageExtensionAction);
 
 		actionbar.push([reloadAction, updateAction, installAction, builtinStatusAction, manageAction], actionOptions);
-		const disposables = [installCountWidget, ratingsWidget, builtinStatusAction, updateAction, reloadAction, manageAction, actionbar];
+		const disposables = [versionWidget, installCountWidget, ratingsWidget, builtinStatusAction, updateAction, reloadAction, manageAction, actionbar];
 
 		return {
-			root, element, icon, name, installCount, ratings, author, description, subText, disposables,
+			root, element, icon, name, installCount, ratings, author, description, disposables,
 			extensionDisposables: [],
 			set extension(extension: IExtension) {
+				versionWidget.extension = extension;
 				installCountWidget.extension = extension;
 				ratingsWidget.extension = extension;
 				builtinStatusAction.extension = extension;
@@ -153,17 +154,15 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 			data.icon.style.visibility = 'inherit';
 		}
 
-		data.subText.textContent = isInstalled ? extension.version : '';
 		data.root.setAttribute('aria-label', extension.displayName);
-		removeClass(data.subText, 'recommended');
+		removeClass(data.root, 'recommended');
 
 		const extRecommendations = this.extensionTipsService.getAllRecommendationsWithReason();
 		if (extRecommendations[extension.id.toLowerCase()] && !isInstalled) {
 			data.root.setAttribute('aria-label', extension.displayName + '. ' + extRecommendations[extension.id]);
 			if (this.showRecommendedLabel) {
-				data.subText.textContent = localize('recommended', "Recommended");
-				addClass(data.subText, 'recommended');
-				data.subText.title = extRecommendations[extension.id.toLowerCase()];
+				addClass(data.root, 'recommended');
+				data.root.title = extRecommendations[extension.id.toLowerCase()];
 			}
 		}
 

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

@@ -61,6 +61,27 @@
 	cursor: default;
 }
 
+.extensions-viewlet > .extensions .monaco-list-row > .bookmark {
+	display: none;
+}
+
+.extensions-viewlet > .extensions .monaco-list-row.recommended > .bookmark {
+	display: inline-block;
+	height: 20px;
+	width: 20px;
+	border-right: 20px solid transparent;
+	border-top: 20px solid grey;
+	box-sizing: border-box;
+}
+
+.extensions-viewlet > .extensions .monaco-list-row > .bookmark > .octicon {
+	position: absolute;
+	top: 1px;
+	left: 1px;
+	color: white;
+	font-size: 90%;
+}
+
 .extensions-viewlet > .extensions .extension {
 	box-sizing: border-box;
 	width: 100%;
@@ -68,6 +89,8 @@
 	padding: 0 11px 0 16px;
 	overflow: hidden;
 	display: flex;
+	position: absolute;
+	top: 0;
 }
 
 .extensions-viewlet > .extensions .extension.loading {
@@ -118,7 +141,7 @@
 	overflow: hidden;
 }
 
-.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .subtext-container {
+.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .version {
 	opacity: 0.85;
 	font-size: 80%;
 	padding-left: 6px;
@@ -126,14 +149,6 @@
 	min-width: fit-content;
 }
 
-.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .subtext-container > span.subtext.recommended {
-	color: white;
-	background-color: green;
-	border: solid 1px green;
-	border-radius: 10px;
-	padding: 0 5px;
-}
-
 .extensions-viewlet > .extensions .extension > .details > .header-container > .header > .install-count:not(:empty) {
 	font-size: 80%;
 	margin: 0 6px;