Chat codeblock improvements (microsoft#183173)

Author: roblourens

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

@@ -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() {
@@ -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');
@@ -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();
 			}
@@ -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);
 		}));
 
@@ -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 = '';
 		}

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

@@ -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;
@@ -167,7 +162,7 @@
 	line-height: 1.6em;
 }
 
-.interactive-item-container li {
+.interactive-item-container .value li {
 	line-height: 1.5rem;
 }
 
@@ -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,