Merge pull request #211260 from microsoft/ulugbekna/rename-ftw

Fix rename suggestions UI inconsistencies
This commit is contained in:
Ulugbek Abdullaev 2024-04-24 16:48:03 +02:00 committed by GitHub
commit f752545864
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 41 additions and 6 deletions

View file

@ -28,6 +28,24 @@
outline: none;
}
.monaco-editor .rename-box .rename-suggestions-button {
display: flex;
align-items: center;
padding: 3px;
background-color: transparent;
border: none;
border-radius: 5px;
cursor: pointer;
}
.monaco-editor .rename-box .rename-suggestions-button:hover {
background-color: var(--vscode-toolbar-hoverBackground)
}
.monaco-editor .rename-box .rename-candidate-list-container .monaco-list-row {
border-radius: 2px;
}
.monaco-editor .rename-box .rename-label {
display: none;
opacity: .8;

View file

@ -6,6 +6,9 @@
import * as dom from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import * as aria from 'vs/base/browser/ui/aria/aria';
import { IUpdatableHover } from 'vs/base/browser/ui/hover/hover';
import { getBaseLayerHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegate2';
import { getDefaultHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegateFactory';
import { renderIcon } from 'vs/base/browser/ui/iconLabel/iconLabels';
import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
import { List } from 'vs/base/browser/ui/list/listWidget';
@ -28,6 +31,7 @@ import { Position } from 'vs/editor/common/core/position';
import { IRange, Range } from 'vs/editor/common/core/range';
import { ScrollType } from 'vs/editor/common/editorCommon';
import { NewSymbolName, NewSymbolNameTag, NewSymbolNameTriggerKind, ProviderResult } from 'vs/editor/common/languages';
import * as nls from 'vs/nls';
import { localize } from 'vs/nls';
import { IContextKey, IContextKeyService, RawContextKey } from 'vs/platform/contextkey/common/contextkey';
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
@ -366,6 +370,9 @@ export class RenameWidget implements IRenameWidget, IContentWidget, IDisposable
}
}
/**
* @param requestRenameCandidates is `undefined` when there are no rename suggestion providers
*/
getInput(
where: IRange,
currentName: string,
@ -522,6 +529,7 @@ export class RenameWidget implements IRenameWidget, IContentWidget, IDisposable
const candidates = this._requestRenameCandidatesOnce(triggerKind, this._renameCandidateProvidersCts.token);
if (candidates.length === 0) {
this._inputWithButton.setSparkleButton();
return;
}
@ -659,6 +667,7 @@ class RenameCandidateListView {
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);
@ -869,6 +878,9 @@ class InputWithButton implements IDisposable {
private _domNode: HTMLDivElement | undefined;
private _inputNode: HTMLInputElement | undefined;
private _buttonNode: HTMLElement | undefined;
private _buttonHover: IUpdatableHover | undefined;
private _buttonGenHoverText: string | undefined;
private _buttonCancelHoverText: string | undefined;
private _sparkleIcon: HTMLElement | undefined;
private _stopIcon: HTMLElement | undefined;
@ -895,14 +907,14 @@ class InputWithButton implements IDisposable {
this._domNode.appendChild(this._inputNode);
this._buttonNode = document.createElement('div');
this._buttonNode.style.display = 'flex';
this._buttonNode.style.alignItems = 'center';
this._buttonNode.style.padding = '3px';
this._buttonNode.style.backgroundColor = 'transparent';
this._buttonNode.style.border = 'none';
this._buttonNode.style.borderRadius = '5px';
this._buttonNode.className = 'rename-suggestions-button';
this._buttonNode.setAttribute('tabindex', '0');
this._buttonGenHoverText = nls.localize('generateRenameSuggestionsButton', "Generate new name suggestions");
this._buttonCancelHoverText = nls.localize('cancelRenameSuggestionsButton', "Cancel");
this._buttonHover = getBaseLayerHoverDelegate().setupUpdatableHover(getDefaultHoverDelegate('element'), this._buttonNode, this._buttonGenHoverText);
this._disposables.add(this._buttonHover);
this._domNode.appendChild(this._buttonNode);
// notify if selection changes to cancel request to rename-suggestion providers
@ -950,6 +962,8 @@ class InputWithButton implements IDisposable {
this._sparkleIcon ??= renderIcon(Codicon.sparkle);
dom.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();
}
@ -958,6 +972,8 @@ class InputWithButton implements IDisposable {
this._stopIcon ??= renderIcon(Codicon.primitiveSquare);
dom.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();
}
@ -977,6 +993,7 @@ class RenameCandidateView {
constructor(parent: HTMLElement, fontInfo: 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`;