wt editor stepping stone

- make extensions list better
- centered header style

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

@@ -19,6 +19,9 @@
 .workspace-trust-editor.settings-editor > .workspace-trust-header {
 	padding: 14px;
 	border: solid 1px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 .workspace-trust-editor.settings-editor .workspace-trust-header .workspace-trust-title {
@@ -26,11 +29,18 @@
 	font-weight: 600;
 	line-height: 32px;
 	padding: 10px 0px;
+	display: flex;
+}
+
+.workspace-trust-editor.settings-editor .workspace-trust-header .workspace-trust-title .workspace-trust-title-icon {
+	font-size: 32px;
+	margin-right: 8px;
 }
 
 .workspace-trust-editor.settings-editor .workspace-trust-header .workspace-trust-description {
 	cursor: default;
 	user-select: text;
+	max-width: 500px;
 }
 
 /** Buttons Container */
@@ -78,18 +88,38 @@
 }
 
 /** Features List */
-.workspace-trust-editor.settings-editor > .workspace-trust-features-list {
+.workspace-trust-editor.settings-editor > .workspace-trust-features {
 	padding: 14px;
 	cursor: default;
 	user-select: text;
 }
 
-.workspace-trust-editor.settings-editor > .workspace-trust-features-list  .workspace-trust-extensions-list-header {
+.workspace-trust-editor.settings-editor > .workspace-trust-features  .workspace-trust-extension-list-title {
 	font-size: 16px;
 	font-weight: 600;
 	line-height: 32px;
 }
 
+.workspace-trust-editor.settings-editor > .workspace-trust-features  .workspace-trust-extension-list-entry {
+	display: flex;
+	margin-bottom: 10px;
+	align-items: center;
+}
+
+.workspace-trust-editor.settings-editor > .workspace-trust-features  .workspace-trust-extension-list-entry .workspace-trust-extension-text {
+	display: flex;
+	flex-direction: column;
+	margin-left: 5px;
+}
+.workspace-trust-editor.settings-editor > .workspace-trust-features  .workspace-trust-extension-list-entry .workspace-trust-extension-icon,
+.workspace-trust-editor.settings-editor > .workspace-trust-features  .workspace-trust-extension-list-entry .workspace-trust-extension-icon .icon {
+	height: 42px;
+}
+
+.workspace-trust-editor.settings-editor > .workspace-trust-features  .workspace-trust-extension-list-entry .workspace-trust-extension-name {
+	font-weight: 600;
+}
+
 /** Settings */
 .workspace-trust-editor.settings-editor > .settings-body > .settings-tree-container .shadow.top {
 	left: initial;

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

@@ -6,10 +6,14 @@
 import { $, append, clearNode, Dimension, EventHelper } from 'vs/base/browser/dom';
 import { ButtonBar } from 'vs/base/browser/ui/button/button';
 import { CancellationToken } from 'vs/base/common/cancellation';
+import { Codicon, registerCodicon } from 'vs/base/common/codicons';
 import { Iterable } from 'vs/base/common/iterator';
+import { FileAccess } from 'vs/base/common/network';
+import { joinPath } from 'vs/base/common/resources';
 import { isArray } from 'vs/base/common/types';
 import { URI } from 'vs/base/common/uri';
 import { localize } from 'vs/nls';
+import { DefaultIconPath } from 'vs/platform/extensionManagement/common/extensionManagement';
 import { IExtensionDescription } from 'vs/platform/extensions/common/extensions';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IStorageService } from 'vs/platform/storage/common/storage';
@@ -24,19 +28,33 @@ import { IExtensionService } from 'vs/workbench/services/extensions/common/exten
 import { WorkspaceTrustEditorInput } from 'vs/workbench/services/workspaces/browser/workspaceTrustEditorInput';
 import { WorkspaceTrustEditorModel } from 'vs/workbench/services/workspaces/common/workspaceTrust';
 
+const trustIcon = registerCodicon('workspace-trust-icon', Codicon.shield);
+
 export class WorkspaceTrustEditor extends EditorPane {
 	static readonly ID: string = 'workbench.editor.workspaceTrust';
 	private rootElement!: HTMLElement;
+
+	// Header Section
 	private headerContainer!: HTMLElement;
-	private headerTitle!: HTMLElement;
+	private headerTitleContainer!: HTMLElement;
+	private headerTitleIcon!: HTMLElement;
+	private headerTitleText!: HTMLElement;
 	private headerDescription!: HTMLElement;
 	private headerButtons!: HTMLElement;
-	private extensionsListEntriesContainer!: HTMLElement;
+
+	// Affected Features Section
+	private affectedFeaturesContainer!: HTMLElement;
+	private extensionsContainer!: HTMLElement;
+	private onDemandExtensionsContainer!: HTMLElement;
+	private onStartExtensionsContainer!: HTMLElement;
+	private extensionsRequiringTrust: IExtensionDescription[] = [];
+
+	// Settings Section
 	private configurationContainer!: HTMLElement;
 	private trustSettingsTree!: WorkspaceTrustTree;
 	private workspaceTrustSettingsTreeModel!: WorkspaceTrustTreeModel;
+
 	private workspaceTrustEditorModel!: WorkspaceTrustEditorModel;
-	private extensionsRequiringTrust: IExtensionDescription[] = [];
 
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
@@ -51,7 +69,7 @@ export class WorkspaceTrustEditor extends EditorPane {
 		this.rootElement = append(parent, $('.workspace-trust-editor.settings-editor', { tabindex: '-1' }));
 
 		this.createHeaderElement(this.rootElement);
-		this.createFeatureListElement(this.rootElement);
+		this.createAffectedFeaturesElement(this.rootElement);
 		this.createConfigurationElement(this.rootElement);
 	}
 
@@ -90,28 +108,27 @@ export class WorkspaceTrustEditor extends EditorPane {
 	private getHeaderTitleText(trustState: WorkspaceTrustState): string {
 		switch (trustState) {
 			case WorkspaceTrustState.Trusted:
-				return localize('trustedHeader', "This Workspace Is Trusted");
+				return localize('trustedHeader', "This workspace is trusted");
 			case WorkspaceTrustState.Untrusted:
-				return localize('untrustedHeader', "This Workspace Is Not Trusted");
+				return localize('untrustedHeader', "This workspace is not trusted");
 			case WorkspaceTrustState.Unknown:
-				return localize('unknownHeader', "This Workspace Has Not Been Trusted");
+				return localize('unknownHeader', "Do you want to trust this workspace?");
 		}
 	}
 
 	private getHeaderDescriptionText(trustState: WorkspaceTrustState): string {
 		switch (trustState) {
 			case WorkspaceTrustState.Trusted:
-				return localize('trustedHeaderDescription', "All features requiring trust in this workspace are enabled. Below is the current list of features that will be disabled until you grant trust to the workspace. Note that after trust is given, new features requiring trust will automatically inheret the current workspace trust status.");
 			case WorkspaceTrustState.Untrusted:
-				return localize('untrustedHeaderDescription', "This workspace has limited functionality as some features will not work until trust is given to the current workspace. Below is the current list of features that will be disabled until you grant trust to the workspace. Note that after trust is given, new features requiring trust will automatically inherit the current workspace trust status.");
 			case WorkspaceTrustState.Unknown:
-				return localize('unknownHeaderDescription', "This workspace has limited functionality as some features will not work until trust is given to the current workspace. Below is the current list of features that will be disabled until you grant trust to the workspace. Note that after trust is given, new features requiring trust will automatically inherit the current workspace trust status.");
+				return localize('unknownHeaderDescription', "Trust is required for certain extensions to function in this workspace.");
 		}
 	}
 
 	private render(model: WorkspaceTrustEditorModel): void {
 		// Header Section
-		this.headerTitle.innerText = this.getHeaderTitleText(model.currentWorkspaceTrustState);
+		this.headerTitleText.innerText = this.getHeaderTitleText(model.currentWorkspaceTrustState);
+		this.headerTitleIcon.classList.add(...trustIcon.classNamesArray);
 		this.headerDescription.innerText = this.getHeaderDescriptionText(model.currentWorkspaceTrustState);
 		this.headerContainer.className = this.getHeaderContainerClass(model.currentWorkspaceTrustState);
 
@@ -148,20 +165,57 @@ export class WorkspaceTrustEditor extends EditorPane {
 		createButton(localize('learnMore', "Learn More"), () => { });
 
 		// Features List
-		clearNode(this.extensionsListEntriesContainer);
+		this.renderExtensionList(
-		this.extensionsRequiringTrust.forEach(ext => {
+			localize('onStartExtensions', "Disabled Extensions"),
-			const extensionListItem = append(this.extensionsListEntriesContainer, $('.workspace-trust-extension'));
+			this.onStartExtensionsContainer,
-			extensionListItem.innerText = ext.displayName || ext.name;
+			this.extensionsRequiringTrust.filter(ext => ext.requiresWorkspaceTrust === 'onStart'));
-		});
+		this.renderExtensionList(
+			localize('onDemandExtensions', "Limited Extensions"),
+			this.onDemandExtensionsContainer,
+			this.extensionsRequiringTrust.filter(ext => ext.requiresWorkspaceTrust === 'onDemand'));
 
 		// Configuration Tree
 		this.workspaceTrustSettingsTreeModel.update(model.dataModel.getTrustStateInfo());
 		this.trustSettingsTree.setChildren(null, Iterable.map(this.workspaceTrustSettingsTreeModel.settings, s => { return { element: s }; }));
 	}
 
+	private renderExtensionList(title: string, parent: HTMLElement, extensions: IExtensionDescription[]) {
+		clearNode(parent);
+
+		if (!extensions.length) {
+			return;
+		}
+
+		const titleElement = append(parent, $('.workspace-trust-extension-list-title'));
+		titleElement.innerText = title;
+
+		const listContainer = append(parent, $('.workspace-trust-extension-list'));
+		extensions.forEach(ext => {
+			const extensionEntry = append(listContainer, $('.workspace-trust-extension-list-entry'));
+			this.renderExtension(extensionEntry, ext);
+		});
+	}
+
+	private renderExtension(parent: HTMLElement, extension: IExtensionDescription) {
+		const iconContainer = append(parent, $('.workspace-trust-extension-icon'));
+		const icon = append(iconContainer, $<HTMLImageElement>('img.icon'));
+		const textContainer = append(parent, $('.workspace-trust-extension-text'));
+		const nameContainer = append(textContainer, $('.workspace-trust-extension-name'));
+
+		const extensionDescription = append(textContainer, $('.workspace-trust-extension-description'));
+
+		nameContainer.innerText = extension.displayName || extension.name;
+		icon.src = extension.icon
+			? FileAccess.asBrowserUri(joinPath(extension.extensionLocation, extension.icon)).toString(true)
+			: DefaultIconPath;
+		extensionDescription.innerText = extension.description || '';
+	}
+
 	private createHeaderElement(parent: HTMLElement): void {
 		this.headerContainer = append(parent, $('.workspace-trust-header'));
-		this.headerTitle = append(this.headerContainer, $('.workspace-trust-title'));
+		this.headerTitleContainer = append(this.headerContainer, $('.workspace-trust-title'));
+		this.headerTitleIcon = append(this.headerTitleContainer, $('.workspace-trust-title-icon'));
+		this.headerTitleText = append(this.headerTitleContainer, $('.workspace-trust-title-text'));
 		this.headerDescription = append(this.headerContainer, $('.workspace-trust-description'));
 
 		const buttonsRow = append(this.headerContainer, $('.workspace-trust-buttons-row'));
@@ -183,12 +237,11 @@ export class WorkspaceTrustEditor extends EditorPane {
 		this._register(renderer.onDidChangeSetting(e => this.onDidChangeSetting(e)));
 	}
 
-	private createFeatureListElement(parent: HTMLElement): void {
+	private createAffectedFeaturesElement(parent: HTMLElement): void {
-		const featuresListContainer = append(parent, $('.workspace-trust-features-list'));
+		this.affectedFeaturesContainer = append(parent, $('.workspace-trust-features'));
-		const extensionsListContainer = append(featuresListContainer, $('.workspace-trust-extensions-list'));
+		this.extensionsContainer = append(this.affectedFeaturesContainer, $('.workspace-trust-extensions'));
-		const extensionsListHeader = append(extensionsListContainer, $('.workspace-trust-extensions-list-header'));
+		this.onDemandExtensionsContainer = append(this.extensionsContainer, $('.workspace-trust-extensions-on-demand'));
-		extensionsListHeader.innerText = localize('extListHeader', "Extensions Requiring Workspace Trust");
+		this.onStartExtensionsContainer = append(this.extensionsContainer, $('.workspace-trust-extensions-on-start'));
-		this.extensionsListEntriesContainer = append(extensionsListContainer, $('.workspace-trust-extensions-list-entries'));
 	}
 
 	private onDidChangeSetting(change: IWorkspaceTrustSettingChangeEvent) {