feat: improve tab navigation and cycling

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

@@ -54,9 +54,13 @@
   <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" />
 
   <command id="cmd_zenOpenFolderCreation" />
-</commandset>
+</commandset>

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

@@ -776,6 +776,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',
+
   key_selectTab1: 'zen-key-select-tab-1',
   key_selectTab2: 'zen-key-select-tab-2',
   key_selectTab3: 'zen-key-select-tab-3',
@@ -1169,4 +1173,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

@@ -17,7 +17,7 @@ window.gZenOperatingSystemCommonUtils = {
 
 /* eslint-disable no-unused-vars */
 class nsZenMultiWindowFeature {
-  constructor() {}
+  constructor() { }
 
   static get browsers() {
     return Services.wm.getEnumerator('navigator:browser');
@@ -121,6 +121,23 @@ 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

@@ -993,6 +993,43 @@ class nsZenKeyboardShortcutsVersioner {
         }
       }
     }
+    if (version < 10) {
+      // 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',
+          'U',
+          '',
+          'windowAndTabManagement',
+          nsKeyShortcutModifiers.fromObject({ alt: true }),
+          'cmd_zenToggleUnloadedCycling',
+          'zen-toggle-unloaded-cycling-shortcut'
+        )
+      );
+    }
     return data;
   }
 }
@@ -1023,10 +1060,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();
     }
   },
@@ -1271,4 +1306,4 @@ document.addEventListener(
     }
   },
   { once: true }
-);
+);

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"
-]
+]