Provide more shortcuts on the translation editor

[unho]

Depends on:

• [x] #2270 Keyboard shortcuts not working on translate page
• [ ] #2272 Usability issues with Pootle TM

The current shortcuts are not enough for a complete translation workflow using just only the keyboard. Among others, it is not possible to:

• Copy the source to the translation field
• Copy some of the TM matches
• Accept or Reject suggestions
• Go to a given unit (currently broken)
• Change current filter

Also for new features:

• Copy terminology match (this requires a separate bug)
• Copy placeables (this requires a separate bug)
• Perform a concordance search
• Mark as approved or unapproved when reviewing

[dwaynebailey]

The problem with shortcuts has always been them interfering with the platforms shortcuts. So we'll need to find some way, hopefully a jquery library, that makes this easier.

[unho]

Don't forget to update http://docs.translatehouse.org/projects/pootle/en/latest/features/shortcuts.html

[iafan]

Related issue: https://github.com/translate/pootle/issues/3871

[iafan]

I've spent quite some time today figuring out the most convenient combinations that would work on both Mac and Windows. Here's the demo that I encourage everybody to try: http://jsfiddle.net/o7nzdbds/16/

It covers both existing editor shortcuts and some convenient new ones (but not all the shortcuts outlined in this case initially) Nevertheless, it should be a good starting point. It uses a pretty nifty Mousetrap library (https://craig.is/killing/mice) that allows one to define shortcut sequences.

[khaledhosny]

I tried the demo and I can use all the shortcuts on the Mac machine.

[iafan]

Thanks for confirming, @khaledhosny! What browser did you use (just for the record)?

[khaledhosny]

I tested Firefox, Chrome and Safari.

[julen]

I like mousetrap: small, simple, no external deps and available on npm.

Also, it's possible to use mod instead of having to bind ctrl and cmd separately.

[unho]

Tested with on Ubuntu 14.04 using Chromium 43, Firefox 40 and Opera 31. This are my results:

• Work:
  • ctrl+up
  • ctrl+down
  • ctrl+enter
  • ctrl+shift+enter
  • ctrl+space
  • esc space
  • esc esc
  • esc enter
  • esc backspace
• Problematic:
  • ctrl+/ is difficult to press since the / key is only present on keypad, and not all keyboards have keypad. But luckily ctrl+space does work.
• Don't work:
  • ctrl+; since to get ; in spanish keyboard you have to press shift+,.

There some shortcuts that are missing:

• ctrl+shift+space: toggle translate/suggest mode
• ctrl+shift+S: go to search field

Some other missing shortcuts that don't work on my browser:

• ctrl+shift+U: Go to current string number

I suggest to try to align shortcuts with Virtaal ones when possible (http://docs.translatehouse.org/projects/virtaal/en/latest/cheatsheet.html) and don't forget about getting back placeables to Pootle.

[khaledhosny]

Also, it's possible to use mod instead of having to bind ctrl and cmd separately.

I suggest doing this to avoid the ctrl shortcuts on Mac at all.

[khaledhosny]

I suggest to try to align shortcuts with Virtaal ones when possible (http://docs.translatehouse.org/projects/virtaal/en/latest/cheatsheet.html) and don't forget about getting back placeables to Pootle.

+1

[iafan]

Here's the updated revision where I tried to address all your comments: http://jsfiddle.net/o7nzdbds/20/

[unho]

As I told on my last comment ctrl+shift+U does not work for me while being on the textarea. The result I get is an underlined U. The rest of the shortcuts work on Ubuntu 14.04 using Chromium 43, Firefox 40 and Opera 31.

[iafan]

@unho, can you please test if each of these work for you?

Mousetrap.bind(['mod+*'], log);
Mousetrap.bind(['shift+*'], log);
Mousetrap.bind(['mod+shift+*'], log);

[unho]

mod+* triggers ctrl++ which is used by the browser (to get * I have to type shift++). Using the * from keypad doesn't work.

These just don't work:

Mousetrap.bind(['shift+*'], log);
Mousetrap.bind(['mod+shift+*'], log);

[iafan]

@unho, how about this?

Mousetrap.bind(['esc tab'], log);

[iafan]

Meanwhile, some HTML/CSS snippets for keyboard help rendering:

http://jsfiddle.net/fp7qepqr/

[unho]

Mousetrap.bind(['esc tab'], log);

It works (Ubuntu 14.04 using Chromium 43, Firefox 40 and Opera 31).

Meanwhile, some HTML/CSS snippets for keboard help rendering:

http://jsfiddle.net/fp7qepqr/

Perhaps it is worth noting that before 2.6 became a transitional release we added in the editor a popup listing some shortcuts: f3c03781

[iafan]

Ok, I updated the fiddle with esc tab: http://jsfiddle.net/iafan/o7nzdbds/21/

Now I hope it will working for everybody.

[iafan]

Perhaps it is worth noting that before 2.6 became a transitional release we added in the editor a popup listing some shortcuts: f3c0378

Good, we might want to reuse some of this code. However, I don't think we want to expose shortcuts for translation. Instead, we need to translate individual key names (like 'Shift' or 'Backspace'), and then render combinations based on the localized copies of the keys, and also depending on whether we're on Mac or on Linux/Windows.

[iafan]

Alternative (less visually dense) button rendering: http://jsfiddle.net/iafan/fp7qepqr/1/

[julen]

Great to see this moving forward. Here are some general thoughts/comments in no particular order:

It's unfortunate that Virtaal and OS X are using option/alt + left/right for different text-related purposes and they clash: navigating through placeables vs. navigating through textarea words. OS X's shortcut is very useful to be dismissed.

On the other hand, the proposed esc + pagedown/pageup/home variants are difficult to achieve in a laptop, where in most cases you have to press the function key — in Mac it's even worse: the regular user needs to make a guess for the key, since these are not labeled.

It's necessary to highlight that Google Translate is not the only MT provider available for Pootle, and that users can have more than a single provider displayed for a unit at a time.

Also, I believe it's more important to first cover some widely-used actions such as copying terminology or TM matches (which can be multiple).

[unho]

On the other hand, the proposed esc + pagedown/pageup/home variants are difficult to achieve in a laptop, where in most cases you have to press the function key — in Mac it's even worse: the regular user needs to make a guess for the key, since these are not labeled.

I must say that despite I reported the shortcuts to work, some of them are difficult to type, for example esc+tab.

I also realize that perhaps it is not possible to get some set of shortcuts that works everywhere given the combinations of OS, browser and keyboard layouts out there.

Also, I believe it's more important to first cover some widely-used actions such as copying terminology or TM matches (which can be multiple).

I fully agree. Regarding terminology I would really love Pootle to mimic Virtaal behavior where terminology and placeables seem to be one together. Copying TM results is also important.

Other possible scenarios that might need to be considered are traversing/(un)muting checks and traversing/accepting/rejecting suggestions. I fail to see the importance of dealing with translations in timeline.

Alternative (less visually dense) button rendering: http://jsfiddle.net/iafan/fp7qepqr/1/

I prefer this to the former version.

[iafan]

ok, given these activities (all of which involve multiple items), which do you think are the most important?

1. using keyboard to accept suggestions
2. using keyboard to reject suggestions
3. using keyboard to paste suggestions for further editing
4. using keyboard to revert translations to some past variants
5. using keyboard to paste similar translations
6. using keyboard to paste terminology

Obviously, there's no easy way to bind all of this to short keyboard combinations. We have an option to use esc 1 ... esc 0 pretty quick combinations to quickly select something from the list of options, and I wonder what you would allocate these to.

I also assume having combinations like esc <modifier> 1...esc <modifier> 0 is not something people will be able to use effectively.

[iafan]

It's unfortunate that Virtaal and OS X are using option/alt + left/right for different text-related purposes and they clash: navigating through placeables vs. navigating through textarea words. OS X's shortcut is very useful to be dismissed.

would shift+left/right or ctrl+left/right works on Mac? On other systems we would still use alt+left/right.

[unho]

ok, given these activities (all of which involve multiple items), which do you think are the most important?

My proposed list, most important first:

5. using keyboard to paste similar translations

Assuming that "similar translations" means "TM results".

6. using keyboard to paste terminology

But note I would like this to be achieved using same shortcuts as for placeables, like in Virtaal. Placeables would be between 5) and 6).

1. using keyboard to accept suggestions
2. using keyboard to paste suggestions for further editing
3. using keyboard to reject suggestions
4. using keyboard to revert translations to some past variants

[unho]

alt+left/right are used by some browsers to go to previous/next page, so not a viable option.

[julen]

would shift+left/right or ctrl+left/right works on Mac?

I'm afraid they wouldn't: shift+left/right allows to select text using the keyboard, ctrl+left/right switches workspaces.

[iafan]

To keep things rolling, how about we implement this subset of shortcuts first? This is a subset of shortcuts that seem to work for anyone and require no extra client-side logic. With this step, we will just make the existing shortcuts work on all platforms, and add a few new easy-to-implement ones.

Mousetrap.bind(['mod+up'], function(e) { log(e, 'previous unit'); });
Mousetrap.bind(['mod+down'], function(e) { log(e, 'next unit'); });
Mousetrap.bind(['mod+enter'], function(e) { log(e, 'submit translation'); });
Mousetrap.bind(['mod+shift+enter'], function(e) { log(e, 'submit translation (and stay on the unit)'); });
Mousetrap.bind(['ctrl+shift+space'], function(e) { log(e, 'toggle submit/suggest mode'); }); // command-shift-space doesn't work
Mousetrap.bind(['mod+/', 'ctrl+space'], function(e) { log(e, 'toggle needs work'); });

Mousetrap.bind(['mod+shift+s', 'esc backspace'], function(e) { log(e, 'search'); });

Mousetrap.bind(['alt+down'], function(e) { log(e, 'copy from source'); }); // copy from the main language for now

Mousetrap.bind(['esc space'], function(e) { log(e, 'toggle raw mode'); });
Mousetrap.bind(['esc enter'], function(e) { log(e, 'google translate'); });

[unho]

+1