Merge pull request #185241 from microsoft/aiday/changingTheInlineChatBackgroundColor

Making zone widget background same as selection if inside of the selection
This commit is contained in:
Aiday Marlen Kyzy 2023-06-16 11:38:03 +02:00 committed by GitHub
commit 977b6a17f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 18 deletions

View file

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

View file

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

View file

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