Renders toggle state in action bar. Fixes #186403.

Author: hediet

build/lib/stylelint/vscode-known-variables.json

@@ -1,5 +1,6 @@
 {
 	"colors": [
+		"--vscode-actionBar-toggledBackground",
 		"--vscode-activityBar-activeBackground",
 		"--vscode-activityBar-activeBorder",
 		"--vscode-activityBar-activeFocusBorder",

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) {

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(

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({

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;
+}

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<boolean>('codeActionMenuVisible', false, localize('codeActionMenuVisible', "Whether the action widget list is visible"))

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(
-	{
-		id: TOGGLE_DIFF_IGNORE_TRIM_WHITESPACE,
-		title: localize('ignoreTrimWhitespace.label', "Ignore Leading/Trailing Whitespace Differences"),
-		icon: toggleWhitespace
-	},
-	ContextKeyExpr.and(TextCompareEditorActiveContext, ContextKeyExpr.notEquals('config.diffEditor.ignoreTrimWhitespace', true)),
-	20
-);
-
-// Diff Editor Title Menu: Toggle Ignore Trim Whitespace (Disabled)
-appendEditorToolItem(
-	{
+MenuRegistry.appendMenuItem(MenuId.EditorTitle, {
+	command: {
 		id: TOGGLE_DIFF_IGNORE_TRIM_WHITESPACE,
-		title: localize('showTrimWhitespace.label', "Show Leading/Trailing Whitespace Differences"),
-		icon: ThemeIcon.modify(toggleWhitespace, 'disabled')
+		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', 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') });

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