From 3244facbbbefebdc73a93178511ea11faa4659c8 Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Tue, 9 Mar 2021 16:56:16 -0800 Subject: [PATCH] wt editor stepping stone - make extensions list better - centered header style --- .../browser/workspaceTrustEditor.css | 34 ++++++- .../workspace/browser/workspaceTrustEditor.ts | 99 ++++++++++++++----- 2 files changed, 108 insertions(+), 25 deletions(-) diff --git a/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.css b/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.css index 6f715f842a1..432085729d8 100644 --- a/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.css +++ b/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; diff --git a/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts b/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts index 644f0e352f1..aa1aa023ff5 100644 --- a/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts +++ b/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.extensionsRequiringTrust.forEach(ext => { - const extensionListItem = append(this.extensionsListEntriesContainer, $('.workspace-trust-extension')); - extensionListItem.innerText = ext.displayName || ext.name; - }); + this.renderExtensionList( + localize('onStartExtensions', "Disabled Extensions"), + this.onStartExtensionsContainer, + 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, $('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 { - const featuresListContainer = append(parent, $('.workspace-trust-features-list')); - const extensionsListContainer = append(featuresListContainer, $('.workspace-trust-extensions-list')); - const extensionsListHeader = append(extensionsListContainer, $('.workspace-trust-extensions-list-header')); - extensionsListHeader.innerText = localize('extListHeader', "Extensions Requiring Workspace Trust"); - this.extensionsListEntriesContainer = append(extensionsListContainer, $('.workspace-trust-extensions-list-entries')); + private createAffectedFeaturesElement(parent: HTMLElement): void { + this.affectedFeaturesContainer = append(parent, $('.workspace-trust-features')); + this.extensionsContainer = append(this.affectedFeaturesContainer, $('.workspace-trust-extensions')); + this.onDemandExtensionsContainer = append(this.extensionsContainer, $('.workspace-trust-extensions-on-demand')); + this.onStartExtensionsContainer = append(this.extensionsContainer, $('.workspace-trust-extensions-on-start')); } private onDidChangeSetting(change: IWorkspaceTrustSettingChangeEvent) {