@codingame/monaco-vscode-api 15.0.3 → 16.0.0

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

@@ -7,7 +7,17 @@ import { Emitter } from '../../../../../../../base/common/event.js';
 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 { asCssVariableWithDefault, 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 { IThemeService } from '../../../../../../../platform/theme/common/themeService.service.js';
 import { observableCodeEditor } from '../../../../../../browser/observableCodeEditor.js';
 import { Rect } from '../../../../../../browser/rect.js';
@@ -18,35 +28,40 @@ import { Position } from '../../../../../../common/core/position.js';
 import { Range } from '../../../../../../common/core/range.js';
 import { StickyScrollController } from '../../../../../stickyScroll/browser/stickyScrollController.js';
 import { InlineCompletionContextKeys } from '../../../controller/inlineCompletionContextKeys.js';
-import { originalBackgroundColor, getModifiedBorderColor, getOriginalBorderColor, modifiedBackgroundColor } from '../theme.js';
-import { maxContentWidthInRange, getOffsetForPos, PathBuilder, mapOutFalsy, createRectangle } from '../utils/utils.js';
+import { originalBackgroundColor, getOriginalBorderColor, getEditorBlendedColor, getModifiedBorderColor, modifiedBackgroundColor } from '../theme.js';
+import { maxContentWidthInRange, getContentRenderWidth, getOffsetForPos, PathBuilder, mapOutFalsy } from '../utils/utils.js';
 import { derived } from '../../../../../../../base/common/observableInternal/derived.js';
 import { n } from '../../../../../../../base/browser/domImpl/n.js';
 import { constObservable, derivedObservableWithCache, observableFromEvent } from '../../../../../../../base/common/observableInternal/utils.js';
 import { autorun } from '../../../../../../../base/common/observableInternal/autorun.js';
 
-const PADDING = 4;
+const HORIZONTAL_PADDING = 0;
+const VERTICAL_PADDING = 0;
+const BORDER_WIDTH = 1;
+const WIDGET_SEPARATOR_WIDTH = 1;
+const BORDER_RADIUS = 4;
+const ORIGINAL_END_PADDING = 20;
+const MODIFIED_END_PADDING = 12;
 let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposable {
-    static fitsInsideViewport(editor, edit, originalDisplayRange, reader) {
+    static fitsInsideViewport(editor, textModel, edit, originalDisplayRange, reader) {
         const editorObs = observableCodeEditor(editor);
         const editorWidth = editorObs.layoutInfoWidth.read(reader);
         const editorContentLeft = editorObs.layoutInfoContentLeft.read(reader);
         const editorVerticalScrollbar = editor.getLayoutInfo().verticalScrollbarWidth;
-        const w = editor.getOption(EditorOption.fontInfo).typicalHalfwidthCharacterWidth;
         const minimapWidth = editorObs.layoutInfoMinimap.read(reader).minimapLeft !== 0 ? editorObs.layoutInfoMinimap.read(reader).minimapWidth : 0;
         const maxOriginalContent = maxContentWidthInRange(editorObs, originalDisplayRange, undefined );
-        const maxModifiedContent = edit.lineEdit.newLines.reduce((max, line) => Math.max(max, line.length * w), 0);
-        const endOfEditorPadding = 20;
-        const editorsPadding = edit.modifiedLineRange.length <= edit.originalLineRange.length ? PADDING * 3 + endOfEditorPadding : 60 + endOfEditorPadding * 2;
-        return maxOriginalContent + maxModifiedContent + editorsPadding < editorWidth - editorContentLeft - editorVerticalScrollbar - minimapWidth;
+        const maxModifiedContent = edit.lineEdit.newLines.reduce((max, line) => Math.max(max, getContentRenderWidth(line, editor, textModel)), 0);
+        const originalPadding = ORIGINAL_END_PADDING;
+        const modifiedPadding = MODIFIED_END_PADDING + 2 * BORDER_WIDTH;
+        return maxOriginalContent + maxModifiedContent + originalPadding + modifiedPadding < editorWidth - editorContentLeft - editorVerticalScrollbar - minimapWidth;
     }
-    constructor(_editor, _edit, _previewTextModel, _uiState, _host, _instantiationService, _themeService) {
+    constructor(_editor, _edit, _previewTextModel, _uiState, _tabAction, _instantiationService, _themeService) {
         super();
         this._editor = _editor;
         this._edit = _edit;
         this._previewTextModel = _previewTextModel;
         this._uiState = _uiState;
-        this._host = _host;
+        this._tabAction = _tabAction;
         this._instantiationService = _instantiationService;
         this._themeService = _themeService;
         this._editorObs = observableCodeEditor(this._editor);
@@ -55,7 +70,7 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
         this._display = derived(this, reader => !!this._uiState.read(reader) ? 'block' : 'none');
         this.previewRef = n.ref();
         this._editorContainer = n.div({
-            class: ['editorContainer', ( this._editorObs.getOption(EditorOption.inlineSuggest).map(v => !v.edits.useGutterIndicator && 'showHover'))],
+            class: ['editorContainer'],
             style: { position: 'absolute', overflow: 'hidden', cursor: 'pointer' },
             onmousedown: e => {
                 e.preventDefault();
@@ -111,17 +126,15 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
             this._editorContainer.readEffect(reader);
             this._previewEditorObs.model.read(reader);
             this._display.read(reader);
-            if (this._overflowView) {
-                this._overflowView.element.style.display = this._display.read(reader);
-            }
             if (this._nonOverflowView) {
                 this._nonOverflowView.element.style.display = this._display.read(reader);
             }
             const uiState = this._uiState.read(reader);
-            if (!uiState) {
+            const edit = this._edit.read(reader);
+            if (!uiState || !edit) {
                 return;
             }
-            const range = uiState.edit.originalLineRange;
+            const range = edit.originalLineRange;
             const hiddenAreas = [];
             if (range.startLineNumber > 1) {
                 hiddenAreas.push(( new Range(1, 1, range.startLineNumber - 1, 1)));
@@ -149,7 +162,7 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
                     }));
                 }
             });
-        }).recomputeInitiallyAndOnChange(this._store);
+        });
         this._previewEditorWidth = derived(this, reader => {
             const edit = this._edit.read(reader);
             if (!edit) {
@@ -214,52 +227,50 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
             const maxPreviewEditorLeft = Math.max(
             editorContentAreaWidth + horizontalScrollOffset - IN_EDITOR_DISPLACEMENT - Math.max(0, desiredMinimumWidth - maximumAvailableWidth),
             Math.min(cursorPos ? getOffsetForPos(this._editorObs, cursorPos, reader) + 50 : 0, editorContentAreaWidth + horizontalScrollOffset));
-            const previewEditorLeftInTextArea = Math.min(editorContentMaxWidthInRange + 20, maxPreviewEditorLeft);
-            const maxContentWidth = editorContentMaxWidthInRange + 20 + previewContentWidth + 70;
+            const previewEditorLeftInTextArea = Math.min(editorContentMaxWidthInRange + ORIGINAL_END_PADDING, maxPreviewEditorLeft);
+            const maxContentWidth = editorContentMaxWidthInRange + ORIGINAL_END_PADDING + previewContentWidth + 70;
             const dist = maxPreviewEditorLeft - previewEditorLeftInTextArea;
             let desiredPreviewEditorScrollLeft;
-            let left;
+            let codeRight;
             if (previewEditorLeftInTextArea > horizontalScrollOffset) {
                 desiredPreviewEditorScrollLeft = 0;
-                left = editorLayout.contentLeft + previewEditorLeftInTextArea - horizontalScrollOffset;
+                codeRight = editorLayout.contentLeft + previewEditorLeftInTextArea - horizontalScrollOffset;
             }
             else {
                 desiredPreviewEditorScrollLeft = horizontalScrollOffset - previewEditorLeftInTextArea;
-                left = editorLayout.contentLeft;
+                codeRight = editorLayout.contentLeft;
             }
             const selectionTop = this._originalVerticalStartPosition.read(reader) ?? this._editor.getTopForLineNumber(range.startLineNumber) - this._editorObs.scrollTop.read(reader);
             const selectionBottom = this._originalVerticalEndPosition.read(reader) ?? this._editor.getBottomForLineNumber(range.endLineNumberExclusive - 1) - this._editorObs.scrollTop.read(reader);
-            const codeLeft = editorLayout.contentLeft;
-            let codeRect = Rect.fromLeftTopRightBottom(codeLeft, selectionTop, left, selectionBottom);
+            const codeLeft = editorLayout.contentLeft - horizontalScrollOffset;
+            let codeRect = Rect.fromLeftTopRightBottom(codeLeft, selectionTop, codeRight, selectionBottom);
+            const isInsertion = codeRect.height === 0;
+            if (!isInsertion) {
+                codeRect = codeRect.withMargin(VERTICAL_PADDING, HORIZONTAL_PADDING);
+            }
             const editHeight = this._editor.getOption(EditorOption.lineHeight) * inlineEdit.modifiedLineRange.length;
             const codeHeight = selectionBottom - selectionTop;
             const previewEditorHeight = Math.max(codeHeight, editHeight);
-            const editIsSameHeight = codeRect.height === previewEditorHeight;
-            const codeEditDistRange = editIsSameHeight
-                ? ( new OffsetRange(4, 61))
-                : ( new OffsetRange(60, 61));
             const clipped = dist === 0;
-            const codeEditDist = editIsSameHeight ? PADDING : codeEditDistRange.clip(dist);
-            const previewEditorWidth = Math.min(previewContentWidth, remainingWidthRightOfEditor + editorLayout.width - editorLayout.contentLeft - codeEditDist);
-            let editRect = Rect.fromLeftTopWidthHeight(left + codeEditDist, selectionTop, previewEditorWidth, previewEditorHeight);
-            const isInsertion = codeRect.height === 0;
+            const codeEditDist = 0;
+            const previewEditorWidth = Math.min(previewContentWidth + MODIFIED_END_PADDING, remainingWidthRightOfEditor + editorLayout.width - editorLayout.contentLeft - codeEditDist);
+            let editRect = Rect.fromLeftTopWidthHeight(codeRect.right + codeEditDist, selectionTop, previewEditorWidth, previewEditorHeight);
             if (!isInsertion) {
-                codeRect = codeRect.withMargin(PADDING).deltaRight(-4);
-                editRect = editRect.withMargin(PADDING).deltaLeft(PADDING);
+                editRect = editRect.withMargin(VERTICAL_PADDING, HORIZONTAL_PADDING).translateX(HORIZONTAL_PADDING + BORDER_WIDTH);
             }
             else {
-                editRect = editRect.withMargin(PADDING).translateY(PADDING);
+                editRect = editRect.withMargin(VERTICAL_PADDING, HORIZONTAL_PADDING).translateY(VERTICAL_PADDING);
             }
             return {
                 codeRect,
                 editRect,
                 codeScrollLeft: horizontalScrollOffset,
+                contentLeft: editorLayout.contentLeft,
+                isInsertion,
                 maxContentWidth,
                 shouldShowShadow: clipped,
                 desiredPreviewEditorScrollLeft,
                 previewEditorWidth,
-                padding: PADDING,
-                borderRadius: PADDING
             };
         });
         this._stickyScrollController = StickyScrollController.get(this._editorObs.editor);
@@ -269,26 +280,6 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
                 return false;
             }
         });
-        this._extendedModifiedPath = derived(reader => {
-            const layoutInfo = this._previewEditorLayoutInfo.read(reader);
-            if (!layoutInfo) {
-                return undefined;
-            }
-            const path = ( new PathBuilder())
-                .moveTo(layoutInfo.codeRect.getRightBottom())
-                .lineTo(layoutInfo.codeRect.getRightTop())
-                .lineTo(layoutInfo.editRect.getLeftTop())
-                .lineTo(layoutInfo.editRect.getRightTop().deltaX(-layoutInfo.borderRadius))
-                .curveTo(layoutInfo.editRect.getRightTop(), layoutInfo.editRect.getRightTop().deltaY(layoutInfo.borderRadius))
-                .lineTo(layoutInfo.editRect.getRightBottom().deltaY(-layoutInfo.borderRadius))
-                .curveTo(layoutInfo.editRect.getRightBottom(), layoutInfo.editRect.getRightBottom().deltaX(-layoutInfo.borderRadius))
-                .lineTo(layoutInfo.editRect.getLeftBottom());
-            if (layoutInfo.editRect.bottom !== layoutInfo.codeRect.bottom) {
-                path.curveTo2(layoutInfo.editRect.getLeftBottom().deltaX(-20), layoutInfo.codeRect.getRightBottom().deltaX(20), layoutInfo.codeRect.getRightBottom().deltaX(0));
-            }
-            path.lineTo(layoutInfo.codeRect.getRightBottom());
-            return path.build();
-        });
         this._originalBackgroundColor = observableFromEvent(this, this._themeService.onDidColorThemeChange, () => {
             return this._themeService.getColorTheme().getColor(originalBackgroundColor) ?? Color.transparent;
         });
@@ -315,89 +306,150 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
                         .build();
                 }),
                 style: {
-                    fill: 'var(--vscode-editor-background, transparent)',
-                }
-            }),
-        ]).keepUpdated(this._store);
-        this._modifiedBackgroundSvg = n.svg({
-            transform: 'translate(-0.5 -0.5)',
-            style: { overflow: 'visible', pointerEvents: 'none', position: 'absolute' },
-        }, [
-            n.svgElem('path', {
-                class: 'extendedModifiedBackgroundCoverUp',
-                d: this._extendedModifiedPath,
-                style: {
-                    fill: 'var(--vscode-editor-background, transparent)',
-                    strokeWidth: '0px',
+                    fill: asCssVariableWithDefault(editorBackground, 'transparent'),
                 }
             }),
         ]).keepUpdated(this._store);
-        this._foregroundBackgroundSvg = n.svg({
-            transform: 'translate(-0.5 -0.5)',
-            style: { overflow: 'visible', pointerEvents: 'none', position: 'absolute' },
-        }, [
-            n.svgElem('path', {
-                class: 'extendedModifiedBackgroundCoverUp',
-                d: this._extendedModifiedPath,
-                style: {
-                    fill: 'var(--vscode-inlineEdit-modifiedChangedLineBackground, transparent)',
-                    strokeWidth: '1px',
-                }
-            }),
-        ]).keepUpdated(this._store);
-        this._middleBorderWithShadow = n.div({
-            class: ['middleBorderWithShadow'],
-            style: {
-                position: 'absolute',
-                display: ( this._previewEditorLayoutInfo.map(i => i?.shouldShowShadow ? 'block' : 'none')),
-                width: '6px',
-                boxShadow: 'var(--vscode-scrollbar-shadow) -6px 0 6px -6px inset',
-                left: ( this._previewEditorLayoutInfo.map(i => i ? i.codeRect.right - 6 : 0)),
-                top: ( this._previewEditorLayoutInfo.map(i => i ? i.codeRect.top : 0)),
-                height: ( this._previewEditorLayoutInfo.map(i => i ? i.codeRect.height : 0)),
-            },
-        }, []).keepUpdated(this._store);
-        this._foregroundSvg = n.svg({
-            transform: 'translate(-0.5 -0.5)',
-            style: { overflow: 'visible', pointerEvents: 'none', position: 'absolute' },
+        this._originalOverlay = n.div({
+            style: { pointerEvents: 'none', display: ( this._previewEditorLayoutInfo.map(layoutInfo => layoutInfo?.isInsertion ? 'none' : 'block')) },
         }, derived(reader => {
             const layoutInfoObs = mapOutFalsy(this._previewEditorLayoutInfo).read(reader);
             if (!layoutInfoObs) {
                 return undefined;
             }
-            const modifiedBorderColor = getModifiedBorderColor(this._host.tabAction).read(reader);
-            const originalBorderColor = getOriginalBorderColor(this._host.tabAction).read(reader);
+            const borderStyling = ( getOriginalBorderColor(this._tabAction).map(bc => `${BORDER_WIDTH}px solid ${asCssVariable(bc)}`));
+            const borderStylingSeparator = `${BORDER_WIDTH + WIDGET_SEPARATOR_WIDTH}px solid ${asCssVariable(editorBackground)}`;
+            const hasBorderLeft = layoutInfoObs.read(reader).codeScrollLeft !== 0;
+            const isModifiedLower = ( layoutInfoObs.map(layoutInfo => layoutInfo.codeRect.bottom < layoutInfo.editRect.bottom));
+            const transitionRectSize = BORDER_RADIUS * 2 + BORDER_WIDTH * 2;
+            const overlayHider = ( layoutInfoObs.map(
+                layoutInfo => Rect.fromLeftTopRightBottom(layoutInfo.contentLeft - BORDER_RADIUS - BORDER_WIDTH, layoutInfo.codeRect.top, layoutInfo.contentLeft, layoutInfo.codeRect.bottom + transitionRectSize)
+            )).read(reader);
+            const intersectionLine = ( new OffsetRange(overlayHider.left, Number.MAX_SAFE_INTEGER));
+            const overlayRect = ( layoutInfoObs.map(layoutInfo => layoutInfo.codeRect.intersectHorizontal(intersectionLine)));
+            const separatorRect = ( overlayRect.map(
+                overlayRect => overlayRect.withMargin(WIDGET_SEPARATOR_WIDTH, 0, WIDGET_SEPARATOR_WIDTH, WIDGET_SEPARATOR_WIDTH).intersectHorizontal(intersectionLine)
+            ));
+            const transitionRect = ( overlayRect.map(
+                overlayRect => Rect.fromLeftTopWidthHeight(overlayRect.right - transitionRectSize + BORDER_WIDTH, overlayRect.bottom - BORDER_WIDTH, transitionRectSize, transitionRectSize).intersectHorizontal(intersectionLine)
+            ));
             return [
-                n.svgElem('path', {
-                    class: 'originalOverlay',
-                    d: ( layoutInfoObs.map(
-                        layoutInfo => createRectangle({ topLeft: layoutInfo.codeRect.getLeftTop(), width: layoutInfo.codeRect.width, height: layoutInfo.codeRect.height }, 0, { topLeft: layoutInfo.borderRadius, bottomLeft: layoutInfo.borderRadius, topRight: 0, bottomRight: 0 }, { hideRight: true, hideLeft: layoutInfo.codeScrollLeft !== 0 })
-                    )),
+                n.div({
+                    class: 'originalSeparatorSideBySide',
                     style: {
-                        fill: asCssVariable(originalBackgroundColor),
-                        stroke: originalBorderColor,
-                        strokeWidth: '1px',
+                        ...separatorRect.read(reader).toStyles(),
+                        boxSizing: 'border-box',
+                        borderRadius: `${BORDER_RADIUS}px 0 0 ${BORDER_RADIUS}px`,
+                        borderTop: borderStylingSeparator,
+                        borderBottom: borderStylingSeparator,
+                        borderLeft: hasBorderLeft ? 'none' : borderStylingSeparator,
                     }
                 }),
-                n.svgElem('path', {
-                    class: 'extendedModifiedOverlay',
-                    d: this._extendedModifiedPath,
+                n.div({
+                    class: 'originalOverlaySideBySide',
                     style: {
-                        fill: asCssVariable(modifiedBackgroundColor),
-                        stroke: modifiedBorderColor,
-                        strokeWidth: '1px',
+                        ...overlayRect.read(reader).toStyles(),
+                        boxSizing: 'border-box',
+                        borderRadius: `${BORDER_RADIUS}px 0 0 ${BORDER_RADIUS}px`,
+                        borderTop: borderStyling,
+                        borderBottom: borderStyling,
+                        borderLeft: hasBorderLeft ? 'none' : borderStyling,
+                        backgroundColor: asCssVariable(originalBackgroundColor),
                     }
                 }),
-                n.svgElem('path', {
-                    class: 'middleBorder',
-                    d: ( layoutInfoObs.map(layoutInfo => ( new PathBuilder())
-                        .moveTo(layoutInfo.codeRect.getRightTop())
-                        .lineTo(layoutInfo.codeRect.getRightBottom())
-                        .build())),
+                n.div({
+                    class: 'originalCornerCutoutSideBySide',
+                    style: {
+                        pointerEvents: 'none',
+                        display: ( isModifiedLower.map(isLower => isLower ? 'block' : 'none')),
+                        ...transitionRect.read(reader).toStyles(),
+                    }
+                }, [
+                    n.div({
+                        class: 'originalCornerCutoutBackground',
+                        style: {
+                            position: 'absolute', top: '0px', left: '0px', width: '100%', height: '100%',
+                            backgroundColor: ( getEditorBlendedColor(originalBackgroundColor, this._themeService).map(c => ( c.toString()))),
+                        }
+                    }),
+                    n.div({
+                        class: 'originalCornerCutoutBorder',
+                        style: {
+                            position: 'absolute', top: '0px', left: '0px', width: '100%', height: '100%',
+                            boxSizing: 'border-box',
+                            borderTop: borderStyling,
+                            borderRight: borderStyling,
+                            borderRadius: `0 100% 0 0`,
+                            backgroundColor: asCssVariable(editorBackground)
+                        }
+                    })
+                ]),
+                n.div({
+                    class: 'originalOverlaySideBySideHider',
+                    style: {
+                        ...overlayHider.toStyles(),
+                        backgroundColor: asCssVariable(editorBackground),
+                    }
+                }),
+            ];
+        })).keepUpdated(this._store);
+        this._modifiedOverlay = n.div({
+            style: { pointerEvents: 'none', }
+        }, derived(reader => {
+            const layoutInfoObs = mapOutFalsy(this._previewEditorLayoutInfo).read(reader);
+            if (!layoutInfoObs) {
+                return undefined;
+            }
+            const isModifiedLower = ( layoutInfoObs.map(layoutInfo => layoutInfo.codeRect.bottom < layoutInfo.editRect.bottom));
+            const borderRadius = ( isModifiedLower.map(
+                isLower => `0 ${BORDER_RADIUS}px ${BORDER_RADIUS}px ${isLower ? BORDER_RADIUS : 0}px`
+            ));
+            const borderStyling = ( getEditorBlendedColor(getModifiedBorderColor(this._tabAction), this._themeService).map(c => `1px solid ${( c.toString())}`));
+            const borderStylingSeparator = `${BORDER_WIDTH + WIDGET_SEPARATOR_WIDTH}px solid ${asCssVariable(editorBackground)}`;
+            const overlayRect = ( layoutInfoObs.map(layoutInfo => layoutInfo.editRect.withMargin(0, BORDER_WIDTH)));
+            const separatorRect = ( overlayRect.map(
+                overlayRect => overlayRect.withMargin(WIDGET_SEPARATOR_WIDTH, WIDGET_SEPARATOR_WIDTH, WIDGET_SEPARATOR_WIDTH, 0)
+            ));
+            const insertionRect = derived(reader => {
+                const overlay = overlayRect.read(reader);
+                const layoutinfo = layoutInfoObs.read(reader);
+                if (!layoutinfo.isInsertion || layoutinfo.contentLeft >= overlay.left) {
+                    return Rect.fromLeftTopWidthHeight(overlay.left, overlay.top, 0, 0);
+                }
+                return ( new Rect(
+                    layoutinfo.contentLeft,
+                    overlay.top,
+                    overlay.left,
+                    overlay.top + BORDER_WIDTH * 2
+                ));
+            });
+            return [
+                n.div({
+                    class: 'modifiedInsertionSideBySide',
                     style: {
-                        display: ( layoutInfoObs.map(i => i.shouldShowShadow ? 'none' : 'block')),
-                        stroke: modifiedBorderColor,
-                        strokeWidth: '1px'
+                        ...insertionRect.read(reader).toStyles(),
+                        backgroundColor: ( getModifiedBorderColor(this._tabAction).map(c => asCssVariable(c))),
+                    }
+                }),
+                n.div({
+                    class: 'modifiedSeparatorSideBySide',
+                    style: {
+                        ...separatorRect.read(reader).toStyles(),
+                        borderRadius,
+                        borderTop: borderStylingSeparator,
+                        borderBottom: borderStylingSeparator,
+                        borderRight: borderStylingSeparator,
+                        boxSizing: 'border-box',
+                    }
+                }),
+                n.div({
+                    class: 'modifiedOverlaySideBySide',
+                    style: {
+                        ...overlayRect.read(reader).toStyles(),
+                        borderRadius,
+                        border: borderStyling,
+                        boxSizing: 'border-box',
+                        backgroundColor: asCssVariable(modifiedBackgroundColor),
                     }
                 })
             ];
@@ -414,29 +466,8 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
             },
         }, [
             this._backgroundSvg,
-            derived(this, reader => this._shouldOverflow.read(reader) ? [] : [this._modifiedBackgroundSvg, this._foregroundBackgroundSvg, this._editorContainer, this._foregroundSvg, this._middleBorderWithShadow]),
+            derived(this, reader => this._shouldOverflow.read(reader) ? [] : [this._editorContainer, this._originalOverlay, this._modifiedOverlay]),
         ]).keepUpdated(this._store);
-        this._overflowView = n.div({
-            class: 'inline-edits-view',
-            style: {
-                overflow: 'visible',
-                zIndex: '20',
-                display: this._display,
-            },
-        }, [
-            derived(this, reader => this._shouldOverflow.read(reader) ? [this._modifiedBackgroundSvg, this._foregroundBackgroundSvg, this._editorContainer, this._foregroundSvg, this._middleBorderWithShadow] : []),
-        ]).keepUpdated(this._store);
-        this._register(this._editorObs.createOverlayWidget({
-            domNode: this._overflowView.element,
-            position: constObservable({
-                preference: {
-                    top: 0,
-                    left: 0
-                }
-            }),
-            allowEditorOverflow: true,
-            minContentWidthInPx: constObservable(0),
-        }));
         this._register(this._editorObs.createOverlayWidget({
             domNode: this._nonOverflowView.element,
             position: constObservable(null),
@@ -455,11 +486,11 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
             if (!layoutInfo) {
                 return;
             }
-            const editorRect = layoutInfo.editRect.deltaTop(layoutInfo.padding).deltaBottom(-layoutInfo.padding);
+            const editorRect = layoutInfo.editRect.withMargin(-0, -0);
             this.previewEditor.layout({ height: editorRect.height, width: layoutInfo.previewEditorWidth + 15  });
             this._editorContainer.element.style.top = `${editorRect.top}px`;
             this._editorContainer.element.style.left = `${editorRect.left}px`;
-            this._editorContainer.element.style.width = `${layoutInfo.previewEditorWidth}px`;
+            this._editorContainer.element.style.width = `${layoutInfo.previewEditorWidth + HORIZONTAL_PADDING}px`;
         }));
         this._register(autorun(reader => {
             const layoutInfo = this._previewEditorLayoutInfo.read(reader);
@@ -468,6 +499,7 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
             }
             this._previewEditorObs.editor.setScrollLeft(layoutInfo.desiredPreviewEditorScrollLeft);
         }));
+        this._updatePreviewEditor.recomputeInitiallyAndOnChange(this._store);
     }
 };
 InlineEditsSideBySideView = ( __decorate([

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

@@ -1,15 +1,14 @@
 import { IMouseEvent } from "../../../../../../../base/browser/mouseEvent.js";
 import { Disposable } from "../../../../../../../base/common/lifecycle.js";
+import { IObservable } from "../../../../../../../base/common/observable.js";
 import { ObservableCodeEditor } from "../../../../../../browser/observableCodeEditor.js";
-import { Range } from "../../../../../../common/core/range.js";
 import { SingleTextEdit } from "../../../../../../common/core/textEdit.js";
 import { ILanguageService } from "../../../../../../common/languages/language.service.js";
-import { IInlineEditsView, IInlineEditsViewHost } from "../inlineEditsViewInterface.js";
+import { IInlineEditsView, InlineEditTabAction } from "../inlineEditsViewInterface.js";
 export declare class InlineEditsWordReplacementView extends Disposable implements IInlineEditsView {
     private readonly _editor;
     private readonly _edit;
-    private readonly _innerEdits;
-    private readonly _host;
+    protected readonly _tabAction: IObservable<InlineEditTabAction>;
     private readonly _languageService;
     static MAX_LENGTH: number;
     private readonly _onDidClick;
@@ -18,15 +17,9 @@ export declare class InlineEditsWordReplacementView extends Disposable implement
     private readonly _end;
     private readonly _line;
     private readonly _hoverableElement;
-    readonly isHovered: import("../../../../../../../base/common/observable.js").IObservable<boolean>;
-    constructor(_editor: ObservableCodeEditor, _edit: SingleTextEdit, _innerEdits: SingleTextEdit[], _host: IInlineEditsViewHost, _languageService: ILanguageService);
+    readonly isHovered: IObservable<boolean>;
+    constructor(_editor: ObservableCodeEditor, _edit: SingleTextEdit, _tabAction: IObservable<InlineEditTabAction>, _languageService: ILanguageService);
     private readonly _renderTextEffect;
-    private readonly _editLocations;
     private readonly _layout;
     private readonly _root;
 }
-export declare function rangesToBubbleRanges(ranges: Range[]): Range[];
-export interface Replacement {
-    originalRange: Range;
-    modifiedRange: Range;
-}