In Element Zapper, support Mac keyboards’ Delete key (#3770)

Override the Backspace key, not just the Delete key, as Mac keyboards have Backspace as the only delete key and label it Delete.

Source of key value: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values#Editing_keys

More background on Mac keyboard shortcuts: Mac keyboards can emulate Delete using fn+Delete, meaning Forward Delete, but Mac software does not use it except in text editing. When deletion is dangerous, Mac software requires holding a modifier key in conjuction with Delete, but I think it’s better to make deletion easy in this case.

This new binding has a potential downside: if the user Backspace key normally goes Back in history (which can differ across OSs and browsers), this will change the behavior to delete the selected element instead. If the user really wants to go back in history, they will have to press Escape to leave the mode and then press Backspace, or they will have to press an alternative keyboard shortcuts such as Alt+Left. I think the user will rarely want to go back in history in the middle of picking an element, though.

That downside could be mitigated by conditioning the key check on `runtime.PlatformOs` (https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/PlatformOs). But that would complicate the code a lot compared to the importance of this feature, and such detection would still fail to capture the user’s intent accurately in all cases. I think it’s better to unconditionally accept both Backspace (Delete) and Delete (Forward Delete).
This commit is contained in:
Rory O’Kane 2020-02-28 14:28:00 -05:00 committed by GitHub
parent 8780ef2413
commit be111c4036
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 1 deletions

View File

@ -1489,7 +1489,10 @@ const svgListening = function(on) {
const onKeyPressed = function(ev) {
// Delete
if ( ev.key === 'Delete' && pickerBody.classList.contains('zap') ) {
if (
(ev.key === 'Delete' || ev.key === 'Backspace') &&
pickerBody.classList.contains('zap')
) {
ev.stopPropagation();
ev.preventDefault();
zap();