Bugzilla

@Geoff, could you review this? Tia.

@Alex, I'll file a screenshot in my next comment.
- I used GrayText color for shortcut display to reduce the noise of the shortcut info on the menuitems.
- I also added a bit more whitespace in front of the shortcut texts to disentangle them from the menuitem labels. Whitespace rocks! ;-)

I think we should do the same for all shortcut displays also in main menus (color and distance). What do you think?
- I have also changed the IDs of cut/copy/paste on this context menu, because we cannot have the same IDs multiple times in the same document. Could you check if rectifying that error has any adverse consequences?

@Richard, could you pls double-check the css and effects on other OS. Strangely this only changes some of the shortcut keys on main menu items, but not all. E.g. on composition's Edit menu, cut/copy/paste still have black shortcut text instead of GrayText.

Getting two shortcuts to display on one menuitem was entirely non-trivial, mixing XUL and Fluent, but after tweaking my getPrettyKey() function a bit and adding some <keys> for display purposes, I was able to continue exploiting ShortcutUtils.prettifyShortcut(keyElement) for correct localized display of shortcut keys.

Combining [rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) and [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) came in handy, allowing for lean callers:

getPrettyKey("key_ID1");
getPrettyKey("key_ID1", "key_ID2");
function getPrettyKey(...[keyId1, keyId2]) {...}

@Geoff, could you review this? Tia.

@Alex, I'll file a screenshot in my next comment.
- I used GrayText color for shortcut display to reduce the noise of the shortcut info on the menuitems.
- I also added a bit more whitespace in front of the shortcut texts to disentangle them from the menuitem labels. Whitespace rocks! ;-)

I think we should do the same for all shortcut displays also in main menus (color and distance). What do you think?
- I have also changed the IDs of cut/copy/paste on this context menu, because we cannot have the same IDs multiple times in the same document. Could you check if rectifying that error has any adverse consequences?

@Richard, could you pls double-check the css and effects on other OS. Strangely this only changes some of the shortcut keys on main menu items, but not all. E.g. on composition's Edit menu, cut/copy/paste still have black shortcut text instead of GrayText.

Getting two shortcuts to display on one menuitem was entirely non-trivial, mixing XUL and Fluent, but after tweaking my getPrettyKey() function a bit and adding some <keys> for display purposes, I was able to continue exploiting ShortcutUtils.prettifyShortcut(keyElement) for correct localized display of shortcut keys.

Combining [rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) and [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) came in handy, allowing for lean callers:

```javascript
getPrettyKey("key_ID1");
getPrettyKey("key_ID1", "key_ID2");
function getPrettyKey(...[keyId1, keyId2]) {...}
```