Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Chat codeblock improvements #183173

Merged
merged 1 commit into from May 23, 2023
Merged

Chat codeblock improvements #183173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 9 additions & 7 deletions src/vs/workbench/contrib/chat/browser/chatListRenderer.ts
View file
Open in desktop
Expand Up @@ -418,7 +418,7 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
}));

if (isResponseVM(element)) {
const info = {
const info: IChatCodeBlockInfo = {
codeBlockIndex: data.codeBlockIndex,
element,
focus() {
Expand Down Expand Up @@ -584,8 +584,8 @@ class CodeBlockPart extends Disposable implements IChatResultCodeBlockPart {
@IContextKeyService contextKeyService: IContextKeyService,
@ILanguageService private readonly languageService: ILanguageService,
@IModelService private readonly modelService: IModelService,
@IConfigurationService private readonly _configurationService: IConfigurationService,
@IAccessibilityService private readonly _accessibilityService: IAccessibilityService
@IConfigurationService private readonly configurationService: IConfigurationService,
@IAccessibilityService private readonly accessibilityService: IAccessibilityService
) {
super();
this.element = $('.interactive-result-editor-wrapper');
Expand All @@ -598,8 +598,8 @@ class CodeBlockPart extends Disposable implements IChatResultCodeBlockPart {
}));

this._configureForScreenReader();
this._register(this._accessibilityService.onDidChangeScreenReaderOptimized(() => this._configureForScreenReader()));
this._register(this._configurationService.onDidChangeConfiguration((e) => {
this._register(this.accessibilityService.onDidChangeScreenReaderOptimized(() => this._configureForScreenReader()));
this._register(this.configurationService.onDidChangeConfiguration((e) => {
if (e.affectedKeys.has(AccessibilityVerbositySettingId.Chat)) {
this._configureForScreenReader();
}
Expand Down Expand Up @@ -648,9 +648,11 @@ class CodeBlockPart extends Disposable implements IChatResultCodeBlockPart {
}
}));
this._register(this.editor.onDidBlurEditorWidget(() => {
this.element.classList.remove('focused');
WordHighlighterContribution.get(this.editor)?.stopHighlighting();
}));
this._register(this.editor.onDidFocusEditorWidget(() => {
this.element.classList.add('focused');
WordHighlighterContribution.get(this.editor)?.restoreViewState(true);
}));

Expand All @@ -675,9 +677,9 @@ class CodeBlockPart extends Disposable implements IChatResultCodeBlockPart {

private _configureForScreenReader(): void {
const toolbarElt = this.toolbar.getElement();
if (this._accessibilityService.isScreenReaderOptimized()) {
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');
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');
} else {
toolbarElt.style.display = '';
}
Expand Down
26 changes: 13 additions & 13 deletions src/vs/workbench/contrib/chat/browser/media/chat.css
View file
Open in desktop
Expand Up @@ -65,19 +65,14 @@
color: var(--vscode-badge-foreground) !important;
}

.interactive-item-container .header .monaco-toolbar,
.interactive-item-container .header .monaco-toolbar .action-label {
.interactive-item-container:not(.interactive-response:hover) .header .monaco-toolbar,
.interactive-item-container:not(.interactive-response:hover) .header .monaco-toolbar .action-label {
/* Also apply this rule to the .action-label directly to work around a strange issue- when the
toolbar is hidden without that second rule, tabbing from the list container into a list item doesn't work
and the tab key doesn't do anything. */
display: none;
}

.interactive-item-container.interactive-response:hover .header .monaco-toolbar,
.interactive-item-container.interactive-response:hover .header .monaco-toolbar .action-label {
display: initial;
}

.interactive-item-container .header .monaco-toolbar .action-label {
border: 1px solid transparent;
padding: 2px;
Expand Down Expand Up @@ -167,7 +162,7 @@
line-height: 1.6em;
}

.interactive-item-container li {
.interactive-item-container .value li {
line-height: 1.5rem;
}

Expand Down Expand Up @@ -240,22 +235,27 @@
margin: 1px;
}

.interactive-item-container .interactive-result-editor-wrapper:hover .monaco-toolbar {
.interactive-item-container .interactive-result-editor-wrapper:hover .monaco-toolbar,
.interactive-item-container .interactive-result-editor-wrapper.focused .monaco-toolbar {
display: initial;
border-radius: 2px;
}

.interactive-item-container .interactive-result-editor-wrapper .interactive-result-editor {
border: 1px solid var(--vscode-input-border, transparent);
.interactive-item-container .interactive-result-editor-wrapper {
margin: 16px 0;
}

.interactive-response .monaco-editor .margin,
.interactive-response .monaco-editor .monaco-editor-background {
background-color: var(--vscode-interactive-result-editor-background-color);
}

.interactive-item-container .interactive-result-editor-wrapper {
margin: 16px 0;
.interactive-item-container .interactive-result-editor-wrapper .interactive-result-editor .monaco-editor {
border: 1px solid var(--vscode-input-border, transparent);
}

.interactive-item-container .interactive-result-editor-wrapper .interactive-result-editor .monaco-editor.focused {
border-color: var(--vscode-focusBorder, transparent);
}

.interactive-item-container .interactive-result-editor-wrapper,
Expand Down