show filename for compare code blocks (#213389)

This commit is contained in:
Johannes Rieken 2024-05-24 15:36:31 +02:00 committed by GitHub
parent a5e41db5c7
commit df2881f432
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 46 additions and 15 deletions

View file

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

View file

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

View file

@ -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,