From be111c4036e18bf05463e229553c099a8e4f6640 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rory=20O=E2=80=99Kane?= Date: Fri, 28 Feb 2020 14:28:00 -0500 Subject: [PATCH] =?UTF-8?q?In=20Element=20Zapper,=20support=20Mac=20keyboa?= =?UTF-8?q?rds=E2=80=99=20Delete=20key=20(#3770)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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). --- src/js/scriptlets/element-picker.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/js/scriptlets/element-picker.js b/src/js/scriptlets/element-picker.js index e445c61eb..7ba5e2412 100644 --- a/src/js/scriptlets/element-picker.js +++ b/src/js/scriptlets/element-picker.js @@ -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();