allow wt description in widget (#119291)

* allow wt description in widget
cleanup widget

* use card style with 3 lines and 2 columns

* remove hover feedback as the tiles are not buttons

* fix delegate width mishap

src/vs/workbench/contrib/extensions/browser/extensionEditor.ts

@@ -44,7 +44,7 @@ import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegis
 import { Color } from 'vs/base/common/color';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import { CancellationToken, CancellationTokenSource } from 'vs/base/common/cancellation';
-import { ExtensionsTree, ExtensionData, ExtensionsGridView, getExtensions, IExtensionsGridViewVirtualDelegate } from 'vs/workbench/contrib/extensions/browser/extensionsViewer';
+import { ExtensionsTree, ExtensionData, ExtensionsGridView, getExtensions } from 'vs/workbench/contrib/extensions/browser/extensionsViewer';
 import { ShowCurrentReleaseNotesActionId } from 'vs/workbench/contrib/update/common/update';
 import { KeybindingParser } from 'vs/base/common/keybindingParser';
 import { IStorageService } from 'vs/platform/storage/common/storage';
@@ -1045,9 +1045,7 @@ export class ExtensionEditor extends EditorPane {
 		const scrollableContent = new DomScrollableElement(content, { useShadows: false });
 		append(parent, scrollableContent.getDomNode());
 
-		const extensionsGridView = this.instantiationService.createInstance(ExtensionsGridView, content, new class ExtensionsGridViewVirtualDelegate extends Delegate implements IExtensionsGridViewVirtualDelegate {
-			getWidth() { return 275; }
-		});
+		const extensionsGridView = this.instantiationService.createInstance(ExtensionsGridView, content, new Delegate());
 		const extensions: IExtension[] = await getExtensions(manifest.extensionPack!, this.extensionsWorkbenchService);
 		extensionsGridView.setExtensions(extensions);
 		scrollableContent.scanDomNode();

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

@@ -25,6 +25,7 @@ import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/
 import { foreground, listActiveSelectionForeground, listActiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionBackground, listFocusForeground, listFocusBackground, listHoverForeground, listHoverBackground } from 'vs/platform/theme/common/colorRegistry';
 import { WORKBENCH_BACKGROUND } from 'vs/workbench/common/theme';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
+import { localize } from 'vs/nls';
 
 export const EXTENSION_LIST_ELEMENT_HEIGHT = 62;
 
@@ -42,6 +43,7 @@ export interface ITemplateData {
 	ratings: HTMLElement;
 	author: HTMLElement;
 	description: HTMLElement;
+	workspaceTrustDescription: HTMLElement;
 	extension: IExtension | null;
 	disposables: IDisposable[];
 	extensionDisposables: IDisposable[];
@@ -86,6 +88,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		const syncIgnore = append(header, $('span.sync-ignored'));
 		const headerRemoteBadgeWidget = this.instantiationService.createInstance(RemoteBadgeWidget, header, false);
 		const description = append(details, $('.description.ellipsis'));
+		const workspaceTrustDescription = append(details, $('.workspace-trust-description.ellipsis'));
 		const footer = append(details, $('.footer'));
 		const author = append(footer, $('.author.ellipsis'));
 		const actionbar = new ActionBar(footer, {
@@ -138,7 +141,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		const disposable = combinedDisposable(...actions, ...widgets, actionbar, extensionContainers, extensionTooltipAction);
 
 		return {
-			root, element, icon, name, installCount, ratings, author, description, disposables: [disposable], actionbar,
+			root, element, icon, name, installCount, ratings, author, description, workspaceTrustDescription, disposables: [disposable], actionbar,
 			extensionDisposables: [],
 			set extension(extension: IExtension) {
 				extensionContainers.extension = extension;
@@ -199,6 +202,18 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		data.name.textContent = extension.displayName;
 		data.author.textContent = extension.publisherDisplayName;
 		data.description.textContent = extension.description;
+
+		if (extension.local?.manifest.workspaceTrust?.required) {
+			const trustRequirement = extension.local.manifest.workspaceTrust;
+			if (trustRequirement.description) {
+				data.workspaceTrustDescription.textContent = trustRequirement.description;
+			} else if (trustRequirement.required === 'onDemand') {
+				data.workspaceTrustDescription.textContent = localize('onDemandDefaultText', "Some features require a trusted workspace.");
+			} else if (trustRequirement.required === 'onStart') {
+				data.workspaceTrustDescription.textContent = localize('onStartDefaultText', "A trusted workspace is required to enable this extension.");
+			}
+		}
+
 		data.installCount.style.display = '';
 		data.ratings.style.display = '';
 		data.extension = extension;

src/vs/workbench/contrib/extensions/browser/extensionsViewer.ts

@@ -22,27 +22,23 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { isNonEmptyArray } from 'vs/base/common/arrays';
 import { IColorMapping } from 'vs/platform/theme/common/styler';
-import { Renderer } from 'vs/workbench/contrib/extensions/browser/extensionsList';
+import { Delegate, Renderer } from 'vs/workbench/contrib/extensions/browser/extensionsList';
 import { listFocusForeground, listFocusBackground } from 'vs/platform/theme/common/colorRegistry';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { IListAccessibilityProvider } from 'vs/base/browser/ui/list/listWidget';
 
-export interface IExtensionsGridViewVirtualDelegate extends IListVirtualDelegate<IExtension> {
-	getWidth?(element: IExtension): number;
-}
-
 export class ExtensionsGridView extends Disposable {
 
 	readonly element: HTMLElement;
 	private readonly renderer: Renderer;
-	private readonly delegate: IExtensionsGridViewVirtualDelegate;
+	private readonly delegate: Delegate;
 	private readonly disposableStore: DisposableStore;
 
 	constructor(
 		parent: HTMLElement,
-		delegate: IExtensionsGridViewVirtualDelegate,
+		delegate: Delegate,
 		@IInstantiationService private readonly instantiationService: IInstantiationService
 	) {
 		super();
@@ -59,10 +55,7 @@ export class ExtensionsGridView extends Disposable {
 
 	private renderExtension(extension: IExtension, index: number): void {
 		const extensionContainer = dom.append(this.element, dom.$('.extension-container'));
-		extensionContainer.style.height = `${this.delegate.getHeight(extension)}px`;
-		if (this.delegate.getWidth) {
-			extensionContainer.style.width = `${this.delegate.getWidth(extension)}px`;
-		}
+		extensionContainer.style.height = `${this.delegate.getHeight()}px`;
 		extensionContainer.setAttribute('tabindex', '0');
 
 		const template = this.renderer.renderTemplate(extensionContainer);

src/vs/workbench/contrib/extensions/browser/media/extension.css

@@ -152,6 +152,11 @@
 	padding-right: 11px;
 }
 
+.extension-list-item > .details > .workspace-trust-description {
+	display: none;
+	padding-right: 11px;
+}
+
 .extension-list-item > .details > .footer {
 	display: flex;
 	justify-content: flex-end;

src/vs/workbench/contrib/extensions/browser/media/extensionEditor.css

@@ -501,7 +501,7 @@
 }
 
 .extension-editor .extensions-grid-view > .extension-container {
-	height: 275px;
+	width: 275px;
 	margin: 0 10px 20px 0;
 }
 

src/vs/workbench/contrib/workspace/browser/workspaceTrustColors.ts

@@ -6,6 +6,9 @@
 import { localize } from 'vs/nls';
 import { editorErrorForeground, registerColor } from 'vs/platform/theme/common/colorRegistry';
 import { debugIconStartForeground } from 'vs/workbench/contrib/debug/browser/debugColors';
+import { welcomePageTileBackground } from 'vs/workbench/contrib/welcome/page/browser/welcomePageColors';
 
-export const trustedForegroundColor = registerColor('workspaceTrust.trustedForergound', { dark: debugIconStartForeground, light: debugIconStartForeground, hc: debugIconStartForeground }, localize('workspaceTrustTrustedColor', 'Color used when indicating a workspace is trusted.'));
+export const trustedForegroundColor = registerColor('workspaceTrust.trustedForegound', { dark: debugIconStartForeground, light: debugIconStartForeground, hc: debugIconStartForeground }, localize('workspaceTrustTrustedColor', 'Color used when indicating a workspace is trusted.'));
 export const untrustedForegroundColor = registerColor('workspaceTrust.untrustedForeground', { dark: editorErrorForeground, light: editorErrorForeground, hc: editorErrorForeground }, localize('workspaceTrustUntrustedColor', 'Color used when indicating a workspace is not trusted.'));
+
+export const trustEditorTileBackgroundColor = registerColor('workspaceTrust.tileBackground', { dark: welcomePageTileBackground, light: welcomePageTileBackground, hc: welcomePageTileBackground }, localize('workspaceTrust.tileBackground', 'Background color for the tiles on the Workspace Trust page.'));

src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.css

@@ -116,12 +116,11 @@
 }
 
 .workspace-trust-editor .extensions-grid-view > .extension-container {
-	width: 310px;
+	width: 470px;
 	margin: 0 10px 20px 0;
 }
 
 .workspace-trust-editor .extensions-grid-view .extension-list-item {
-	padding-left: 0;
 	cursor: default;
 }
 
@@ -151,6 +150,10 @@
 }
 
 .workspace-trust-editor .extensions-grid-view .extension-list-item > .details > .description {
+	display: none;
+}
+
+.workspace-trust-editor .extensions-grid-view .extension-list-item > .details > .workspace-trust-description {
 	display: -webkit-box;
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 3;

src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts

@@ -22,8 +22,9 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { Link } from 'vs/platform/opener/browser/link';
 import { IStorageService } from 'vs/platform/storage/common/storage';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { attachButtonStyler, attachLinkStyler, attachStylerCallback } from 'vs/platform/theme/common/styler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
 import { WorkspaceTrustState } from 'vs/platform/workspace/common/workspaceTrust';
 import { EditorPane } from 'vs/workbench/browser/parts/editor/editorPane';
@@ -32,7 +33,7 @@ import { Delegate } from 'vs/workbench/contrib/extensions/browser/extensionsList
 import { ExtensionsGridView, getExtensions } from 'vs/workbench/contrib/extensions/browser/extensionsViewer';
 import { IExtension, IExtensionsWorkbenchService } from 'vs/workbench/contrib/extensions/common/extensions';
 import { getInstalledExtensions, IExtensionStatus } from 'vs/workbench/contrib/extensions/common/extensionsUtils';
-import { trustedForegroundColor, untrustedForegroundColor } from 'vs/workbench/contrib/workspace/browser/workspaceTrustColors';
+import { trustedForegroundColor, trustEditorTileBackgroundColor, untrustedForegroundColor } from 'vs/workbench/contrib/workspace/browser/workspaceTrustColors';
 import { IWorkspaceTrustSettingChangeEvent, WorkspaceTrustSettingArrayRenderer, WorkspaceTrustTree, WorkspaceTrustTreeModel } from 'vs/workbench/contrib/workspace/browser/workspaceTrustTree';
 import { WorkspaceTrustEditorInput } from 'vs/workbench/services/workspaces/browser/workspaceTrustEditorInput';
 import { WorkspaceTrustEditorModel } from 'vs/workbench/services/workspaces/common/workspaceTrust';
@@ -364,3 +365,15 @@ export class WorkspaceTrustEditor extends EditorPane {
 		this.bodyScrollBar.scanDomNode();
 	}
 }
+
+registerThemingParticipant((theme, collector) => {
+	const tileBackgroundColor = theme.getColor(trustEditorTileBackgroundColor);
+	if (tileBackgroundColor) {
+		collector.addRule(`.monaco-workbench .part.editor > .content .workspace-trust-editor .extension-container  { background: ${tileBackgroundColor}; }`);
+	}
+
+	const border = theme.getColor(contrastBorder);
+	if (border) {
+		collector.addRule(`.monaco-workbench .part.editor > .content .workspace-trust-editor .extension-container { border: 1px solid ${border}; }`);
+	}
+});