Improve letterpress shortcuts

[joaomoreno]

First:

• What does Open File in Folder mean? Why not Quick Open?
• Why is Move Lines Up/Down in there? As a matter of fact, why are Add Cursors and Open Terminal too? We should just give the user the essential to get started, not random commands that make us look cool.

Finally, a little bit of styling care goes a long way:

[chrmarti]

Is this Windows? (The keybindings display better on OSX, will need to check why.)

Quick Open seems at least as opaque to new users if not more than Open File in Folder. We should still try to think of a better name. The command palette uses Go to File....

We picked the commands by looking at which are used the most, yet not trivial like clipboard actions.

[joaomoreno]

Also on OS X it looks odd as the format is something like: this or that or these. It would look much better if each shortcut is isolated visually instead of grammatically.

Go to File is a good alternative.

[bgashler1]

@joaomoreno you mentioned style; what would you like to see different?

[bgashler1]

For new users, it would be nice to have the most essential commands only. Chances are they are not going to remember about the moving lines up/down right away and stuff. It would be cool if down the road we could progressively introduce more advanced commands that may keep this area fresh and useful.

[joaomoreno]

@bgashler1 Notice the screenshot in the first post.

Something like Ctrl Shift P F1 is so much better than something like Ctrl+Shift+P, F1.

[bgashler1]

@joaomoreno ah, I see. I personally like the kbd tag as well. We had something kind of like that an earlier draft. Not sure what you think...

But I think some of the team preferred just the text.

Maybe your darker approach would be more appealing to them, though.

On a side note, shouldn't it be Ctrl+Shift+P or F1 instead of each keybinding appearing together in one whole <kbd></kbd> tag?

[joaomoreno]

I really don't think it should. I would save separation for chording.

[chrmarti]

• On Windows: That is just how the keybindings are spelled out, also in the command palette.
• this or that or these: Tracked as Watermark command for up/down shouldn't use "or" #12797 and Keybindings watermark on Linux is quite complex #12862
• The UX meeting hasn't brought forward a clear winner for the shortcut styling. I would keep it as is, @bgashler1 ?
• I will update the text from "Command Palette" to "Go to File" as part of this issue.

[joaomoreno]

Please don't keep it as is. At least use a monospace font.

[bgashler1]

@joaomoreno IMO, I don't think the monospaced font looks quite right.

Also we are using Segoe UI font in the command palette

Which also is partly why we ended up not including the block background behind the keys in the initial implementation of this (even though it was originally designed as such, as shown in above comment).

However, here's what it looks like with the block decorations.

You'll notice the decorations had to be darker than the empty workspace (for accessibility reasons we cannot afford any less contrast on the text, or else it's not compliant). This color is actually the same color as the letterpress.

---

Do we want to go forward with this? @chrisdias, if I remember right, I think you originally wanted just the plain text. @bpasero care to chime in?

If we do want to do this, I would need @chrmarti to put in some logic that puts spans around each keybinding (not the "/"s) and the spans' class could be named say "keybinding-block".

Then the decoration CSS is

.keybinding-block {
    background: #171717;
    padding: 3px;
    border-radius: 2px;
    display: inline-block;
}

And we would adjust the table's border spacing to border-spacing: 13px 13px

[joaomoreno]

Right about monospace! Love your last screenshot!

[chrmarti]

The contrast between block decorations and keybindings is too low for me to be useful. If we want to add these, I'd suggest to find a way to increase that.

[joaomoreno]

Make sure you try it in all the themes, since each theme has a different background... We're just picking the worst example here.

There are other ways to show contrast, like a border, just like in the following example:

[bpasero]

Imho the spacing now looks bad on Windows:

[chrmarti]

Fixed the letter-spacing on Windows and Linux. No further action planned for September. Thanks.