@codingame/monaco-vscode-api 4.5.1 → 5.0.0

package/vscode/src/vs/editor/contrib/rename/browser/renameWidget.js

@@ -1,6 +1,9 @@
 import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
-import { getClientArea, getDomNodePagePosition, getTotalHeight, getTotalWidth, addDisposableListener } from '../../../../base/browser/dom.js';
+import { getClientArea, getDomNodePagePosition, getTotalHeight, getTotalWidth, addDisposableListener, EventType, clearNode } from '../../../../base/browser/dom.js';
+import { StandardKeyboardEvent } from '../../../../base/browser/keyboardEvent.js';
 import { status } from '../../../../base/browser/ui/aria/aria.js';
+import { getBaseLayerHoverDelegate } from '../../../../base/browser/ui/hover/hoverDelegate2.js';
+import { getDefaultHoverDelegate } from '../../../../base/browser/ui/hover/hoverDelegateFactory.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';
@@ -15,7 +18,7 @@ import './renameWidget.css.js';
 import { applyFontInfo } from '../../../browser/config/domFontInfo.js';
 import { Position } from '../../../common/core/position.js';
 import { Range } from '../../../common/core/range.js';
-import { NewSymbolNameTag } from '../../../common/languages.js';
+import { NewSymbolNameTriggerKind, NewSymbolNameTag } from '../../../common/languages.js';
 import { localizeWithPath } from '../../../../nls.js';
 import { RawContextKey } from '../../../../platform/contextkey/common/contextkey.js';
 import { IContextKeyService } from '../../../../platform/contextkey/common/contextkey.service.js';
@@ -26,7 +29,7 @@ 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 { inputForeground, inputBorder, inputBackground } 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';
@@ -34,11 +37,8 @@ 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.service.js';
-const CONTEXT_RENAME_INPUT_VISIBLE = ( new RawContextKey('renameInputVisible', false, ( localizeWithPath(
-    'vs/editor/contrib/rename/browser/renameWidget',
-    'renameInputVisible',
-    "Whether the rename input widget is visible"
-))));
+const _moduleId = "vs/editor/contrib/rename/browser/renameWidget";
+const CONTEXT_RENAME_INPUT_VISIBLE = ( (new RawContextKey('renameInputVisible', false, ( localizeWithPath(_moduleId, 0, "Whether the rename input widget is visible")))));
 let RenameWidget = class RenameWidget {
     constructor(_editor, _acceptKeybindings, _themeService, _keybindingService, contextKeyService, _logService) {
         this._editor = _editor;
@@ -47,12 +47,15 @@ let RenameWidget = class RenameWidget {
         this._keybindingService = _keybindingService;
         this._logService = _logService;
         this.allowEditorOverflow = true;
-        this._disposables = ( new DisposableStore());
+        this._disposables = ( (new DisposableStore()));
         this._visibleContextKey = CONTEXT_RENAME_INPUT_VISIBLE.bindTo(contextKeyService);
         this._isEditingRenameCandidate = false;
-        this._beforeFirstInputFieldEditSW = ( new StopWatch());
-        this._input = ( new RenameInput());
-        this._disposables.add(this._input);
+        this._nRenameSuggestionsInvocations = 0;
+        this._hadAutomaticRenameSuggestionsInvocation = false;
+        this._candidates = ( (new Set()));
+        this._beforeFirstInputFieldEditSW = ( (new StopWatch()));
+        this._inputWithButton = ( (new InputWithButton()));
+        this._disposables.add(this._inputWithButton);
         this._editor.addContentWidget(this);
         this._disposables.add(this._editor.onDidChangeConfiguration(e => {
             if (e.hasChanged(50 )) {
@@ -72,19 +75,19 @@ let RenameWidget = class RenameWidget {
         if (!this._domNode) {
             this._domNode = document.createElement('div');
             this._domNode.className = 'monaco-editor rename-box';
-            this._domNode.appendChild(this._input.domNode);
-            this._renameCandidateListView = this._disposables.add(( new RenameCandidateListView(this._domNode, {
+            this._domNode.appendChild(this._inputWithButton.domNode);
+            this._renameCandidateListView = this._disposables.add(( (new RenameCandidateListView(this._domNode, {
                 fontInfo: this._editor.getOption(50 ),
                 onFocusChange: (newSymbolName) => {
-                    this._input.domNode.value = newSymbolName;
+                    this._inputWithButton.input.value = newSymbolName;
                     this._isEditingRenameCandidate = false;
                 },
                 onSelectionChange: () => {
                     this._isEditingRenameCandidate = false;
                     this.acceptInput(false);
                 }
-            })));
-            this._disposables.add(this._input.onDidChange(() => {
+            }))));
+            this._disposables.add(this._inputWithButton.onDidInputChange(() => {
                 if (this._renameCandidateListView?.focusedCandidate !== undefined) {
                     this._isEditingRenameCandidate = true;
                 }
@@ -112,18 +115,19 @@ let RenameWidget = class RenameWidget {
         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.domNode.style.backgroundColor = String(theme.getColor(inputBackground) ?? '');
         const border = theme.getColor(inputBorder);
-        this._input.domNode.style.borderWidth = border ? '1px' : '0px';
-        this._input.domNode.style.borderStyle = border ? 'solid' : 'none';
-        this._input.domNode.style.borderColor = border?.toString() ?? 'none';
+        this._inputWithButton.domNode.style.backgroundColor = String(theme.getColor(inputBackground) ?? '');
+        this._inputWithButton.input.style.backgroundColor = String(theme.getColor(inputBackground) ?? '');
+        this._inputWithButton.domNode.style.borderWidth = border ? '1px' : '0px';
+        this._inputWithButton.domNode.style.borderStyle = border ? 'solid' : 'none';
+        this._inputWithButton.domNode.style.borderColor = border?.toString() ?? 'none';
     }
     _updateFont() {
         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);
+        this._editor.applyFontInfo(this._inputWithButton.input);
         const fontInfo = this._editor.getOption(50 );
         this._label.style.fontSize = `${this._computeLabelFontSize(fontInfo.fontSize)}px`;
     }
@@ -157,8 +161,8 @@ let RenameWidget = class RenameWidget {
     beforeRender() {
         const [accept, preview] = this._acceptKeybindings;
         this._label.innerText = ( localizeWithPath(
-            'vs/editor/contrib/rename/browser/renameWidget',
-            { key: 'label', comment: ['placeholders are keybindings, e.g "F2 to Rename, Shift+F2 to Preview"'] },
+            _moduleId,
+            2,
             "{0} to Rename, {1} to Preview",
             this._keybindingService.lookupKeybinding(accept)?.getLabel(),
             this._keybindingService.lookupKeybinding(preview)?.getLabel()
@@ -180,7 +184,7 @@ let RenameWidget = class RenameWidget {
         assertType(this._renameCandidateListView);
         assertType(this._nPxAvailableAbove !== undefined);
         assertType(this._nPxAvailableBelow !== undefined);
-        const inputBoxHeight = getTotalHeight(this._input.domNode);
+        const inputBoxHeight = getTotalHeight(this._inputWithButton.domNode);
         const labelHeight = getTotalHeight(this._label);
         let totalHeightAvailable;
         if (position === 2 ) {
@@ -191,7 +195,7 @@ let RenameWidget = class RenameWidget {
         }
         this._renameCandidateListView.layout({
             height: totalHeightAvailable - labelHeight - inputBoxHeight,
-            width: getTotalWidth(this._input.domNode),
+            width: getTotalWidth(this._inputWithButton.domNode),
         });
     }
     acceptInput(wantsPreview) {
@@ -204,37 +208,58 @@ let RenameWidget = class RenameWidget {
     }
     focusNextRenameSuggestion() {
         if (!this._renameCandidateListView?.focusNext()) {
-            this._input.domNode.value = this._currentName;
+            this._inputWithButton.input.value = this._currentName;
         }
     }
     focusPreviousRenameSuggestion() {
         if (!this._renameCandidateListView?.focusPrevious()) {
-            this._input.domNode.value = this._currentName;
+            this._inputWithButton.input.value = this._currentName;
         }
     }
     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._renameCts = cts;
+        const disposeOnDone = ( (new DisposableStore()));
+        this._nRenameSuggestionsInvocations = 0;
+        this._hadAutomaticRenameSuggestionsInvocation = false;
+        if (requestRenameCandidates === undefined) {
+            this._inputWithButton.button.style.display = 'none';
+        }
+        else {
+            this._inputWithButton.button.style.display = 'flex';
+            this._requestRenameCandidatesOnce = requestRenameCandidates;
+            this._requestRenameCandidates(currentName, false);
+            disposeOnDone.add(addDisposableListener(this._inputWithButton.button, 'click', () => this._requestRenameCandidates(currentName, true)));
+            disposeOnDone.add(addDisposableListener(this._inputWithButton.button, EventType.KEY_DOWN, (e) => {
+                const keyEvent = ( (new StandardKeyboardEvent(e)));
+                if (keyEvent.equals(3 ) || keyEvent.equals(10 )) {
+                    keyEvent.stopPropagation();
+                    keyEvent.preventDefault();
+                    this._requestRenameCandidates(currentName, true);
+                }
+            }));
+        }
         this._isEditingRenameCandidate = false;
         this._domNode.classList.toggle('preview', supportPreview);
-        this._position = ( new Position(where.startLineNumber, where.startColumn));
+        this._position = ( (new Position(where.startLineNumber, where.startColumn)));
         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._inputWithButton.input.value = currentName;
+        this._inputWithButton.input.setAttribute('selectionStart', ( (selectionStart.toString())));
+        this._inputWithButton.input.setAttribute('selectionEnd', ( (selectionEnd.toString())));
+        this._inputWithButton.input.size = Math.max((where.endColumn - where.startColumn) * 1.1, 20);
         this._beforeFirstInputFieldEditSW.reset();
-        const disposeOnDone = ( new DisposableStore());
-        disposeOnDone.add(toDisposable(() => cts.dispose(true)));
+        disposeOnDone.add(toDisposable(() => {
+            this._renameCts = undefined;
+            cts.dispose(true);
+        }));
         disposeOnDone.add(toDisposable(() => {
             if (this._renameCandidateProvidersCts !== undefined) {
                 this._renameCandidateProvidersCts.dispose(true);
                 this._renameCandidateProvidersCts = undefined;
             }
         }));
-        const inputResult = ( new DeferredPromise());
+        disposeOnDone.add(toDisposable(() => this._candidates.clear()));
+        const inputResult = ( (new DeferredPromise()));
         inputResult.p.finally(() => {
             disposeOnDone.dispose();
             this._hide();
@@ -261,7 +286,7 @@ let RenameWidget = class RenameWidget {
             }
             else {
                 this._trace('using new name from inputField');
-                newName = this._input.domNode.value;
+                newName = this._inputWithButton.input.value;
                 source = this._isEditingRenameCandidate ? { k: 'userEditedRenameSuggestion' } : { k: 'inputField' };
             }
             if (newName === currentName || newName.trim().length === 0 ) {
@@ -278,6 +303,8 @@ let RenameWidget = class RenameWidget {
                     source,
                     nRenameSuggestions,
                     timeBeforeFirstInputFieldEdit: this._timeBeforeFirstInputFieldEdit,
+                    nRenameSuggestionsInvocations: this._nRenameSuggestionsInvocations,
+                    hadAutomaticRenameSuggestionsInvocation: this._hadAutomaticRenameSuggestionsInvocation,
                 }
             });
         };
@@ -288,6 +315,30 @@ let RenameWidget = class RenameWidget {
         this._show();
         return inputResult.p;
     }
+    _requestRenameCandidates(currentName, isManuallyTriggered) {
+        if (this._requestRenameCandidatesOnce === undefined) {
+            return;
+        }
+        if (this._renameCandidateProvidersCts !== undefined) {
+            this._renameCandidateProvidersCts.dispose(true);
+        }
+        assertType(this._renameCts);
+        if (this._inputWithButton.buttonState !== 'stop') {
+            this._renameCandidateProvidersCts = ( (new CancellationTokenSource()));
+            const triggerKind = isManuallyTriggered ? NewSymbolNameTriggerKind.Invoke : NewSymbolNameTriggerKind.Automatic;
+            const candidates = this._requestRenameCandidatesOnce(triggerKind, this._renameCandidateProvidersCts.token);
+            if (candidates.length === 0) {
+                this._inputWithButton.setSparkleButton();
+                return;
+            }
+            if (!isManuallyTriggered) {
+                this._hadAutomaticRenameSuggestionsInvocation = true;
+            }
+            this._nRenameSuggestionsInvocations += 1;
+            this._inputWithButton.setStopButton();
+            this._updateRenameCandidates(candidates, currentName, this._renameCts.token);
+        }
+    }
     _getSelection(where, currentName) {
         assertType(this._editor.hasModel());
         const selection = this._editor.getSelection();
@@ -306,14 +357,15 @@ let RenameWidget = class RenameWidget {
         this._visibleContextKey.set(true);
         this._editor.layoutContentWidget(this);
         setTimeout(() => {
-            this._input.domNode.focus();
-            this._input.domNode.setSelectionRange(parseInt(this._input.domNode.getAttribute('selectionStart')), parseInt(this._input.domNode.getAttribute('selectionEnd')));
+            this._inputWithButton.input.focus();
+            this._inputWithButton.input.setSelectionRange(parseInt(this._inputWithButton.input.getAttribute('selectionStart')), parseInt(this._inputWithButton.input.getAttribute('selectionEnd')));
         }, 100);
     }
     async _updateRenameCandidates(candidates, currentName, token) {
         const trace = (...args) => this._trace('_updateRenameCandidates', ...args);
         trace('start');
         const namesListResults = await raceCancellation(Promise.allSettled(candidates), token);
+        this._inputWithButton.setSparkleButton();
         if (namesListResults === undefined) {
             trace('returning early - received updateRenameCandidates results - undefined');
             return;
@@ -324,8 +376,9 @@ let RenameWidget = class RenameWidget {
         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.domNode.value && newSymbolName !== currentName);
+        const validDistinctNames = distinctNames.filter(({ newSymbolName }) => newSymbolName.trim().length > 0 && newSymbolName !== this._inputWithButton.input.value && newSymbolName !== currentName && !( (this._candidates.has(newSymbolName))));
         trace(`valid distinct candidates - ${newNames.length} candidates.`);
+        validDistinctNames.forEach(n => this._candidates.add(n.newSymbolName));
         if (validDistinctNames.length < 1) {
             trace('returning early - no valid distinct candidates');
             return;
@@ -357,20 +410,21 @@ let RenameWidget = class RenameWidget {
         this._logService.trace('RenameWidget', ...args);
     }
 };
-RenameWidget = ( __decorate([
-    ( __param(2, IThemeService)),
-    ( __param(3, IKeybindingService)),
-    ( __param(4, IContextKeyService)),
-    ( __param(5, ILogService))
-], RenameWidget));
+RenameWidget = ( (__decorate([
+    ( (__param(2, IThemeService))),
+    ( (__param(3, IKeybindingService))),
+    ( (__param(4, IContextKeyService))),
+    ( (__param(5, ILogService)))
+], RenameWidget)));
 class RenameCandidateListView {
     constructor(parent, opts) {
-        this._disposables = ( new DisposableStore());
+        this._disposables = ( (new DisposableStore()));
         this._availableHeight = 0;
         this._minimumWidth = 0;
         this._lineHeight = opts.fontInfo.lineHeight;
         this._typicalHalfwidthCharacterWidth = opts.fontInfo.typicalHalfwidthCharacterWidth;
         this._listContainer = document.createElement('div');
+        this._listContainer.className = 'rename-box rename-candidate-list-container';
         parent.appendChild(this._listContainer);
         this._listWidget = RenameCandidateListView._createListWidget(this._listContainer, this._candidateViewHeight, opts.fontInfo);
         this._listWidget.onDidChangeFocus(e => {
@@ -401,17 +455,12 @@ class RenameCandidateListView {
     }
     setCandidates(candidates) {
         this._listWidget.splice(0, 0, candidates);
-        const height = this._pickListHeight(candidates.length);
+        const height = this._pickListHeight(this._listWidget.length);
         const width = this._pickListWidth(candidates);
         this._listWidget.layout(height, width);
         this._listContainer.style.height = `${height}px`;
         this._listContainer.style.width = `${width}px`;
-        status(( localizeWithPath(
-            'vs/editor/contrib/rename/browser/renameWidget',
-            'renameSuggestionsReceivedAria',
-            "Received {0} rename suggestions",
-            candidates.length
-        )));
+        status(( localizeWithPath(_moduleId, 3, "Received {0} rename suggestions", candidates.length)));
     }
     clearCandidates() {
         this._listContainer.style.height = '0px';
@@ -442,15 +491,19 @@ class RenameCandidateListView {
         const focusedIxs = this._listWidget.getFocus();
         if (focusedIxs.length === 0) {
             this._listWidget.focusFirst();
+            this._listWidget.reveal(0);
             return true;
         }
         else {
             if (focusedIxs[0] === this._listWidget.length - 1) {
                 this._listWidget.setFocus([]);
+                this._listWidget.reveal(0);
                 return false;
             }
             else {
                 this._listWidget.focusNext();
+                const focused = this._listWidget.getFocus()[0];
+                this._listWidget.reveal(focused);
                 return true;
             }
         }
@@ -462,6 +515,8 @@ class RenameCandidateListView {
         const focusedIxs = this._listWidget.getFocus();
         if (focusedIxs.length === 0) {
             this._listWidget.focusLast();
+            const focused = this._listWidget.getFocus()[0];
+            this._listWidget.reveal(focused);
             return true;
         }
         else {
@@ -471,6 +526,8 @@ class RenameCandidateListView {
             }
             else {
                 this._listWidget.focusPrevious();
+                const focused = this._listWidget.getFocus()[0];
+                this._listWidget.reveal(focused);
                 return true;
             }
         }
@@ -489,7 +546,7 @@ class RenameCandidateListView {
         return height;
     }
     _pickListWidth(candidates) {
-        const longestCandidateWidth = Math.ceil(Math.max(...( candidates.map(c => c.newSymbolName.length))) * this._typicalHalfwidthCharacterWidth);
+        const longestCandidateWidth = Math.ceil(Math.max(...( (candidates.map(c => c.newSymbolName.length)))) * this._typicalHalfwidthCharacterWidth);
         const width = Math.max(this._minimumWidth, 4  + 16  + 5  + longestCandidateWidth + 10
         );
         return width;
@@ -508,7 +565,9 @@ class RenameCandidateListView {
                 this.templateId = 'candidate';
             }
             renderTemplate(container) {
-                return ( new RenameCandidateView(container, fontInfo));
+                return (
+                     (new RenameCandidateView(container, fontInfo))
+                );
             }
             renderElement(candidate, index, templateData) {
                 templateData.populate(candidate);
@@ -517,35 +576,92 @@ class RenameCandidateListView {
                 templateData.dispose();
             }
         });
-        return ( new List('NewSymbolNameCandidates', container, virtualDelegate, [renderer], {
-            keyboardSupport: false,
-            mouseSupport: true,
-            multipleSelectionSupport: false,
-        }));
+        return (
+             (new List('NewSymbolNameCandidates', container, virtualDelegate, [renderer], {
+                keyboardSupport: false,
+                mouseSupport: true,
+                multipleSelectionSupport: false,
+            }))
+        );
     }
 }
-class RenameInput {
+class InputWithButton {
     constructor() {
-        this._onDidChange = ( new Emitter());
-        this.onDidChange = this._onDidChange.event;
-        this._disposables = ( new DisposableStore());
+        this._onDidInputChange = ( (new Emitter()));
+        this.onDidInputChange = this._onDidInputChange.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()));
+            this._domNode = document.createElement('div');
+            this._domNode.className = 'rename-input-with-button';
+            this._domNode.style.display = 'flex';
+            this._domNode.style.flexDirection = 'row';
+            this._domNode.style.alignItems = 'center';
+            this._inputNode = document.createElement('input');
+            this._inputNode.className = 'rename-input';
+            this._inputNode.type = 'text';
+            this._inputNode.style.border = 'none';
+            this._inputNode.setAttribute('aria-label', ( localizeWithPath(_moduleId, 4, "Rename input. Type new name and press Enter to commit.")));
+            this._domNode.appendChild(this._inputNode);
+            this._buttonNode = document.createElement('div');
+            this._buttonNode.className = 'rename-suggestions-button';
+            this._buttonNode.setAttribute('tabindex', '0');
+            this._buttonGenHoverText = ( localizeWithPath(_moduleId, 5, "Generate new name suggestions"));
+            this._buttonCancelHoverText = ( localizeWithPath(_moduleId, 6, "Cancel"));
+            this._buttonHover = getBaseLayerHoverDelegate().setupUpdatableHover(getDefaultHoverDelegate('element'), this._buttonNode, this._buttonGenHoverText);
+            this._disposables.add(this._buttonHover);
+            this._domNode.appendChild(this._buttonNode);
+            this._disposables.add(addDisposableListener(this.input, EventType.INPUT, () => this._onDidInputChange.fire()));
+            this._disposables.add(addDisposableListener(this.input, EventType.KEY_DOWN, (e) => {
+                const keyEvent = ( (new StandardKeyboardEvent(e)));
+                if (keyEvent.keyCode === 15  || keyEvent.keyCode === 17 ) {
+                    this._onDidInputChange.fire();
+                }
+            }));
+            this._disposables.add(addDisposableListener(this.input, EventType.CLICK, () => this._onDidInputChange.fire()));
+            this._disposables.add(addDisposableListener(this.input, EventType.FOCUS, () => {
+                this.domNode.style.outlineWidth = '1px';
+                this.domNode.style.outlineStyle = 'solid';
+                this.domNode.style.outlineOffset = '-1px';
+                this.domNode.style.outlineColor = 'var(--vscode-focusBorder)';
+            }));
+            this._disposables.add(addDisposableListener(this.input, EventType.BLUR, () => {
+                this.domNode.style.outline = 'none';
+            }));
         }
         return this._domNode;
     }
+    get input() {
+        assertType(this._inputNode);
+        return this._inputNode;
+    }
+    get button() {
+        assertType(this._buttonNode);
+        return this._buttonNode;
+    }
+    get buttonState() {
+        return this._buttonState;
+    }
+    setSparkleButton() {
+        this._buttonState = 'sparkle';
+        this._sparkleIcon ??= renderIcon(Codicon.sparkle);
+        clearNode(this.button);
+        this.button.appendChild(this._sparkleIcon);
+        this.button.setAttribute('aria-label', 'Generating new name suggestions');
+        this._buttonHover?.update(this._buttonGenHoverText);
+        this.input.focus();
+    }
+    setStopButton() {
+        this._buttonState = 'stop';
+        this._stopIcon ??= renderIcon(Codicon.primitiveSquare);
+        clearNode(this.button);
+        this.button.appendChild(this._stopIcon);
+        this.button.setAttribute('aria-label', 'Cancel generating new name suggestions');
+        this._buttonHover?.update(this._buttonCancelHoverText);
+        this.input.focus();
+    }
     dispose() {
-        this._onDidChange.dispose();
         this._disposables.dispose();
     }
 }
@@ -553,6 +669,7 @@ class RenameCandidateView {
     static { this._PADDING = 2; }
     constructor(parent, fontInfo) {
         this._domNode = document.createElement('div');
+        this._domNode.className = 'rename-box rename-candidate';
         this._domNode.style.display = `flex`;
         this._domNode.style.columnGap = `5px`;
         this._domNode.style.alignItems = `center`;

package/vscode/src/vs/editor/contrib/sectionHeaders/browser/sectionHeaders.js

@@ -49,6 +49,11 @@ let SectionHeaderDetector = class SectionHeaderDetector extends Disposable {
         this._register(this.editor.onDidChangeModelContent(e => {
             this.computeSectionHeaders.schedule();
         }));
+        this._register(editor.onDidChangeModelTokens((e) => {
+            if (!this.computeSectionHeaders.isScheduled()) {
+                this.computeSectionHeaders.schedule(1000);
+            }
+        }));
         this.computeSectionHeaders = this._register(( new RunOnceScheduler(() => {
             this.findSectionHeaders();
         }, 250)));