sessions: streamline editor title actions

src/vs/sessions/browser/menus.ts

@@ -52,7 +52,6 @@ export const Menus = {
 	SessionConversations: new MenuId('SessionsSessionConversations'),
 	SessionChatTab: new MenuId('SessionsSessionChatTab'),
 	SessionsEditorHeaderPrimary: new MenuId('SessionsEditorHeaderPrimary'),
-	SessionsEditorHeaderSecondary: new MenuId('SessionsEditorHeaderSecondary'),
 	SessionsEditorHeaderLayout: new MenuId('SessionsEditorHeaderLayout'),
 	SessionsEditorTitle: new MenuId('SessionsEditorTitle'),
 	SessionsEditorTabsBarContext: new MenuId('SessionsEditorTabsBarContext'),

src/vs/sessions/browser/parts/media/editorPart.css

@@ -27,6 +27,10 @@
 	padding-right: 0;
 }
 
+.agent-sessions-workbench .part.editor > .content .editor-group-container > .title > .title-actions {
+	padding: 0 0 0 var(--vscode-spacing-size40);
+}
+
 .agent-sessions-workbench.dock-detail-panel .part.editor > .content .editor-group-container > .title:not(.tabs) > .label-container > .single-tab.title-label {
 	padding-left: var(--vscode-spacing-size80);
 }
@@ -35,16 +39,25 @@
 	display: none;
 }
 
-.agent-sessions-workbench.dock-detail-panel .part.editor > .content .editor-group-container > .title:not(.tabs) > .tabs-bar-add-tab {
+.agent-sessions-workbench.dock-detail-panel .part.editor > .content .editor-group-container > .title:not(.tabs) > .label-container > .tabs-bar-add-tab {
 	display: flex;
 	align-items: center;
 	flex: 0 0 auto;
 	height: var(--editor-group-tab-height);
 }
 
-.agent-sessions-workbench.dock-detail-panel .part.editor > .content .editor-group-container > .title:not(.tabs) > .tabs-bar-add-tab .action-label:not(.separator) {
-	width: 22px;
-	height: 22px;
+.agent-sessions-workbench.dock-detail-panel .part.editor > .content .editor-group-container > .title:not(.tabs) > .label-container > .tabs-bar-add-tab::after {
+	content: '';
+	width: var(--vscode-strokeThickness);
+	height: var(--vscode-spacing-size160);
+	margin: 0 var(--vscode-spacing-size40);
+	background-color: var(--vscode-titleBar-activeForeground);
+	opacity: 0.3;
+}
+
+.agent-sessions-workbench.dock-detail-panel .part.editor > .content .editor-group-container > .title:not(.tabs) > .label-container > .tabs-bar-add-tab .action-label:not(.separator) {
+	width: var(--vscode-codiconFontSize);
+	height: var(--vscode-codiconFontSize);
 	margin: 0 var(--vscode-spacing-size40);
 	display: flex;
 	align-items: center;
@@ -53,12 +66,12 @@
 	color: var(--chat-tab-inactive-foreground, currentColor);
 }
 
-.agent-sessions-workbench.dock-detail-panel .part.editor > .content .editor-group-container > .title:not(.tabs) > .tabs-bar-add-tab .action-label:not(.separator):not(.disabled):hover {
+.agent-sessions-workbench.dock-detail-panel .part.editor > .content .editor-group-container > .title:not(.tabs) > .label-container > .tabs-bar-add-tab .action-label:not(.separator):not(.disabled):hover {
 	background-color: var(--vscode-toolbar-hoverBackground);
 	color: var(--chat-tab-active-foreground, currentColor);
 }
 
-.agent-sessions-workbench.dock-detail-panel .part.editor > .content .editor-group-container > .title:not(.tabs) > .tabs-bar-add-tab .action-label:not(.separator):focus-visible {
+.agent-sessions-workbench.dock-detail-panel .part.editor > .content .editor-group-container > .title:not(.tabs) > .label-container > .tabs-bar-add-tab .action-label:not(.separator):focus-visible {
 	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
 	outline-offset: calc(-1 * var(--vscode-strokeThickness));
 }

src/vs/sessions/browser/parts/singlePaneEditorPart.ts

@@ -27,10 +27,9 @@ import { SinglePaneAuxiliaryBarPart } from './singlePaneAuxiliaryBarPart.js';
  * the editor part share one instance) and the {@link DockedAuxiliaryBarController}
  * that docks and sizes the auxiliary bar inside the editor part. The full-width
  * header itself is rendered by the editor group from the group's configured header
- * menus ({@link Menus.SessionsEditorHeaderPrimary} / {@link Menus.SessionsEditorHeaderSecondary},
- * supplied via {@link getGroupViewOptions}) and also hosts breadcrumbs in that row
- * for text file editors. The part only reacts to the header's height to reposition
- * the docked auxiliary bar.
+ * menus, supplied via {@link getGroupViewOptions}, and also hosts breadcrumbs in
+ * that row for text file editors. The part only reacts to the header's height to
+ * reposition the docked auxiliary bar.
  */
 export class SinglePaneMainEditorPart extends MainEditorPart {
 
@@ -42,7 +41,6 @@ export class SinglePaneMainEditorPart extends MainEditorPart {
 		return {
 			menuIds: {
 				headerPrimary: Menus.SessionsEditorHeaderPrimary,
-				headerSecondary: Menus.SessionsEditorHeaderSecondary,
 				headerLayout: Menus.SessionsEditorHeaderLayout,
 				editorActions: Menus.SessionsEditorTitle,
 				tabsBarContext: Menus.SessionsEditorTabsBarContext,

src/vs/sessions/contrib/changes/browser/changesViewActions.ts

@@ -208,10 +208,8 @@ class SetChangesListViewModeAction extends Action2 {
 			icon: Codicon.listFlat,
 			f1: false,
 			menu: {
-				// Always in the overflow ("…") of the right header, whether the editor
-				// area is visible or collapsed (as long as the changes list is shown).
-				id: Menus.SessionsEditorHeaderSecondary,
-				group: 'secondary/2_viewMode',
+				id: Menus.SessionsEditorTitle,
+				group: '2_viewMode',
 				order: 20,
 				when: ContextKeyExpr.and(
 					singlePaneDiffEditorTitle,
@@ -239,10 +237,8 @@ class SetChangesTreeViewModeAction extends Action2 {
 			icon: Codicon.listTree,
 			f1: false,
 			menu: {
-				// Always in the overflow ("…") of the right header, whether the editor
-				// area is visible or collapsed (as long as the changes list is shown).
-				id: Menus.SessionsEditorHeaderSecondary,
-				group: 'secondary/2_viewMode',
+				id: Menus.SessionsEditorTitle,
+				group: '2_viewMode',
 				order: 20,
 				when: ContextKeyExpr.and(
 					singlePaneDiffEditorTitle,
@@ -270,7 +266,7 @@ class CollapseAllSessionChangesDiffsAction extends Action2 {
 			icon: Codicon.collapseAll,
 			f1: false,
 			menu: {
-				id: Menus.SessionsEditorHeaderSecondary,
+				id: Menus.SessionsEditorTitle,
 				group: '1_diff',
 				order: 10,
 				when: ContextKeyExpr.and(
@@ -300,7 +296,7 @@ class ExpandAllSessionChangesDiffsAction extends Action2 {
 			icon: Codicon.expandAll,
 			f1: false,
 			menu: {
-				id: Menus.SessionsEditorHeaderSecondary,
+				id: Menus.SessionsEditorTitle,
 				group: '1_diff',
 				order: 10,
 				when: ContextKeyExpr.and(
@@ -329,20 +325,13 @@ registerAction2(ExpandAllSessionChangesDiffsAction);
 
 // The action changes the preferred layout. Side by side still falls back to inline
 // when the editor is narrow, so the label must not promise an immediate layout.
-MenuRegistry.appendMenuItem(Menus.SessionsEditorHeaderSecondary, {
+MenuRegistry.appendMenuItem(Menus.SessionsEditorTitle, {
 	command: {
 		id: TOGGLE_DIFF_SIDE_BY_SIDE,
-		title: localize('preferSideBySideDiff', "Prefer Side by Side Diff"),
-		tooltip: localize('preferSideBySideDiff.tooltip', "Uses inline layout when space is limited unless screen reader optimized mode is enabled."),
+		title: localize('alwaysShowInlineDiff', "Always Show Inline Diff"),
+		tooltip: localize('alwaysShowInlineDiff.tooltip', "Always uses inline layout."),
 		icon: Codicon.diffSidebyside,
-		toggled: {
-			condition: ContextKeyExpr.or(
-				ContextKeyExpr.and(singlePaneChangesEditorActive, SessionsDiffRenderSideBySideContext),
-				ContextKeyExpr.and(singlePaneFileDiffEditorActive, SessionsDiffRenderSideBySideContext)
-			)!,
-			title: localize('preferInlineDiff', "Prefer Inline Diff"),
-			tooltip: localize('preferInlineDiff.tooltip', "Always uses inline layout."),
-		},
+		toggled: SessionsDiffRenderSideBySideContext.negate(),
 	},
 	group: '1_diff',
 	order: 20,

src/vs/sessions/contrib/changes/browser/sessionsChangesAccessibilityHelp.ts

@@ -35,7 +35,7 @@ export class SessionsChangesAccessibilityHelp implements IAccessibleViewImplemen
 		content.push(localize('sessionsChanges.checks', "The Checks section lists the continuous integration checks for the session's pull request. Its header is a button: press Enter or Space to collapse or expand it{0}.", '<keybinding:sessions.action.revealCIChecks>'));
 		content.push(localize('sessionsChanges.viewMode', "The Changes view can show files as a tree or a flat list. Use the view's toolbar actions to switch between Tree and List modes."));
 		content.push(localize('sessionsChanges.operations', "When available, the toolbar also provides actions to commit, merge, sync, or create a pull request. Use Tab and Shift+Tab to move between the file list and toolbar actions."));
-		content.push(localize('sessionsChanges.diffView', "File diffs can prefer side-by-side or inline layout. Unless screen reader optimized mode is enabled, side-by-side diffs automatically use inline layout when space is limited. Use the Toggle Preferred Diff View command to switch the preference{0}.", '<keybinding:toggle.diff.renderSideBySide>'));
+		content.push(localize('sessionsChanges.diffView', "File diffs can prefer side-by-side or inline layout. Unless screen reader optimized mode is enabled, side-by-side diffs automatically use inline layout when space is limited. Use Always Show Inline Diff in the editor title bar's More Actions menu, or use the Toggle Preferred Diff View command to switch the preference{0}.", '<keybinding:toggle.diff.renderSideBySide>'));
 
 		return new AccessibleContentProvider(
 			AccessibleViewProviderId.SessionsChanges,

src/vs/sessions/contrib/changes/test/browser/changesViewActions.test.ts

@@ -18,13 +18,15 @@ import { TestInstantiationService } from '../../../../../platform/instantiation/
 import { EditorContextKeys } from '../../../../../editor/common/editorContextKeys.js';
 import { SessionsDiffRenderSideBySideContext } from '../../../editor/common/diffEditorOptionsService.js';
 import { ActiveEditorContext, AuxiliaryBarVisibleContext, IsAuxiliaryWindowContext, IsSessionsWindowContext, IsTopRightEditorGroupContext, MainEditorAreaVisibleContext, TextCompareEditorActiveContext } from '../../../../../workbench/common/contextkeys.js';
+import { IViewsService } from '../../../../../workbench/services/views/common/viewsService.js';
 import { Menus } from '../../../../browser/menus.js';
 import { ISessionsService } from '../../../../services/sessions/browser/sessionsService.js';
 import { IActiveSession } from '../../../../services/sessions/common/sessionsManagement.js';
 import { ChangesContextKeys, ChangesViewMode } from '../../common/changes.js';
 import { IsPhoneLayoutContext, SessionHasChangesContext, SessionHasWorkspaceContext, SessionIsCreatedContext, SinglePaneDiffEditorInputActiveContext, SinglePaneLayoutEnabledContext } from '../../../../common/contextkeys.js';
 import { SessionChangesEditor } from '../../browser/sessionChangesEditor.js';
 import { CHANGES_HEADER_ACTIONS_ID } from '../../browser/changesView.js';
+import { SessionsChangesAccessibilityHelp } from '../../browser/sessionsChangesAccessibilityHelp.js';
 import '../../browser/changesViewActions.js';
 
 suite('Changes View Actions', () => {
@@ -102,12 +104,12 @@ suite('Changes View Actions', () => {
 		]);
 	});
 
-	test('collapse all diffs is contributed to the single-pane editor header (right)', () => {
-		const item = MenuRegistry.getMenuItems(Menus.SessionsEditorHeaderSecondary)
+	test('collapse all diffs is contributed to the editor title bar overflow menu', () => {
+		const item = MenuRegistry.getMenuItems(Menus.SessionsEditorTitle)
 			.filter(isIMenuItem)
 			.find(item => item.command.id === 'workbench.action.agentSessions.collapseAllDiffs');
 
-		assert.ok(item, 'expected collapse all diffs action on the single-pane editor header menu');
+		assert.ok(item, 'expected collapse all diffs action in the editor title bar overflow menu');
 		const when = item.when?.serialize() ?? '';
 		assert.deepStrictEqual({
 			group: item.group,
@@ -128,12 +130,12 @@ suite('Changes View Actions', () => {
 		});
 	});
 
-	test('expand all diffs is contributed to the single-pane editor header (right)', () => {
-		const item = MenuRegistry.getMenuItems(Menus.SessionsEditorHeaderSecondary)
+	test('expand all diffs is contributed to the editor title bar overflow menu', () => {
+		const item = MenuRegistry.getMenuItems(Menus.SessionsEditorTitle)
 			.filter(isIMenuItem)
 			.find(item => item.command.id === 'workbench.action.agentSessions.expandAllDiffs');
 
-		assert.ok(item, 'expected expand all diffs action on the single-pane editor header menu');
+		assert.ok(item, 'expected expand all diffs action in the editor title bar overflow menu');
 		const when = item.when?.serialize() ?? '';
 		assert.deepStrictEqual({
 			group: item.group,
@@ -156,32 +158,36 @@ suite('Changes View Actions', () => {
 		});
 	});
 
-	test('preferred diff view is contributed to multi-file and single-file diff editor headers with toggle state', () => {
-		const item = MenuRegistry.getMenuItems(Menus.SessionsEditorHeaderSecondary)
+	test('always show inline diff is contributed to the editor title bar overflow menu for multi-file and single-file diffs', () => {
+		const item = MenuRegistry.getMenuItems(Menus.SessionsEditorTitle)
 			.filter(isIMenuItem)
 			.find(item => item.command.id === 'toggle.diff.renderSideBySide');
 
-		assert.ok(item, 'expected the toggle inline view action on the single-pane editor header menu');
+		assert.ok(item, 'expected the preferred diff view action in the editor title bar overflow menu');
 		const when = item.when?.serialize() ?? '';
 		const toggled = item.command.toggled;
-		const toggledInfo = isICommandActionToggleInfo(toggled) ? toggled : undefined;
+		const toggledCondition = isICommandActionToggleInfo(toggled) ? toggled.condition : toggled;
 		const nonTextDiffContext = new Context(1, null);
 		nonTextDiffContext.setValue(IsSessionsWindowContext.key, true);
 		nonTextDiffContext.setValue(SinglePaneDiffEditorInputActiveContext.key, true);
 		nonTextDiffContext.setValue(SinglePaneLayoutEnabledContext.key, true);
 		nonTextDiffContext.setValue(IsAuxiliaryWindowContext.key, false);
 		nonTextDiffContext.setValue(IsTopRightEditorGroupContext.key, true);
 		nonTextDiffContext.setValue(MainEditorAreaVisibleContext.key, true);
+		const toggleContext = new Context(1, null);
+		toggleContext.setValue(SessionsDiffRenderSideBySideContext.key, true);
+		const toggledWhenSideBySide = toggledCondition?.evaluate(toggleContext);
+		toggleContext.setValue(SessionsDiffRenderSideBySideContext.key, false);
 		assert.deepStrictEqual({
 			id: item.command.id,
 			title: typeof item.command.title === 'string' ? item.command.title : item.command.title.value,
 			group: item.group,
 			order: item.order,
 			icon: ThemeIcon.isThemeIcon(item.command.icon) ? item.command.icon.id : undefined,
 			tooltip: typeof item.command.tooltip === 'string' ? item.command.tooltip : item.command.tooltip?.value,
-			toggledTitle: toggledInfo?.title,
-			toggledTooltip: toggledInfo?.tooltip,
-			toggledOnSharedPreference: toggledInfo?.condition.serialize().includes(SessionsDiffRenderSideBySideContext.key),
+			hasStateSpecificTitle: isICommandActionToggleInfo(toggled),
+			toggledWhenSideBySide,
+			toggledWhenInline: toggledCondition?.evaluate(toggleContext),
 			hasSessionsWindowGate: when.includes(IsSessionsWindowContext.key),
 			hasActiveEditorGate: when.includes(ActiveEditorContext.key) && when.includes(SessionChangesEditor.ID),
 			hasTextCompareEditorGate: when.includes(TextCompareEditorActiveContext.key),
@@ -190,14 +196,14 @@ suite('Changes View Actions', () => {
 			matchesNonTextDiffContext: item.when?.evaluate(nonTextDiffContext) ?? false,
 		}, {
 			id: 'toggle.diff.renderSideBySide',
-			title: 'Prefer Side by Side Diff',
+			title: 'Always Show Inline Diff',
 			group: '1_diff',
 			order: 20,
 			icon: Codicon.diffSidebyside.id,
-			tooltip: 'Uses inline layout when space is limited unless screen reader optimized mode is enabled.',
-			toggledTitle: 'Prefer Inline Diff',
-			toggledTooltip: 'Always uses inline layout.',
-			toggledOnSharedPreference: true,
+			tooltip: 'Always uses inline layout.',
+			hasStateSpecificTitle: false,
+			toggledWhenSideBySide: false,
+			toggledWhenInline: true,
 			hasSessionsWindowGate: true,
 			hasActiveEditorGate: true,
 			hasTextCompareEditorGate: true,
@@ -235,9 +241,19 @@ suite('Changes View Actions', () => {
 		});
 	});
 
+	test('Changes accessibility help points to the editor title bar overflow menu', () => {
+		const instantiationService = new TestInstantiationService();
+		instantiationService.stub(IViewsService, new class extends mock<IViewsService>() { });
+		const provider = new SessionsChangesAccessibilityHelp().getProvider(instantiationService);
+
+		const content = provider.provideContent();
+		provider.dispose();
+
+		assert.strictEqual(content.includes('Use Always Show Inline Diff in the editor title bar\'s More Actions menu'), true);
+	});
 
-	test('view mode toggles include non-text single-file diff editor headers', () => {
-		const items = MenuRegistry.getMenuItems(Menus.SessionsEditorHeaderSecondary)
+	test('view mode toggles are contributed to the editor title bar overflow for non-text single-file diffs', () => {
+		const items = MenuRegistry.getMenuItems(Menus.SessionsEditorTitle)
 			.filter(isIMenuItem)
 			.filter(item => item.command.id === 'workbench.action.agentSessions.setChangesListViewMode' || item.command.id === 'workbench.action.agentSessions.setChangesTreeViewMode');
 
@@ -265,6 +281,7 @@ suite('Changes View Actions', () => {
 				hasDiffEditorInputGate: when.includes(SinglePaneDiffEditorInputActiveContext.key),
 				hasSinglePaneConfigGate: when.includes(SinglePaneLayoutEnabledContext.key),
 				hasAuxBarVisibleGate: when.includes(AuxiliaryBarVisibleContext.key),
+				hasEditorAreaVisibleGate: when.includes(MainEditorAreaVisibleContext.key),
 				hasViewModeGate: when.includes(ChangesContextKeys.ViewMode.key),
 				matchesSingleFileDiffContext: item.when?.evaluate(context) ?? false,
 			};
@@ -273,27 +290,29 @@ suite('Changes View Actions', () => {
 		assert.deepStrictEqual(actual, [{
 			id: 'workbench.action.agentSessions.setChangesListViewMode',
 			title: 'View as List',
-			group: 'secondary/2_viewMode',
+			group: '2_viewMode',
 			order: 20,
 			icon: Codicon.listFlat.id,
 			hasSessionsWindowGate: true,
 			hasActiveEditorGate: true,
 			hasDiffEditorInputGate: true,
 			hasSinglePaneConfigGate: true,
 			hasAuxBarVisibleGate: true,
+			hasEditorAreaVisibleGate: false,
 			hasViewModeGate: true,
 			matchesSingleFileDiffContext: true,
 		}, {
 			id: 'workbench.action.agentSessions.setChangesTreeViewMode',
 			title: 'View as Tree',
-			group: 'secondary/2_viewMode',
+			group: '2_viewMode',
 			order: 20,
 			icon: Codicon.listTree.id,
 			hasSessionsWindowGate: true,
 			hasActiveEditorGate: true,
 			hasDiffEditorInputGate: true,
 			hasSinglePaneConfigGate: true,
 			hasAuxBarVisibleGate: true,
+			hasEditorAreaVisibleGate: false,
 			hasViewModeGate: true,
 			matchesSingleFileDiffContext: true,
 		}]);