feat: improve tab navigation and cycling

src/browser/base/content/zen-commands.inc.xhtml

@@ -54,6 +54,10 @@
   <command id="cmd_zenCopyCurrentURL" />
   <command id="cmd_zenCopyCurrentURLMarkdown" />
 
+  <command id="cmd_zenTabNext" />
+  <command id="cmd_zenTabPrev" />
+  <command id="cmd_zenToggleUnloadedCycling" />
+
   <command id="cmd_zenGlanceClose" />
   <command id="cmd_zenGlanceExpand" />
   <command id="cmd_zenGlanceSplit" />

src/browser/components/preferences/zen-settings.js

@@ -775,6 +775,10 @@ var zenMissingKeyboardShortcutL10n = {
   key_wrToggleCaptureSequenceCmd: 'zen-key-wr-toggle-capture-sequence-cmd',
   key_undoCloseWindow: 'zen-key-undo-close-window',
 
+  key_zenTabNext: 'zen-key-tab-next-shortcut',
+  key_zenTabPrevious: 'zen-key-tab-prev-shortcut',
+  key_toggleUnloadedCycling: 'zen-toggle-unloaded-cycling-shortcut',
+
   'zen-glance-expand': 'zen-glance-expand',
 
   key_selectTab1: 'zen-key-select-tab-1',
@@ -1165,4 +1169,9 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
+  {
+    id: 'zen.tabs.unloaded-navigation-mode',
+    type: 'string',
+    default: 'always',
+  },
 ]);

src/browser/components/preferences/zenTabsManagement.inc.xhtml

@@ -68,6 +68,33 @@
       </hbox>
 </groupbox>
 
-</html:template>
+      <hbox id="zenTabsUnloadCategory" class="subcategory" hidden="true" data-category="paneZenTabManagement">
+            <html:h1 data-l10n-id="pane-zen-tabs-unloader-title" />
+      </hbox>
+
+      <hbox id="zenPinnedTabsManagerCategory" class="subcategory" hidden="true" data-category="paneZenTabManagement">
+            <html:h1 data-l10n-id="pane-zen-tab-navigation-title" />
+      </hbox>
+
+      <groupbox id="zenTabsUnloadedNavigationGroup" data-category="paneZenTabManagement" hidden="true"
+            class="highlighting-group">
+            <label>
+                  <html:h2 data-l10n-id="zen-tabs-unloaded-navigation-mode-label" />
+            </label>
+            <description class="description-deemphasized"
+                  data-l10n-id="zen-tabs-unloaded-navigation-mode-description" />
 
+            <radiogroup id="zenTabsUnloadedNavigationMode" preference="zen.tabs.unloaded-navigation-mode"
+                  oncommand="onZenTabsUnloadedNavigationModeChanged(this.value);">
+                  <hbox align="center">
+                        <radio id="zenTabsUnloadedNavigationModeAlways" value="always" />
+                        <description data-l10n-id="zen-tabs-unloaded-navigation-mode-always" />
+                  </hbox>
+                  <hbox align="center">
+                        <radio id="zenTabsUnloadedNavigationModeNever" value="never" />
+                        <description data-l10n-id="zen-tabs-unloaded-navigation-mode-never" />
+                  </hbox>
+            </radiogroup>
+      </groupbox>
 
+</html:template>

src/toolkit/content/widgets/tabbox-js.patch

@@ -2,7 +2,15 @@ diff --git a/toolkit/content/widgets/tabbox.js b/toolkit/content/widgets/tabbox.
 index 70afbfc87d543971e6f8a0661a44b682920a7bc4..2f767296db8043318fab2aeb39bfc5eee090b258 100644
 --- a/toolkit/content/widgets/tabbox.js
 +++ b/toolkit/content/widgets/tabbox.js
-@@ -213,7 +213,7 @@
+@@ -125,6 +125,7 @@
+
+       const { ShortcutUtils } = imports;
+
++      return;
+       switch (ShortcutUtils.getSystemActionForEvent(event)) {
+         case ShortcutUtils.CYCLE_TABS:
+           Glean.browserUiInteraction.keyboard["ctrl-tab"].add(1);
+@@ -213,7 +214,7 @@
      ) {
        this._inAsyncOperation = false;
        if (oldPanel != this._selectedPanel) {
@@ -11,7 +19,7 @@ index 70afbfc87d543971e6f8a0661a44b682920a7bc4..2f767296db8043318fab2aeb39bfc5ee
          this._selectedPanel?.classList.add("deck-selected");
        }
        this.setAttribute("selectedIndex", val);
-@@ -610,7 +610,7 @@
+@@ -610,7 +611,7 @@
        if (!tab) {
          return;
        }
@@ -20,7 +28,7 @@ index 70afbfc87d543971e6f8a0661a44b682920a7bc4..2f767296db8043318fab2aeb39bfc5ee
          if (otherTab != tab && otherTab.selected) {
            otherTab._selected = false;
          }
-@@ -823,7 +823,7 @@
+@@ -823,7 +824,7 @@
          if (tab == startTab) {
            return null;
          }
@@ -29,12 +37,42 @@ index 70afbfc87d543971e6f8a0661a44b682920a7bc4..2f767296db8043318fab2aeb39bfc5ee
            return tab;
          }
        }
-@@ -888,7 +888,7 @@
+@@ -885,10 +886,18 @@
+      * @param {boolean} [aWrap]
+      */
+     advanceSelectedTab(aDir, aWrap) {
++
++      const basePref = Services.prefs.getStringPref('zen.tabs.unloaded-navigation-mode', 'never');
++      const invertedState = Services.prefs.getBoolPref('zen.tabs.unloaded-navigation-mode.inverted', false);
++      const includeUnloaded = (basePref === 'always' && !invertedState) || (basePref === 'never' && invertedState);
++      const tabFilter = includeUnloaded
++      ? (tab => tab.visible)
++      : (tab => tab.visible && !tab.hasAttribute('pending'));
++
        let { ariaFocusedItem } = this;
        let startTab = ariaFocusedItem;
        if (!ariaFocusedItem || !this.allTabs.includes(ariaFocusedItem)) {
 -        startTab = this.selectedItem;
 +        startTab = gZenGlanceManager.getFocusedTab(aDir) || this.selectedItem;
        }
        let newTab = null;
-
+
+@@ -896,15 +905,15 @@
+       // which has a random placement in this.allTabs.
+       if (startTab.hidden) {
+         if (aDir == 1) {
+-          newTab = this.allTabs.find(tab => tab.visible);
++          newTab = this.allTabs.find(tabFilter);
+         } else {
+-          newTab = this.allTabs.findLast(tab => tab.visible);
++          newTab = this.allTabs.findLast(tabFilter);
+         }
+       } else {
+         newTab = this.findNextTab(startTab, {
+           direction: aDir,
+           wrap: aWrap,
+-          filter: tab => tab.visible,
++          filter: tabFilter,
+         });
+       }
+

src/zen/common/ZenCommonUtils.mjs

@@ -121,6 +121,26 @@ var gZenCommonActions = {
     }
   },
 
+  nextTab() {
+    gBrowser.tabContainer.advanceSelectedTab(1, false);
+  },
+  previousTab() {
+    gBrowser.tabContainer.advanceSelectedTab(-1, false);
+  },
+
+  toggleUnloadedCycling() {
+    try {
+      const currentMode = Services.prefs.getStringPref(
+        'zen.tabs.unloaded-navigation-mode',
+        'always'
+      );
+      const nextMode = currentMode === 'always' ? 'never' : 'always';
+      Services.prefs.setStringPref('zen.tabs.unloaded-navigation-mode', nextMode);
+    } catch (e) {
+      console.error('[gZenCommonActions] Error on unloaded cycling:', e);
+    }
+  },
+
   throttle(f, delay) {
     let timer = 0;
     return function (...args) {

src/zen/common/zen-sets.js

@@ -47,6 +47,15 @@ document.addEventListener(
           case 'cmd_zenSplitViewUnsplit':
             gZenViewSplitter.toggleShortcut('unsplit');
             break;
+          case 'cmd_zenTabNext':
+            gZenCommonActions.nextTab();
+            break;
+          case 'cmd_zenTabPrev':
+            gZenCommonActions.previousTab();
+            break;
+          case 'cmd_zenToggleUnloadedCycling':
+            gZenCommonActions.toggleUnloadedCycling();
+            break;
           case 'cmd_zenSplitViewContextMenu':
             gZenViewSplitter.contextSplitTabs();
             break;

src/zen/kbs/ZenKeyboardShortcuts.mjs

@@ -1051,8 +1051,43 @@ class nsZenKeyboardShortcutsVersioner {
       }
     }
     if (version < 10) {
-      // Migrate from version 9 to 10
-      // 1) Add the new pin/unpin tab toggle shortcut with Ctrl+Shift+D
+      // 1) Migrate from version 9 to 10
+      // In this new version, we add customizable shortcuts for switching to the next/previous tab and toggling unloaded tab cycling.
+      data.push(
+        new KeyShortcut(
+          'zen-tab-next-shortcut',
+          'TAB',
+          'VK_TAB',
+          'windowAndTabManagement',
+          nsKeyShortcutModifiers.fromObject({ accel: true }),
+          'cmd_zenTabNext',
+          'zen-tab-next-shortcut'
+        )
+      );
+      data.push(
+        new KeyShortcut(
+          'zen-tab-prev-shortcut',
+          'TAB',
+          'VK_TAB',
+          'windowAndTabManagement',
+          nsKeyShortcutModifiers.fromObject({ accel: true, shift: true }),
+          'cmd_zenTabPrev',
+          'zen-tab-prev-shortcut'
+        )
+      );
+      data.push(
+        new KeyShortcut(
+          'zen-toggle-unloaded-cycling-shortcut',
+          '',
+          '',
+          'windowAndTabManagement',
+          nsKeyShortcutModifiers.fromObject({}),
+          'cmd_zenToggleUnloadedCycling',
+          'zen-toggle-unloaded-cycling-shortcut'
+        )
+      );
+
+      // 2) Add the new pin/unpin tab toggle shortcut with Ctrl+Shift+D
       data.push(
         new KeyShortcut(
           'zen-toggle-pin-tab',
@@ -1065,7 +1100,7 @@ class nsZenKeyboardShortcutsVersioner {
         )
       );
 
-      // 2) Add shortcut to expand Glance into a full tab: Default Accel+O
+      // 3) Add shortcut to expand Glance into a full tab: Default Accel+O
       data.push(
         new KeyShortcut(
           'zen-glance-expand',
@@ -1108,10 +1143,8 @@ var gZenKeyboardShortcutsManager = {
   async init() {
     if (this.inBrowserView) {
       const loadedShortcuts = await this._loadSaved();
-
-      this._currentShortcutList = this.versioner.fixedKeyboardShortcuts(loadedShortcuts);
+      this._currentShortcutList = this.versioner.fixedKeyboardShortcuts(loadedShortcuts) || [];
       this._applyShortcuts();
-
       await this._saveShortcuts();
     }
   },
@@ -1216,6 +1249,47 @@ var gZenKeyboardShortcutsManager = {
     this.triggerShortcutRebuild();
   },
 
+  _registerPrecedentShortcut(shortcut, browser) {
+    const listener = (event) => {
+      let keyMatch = false;
+      if (shortcut.getKeyName()) {
+        keyMatch = event.key.toLowerCase() === shortcut.getKeyName().toLowerCase();
+      } else if (shortcut.getKeyCode()) {
+        for (const [mapKey, mapValue] of Object.entries(KEYCODE_MAP)) {
+          if (mapValue === shortcut.getKeyCode()) {
+            if (mapKey.toLowerCase() === event.code.toLowerCase()) {
+              keyMatch = true;
+            }
+            break;
+          }
+        }
+      }
+
+      if (!keyMatch) {
+        return;
+      }
+
+      const modifiers = shortcut.getModifiers();
+      const accelPressed = AppConstants.platform === 'macosx' ? event.metaKey : event.ctrlKey;
+      const modifiersMatch =
+        modifiers.accel === accelPressed &&
+        modifiers.alt === event.altKey &&
+        modifiers.shift === event.shiftKey;
+
+      if (modifiersMatch) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        const command = browser.document.getElementById(shortcut.getAction());
+        if (command) {
+          command.doCommand();
+        }
+      }
+    };
+
+    browser.addEventListener('keydown', listener, true);
+    browser.gZenKeyboardShortcutsManager._precedentListeners.push(listener);
+  },
+
   _applyShortcuts() {
     for (const browser of nsZenMultiWindowFeature.browsers) {
       let mainKeyset = browser.document.getElementById(ZEN_MAIN_KEYSET_ID);
@@ -1232,12 +1306,19 @@ var gZenKeyboardShortcutsManager = {
       //  throw new Error('Child list not empty');
       //}
 
+      browser.gZenKeyboardShortcutsManager._precedentListeners = [];
+
       for (let key of this._currentShortcutList) {
         if (key.isInternal()) {
           continue;
         }
-        let child = key.toXHTMLElement(browser);
-        keyset.appendChild(child);
+
+        if (key.getID() === 'zen-tab-next-shortcut' || key.getID() === 'zen-tab-prev-shortcut') {
+          this._registerPrecedentShortcut(key, browser);
+        } else {
+          let child = key.toXHTMLElement(browser);
+          keyset.appendChild(child);
+        }
       }
 
       this._applyDevtoolsShortcuts(browser);

src/zen/tests/tabs/browser.toml

@@ -7,9 +7,10 @@ support-files = [
   "head.js",
 ]
 
+["browser_tab_unloaded_navigation.js"]
 ["browser_tabs_empty_checks.js"]
 ["browser_drag_drop_vertical.js"]
 tags = [
   "drag-drop",
   "vertical-tabs"
-]
+]