tweak editing overlay (microsoft#232977)

* dedupe edit actions

* * add open view command
* use text and icons

* give telemetry source a name

Author: jrieken

src/vs/workbench/contrib/chat/browser/chatEditorActions.ts

@@ -6,7 +6,7 @@ import { isCodeEditor } from '../../../../editor/browser/editorBrowser.js';
 import { localize2 } from '../../../../nls.js';
 import { ServicesAccessor } from '../../../../editor/browser/editorExtensions.js';
 import { Codicon } from '../../../../base/common/codicons.js';
-import { Action2, MenuId, registerAction2 } from '../../../../platform/actions/common/actions.js';
+import { Action2, registerAction2 } from '../../../../platform/actions/common/actions.js';
 import { KeybindingWeight } from '../../../../platform/keybinding/common/keybindingsRegistry.js';
 import { KeyCode, KeyMod } from '../../../../base/common/keyCodes.js';
 import { CHAT_CATEGORY } from './actions/chatActions.js';
@@ -35,13 +35,7 @@ abstract class NavigateAction extends Action2 {
 				weight: KeybindingWeight.EditorContrib,
 				when: ContextKeyExpr.and(ctxHasEditorModification, EditorContextKeys.focus),
 			},
-			f1: true,
-			menu: {
-				id: MenuId.EditorTitle,
-				group: 'navigation',
-				order: next ? -100 : -101,
-				when: ctxHasEditorModification
-			}
+			f1: true
 		});
 	}
 
@@ -75,12 +69,7 @@ abstract class AcceptDiscardAction extends Action2 {
 			icon: accept
 				? Codicon.check
 				: Codicon.discard,
-			menu: {
-				id: MenuId.EditorTitle,
-				group: 'navigation',
-				order: accept ? -103 : -102,
-				when: ctxHasEditorModification
-			}
+			f1: true,
 		});
 	}
 

src/vs/workbench/contrib/chat/browser/chatEditorOverlay.ts

@@ -19,6 +19,9 @@ import { Range } from '../../../../editor/common/core/range.js';
 import { Codicon } from '../../../../base/common/codicons.js';
 import { ThemeIcon } from '../../../../base/common/themables.js';
 import { ChatEditorController } from './chatEditorController.js';
+import { IViewsService } from '../../../services/views/common/viewsService.js';
+import { EDITS_VIEW_ID } from './chat.js';
+import { ActionViewItem } from '../../../../base/browser/ui/actionbar/actionViewItems.js';
 
 class ChatEditorOverlayWidget implements IOverlayWidget {
 
@@ -33,20 +36,21 @@ class ChatEditorOverlayWidget implements IOverlayWidget {
 	constructor(
 		private readonly _editor: ICodeEditor,
 		@IEditorService private readonly _editorService: IEditorService,
+		@IViewsService private readonly _viewsService: IViewsService,
 		@IInstantiationService instaService: IInstantiationService,
 	) {
 		this._domNode = document.createElement('div');
 		this._domNode.classList.add('chat-editor-overlay-widget');
 
-		const progressNode = document.createElement('div');
-		progressNode.classList.add('progress-container');
-		progressNode.classList.add(...ThemeIcon.asClassNameArray(ThemeIcon.modify(Codicon.loading, 'spin')));
-		this._domNode.appendChild(progressNode);
-
-		const toolbarContainer = document.createElement('div');
-		toolbarContainer.classList.add('toolbar-container');
-		this._domNode.appendChild(toolbarContainer);
-		this._toolbar = instaService.createInstance(WorkbenchToolBar, toolbarContainer, {});
+		this._toolbar = instaService.createInstance(WorkbenchToolBar, this._domNode, {
+			telemetrySource: 'chatEditor.overlayToolbar',
+			actionViewItemProvider: (action, options) => {
+				if (action.id === 'accept' || action.id === 'discard') {
+					return new ActionViewItem(undefined, action, { ...options, label: true, icon: false });
+				}
+				return undefined;
+			}
+		});
 	}
 
 	dispose() {
@@ -104,9 +108,20 @@ class ChatEditorOverlayWidget implements IOverlayWidget {
 			this._domNode.classList.toggle('busy', busy);
 
 			const groups = [[
+				toAction({
+					id: 'open',
+					label: localize('open', 'Open Chat Edit'),
+					class: ThemeIcon.asClassName(busy
+						? ThemeIcon.modify(Codicon.loading, 'spin')
+						: Codicon.goToEditingSession),
+					run: async () => {
+						await this._viewsService.openView(EDITS_VIEW_ID);
+					}
+				}),
 				toAction({
 					id: 'accept',
-					label: localize('accept', 'Accept Chat Edits'),
+					label: localize('accept', 'Accept'),
+					tooltip: localize('acceptTooltip', 'Accept Chat Edits'),
 					class: ThemeIcon.asClassName(Codicon.check),
 					enabled: !busy && modified,
 					run: () => {
@@ -116,7 +131,8 @@ class ChatEditorOverlayWidget implements IOverlayWidget {
 				}),
 				toAction({
 					id: 'discard',
-					label: localize('discard', 'Discard Chat Edits'),
+					label: localize('discard', 'Discard'),
+					tooltip: localize('discardTooltip', 'Discard Chat Edits'),
 					class: ThemeIcon.asClassName(Codicon.discard),
 					enabled: !busy && modified,
 					run: () => {

src/vs/workbench/contrib/chat/browser/media/chatEditorOverlay.css

@@ -4,35 +4,26 @@
  *--------------------------------------------------------------------------------------------*/
 
 .chat-editor-overlay-widget {
-	padding: 4px;
+	padding: 0px;
 	color: var(--vscode-button-foreground);
 	background-color: var(--vscode-button-background);
-	border-radius: 2px;
+	border-radius: 5px;
 	border: 1px solid var(--vscode-contrastBorder);
 	display: flex;
 	align-items: center
 }
 
-
-.chat-editor-overlay-widget .progress-container {
-	display: none;
-	padding: 0 4px;
-}
-
-.chat-editor-overlay-widget.busy .progress-container {
-	display: inherit;
-}
-
-.chat-editor-overlay-widget .progress-container.codicon {
-	color: var(--vscode-button-foreground);
+.chat-editor-overlay-widget .action-item > .action-label {
+	padding: 5px;
 }
 
-.chat-editor-overlay-widget .toolbar-container .action-item > .action-label.codicon {
+.chat-editor-overlay-widget .action-item > .action-label.codicon {
 	color: var(--vscode-button-foreground);
 }
 
-.chat-editor-overlay-widget .toolbar-container .action-item.disabled > .action-label.codicon::before,
-.chat-editor-overlay-widget .toolbar-container .action-item.disabled > .action-label.codicon {
+.chat-editor-overlay-widget .action-item.disabled > .action-label.codicon::before,
+.chat-editor-overlay-widget .action-item.disabled > .action-label.codicon,
+.chat-editor-overlay-widget .action-item.disabled > .action-label {
 	color: var(--vscode-button-foreground);
 	opacity: 0.7;
 }