From ab78bc61ba7144ac4addb5338ccb47cef170d343 Mon Sep 17 00:00:00 2001 From: Tim van der Lippe Date: Mon, 21 Feb 2022 15:13:08 +0000 Subject: [PATCH] Close arguments hints tooltip when finished The console prompt is one of two places (the other being the edit breakpoint prompt) that uses arguments hints. However, when the user would show the arguments hints and be finished with it (e.g. hitting escape or entering a command), they wouldn't properly hide. The functionality is implemented in `cursor_tooltip`, which defines the two view effects that trigger opening/closing the tooltip. However, there was no outside access to these effects and they were not hooked up to the corresponding view (in this case residing in `ConsolePrompt.ts`). To make sure that the ConsolePrompt doesn't learn too much about the inner workings of the text editor, we expose a separate function on the JavaScript functionality of the editor. It dispatches the close effect on the view, which ensures that the arguments hints tooltip is properly hidden. This is also true for entering a command, which is implemented in `handleEnter`. Lastly, update the internal cursor_tooltip plugin to use private methods, to clearly denote what is part of the public API (`update`) and what isn't (the rest). R=yangguo@chromium.org Fixed: 1299196, 1299186 Change-Id: I650c25f42564be8992a849b6b8deefff51ff7826 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3477109 Auto-Submit: Tim Van der Lippe Reviewed-by: Yang Guo Commit-Queue: Yang Guo --- front_end/panels/console/ConsolePrompt.ts | 8 ++++++++ .../ui/components/text_editor/cursor_tooltip.ts | 13 +++++++------ front_end/ui/components/text_editor/javascript.ts | 7 ++++++- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/front_end/panels/console/ConsolePrompt.ts b/front_end/panels/console/ConsolePrompt.ts index 8d805220c9..dc5aa7aac9 100644 --- a/front_end/panels/console/ConsolePrompt.ts +++ b/front_end/panels/console/ConsolePrompt.ts @@ -209,6 +209,13 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin this.moveHistory(1)}, {mac: 'Ctrl-p', run: (): boolean => this.moveHistory(-1, true)}, {mac: 'Ctrl-n', run: (): boolean => this.moveHistory(1, true)}, + { + key: 'Escape', + run: (): boolean => { + TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor); + return true; + }, + }, { key: 'Enter', run: (): boolean => { @@ -259,6 +266,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin { if (await this.enterWillEvaluate()) { this.appendCommand(this.text(), true); + TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor); this.editor.dispatch({ changes: {from: 0, to: this.editor.state.doc.length}, scrollIntoView: true, diff --git a/front_end/ui/components/text_editor/cursor_tooltip.ts b/front_end/ui/components/text_editor/cursor_tooltip.ts index 8b90e2aee7..1274edad74 100644 --- a/front_end/ui/components/text_editor/cursor_tooltip.ts +++ b/front_end/ui/components/text_editor/cursor_tooltip.ts @@ -4,11 +4,12 @@ import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js'; +export const closeTooltip = CodeMirror.StateEffect.define(); + export function cursorTooltip( source: (state: CodeMirror.EditorState, pos: number) => Promise<(() => CodeMirror.TooltipView)|null>, ): CodeMirror.Extension { const openTooltip = CodeMirror.StateEffect.define<() => CodeMirror.TooltipView>(); - const closeTooltip = CodeMirror.StateEffect.define(); const state = CodeMirror.StateField.define({ create() { @@ -41,18 +42,18 @@ export function cursorTooltip( update(update: CodeMirror.ViewUpdate): void { this.updateID++; if (update.transactions.some(tr => tr.selection) && update.state.selection.main.empty) { - this.scheduleUpdate(update.view); + this.#scheduleUpdate(update.view); } } - scheduleUpdate(view: CodeMirror.EditorView): void { + #scheduleUpdate(view: CodeMirror.EditorView): void { if (this.pending > -1) { clearTimeout(this.pending); } - this.pending = window.setTimeout(() => this.startUpdate(view), 50) as unknown as number; + this.pending = window.setTimeout(() => this.#startUpdate(view), 50) as unknown as number; } - startUpdate(view: CodeMirror.EditorView): void { + #startUpdate(view: CodeMirror.EditorView): void { this.pending = -1; const {main} = view.state.selection; if (main.empty) { @@ -60,7 +61,7 @@ export function cursorTooltip( void source(view.state, main.from).then(tooltip => { if (this.updateID !== updateID) { if (this.pending < 0) { - this.scheduleUpdate(view); + this.#scheduleUpdate(view); } } else if (tooltip) { view.dispatch({effects: openTooltip.of(tooltip)}); diff --git a/front_end/ui/components/text_editor/javascript.ts b/front_end/ui/components/text_editor/javascript.ts index 6b6e968ba1..9286ca1c85 100644 --- a/front_end/ui/components/text_editor/javascript.ts +++ b/front_end/ui/components/text_editor/javascript.ts @@ -7,7 +7,8 @@ import * as Formatter from '../../../models/formatter/formatter.js'; import * as JavaScriptMetaData from '../../../models/javascript_metadata/javascript_metadata.js'; import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js'; import * as UI from '../../legacy/legacy.js'; -import {cursorTooltip} from './cursor_tooltip.js'; + +import {closeTooltip, cursorTooltip} from './cursor_tooltip.js'; export function completion(): CodeMirror.Extension { return CodeMirror.javascript.javascriptLanguage.data.of({ @@ -424,6 +425,10 @@ export function argumentHints(): CodeMirror.Extension { return cursorTooltip(getArgumentHints); } +export function closeArgumentsHintsTooltip(view: CodeMirror.EditorView): void { + view.dispatch({effects: closeTooltip.of(null)}); +} + async function getArgumentHints( state: CodeMirror.EditorState, pos: number): Promise<(() => CodeMirror.TooltipView)|null> { const node = CodeMirror.syntaxTree(state).resolveInner(pos).enterUnfinishedNodesBefore(pos);