macOptionFix: Added support for Mac OS Option + Key presses (Fixes #3197, #3666, #3662, #3284)

lib/keyboard_utils.js

@@ -31,9 +31,14 @@ const KeyboardUtils = {
     }
   },
 
+  // Adds support for Mac Option + Keypress. See #3197.
+  // (Vimium will ignore the symbols and treat them like letters, at least on a US Laptop keyboard).
   getKeyChar(event) {
     let key;
-    if (!Settings.get("ignoreKeyboardLayout")) {
+    if (
+      !Settings.get("ignoreKeyboardLayout") &&
+      !(this.platform === "Mac" && Settings.get("macOptionKeyFix") && event.altKey)
+    ) {
       key = event.key;
     } else if (!event.code) {
       key = event.key != null ? event.key : ""; // Fall back to event.key (see #3099).

lib/settings.js

@@ -68,6 +68,7 @@ w: https://www.wikipedia.org/w/index.php?title=Special:Search&search=%s Wikipedi
   regexFindMode: false,
   waitForEnterForFilteredHints: true,
   helpDialog_showAdvancedCommands: false,
+  macOptionKeyFix: true,
   ignoreKeyboardLayout: false,
 };
 

pages/options.css

@@ -157,6 +157,10 @@ div#exampleKeyMapping {
   margin-top: 5px;
 }
 
+div#macos {
+  display: none;
+}
+
 #linkHintCharactersContainer,
 #linkHintNumbersContainer,
 #waitForEnterForFilteredHintsContainer {

pages/options.html

@@ -176,6 +176,20 @@ <h2></h2>
           Switch back to plain find mode by using the <code>\R</code> escape sequence.
         </div>
 
+        <h2></h2>
+        <div id="macos">
+          <label>
+            <input id="macOptionKeyFix" type="checkbox" />
+            macOS: Treat Option as Alt/Meta
+          </label>
+          <div class="example">
+            This forces Vimium to treat an <code>Option + Key</code> keypress that would produce a
+            symbol on macOS as the equivalent <code>Alt + Letter</code> keypress. (With this
+            enabled, you can create maps such as <code>&lt;a-j&gt;</code> rather than
+            <code>&lt;a-&Delta;&gt;</code>.)
+          </div>
+        </div>
+
         <h2></h2>
         <label>
           <input id="ignoreKeyboardLayout" type="checkbox" />

pages/options.js

@@ -9,6 +9,7 @@ const options = {
   nextPatterns: "string",
   previousPatterns: "string",
   regexFindMode: "boolean",
+  macOptionKeyFix: "boolean",
   ignoreKeyboardLayout: "boolean",
   scrollStepSize: "number",
   smoothScroll: "boolean",
@@ -24,6 +25,9 @@ const OptionsPage = {
 
     const saveOptionsEl = document.querySelector("#saveOptions");
 
+    const isMacOS = KeyboardUtils.platform === "Mac";
+    if (isMacOS) document.getElementById("macos").style.display = "contents";
+
     const onUpdated = () => {
       saveOptionsEl.disabled = false;
       saveOptionsEl.textContent = "Save changes";