From eab6d10a19f482337dac4460f37b86d206853b54 Mon Sep 17 00:00:00 2001
From: Josh Patra <joshpatra12@gmail.com>
Date: Sat, 11 Apr 2026 13:13:05 -0400
Subject: [PATCH] refactor: Better explanations, feat: made show/hide
 controller shortcut optional

---
 options.css  |  8 ++++++++
 options.html | 16 +++++++++++++---
 options.js   |  2 +-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/options.css b/options.css
index b2c0808..411cd2d 100644
--- a/options.css
+++ b/options.css
@@ -343,6 +343,14 @@ label em {
   font-weight: 500;
 }
 
+.shortcut-label em {
+  display: block;
+  margin-top: 4px;
+  color: var(--muted);
+  font-style: normal;
+  font-weight: 400;
+}
+
 .customKey,
 .customValue {
   text-align: center;
diff --git a/options.html b/options.html
index 0596edb..d78b791 100644
--- a/options.html
+++ b/options.html
@@ -96,7 +96,11 @@
         <section id="customs" class="settings-card">
           <div class="section-heading">
             <h3>Shortcuts</h3>
-            <p class="section-intro">Backspace clears a shortcut. Escape disables it.</p>
+            <p class="section-intro">
+              Backspace clears a key. Escape disables optional shortcuts. If a site
+              steals a shortcut, use a site rule with Override shortcuts (and
+              per-key blocking) for that URL.
+            </p>
           </div>
           <div class="shortcuts-grid">
             <div class="shortcut-row" id="display" data-action="display">
@@ -132,7 +136,10 @@
               />
             </div>
             <div class="shortcut-row" id="slower" data-action="slower">
-              <div class="shortcut-label">Decrease speed</div>
+              <div class="shortcut-label">
+                Decrease speed
+                <em>Required: Speeder needs a key for this action.</em>
+              </div>
               <input
                 class="customKey"
                 type="text"
@@ -146,7 +153,10 @@
               />
             </div>
             <div class="shortcut-row" id="faster" data-action="faster">
-              <div class="shortcut-label">Increase speed</div>
+              <div class="shortcut-label">
+                Increase speed
+                <em>Required: Speeder needs a key for this action.</em>
+              </div>
               <input
                 class="customKey"
                 type="text"
diff --git a/options.js b/options.js
index 4fdda1b..7d2295d 100644
--- a/options.js
+++ b/options.js
@@ -233,7 +233,7 @@ const actionLabels = {
 };
 
 const speedBindingActions = ["slower", "faster", "fast", "softer", "louder"];
-const requiredShortcutActions = new Set(["display", "slower", "faster"]);
+const requiredShortcutActions = new Set(["slower", "faster"]);
 
 function formatSpeedBindingDisplay(action, value) {
   if (!speedBindingActions.includes(action)) {