@codingame/monaco-vscode-api 16.1.0 → 17.0.0

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

@@ -2,17 +2,13 @@
 import { __decorate, __param } from '../../../../../../../../../../external/tslib/tslib.es6.js';
 import { trackFocus } from '../../../../../../../base/browser/dom.js';
 import { renderIcon } from '../../../../../../../base/browser/ui/iconLabel/iconLabels.js';
-import { timeout } from '../../../../../../../base/common/async.js';
 import { Codicon } from '../../../../../../../base/common/codicons.js';
 import { BugIndicatingError } from '../../../../../../../base/common/errors.js';
-import { Disposable, MutableDisposable, DisposableStore, toDisposable } from '../../../../../../../base/common/lifecycle.js';
+import { Disposable, DisposableStore, toDisposable } from '../../../../../../../base/common/lifecycle.js';
 import '../../../../../../../base/common/observableInternal/index.js';
-import { observableFromEvent, constObservable, debouncedObservable, runOnChange } from '../../../../../../../base/common/observableInternal/utils.js';
 import { IAccessibilityService } from '../../../../../../../platform/accessibility/common/accessibility.service.js';
 import { IHoverService } from '../../../../../../../platform/hover/browser/hover.service.js';
 import { IInstantiationService } from '../../../../../../../platform/instantiation/common/instantiation.js';
-import { StorageScope, StorageTarget } from '../../../../../../../platform/storage/common/storage.js';
-import { IStorageService } from '../../../../../../../platform/storage/common/storage.service.js';
 import { asCssVariable } from '../../../../../../../platform/theme/common/colorUtils.js';
 import { IThemeService } from '../../../../../../../platform/theme/common/themeService.service.js';
 import { Point } from '../../../../../../browser/point.js';
@@ -24,17 +20,12 @@ import { InlineEditTabAction } from '../inlineEditsViewInterface.js';
 import { inlineEditIndicatorBackground, getEditorBlendedColor, inlineEditIndicatorsuccessfulBorder, inlineEditIndicatorsuccessfulForeground, inlineEditIndicatorsuccessfulBackground, inlineEditIndicatorPrimaryBorder, inlineEditIndicatorPrimaryForeground, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorSecondaryBorder, inlineEditIndicatorSecondaryForeground, inlineEditIndicatorSecondaryBackground } from '../theme.js';
 import { mapOutFalsy, rectToProps } from '../utils/utils.js';
 import { GutterIndicatorMenuContent } from './gutterIndicatorMenu.js';
+import { observableFromEvent, constObservable, debouncedObservable, runOnChange } from '../../../../../../../base/common/observableInternal/utils.js';
 import { derived } from '../../../../../../../base/common/observableInternal/derived.js';
 import { n } from '../../../../../../../base/browser/domImpl/n.js';
 import { observableValue } from '../../../../../../../base/common/observableInternal/base.js';
-import { autorun, autorunWithStore } from '../../../../../../../base/common/observableInternal/autorun.js';
+import { autorun } from '../../../../../../../base/common/observableInternal/autorun.js';
 
-var UserKind;
-(function (UserKind) {
-    UserKind["FirstTime"] = "firstTime";
-    UserKind["SecondTime"] = "secondTime";
-    UserKind["Active"] = "active";
-})(UserKind || (UserKind = {}));
 let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Disposable {
     get model() {
         const model = this._model.get();
@@ -43,51 +34,17 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
         }
         return model;
     }
-    get _newUserType() {
-        return this._storageService.get('inlineEditsGutterIndicatorUserKind', StorageScope.APPLICATION, UserKind.FirstTime);
-    }
-    set _newUserType(value) {
-        switch (value) {
-            case UserKind.FirstTime:
-                throw ( new BugIndicatingError('UserKind should not be set to first time'));
-            case UserKind.SecondTime:
-                this._firstToSecondTimeUserDisposable.clear();
-                break;
-            case UserKind.Active:
-                this._newUserAnimationDisposable.clear();
-                this._firstToSecondTimeUserDisposable.clear();
-                this._secondTimeToActiveUserDisposable.clear();
-                break;
-        }
-        this._storageService.store('inlineEditsGutterIndicatorUserKind', value, StorageScope.APPLICATION, StorageTarget.USER);
-    }
-    constructor(_editorObs, _originalRange, _verticalOffset, _host, _model, _isHoveringOverInlineEdit, _focusIsInMenu, _hoverService, _instantiationService, _storageService, _accessibilityService, themeService) {
+    constructor(_editorObs, _originalRange, _verticalOffset, _model, _isHoveringOverInlineEdit, _focusIsInMenu, _hoverService, _instantiationService, _accessibilityService, themeService) {
         super();
         this._editorObs = _editorObs;
         this._originalRange = _originalRange;
         this._verticalOffset = _verticalOffset;
-        this._host = _host;
         this._model = _model;
         this._isHoveringOverInlineEdit = _isHoveringOverInlineEdit;
         this._focusIsInMenu = _focusIsInMenu;
         this._hoverService = _hoverService;
         this._instantiationService = _instantiationService;
-        this._storageService = _storageService;
         this._accessibilityService = _accessibilityService;
-        this._activeCompletionId = derived(reader => {
-            const layout = this._layout.read(reader);
-            if (!layout) {
-                return undefined;
-            }
-            const model = this._model.read(reader);
-            if (!model) {
-                return undefined;
-            }
-            return model.inlineEdit.inlineCompletion.id;
-        });
-        this._newUserAnimationDisposable = this._register(( new MutableDisposable()));
-        this._firstToSecondTimeUserDisposable = this._register(( new MutableDisposable()));
-        this._secondTimeToActiveUserDisposable = this._register(( new MutableDisposable()));
         this._originalRangeObs = mapOutFalsy(this._originalRange);
         this._state = derived(reader => {
             const range = this._originalRangeObs.read(reader);
@@ -138,6 +95,43 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
             }
             return ( lineNumber.toString());
         });
+        this._availableWidthForIcon = derived(this, reader => {
+            const textModel = this._editorObs.editor.getModel();
+            const editor = this._editorObs.editor;
+            const layout = this._editorObs.layoutInfo.read(reader);
+            const gutterWidth = layout.decorationsLeft + layout.decorationsWidth - layout.glyphMarginLeft;
+            if (!textModel || gutterWidth <= 0) {
+                return () => 0;
+            }
+            if (layout.lineNumbersLeft === 0) {
+                return () => gutterWidth;
+            }
+            const lineNumberOptions = this._editorObs.getOption(EditorOption.lineNumbers).read(reader);
+            if (lineNumberOptions.renderType === RenderLineNumbersType.Relative ||
+                lineNumberOptions.renderType === RenderLineNumbersType.Off) {
+                return () => gutterWidth;
+            }
+            const w = editor.getOption(EditorOption.fontInfo).typicalHalfwidthCharacterWidth;
+            const rightOfLineNumber = layout.lineNumbersLeft + layout.lineNumbersWidth;
+            const totalLines = textModel.getLineCount();
+            const totalLinesDigits = ( ((totalLines + 1) ).toString()).length;
+            const offsetDigits = [];
+            for (let digits = 1; digits <= totalLinesDigits; digits++) {
+                const firstLineNumberWithDigitCount = 10 ** (digits - 1);
+                const topOfLineNumber = editor.getTopForLineNumber(firstLineNumberWithDigitCount);
+                const digitsWidth = digits * w;
+                const usableWidthLeftOfLineNumber = Math.min(gutterWidth, Math.max(0, rightOfLineNumber - digitsWidth - layout.glyphMarginLeft));
+                offsetDigits.push({ firstLineNumberWithDigitCount, topOfLineNumber, usableWidthLeftOfLineNumber });
+            }
+            return (topOffset) => {
+                for (let i = offsetDigits.length - 1; i >= 0; i--) {
+                    if (topOffset >= offsetDigits[i].topOfLineNumber) {
+                        return offsetDigits[i].usableWidthLeftOfLineNumber;
+                    }
+                }
+                throw ( new BugIndicatingError('Could not find avilable width for icon'));
+            };
+        });
         this._layout = derived(this, reader => {
             const s = this._state.read(reader);
             if (!s) {
@@ -145,72 +139,87 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
             }
             const layout = this._editorObs.layoutInfo.read(reader);
             const lineHeight = this._editorObs.getOption(EditorOption.lineHeight).read(reader);
-            const bottomPadding = 1;
-            const leftPadding = 1;
-            const rightPadding = 1;
-            const fullViewPort = Rect.fromLeftTopRightBottom(0, 0, layout.width, layout.height - bottomPadding);
-            const viewPortWithStickyScroll = fullViewPort.withTop(this._stickyScrollHeight.read(reader));
-            const targetVertRange = s.lineOffsetRange.read(reader);
-            const targetRect = Rect.fromRanges(OffsetRange.fromTo(leftPadding + layout.glyphMarginLeft, layout.decorationsLeft + layout.decorationsWidth - rightPadding), targetVertRange);
+            const gutterViewPortPadding = 1;
+            const gutterWidthWithoutPadding = layout.decorationsLeft + layout.decorationsWidth - layout.glyphMarginLeft - 2 * gutterViewPortPadding;
+            const gutterHeightWithoutPadding = layout.height - 2 * gutterViewPortPadding;
+            const gutterViewPortWithStickyScroll = Rect.fromLeftTopWidthHeight(gutterViewPortPadding, gutterViewPortPadding, gutterWidthWithoutPadding, gutterHeightWithoutPadding);
+            const gutterViewPortWithoutStickyScroll = gutterViewPortWithStickyScroll.withTop(this._stickyScrollHeight.read(reader) + gutterViewPortPadding);
+            const verticalEditRange = s.lineOffsetRange.read(reader);
+            const gutterEditArea = Rect.fromRanges(OffsetRange.fromTo(gutterViewPortWithoutStickyScroll.left, gutterViewPortWithoutStickyScroll.right), verticalEditRange);
+            const pillHeight = lineHeight;
             const pillOffset = this._verticalOffset.read(reader);
-            let pillRect = targetRect.withHeight(lineHeight).withWidth(22).translateY(pillOffset);
-            const pillRectMoved = pillRect.moveToBeContainedIn(viewPortWithStickyScroll);
-            const rect = targetRect;
-            pillRect = (targetRect.containsRect(pillRectMoved))
-                ? pillRectMoved
-                : pillRectMoved.moveToBeContainedIn(fullViewPort.intersect(targetRect.union(fullViewPort.withHeight(lineHeight))));
-            const docked = rect.containsRect(pillRect) && viewPortWithStickyScroll.containsRect(pillRect);
-            let iconDirecion = targetRect.containsRect(pillRect) ?
-                'right'
-                : pillRect.top > targetRect.top ?
-                    'top' :
-                    'bottom';
-            let lineNumberRect = pillRect.withWidth(0);
-            let iconRect = pillRect;
-            if (docked && pillRect.top === targetRect.top + pillOffset) {
-                pillRect = pillRect.withWidth(layout.decorationsLeft + layout.decorationsWidth - layout.glyphMarginLeft - leftPadding - rightPadding);
-                lineNumberRect = pillRect.intersectHorizontal(( new OffsetRange(
-                    0,
-                    Math.max(layout.lineNumbersLeft + layout.lineNumbersWidth - leftPadding - 1, 0)
-                )));
-                iconRect = iconRect.translateX(lineNumberRect.width);
-            }
-            let icon;
-            if (docked && (this._isHoveredOverIconDebounced.read(reader) || this._isHoveredOverInlineEditDebounced.read(reader))) {
-                icon = renderIcon(Codicon.check);
-                iconDirecion = 'right';
-            }
-            else {
-                icon = this._tabAction.read(reader) === InlineEditTabAction.Accept ? renderIcon(Codicon.keyboardTab) : renderIcon(Codicon.arrowRight);
+            const pillFullyDockedRect = gutterEditArea.withHeight(pillHeight).translateY(pillOffset);
+            const pillIsFullyDocked = gutterViewPortWithoutStickyScroll.containsRect(pillFullyDockedRect);
+            const iconNoneDocked = ( this._tabAction.map(
+                action => action === InlineEditTabAction.Accept ? Codicon.keyboardTab : Codicon.arrowRight
+            ));
+            const iconDocked = derived(reader => {
+                if (this._isHoveredOverIconDebounced.read(reader) || this._isHoveredOverInlineEditDebounced.read(reader)) {
+                    return Codicon.check;
+                }
+                if (this._tabAction.read(reader) === InlineEditTabAction.Accept) {
+                    return Codicon.keyboardTab;
+                }
+                const cursorLineNumber = this._editorObs.cursorLineNumber.read(reader) ?? 0;
+                const editStartLineNumber = s.range.read(reader).startLineNumber;
+                return cursorLineNumber <= editStartLineNumber ? Codicon.keyboardTabAbove : Codicon.keyboardTabBelow;
+            });
+            const idealIconWidth = 22;
+            const minimalIconWidth = 16;
+            const iconWidth = (pillRect) => {
+                const availableWidth = this._availableWidthForIcon.get()(pillRect.bottom + this._editorObs.editor.getScrollTop()) - gutterViewPortPadding;
+                return Math.max(Math.min(availableWidth, idealIconWidth), minimalIconWidth);
+            };
+            if (pillIsFullyDocked) {
+                const pillRect = pillFullyDockedRect;
+                const lineNumberWidth = Math.max(layout.lineNumbersLeft + layout.lineNumbersWidth - gutterViewPortWithStickyScroll.left, 0);
+                const lineNumberRect = pillRect.withWidth(lineNumberWidth);
+                const iconWidth = Math.max(Math.min(layout.decorationsWidth, idealIconWidth), minimalIconWidth);
+                const iconRect = pillRect.withWidth(iconWidth).translateX(lineNumberWidth);
+                return {
+                    gutterEditArea,
+                    icon: iconDocked,
+                    iconDirection: 'right',
+                    iconRect,
+                    pillRect,
+                    lineNumberRect,
+                };
             }
-            let rotation = 0;
-            switch (iconDirecion) {
-                case 'right':
-                    rotation = 0;
-                    break;
-                case 'bottom':
-                    rotation = 90;
-                    break;
-                case 'top':
-                    rotation = -90;
-                    break;
+            const pillPartiallyDockedPossibleArea = gutterViewPortWithStickyScroll.intersect(gutterEditArea);
+            const pillIsPartiallyDocked = pillPartiallyDockedPossibleArea && pillPartiallyDockedPossibleArea.height >= pillHeight;
+            if (pillIsPartiallyDocked) {
+                const pillRectMoved = pillFullyDockedRect.moveToBeContainedIn(gutterViewPortWithoutStickyScroll).moveToBeContainedIn(pillPartiallyDockedPossibleArea);
+                const pillRect = pillRectMoved.withWidth(iconWidth(pillRectMoved));
+                const iconRect = pillRect;
+                return {
+                    gutterEditArea,
+                    icon: iconDocked,
+                    iconDirection: 'right',
+                    iconRect,
+                    pillRect,
+                };
             }
+            const pillRectMoved = pillFullyDockedRect.moveToBeContainedIn(gutterViewPortWithStickyScroll);
+            const pillRect = pillRectMoved.withWidth(iconWidth(pillRectMoved));
+            const iconRect = pillRect;
+            const iconDirection = pillRect.top < pillFullyDockedRect.top ?
+                'top' :
+                'bottom';
             return {
-                rect,
-                icon,
-                rotation,
-                docked,
+                gutterEditArea,
+                icon: iconNoneDocked,
+                iconDirection,
                 iconRect,
                 pillRect,
-                lineHeight,
-                lineNumberRect,
             };
         });
         this._iconRef = n.ref();
+        this.isVisible = ( this._layout.map(l => !!l));
         this._hoverVisible = observableValue(this, false);
         this.isHoverVisible = this._hoverVisible;
         this._isHoveredOverIcon = observableValue(this, false);
         this._isHoveredOverIconDebounced = debouncedObservable(this._isHoveredOverIcon, 100);
+        this.isHoveredOverIcon = this._isHoveredOverIconDebounced;
         this._tabAction = derived(this, reader => {
             const model = this._model.read(reader);
             if (!model) {
@@ -221,9 +230,10 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
         this._indicator = n.div({
             class: 'inline-edits-view-gutter-indicator',
             onclick: () => {
-                const docked = ( this._layout.map(l => l && l.docked)).get();
+                const layout = this._layout.get();
+                const acceptOnClick = layout?.icon.get() === Codicon.check;
                 this._editorObs.editor.focus();
-                if (docked) {
+                if (acceptOnClick) {
                     this.model.accept();
                 }
                 else {
@@ -241,7 +251,7 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
                     position: 'absolute',
                     background: asCssVariable(inlineEditIndicatorBackground),
                     borderRadius: '4px',
-                    ...rectToProps(reader => layout.read(reader).rect),
+                    ...rectToProps(reader => layout.read(reader).gutterEditArea),
                 }
             }),
             n.div({
@@ -252,7 +262,7 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
                 },
                 style: {
                     cursor: 'pointer',
-                    zIndex: '1000',
+                    zIndex: '20',
                     position: 'absolute',
                     backgroundColor: ( this._gutterIndicatorStyles.map(v => v.background)),
                     ['--vscodeIconForeground']: ( this._gutterIndicatorStyles.map(v => v.foreground)),
@@ -260,7 +270,7 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
                     boxSizing: 'border-box',
                     borderRadius: '4px',
                     display: 'flex',
-                    justifyContent: 'center',
+                    justifyContent: 'flex-end',
                     transition: 'background-color 0.2s ease-in-out, width 0.2s ease-in-out',
                     ...rectToProps(reader => layout.read(reader).pillRect),
                 }
@@ -268,27 +278,28 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
                 n.div({
                     className: 'line-number',
                     style: {
-                        lineHeight: ( layout.map(l => `${l.lineHeight}px`)),
-                        display: ( layout.map(l => l.lineNumberRect.width > 0 ? 'flex' : 'none')),
+                        lineHeight: ( layout.map(l => l.lineNumberRect ? l.lineNumberRect.height : 0)),
+                        display: ( layout.map(l => l.lineNumberRect ? 'flex' : 'none')),
                         alignItems: 'center',
                         justifyContent: 'flex-end',
-                        width: ( layout.map(l => l.lineNumberRect.width)),
+                        width: ( layout.map(l => l.lineNumberRect ? l.lineNumberRect.width : 0)),
                         height: '100%',
                         color: ( this._gutterIndicatorStyles.map(v => v.foreground)),
                     }
                 }, this._lineNumberToRender),
                 n.div({
                     style: {
-                        rotate: ( layout.map(i => `${i.rotation}deg`)),
+                        rotate: ( layout.map(l => `${getRotationFromDirection(l.iconDirection)}deg`)),
                         transition: 'rotate 0.2s ease-in-out',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
                         height: '100%',
-                        width: ( layout.map(l => `${l.iconRect.width}px`)),
+                        marginRight: ( layout.map(l => l.pillRect.width - l.iconRect.width - (l.lineNumberRect?.width ?? 0))),
+                        width: ( layout.map(l => l.iconRect.width)),
                     }
                 }, [
-                    ( layout.map(i => i.icon)),
+                    ( layout.map((l, reader) => renderIcon(l.icon.read(reader)))),
                 ])
             ]),
         ]))).keepUpdated(this._store);
@@ -318,6 +329,10 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
             minContentWidthInPx: constObservable(0),
         }));
         this._register(this._editorObs.editor.onMouseMove((e) => {
+            const state = this._state.get();
+            if (state === undefined) {
+                return;
+            }
             const el = this._iconRef.element;
             const rect = el.getBoundingClientRect();
             const rectangularArea = Rect.fromLeftTopWidthHeight(rect.left, rect.top, rect.width, rect.height);
@@ -330,87 +345,17 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
         this._isHoveredOverInlineEditDebounced = debouncedObservable(this._isHoveringOverInlineEdit, 100);
         this._register(runOnChange(this._isHoveredOverInlineEditDebounced, (isHovering) => {
             if (isHovering) {
-                this._triggerAnimation();
+                this.triggerAnimation();
             }
         }));
-        if (this._newUserType === UserKind.Active) {
-            this._register(this.setupNewUserExperience());
-        }
         this._register(autorun(reader => {
             this._indicator.readEffect(reader);
             if (this._indicator.element) {
                 this._editorObs.editor.applyFontInfo(this._indicator.element);
             }
         }));
-        this._register(autorunWithStore((reader, store) => {
-            const host = this._host.read(reader);
-            if (!host) {
-                return;
-            }
-            store.add(host.onDidAccept(() => {
-                this._storageService.store('inlineEditsGutterIndicatorUserKind', UserKind.Active, StorageScope.APPLICATION, StorageTarget.USER);
-            }));
-        }));
     }
-    setupNewUserExperience() {
-        if (this._newUserType === UserKind.Active) {
-            return Disposable.None;
-        }
-        const disposableStore = ( new DisposableStore());
-        let userHasHoveredOverIcon = false;
-        let inlineEditHasBeenAccepted = false;
-        let firstTimeUserAnimationCount = 0;
-        let secondTimeUserAnimationCount = 0;
-        disposableStore.add(runOnChange(this._activeCompletionId, async (id) => {
-            if (id === undefined) {
-                return;
-            }
-            const userType = this._newUserType;
-            switch (userType) {
-                case UserKind.FirstTime: {
-                    for (let i = 0; i < 3 && this._activeCompletionId.get() === id; i++) {
-                        await this._triggerAnimation();
-                        await timeout(500);
-                    }
-                    break;
-                }
-                case UserKind.SecondTime: {
-                    this._triggerAnimation();
-                    break;
-                }
-            }
-            switch (userType) {
-                case UserKind.FirstTime: {
-                    if (++firstTimeUserAnimationCount >= 5 || userHasHoveredOverIcon) {
-                        this._newUserType = UserKind.SecondTime;
-                    }
-                    break;
-                }
-                case UserKind.SecondTime: {
-                    if (++secondTimeUserAnimationCount >= 5 && inlineEditHasBeenAccepted) {
-                        this._newUserType = UserKind.Active;
-                    }
-                    break;
-                }
-            }
-        }));
-        disposableStore.add(runOnChange(this._isHoveredOverIconDebounced, async (isHovered) => {
-            if (isHovered) {
-                userHasHoveredOverIcon = true;
-            }
-        }));
-        disposableStore.add(autorunWithStore((reader, store) => {
-            const host = this._host.read(reader);
-            if (!host) {
-                return;
-            }
-            store.add(host.onDidAccept(() => {
-                inlineEditHasBeenAccepted = true;
-            }));
-        }));
-        return disposableStore;
-    }
-    _triggerAnimation() {
+    triggerAnimation() {
         if (this._accessibilityService.isMotionReduced()) {
             return ( new Animation(null, null)).finished;
         }
@@ -461,11 +406,17 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
     }
 };
 InlineEditsGutterIndicator = ( __decorate([
-    ( __param(7, IHoverService)),
-    ( __param(8, IInstantiationService)),
-    ( __param(9, IStorageService)),
-    ( __param(10, IAccessibilityService)),
-    ( __param(11, IThemeService))
+    ( __param(6, IHoverService)),
+    ( __param(7, IInstantiationService)),
+    ( __param(8, IAccessibilityService)),
+    ( __param(9, IThemeService))
 ], InlineEditsGutterIndicator));
+function getRotationFromDirection(direction) {
+    switch (direction) {
+        case 'top': return 90;
+        case 'bottom': return -90;
+        case 'right': return 0;
+    }
+}
 
 export { InlineEditsGutterIndicator };

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

@@ -1,17 +1,19 @@
 import { SingleLineEdit } from "../../../../../common/core/lineEdit.js";
+import { LineRange } from "../../../../../common/core/lineRange.js";
 import { Position } from "../../../../../common/core/position.js";
 import { AbstractText, TextEdit } from "../../../../../common/core/textEdit.js";
 import { Command } from "../../../../../common/languages.js";
-import { InlineCompletionItem } from "../../model/provideInlineCompletions.js";
+import { InlineSuggestionItem } from "../../model/inlineSuggestionItem.js";
 export declare class InlineEditWithChanges {
     readonly originalText: AbstractText;
     readonly edit: TextEdit;
     readonly cursorPosition: Position;
     readonly commands: readonly Command[];
-    readonly inlineCompletion: InlineCompletionItem;
-    readonly lineEdit: SingleLineEdit;
-    readonly originalLineRange: import("../../../../../common/core/lineRange.js").LineRange;
-    readonly modifiedLineRange: import("../../../../../common/core/lineRange.js").LineRange;
-    constructor(originalText: AbstractText, edit: TextEdit, cursorPosition: Position, commands: readonly Command[], inlineCompletion: InlineCompletionItem);
+    readonly inlineCompletion: InlineSuggestionItem;
+    get lineEdit(): SingleLineEdit;
+    get originalLineRange(): LineRange;
+    get modifiedLineRange(): LineRange;
+    get displayRange(): LineRange;
+    constructor(originalText: AbstractText, edit: TextEdit, cursorPosition: Position, commands: readonly Command[], inlineCompletion: InlineSuggestionItem);
     equals(other: InlineEditWithChanges): boolean;
 }

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

@@ -1,16 +1,22 @@
 
 import { SingleLineEdit } from '../../../../../common/core/lineEdit.js';
+import { LineRange } from '../../../../../common/core/lineRange.js';
 
 class InlineEditWithChanges {
+    get lineEdit() {
+        return SingleLineEdit.fromSingleTextEdit(this.edit.toSingle(this.originalText), this.originalText);
+    }
+    get originalLineRange() { return this.lineEdit.lineRange; }
+    get modifiedLineRange() { return this.lineEdit.toLineEdit().getNewLineRanges()[0]; }
+    get displayRange() {
+        return this.originalText.lineRange.intersect(this.originalLineRange.join(LineRange.ofLength(this.originalLineRange.startLineNumber, this.lineEdit.newLines.length)));
+    }
     constructor(originalText, edit, cursorPosition, commands, inlineCompletion) {
         this.originalText = originalText;
         this.edit = edit;
         this.cursorPosition = cursorPosition;
         this.commands = commands;
         this.inlineCompletion = inlineCompletion;
-        this.lineEdit = SingleLineEdit.fromSingleTextEdit(this.edit.toSingle(this.originalText), this.originalText);
-        this.originalLineRange = this.lineEdit.lineRange;
-        this.modifiedLineRange = this.lineEdit.toLineEdit().getNewLineRanges()[0];
     }
     equals(other) {
         return this.originalText.getValue() === other.originalText.getValue() &&

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

@@ -2,9 +2,9 @@ import { Event } from "../../../../../../base/common/event.js";
 import { IObservable } from "../../../../../../base/common/observable.js";
 import { ICodeEditor } from "../../../../../browser/editorBrowser.js";
 import { LineRange } from "../../../../../common/core/lineRange.js";
-import { Command } from "../../../../../common/languages.js";
+import { Command, InlineCompletionDisplayLocation } from "../../../../../common/languages.js";
 import { InlineCompletionsModel } from "../../model/inlineCompletionsModel.js";
-import { InlineCompletionWithUpdatedRange } from "../../model/inlineCompletionsSource.js";
+import { InlineCompletionItem } from "../../model/inlineSuggestionItem.js";
 import { IInlineEditHost, IInlineEditModel, InlineEditTabAction } from "./inlineEditsViewInterface.js";
 import { InlineEditWithChanges } from "./inlineEditWithChanges.js";
 export declare class InlineEditModel implements IInlineEditModel {
@@ -14,6 +14,7 @@ export declare class InlineEditModel implements IInlineEditModel {
     readonly action: Command | undefined;
     readonly displayName: string;
     readonly extensionCommands: Command[];
+    readonly displayLocation: InlineCompletionDisplayLocation | undefined;
     readonly showCollapsed: IObservable<boolean>;
     constructor(_model: InlineCompletionsModel, inlineEdit: InlineEditWithChanges, tabAction: IObservable<InlineEditTabAction>);
     accept(): void;
@@ -25,11 +26,10 @@ export declare class InlineEditHost implements IInlineEditHost {
     private readonly _model;
     readonly onDidAccept: Event<void>;
     readonly inAcceptFlow: IObservable<boolean>;
-    readonly inPartialAcceptFlow: IObservable<boolean>;
     constructor(_model: InlineCompletionsModel);
 }
 export declare class GhostTextIndicator {
     readonly lineRange: LineRange;
     readonly model: InlineEditModel;
-    constructor(editor: ICodeEditor, model: InlineCompletionsModel, lineRange: LineRange, inlineCompletion: InlineCompletionWithUpdatedRange);
+    constructor(editor: ICodeEditor, model: InlineCompletionsModel, lineRange: LineRange, inlineCompletion: InlineCompletionItem);
 }

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

@@ -13,8 +13,9 @@ class InlineEditModel {
         this.inlineEdit = inlineEdit;
         this.tabAction = tabAction;
         this.action = this.inlineEdit.inlineCompletion.action;
-        this.displayName = this.inlineEdit.inlineCompletion.source.provider.displayName ?? ( localize(1280, "Inline Edit"));
-        this.extensionCommands = this.inlineEdit.inlineCompletion.source.inlineCompletions.commands ?? [];
+        this.displayName = this.inlineEdit.inlineCompletion.source.provider.displayName ?? ( localize(1277, "Inline Edit"));
+        this.extensionCommands = this.inlineEdit.inlineCompletion.source.inlineSuggestions.commands ?? [];
+        this.displayLocation = this.inlineEdit.inlineCompletion.displayLocation;
         this.showCollapsed = this._model.showCollapsed;
     }
     accept() {
@@ -28,7 +29,7 @@ class InlineEditModel {
         this._model.stop();
     }
     handleInlineEditShown() {
-        this._model.handleInlineEditShown(this.inlineEdit.inlineCompletion);
+        this._model.handleInlineSuggestionShown(this.inlineEdit.inlineCompletion);
     }
 }
 class InlineEditHost {
@@ -36,7 +37,6 @@ class InlineEditHost {
         this._model = _model;
         this.onDidAccept = this._model.onDidAccept;
         this.inAcceptFlow = this._model.inAcceptFlow;
-        this.inPartialAcceptFlow = this._model.inPartialAcceptFlow;
     }
 }
 class GhostTextIndicator {
@@ -45,13 +45,13 @@ class GhostTextIndicator {
         const editorObs = observableCodeEditor(editor);
         const tabAction = derived(this, reader => {
             if (editorObs.isFocused.read(reader)) {
-                if (model.inlineCompletionState.read(reader)?.inlineCompletion?.sourceInlineCompletion.showInlineEditMenu) {
+                if (inlineCompletion.showInlineEditMenu) {
                     return InlineEditTabAction.Accept;
                 }
             }
             return InlineEditTabAction.Inactive;
         });
-        this.model = ( new InlineEditModel(model, ( new InlineEditWithChanges(( new StringText('')), ( new TextEdit([])), model.primaryPosition.get(), inlineCompletion.source.inlineCompletions.commands ?? [], inlineCompletion.inlineCompletion)), tabAction));
+        this.model = ( new InlineEditModel(model, ( new InlineEditWithChanges(( new StringText('')), ( new TextEdit([inlineCompletion.getSingleTextEdit()])), model.primaryPosition.get(), inlineCompletion.source.inlineSuggestions.commands ?? [], inlineCompletion)), tabAction));
     }
 }
 

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

@@ -0,0 +1,23 @@
+import { Disposable } from "../../../../../../base/common/lifecycle.js";
+import { IObservable } from "../../../../../../base/common/observable.js";
+import { IConfigurationService } from "../../../../../../platform/configuration/common/configuration.service.js";
+import { IStorageService } from "../../../../../../platform/storage/common/storage.service.js";
+import { InlineEditsGutterIndicator } from "./components/gutterIndicatorView.js";
+import { IInlineEditHost, IInlineEditModel } from "./inlineEditsViewInterface.js";
+import { InlineEditsCollapsedView } from "./inlineEditsViews/inlineEditsCollapsedView.js";
+export declare class InlineEditsOnboardingExperience extends Disposable {
+    private readonly _host;
+    private readonly _model;
+    private readonly _indicator;
+    private readonly _collapsedView;
+    private readonly _storageService;
+    private readonly _configurationService;
+    private readonly _disposables;
+    private readonly _setupDone;
+    private readonly _activeCompletionId;
+    constructor(_host: IObservable<IInlineEditHost | undefined>, _model: IObservable<IInlineEditModel | undefined>, _indicator: IObservable<InlineEditsGutterIndicator | undefined>, _collapsedView: InlineEditsCollapsedView, _storageService: IStorageService, _configurationService: IConfigurationService);
+    private setupNewUserExperience;
+    private getNewUserType;
+    private setNewUserType;
+    private _initializeDebugSetting;
+}