Add a way to bind a keybinding for a command from the F1 list

[alexdima]

I think we've discussed this, but we've never written it down.

IMHO, it would be very helpful to have an alternative action next to each command in the F1 list (similar how open to the side is an alternative action in the ctrl+p file list) that when executed would bring up the keybindings editor with the action selected and will execute the "edit" action on that command.

e.g. I use Git: Stage Selected Ranges and today I always run it from the F1 list because it is not bound. It would be nice to have an action that allows me to record a keybinding for it such that I can easily map it.

[bpasero]

This is relatively simple, I just helped Dirk to get actions into the task quick open.

@sandy081 if there is API I can use to do what @alexandrudima is suggesting, I can add such an action. E.g. it could show up with a gear icon similar to how Dirk is doing it for tasks:

However we also have to think about how often people are using the commands picker and how many want such a prominent action.

[sandy081]

@bpasero There is no API to show the keybinding defining widget. But I can do it.

[bpasero]

With the new quick access for commands this is relatively easy to add by adding the following:

buttons: [{
  iconClass: 'codicon-gear',
  tooltip: localize('customizeTask', "Configure Keybinding")
}],
trigger: () => {
  // Open keybindings editor etc...
  return TriggerAction.CLOSE_PICKER;
}

to this object:

vscode/src/vs/platform/quickinput/browser/commandsQuickAccess.ts

Line 138 in b5a2ab1

commandPicks.push({

It looks a bit overcrowded though:

[alexdima]

This is cool! But I agree it looks funny when the keybindings are pushed out of the way.

[alefragnani]

If you leave the gear icon space “reserved”, the funny behavior would go away. But you end up with less space available for command description/shortcuts.

Another idea would be adding the gear icon at the top of the QuickPick, similar to what you have while using multi-step QuickPicks. But if I remember correctly, this would add a Header to the QuickPick 😕 .

Maybe @misolori has some ideas?

[miguelsolorio]

@bpasero could we change the order and place the gear on the left-most side of the keybindings?

[bpasero]

There is currently just one fixed location for actions in the quick pick widget, we would have to add another action bar. Maybe post a screen shot from Figma what you think about to check how it looks?

[miguelsolorio]

Something like this:

[bpasero]

Yes, that is doable. We currently create the container for keybindings first and then the action bar but we can probably flip that:

vscode/src/vs/base/parts/quickinput/browser/quickInputList.ts

Line 133 in 5cb962b

const keybindingContainer = dom.append(row1, $('.quick-input-list-entry-keybinding'));

I am not sure though that having an action at varying positions is a good idea for users to use.

[miguelsolorio]

Another alternative, hold down option (or some other key) and we hide the keybinding and show a blue "Set/Change Keybinding"? Less discoverable but also doesn't clutter up the UI. We do this in other place like closing multiple tabs.

Personally, I'm not sure how useful it is to have this but using it via option provides the best of both worlds.

[gjsjohnmurray]

Any way the gearwheel could replace the existing keybinding symbols when the mouse goes over one of them?

[bpasero]

Any way the gearwheel could replace the existing keybinding symbols when the mouse goes over one of them?

That will be problematic for accessibility reasons we cannot do this only on mouse hover, it would have to be on the selected item as well. This would mean the selected (e.g. first) item would never show its keybinding, which imho defeats the purpose.

[sandy081]

Added Configure Keybinding button (Gear icon) to the commands quick pick -

Clicking on it opens the Keyboard Shortcuts Editor showing above command

User can configure keybinding for this command from the editor.