zen-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 6dc774ea335b0c5dba7dcf76cdb23728faae1343..523ae38163c04ba8e37b767394bc98e8d5138537 100644
--- a/browser/components/tabbrowser/content/tabgroup.js
+++ b/browser/components/tabbrowser/content/tabgroup.js
@@ -13,10 +13,13 @@
 
   class MozTabbrowserTabGroup extends MozXULElement {
     static markup = `
-      <vbox class="tab-group-label-container" pack="center">
+      <hbox class="tab-group-label-container" pack="center">
+        <html:div class="tab-group-folder-icon"/>
         <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>
       `;
 
     /** @type {string} */
@@ -68,7 +71,7 @@
       this.#labelElement.container = gBrowser.tabContainer;
       this.#labelElement.group = this;
 
-      this.#labelElement.addEventListener("click", this);
+      this.querySelector(".tab-group-label-container").addEventListener("click", this);
       this.#labelElement.addEventListener("contextmenu", e => {
         e.preventDefault();
         gBrowser.tabGroupMenu.openEditModal(this);
@@ -93,6 +96,9 @@
       // claim that a tab group was created by adoption the first time it
       // mounts after getting created by `Tabbrowser.adoptTabGroup`.
       this.#wasCreatedByAdoption = false;
+      this.appendChild = function (child) {
+        this.querySelector('.tab-group-container').appendChild(child);
+      }
     }
 
     disconnectedCallback() {
@@ -133,7 +139,7 @@
               }
             });
           }
-          if (!this.tabs.length) {
+          if (!this.tabs.length && !this.pinned) {
             this.dispatchEvent(
               new CustomEvent("TabGroupRemoved", { bubbles: true })
             );
@@ -275,9 +281,23 @@
     }
 
     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 ?? []);
+      for (let item of childs) {
+        if (gBrowser.isTabGroup(item)) {
+          childs = childs.concat(item.tabs);
+        }
+      }
+      return childs.filter(node => node.matches("tab"));
     }
 
+    get group() {
+      if (gBrowser.isTabGroup(this.parentElement)) {
+        return this.parentElement.parentElement;
+      }
+      return null;
+     }
+
     /**
      * @returns {MozTextLabel}
      */
@@ -301,7 +321,7 @@
      */
     addTabs(tabs, metricsContext) {
       for (let tab of tabs) {
-        if (tab.pinned) {
+        if (tab.pinned !== this.pinned) {
           tab.ownerGlobal.gBrowser.unpinTab(tab);
         }
         let tabToMove =
@@ -395,5 +415,6 @@
     }
   }
 
+  window.MozTabbrowserTabGroup = MozTabbrowserTabGroup;
   customElements.define("tab-group", MozTabbrowserTabGroup);
 }