Merge pull request microsoft#185241 from microsoft/aiday/changingTheInlineChatBackgroundColor

Making zone widget background same as selection if inside of the selection

Author: aiday-mar

src/vs/workbench/contrib/inlineChat/browser/inlineChat.css

@@ -7,6 +7,10 @@
 	z-index: 3;
 }
 
+.monaco-editor .zone-widget-container.inside-selection {
+	background-color: var(--vscode-inlineChat-regionHighlight);
+}
+
 .monaco-editor .inline-chat {
 	color: inherit;
 	padding: 6px;

src/vs/workbench/contrib/inlineChat/browser/inlineChatController.ts

@@ -200,15 +200,17 @@ export class InlineChatController implements IEditorContribution {
 		let widgetPosition: Position;
 		if (initialRender) {
 			widgetPosition = this._editor.getSelection().getEndPosition();
-			this._zone.value.setMargins(widgetPosition);
+			this._zone.value.setContainerMargins();
+			this._zone.value.setWidgetMargins(widgetPosition);
 		} else {
 			assertType(this._activeSession);
 			assertType(this._strategy);
 			widgetPosition = this._strategy.getWidgetPosition() ?? this._zone.value.position ?? this._activeSession.wholeRange.value.getEndPosition();
 			const needsMargin = this._strategy.needsMargin();
 			if (!needsMargin) {
-				this._zone.value.setMargins(widgetPosition, 0);
+				this._zone.value.setWidgetMargins(widgetPosition, 0);
 			}
+			this._zone.value.updateBackgroundColor(widgetPosition, this._activeSession.wholeRange.value);
 		}
 		this._zone.value.show(widgetPosition);
 	}

src/vs/workbench/contrib/inlineChat/browser/inlineChatWidget.ts

@@ -6,8 +6,8 @@
 import 'vs/css!./inlineChat';
 import { DisposableStore, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
 import { IActiveCodeEditor, ICodeEditor, IDiffEditorConstructionOptions } from 'vs/editor/browser/editorBrowser';
-import { EditorOption } from 'vs/editor/common/config/editorOptions';
-import { Range } from 'vs/editor/common/core/range';
+import { EditorLayoutInfo, EditorOption } from 'vs/editor/common/config/editorOptions';
+import { IRange, Range } from 'vs/editor/common/core/range';
 import { localize } from 'vs/nls';
 import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
@@ -744,15 +744,15 @@ export class InlineChatZoneWidget extends ZoneWidget {
 	protected override _doLayout(heightInPixel: number): void {
 
 		const maxWidth = !this.widget.showsAnyPreview() ? 640 : Number.MAX_SAFE_INTEGER;
-		const width = Math.min(maxWidth, this._availableSpaceGivenIndentation());
+		const width = Math.min(maxWidth, this._availableSpaceGivenIndentation(this._indentationWidth));
 		this._dimension = new Dimension(width, heightInPixel);
 		this.widget.domNode.style.width = `${width}px`;
 		this.widget.layout(this._dimension);
 	}
 
-	private _availableSpaceGivenIndentation(): number {
+	private _availableSpaceGivenIndentation(indentationWidth: number | undefined): number {
 		const info = this.editor.getLayoutInfo();
-		return info.contentWidth - (info.glyphMarginWidth + info.decorationsWidth + (this._indentationWidth ?? 0));
+		return info.contentWidth - (info.glyphMarginWidth + info.decorationsWidth + (indentationWidth ?? 0));
 	}
 
 	private _computeHeightInLines(): number {
@@ -773,6 +773,18 @@ export class InlineChatZoneWidget extends ZoneWidget {
 		this._ctxVisible.set(true);
 	}
 
+	override _getWidth(info: EditorLayoutInfo): number {
+		return info.width - info.minimap.minimapWidth;
+	}
+
+	public updateBackgroundColor(position: Position, selection: IRange) {
+		if (!this.container) {
+			return;
+		}
+		const widgetLineNumber = position.lineNumber;
+		this.container.classList.toggle('inside-selection', widgetLineNumber >= selection.startLineNumber && widgetLineNumber < selection.endLineNumber);
+	}
+
 	private _calculateIndentationWidth(position: Position): number {
 		const viewModel = this.editor._getViewModel();
 		if (!viewModel) {
@@ -794,23 +806,25 @@ export class InlineChatZoneWidget extends ZoneWidget {
 		return this.editor.getOffsetForColumn(indentationLineNumber ?? positionLine, indentationLevel ?? viewModel.getLineFirstNonWhitespaceColumn(positionLine));
 	}
 
-	setMargins(position: Position, indentationWidth?: number): void {
+	setContainerMargins(): void {
+		if (!this.container) {
+			return;
+		}
+		const info = this.editor.getLayoutInfo();
+		const marginWithoutIndentation = info.glyphMarginWidth + info.decorationsWidth + info.lineNumbersWidth;
+		this.container.style.marginLeft = `${marginWithoutIndentation}px`;
+	}
+
+	setWidgetMargins(position: Position, indentationWidth?: number): void {
 		if (indentationWidth === undefined) {
 			indentationWidth = this._calculateIndentationWidth(position);
 		}
 		if (this._indentationWidth === indentationWidth) {
 			return;
 		}
-		this._indentationWidth = indentationWidth;
-		const info = this.editor.getLayoutInfo();
-		const marginWithoutIndentation = info.glyphMarginWidth + info.decorationsWidth + info.lineNumbersWidth;
-		const marginWithIndentation = marginWithoutIndentation + this._indentationWidth;
-		const isEnoughAvailableSpaceWithIndentation = this._availableSpaceGivenIndentation() > 400;
-		this._indentationWidth = isEnoughAvailableSpaceWithIndentation ? this._indentationWidth : 0;
-		const spaceLeft = isEnoughAvailableSpaceWithIndentation ? marginWithIndentation : marginWithoutIndentation;
-		const spaceRight = info.minimap.minimapWidth + info.verticalScrollbarWidth;
-		this.widget.domNode.style.marginLeft = `${spaceLeft}px`;
-		this.widget.domNode.style.marginRight = `${spaceRight}px`;
+		this._indentationWidth = this._availableSpaceGivenIndentation(indentationWidth) > 400 ? indentationWidth : 0;
+		this.widget.domNode.style.marginLeft = `${this._indentationWidth}px`;
+		this.widget.domNode.style.marginRight = `${this.editor.getLayoutInfo().minimap.minimapWidth}px`;
 	}
 
 	override hide(): void {