From 04dd69f669c25fbf7fa41fb2c223327d0e7da14f Mon Sep 17 00:00:00 2001 From: Henning Dieterichs Date: Mon, 14 Aug 2023 12:02:57 +0200 Subject: [PATCH] Renders toggle state in action bar. Fixes #186403. --- .../lib/stylelint/vscode-known-variables.json | 1 + src/vs/base/browser/ui/actionbar/actionbar.ts | 9 +++++ src/vs/base/browser/ui/toolbar/toolbar.ts | 6 ++++ .../diffEditorWidget2.contribution.ts | 36 ++++--------------- .../actionWidget/browser/actionWidget.css | 5 +++ .../actionWidget/browser/actionWidget.ts | 6 ++++ .../parts/editor/editor.contribution.ts | 29 ++++++--------- .../browser/parts/editor/titleControl.ts | 3 +- 8 files changed, 46 insertions(+), 49 deletions(-) diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index a8d9c3557f0..2af3addfa9f 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -1,5 +1,6 @@ { "colors": [ + "--vscode-actionBar-toggledBackground", "--vscode-activityBar-activeBackground", "--vscode-activityBar-activeBorder", "--vscode-activityBar-activeFocusBorder", diff --git a/src/vs/base/browser/ui/actionbar/actionbar.ts b/src/vs/base/browser/ui/actionbar/actionbar.ts index fe70a35dd44..dd46e532100 100644 --- a/src/vs/base/browser/ui/actionbar/actionbar.ts +++ b/src/vs/base/browser/ui/actionbar/actionbar.ts @@ -51,6 +51,12 @@ export interface IActionBarOptions { readonly preventLoopNavigation?: boolean; readonly focusOnlyEnabledItems?: boolean; readonly hoverDelegate?: IHoverDelegate; + /** + * If true, toggled primary items are highlighted with a background color. + * Some action bars exclusively use icon states, we don't want to enable this for them. + * Thus, this is opt-in. + */ + readonly highlightToggledItems?: boolean; } export interface IActionOptions extends IActionViewItemOptions { @@ -213,6 +219,9 @@ export class ActionBar extends Disposable implements IActionRunner { this.actionsList = document.createElement('ul'); this.actionsList.className = 'actions-container'; + if (this.options.highlightToggledItems) { + this.actionsList.classList.add('highlight-toggled'); + } this.actionsList.setAttribute('role', this.options.ariaRole || 'toolbar'); if (this.options.ariaLabel) { diff --git a/src/vs/base/browser/ui/toolbar/toolbar.ts b/src/vs/base/browser/ui/toolbar/toolbar.ts index c91d4ee1b07..1a6089b5958 100644 --- a/src/vs/base/browser/ui/toolbar/toolbar.ts +++ b/src/vs/base/browser/ui/toolbar/toolbar.ts @@ -30,6 +30,11 @@ export interface IToolBarOptions { moreIcon?: ThemeIcon; allowContextMenu?: boolean; skipTelemetry?: boolean; + + /** + * If true, toggled primary items are highlighted with a background color. + */ + highlightToggledItems?: boolean; } /** @@ -66,6 +71,7 @@ export class ToolBar extends Disposable { ariaLabel: options.ariaLabel, actionRunner: options.actionRunner, allowContextMenu: options.allowContextMenu, + highlightToggledItems: options.highlightToggledItems, actionViewItemProvider: (action, viewItemOptions) => { if (action.id === ToggleMenuAction.ID) { this.toggleMenuActionViewItem = new DropdownMenuActionViewItem( diff --git a/src/vs/editor/browser/widget/diffEditorWidget2/diffEditorWidget2.contribution.ts b/src/vs/editor/browser/widget/diffEditorWidget2/diffEditorWidget2.contribution.ts index 9908e9ad309..d312eb5629a 100644 --- a/src/vs/editor/browser/widget/diffEditorWidget2/diffEditorWidget2.contribution.ts +++ b/src/vs/editor/browser/widget/diffEditorWidget2/diffEditorWidget2.contribution.ts @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import { Codicon } from 'vs/base/common/codicons'; -import { ThemeIcon } from 'vs/base/common/themables'; import { ICodeEditor } from 'vs/editor/browser/editorBrowser'; import { EditorAction2, ServicesAccessor } from 'vs/editor/browser/editorExtensions'; import { findFocusedDiffEditor } from 'vs/editor/browser/widget/diffEditor.contribution'; @@ -23,6 +22,13 @@ export class ToggleCollapseUnchangedRegions extends Action2 { title: { value: localize('toggleCollapseUnchangedRegions', "Toggle Collapse Unchanged Regions"), original: 'Toggle Collapse Unchanged Regions' }, icon: Codicon.map, precondition: ContextKeyEqualsExpr.create('diffEditorVersion', 2), + toggled: ContextKeyExpr.has('config.diffEditor.experimental.collapseUnchangedRegions'), + menu: { + id: MenuId.EditorTitle, + order: 22, + group: 'navigation', + when: ContextKeyEqualsExpr.create('diffEditorVersion', 2), + }, }); } @@ -35,34 +41,6 @@ export class ToggleCollapseUnchangedRegions extends Action2 { registerAction2(ToggleCollapseUnchangedRegions); -MenuRegistry.appendMenuItem(MenuId.EditorTitle, { - command: { - id: new ToggleCollapseUnchangedRegions().desc.id, - title: localize('collapseUnchangedRegions', "Show Unchanged Regions"), - icon: Codicon.map - }, - order: 22, - group: 'navigation', - when: ContextKeyExpr.and( - ContextKeyExpr.has('config.diffEditor.experimental.collapseUnchangedRegions'), - ContextKeyEqualsExpr.create('diffEditorVersion', 2) - ) -}); - -MenuRegistry.appendMenuItem(MenuId.EditorTitle, { - command: { - id: new ToggleCollapseUnchangedRegions().desc.id, - title: localize('showUnchangedRegions', "Collapse Unchanged Regions"), - icon: ThemeIcon.modify(Codicon.map, 'disabled'), - }, - order: 22, - group: 'navigation', - when: ContextKeyExpr.and( - ContextKeyExpr.has('config.diffEditor.experimental.collapseUnchangedRegions').negate(), - ContextKeyEqualsExpr.create('diffEditorVersion', 2) - ) -}); - export class ToggleShowMovedCodeBlocks extends Action2 { constructor() { super({ diff --git a/src/vs/platform/actionWidget/browser/actionWidget.css b/src/vs/platform/actionWidget/browser/actionWidget.css index f76c030d9f2..1384b5f5e74 100644 --- a/src/vs/platform/actionWidget/browser/actionWidget.css +++ b/src/vs/platform/actionWidget/browser/actionWidget.css @@ -142,3 +142,8 @@ .action-widget-action-bar .action-label:hover { background-color: transparent !important; } + +.monaco-action-bar .actions-container.highlight-toggled .action-label.checked { + /* The important gives this rule precedence over the hover rule. */ + background: var(--vscode-actionBar-toggledBackground) !important; +} diff --git a/src/vs/platform/actionWidget/browser/actionWidget.ts b/src/vs/platform/actionWidget/browser/actionWidget.ts index 87f6884c183..f1581a75f63 100644 --- a/src/vs/platform/actionWidget/browser/actionWidget.ts +++ b/src/vs/platform/actionWidget/browser/actionWidget.ts @@ -17,7 +17,13 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView import { InstantiationType, registerSingleton } from 'vs/platform/instantiation/common/extensions'; import { createDecorator, IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation'; import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry'; +import { registerColor } from 'vs/platform/theme/common/colorRegistry'; +registerColor( + 'actionBar.toggledBackground', + { dark: '#383a49', light: '#dddddd', hcDark: '#383a49', hcLight: '#dddddd', }, + localize('actionBar.toggledBackground', 'Background color for toggled action items in action bar.') +); const ActionWidgetContextKeys = { Visible: new RawContextKey('codeActionMenuVisible', false, localize('codeActionMenuVisible', "Whether the action widget list is visible")) diff --git a/src/vs/workbench/browser/parts/editor/editor.contribution.ts b/src/vs/workbench/browser/parts/editor/editor.contribution.ts index a07e77fc9fd..2fb64d37538 100644 --- a/src/vs/workbench/browser/parts/editor/editor.contribution.ts +++ b/src/vs/workbench/browser/parts/editor/editor.contribution.ts @@ -554,27 +554,18 @@ appendEditorToolItem( 11 ); -// Diff Editor Title Menu: Toggle Ignore Trim Whitespace (Enabled) -appendEditorToolItem( - { +MenuRegistry.appendMenuItem(MenuId.EditorTitle, { + command: { id: TOGGLE_DIFF_IGNORE_TRIM_WHITESPACE, - title: localize('ignoreTrimWhitespace.label', "Ignore Leading/Trailing Whitespace Differences"), - icon: toggleWhitespace + title: localize('ignoreTrimWhitespace.label', "Show Leading/Trailing Whitespace Differences"), + icon: toggleWhitespace, + precondition: TextCompareEditorActiveContext, + toggled: ContextKeyExpr.equals('config.diffEditor.ignoreTrimWhitespace', false), }, - ContextKeyExpr.and(TextCompareEditorActiveContext, ContextKeyExpr.notEquals('config.diffEditor.ignoreTrimWhitespace', true)), - 20 -); - -// Diff Editor Title Menu: Toggle Ignore Trim Whitespace (Disabled) -appendEditorToolItem( - { - id: TOGGLE_DIFF_IGNORE_TRIM_WHITESPACE, - title: localize('showTrimWhitespace.label', "Show Leading/Trailing Whitespace Differences"), - icon: ThemeIcon.modify(toggleWhitespace, 'disabled') - }, - ContextKeyExpr.and(TextCompareEditorActiveContext, ContextKeyExpr.notEquals('config.diffEditor.ignoreTrimWhitespace', false)), - 20 -); + group: 'navigation', + when: TextCompareEditorActiveContext, + order: 20, +}); // Editor Commands for Command Palette MenuRegistry.appendMenuItem(MenuId.CommandPalette, { command: { id: KEEP_EDITOR_COMMAND_ID, title: { value: localize('keepEditor', "Keep Editor"), original: 'Keep Editor' }, category: Categories.View }, when: ContextKeyExpr.has('config.workbench.editor.enablePreview') }); diff --git a/src/vs/workbench/browser/parts/editor/titleControl.ts b/src/vs/workbench/browser/parts/editor/titleControl.ts index 73a36af9470..e020cd99372 100644 --- a/src/vs/workbench/browser/parts/editor/titleControl.ts +++ b/src/vs/workbench/browser/parts/editor/titleControl.ts @@ -199,7 +199,8 @@ export abstract class TitleControl extends Themable { renderDropdownAsChildElement: this.renderDropdownAsChildElement, telemetrySource: 'editorPart', resetMenu: MenuId.EditorTitle, - maxNumberOfItems: 9 + maxNumberOfItems: 9, + highlightToggledItems: true, })); // Context