Refined-github: Add Refined GitHub shortcuts to the shortcuts help

[hkdobrev]

We are adding additional keyboard shortcuts, but the shortcuts modal which pops up when you press ? does not list them.

I think adding shortcuts should always include documenting them as it would increase visibility and therefore usage.

Key characteristics of a good keyboard shortcut:

• it's intuitive
• it's discoverable

[sindresorhus]

Then we should make the shortcut panel itself more discoverable too. Most people I talk to doesn't know about it.

[fregante]

I myself thought of pressing ? only literally yesterday. I thought of adding RGH's shortcuts there but its discoverability made the idea less appealing.

[hkdobrev]

I guess we can first tackle adding the shortcuts in the shortcut panel which would cover at least some material part of the power users and we can think of how to make the panel more discoverable separately.

[shroudedcode]

I've started working on this and got the following things to work:

• the opening of the shortcuts modal is detected reliably
• new shortcuts can be added and appear without visual delay
  

---

Now I need some input on design decisions like:

• Where and how should the shortcuts be defined in the code?
  
  
  
  • Inside an object inside the features/add-shortcut-help.js file?
  
  
  • Inside the respective feature file using a "register shortcut" function?
  
  
• Should RGH-specific shortcuts be highlighted in some way?
  
  
  
  • Maybe using a little purple dot that shows Added by Refined GitHub on hover?
  
  
• Should RGH make existing shortcuts consistent?
  
  
  
  • Replace ctrl enter with ctrl enter?
  
  
• Should RGH improve the layout of the existing shortcuts and how?
  
  
  
  • By Show-ing All by default?
  
  
  • By evenly distributing the groups across all three .column.one-third's?
  
  

[fregante]

Inside the respective feature file using a "register shortcut" function?

This, so it's automatically called _where it's needed_ and _when it's needed_ and _if it's enabled_. Also changing a shortcut wouldn't need to happen in two different files.

Should RGH-specific shortcuts be highlighted in some way?

I think they should be in their own section to let the user know that they only work because RGH is active. Other features generally work _if they're visible,_ shortcuts don't have the same privilege.

[hkdobrev]

Should RGH-specific shortcuts be highlighted in some way?

I think they should be in their own section to let the user know that they only work because RGH is active. Other features generally work if they're visible, shortcuts don't have the same privilege.

An alternative would be the shortcuts would be in respective sections where it makes sense with the RG icon next to them (because branding 😂).

I think this would be more sensible for 2 reasons:

• Related shortcuts are grouped together like they are now which reduces the chance of finding the shortcut you need and not missing it.
• GitHub shortcuts modal show different shortcut groups on different pages. E.g. the n/p shortcuts for navigating commits on PRs are not listed in the default shortcuts view when not in a PR Files changed tab. So we could continue doing that, by relying on GitHub to show/hide different sections and would just append to them.

[shroudedcode]

An alternative would be the shortcuts would be in respective sections

I'm currently implementing exactly that because the extra section made it quite hard to find shortcuts relevant to the current page.

[shroudedcode]

This is what the shortcuts help now looks like:

I've tried out something new:

• Hidden groups are now always shown but have their opacity reduced (unless you hover over them).
• The huge "Projects"-related groups are removed unless the user is on a projects page.
• The now redundant (and quite confusing) "Show All" button is removed.

I think this makes sense because ...

• users can learn a new shortcut without looking for a specific one
• users can still easily find shortcuts relevant to their current page
• the now "fuller" shortcuts modal looks a lot more powerful :fist_raised:
  
  
  
  • (the old one might make users think there are only a few shortcuts)
  
  

[hkdobrev]

@shroudedcode Awesome! Looks very promising! Could you open a PR to continue the discussion on implementation? Thank you! ❤️

[shroudedcode]

@hkdobrev Here you go: #1107

[vanniktech]

The y shortcut is being listed twice.

Are the shortcuts site aware meaning that you know which one will work from the page you're viewing or is it trial and error?

[shroudedcode]

@vanniktech The ones added by Refined GitHub are only added after the feature was enabled so they should always work. The shortcuts by GitHub should work when the group is highlighted (full opacity) – this is using the default behavior with the change that "irrelevant" groups are not completely hidden.