desktop/src/browser/components/tabbrowser/content/tabgroup-js.patch

diff --git a/browser/components/tabbrowser/content/tabgroup.js b/browser/components/tabbrowser/content/tabgroup.js
index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f8d050f86 100644
--- a/browser/components/tabbrowser/content/tabgroup.js
+++ b/browser/components/tabbrowser/content/tabgroup.js
@@ -13,10 +13,12 @@
 
   class MozTabbrowserTabGroup extends MozXULElement {
     static markup = `
-      <vbox class="tab-group-label-container" pack="center">
+      <hbox class="tab-group-label-container" pack="center">
         <label class="tab-group-label" role="button"/>
-      </vbox>
-      <html:slot/>
+      </hbox>
+      <html:div class="tab-group-container">
+        <html:div class="zen-tab-group-start"/>
+      </html:div>
       <vbox class="tab-group-overflow-count-container" pack="center">
         <label class="tab-group-overflow-count" role="button" />
       </vbox>
@@ -57,20 +59,28 @@
     }
 
     connectedCallback() {
+      if (this.group && this._lastGroup != this.group) {
+        this._lastGroup = this.group;
+        this.group.dispatchEvent(
+          new CustomEvent("FolderGrouped", {
+            bubbles: true,
+            detail: this,
+          })
+        );
+      } else if (!this.group) {
+        this._lastGroup = null;
+      }
       // Always set the mutation observer to listen for tab change events, even
       // if we are already initialized.
       // This is needed to ensure events continue to fire even if the tab group is
       // moved from the horizontal to vertical tab layout or vice-versa, which
       // causes the component to be repositioned in the DOM.
-      this.#observeTabChanges();
 
       // Similar to above, always set up TabSelect listener, as this gets
       // removed in disconnectedCallback
       this.ownerGlobal.addEventListener("TabSelect", this);
 
-      if (this._initialized) {
-        return;
-      }
+      if (!this._initialized) {
 
       this._initialized = true;
       this.saveOnWindowClose = true;
@@ -99,11 +109,14 @@
 
       this.#labelElement.addEventListener("mouseover", this);
       this.#labelElement.addEventListener("mouseout", this);
-      this.#labelElement.addEventListener("contextmenu", e => {
-        e.preventDefault();
-        gBrowser.tabGroupMenu.openEditModal(this);
-        return false;
-      });
+      this.appendChild = function (child) {
+        this.querySelector(".tab-group-container").appendChild(child);
+        for (let tab of this.tabs) {
+          if (tab.hasAttribute("zen-empty-tab") && tab.group === this) {
+            this.querySelector(".zen-tab-group-start").after(tab);
+          }
+        }
+      };
 
       this.#updateLabelAriaAttributes();
       this.#updateCollapsedAriaAttributes();
@@ -129,6 +142,8 @@
       // mounts after getting created by `Tabbrowser.adoptTabGroup`.
       this.#wasCreatedByAdoption = false;
     }
+      this.#observeTabChanges();
+    }
 
     resetDefaultGroupName = () => {
       this.#defaultGroupName = "";
@@ -213,7 +228,10 @@
           }
         });
       }
-      this.#tabChangeObserver.observe(this, { childList: true });
+      const container = this.querySelector(".tab-group-container");
+      if (container) {
+        this.#tabChangeObserver.observe(container, { childList: true });
+      }
     }
 
     get color() {
@@ -307,6 +325,9 @@
     }
 
     set collapsed(val) {
+      if (this.hasAttribute("split-view-group")) {
+        return;
+      }
       if (!!val == this.collapsed) {
         return;
       }
@@ -364,7 +385,6 @@
           tabGroupName,
         })
         .then(result => {
-          this.dataset.tooltip = result;
         });
     }
 
@@ -383,7 +403,57 @@
      * @returns {MozTabbrowserTab[]}
      */
     get tabs() {
-      return Array.from(this.children).filter(node => node.matches("tab"));
+      // add other group tabs if they are under this group
+      let childs = Array.from(this.querySelector(".tab-group-container")?.children ?? []);
+      const tabsCollect = [];
+      for (let item of childs) {
+        tabsCollect.push(item);
+        if (gBrowser.isTabGroup(item)) {
+          tabsCollect.push(...item.tabs);
+        }
+      }
+      return tabsCollect.filter(node => node.matches("tab"));
+    }
+
+    get childGroupsAndTabs() {
+      const result = [];
+      const container = this.querySelector(".tab-group-container");
+
+      for (const item of Array.from(container.children)) {
+        if (gBrowser.isTab(item)) {
+          result.push(item);
+        } else if (gBrowser.isTabGroup(item)) {
+          const labelContainer = item.labelElement;
+          labelContainer.visible = item.visible;
+          if (gBrowser.isTabGroupLabel(labelContainer)) {
+            result.push(labelContainer);
+          }
+          result.push(...item.childGroupsAndTabs);
+        }
+      }
+      return result;
+    }
+
+    get group() {
+      if (gBrowser.isTabGroup(this.parentElement?.parentElement)) {
+        return this.parentElement.parentElement;
+      }
+      return null;
+    }
+
+    get visible() {
+      let currentGroup = this;
+      while (currentGroup?.group) {
+        currentGroup = currentGroup?.group;
+        if (currentGroup.collapsed) {
+          return false;
+        }
+      }
+      return true;
+    }
+
+    get level() {
+      return this.group?.level + 1 || 0;
     }
 
     /**
@@ -442,7 +512,6 @@
     addTabs(tabs, metricsContext) {
       for (let tab of tabs) {
         if (tab.pinned) {
-          tab.ownerGlobal.gBrowser.unpinTab(tab);
         }
         let tabToMove =
           this.ownerGlobal === tab.ownerGlobal
@@ -505,7 +574,7 @@
      */
     on_click(event) {
       let isToggleElement =
-        event.target === this.#labelElement ||
+        this.labelElement.parentElement.contains(event.target) ||
         event.target === this.#overflowCountLabel;
       if (isToggleElement && event.button === 0) {
         event.preventDefault();
@@ -570,5 +639,6 @@
     }
   }
 
+  window.MozTabbrowserTabGroup = MozTabbrowserTabGroup;
   customElements.define("tab-group", MozTabbrowserTabGroup);
 }