Add new tab action for folders

locales/en-US/browser/browser/zen-folders.ftl

@@ -26,6 +26,9 @@ zen-folders-panel-change-folder-space =
 zen-folders-unload-all-tooltip =
     .tooltiptext = Unload active in this folder
 
+zen-folders-new-tab-tooltip =
+    .tooltiptext = New tab in this folder
+
 zen-folders-unload-folder =
     .label = Unload All Tabs
 

src/zen/common/modules/ZenUIManager.mjs

@@ -491,6 +491,7 @@ window.gZenUIManager = {
   _lastSearch: "",
   _clearTimeout: null,
   _lastTab: null,
+  _pendingNewTabFolder: null,
 
   // Check if browser elements are in a valid state for tab operations
   _validateBrowserState() {
@@ -545,6 +546,8 @@ window.gZenUIManager = {
       return true;
     }
 
+    this._pendingNewTabFolder ??= this._getFolderForNewTab();
+
     // Clear any existing timeout
     if (this._clearTimeout) {
       clearTimeout(this._clearTimeout);
@@ -581,12 +584,61 @@ window.gZenUIManager = {
       document.getElementById("Browser:OpenLocation").doCommand();
     } catch (e) {
       console.error("Error opening location in new tab:", e);
+      this._pendingNewTabFolder = null;
       this.handleUrlbarClose(false);
       return false;
     }
     return true;
   },
 
+  openNewTabInFolder(folder) {
+    if (!folder?.isZenFolder || folder.isLiveFolder) {
+      return false;
+    }
+
+    this._pendingNewTabFolder = folder;
+    const handled = this.handleNewTab(false, false, "tab", true);
+    if (!handled) {
+      this._pendingNewTabFolder = null;
+    }
+    return handled;
+  },
+
+  consumePendingNewTabFolder(tab) {
+    const folder = this._pendingNewTabFolder;
+    this._pendingNewTabFolder = null;
+
+    if (
+      !folder?.isConnected ||
+      !folder.isZenFolder ||
+      folder.isLiveFolder ||
+      tab.pinned
+    ) {
+      return false;
+    }
+
+    gBrowser.pinTab(tab);
+    folder.addTabs([tab]);
+    gBrowser.selectedTab = tab;
+    return true;
+  },
+
+  _getFolderForNewTab() {
+    let group = gBrowser.selectedTab?.group;
+    if (group?.hasAttribute("split-view-group")) {
+      group = group.group;
+    }
+
+    while (group) {
+      if (group.isZenFolder && !group.isLiveFolder) {
+        return group;
+      }
+      group = group.group;
+    }
+
+    return null;
+  },
+
   clearUrlbarData() {
     this._prevUrlbarLabel = null;
     this._lastSearch = "";
@@ -604,6 +656,17 @@ window.gZenUIManager = {
       gURLBar._zenHandleUrlbarClose = null;
     }
 
+    if (!onElementPicked) {
+      this._pendingNewTabFolder = null;
+    } else if (this._pendingNewTabFolder) {
+      const pendingFolder = this._pendingNewTabFolder;
+      setTimeout(() => {
+        if (this._pendingNewTabFolder === pendingFolder) {
+          this._pendingNewTabFolder = null;
+        }
+      }, 5000);
+    }
+
     const isFocusedBefore = gURLBar.focused;
     setTimeout(() => {
       // We use this attribute on Tabbrowser::addTab

src/zen/folders/ZenFolder.mjs

@@ -15,6 +15,7 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
       <hbox class="tab-group-label-container zen-drop-target" pack="center">
         <html:div class="tab-group-folder-icon"/>
         <label class="tab-group-label" role="button"/>
+        <image class="tab-group-new-tab-button" role="button" keyNav="false" data-l10n-id="zen-folders-new-tab-tooltip"/>
         <image class="tab-reset-button reset-icon" role="button" keyNav="false" data-l10n-id="zen-folders-unload-all-tooltip"/>
       </hbox>
       <html:div class="tab-group-container">
@@ -77,6 +78,7 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
     this.icon.appendChild(nsZenFolder.rawIcon.cloneNode(true));
 
     this.labelElement.parentElement.setAttribute("context", "zenFolderActions");
+    this.newTabButton?.toggleAttribute("hidden", !!this.isLiveFolder);
 
     this.labelElement.onRenameFinished = newLabel => {
       this.name = newLabel.trim() || "Folder";
@@ -258,6 +260,29 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
     );
   }
 
+  get newTabButton() {
+    return (
+      this.labelElement.parentElement?.querySelector(
+        ".tab-group-new-tab-button"
+      ) ?? null
+    );
+  }
+
+  openNewTab(event) {
+    event?.stopPropagation();
+    if (this.isLiveFolder) {
+      return;
+    }
+
+    let currentFolder = this;
+    do {
+      currentFolder.collapsed = false;
+      currentFolder = currentFolder.group;
+    } while (currentFolder);
+
+    gZenUIManager.openNewTabInFolder(this);
+  }
+
   unloadAllTabs(event) {
     this.#unloadAllActiveTabs(event, /* noClose */ true);
   }
@@ -273,6 +298,11 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
   }
 
   on_click(event) {
+    if (event.target === this.newTabButton) {
+      this.openNewTab(event);
+      return;
+    }
+
     if (event.target === this.resetButton) {
       event.stopPropagation();
 

src/zen/folders/ZenFolders.mjs

@@ -396,6 +396,10 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
 
   on_TabOpen(event) {
     const tab = event.target;
+    if (gZenUIManager.consumePendingNewTabFolder(tab)) {
+      return;
+    }
+
     const group = tab.group;
     if (!group?.isZenFolder || tab.pinned) {
       return;

src/zen/folders/zen-folders.css

@@ -198,6 +198,33 @@ zen-folder {
       }
     }
 
+    .tab-group-new-tab-button {
+      display: none;
+      flex: 0 0 auto;
+      width: 22px;
+      height: 22px;
+      padding: 3px;
+      border-radius: var(--border-radius-small);
+      list-style-image: url("chrome://browser/skin/zen-icons/plus.svg");
+      -moz-context-properties: fill, fill-opacity;
+      fill: currentColor;
+      fill-opacity: 0.7;
+      opacity: 0;
+    }
+
+    .tab-group-new-tab-button:hover {
+      background-color: var(--toolbarbutton-hover-background);
+      fill-opacity: 1;
+    }
+
+    :root[zen-sidebar-expanded] & .tab-group-new-tab-button {
+      display: flex;
+    }
+
+    :root[zen-sidebar-expanded] &:hover .tab-group-new-tab-button {
+      opacity: 1;
+    }
+
     .tab-reset-button[live-folder-action] {
       list-style-image: url("chrome://browser/skin/zen-icons/security-broken.svg");
       display: flex;