From 2be7cd82b0da8a552fbff3196bec00868bfd5aa9 Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Mon, 26 Apr 2021 16:22:17 -0700 Subject: [PATCH] cleanup styling and wording in editor --- .../browser/workspaceTrustEditor.css | 35 ++++++++------ .../workspace/browser/workspaceTrustEditor.ts | 47 ++++++++++--------- .../workspace/browser/workspaceTrustTree.ts | 2 +- 3 files changed, 48 insertions(+), 36 deletions(-) diff --git a/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.css b/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.css index 7cd581b7ea0..7c77b4e682d 100644 --- a/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.css +++ b/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.css @@ -41,12 +41,8 @@ margin-right: 8px; } -.workspace-trust-editor .workspace-trust-header .workspace-trust-title .workspace-trust-title-icon.codicon-workspace-trusted-icon { - color: var(--workspace-trust-state-trusted-color) !important; -} - -.workspace-trust-editor .workspace-trust-header .workspace-trust-title .workspace-trust-title-icon.codicon-workspace-untrusted-icon { - color: var(--workspace-trust-state-untrusted-color) !important; +.workspace-trust-editor .workspace-trust-header .workspace-trust-title .workspace-trust-title-icon { + color: var(--workspace-trust-selected-state-color) !important; } .workspace-trust-editor .workspace-trust-header .workspace-trust-description { @@ -81,14 +77,18 @@ justify-content: space-evenly; } +.workspace-trust-editor .workspace-trust-features .workspace-trust-limitations { + height: 360px; +} + .workspace-trust-editor.trusted .workspace-trust-features .workspace-trust-limitations.trusted { border-width: 2px; - border-color: var(--workspace-trust-state-trusted-color) !important; + border-color: var(--workspace-trust-selected-state-color) !important; } .workspace-trust-editor.untrusted .workspace-trust-features .workspace-trust-limitations.untrusted { border-width: 2px; - border-color: var(--workspace-trust-state-untrusted-color) !important; + border-color: var(--workspace-trust-selected-state-color) !important; } .workspace-trust-editor .workspace-trust-features .workspace-trust-limitations ul { @@ -107,12 +107,12 @@ } .workspace-trust-editor .workspace-trust-features .workspace-trust-limitations.trusted .list-item-icon { - color: var(--workspace-trust-state-trusted-color) !important; + color: var(--workspace-trust-trusted-color) !important; font-size: 18px; } .workspace-trust-editor .workspace-trust-features .workspace-trust-limitations.untrusted .list-item-icon { - color: var(--workspace-trust-state-untrusted-color) !important; + color: var(--workspace-trust-untrusted-color) !important; font-size: 20px; } @@ -138,14 +138,17 @@ .workspace-trust-editor .workspace-trust-features .workspace-trust-limitations-header .workspace-trust-limitations-title .workspace-trust-title-icon { font-size: 24px; margin-right: 8px; + display: none; } -.workspace-trust-editor .workspace-trust-features .workspace-trust-limitations-header .workspace-trust-limitations-title .workspace-trust-title-icon.codicon-workspace-trusted-icon { - color: var(--workspace-trust-state-trusted-color) !important; +.workspace-trust-editor.trusted .workspace-trust-features .workspace-trust-limitations.trusted .workspace-trust-limitations-header .workspace-trust-limitations-title .workspace-trust-title-icon { + display: unset; + color: var(--workspace-trust-selected-state-color) !important; } -.workspace-trust-editor .workspace-trust-features .workspace-trust-limitations-header .workspace-trust-limitations-title .workspace-trust-title-icon.codicon-workspace-untrusted-icon { - color: var(--workspace-trust-state-untrusted-color) !important; +.workspace-trust-editor.untrusted .workspace-trust-features .workspace-trust-limitations.untrusted .workspace-trust-limitations-header .workspace-trust-limitations-title .workspace-trust-title-icon { + display: unset; + color: var(--workspace-trust-selected-state-color) !important; } .workspace-trust-editor .workspace-trust-features .workspace-trust-untrusted-description { @@ -164,6 +167,10 @@ margin-top: auto; } +.workspace-trust-editor.trusted .workspace-trust-features .workspace-trust-limitations.trusted .workspace-trust-buttons-row { + display: none; +} + /** Buttons */ .workspace-trust-editor .workspace-trust-features .workspace-trust-buttons-row .workspace-trust-buttons { display: flex; diff --git a/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts b/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts index ad344191ada..d445675f28d 100644 --- a/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts +++ b/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts @@ -38,6 +38,7 @@ import { isSingleFolderWorkspaceIdentifier, toWorkspaceIdentifier } from 'vs/pla import { EditorPane } from 'vs/workbench/browser/parts/editor/editorPane'; import { EditorOptions, IEditorOpenContext } from 'vs/workbench/common/editor'; import { ChoiceAction } from 'vs/workbench/common/notifications'; +import { ACTIVITY_BAR_BADGE_BACKGROUND } from 'vs/workbench/common/theme'; import { 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'; @@ -46,8 +47,7 @@ import { filterSettingsRequireWorkspaceTrust, IWorkbenchConfigurationService } f import { IExtensionManifestPropertiesService } from 'vs/workbench/services/extensions/common/extensionManifestPropertiesService'; import { WorkspaceTrustEditorInput } from 'vs/workbench/services/workspaces/browser/workspaceTrustEditorInput'; -const untrustedIcon = registerCodicon('workspace-untrusted-icon', Codicon.workspaceUntrusted); -const trustedIcon = registerCodicon('workspace-trusted-icon', Codicon.workspaceTrusted); +const shieldIcon = registerCodicon('workspace-trust-icon', Codicon.shield); const checkListIcon = registerCodicon('workspace-trusted-check-icon', Codicon.check); const xListIcon = registerCodicon('workspace-trusted-x-icon', Codicon.x); @@ -104,9 +104,10 @@ export class WorkspaceTrustEditor extends EditorPane { this.createAffectedFeaturesElement(scrollableContent); this.createConfigurationElement(scrollableContent); - this._register(attachStylerCallback(this.themeService, { trustedForegroundColor, untrustedForegroundColor }, colors => { - this.rootElement.style.setProperty('--workspace-trust-state-trusted-color', colors.trustedForegroundColor?.toString() || ''); - this.rootElement.style.setProperty('--workspace-trust-state-untrusted-color', colors.untrustedForegroundColor?.toString() || ''); + this._register(attachStylerCallback(this.themeService, { ACTIVITY_BAR_BADGE_BACKGROUND, trustedForegroundColor, untrustedForegroundColor }, colors => { + this.rootElement.style.setProperty('--workspace-trust-trusted-color', colors.trustedForegroundColor?.toString() || ''); + this.rootElement.style.setProperty('--workspace-trust-untrusted-color', colors.untrustedForegroundColor?.toString() || ''); + this.rootElement.style.setProperty('--workspace-trust-selected-state-color', colors.ACTIVITY_BAR_BADGE_BACKGROUND?.toString() || ''); })); this._register(registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => { @@ -142,12 +143,17 @@ export class WorkspaceTrustEditor extends EditorPane { return 'workspace-trust-header workspace-trust-untrusted'; } + private useWorkspaceLanguage(): boolean { + return !isSingleFolderWorkspaceIdentifier(toWorkspaceIdentifier(this.workspaceService.getWorkspace())); + } + private getHeaderTitleText(trusted: boolean): string { + if (trusted) { - return localize('trustedHeader', "This workspace is trusted"); + return this.useWorkspaceLanguage() ? localize('trustedHeaderWorkspace', "You trust this workspace") : localize('trustedHeaderFolder', "You trust this folder"); } - return localize('untrustedHeader', "This workspace is not trusted"); + return this.useWorkspaceLanguage() ? localize('untrustedHeaderWorkspace', "You are in restricted mode") : localize('untrustedHeaderFolder', "You are in Restricted Mode"); } private getHeaderDescriptionText(trusted: boolean): string { @@ -155,15 +161,11 @@ export class WorkspaceTrustEditor extends EditorPane { return localize('trustedDescription', "All features are enabled because trust has been granted to the workspace. [Learn more](https://aka.ms/vscode-workspace-trust)."); } - return localize('untrustedDescription', "{0} is in a restricted mode optimized for browsing code safely. [Learn more](https://aka.ms/vscode-workspace-trust).", product.nameShort); + return localize('untrustedDescription', "{0} is in a restricted mode intended for safe code browsing. [Learn more](https://aka.ms/vscode-workspace-trust).", product.nameShort); } private getHeaderTitleIconClassNames(trusted: boolean): string[] { - if (trusted) { - return trustedIcon.classNamesArray; - } - - return untrustedIcon.classNamesArray; + return shieldIcon.classNamesArray; } private rendering = false; @@ -263,7 +265,9 @@ export class WorkspaceTrustEditor extends EditorPane { private renderAffectedFeatures(numSettings: number, numExtensions: number): void { clearNode(this.affectedFeaturesContainer); const trustedContainer = append(this.affectedFeaturesContainer, $('.workspace-trust-limitations.trusted')); - this.renderLimitationsHeaderElement(trustedContainer, localize('trustedWorkspace', "Trusted Workspace"), this.getHeaderTitleIconClassNames(true)); + this.renderLimitationsHeaderElement(trustedContainer, + this.useWorkspaceLanguage() ? localize('trustedWorkspace', "In a trusted workspace") : localize('trustedFolder', "In a Trusted Folder"), + this.useWorkspaceLanguage() ? localize('trustedWorkspaceSubtitle', "You trust the authors of the files in the current workspace. All features are enabled:") : localize('trustedFolderSubtitle', "You trust the authors of the files in the current folder. All features are enabled:")); this.renderLimitationsListElement(trustedContainer, [ localize('trustedTasks', "Tasks will be allowed to run"), localize('trustedDebugging', "Debugging will be enabled"), @@ -272,12 +276,14 @@ export class WorkspaceTrustEditor extends EditorPane { ], checkListIcon.classNamesArray); const untrustedContainer = append(this.affectedFeaturesContainer, $('.workspace-trust-limitations.untrusted')); - this.renderLimitationsHeaderElement(untrustedContainer, localize('untrustedWorkspace', "Restricted Mode"), this.getHeaderTitleIconClassNames(false)); + this.renderLimitationsHeaderElement(untrustedContainer, + localize('untrustedWorkspace', "In Restricted Mode"), + this.useWorkspaceLanguage() ? localize('untrustedWorkspaceSubtitle', "You do not trust the authors of the files in the current workspace. The following features are disabled:") : localize('untrustedFolderSubtitle', "You do not trust the authors of the files in the current folder. The following features are disabled:")); this.renderLimitationsListElement(untrustedContainer, [ localize('untrustedTasks', "Tasks will be disabled"), localize('untrustedDebugging', "Debugging will be disabled"), - numSettings ? localize('untrustedSettings', "[{0} workspace settings](command:{1}) will not be applied", numSettings, 'settings.filterUntrusted') : localize('no untrustedSettings', "Workspace settings requiring trust will not be applied."), + numSettings ? localize('untrustedSettings', "[{0} workspace settings](command:{1}) will not be applied", numSettings, 'settings.filterUntrusted') : localize('no untrustedSettings', "Workspace settings requiring trust will not be applied"), localize('untrustedExtensions', "[{0} extensions](command:{1}) will be disabled or limit functionality", numExtensions, 'workbench.extensions.action.listTrustRequiredExtensions') ], xListIcon.classNamesArray); @@ -357,19 +363,18 @@ export class WorkspaceTrustEditor extends EditorPane { if (canSetWorkspaceTrust && isWorkspaceTrusted) { const textElement = append(parent, $('.workspace-trust-untrusted-description')); - textElement.innerText = localize('untrustedFolder', "This workspace is trusted via one or more of the trusted folders below."); + textElement.innerText = this.useWorkspaceLanguage() ? localize('untrustedWorkspaceReason', "This workspace is trusted via one or more of the trusted folders below.") : localize('untrustedFolderReason', "This folder is trusted via one or more of the trusted folders below."); } } - private renderLimitationsHeaderElement(parent: HTMLElement, headerText: string, iconClassNames: string[]): void { + private renderLimitationsHeaderElement(parent: HTMLElement, headerText: string, subtitleText: string): void { const limitationsHeaderContainer = append(parent, $('.workspace-trust-limitations-header')); const titleElement = append(limitationsHeaderContainer, $('.workspace-trust-limitations-title')); - const iconElement = append(titleElement, $('.workspace-trust-limitations-title-icon')); const textElement = append(titleElement, $('.workspace-trust-limitations-title-text')); + const subtitleElement = append(limitationsHeaderContainer, $('.workspace-trust-limitations-subtitle')); textElement.innerText = headerText; - iconElement.className = 'workspace-trust-title-icon'; - iconElement.classList.add(...iconClassNames); + subtitleElement.innerText = subtitleText; } private renderLimitationsListElement(parent: HTMLElement, limitations: string[], iconClassNames: string[]): void { diff --git a/src/vs/workbench/contrib/workspace/browser/workspaceTrustTree.ts b/src/vs/workbench/contrib/workspace/browser/workspaceTrustTree.ts index 74c16ab436a..73834c7565e 100644 --- a/src/vs/workbench/contrib/workspace/browser/workspaceTrustTree.ts +++ b/src/vs/workbench/contrib/workspace/browser/workspaceTrustTree.ts @@ -577,7 +577,7 @@ export class WorkspaceTrustTreeModel { this.settings.push(new WorkspaceTrustSettingsTreeEntry( 'trustedFolders', localize('trustedFolders', "Trusted Folders"), - localize('trustedFoldersDescription', "All workspaces under the following folders will be trusted."), + localize('trustedFoldersDescription', "You trust the following folders and their children: "), trustedFolders)); } }