Add escape hatch passthru mode for global keybindings + mode indicator

2 files changed, 76 insertions, 31 deletions

diff --git a/modules/firefox.home/chrome/globalKeybindings.uc.js b/modules/firefox.home/chrome/globalKeybindings.uc.js
index 95d8a10..dd1f0f7 100644
--- a/modules/firefox.home/chrome/globalKeybindings.uc.js
+++ b/modules/firefox.home/chrome/globalKeybindings.uc.js
@@ -11,21 +11,22 @@
   // Configure global keybindings
   const KEYBINDINGS = () => ({
     RELEASE: [
-      [ctrl(key('j')), nextTab()],
-      [ctrl(key('k')), prevTab()],
-      [alt(key('j')), moveSelectedTabBy(+1)],
-      [alt(key('k')), moveSelectedTabBy(-1)],
       [ctrl(shift(key('J'))), moveSelectedTabBy(+1)],
       [ctrl(shift(key('K'))), moveSelectedTabBy(-1)],
-
-      ...(Array.from({ length: 10 }, (_, idx) =>
-        [ctrl(key(idx === 9 ? 0 : idx + 1)), tabIndex(idx)],
-      )),
+      [ctrl(alt(key('p'))), togglePassthrough(), { modes: ALL_MODES }],
     ],
     PRESS: [
-      // Prevent the default browser's action
+      // Block default key bindings
       [ctrl(shift(key('J'))), preventDefault()],
       [ctrl(shift(key('K'))), preventDefault()],
+
+      [ctrl(key('j')), preventDefault(nextTab())],
+      [ctrl(key('k')), preventDefault(prevTab())],
+
+      // Ctrl + number takes to the tab at position
+      ...(Array.from({ length: 10 }, (_, idx) =>
+        [ctrl(key(idx === 9 ? 0 : idx + 1)), tabIndex(idx)],
+      )),
     ],
   });
 
@@ -34,6 +35,11 @@
   const tabIndex = idx => () => updateTabIndex((_n, _len) => idx)
   const preventDefault = f => e => { e.preventDefault(); f?.(e); };
   const moveSelectedTabBy = incr => () => updateSelectedTabIndex(incr);
+  const togglePassthrough = () => () => UC.globalKeybindings.updateMode(m => m !== MODE_PASSTHRU ? MODE_PASSTHRU : MODE_NORMAL)
+
+  const MODE_PASSTHRU = 'passthru';
+  const MODE_NORMAL = '';
+  const ALL_MODES = [MODE_NORMAL, MODE_PASSTHRU];
 
   const ctrl = b => e => b(e) && e.ctrlKey;
   const alt = b => e => b(e) && e.altKey;
@@ -59,21 +65,30 @@
   };
 
   const module = {
-    enabled: true,
+    mode: MODE_NORMAL,
+    allModes: ALL_MODES,
 
-    evaluateKeybindings: (bindings, e) => {
-      if (!module.enabled) return;
+    keybindings: KEYBINDINGS(),
 
-      for (const [isKey, action] of bindings) {
-        if (isKey(e)) {
-          const shouldContinue = action(e);
-          if (!shouldContinue) break;
+    evaluateKeybindings: (bindings, e) => {
+      for (const [isKey, action, options] of bindings) {
+        // Only allow keys from the given mode
+        if ((options?.modes ?? [MODE_NORMAL]).includes(module.mode)) {
+          if (isKey(e)) {
+            const shouldContinue = action(e);
+            if (!shouldContinue) break;
+          }
         }
       }
     },
 
-    handleKeyUpEvent: e => module.evaluateKeybindings(KEYBINDINGS().RELEASE, e),
-    handleKeyDownEvent: e => module.evaluateKeybindings(KEYBINDINGS().PRESS, e),
+    updateMode: f => {
+      module.mode = f(module.mode);
+      gBrowser.tabContainer.dataset.keyMode = module.mode
+    },
+
+    handleKeyUpEvent: e => module.evaluateKeybindings(module.keybindings.RELEASE, e),
+    handleKeyDownEvent: e => module.evaluateKeybindings(module.keybindings.PRESS, e),
 
     init(win) {
       let observe = () => {
diff --git a/modules/firefox.home/chrome/userChrome.css b/modules/firefox.home/chrome/userChrome.css
index 67809b0..e888056 100644
--- a/modules/firefox.home/chrome/userChrome.css
+++ b/modules/firefox.home/chrome/userChrome.css
@@ -36,15 +36,23 @@ toolbarbutton {
 
 .tabbrowser-tab {
   padding: 0 !important;
-  font-size: 0.86rem !important;
+  font-size: 0.8rem !important;
+}
+
+.tabbrowser-tab .tab-content {
+  padding-bottom: 2px !important;
 }
 
 .tabbrowser-tab .tab-label-container {
-  height: 2.2rem !important;
+  height: 1.8rem !important;
 }
 
 .tabbrowser-tab .tab-text {
-  line-height: 0;
+  padding: 0 !important;
+}
+
+.tabbrowser-tab .tab-secondary-label {
+  font-size: 0.6rem !important;
 }
 
 .tabbrowser-tab .tab-background {
@@ -70,7 +78,32 @@ toolbarbutton {
   margin-inline-start: 0 !important;
 }
 
+toolbarbutton#tabs-newtab-button image {
+  --button-size: 10px;
+  width: calc(2 * var(--toolbarbutton-inner-padding) + var(--button-size)) !important;
+  height: calc(2 * var(--toolbarbutton-inner-padding) + var(--button-size)) !important;
+}
+
+toolbarbutton#alltabs-button {
+  display: none !important;
+}
 
+/* Show a label to display the current mode for global keybindings */
+#tabbrowser-tabs[data-key-mode=""]::after {
+  display: none;
+}
+#tabbrowser-tabs[data-key-mode]::after {
+  content: attr(data-key-mode);
+  vertical-align: middle;
+  font-size: 0.73rem;
+  background-color: var(--ff-accent-color);
+  color: #ddd;
+  padding: 2px 5px;
+  top: 50%;
+  position: absolute;
+  right: 8px;
+  transform: translateY(-50%);
+}
 
 
 
@@ -88,21 +121,24 @@ toolbarbutton {
 
 #urlbar {
   font-size: 0.95rem !important;
-  min-height: 0 !important;
-  height: var(--ff-bg-color-1) !important;
+  min-height: var(--ff-urlbar-height) !important;
+  left: 0 !important;
+  width: 100% !important;
 }
 
 .urlbar-input-container {
   background-color: var(--ff-bg-color-2) !important;
   border-color: transparent !important;
   min-height: 0 !important;
+  padding-inline: 0 !important;
 }
 
 #urlbar[breakout-extend] .urlbar-input-container {
   background-color: var(--ff-bg-color-2) !important;
+  padding-inline: 0 !important;
 }
 #urlbar[breakout-extend] .urlbar-input-container #identity-box {
-  display: none;
+  opacity: 0.4 !important;
 }
 
 #urlbar-container {
@@ -110,11 +146,5 @@ toolbarbutton {
 }
 
 #urlbar[focused='true'] > #urlbar-background {
-  --bxackground-color: var(--ff-bg-color) !important;
-  box-shadow: none !important;
+  /* box-shadow: none !important; */
 }
-
-#navigator-toolbox {
-  --border: none !important;
-}
-