Web Inspector: Control-backtick should focus on the console prompt

• Component: Web Inspector
• Status: RESOLVED FIXED

[Nikita Vasilyev]

This is a feedback from https://twitter.com/glenmaddern.

Esc key focuses on the console prompt line, unless:
— the text cursor is in a text field (e.g. the global search field at the top right corner, filter fields, etc.)
— the text cursor is in the styles sidebar
— the text cursor is inside of any CodeMirror view
— DOM node content/attribute is being edited in Elements
— there is a text selection
— <select> menu is opened
— autocomplete suggestion is opened
— a message in the Console tab is already selected (needs two Esc presses to focus on the prompt, not one)

The list goes on and on.

We need a keyboard shortcut that would just focus on the console prompt so one could press it with their eyes closed and start typing console commands, no matter which more they're in.

[Timothy Hatcher]

Sounds good, as long as escape still works. Does Chrome have a better one? Esc still works there with similar caveats. (Actually it just opens and closes the drawer, it doesn't show the Console in the drawer. Eww.)

[Nikita Vasilyev]

No, not really. Command-Option-J opens console and focuses on the prompt line if Chrome DevTools are closed. It closes the DevTools if it's already opened.

Esc doesn't trigger autocomplete in Chrome, so the issue is less severe. It can also open the split console when HTML/CSS/JS resource is being edited, unlike in WebKit Inspector.

[Nikita Vasilyev]

Chrome DevTools also has Control ~ (tilde), which does exactly what I have proposed. We should support it.

[Radar WebKit Bug Importer]

<rdar://problem/22304177>

[Devin Rousso]

Created attachment 259165 [details]
Patch

Just FYI, you can also press Option+Command+C to immediately switch to the console tab and focus the prompt.  It isn't as subtle as toggling the split console, but it works.

[Nikita Vasilyev]

Comment on attachment 259165 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=259165&action=review

Option+Command+C also doesn't work when:
— the text cursor is in a text field (e.g. the global search field at the top right corner, filter fields, etc.)
— the text cursor is in the styles sidebar
— the text cursor is inside of any CodeMirror view
— <select> menu is opened

> Source/WebInspectorUI/UserInterface/Base/Main.js:248
> +    this._quickConsoleKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Apostrophe, this.showSplitConsole.bind(this));

This focuses on the console prompt and opens the split console. I think we should just focus on the prompt, nothing else.

[Devin Rousso]

(In reply to comment #6)
> Option+Command+C also doesn't work when:
> — the text cursor is in a text field (e.g. the global search field at the
> top right corner, filter fields, etc.)
> — the text cursor is in the styles sidebar
> — the text cursor is inside of any CodeMirror view
> — <select> menu is opened

I am actually seeing Option+Command+C working in all but the <select> scenario.  It's bound in Main.js so it fires before everything else.  For the <select>, I don't think that there is anything we can do there since that is system behavior.

[Devin Rousso]

Created attachment 259278 [details]
Patch

[BJ Burg]

Comment on attachment 259278 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=259278&action=review

r=me

> Source/WebInspectorUI/ChangeLog:11
> +        Added a keyboard shortcut to focus the console prompt.

Please say here what the new keyboard shortcut *is*.

[Devin Rousso]

Created attachment 259281 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 259281 [details]
Patch

Clearing flags on attachment: 259281

Committed r188586: <http://trac.webkit.org/changeset/188586>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.