@codingame/monaco-vscode-api 3.2.2 → 4.0.0

package/vscode/src/vs/editor/contrib/rename/browser/{renameInputField.js → renameWidget.js}

@@ -1,44 +1,57 @@
 import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
-import { addDisposableListener, getClientArea, getDomNodePagePosition, getTotalHeight, getTotalWidth } from '../../../../base/browser/dom.js';
+import { getClientArea, getDomNodePagePosition, getTotalHeight, getTotalWidth, addDisposableListener } from '../../../../base/browser/dom.js';
 import { status } from '../../../../base/browser/ui/aria/aria.js';
 import { renderIcon } from '../../../../base/browser/ui/iconLabel/iconLabels.js';
 import { List } from '../../../../base/browser/ui/list/listWidget.js';
 import { distinct } from '../../../../base/common/arrays.js';
-import { raceCancellation } from '../../../../base/common/async.js';
+import { raceCancellation, DeferredPromise } from '../../../../base/common/async.js';
+import { CancellationTokenSource } from '../../../../base/common/cancellation.js';
 import { Codicon } from '../../../../base/common/codicons.js';
+import { Emitter } from '../../../../base/common/event.js';
 import { DisposableStore, toDisposable } from '../../../../base/common/lifecycle.js';
+import { StopWatch } from '../../../../base/common/stopwatch.js';
 import { assertType, isDefined } from '../../../../base/common/types.js';
-import './renameInputField.css.js';
+import './renameWidget.css.js';
+import { applyFontInfo } from '../../../browser/config/domFontInfo.js';
 import { Position } from '../../../common/core/position.js';
-import '../../../common/languages.js';
+import { Range } from '../../../common/core/range.js';
+import { NewSymbolNameTag } from '../../../common/languages.js';
 import { localizeWithPath } from '../../../../nls.js';
 import { RawContextKey, IContextKeyService } from '../../../../platform/contextkey/common/contextkey.js';
 import { IKeybindingService } from '../../../../platform/keybinding/common/keybinding.js';
 import { ILogService } from '../../../../platform/log/common/log.js';
-import { defaultListStyles } from '../../../../platform/theme/browser/defaultStyles.js';
-import { widgetShadow, widgetBorder, editorWidgetBackground, inputForeground, inputBackground, inputBorder } from '../../../../platform/theme/common/colorRegistry.js';
+import { getListStyles } from '../../../../platform/theme/browser/defaultStyles.js';
+import '../../../../platform/theme/common/colorUtils.js';
+import '../../../../platform/theme/common/colors/baseColors.js';
+import '../../../../platform/theme/common/colors/chartsColors.js';
+import { widgetShadow, widgetBorder, editorWidgetBackground } from '../../../../platform/theme/common/colors/editorColors.js';
+import { inputForeground, inputBackground, inputBorder } from '../../../../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 { quickInputListFocusForeground, quickInputListFocusBackground } from '../../../../platform/theme/common/colors/quickpickColors.js';
+import '../../../../platform/theme/common/colors/searchColors.js';
 import { IThemeService } from '../../../../platform/theme/common/themeService.js';
 const CONTEXT_RENAME_INPUT_VISIBLE = ( new RawContextKey('renameInputVisible', false, ( localizeWithPath(
-    'vs/editor/contrib/rename/browser/renameInputField',
+    'vs/editor/contrib/rename/browser/renameWidget',
     'renameInputVisible',
     "Whether the rename input widget is visible"
 ))));
-const CONTEXT_RENAME_INPUT_FOCUSED = ( new RawContextKey('renameInputFocused', false, ( localizeWithPath(
-    'vs/editor/contrib/rename/browser/renameInputField',
-    'renameInputFocused',
-    "Whether the rename input widget is focused"
-))));
-let RenameInputField = class RenameInputField {
+let RenameWidget = class RenameWidget {
     constructor(_editor, _acceptKeybindings, _themeService, _keybindingService, contextKeyService, _logService) {
         this._editor = _editor;
         this._acceptKeybindings = _acceptKeybindings;
         this._themeService = _themeService;
         this._keybindingService = _keybindingService;
         this._logService = _logService;
-        this._disposables = ( new DisposableStore());
         this.allowEditorOverflow = true;
+        this._disposables = ( new DisposableStore());
         this._visibleContextKey = CONTEXT_RENAME_INPUT_VISIBLE.bindTo(contextKeyService);
-        this._focusedContextKey = CONTEXT_RENAME_INPUT_FOCUSED.bindTo(contextKeyService);
+        this._isEditingRenameCandidate = false;
+        this._beforeFirstInputFieldEditSW = ( new StopWatch());
+        this._input = ( new RenameInput());
+        this._disposables.add(this._input);
         this._editor.addContentWidget(this);
         this._disposables.add(this._editor.onDidChangeConfiguration(e => {
             if (e.hasChanged(50 )) {
@@ -58,21 +71,28 @@ let RenameInputField = class RenameInputField {
         if (!this._domNode) {
             this._domNode = document.createElement('div');
             this._domNode.className = 'monaco-editor rename-box';
-            this._input = document.createElement('input');
-            this._input.className = 'rename-input';
-            this._input.type = 'text';
-            this._input.setAttribute('aria-label', ( localizeWithPath(
-                'vs/editor/contrib/rename/browser/renameInputField',
-                'renameAriaLabel',
-                "Rename input. Type new name and press Enter to commit."
-            )));
-            this._disposables.add(addDisposableListener(this._input, 'focus', () => { this._focusedContextKey.set(true); }));
-            this._disposables.add(addDisposableListener(this._input, 'blur', () => { this._focusedContextKey.reset(); }));
-            this._domNode.appendChild(this._input);
-            this._candidatesView = this._disposables.add(( new CandidatesView(this._domNode, {
+            this._domNode.appendChild(this._input.domNode);
+            this._renameCandidateListView = this._disposables.add(( new RenameCandidateListView(this._domNode, {
                 fontInfo: this._editor.getOption(50 ),
-                onSelectionChange: () => this.acceptInput(false)
+                onFocusChange: (newSymbolName) => {
+                    this._input.domNode.value = newSymbolName;
+                    this._isEditingRenameCandidate = false;
+                },
+                onSelectionChange: () => {
+                    this._isEditingRenameCandidate = false;
+                    this.acceptInput(false);
+                }
             })));
+            this._disposables.add(this._input.onDidChange(() => {
+                if (this._renameCandidateListView?.focusedCandidate !== undefined) {
+                    this._isEditingRenameCandidate = true;
+                }
+                this._timeBeforeFirstInputFieldEdit ??= this._beforeFirstInputFieldEditSW.elapsed();
+                if (this._renameCandidateProvidersCts?.token.isCancellationRequested === false) {
+                    this._renameCandidateProvidersCts.cancel();
+                }
+                this._renameCandidateListView?.clearFocus();
+            }));
             this._label = document.createElement('div');
             this._label.className = 'rename-label';
             this._domNode.appendChild(this._label);
@@ -82,7 +102,7 @@ let RenameInputField = class RenameInputField {
         return this._domNode;
     }
     _updateStyles(theme) {
-        if (!this._input || !this._domNode) {
+        if (!this._domNode) {
             return;
         }
         const widgetShadowColor = theme.getColor(widgetShadow);
@@ -91,21 +111,19 @@ let RenameInputField = class RenameInputField {
         this._domNode.style.boxShadow = widgetShadowColor ? ` 0 0 8px 2px ${widgetShadowColor}` : '';
         this._domNode.style.border = widgetBorderColor ? `1px solid ${widgetBorderColor}` : '';
         this._domNode.style.color = String(theme.getColor(inputForeground) ?? '');
-        this._input.style.backgroundColor = String(theme.getColor(inputBackground) ?? '');
+        this._input.domNode.style.backgroundColor = String(theme.getColor(inputBackground) ?? '');
         const border = theme.getColor(inputBorder);
-        this._input.style.borderWidth = border ? '1px' : '0px';
-        this._input.style.borderStyle = border ? 'solid' : 'none';
-        this._input.style.borderColor = border?.toString() ?? 'none';
+        this._input.domNode.style.borderWidth = border ? '1px' : '0px';
+        this._input.domNode.style.borderStyle = border ? 'solid' : 'none';
+        this._input.domNode.style.borderColor = border?.toString() ?? 'none';
     }
     _updateFont() {
-        if (!this._input || !this._label || !this._candidatesView) {
+        if (this._domNode === undefined) {
             return;
         }
+        assertType(this._label !== undefined, 'RenameWidget#_updateFont: _label must not be undefined given _domNode is defined');
+        this._editor.applyFontInfo(this._input.domNode);
         const fontInfo = this._editor.getOption(50 );
-        this._input.style.fontFamily = fontInfo.fontFamily;
-        this._input.style.fontWeight = fontInfo.fontWeight;
-        this._input.style.fontSize = `${fontInfo.fontSize}px`;
-        this._candidatesView.updateFont(fontInfo);
         this._label.style.fontSize = `${this._computeLabelFontSize(fontInfo.fontSize)}px`;
     }
     _computeLabelFontSize(editorFontSize) {
@@ -126,7 +144,7 @@ let RenameInputField = class RenameInputField {
         this._nPxAvailableAbove = cursorBoxTop + editorBox.top;
         this._nPxAvailableBelow = bodyBox.height - this._nPxAvailableAbove;
         const lineHeight = this._editor.getOption(67 );
-        const { totalHeight: candidateViewHeight } = CandidateView.getLayoutInfo({ lineHeight });
+        const { totalHeight: candidateViewHeight } = RenameCandidateView.getLayoutInfo({ lineHeight });
         const positionPreference = this._nPxAvailableBelow > candidateViewHeight * 6
             ? [2 , 1 ]
             : [1 , 2 ];
@@ -138,7 +156,7 @@ let RenameInputField = class RenameInputField {
     beforeRender() {
         const [accept, preview] = this._acceptKeybindings;
         this._label.innerText = ( localizeWithPath(
-            'vs/editor/contrib/rename/browser/renameInputField',
+            'vs/editor/contrib/rename/browser/renameWidget',
             { key: 'label', comment: ['placeholders are keybindings, e.g "F2 to Rename, Shift+F2 to Preview"'] },
             "{0} to Rename, {1} to Preview",
             this._keybindingService.lookupKeybinding(accept)?.getLabel(),
@@ -158,10 +176,10 @@ let RenameInputField = class RenameInputField {
         ) {
             return;
         }
-        assertType(this._candidatesView);
+        assertType(this._renameCandidateListView);
         assertType(this._nPxAvailableAbove !== undefined);
         assertType(this._nPxAvailableBelow !== undefined);
-        const inputBoxHeight = getTotalHeight(this._input);
+        const inputBoxHeight = getTotalHeight(this._input.domNode);
         const labelHeight = getTotalHeight(this._label);
         let totalHeightAvailable;
         if (position === 2 ) {
@@ -170,9 +188,9 @@ let RenameInputField = class RenameInputField {
         else {
             totalHeightAvailable = this._nPxAvailableAbove;
         }
-        this._candidatesView.layout({
+        this._renameCandidateListView.layout({
             height: totalHeightAvailable - labelHeight - inputBoxHeight,
-            width: getTotalWidth(this._input),
+            width: getTotalWidth(this._input.domNode),
         });
     }
     acceptInput(wantsPreview) {
@@ -184,73 +202,101 @@ let RenameInputField = class RenameInputField {
         this._currentCancelInput?.(focusEditor);
     }
     focusNextRenameSuggestion() {
-        this._candidatesView?.focusNext();
+        if (!this._renameCandidateListView?.focusNext()) {
+            this._input.domNode.value = this._currentName;
+        }
     }
     focusPreviousRenameSuggestion() {
-        if (!this._candidatesView?.focusPrevious()) {
-            this._input.focus();
+        if (!this._renameCandidateListView?.focusPrevious()) {
+            this._input.domNode.value = this._currentName;
         }
     }
-    getInput(where, value, selectionStart, selectionEnd, supportPreview, candidates, cts) {
+    getInput(where, currentName, supportPreview, requestRenameCandidates, cts) {
+        const { start: selectionStart, end: selectionEnd } = this._getSelection(where, currentName);
+        this._renameCandidateProvidersCts = ( new CancellationTokenSource());
+        const candidates = requestRenameCandidates(this._renameCandidateProvidersCts.token);
+        this._updateRenameCandidates(candidates, currentName, cts.token);
+        this._isEditingRenameCandidate = false;
         this._domNode.classList.toggle('preview', supportPreview);
         this._position = ( new Position(where.startLineNumber, where.startColumn));
-        this._input.value = value;
-        this._input.setAttribute('selectionStart', ( selectionStart.toString()));
-        this._input.setAttribute('selectionEnd', ( selectionEnd.toString()));
-        this._input.size = Math.max((where.endColumn - where.startColumn) * 1.1, 20);
+        this._currentName = currentName;
+        this._input.domNode.value = currentName;
+        this._input.domNode.setAttribute('selectionStart', ( selectionStart.toString()));
+        this._input.domNode.setAttribute('selectionEnd', ( selectionEnd.toString()));
+        this._input.domNode.size = Math.max((where.endColumn - where.startColumn) * 1.1, 20);
+        this._beforeFirstInputFieldEditSW.reset();
         const disposeOnDone = ( new DisposableStore());
         disposeOnDone.add(toDisposable(() => cts.dispose(true)));
-        this._updateRenameCandidates(candidates, value, cts.token);
-        return ( new Promise(resolve => {
-            this._currentCancelInput = (focusEditor) => {
-                this._trace('invoking _currentCancelInput');
-                this._currentAcceptInput = undefined;
-                this._currentCancelInput = undefined;
-                this._candidatesView?.clearCandidates();
-                resolve(focusEditor);
-                return true;
-            };
-            this._currentAcceptInput = (wantsPreview) => {
-                this._trace('invoking _currentAcceptInput');
-                assertType(this._input !== undefined);
-                assertType(this._candidatesView !== undefined);
-                const nRenameSuggestions = this._candidatesView.nCandidates;
-                let newName;
-                let source;
-                const focusedCandidate = this._candidatesView.focusedCandidate;
-                if (focusedCandidate !== undefined) {
-                    this._trace('using new name from renameSuggestion');
-                    newName = focusedCandidate;
-                    source = 'renameSuggestion';
-                }
-                else {
-                    this._trace('using new name from inputField');
-                    newName = this._input.value;
-                    source = 'inputField';
-                }
-                if (newName === value || newName.trim().length === 0 ) {
-                    this.cancelInput(true, '_currentAcceptInput (because newName === value || newName.trim().length === 0)');
-                    return;
-                }
-                this._currentAcceptInput = undefined;
-                this._currentCancelInput = undefined;
-                this._candidatesView.clearCandidates();
-                resolve({
-                    newName,
-                    wantsPreview: supportPreview && wantsPreview,
-                    source,
-                    nRenameSuggestions,
-                });
-            };
-            disposeOnDone.add(cts.token.onCancellationRequested(() => this.cancelInput(true, 'cts.token.onCancellationRequested')));
-            {
-                disposeOnDone.add(this._editor.onDidBlurEditorWidget(() => this.cancelInput(!this._domNode?.ownerDocument.hasFocus(), 'editor.onDidBlurEditorWidget')));
+        disposeOnDone.add(toDisposable(() => {
+            if (this._renameCandidateProvidersCts !== undefined) {
+                this._renameCandidateProvidersCts.dispose(true);
+                this._renameCandidateProvidersCts = undefined;
             }
-            this._show();
-        })).finally(() => {
+        }));
+        const inputResult = ( new DeferredPromise());
+        inputResult.p.finally(() => {
             disposeOnDone.dispose();
             this._hide();
         });
+        this._currentCancelInput = (focusEditor) => {
+            this._trace('invoking _currentCancelInput');
+            this._currentAcceptInput = undefined;
+            this._currentCancelInput = undefined;
+            this._renameCandidateListView?.clearCandidates();
+            inputResult.complete(focusEditor);
+            return true;
+        };
+        this._currentAcceptInput = (wantsPreview) => {
+            this._trace('invoking _currentAcceptInput');
+            assertType(this._renameCandidateListView !== undefined);
+            const nRenameSuggestions = this._renameCandidateListView.nCandidates;
+            let newName;
+            let source;
+            const focusedCandidate = this._renameCandidateListView.focusedCandidate;
+            if (focusedCandidate !== undefined) {
+                this._trace('using new name from renameSuggestion');
+                newName = focusedCandidate;
+                source = { k: 'renameSuggestion' };
+            }
+            else {
+                this._trace('using new name from inputField');
+                newName = this._input.domNode.value;
+                source = this._isEditingRenameCandidate ? { k: 'userEditedRenameSuggestion' } : { k: 'inputField' };
+            }
+            if (newName === currentName || newName.trim().length === 0 ) {
+                this.cancelInput(true, '_currentAcceptInput (because newName === value || newName.trim().length === 0)');
+                return;
+            }
+            this._currentAcceptInput = undefined;
+            this._currentCancelInput = undefined;
+            this._renameCandidateListView.clearCandidates();
+            inputResult.complete({
+                newName,
+                wantsPreview: supportPreview && wantsPreview,
+                stats: {
+                    source,
+                    nRenameSuggestions,
+                    timeBeforeFirstInputFieldEdit: this._timeBeforeFirstInputFieldEdit,
+                }
+            });
+        };
+        disposeOnDone.add(cts.token.onCancellationRequested(() => this.cancelInput(true, 'cts.token.onCancellationRequested')));
+        {
+            disposeOnDone.add(this._editor.onDidBlurEditorWidget(() => this.cancelInput(!this._domNode?.ownerDocument.hasFocus(), 'editor.onDidBlurEditorWidget')));
+        }
+        this._show();
+        return inputResult.p;
+    }
+    _getSelection(where, currentName) {
+        assertType(this._editor.hasModel());
+        const selection = this._editor.getSelection();
+        let start = 0;
+        let end = currentName.length;
+        if (!Range.isEmpty(selection) && !Range.spansMultipleLines(selection) && Range.containsRange(where, selection)) {
+            start = Math.max(0, selection.startColumn - where.startColumn);
+            end = Math.min(where.endColumn, selection.endColumn) - where.startColumn;
+        }
+        return { start, end };
     }
     _show() {
         this._trace('invoking _show');
@@ -259,8 +305,8 @@ let RenameInputField = class RenameInputField {
         this._visibleContextKey.set(true);
         this._editor.layoutContentWidget(this);
         setTimeout(() => {
-            this._input.focus();
-            this._input.setSelectionRange(parseInt(this._input.getAttribute('selectionStart')), parseInt(this._input.getAttribute('selectionEnd')));
+            this._input.domNode.focus();
+            this._input.domNode.setSelectionRange(parseInt(this._input.domNode.getAttribute('selectionStart')), parseInt(this._input.domNode.getAttribute('selectionEnd')));
         }, 100);
     }
     async _updateRenameCandidates(candidates, currentName, token) {
@@ -277,14 +323,14 @@ let RenameInputField = class RenameInputField {
         trace(`received updateRenameCandidates results - total (unfiltered) ${newNames.length} candidates.`);
         const distinctNames = distinct(newNames, v => v.newSymbolName);
         trace(`distinct candidates - ${distinctNames.length} candidates.`);
-        const validDistinctNames = distinctNames.filter(({ newSymbolName }) => newSymbolName.trim().length > 0 && newSymbolName !== this._input?.value && newSymbolName !== currentName);
+        const validDistinctNames = distinctNames.filter(({ newSymbolName }) => newSymbolName.trim().length > 0 && newSymbolName !== this._input.domNode.value && newSymbolName !== currentName);
         trace(`valid distinct candidates - ${newNames.length} candidates.`);
         if (validDistinctNames.length < 1) {
             trace('returning early - no valid distinct candidates');
             return;
         }
         trace('setting candidates');
-        this._candidatesView.setCandidates(validDistinctNames);
+        this._renameCandidateListView.setCandidates(validDistinctNames);
         trace('asking editor to re-layout');
         this._editor.layoutContentWidget(this);
     }
@@ -301,22 +347,22 @@ let RenameInputField = class RenameInputField {
             firstLineInViewport = visibleRanges[0].startLineNumber;
         }
         else {
-            this._logService.warn('RenameInputField#_getTopForPosition: this should not happen - visibleRanges is empty');
+            this._logService.warn('RenameWidget#_getTopForPosition: this should not happen - visibleRanges is empty');
             firstLineInViewport = Math.max(1, this._position.lineNumber - 5);
         }
         return this._editor.getTopForLineNumber(this._position.lineNumber) - this._editor.getTopForLineNumber(firstLineInViewport);
     }
     _trace(...args) {
-        this._logService.trace('RenameInputField', ...args);
+        this._logService.trace('RenameWidget', ...args);
     }
 };
-RenameInputField = ( __decorate([
+RenameWidget = ( __decorate([
     ( __param(2, IThemeService)),
     ( __param(3, IKeybindingService)),
     ( __param(4, IContextKeyService)),
     ( __param(5, ILogService))
-], RenameInputField));
-class CandidatesView {
+], RenameWidget));
+class RenameCandidateListView {
     constructor(parent, opts) {
         this._disposables = ( new DisposableStore());
         this._availableHeight = 0;
@@ -324,53 +370,25 @@ class CandidatesView {
         this._lineHeight = opts.fontInfo.lineHeight;
         this._typicalHalfwidthCharacterWidth = opts.fontInfo.typicalHalfwidthCharacterWidth;
         this._listContainer = document.createElement('div');
-        this._listContainer.style.fontFamily = opts.fontInfo.fontFamily;
-        this._listContainer.style.fontWeight = opts.fontInfo.fontWeight;
-        this._listContainer.style.fontSize = `${opts.fontInfo.fontSize}px`;
         parent.appendChild(this._listContainer);
-        const that = this;
-        const virtualDelegate = new class {
-            getTemplateId(element) {
-                return 'candidate';
-            }
-            getHeight(element) {
-                return that._candidateViewHeight;
-            }
-        };
-        const renderer = new (class {
-            constructor() {
-                this.templateId = 'candidate';
+        this._listWidget = RenameCandidateListView._createListWidget(this._listContainer, this._candidateViewHeight, opts.fontInfo);
+        this._listWidget.onDidChangeFocus(e => {
+            if (e.elements.length === 1) {
+                opts.onFocusChange(e.elements[0].newSymbolName);
             }
-            renderTemplate(container) {
-                return ( new CandidateView(container, { lineHeight: that._lineHeight }));
-            }
-            renderElement(candidate, index, templateData) {
-                templateData.model = candidate;
-            }
-            disposeTemplate(templateData) {
-                templateData.dispose();
-            }
-        });
-        this._listWidget = ( new List(
-            'NewSymbolNameCandidates',
-            this._listContainer,
-            virtualDelegate,
-            [renderer],
-            {
-                keyboardSupport: false,
-                mouseSupport: true,
-                multipleSelectionSupport: false,
-            }
-        ));
-        this._disposables.add(this._listWidget.onDidChangeSelection(e => {
-            if (e.elements.length > 0) {
+        }, this._disposables);
+        this._listWidget.onDidChangeSelection(e => {
+            if (e.elements.length === 1) {
                 opts.onSelectionChange();
             }
-        }));
+        }, this._disposables);
         this._disposables.add(this._listWidget.onDidBlur(e => {
             this._listWidget.setFocus([]);
         }));
-        this._listWidget.style(defaultListStyles);
+        this._listWidget.style(getListStyles({
+            listInactiveFocusForeground: quickInputListFocusForeground,
+            listInactiveFocusBackground: quickInputListFocusBackground,
+        }));
     }
     dispose() {
         this._listWidget.dispose();
@@ -388,7 +406,7 @@ class CandidatesView {
         this._listContainer.style.height = `${height}px`;
         this._listContainer.style.width = `${width}px`;
         status(( localizeWithPath(
-            'vs/editor/contrib/rename/browser/renameInputField',
+            'vs/editor/contrib/rename/browser/renameWidget',
             'renameSuggestionsReceivedAria',
             "Received {0} rename suggestions",
             candidates.length
@@ -416,40 +434,51 @@ class CandidatesView {
         }
         return;
     }
-    updateFont(fontInfo) {
-        this._listContainer.style.fontFamily = fontInfo.fontFamily;
-        this._listContainer.style.fontWeight = fontInfo.fontWeight;
-        this._listContainer.style.fontSize = `${fontInfo.fontSize}px`;
-        this._lineHeight = fontInfo.lineHeight;
-        this._listWidget.rerender();
-    }
     focusNext() {
         if (this._listWidget.length === 0) {
-            return;
+            return false;
         }
-        if (this._listWidget.isDOMFocused()) {
-            this._listWidget.focusNext();
+        const focusedIxs = this._listWidget.getFocus();
+        if (focusedIxs.length === 0) {
+            this._listWidget.focusFirst();
+            return true;
         }
         else {
-            this._listWidget.domFocus();
-            this._listWidget.focusFirst();
+            if (focusedIxs[0] === this._listWidget.length - 1) {
+                this._listWidget.setFocus([]);
+                return false;
+            }
+            else {
+                this._listWidget.focusNext();
+                return true;
+            }
         }
-        this._listWidget.reveal(this._listWidget.getFocus()[0]);
     }
     focusPrevious() {
         if (this._listWidget.length === 0) {
             return false;
         }
-        this._listWidget.domFocus();
-        const focusedIx = this._listWidget.getFocus()[0];
-        if (focusedIx !== 0) {
-            this._listWidget.focusPrevious();
-            this._listWidget.reveal(this._listWidget.getFocus()[0]);
+        const focusedIxs = this._listWidget.getFocus();
+        if (focusedIxs.length === 0) {
+            this._listWidget.focusLast();
+            return true;
         }
-        return focusedIx > 0;
+        else {
+            if (focusedIxs[0] === 0) {
+                this._listWidget.setFocus([]);
+                return false;
+            }
+            else {
+                this._listWidget.focusPrevious();
+                return true;
+            }
+        }
+    }
+    clearFocus() {
+        this._listWidget.setFocus([]);
     }
     get _candidateViewHeight() {
-        const { totalHeight } = CandidateView.getLayoutInfo({ lineHeight: this._lineHeight });
+        const { totalHeight } = RenameCandidateView.getLayoutInfo({ lineHeight: this._lineHeight });
         return totalHeight;
     }
     _pickListHeight(nCandidates) {
@@ -464,40 +493,99 @@ class CandidatesView {
         );
         return width;
     }
+    static _createListWidget(container, candidateViewHeight, fontInfo) {
+        const virtualDelegate = new class {
+            getTemplateId(element) {
+                return 'candidate';
+            }
+            getHeight(element) {
+                return candidateViewHeight;
+            }
+        };
+        const renderer = new (class {
+            constructor() {
+                this.templateId = 'candidate';
+            }
+            renderTemplate(container) {
+                return ( new RenameCandidateView(container, fontInfo));
+            }
+            renderElement(candidate, index, templateData) {
+                templateData.populate(candidate);
+            }
+            disposeTemplate(templateData) {
+                templateData.dispose();
+            }
+        });
+        return ( new List('NewSymbolNameCandidates', container, virtualDelegate, [renderer], {
+            keyboardSupport: false,
+            mouseSupport: true,
+            multipleSelectionSupport: false,
+        }));
+    }
+}
+class RenameInput {
+    constructor() {
+        this._onDidChange = ( new Emitter());
+        this.onDidChange = this._onDidChange.event;
+        this._disposables = ( new DisposableStore());
+    }
+    get domNode() {
+        if (!this._domNode) {
+            this._domNode = document.createElement('input');
+            this._domNode.className = 'rename-input';
+            this._domNode.type = 'text';
+            this._domNode.setAttribute('aria-label', ( localizeWithPath(
+                'vs/editor/contrib/rename/browser/renameWidget',
+                'renameAriaLabel',
+                "Rename input. Type new name and press Enter to commit."
+            )));
+            this._disposables.add(addDisposableListener(this._domNode, 'input', () => this._onDidChange.fire()));
+        }
+        return this._domNode;
+    }
+    dispose() {
+        this._onDidChange.dispose();
+        this._disposables.dispose();
+    }
 }
-class CandidateView {
+class RenameCandidateView {
     static { this._PADDING = 2; }
-    constructor(parent, { lineHeight }) {
-        this.domNode = document.createElement('div');
-        this.domNode.style.display = `flex`;
-        this.domNode.style.alignItems = `center`;
-        this.domNode.style.height = `${lineHeight}px`;
-        this.domNode.style.padding = `${CandidateView._PADDING}px`;
-        this._icon = document.createElement('div');
-        this._icon.style.display = `flex`;
-        this._icon.style.alignItems = `center`;
-        this._icon.style.width = this._icon.style.height = `${lineHeight * 0.8}px`;
-        this.domNode.appendChild(this._icon);
+    constructor(parent, fontInfo) {
+        this._domNode = document.createElement('div');
+        this._domNode.style.display = `flex`;
+        this._domNode.style.columnGap = `5px`;
+        this._domNode.style.alignItems = `center`;
+        this._domNode.style.height = `${fontInfo.lineHeight}px`;
+        this._domNode.style.padding = `${RenameCandidateView._PADDING}px`;
+        const iconContainer = document.createElement('div');
+        iconContainer.style.display = `flex`;
+        iconContainer.style.alignItems = `center`;
+        iconContainer.style.width = iconContainer.style.height = `${fontInfo.lineHeight * 0.8}px`;
+        this._domNode.appendChild(iconContainer);
+        this._icon = renderIcon(Codicon.sparkle);
+        this._icon.style.display = `none`;
+        iconContainer.appendChild(this._icon);
         this._label = document.createElement('div');
-        this._icon.style.display = `flex`;
-        this._icon.style.alignItems = `center`;
-        this._label.style.marginLeft = '5px';
-        this.domNode.appendChild(this._label);
-        parent.appendChild(this.domNode);
+        applyFontInfo(this._label, fontInfo);
+        this._domNode.appendChild(this._label);
+        parent.appendChild(this._domNode);
     }
-    set model(value) {
-        {
-            if (this._icon.children.length === 0) {
-                this._icon.appendChild(renderIcon(Codicon.sparkle));
-            }
-        }
+    populate(value) {
+        this._updateIcon(value);
+        this._updateLabel(value);
+    }
+    _updateIcon(value) {
+        const isAIGenerated = !!value.tags?.includes(NewSymbolNameTag.AIGenerated);
+        this._icon.style.display = isAIGenerated ? 'inherit' : 'none';
+    }
+    _updateLabel(value) {
         this._label.innerText = value.newSymbolName;
     }
     static getLayoutInfo({ lineHeight }) {
-        const totalHeight = lineHeight + CandidateView._PADDING * 2 ;
+        const totalHeight = lineHeight + RenameCandidateView._PADDING * 2 ;
         return { totalHeight };
     }
     dispose() {
     }
 }
-export { CONTEXT_RENAME_INPUT_FOCUSED, CONTEXT_RENAME_INPUT_VISIBLE, RenameInputField };
+export { CONTEXT_RENAME_INPUT_VISIBLE, RenameWidget };