From c6d32293de552c66f4af0576a746720e9ef12c31 Mon Sep 17 00:00:00 2001
From: hensm <m@matt.tf>
Date: Sat, 4 Jun 2022 04:35:57 +0100
Subject: [PATCH] Add cancel on escape for whitelist input

---
 ext/src/ui/options/Whitelist.svelte | 38 ++++++++++++++++++++++++-----
 ext/src/ui/options/styles/index.css |  4 +--
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/ext/src/ui/options/Whitelist.svelte b/ext/src/ui/options/Whitelist.svelte
index 229abe9..511688b 100644
--- a/ext/src/ui/options/Whitelist.svelte
+++ b/ext/src/ui/options/Whitelist.svelte
@@ -4,8 +4,6 @@
     import { WhitelistItemData } from "../../background/whitelist";
     import { REMOTE_MATCH_PATTERN_REGEX } from "../../lib/matchPattern";
 
-    void REMOTE_MATCH_PATTERN_REGEX;
-
     const _ = browser.i18n.getMessage;
 
     /** Whitelist items to display. */
@@ -37,7 +35,36 @@
         items[editingIndex].pattern = editingValue;
     }
 
-    function checkEditValidity() {
+    async function onEditKeydown(ev: KeyboardEvent) {
+        key: switch (ev.key) {
+            // Finish editing on enter
+            case "Enter":
+                finishEditing();
+                break;
+
+            // Cancel editing (or adding new item) on escape
+            case "Escape": {
+                const originalValue = items[editingIndex];
+                switch (originalValue.pattern) {
+                    case "":
+                        removeItem(editingIndex);
+                        break key;
+                    case editingValue:
+                        finishEditing();
+                        break key;
+                }
+
+                editingValue = originalValue.pattern;
+                await tick();
+                isEditingValid = editingInput.validity.valid;
+                editingInput.select();
+
+                break;
+            }
+        }
+    }
+
+    function onEditInput() {
         editingInput.setCustomValidity(
             // Has duplicate pattern
             items.some(
@@ -86,10 +113,9 @@
                             required
                             bind:this={editingInput}
                             bind:value={editingValue}
-                            on:input={checkEditValidity}
+                            on:input={onEditInput}
+                            on:keydown={onEditKeydown}
                             on:blur={finishEditing}
-                            on:keypress={ev =>
-                                ev.key === "Enter" && finishEditing()}
                         />
                     {:else}
                         {item.pattern}
diff --git a/ext/src/ui/options/styles/index.css b/ext/src/ui/options/styles/index.css
index f42c0d4..4f62b10 100644
--- a/ext/src/ui/options/styles/index.css
+++ b/ext/src/ui/options/styles/index.css
@@ -352,7 +352,7 @@ button.ghost:not(:hover) {
     padding: 0 10px;
 }
 
-.whitelist__item:nth-child(odd) {
+.whitelist__item:nth-child(even) {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
@@ -391,7 +391,7 @@ button.ghost:not(:hover) {
 
 
 @media (prefers-color-scheme: dark) {
-    .whitelist__item:nth-child(odd) {
+    .whitelist__item:nth-child(even) {
         background-color: rgba(255, 255, 255, 0.05);
     }
 }