1603718 - Implement basic version of a command menu

Status: ASSIGNED

(DevTools :: General, enhancement, P3)

Description

[Sebastian Zartner [:sebo]]

This bug is meant to implement a basic version of the command menu mentioned in bug 1603713.

The menu should consist of a list of commands and a filter field which overlay the current panel. It should include the basic functionally of opening the menu via a keyboard shortcut (probably Ctrl+Shift+P) and the general DevTools menu.

The commands list needs to be scrollable, navigatable via mouse and keyboard (and maybe touch) and filterable.

The filter field should at least allow to match commands by ignoring the case and any spaces in the command's words. E.g. entering showd should match a command called "Show Debugger".

Clicking a command or pressing Enter when it's selected executes it and closes the command menu.

The commands that should initially be supported are one-off commands, i.e. commands that can be called directly without options. For example, those tasks may include global ones like panel navigation, preference toggling, or reloading the page as well as panel-specific actions like clearing the console or deactivate all JavaScript breakpoints. In preparation for easy extensibility, any panel-specifc commands should be registered by the panels themselves.

The command palette implemented in the Debugger panel can serve as a good starting point, UI wise, and might be reused for this purpose.

Sebastian

Comment 1

[Julian Descottes [:jdescottes]]

Some related items:

• discussion around handling ctrl/cmd+P in devtools: https://github.com/firefox-devtools/ux/issues/82
• bug (landed) to add telemetry for accidental ctrl/cmd+P usage: https://bugzilla.mozilla.org/show_bug.cgi?id=1567497
• bug (open) to make the Debugger ctrl/cmd+P global when DevTools are open: https://bugzilla.mozilla.org/show_bug.cgi?id=1567550

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 3

[Sebastian Zartner [:sebo]]

Just a quick heads up. I've started playing a bit around with this and already could get the commands registration and execution to work. So far there is no command menu yet, the commands are directly executed by pressing Ctrl+Shift+P.
Once I have something proper including a simple version of the command menu, I'll upload the patch in order to get some feedback.

Sebastian

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Sebo, as we discussed it this week, feel free to upload you WIP patch here so we can discuss about it :)

Comment 5

[Sebastian Zartner [:sebo]]

Attachment: WIP: Bug 1603718 - Implemented a basic command menu into the DevTools. r=nchevobbe

This is a very basic WIP patch for a command menu. It registers the DevTools-wide keyboard shortcut Cmd+Shift+P/Ctrl+Shift+P which opens the menu as a stacked <div>. The menu is based on a new Modal dialog which is intended to be a general feature that can be used for different kinds of popups. For testing purposes, the menu includes two commands for toggling between the light and dark theme.

There are still many ToDos (might be incomplete):

• Properly implement the Modal component so it can be closed/dismissed
• Implement the search logic
• Add keyboard control
• Style everything nicely
• Add a preference to further implement the feature behind it
• Add more commands
• Add an option to theh menu to be able to also access it from there
• Fix ESLint issues
• Add tests

Comment 6

[Sebastian Zartner [:sebo]]

Hi Nicolas, here it is. It was lying around for several months now and the implementation is very rudimentary, so please bear with me!
Furthermore, please note that the UI/UX still needs to be discussed. Victoria created some nice mockups for it at some point. Those differ a lot to what other tools have, though.

Your feedback to the current implementation and whether that's generally the right approach is greatly appreciated!

Merry Christmas and a Happy New Year 2022!

Sebastian