diff --git a/src/vs/base/common/actions.ts b/src/vs/base/common/actions.ts index 28402b5ffdad1..a1fd3249a18a7 100644 --- a/src/vs/base/common/actions.ts +++ b/src/vs/base/common/actions.ts @@ -258,14 +258,14 @@ export class EmptySubmenuAction extends Action { } } -export function toAction(props: { id: string; label: string; enabled?: boolean; checked?: boolean; class?: string; run: Function }): IAction { +export function toAction(props: { id: string; label: string; tooltip?: string; enabled?: boolean; checked?: boolean; class?: string; run: Function }): IAction { return { id: props.id, label: props.label, + tooltip: props.tooltip ?? props.label, class: props.class, enabled: props.enabled ?? true, checked: props.checked, run: async (...args: unknown[]) => props.run(...args), - tooltip: props.label }; } diff --git a/src/vs/workbench/contrib/chat/browser/codeBlockPart.css b/src/vs/workbench/contrib/chat/browser/codeBlockPart.css index 50c903e62e5df..451220d27cdc4 100644 --- a/src/vs/workbench/contrib/chat/browser/codeBlockPart.css +++ b/src/vs/workbench/contrib/chat/browser/codeBlockPart.css @@ -8,15 +8,30 @@ position: relative; } -.interactive-result-code-block .monaco-toolbar { +.interactive-result-code-block .interactive-result-code-block-toolbar { display: none; +} + +.interactive-result-code-block .interactive-result-code-block-toolbar > .monaco-action-bar, +.interactive-result-code-block .interactive-result-code-block-toolbar > .monaco-toolbar { position: absolute; top: -13px; - right: 10px; height: 26px; + line-height: 26px; background-color: var(--vscode-interactive-result-editor-background-color, var(--vscode-editor-background)); border: 1px solid var(--vscode-chat-requestBorder); z-index: 100; + max-width: 70%; + text-overflow: ellipsis; + overflow: hidden; +} + +.interactive-result-code-block .interactive-result-code-block-toolbar > .monaco-action-bar { + left: 0px +} + +.interactive-result-code-block .interactive-result-code-block-toolbar > .monaco-toolbar { + right: 10px; } .interactive-result-code-block .monaco-toolbar .action-item { @@ -29,9 +44,9 @@ margin: 1px; } -.interactive-result-code-block:hover .monaco-toolbar, -.interactive-result-code-block .monaco-toolbar:focus-within, -.interactive-result-code-block.focused .monaco-toolbar { +.interactive-result-code-block:hover .interactive-result-code-block-toolbar, +.interactive-result-code-block .interactive-result-code-block-toolbar:focus-within, +.interactive-result-code-block.focused .interactive-result-code-block-toolbar { display: initial; border-radius: 2px; } diff --git a/src/vs/workbench/contrib/chat/browser/codeBlockPart.ts b/src/vs/workbench/contrib/chat/browser/codeBlockPart.ts index 8a768c698e295..fa6505fed52d4 100644 --- a/src/vs/workbench/contrib/chat/browser/codeBlockPart.ts +++ b/src/vs/workbench/contrib/chat/browser/codeBlockPart.ts @@ -56,11 +56,13 @@ import { IOpenerService } from 'vs/platform/opener/common/opener'; import { IChatResponseModel, IChatTextEditGroup } from 'vs/workbench/contrib/chat/common/chatModel'; import { TextEdit } from 'vs/editor/common/languages'; import { ICodeEditorService } from 'vs/editor/browser/services/codeEditorService'; -import { isEqual } from 'vs/base/common/resources'; +import { basename, isEqual } from 'vs/base/common/resources'; import { DefaultModelSHA1Computer } from 'vs/editor/common/services/modelService'; import { IDialogService } from 'vs/platform/dialogs/common/dialogs'; import { TextModelText } from 'vs/editor/common/model/textModelText'; import { MessageController } from 'vs/editor/contrib/message/browser/messageController'; +import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; +import { toAction } from 'vs/base/common/actions'; const $ = dom.$; @@ -466,7 +468,8 @@ export class CodeCompareBlockPart extends Disposable { private readonly contextKeyService: IContextKeyService; private readonly diffEditor: DiffEditorWidget; - private readonly toolbar: MenuWorkbenchToolBar; + private readonly toolbar1: ActionBar; + private readonly toolbar2: MenuWorkbenchToolBar; readonly element: HTMLElement; private readonly messageElement: HTMLElement; @@ -523,16 +526,20 @@ export class CodeCompareBlockPart extends Disposable { }); const toolbarElement = dom.append(this.element, $('.interactive-result-code-block-toolbar')); + + // this.resourceLabel = this._register(scopedInstantiationService.createInstance(ResourceLabel, toolbarElement, { supportIcons: true })); + const editorScopedService = this.diffEditor.getModifiedEditor().contextKeyService.createScoped(toolbarElement); const editorScopedInstantiationService = scopedInstantiationService.createChild(new ServiceCollection([IContextKeyService, editorScopedService])); - this.toolbar = this._register(editorScopedInstantiationService.createInstance(MenuWorkbenchToolBar, toolbarElement, menuId, { + this.toolbar1 = this._register(new ActionBar(toolbarElement, {})); + this.toolbar2 = this._register(editorScopedInstantiationService.createInstance(MenuWorkbenchToolBar, toolbarElement, menuId, { menuOptions: { shouldForwardArgs: true } })); - this._register(this.toolbar.onDidChangeDropdownVisibility(e => { + this._register(this.toolbar2.onDidChangeDropdownVisibility(e => { toolbarElement.classList.toggle('force-visibility', e); })); @@ -629,7 +636,7 @@ export class CodeCompareBlockPart extends Disposable { } private _configureForScreenReader(): void { - const toolbarElt = this.toolbar.getElement(); + const toolbarElt = this.toolbar2.getElement(); if (this.accessibilityService.isScreenReaderOptimized()) { toolbarElt.style.display = 'block'; toolbarElt.ariaLabel = this.configurationService.getValue(AccessibilityVerbositySettingId.Chat) ? localize('chat.codeBlock.toolbarVerbose', 'Toolbar for code block which can be reached via tab') : localize('chat.codeBlock.toolbar', 'Code block toolbar'); @@ -682,10 +689,19 @@ export class CodeCompareBlockPart extends Disposable { this.layout(width); this.diffEditor.updateOptions({ ariaLabel: localize('chat.compareCodeBlockLabel', "Code Edits") }); + this.toolbar1.push(toAction({ + label: basename(data.edit.uri), + tooltip: localize('chat.edit.tooltip', "Open '{0}'", this.labelService.getUriLabel(data.edit.uri, { relative: true })), + run: () => { + this.openerService.open(data.edit.uri, { fromUserGesture: true, allowCommands: false }); + }, + id: '', + }), { icon: false, label: true }); + if (data.hideToolbar) { - dom.hide(this.toolbar.getElement()); + dom.hide(this.toolbar2.getElement()); } else { - dom.show(this.toolbar.getElement()); + dom.show(this.toolbar2.getElement()); } } @@ -757,7 +773,7 @@ export class CodeCompareBlockPart extends Disposable { this._lastDiffEditorViewModel.value = undefined; } - this.toolbar.context = { + this.toolbar2.context = { edit: data.edit, element: data.element, diffEditor: this.diffEditor,