@codingame/monaco-vscode-api 15.0.2 → 16.0.0

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsInsertionView.js

@@ -6,11 +6,22 @@ import { Disposable } from '../../../../../../../base/common/lifecycle.js';
 import '../../../../../../../base/common/observableInternal/index.js';
 import { IInstantiationService } from '../../../../../../../platform/instantiation/common/instantiation.js';
 import { asCssVariable } from '../../../../../../../platform/theme/common/colorUtils.js';
+import '../../../../../../../platform/theme/common/colors/baseColors.js';
+import '../../../../../../../platform/theme/common/colors/chartsColors.js';
+import { editorBackground } from '../../../../../../../platform/theme/common/colors/editorColors.js';
+import '../../../../../../../platform/theme/common/colors/inputColors.js';
+import '../../../../../../../platform/theme/common/colors/listColors.js';
+import '../../../../../../../platform/theme/common/colors/menuColors.js';
+import '../../../../../../../platform/theme/common/colors/minimapColors.js';
+import '../../../../../../../platform/theme/common/colors/miscColors.js';
+import '../../../../../../../platform/theme/common/colors/quickpickColors.js';
+import '../../../../../../../platform/theme/common/colors/searchColors.js';
 import { observableCodeEditor } from '../../../../../../browser/observableCodeEditor.js';
 import { Rect } from '../../../../../../browser/rect.js';
 import { RenderOptions, renderLines, LineSource } from '../../../../../../browser/widget/diffEditor/components/diffEditorViewZones/renderLines.js';
 import { EditorOption } from '../../../../../../common/config/editorOptions.js';
 import { LineRange } from '../../../../../../common/core/lineRange.js';
+import { OffsetRange } from '../../../../../../common/core/offsetRange.js';
 import { Position } from '../../../../../../common/core/position.js';
 import { Range } from '../../../../../../common/core/range.js';
 import { ILanguageService } from '../../../../../../common/languages/language.service.js';
@@ -19,22 +30,23 @@ import { TokenArray } from '../../../../../../common/tokens/tokenArray.js';
 import { InlineDecoration, InlineDecorationType } from '../../../../../../common/viewModel.js';
 import { GhostText, GhostTextPart } from '../../../model/ghostText.js';
 import { GhostTextView } from '../../ghostText/ghostTextView.js';
-import { getModifiedBorderColor, modifiedChangedLineBackgroundColor } from '../theme.js';
-import { getPrefixTrim, mapOutFalsy, createRectangle } from '../utils/utils.js';
+import { modifiedBackgroundColor, getModifiedBorderColor } from '../theme.js';
+import { getPrefixTrim, mapOutFalsy } from '../utils/utils.js';
 import { derived, derivedWithStore } from '../../../../../../../base/common/observableInternal/derived.js';
+import { n } from '../../../../../../../base/browser/domImpl/n.js';
 import { constObservable } from '../../../../../../../base/common/observableInternal/utils.js';
 import { observableValue } from '../../../../../../../base/common/observableInternal/base.js';
-import { n } from '../../../../../../../base/browser/domImpl/n.js';
 
+const BORDER_WIDTH = 1;
+const WIDGET_SEPARATOR_WIDTH = 1;
+const BORDER_RADIUS = 4;
 let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable {
-    constructor(_editor, _input, _host, _instantiationService, _languageService) {
+    constructor(_editor, _input, _tabAction, instantiationService, _languageService) {
         super();
         this._editor = _editor;
         this._input = _input;
-        this._host = _host;
-        this._instantiationService = _instantiationService;
+        this._tabAction = _tabAction;
         this._languageService = _languageService;
-        this._editorObs = observableCodeEditor(this._editor);
         this._onDidClick = this._register(( new Emitter()));
         this.onDidClick = this._onDidClick.event;
         this._state = derived(this, reader => {
@@ -50,6 +62,24 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             }
             return { lineNumber: state.lineNumber, column: state.startColumn, text: state.text };
         });
+        this._trimVertically = derived(this, reader => {
+            const text = this._state.read(reader)?.text;
+            if (!text || text.trim() === '') {
+                return { topOffset: 0, bottomOffset: 0, linesTop: 0, linesBottom: 0 };
+            }
+            const lineHeight = this._editor.getOption(EditorOption.lineHeight);
+            const eol = this._editor.getModel().getEOL();
+            let linesTop = 0;
+            let linesBottom = 0;
+            let i = 0;
+            for (; i < text.length && text.startsWith(eol, i); i += eol.length) {
+                linesTop += 1;
+            }
+            for (let j = text.length; j > i && text.endsWith(eol, j); j -= eol.length) {
+                linesBottom += 1;
+            }
+            return { topOffset: linesTop * lineHeight, bottomOffset: linesBottom * lineHeight, linesTop, linesBottom };
+        });
         this._maxPrefixTrim = derived(reader => {
             const state = this._state.read(reader);
             if (!state) {
@@ -57,15 +87,13 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             }
             const textModel = this._editor.getModel();
             const eol = textModel.getEOL();
-            const startsWithEol = state.text.startsWith(eol);
-            const originalRange = ( new LineRange(state.lineNumber, state.lineNumber + (startsWithEol ? 0 : 1)));
-            let modifiedLines = state.text.split(eol);
-            if (startsWithEol) {
-                modifiedLines = modifiedLines.splice(1);
-            }
-            else {
+            const trimVertically = this._trimVertically.read(reader);
+            const lines = state.text.split(eol);
+            const modifiedLines = lines.slice(trimVertically.linesTop, lines.length - trimVertically.linesBottom);
+            if (trimVertically.linesTop === 0) {
                 modifiedLines[0] = textModel.getLineContent(state.lineNumber) + modifiedLines[0];
             }
+            const originalRange = ( new LineRange(state.lineNumber, state.lineNumber + (trimVertically.linesTop > 0 ? 0 : 1)));
             return getPrefixTrim([], originalRange, modifiedLines, this._editor);
         });
         this._ghostText = derived(reader => {
@@ -80,12 +108,6 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             const inlineDecorations = ( modifiedLines.map((line, i) => ( new InlineDecoration(( new Range(i + 1, i === 0 ? 1 : prefixTrim.prefixTrim + 1, i + 1, line.length + 1)), 'modified-background', InlineDecorationType.Regular))));
             return ( new GhostText(state.lineNumber, [( new GhostTextPart(state.column, state.text, false, inlineDecorations))]));
         });
-        this._ghostTextView = this._register(this._instantiationService.createInstance(GhostTextView, this._editor, {
-            ghostText: this._ghostText,
-            minReservedLineCount: constObservable(0),
-            targetTextModel: ( this._editorObs.model.map(model => model ?? undefined)),
-            warning: constObservable(undefined),
-        }, observableValue(this, { syntaxHighlightingEnabled: true, extraClasses: ['inline-edit'] }), true, true));
         this._display = derived(this, reader => !!this._state.read(reader) ? 'block' : 'none');
         this._editorMaxContentWidthInRange = derived(this, reader => {
             const state = this._state.read(reader);
@@ -104,7 +126,7 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             )));
             const text = textBeforeInsertion + state.text + textAfterInsertion;
             const lines = text.split(eol);
-            const renderOptions = RenderOptions.fromEditor(this._editor).withSetWidth(false);
+            const renderOptions = RenderOptions.fromEditor(this._editor).withSetWidth(false).withScrollBeyondLastColumn(0);
             const lineWidths = ( lines.map(line => {
                 const t = textModel.tokenization.tokenizeLinesAt(state.lineNumber, [line])?.[0];
                 let tokens;
@@ -114,29 +136,11 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
                 else {
                     tokens = LineTokens.createEmpty(line, this._languageService.languageIdCodec);
                 }
-                return renderLines(( new LineSource([tokens])), renderOptions, [], $('div'), true).minWidthInPx - 20;
+                return renderLines(( new LineSource([tokens])), renderOptions, [], $('div'), true).minWidthInPx;
             }));
             return Math.max(...lineWidths);
         });
-        this._trimVertically = derived(this, reader => {
-            const text = this._state.read(reader)?.text;
-            if (!text || text.trim() === '') {
-                return { top: 0, bottom: 0 };
-            }
-            const lineHeight = this._editor.getOption(EditorOption.lineHeight);
-            const eol = this._editor.getModel().getEOL();
-            let topTrim = 0;
-            let bottomTrim = 0;
-            let i = 0;
-            for (; i < text.length && text.startsWith(eol, i); i += eol.length) {
-                topTrim += lineHeight;
-            }
-            for (let j = text.length; j > i && text.endsWith(eol, j); j -= eol.length) {
-                bottomTrim += lineHeight;
-            }
-            return { top: topTrim, bottom: bottomTrim };
-        });
-        this.startLineOffset = ( this._trimVertically.map(v => v.top));
+        this.startLineOffset = ( this._trimVertically.map(v => v.topOffset));
         this.originalLines = ( this._state.map(s => s ?
             ( new LineRange(
                 s.lineNumber,
@@ -158,7 +162,7 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             if (right <= left) {
                 return null;
             }
-            const { top: topTrim, bottom: bottomTrim } = this._trimVertically.read(reader);
+            const { topOffset: topTrim, bottomOffset: bottomTrim } = this._trimVertically.read(reader);
             const scrollTop = this._editorObs.scrollTop.read(reader);
             const height = this._ghostTextView.height.read(reader) - topTrim - bottomTrim;
             const top = this._editor.getTopForLineNumber(state.lineNumber) - scrollTop + topTrim;
@@ -166,47 +170,55 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             const overlay = ( new Rect(left, top, right, bottom));
             return {
                 overlay,
+                startsAtContentLeft: prefixLeftOffset === 0,
                 contentLeft: editorLayout.contentLeft,
                 minContentWidthRequired: prefixLeftOffset + overlay.width + verticalScrollbarWidth,
-                borderRadius: 4,
-                padding: 3
             };
         }).recomputeInitiallyAndOnChange(this._store);
-        this._foregroundSvg = n.svg({
-            transform: 'translate(-0.5 -0.5)',
-            style: { overflow: 'visible', pointerEvents: 'none', position: 'absolute' },
+        this._modifiedOverlay = n.div({
+            style: { pointerEvents: 'none', }
         }, derived(reader => {
             const overlayLayoutObs = mapOutFalsy(this._overlayLayout).read(reader);
             if (!overlayLayoutObs) {
                 return undefined;
             }
-            const layoutInfo = overlayLayoutObs.read(reader);
-            const overlay = layoutInfo.overlay;
-            const croppedOverlay = ( new Rect(
-                Math.max(overlay.left, layoutInfo.contentLeft),
-                overlay.top,
-                overlay.right,
-                overlay.bottom
+            const overlayHider = ( overlayLayoutObs.map(
+                layoutInfo => Rect.fromLeftTopRightBottom(layoutInfo.contentLeft - BORDER_RADIUS - BORDER_WIDTH, layoutInfo.overlay.top, layoutInfo.contentLeft, layoutInfo.overlay.bottom)
+            )).read(reader);
+            const overlayRect = ( overlayLayoutObs.map(
+                l => l.overlay.withMargin(0, BORDER_WIDTH, 0, l.startsAtContentLeft ? 0 : BORDER_WIDTH).intersectHorizontal(( new OffsetRange(overlayHider.left, Number.MAX_SAFE_INTEGER)))
             ));
-            const rectangleOverlay = createRectangle({
-                topLeft: croppedOverlay.getLeftTop(),
-                width: croppedOverlay.width + 1,
-                height: croppedOverlay.height + 1,
-            }, layoutInfo.padding, layoutInfo.borderRadius, { hideLeft: croppedOverlay.left !== overlay.left });
-            const modifiedBorderColor = getModifiedBorderColor(this._host.tabAction).read(reader);
+            const underlayRect = ( overlayRect.map(rect => rect.withMargin(WIDGET_SEPARATOR_WIDTH, WIDGET_SEPARATOR_WIDTH)));
             return [
-                n.svgElem('path', {
-                    class: 'originalOverlay',
-                    d: rectangleOverlay,
+                n.div({
+                    class: 'originalUnderlayInsertion',
                     style: {
-                        fill: asCssVariable(modifiedChangedLineBackgroundColor),
-                        stroke: modifiedBorderColor,
-                        strokeWidth: '1px',
+                        ...underlayRect.read(reader).toStyles(),
+                        borderRadius: BORDER_RADIUS,
+                        border: `${BORDER_WIDTH + WIDGET_SEPARATOR_WIDTH}px solid ${asCssVariable(editorBackground)}`,
+                        boxSizing: 'border-box',
                     }
                 }),
+                n.div({
+                    class: 'originalOverlayInsertion',
+                    style: {
+                        ...overlayRect.read(reader).toStyles(),
+                        borderRadius: BORDER_RADIUS,
+                        border: ( getModifiedBorderColor(this._tabAction).map(bc => `${BORDER_WIDTH}px solid ${asCssVariable(bc)}`)),
+                        boxSizing: 'border-box',
+                        backgroundColor: asCssVariable(modifiedBackgroundColor),
+                    }
+                }),
+                n.div({
+                    class: 'originalOverlayHiderInsertion',
+                    style: {
+                        ...overlayHider.toStyles(),
+                        backgroundColor: asCssVariable(editorBackground),
+                    }
+                })
             ];
         })).keepUpdated(this._store);
-        this._nonOverflowView = n.div({
+        this._view = n.div({
             class: 'inline-edits-view',
             style: {
                 position: 'absolute',
@@ -217,14 +229,21 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
                 display: this._display,
             },
         }, [
-            [this._foregroundSvg],
+            [this._modifiedOverlay],
         ]).keepUpdated(this._store);
+        this._editorObs = observableCodeEditor(this._editor);
+        this._ghostTextView = this._register(instantiationService.createInstance(GhostTextView, this._editor, {
+            ghostText: this._ghostText,
+            minReservedLineCount: constObservable(0),
+            targetTextModel: ( this._editorObs.model.map(model => model ?? undefined)),
+            warning: constObservable(undefined),
+        }, observableValue(this, { syntaxHighlightingEnabled: true, extraClasses: ['inline-edit'] }), true, true));
         this.isHovered = this._ghostTextView.isHovered;
         this._register(this._ghostTextView.onDidClick((e) => {
             this._onDidClick.fire(e);
         }));
         this._register(this._editorObs.createOverlayWidget({
-            domNode: this._nonOverflowView.element,
+            domNode: this._view.element,
             position: constObservable(null),
             allowEditorOverflow: false,
             minContentWidthInPx: derived(reader => {

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.d.ts

@@ -1,16 +1,18 @@
 import { IMouseEvent } from "../../../../../../../base/browser/mouseEvent.js";
 import { Disposable } from "../../../../../../../base/common/lifecycle.js";
 import { IObservable } from "../../../../../../../base/common/observable.js";
+import { IThemeService } from "../../../../../../../platform/theme/common/themeService.service.js";
 import { ObservableCodeEditor } from "../../../../../../browser/observableCodeEditor.js";
 import { LineRange } from "../../../../../../common/core/lineRange.js";
+import { Range } from "../../../../../../common/core/range.js";
 import { ILanguageService } from "../../../../../../common/languages/language.service.js";
-import { IInlineEditsView, IInlineEditsViewHost } from "../inlineEditsViewInterface.js";
-import { Replacement } from "./inlineEditsWordReplacementView.js";
+import { IInlineEditsView, InlineEditTabAction } from "../inlineEditsViewInterface.js";
 export declare class InlineEditsLineReplacementView extends Disposable implements IInlineEditsView {
     private readonly _editor;
     private readonly _edit;
-    private readonly _host;
+    private readonly _tabAction;
     private readonly _languageService;
+    private readonly _themeService;
     private readonly _onDidClick;
     readonly onDidClick: import("../../../../../../../base/common/event.js").Event<IMouseEvent>;
     private readonly _originalBubblesDecorationCollection;
@@ -26,9 +28,13 @@ export declare class InlineEditsLineReplacementView extends Disposable implement
         modifiedRange: LineRange;
         modifiedLines: string[];
         replacements: Replacement[];
-    } | undefined>, _host: IInlineEditsViewHost, _languageService: ILanguageService);
+    } | undefined>, _tabAction: IObservable<InlineEditTabAction>, _languageService: ILanguageService, _themeService: IThemeService);
     private _isMouseOverWidget;
     private _previousViewZoneInfo;
     private removePreviousViewZone;
     private addViewZone;
 }
+export interface Replacement {
+    originalRange: Range;
+    modifiedRange: Range;
+}

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.js

@@ -16,6 +16,7 @@ import '../../../../../../../platform/theme/common/colors/minimapColors.js';
 import { scrollbarShadow } from '../../../../../../../platform/theme/common/colors/miscColors.js';
 import '../../../../../../../platform/theme/common/colors/quickpickColors.js';
 import '../../../../../../../platform/theme/common/colors/searchColors.js';
+import { IThemeService } from '../../../../../../../platform/theme/common/themeService.service.js';
 import { EditorMouseEvent } from '../../../../../../browser/editorDom.js';
 import { Point } from '../../../../../../browser/point.js';
 import { Rect } from '../../../../../../browser/rect.js';
@@ -28,21 +29,21 @@ import { TrackedRangeStickiness } from '../../../../../../common/model.js';
 import { LineTokens } from '../../../../../../common/tokens/lineTokens.js';
 import { TokenArray } from '../../../../../../common/tokens/tokenArray.js';
 import { InlineDecoration, InlineDecorationType } from '../../../../../../common/viewModel.js';
-import { getModifiedBorderColor, modifiedChangedLineBackgroundColor } from '../theme.js';
+import { getModifiedBorderColor, getOriginalBorderColor, originalBackgroundColor, getEditorBlendedColor, modifiedChangedLineBackgroundColor } from '../theme.js';
 import { getPrefixTrim, mapOutFalsy, rectToProps } from '../utils/utils.js';
-import { rangesToBubbleRanges } from './inlineEditsWordReplacementView.js';
 import { autorunDelta, autorun } from '../../../../../../../base/common/observableInternal/autorun.js';
 import { derived } from '../../../../../../../base/common/observableInternal/derived.js';
 import { n } from '../../../../../../../base/browser/domImpl/n.js';
 import { constObservable } from '../../../../../../../base/common/observableInternal/utils.js';
 
 let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extends Disposable {
-    constructor(_editor, _edit, _host, _languageService) {
+    constructor(_editor, _edit, _tabAction, _languageService, _themeService) {
         super();
         this._editor = _editor;
         this._edit = _edit;
-        this._host = _host;
+        this._tabAction = _tabAction;
         this._languageService = _languageService;
+        this._themeService = _themeService;
         this._onDidClick = this._register(( new Emitter()));
         this.onDidClick = this._onDidClick.event;
         this._originalBubblesDecorationCollection = this._editor.editor.createDecorationsCollection();
@@ -90,12 +91,12 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
                     decorations.push(( new InlineDecoration(( new Range(1, modified.startColumn, 1, modified.startColumn + 1)), 'start', InlineDecorationType.Regular)));
                     decorations.push(( new InlineDecoration(( new Range(1, validatedEndColumn - 1, 1, validatedEndColumn)), 'end', InlineDecorationType.Regular)));
                 }
-                const result = renderLines(( new LineSource([tokens])), RenderOptions.fromEditor(this._editor.editor).withSetWidth(false), decorations, line, true);
+                const result = renderLines(( new LineSource([tokens])), RenderOptions.fromEditor(this._editor.editor).withSetWidth(false).withScrollBeyondLastColumn(0), decorations, line, true);
                 this._editor.getOption(EditorOption.fontInfo).read(reader);
                 requiredWidth = Math.max(requiredWidth, result.minWidthInPx);
                 lines.push(line);
             }
-            return { lines, requiredWidth: requiredWidth - 10 };
+            return { lines, requiredWidth: requiredWidth };
         });
         this._layout = derived(this, reader => {
             const modifiedLines = this._modifiedLineElements.read(reader);
@@ -112,7 +113,6 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
             const scrollLeft = this._editor.scrollLeft.read(reader);
             const scrollTop = this._editor.scrollTop.read(reader);
             const editorLeftOffset = contentLeft - scrollLeft;
-            const PADDING = 4;
             const textModel = this._editor.editor.getModel();
             const originalLineWidths = edit.originalRange.mapToLineArray(line => this._editor.editor.getOffsetForColumn(line, textModel.getLineMaxColumn(line)) - prefixLeftOffset);
             const maxLineWidth = Math.max(...originalLineWidths, requiredWidth);
@@ -120,13 +120,13 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
             const endLineNumber = edit.originalRange.endLineNumberExclusive - 1;
             const topOfOriginalLines = this._editor.editor.getTopForLineNumber(startLineNumber) - scrollTop;
             const bottomOfOriginalLines = this._editor.editor.getBottomForLineNumber(endLineNumber) - scrollTop;
-            const originalLinesOverlay = Rect.fromLeftTopWidthHeight(editorLeftOffset + prefixLeftOffset, topOfOriginalLines, maxLineWidth, bottomOfOriginalLines - topOfOriginalLines + PADDING);
-            const modifiedLinesOverlay = Rect.fromLeftTopWidthHeight(originalLinesOverlay.left, originalLinesOverlay.bottom + PADDING, originalLinesOverlay.width, edit.modifiedRange.length * lineHeight);
-            const background = Rect.hull([originalLinesOverlay, modifiedLinesOverlay]).withMargin(PADDING);
+            const originalLinesOverlay = Rect.fromLeftTopWidthHeight(editorLeftOffset + prefixLeftOffset, topOfOriginalLines, maxLineWidth, bottomOfOriginalLines - topOfOriginalLines);
+            const modifiedLinesOverlay = Rect.fromLeftTopWidthHeight(originalLinesOverlay.left, originalLinesOverlay.bottom, originalLinesOverlay.width, edit.modifiedRange.length * lineHeight);
+            const background = Rect.hull([originalLinesOverlay, modifiedLinesOverlay]);
             const lowerBackground = background.intersectVertical(( new OffsetRange(originalLinesOverlay.bottom, Number.MAX_SAFE_INTEGER)));
             const lowerText = ( new Rect(
-                lowerBackground.left + PADDING,
-                lowerBackground.top + PADDING,
+                lowerBackground.left,
+                lowerBackground.top,
                 lowerBackground.right,
                 lowerBackground.bottom
             ));
@@ -136,12 +136,11 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
                 background,
                 lowerBackground,
                 lowerText,
-                padding: PADDING,
-                minContentWidthRequired: prefixLeftOffset + maxLineWidth + PADDING * 2 + verticalScrollbarWidth,
+                minContentWidthRequired: prefixLeftOffset + maxLineWidth + verticalScrollbarWidth,
             };
         });
         this._viewZoneInfo = derived(reader => {
-            const shouldShowViewZone = ( this._editor.getOption(EditorOption.inlineSuggest).map(o => o.edits.codeShifting)).read(reader);
+            const shouldShowViewZone = ( this._editor.getOption(EditorOption.inlineSuggest).map(o => o.edits.allowCodeShifting === 'always')).read(reader);
             if (!shouldShowViewZone) {
                 return undefined;
             }
@@ -150,7 +149,7 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
             if (!layout || !edit) {
                 return undefined;
             }
-            const viewZoneHeight = layout.lowerBackground.height + 2 * layout.padding;
+            const viewZoneHeight = layout.lowerBackground.height;
             const viewZoneLineNumber = edit.originalRange.endLineNumberExclusive;
             return { height: viewZoneHeight, lineNumber: viewZoneLineNumber };
         });
@@ -164,21 +163,17 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
                     return [];
                 }
                 const layoutProps = layout.read(reader);
-                const scrollLeft = this._editor.scrollLeft.read(reader);
-                let contentLeft = this._editor.layoutInfoContentLeft.read(reader);
-                let contentWidth = this._editor.contentWidth.read(reader);
+                const contentLeft = this._editor.layoutInfoContentLeft.read(reader);
+                const contentWidth = this._editor.contentWidth.read(reader);
                 const contentHeight = this._editor.editor.getContentHeight();
-                if (scrollLeft === 0) {
-                    contentLeft -= layoutProps.padding;
-                    contentWidth += layoutProps.padding;
-                }
                 const lineHeight = this._editor.getOption(EditorOption.lineHeight).read(reader);
                 modifiedLineElements.lines.forEach(l => {
-                    l.style.width = `${layout.read(reader).lowerText.width}px`;
+                    l.style.width = `${layoutProps.lowerText.width}px`;
                     l.style.height = `${lineHeight}px`;
                     l.style.position = 'relative';
                 });
-                const modifiedBorderColor = getModifiedBorderColor(this._host.tabAction).read(reader);
+                const modifiedBorderColor = getModifiedBorderColor(this._tabAction).read(reader);
+                const originalBorderColor = getOriginalBorderColor(this._tabAction).read(reader);
                 return [
                     n.div({
                         style: {
@@ -192,23 +187,27 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
                         }
                     }, [
                         n.div({
+                            class: 'originalOverlayLineReplacement',
                             style: {
                                 position: 'absolute',
-                                top: layoutProps.lowerBackground.top - layoutProps.padding,
-                                left: layoutProps.lowerBackground.left - contentLeft,
-                                width: layoutProps.lowerBackground.width,
-                                height: layoutProps.padding * 2,
-                                background: asCssVariable(editorBackground),
-                            },
+                                ...rectToProps(reader => layout.read(reader).background.translateX(-contentLeft)),
+                                borderRadius: '4px',
+                                border: ( getEditorBlendedColor(originalBorderColor, this._themeService).map(c => `1px solid ${( c.toString())}`)),
+                                pointerEvents: 'none',
+                                boxSizing: 'border-box',
+                                background: asCssVariable(originalBackgroundColor),
+                            }
                         }),
                         n.div({
+                            class: 'modifiedOverlayLineReplacement',
                             style: {
                                 position: 'absolute',
                                 ...rectToProps(reader => layout.read(reader).lowerBackground.translateX(-contentLeft)),
                                 borderRadius: '4px',
                                 background: asCssVariable(editorBackground),
                                 boxShadow: `${asCssVariable(scrollbarShadow)} 0 6px 6px -6px`,
-                                borderTop: `1px solid ${modifiedBorderColor}`,
+                                border: `1px solid ${asCssVariable(modifiedBorderColor)}`,
+                                boxSizing: 'border-box',
                                 overflow: 'hidden',
                                 cursor: 'pointer',
                                 pointerEvents: 'auto',
@@ -220,37 +219,26 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
                         }, [
                             n.div({
                                 style: {
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    width: '100%',
-                                    height: '100%',
+                                    position: 'absolute', top: 0, left: 0, width: '100%', height: '100%',
                                     background: asCssVariable(modifiedChangedLineBackgroundColor),
                                 },
                             })
                         ]),
                         n.div({
+                            class: 'modifiedLinesLineReplacement',
                             style: {
                                 position: 'absolute',
-                                padding: '0px',
                                 boxSizing: 'border-box',
                                 ...rectToProps(reader => layout.read(reader).lowerText.translateX(-contentLeft)),
                                 fontFamily: this._editor.getOption(EditorOption.fontFamily),
                                 fontSize: this._editor.getOption(EditorOption.fontSize),
                                 fontWeight: this._editor.getOption(EditorOption.fontWeight),
                                 pointerEvents: 'none',
-                            }
-                        }, [...modifiedLineElements.lines]),
-                        n.div({
-                            style: {
-                                position: 'absolute',
-                                ...rectToProps(reader => layout.read(reader).background.translateX(-contentLeft)),
+                                whiteSpace: 'nowrap',
                                 borderRadius: '4px',
-                                border: `1px solid ${modifiedBorderColor}`,
-                                pointerEvents: 'none',
-                                boxSizing: 'border-box',
+                                overflow: 'hidden',
                             }
-                        }, []),
+                        }, [...modifiedLineElements.lines]),
                     ])
                 ];
             })
@@ -320,7 +308,25 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
     }
 };
 InlineEditsLineReplacementView = ( __decorate([
-    ( __param(3, ILanguageService))
+    ( __param(3, ILanguageService)),
+    ( __param(4, IThemeService))
 ], InlineEditsLineReplacementView));
+function rangesToBubbleRanges(ranges) {
+    const result = [];
+    while (ranges.length) {
+        let range = ranges.shift();
+        if (range.startLineNumber !== range.endLineNumber) {
+            ranges.push(( new Range(range.startLineNumber + 1, 1, range.endLineNumber, range.endColumn)));
+            range = ( new Range(
+                range.startLineNumber,
+                range.startColumn,
+                range.startLineNumber,
+                Number.MAX_SAFE_INTEGER
+            ));
+        }
+        result.push(range);
+    }
+    return result;
+}
 
 export { InlineEditsLineReplacementView };

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsSideBySideView.d.ts

@@ -7,25 +7,24 @@ import { ICodeEditor } from "../../../../../../browser/editorBrowser.js";
 import { EmbeddedCodeEditorWidget } from "../../../../../../browser/widget/codeEditor/embeddedCodeEditorWidget.js";
 import { LineRange } from "../../../../../../common/core/lineRange.js";
 import { ITextModel } from "../../../../../../common/model.js";
-import { IInlineEditsView, IInlineEditsViewHost } from "../inlineEditsViewInterface.js";
+import { IInlineEditsView, InlineEditTabAction } from "../inlineEditsViewInterface.js";
 import { InlineEditWithChanges } from "../inlineEditWithChanges.js";
 export declare class InlineEditsSideBySideView extends Disposable implements IInlineEditsView {
     private readonly _editor;
     private readonly _edit;
     private readonly _previewTextModel;
     private readonly _uiState;
-    private readonly _host;
+    private readonly _tabAction;
     private readonly _instantiationService;
     private readonly _themeService;
-    static fitsInsideViewport(editor: ICodeEditor, edit: InlineEditWithChanges, originalDisplayRange: LineRange, reader: IReader): boolean;
+    static fitsInsideViewport(editor: ICodeEditor, textModel: ITextModel, edit: InlineEditWithChanges, originalDisplayRange: LineRange, reader: IReader): boolean;
     private readonly _editorObs;
     private readonly _onDidClick;
     readonly onDidClick: import("../../../../../../../base/common/event.js").Event<IMouseEvent>;
     constructor(_editor: ICodeEditor, _edit: IObservable<InlineEditWithChanges | undefined>, _previewTextModel: ITextModel, _uiState: IObservable<{
-        edit: InlineEditWithChanges;
         newTextLineCount: number;
         originalDisplayRange: LineRange;
-    } | undefined>, _host: IInlineEditsViewHost, _instantiationService: IInstantiationService, _themeService: IThemeService);
+    } | undefined>, _tabAction: IObservable<InlineEditTabAction>, _instantiationService: IInstantiationService, _themeService: IThemeService);
     private readonly _display;
     private readonly previewRef;
     private readonly _editorContainer;
@@ -46,13 +45,9 @@ export declare class InlineEditsSideBySideView extends Disposable implements IIn
     private _stickyScrollController;
     private readonly _stickyScrollHeight;
     private readonly _shouldOverflow;
-    private readonly _extendedModifiedPath;
     private readonly _originalBackgroundColor;
     private readonly _backgroundSvg;
-    private readonly _modifiedBackgroundSvg;
-    private readonly _foregroundBackgroundSvg;
-    private readonly _middleBorderWithShadow;
-    private readonly _foregroundSvg;
+    private readonly _originalOverlay;
+    private readonly _modifiedOverlay;
     private readonly _nonOverflowView;
-    private readonly _overflowView;
 }