Command Palette for Che Editor

[gorkem]

Create a new command palette that can invoke command, actions, file navigation, symbol navigation, switch to terminal(s). This is basically a combination of Find Action, Navigate to File and command palette.

@slemeur is working on a more detailed and visually attractive definition of the feature.

[slemeur]

Goal

The ultimate goal of this issue is to allow the user to perform any kind of action within the IDE without having to move hands from the keyboard. This allows developers to be more efficient, go faster and feel more comfortable when using their tools.

The goal of this issue is to provide a unified command palette which will combine all the different palettes we already have for:

• Find Action
• Navigate to File
• The Command Palette

This way, user will have a single keyboard shortcut to remember - and from that keyboard shortcut, the user will be able to invoke any kind of actions in the IDE.

Notes on designs

The mockups attached in the issue are not final and opened to discussion. There are various parts in the styles and the layout that are not yet finalized (and part of a bigger UI work that we are targeting).
The current mockups allow engineering to visualize the concept, the features and various behaviors.

Details

Keyboard shortcut

We define the following keyboard shortcut for calling the command palette:

• Mac: cmd+P
• Others: ctrl+p

Focus in command palette

When the user is calling the command palette, the input text at the top is taking the focus automatically, so that the user can start to input for what he is looking for very quick.

Items in the list

The list is built from multiple sources:

• Actions: all the menu items that are accessible to the user from the main menubar.
• Commands: all the commands that are registered in the workspace.
• Files: all the files from projects in the workspace.

We will display categories, so that the user is able to understand from which category an item is from.
For all actions, we display the associated keyboard shortcut.

User can navigate with down and up arrows into the list of result. He can enter enter to proceed the execution of an actions or a command, or to open a selected file.

Filtering the list

We allow the user to search only into a certain category of results. For that, the user has to input the category filter first.

• >: allow to search only in the actions.
• #: allow to search in the workspace commands.
• ... : allow to search only for files.

By default, the placeholder is showing:
Enter '?' to get started or search for actions, commands or files

Empty state

When there are nothing input by the user, we display the recently opened files from the workspace. If there are no recently opened files we display the help (see next section)

Getting help on the command palette

The user can get help on the command palette.

• Search into actions, commands and files
• Type `>' to search only into actions
• Type `#' to search only into commands
• Type ... to search only into files

When the user select one of the item, it adds the filter into the input box.

[bmicklea]

Nice work @slemeur - a few comments:

• There's a chance with large projects that the file find will be slow, we should make sure that we start showing results in the auto-complete drop-down as they're found and continue to add them over time. This will necessitate some kind of "working" icon - perhaps the vibrating three bars we use for workspace starting positioned on the far right of the text input box.
• The term "actions" doesn't seem intuitive to me as an indicator of a menu item, but I'm not sure what to change it to...
• Love the idea of filters for the search, but for speed and ease-of-use we should have the keystroke used for each filter be a single character and not require the shift key if possible. Perhaps:
  • ' = actions
  • / = commands
  • ; = files
• Why does the user have to hit "?". It seems like when they hit Ctrl+P the help dropdown (shown in your last screenshot) could always appear and then disappear automatically when the first result comes in. If "?" brings up other kind of help then I think it should be listed in the dropdown not in the input bar itself.
• The input bar should just say "Start typing to find matches".
• Can you list the categories you envision and the order you think they should appear? I notice in the 2nd last screenshot you have "Recently Opened" which is a kind of "meta" category. Do we want Recently Opened? Or is Recently Changed better?

[vparfonov]

yes, nice catch @bmicklea we need think about pagination.

[gorkem]

I think this also means we can retire Assistant >Find Action and Assistant > Navigate to File and Assistant > Find Project Symbol menu items and the stuff behind those. Which leaves the Assistant top level menu item with 3 items out of one is the infamous generate effective POM. Should we think about retiring this top level menu completely?

[sr229]

here's a bit of a suggestion @bmicklea for this type of implementation:

After project is pulled, do a async task that builds an index then the command pallette would go through that index. Whenever there's a filechange or a project change, we only do a update from where the changes took place.

this prevents bottlenecks at large projects

[sr229]

@slemeur the Palette could use a bit more margin on the sides since its too close on the edge IMHO

[vparfonov]

Will add to the next sprint for analyzing in case we not ready to start developing this feature
@slemeur What you think about different behavior for searching files and classes? For example i want to found class HelloWorld.java but not file HelloWorld.js sholud we have different actions?

[slemeur]

@vparfonov In your use case, you are describing an advanced search capability. It's a great idea. Do you think we could handle regular expression when searching for files and classes?
In your example, that could be Hello*.java ?

[ppitonak]

Beware that ctrl+p shortcut is used for printing in both Firefox and Chrome and might confuse users.

[sr229]

instead of using CTRL+P, why not CTRL+SHIFT+P?

[gorkem]

@vparfonov Monaco editor comes with a command palette, so consider on your analysis whether resolving #5330 before this one makes sense?

[sr229]

@gorkem however the Monaco Pallette is F1 ( if I remember) to trigger it

you need to call it programmatically if you want to set it to CTRL+SHIFT+P or CTRL+P respectively

[skabashnyuk]

@gorkem @slemeur do you want to keep this issue?

[slemeur]

Closing as will be fixed with the switch to Theia IDE