@codingame/monaco-vscode-api 18.4.0 → 19.0.0

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

@@ -1,6 +1,6 @@
 
 import { __decorate, __param } from '../../../../../../../../../../external/tslib/tslib.es6.js';
-import { $ } from '../../../../../../../base/browser/dom.js';
+import { $, n } from '../../../../../../../base/browser/dom.js';
 import { Emitter } from '../../../../../../../base/common/event.js';
 import { Disposable } from '../../../../../../../base/common/lifecycle.js';
 import '../../../../../../../base/common/observableInternal/index.js';
@@ -17,16 +17,14 @@ 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 '../../../../../../common/core/2d/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/ranges/lineRange.js';
-import { OffsetRange } from '../../../../../../common/core/ranges/offsetRange.js';
+import { Rect } from '../../../../../../common/core/2d/rect.js';
 import { Position } from '../../../../../../common/core/position.js';
 import { Range } from '../../../../../../common/core/range.js';
+import { LineRange } from '../../../../../../common/core/ranges/lineRange.js';
+import { OffsetRange } from '../../../../../../common/core/ranges/offsetRange.js';
 import { ILanguageService } from '../../../../../../common/languages/language.service.js';
-import { LineTokens } from '../../../../../../common/tokens/lineTokens.js';
-import { TokenArray } from '../../../../../../common/tokens/tokenArray.js';
+import { TokenArray, LineTokens } from '../../../../../../common/tokens/lineTokens.js';
 import { InlineDecoration, InlineDecorationType } from '../../../../../../common/viewModel.js';
 import { GhostText, GhostTextPart } from '../../../model/ghostText.js';
 import { GhostTextView } from '../../ghostText/ghostTextView.js';
@@ -34,11 +32,11 @@ import { modifiedBackgroundColor, getModifiedBorderColor } from '../theme.js';
 import { getPrefixTrim, mapOutFalsy } from '../utils/utils.js';
 import { derived } from '../../../../../../../base/common/observableInternal/observables/derived.js';
 import { observableValue } from '../../../../../../../base/common/observableInternal/observables/observableValue.js';
-import { n } from '../../../../../../../base/browser/domImpl/n.js';
 import { constObservable } from '../../../../../../../base/common/observableInternal/observables/constObservable.js';
 
 const BORDER_WIDTH = 1;
 const WIDGET_SEPARATOR_WIDTH = 1;
+const WIDGET_SEPARATOR_DIFF_EDITOR_WIDTH = 3;
 const BORDER_RADIUS = 4;
 let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable {
     constructor(_editor, _input, _tabAction, instantiationService, _languageService) {
@@ -63,11 +61,12 @@ 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;
+            const state = this._state.read(reader);
+            const text = state?.text;
             if (!text || text.trim() === '') {
                 return { topOffset: 0, bottomOffset: 0, linesTop: 0, linesBottom: 0 };
             }
-            const lineHeight = this._editor.getOption(EditorOption.lineHeight);
+            const lineHeight = this._editor.getLineHeightForPosition(( new Position(state.lineNumber, 1)));
             const eol = this._editor.getModel().getEOL();
             let linesTop = 0;
             let linesBottom = 0;
@@ -185,17 +184,20 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             const overlayHider = ( overlayLayoutObs.map(
                 layoutInfo => Rect.fromLeftTopRightBottom(layoutInfo.contentLeft - BORDER_RADIUS - BORDER_WIDTH, layoutInfo.overlay.top, layoutInfo.contentLeft, layoutInfo.overlay.bottom)
             )).read(reader);
+            const separatorWidth = ( this._input.map(
+                i => i?.inDiffEditor ? WIDGET_SEPARATOR_DIFF_EDITOR_WIDTH : WIDGET_SEPARATOR_WIDTH
+            )).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 underlayRect = ( overlayRect.map(rect => rect.withMargin(WIDGET_SEPARATOR_WIDTH, WIDGET_SEPARATOR_WIDTH)));
+            const underlayRect = ( overlayRect.map(rect => rect.withMargin(separatorWidth, separatorWidth)));
             return [
                 n.div({
                     class: 'originalUnderlayInsertion',
                     style: {
                         ...underlayRect.read(reader).toStyles(),
                         borderRadius: BORDER_RADIUS,
-                        border: `${BORDER_WIDTH + WIDGET_SEPARATOR_WIDTH}px solid ${asCssVariable(editorBackground)}`,
+                        border: `${BORDER_WIDTH + separatorWidth}px solid ${asCssVariable(editorBackground)}`,
                         boxSizing: 'border-box',
                     }
                 }),
@@ -236,6 +238,8 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             minReservedLineCount: constObservable(0),
             targetTextModel: ( this._editorObs.model.map(model => model ?? undefined)),
             warning: constObservable(undefined),
+            handleInlineCompletionShown: constObservable(() => {
+            }),
         }, observableValue(this, { syntaxHighlightingEnabled: true, extraClasses: ['inline-edit'] }), true, true));
         this.isHovered = this._ghostTextView.isHovered;
         this._register(this._ghostTextView.onDidClick((e) => {

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

@@ -3,20 +3,19 @@ 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/ranges/lineRange.js";
 import { Range } from "../../../../../../common/core/range.js";
+import { LineRange } from "../../../../../../common/core/ranges/lineRange.js";
 import { ILanguageService } from "../../../../../../common/languages/language.service.js";
 import { IInlineEditsView, InlineEditTabAction } from "../inlineEditsViewInterface.js";
 export declare class InlineEditsLineReplacementView extends Disposable implements IInlineEditsView {
     private readonly _editor;
     private readonly _edit;
+    private readonly _isInDiffEditor;
     private readonly _tabAction;
     private readonly _languageService;
     private readonly _themeService;
     private readonly _onDidClick;
     readonly onDidClick: import("../../../../../../../base/common/event.js").Event<IMouseEvent>;
-    private readonly _originalBubblesDecorationCollection;
-    private readonly _originalBubblesDecorationOptions;
     private readonly _maxPrefixTrim;
     private readonly _modifiedLineElements;
     private readonly _layout;
@@ -28,7 +27,7 @@ export declare class InlineEditsLineReplacementView extends Disposable implement
         modifiedRange: LineRange;
         modifiedLines: string[];
         replacements: Replacement[];
-    } | undefined>, _tabAction: IObservable<InlineEditTabAction>, _languageService: ILanguageService, _themeService: IThemeService);
+    } | undefined>, _isInDiffEditor: IObservable<boolean>, _tabAction: IObservable<InlineEditTabAction>, _languageService: ILanguageService, _themeService: IThemeService);
     private _isMouseOverWidget;
     private _previousViewZoneInfo;
     private removePreviousViewZone;

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

@@ -1,6 +1,6 @@
 
 import { __decorate, __param } from '../../../../../../../../../../external/tslib/tslib.es6.js';
-import { getWindow, $ } from '../../../../../../../base/browser/dom.js';
+import { n, getWindow, $ } from '../../../../../../../base/browser/dom.js';
 import { StandardMouseEvent } from '../../../../../../../base/browser/mouseEvent.js';
 import { Emitter } from '../../../../../../../base/common/event.js';
 import { Disposable, toDisposable } from '../../../../../../../base/common/lifecycle.js';
@@ -18,40 +18,32 @@ 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 '../../../../../../common/core/2d/point.js';
-import { Rect } from '../../../../../../common/core/2d/rect.js';
 import { renderLines, LineSource, RenderOptions } from '../../../../../../browser/widget/diffEditor/components/diffEditorViewZones/renderLines.js';
 import { EditorOption } from '../../../../../../common/config/editorOptions.js';
-import { OffsetRange } from '../../../../../../common/core/ranges/offsetRange.js';
+import { Point } from '../../../../../../common/core/2d/point.js';
+import { Rect } from '../../../../../../common/core/2d/rect.js';
 import { Range } from '../../../../../../common/core/range.js';
+import { OffsetRange } from '../../../../../../common/core/ranges/offsetRange.js';
 import { ILanguageService } from '../../../../../../common/languages/language.service.js';
-import { TrackedRangeStickiness } from '../../../../../../common/model.js';
-import { LineTokens } from '../../../../../../common/tokens/lineTokens.js';
-import { TokenArray } from '../../../../../../common/tokens/tokenArray.js';
+import { TokenArray, LineTokens } from '../../../../../../common/tokens/lineTokens.js';
 import { InlineDecoration, InlineDecorationType } from '../../../../../../common/viewModel.js';
 import { getModifiedBorderColor, getOriginalBorderColor, originalBackgroundColor, getEditorBlendedColor, modifiedChangedLineBackgroundColor } from '../theme.js';
 import { getPrefixTrim, mapOutFalsy, rectToProps, getEditorValidOverlayRect } from '../utils/utils.js';
-import { autorunDelta, autorun } from '../../../../../../../base/common/observableInternal/reactions/autorun.js';
+import { autorunDelta } from '../../../../../../../base/common/observableInternal/reactions/autorun.js';
 import { derived } from '../../../../../../../base/common/observableInternal/observables/derived.js';
-import { n } from '../../../../../../../base/browser/domImpl/n.js';
 import { constObservable } from '../../../../../../../base/common/observableInternal/observables/constObservable.js';
 
 let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extends Disposable {
-    constructor(_editor, _edit, _tabAction, _languageService, _themeService) {
+    constructor(_editor, _edit, _isInDiffEditor, _tabAction, _languageService, _themeService) {
         super();
         this._editor = _editor;
         this._edit = _edit;
+        this._isInDiffEditor = _isInDiffEditor;
         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();
-        this._originalBubblesDecorationOptions = {
-            description: 'inlineCompletions-original-bubble',
-            className: 'inlineCompletions-original-bubble',
-            stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges
-        };
         this._maxPrefixTrim = ( this._edit.map(
             e => e ? getPrefixTrim(e.replacements.flatMap(r => [r.originalRange, r.modifiedRange]), e.originalRange, e.modifiedLines, this._editor.editor) : undefined
         ));
@@ -88,8 +80,6 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
                 for (const modified of modifiedBubbles.filter(b => b.startLineNumber === lineNumber)) {
                     const validatedEndColumn = Math.min(modified.endColumn, modLine.length + 1);
                     decorations.push(( new InlineDecoration(( new Range(1, modified.startColumn, 1, validatedEndColumn)), 'inlineCompletions-modified-bubble', InlineDecorationType.Regular)));
-                    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).withScrollBeyondLastColumn(0), decorations, line, true);
                 this._editor.getOption(EditorOption.fontInfo).read(reader);
@@ -107,7 +97,14 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
             }
             const { prefixLeftOffset } = maxPrefixTrim;
             const { requiredWidth } = modifiedLines;
-            const lineHeight = this._editor.getOption(EditorOption.lineHeight).read(reader);
+            const originalLineHeights = this._editor.observeLineHeightsForLineRange(edit.originalRange).read(reader);
+            const modifiedLineHeights = (() => {
+                const lineHeights = originalLineHeights.slice(0, edit.modifiedRange.length);
+                while (lineHeights.length < edit.modifiedRange.length) {
+                    lineHeights.push(originalLineHeights[originalLineHeights.length - 1]);
+                }
+                return lineHeights;
+            })();
             const contentLeft = this._editor.layoutInfoContentLeft.read(reader);
             const verticalScrollbarWidth = this._editor.layoutInfoVerticalScrollbarWidth.read(reader);
             const scrollLeft = this._editor.scrollLeft.read(reader);
@@ -121,7 +118,7 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
             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);
-            const modifiedLinesOverlay = Rect.fromLeftTopWidthHeight(originalLinesOverlay.left, originalLinesOverlay.bottom, originalLinesOverlay.width, edit.modifiedRange.length * lineHeight);
+            const modifiedLinesOverlay = Rect.fromLeftTopWidthHeight(originalLinesOverlay.left, originalLinesOverlay.bottom, originalLinesOverlay.width, modifiedLineHeights.reduce((sum, h) => sum + h, 0));
             const background = Rect.hull([originalLinesOverlay, modifiedLinesOverlay]);
             const lowerBackground = background.intersectVertical(( new OffsetRange(originalLinesOverlay.bottom, Number.MAX_SAFE_INTEGER)));
             const lowerText = ( new Rect(
@@ -136,6 +133,7 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
                 background,
                 lowerBackground,
                 lowerText,
+                modifiedLineHeights,
                 minContentWidthRequired: prefixLeftOffset + maxLineWidth + verticalScrollbarWidth,
             };
         });
@@ -164,10 +162,10 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
                 }
                 const layoutProps = layout.read(reader);
                 const contentLeft = this._editor.layoutInfoContentLeft.read(reader);
-                const lineHeight = this._editor.getOption(EditorOption.lineHeight).read(reader);
-                modifiedLineElements.lines.forEach(l => {
+                const separatorWidth = this._isInDiffEditor.read(reader) ? 3 : 1;
+                modifiedLineElements.lines.forEach((l, i) => {
                     l.style.width = `${layoutProps.lowerText.width}px`;
-                    l.style.height = `${lineHeight}px`;
+                    l.style.height = `${layoutProps.modifiedLineHeights[i]}px`;
                     l.style.position = 'relative';
                 });
                 const modifiedBorderColor = getModifiedBorderColor(this._tabAction).read(reader);
@@ -181,6 +179,17 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
                             pointerEvents: 'none',
                         }
                     }, [
+                        n.div({
+                            class: 'borderAroundLineReplacement',
+                            style: {
+                                position: 'absolute',
+                                ...rectToProps(reader => layout.read(reader).background.translateX(-contentLeft).withMargin(separatorWidth)),
+                                borderRadius: '4px',
+                                border: `${separatorWidth + 1}px solid ${asCssVariable(editorBackground)}`,
+                                boxSizing: 'border-box',
+                                pointerEvents: 'none',
+                            }
+                        }),
                         n.div({
                             class: 'originalOverlayLineReplacement',
                             style: {
@@ -240,7 +249,6 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
         ]).keepUpdated(this._store);
         this.isHovered = this._editor.isTargetHovered((e) => this._isMouseOverWidget(e), this._store);
         this._previousViewZoneInfo = undefined;
-        this._register(toDisposable(() => this._originalBubblesDecorationCollection.clear()));
         this._register(toDisposable(() => this._editor.editor.changeViewZones(accessor => this.removePreviousViewZone(accessor))));
         this._register(autorunDelta(this._viewZoneInfo, ({ lastValue, newValue }) => {
             if (lastValue === newValue || (lastValue?.height === newValue?.height && lastValue?.lineNumber === newValue?.lineNumber)) {
@@ -254,14 +262,6 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
                 this.addViewZone(newValue, changeAccessor);
             });
         }));
-        this._register(autorun(reader => {
-            const edit = this._edit.read(reader);
-            const originalBubbles = [];
-            if (edit) {
-                originalBubbles.push(...rangesToBubbleRanges(( edit.replacements.map(r => r.originalRange))));
-            }
-            this._originalBubblesDecorationCollection.set(( originalBubbles.map(r => ({ range: r, options: this._originalBubblesDecorationOptions }))));
-        }));
         this._register(this._editor.createOverlayWidget({
             domNode: this._div.element,
             minContentWidthInPx: derived(reader => {
@@ -303,8 +303,8 @@ let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extend
     }
 };
 InlineEditsLineReplacementView = ( __decorate([
-    ( __param(3, ILanguageService)),
-    ( __param(4, IThemeService))
+    ( __param(4, ILanguageService)),
+    ( __param(5, IThemeService))
 ], InlineEditsLineReplacementView));
 function rangesToBubbleRanges(ranges) {
     const result = [];

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

@@ -22,6 +22,7 @@ export declare class InlineEditsSideBySideView extends Disposable implements IIn
     readonly onDidClick: import("../../../../../../../base/common/event.js").Event<IMouseEvent>;
     constructor(_editor: ICodeEditor, _edit: IObservable<InlineEditWithChanges | undefined>, _previewTextModel: ITextModel, _uiState: IObservable<{
         newTextLineCount: number;
+        isInDiffEditor: boolean;
     } | undefined>, _tabAction: IObservable<InlineEditTabAction>, _instantiationService: IInstantiationService, _themeService: IThemeService);
     private readonly _display;
     private readonly previewRef;

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

@@ -1,6 +1,6 @@
 
 import { __decorate, __param } from '../../../../../../../../../../external/tslib/tslib.es6.js';
-import { getWindow, $ } from '../../../../../../../base/browser/dom.js';
+import { n, getWindow, $ } from '../../../../../../../base/browser/dom.js';
 import { StandardMouseEvent } from '../../../../../../../base/browser/mouseEvent.js';
 import { Color } from '../../../../../../../base/common/color.js';
 import { Emitter } from '../../../../../../../base/common/event.js';
@@ -22,7 +22,6 @@ import { IThemeService } from '../../../../../../../platform/theme/common/themeS
 import { observableCodeEditor } from '../../../../../../browser/observableCodeEditor.js';
 import { Rect } from '../../../../../../common/core/2d/rect.js';
 import { EmbeddedCodeEditorWidget } from '../../../../../../browser/widget/codeEditor/embeddedCodeEditorWidget.js';
-import { EditorOption } from '../../../../../../common/config/editorOptions.js';
 import { OffsetRange } from '../../../../../../common/core/ranges/offsetRange.js';
 import { Position } from '../../../../../../common/core/position.js';
 import { Range } from '../../../../../../common/core/range.js';
@@ -31,7 +30,6 @@ import { InlineCompletionContextKeys } from '../../../controller/inlineCompletio
 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/observables/derived.js';
-import { n } from '../../../../../../../base/browser/domImpl/n.js';
 import { constObservable } from '../../../../../../../base/common/observableInternal/observables/constObservable.js';
 import { derivedObservableWithCache } from '../../../../../../../base/common/observableInternal/utils/utils.js';
 import { observableFromEvent } from '../../../../../../../base/common/observableInternal/observables/observableFromEvent.js';
@@ -41,6 +39,7 @@ const HORIZONTAL_PADDING = 0;
 const VERTICAL_PADDING = 0;
 const BORDER_WIDTH = 1;
 const WIDGET_SEPARATOR_WIDTH = 1;
+const WIDGET_SEPARATOR_DIFF_EDITOR_WIDTH = 3;
 const BORDER_RADIUS = 4;
 const ORIGINAL_END_PADDING = 20;
 const MODIFIED_END_PADDING = 12;
@@ -71,6 +70,9 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
         this.onDidClick = this._onDidClick.event;
         this._display = derived(this, reader => !!this._uiState.read(reader) ? 'block' : 'none');
         this.previewRef = n.ref();
+        const separatorWidthObs = ( this._uiState.map(
+            s => s?.isInDiffEditor ? WIDGET_SEPARATOR_DIFF_EDITOR_WIDTH : WIDGET_SEPARATOR_WIDTH
+        ));
         this._editorContainer = n.div({
             class: ['editorContainer'],
             style: { position: 'absolute', overflow: 'hidden', cursor: 'pointer' },
@@ -250,7 +252,8 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
             if (!isInsertion) {
                 codeRect = codeRect.withMargin(VERTICAL_PADDING, HORIZONTAL_PADDING);
             }
-            const editHeight = this._editor.getOption(EditorOption.lineHeight) * inlineEdit.modifiedLineRange.length;
+            const previewLineHeights = this._previewEditorObs.observeLineHeightsForLineRange(inlineEdit.modifiedLineRange).read(reader);
+            const editHeight = previewLineHeights.reduce((acc, h) => acc + h, 0);
             const codeHeight = selectionBottom - selectionTop;
             const previewEditorHeight = Math.max(codeHeight, editHeight);
             const clipped = dist === 0;
@@ -319,8 +322,9 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
             if (!layoutInfoObs) {
                 return undefined;
             }
+            const separatorWidth = separatorWidthObs.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 borderStylingSeparator = `${BORDER_WIDTH + separatorWidth}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;
@@ -330,7 +334,7 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
             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)
+                overlayRect => overlayRect.withMargin(separatorWidth, 0, separatorWidth, separatorWidth).intersectHorizontal(intersectionLine)
             ));
             const transitionRect = ( overlayRect.map(
                 overlayRect => Rect.fromLeftTopWidthHeight(overlayRect.right - transitionRectSize + BORDER_WIDTH, overlayRect.bottom - BORDER_WIDTH, transitionRectSize, transitionRectSize).intersectHorizontal(intersectionLine)
@@ -403,14 +407,15 @@ let InlineEditsSideBySideView = class InlineEditsSideBySideView extends Disposab
                 return undefined;
             }
             const isModifiedLower = ( layoutInfoObs.map(layoutInfo => layoutInfo.codeRect.bottom < layoutInfo.editRect.bottom));
+            const separatorWidth = separatorWidthObs.read(reader);
             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 borderStylingSeparator = `${BORDER_WIDTH + separatorWidth}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)
+                overlayRect => overlayRect.withMargin(separatorWidth, separatorWidth, separatorWidth, 0)
             ));
             const insertionRect = derived(reader => {
                 const overlay = overlayRect.read(reader);

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

@@ -1,6 +1,6 @@
 
 import { __decorate, __param } from '../../../../../../../../../../external/tslib/tslib.es6.js';
-import { getWindow } from '../../../../../../../base/browser/dom.js';
+import { n, getWindow } from '../../../../../../../base/browser/dom.js';
 import { StandardMouseEvent } from '../../../../../../../base/browser/mouseEvent.js';
 import { Emitter } from '../../../../../../../base/common/event.js';
 import { Disposable } from '../../../../../../../base/common/lifecycle.js';
@@ -16,21 +16,19 @@ 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 { Point } from '../../../../../../common/core/2d/point.js';
-import { Rect } from '../../../../../../common/core/2d/rect.js';
 import { renderLines, LineSource, RenderOptions } from '../../../../../../browser/widget/diffEditor/components/diffEditorViewZones/renderLines.js';
 import { EditorOption } from '../../../../../../common/config/editorOptions.js';
+import { Point } from '../../../../../../common/core/2d/point.js';
+import { Rect } from '../../../../../../common/core/2d/rect.js';
 import { StringReplacement } from '../../../../../../common/core/edits/stringEdit.js';
 import { OffsetRange } from '../../../../../../common/core/ranges/offsetRange.js';
 import { ILanguageService } from '../../../../../../common/languages/language.service.js';
-import { LineTokens } from '../../../../../../common/tokens/lineTokens.js';
-import { TokenArray } from '../../../../../../common/tokens/tokenArray.js';
+import { TokenArray, LineTokens } from '../../../../../../common/tokens/lineTokens.js';
 import { getOriginalBorderColor, getModifiedBorderColor, modifiedChangedTextOverlayColor, originalChangedTextOverlayColor } from '../theme.js';
 import { mapOutFalsy, rectToProps, getEditorValidOverlayRect } from '../utils/utils.js';
 import { constObservable } from '../../../../../../../base/common/observableInternal/observables/constObservable.js';
 import { observableValue } from '../../../../../../../base/common/observableInternal/observables/observableValue.js';
 import { derived } from '../../../../../../../base/common/observableInternal/observables/derived.js';
-import { n } from '../../../../../../../base/browser/domImpl/n.js';
 
 let InlineEditsWordReplacementView = class InlineEditsWordReplacementView extends Disposable {
     static { this.MAX_LENGTH = 100; }
@@ -64,6 +62,7 @@ let InlineEditsWordReplacementView = class InlineEditsWordReplacementView extend
             const res = renderLines(( new LineSource([tokens])), RenderOptions.fromEditor(this._editor.editor).withSetWidth(false).withScrollBeyondLastColumn(0), [], this._line, true);
             this._line.style.width = `${res.minWidthInPx}px`;
         });
+        const modifiedLineHeight = this._editor.observeLineHeightForPosition(this._edit.range.getStartPosition());
         this._layout = derived(this, reader => {
             this._renderTextEffect.read(reader);
             const widgetStart = this._start.read(reader);
@@ -71,7 +70,7 @@ let InlineEditsWordReplacementView = class InlineEditsWordReplacementView extend
             if (!widgetStart || !widgetEnd || widgetStart.x > widgetEnd.x || widgetStart.y > widgetEnd.y) {
                 return undefined;
             }
-            const lineHeight = this._editor.getOption(EditorOption.lineHeight).read(reader);
+            const lineHeight = modifiedLineHeight.read(reader);
             const scrollLeft = this._editor.scrollLeft.read(reader);
             const w = this._editor.getOption(EditorOption.fontInfo).read(reader).typicalHalfwidthCharacterWidth;
             const modifiedLeftOffset = 3 * w;

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

@@ -9,7 +9,8 @@ import { IInlineEditsView } from "../inlineEditsViewInterface.js";
 export interface IOriginalEditorInlineDiffViewState {
     diff: DetailedLineRangeMapping[];
     modifiedText: AbstractText;
-    mode: "insertionInline" | "sideBySide" | "deletion";
+    mode: "insertionInline" | "sideBySide" | "deletion" | "lineReplacement";
+    isInDiffEditor: boolean;
     modifiedCodeEditor: ICodeEditor;
 }
 export declare class OriginalEditorInlineDiffView extends Disposable implements IInlineEditsView {

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

@@ -56,6 +56,7 @@ class OriginalEditorInlineDiffView extends Disposable {
                 className: 'inlineCompletions-char-delete',
                 description: 'char-delete',
                 isWholeLine: false,
+                zIndex: 1,
             });
             const diffWholeLineAddDecoration = ModelDecorationOptions.register({
                 className: 'inlineCompletions-char-insert',
@@ -71,8 +72,15 @@ class OriginalEditorInlineDiffView extends Disposable {
                 className: 'inlineCompletions-char-insert diff-range-empty',
                 description: 'char-insert diff-range-empty',
             });
+            const NESOriginalBackground = ModelDecorationOptions.register({
+                className: 'inlineCompletions-original-lines',
+                description: 'inlineCompletions-original-lines',
+                isWholeLine: false,
+                shouldFillLineOnLineBreak: true,
+            });
+            const showFullLineDecorations = diff.mode !== 'sideBySide' && diff.mode !== 'deletion' && diff.mode !== 'insertionInline' && diff.mode !== 'lineReplacement';
+            const hideEmptyInnerDecorations = diff.mode === 'lineReplacement';
             for (const m of diff.diff) {
-                const showFullLineDecorations = diff.mode !== 'sideBySide' && diff.mode !== 'deletion' && diff.mode !== 'insertionInline';
                 if (showFullLineDecorations) {
                     if (!m.original.isEmpty) {
                         originalDecorations.push({
@@ -98,7 +106,7 @@ class OriginalEditorInlineDiffView extends Disposable {
                 else {
                     const useInlineDiff = showInline && allowsTrueInlineDiffRendering(m);
                     for (const i of m.innerChanges || []) {
-                        if (m.original.contains(i.originalRange.startLineNumber)) {
+                        if (m.original.contains(i.originalRange.startLineNumber) && !(hideEmptyInnerDecorations && i.originalRange.isEmpty())) {
                             const replacedText = this._originalEditor.getModel()?.getValueInRange(i.originalRange, EndOfLinePreference.LF);
                             originalDecorations.push({
                                 range: i.originalRange,
@@ -154,6 +162,16 @@ class OriginalEditorInlineDiffView extends Disposable {
                     }
                 }
             }
+            if (diff.isInDiffEditor) {
+                for (const m of diff.diff) {
+                    if (!m.original.isEmpty) {
+                        originalDecorations.push({
+                            range: m.original.toExclusiveRange(),
+                            options: NESOriginalBackground,
+                        });
+                    }
+                }
+            }
             return { originalDecorations, modifiedDecorations };
         });
         this._register(observableCodeEditor(this._originalEditor).setDecorations(( this._decorations.map(d => d?.originalDecorations ?? []))));

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

@@ -16,14 +16,14 @@ import '../../../../../../platform/theme/common/colors/searchColors.js';
 import { InlineEditTabAction } from './inlineEditsViewInterface.js';
 import { observableFromEventOpts } from '../../../../../../base/common/observableInternal/observables/observableFromEvent.js';
 
-const originalBackgroundColor = registerColor('inlineEdit.originalBackground', ( transparent(diffRemoved, 0.2)), ( localize(1281, 'Background color for the original text in inline edits.')), true);
-const modifiedBackgroundColor = registerColor('inlineEdit.modifiedBackground', ( transparent(diffInserted, 0.3)), ( localize(1282, 'Background color for the modified text in inline edits.')), true);
+const originalBackgroundColor = registerColor('inlineEdit.originalBackground', ( transparent(diffRemoved, 0.2)), ( localize(1292, 'Background color for the original text in inline edits.')), true);
+const modifiedBackgroundColor = registerColor('inlineEdit.modifiedBackground', ( transparent(diffInserted, 0.3)), ( localize(1293, 'Background color for the modified text in inline edits.')), true);
 registerColor('inlineEdit.originalChangedLineBackground', ( transparent(diffRemoved, 0.8)), ( localize(
-    1283,
+    1294,
     'Background color for the changed lines in the original text of inline edits.'
 )), true);
 const originalChangedTextOverlayColor = registerColor('inlineEdit.originalChangedTextBackground', ( transparent(diffRemoved, 0.8)), ( localize(
-    1284,
+    1295,
     'Overlay color for the changed text in the original text of inline edits.'
 )), true);
 const modifiedChangedLineBackgroundColor = registerColor('inlineEdit.modifiedChangedLineBackground', {
@@ -32,52 +32,52 @@ const modifiedChangedLineBackgroundColor = registerColor('inlineEdit.modifiedCha
     hcDark: diffInsertedLine,
     hcLight: diffInsertedLine
 }, ( localize(
-    1285,
+    1296,
     'Background color for the changed lines in the modified text of inline edits.'
 )), true);
 const modifiedChangedTextOverlayColor = registerColor('inlineEdit.modifiedChangedTextBackground', ( transparent(diffInserted, 0.7)), ( localize(
-    1286,
+    1297,
     'Overlay color for the changed text in the modified text of inline edits.'
 )), true);
-const inlineEditIndicatorPrimaryForeground = registerColor('inlineEdit.gutterIndicator.primaryForeground', buttonForeground, ( localize(1287, 'Foreground color for the primary inline edit gutter indicator.')));
-const inlineEditIndicatorPrimaryBorder = registerColor('inlineEdit.gutterIndicator.primaryBorder', buttonBackground, ( localize(1288, 'Border color for the primary inline edit gutter indicator.')));
+const inlineEditIndicatorPrimaryForeground = registerColor('inlineEdit.gutterIndicator.primaryForeground', buttonForeground, ( localize(1298, 'Foreground color for the primary inline edit gutter indicator.')));
+const inlineEditIndicatorPrimaryBorder = registerColor('inlineEdit.gutterIndicator.primaryBorder', buttonBackground, ( localize(1299, 'Border color for the primary inline edit gutter indicator.')));
 const inlineEditIndicatorPrimaryBackground = registerColor('inlineEdit.gutterIndicator.primaryBackground', {
     light: ( transparent(inlineEditIndicatorPrimaryBorder, 0.5)),
     dark: ( transparent(inlineEditIndicatorPrimaryBorder, 0.4)),
     hcDark: ( transparent(inlineEditIndicatorPrimaryBorder, 0.4)),
     hcLight: ( transparent(inlineEditIndicatorPrimaryBorder, 0.5)),
-}, ( localize(1289, 'Background color for the primary inline edit gutter indicator.')));
-const inlineEditIndicatorSecondaryForeground = registerColor('inlineEdit.gutterIndicator.secondaryForeground', buttonSecondaryForeground, ( localize(1290, 'Foreground color for the secondary inline edit gutter indicator.')));
-const inlineEditIndicatorSecondaryBorder = registerColor('inlineEdit.gutterIndicator.secondaryBorder', buttonSecondaryBackground, ( localize(1291, 'Border color for the secondary inline edit gutter indicator.')));
-const inlineEditIndicatorSecondaryBackground = registerColor('inlineEdit.gutterIndicator.secondaryBackground', inlineEditIndicatorSecondaryBorder, ( localize(1292, 'Background color for the secondary inline edit gutter indicator.')));
-const inlineEditIndicatorsuccessfulForeground = registerColor('inlineEdit.gutterIndicator.successfulForeground', buttonForeground, ( localize(1293, 'Foreground color for the successful inline edit gutter indicator.')));
-const inlineEditIndicatorsuccessfulBorder = registerColor('inlineEdit.gutterIndicator.successfulBorder', buttonBackground, ( localize(1294, 'Border color for the successful inline edit gutter indicator.')));
-const inlineEditIndicatorsuccessfulBackground = registerColor('inlineEdit.gutterIndicator.successfulBackground', inlineEditIndicatorsuccessfulBorder, ( localize(1295, 'Background color for the successful inline edit gutter indicator.')));
+}, ( localize(1300, 'Background color for the primary inline edit gutter indicator.')));
+const inlineEditIndicatorSecondaryForeground = registerColor('inlineEdit.gutterIndicator.secondaryForeground', buttonSecondaryForeground, ( localize(1301, 'Foreground color for the secondary inline edit gutter indicator.')));
+const inlineEditIndicatorSecondaryBorder = registerColor('inlineEdit.gutterIndicator.secondaryBorder', buttonSecondaryBackground, ( localize(1302, 'Border color for the secondary inline edit gutter indicator.')));
+const inlineEditIndicatorSecondaryBackground = registerColor('inlineEdit.gutterIndicator.secondaryBackground', inlineEditIndicatorSecondaryBorder, ( localize(1303, 'Background color for the secondary inline edit gutter indicator.')));
+const inlineEditIndicatorsuccessfulForeground = registerColor('inlineEdit.gutterIndicator.successfulForeground', buttonForeground, ( localize(1304, 'Foreground color for the successful inline edit gutter indicator.')));
+const inlineEditIndicatorsuccessfulBorder = registerColor('inlineEdit.gutterIndicator.successfulBorder', buttonBackground, ( localize(1305, 'Border color for the successful inline edit gutter indicator.')));
+const inlineEditIndicatorsuccessfulBackground = registerColor('inlineEdit.gutterIndicator.successfulBackground', inlineEditIndicatorsuccessfulBorder, ( localize(1306, 'Background color for the successful inline edit gutter indicator.')));
 const inlineEditIndicatorBackground = registerColor('inlineEdit.gutterIndicator.background', {
     hcDark: ( transparent('tab.inactiveBackground', 0.5)),
     hcLight: ( transparent('tab.inactiveBackground', 0.5)),
     dark: ( transparent('tab.inactiveBackground', 0.5)),
     light: '#5f5f5f18',
-}, ( localize(1296, 'Background color for the inline edit gutter indicator.')));
+}, ( localize(1307, 'Background color for the inline edit gutter indicator.')));
 const originalBorder = registerColor('inlineEdit.originalBorder', {
     light: diffRemoved,
     dark: diffRemoved,
     hcDark: diffRemoved,
     hcLight: diffRemoved
-}, ( localize(1297, 'Border color for the original text in inline edits.')));
+}, ( localize(1308, 'Border color for the original text in inline edits.')));
 const modifiedBorder = registerColor('inlineEdit.modifiedBorder', {
     light: ( darken(diffInserted, 0.6)),
     dark: diffInserted,
     hcDark: diffInserted,
     hcLight: diffInserted
-}, ( localize(1298, 'Border color for the modified text in inline edits.')));
+}, ( localize(1309, 'Border color for the modified text in inline edits.')));
 const tabWillAcceptModifiedBorder = registerColor('inlineEdit.tabWillAcceptModifiedBorder', {
     light: ( darken(modifiedBorder, 0)),
     dark: ( darken(modifiedBorder, 0)),
     hcDark: ( darken(modifiedBorder, 0)),
     hcLight: ( darken(modifiedBorder, 0))
 }, ( localize(
-    1299,
+    1310,
     'Modified border color for the inline edits widget when tab will accept it.'
 )));
 const tabWillAcceptOriginalBorder = registerColor('inlineEdit.tabWillAcceptOriginalBorder', {
@@ -86,7 +86,7 @@ const tabWillAcceptOriginalBorder = registerColor('inlineEdit.tabWillAcceptOrigi
     hcDark: ( darken(originalBorder, 0)),
     hcLight: ( darken(originalBorder, 0))
 }, ( localize(
-    1300,
+    1311,
     'Original border color for the inline edits widget over the original text when tab will accept it.'
 )));
 function getModifiedBorderColor(tabAction) {