refactor: Improved pinned tabs!

configs/common/mozconfig

@@ -75,8 +75,11 @@ if test "$ZEN_RELEASE"; then
   mk_add_options AUTOCLOBBER=1
   export AUTOCLOBBER=1
 
-  export MOZ_PGO=1
-  ac_add_options MOZ_PGO=1
+  if ! test "$ZEN_CROSS_COMPILING"; then
+    # We declare these later in windows builds, look at windows_mozconfig
+    export MOZ_PGO=1
+    ac_add_options MOZ_PGO=1
+  fi
 fi
 
 ac_add_options --enable-unverified-updates

src/browser/base/content/ZenUIManager.mjs

@@ -29,9 +29,6 @@ var gZenVerticalTabsManager = {
     //Services.prefs.addObserver('zen.view.sidebar-expanded', this._updateEvent.bind(this));
   },
 
-  //_updateEvent() {
-  //  this._updateExpandButton();
-  //},
 
   get expanded() {
     return Services.prefs.getBoolPref('zen.view.sidebar-expanded');

src/browser/components/tabbrowser/content/tabs-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 3b97732d8035f07a2308f76f235702c70a5fa388..bed86f3014a239b4e7d50504d4b0bf457da3500c 100644
+index 3b97732d8035f07a2308f76f235702c70a5fa388..edbc1ad66a84fd17b1674ff7852cdf01bef0c21b 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -552,19 +552,36 @@
@@ -130,7 +130,23 @@ index 3b97732d8035f07a2308f76f235702c70a5fa388..bed86f3014a239b4e7d50504d4b0bf45
            for (let tab of movingTabs) {
              tab.toggleAttribute("tabdrop-samewindow", true);
              tab.style.transform = "translateX(" + newTranslateX + "px)";
-@@ -1144,10 +1179,13 @@
+@@ -1081,6 +1116,15 @@
+         return this._allTabs;
+       }
+       let children = Array.from(this.arrowScrollbox.children);
++      // Zen: We also need to exclude subgroups
++      // Zen: For example: tab-group(tab1, tab2), tab3, tab-group(tab4)
++      // Zen: In this case, we need to get [tab1, tab2, tab3, tab4]
++      // Zen: NOTE: There should be no tab-group inside of a tab-group
++      for (let i = 0; i < children.length; i++) {
++        if (children[i].classList.contains("zen-tab-group")) {
++          children.splice(i, 1, ...children[i].children);
++        }
++      }
+       children.pop();
+       this._allTabs = children;
+       return children;
+@@ -1144,10 +1188,13 @@
      }
  
      _initializeArrowScrollbox() {
@@ -144,7 +160,7 @@ index 3b97732d8035f07a2308f76f235702c70a5fa388..bed86f3014a239b4e7d50504d4b0bf45
            // Ignore underflow events:
            // - from nested scrollable elements
            // - for vertical orientation
-@@ -1471,11 +1509,11 @@
+@@ -1471,11 +1518,11 @@
          for (let i = numPinned - 1; i >= 0; i--) {
            let tab = tabs[i];
            width += layoutData.pinnedTabWidth;
@@ -161,7 +177,7 @@ index 3b97732d8035f07a2308f76f235702c70a5fa388..bed86f3014a239b4e7d50504d4b0bf45
            tab._pinnedUnscrollable = true;
          }
          this.style.setProperty(
-@@ -1510,19 +1548,30 @@
+@@ -1510,19 +1557,30 @@
          }
        }
  
@@ -201,7 +217,7 @@ index 3b97732d8035f07a2308f76f235702c70a5fa388..bed86f3014a239b4e7d50504d4b0bf45
  
        let pinned = draggedTab.pinned;
        let numPinned = gBrowser._numPinnedTabs;
-@@ -1531,36 +1580,39 @@
+@@ -1531,36 +1589,39 @@
          pinned ? numPinned : undefined
        );
  
@@ -252,7 +268,7 @@ index 3b97732d8035f07a2308f76f235702c70a5fa388..bed86f3014a239b4e7d50504d4b0bf45
        }
  
        draggedTab._dragData.translateX = translateX;
-@@ -1593,11 +1645,11 @@
+@@ -1593,11 +1654,11 @@
          if (tabs[mid] == draggedTab && ++mid > high) {
            break;
          }
@@ -266,7 +282,7 @@ index 3b97732d8035f07a2308f76f235702c70a5fa388..bed86f3014a239b4e7d50504d4b0bf45
            tabCenter
          ) {
            low = mid + 1;
-@@ -1620,16 +1672,16 @@
+@@ -1620,16 +1681,16 @@
        for (let tab of tabs) {
          if (tab != draggedTab) {
            let shift = getTabShift(tab, newIndex);
@@ -286,7 +302,7 @@ index 3b97732d8035f07a2308f76f235702c70a5fa388..bed86f3014a239b4e7d50504d4b0bf45
          }
          return 0;
        }
-@@ -1701,9 +1753,9 @@
+@@ -1701,9 +1762,9 @@
  
        // Slide the relevant tabs to their new position.
        for (let t of this._getVisibleTabs()) {

src/browser/themes/shared/zen-browser-shared.css

@@ -340,7 +340,7 @@ toolbarbutton#scrollbutton-up {
   display: none !important;
 }
 
-.tabbrowser-tab::after {
+.tabbrowser-tab::after {/* Containers */
   background: var(--identity-tab-color, transparent);
   border-radius: 2px;
   height: 80%;
@@ -362,15 +362,15 @@ toolbarbutton#scrollbutton-up {
   position: relative !important;
 }
 
-.tabbrowser-tab:nth-last-child(1 of [pinned]) {
-  margin-bottom: 15px !important;
+#tabbrowser-tabs:has(.tabbrowser-tab[pinned]) .tabbrowser-tab:nth-child(1 of :not([pinned])) {
+  margin-top: 15px !important;
   position: relative;
   overflow: visible;
 
-  & .tab-stack::after {
+  & .tab-stack::before {
     content: '';
     position: absolute;
-    bottom: -11px;
+    top: -11px;
     left: 0;
     width: 100%;
     height: 1.5px;
@@ -724,27 +724,57 @@ panelmultiview {
   }
 
   .tabbrowser-tab {
-    width: 100%;
-
-    &:hover .tab-close-button {
-      display: block !important;
-    }
-
-    & .tab-content {
-      position: relative;
+    &:not([pinned]) {
       width: 100%;
-    }
-     
-    & .tab-stack {
-      justify-content: start;
-      padding: 10px;
-      width: 100% !important;
+    
+      &:hover .tab-close-button {
+        display: block !important;
+      }
+  
+      & .tab-content {
+        position: relative;
+        width: 100%;
+      }
+       
+      & .tab-stack {
+        justify-content: start;
+        padding: 10px;
+        width: 100% !important;
+      }
+
+      & .tab-label-container {
+    
+        #tabbrowser-tabs:not([secondarytext-unsupported]) & {
+          display: flex;
+          align-items: center;
+          padding-left: 10px;
+        }
+      }
     }
 
     &:active,
     .zen-sidebar-panel-button:active {
       transform: scale(0.96) !important;
     }
+
+    &[pinned] {
+      margin: 0 !important;
+    }
+  }
+  #tabbrowser-arrowscrollbox::part(scrollbox) {
+    /* We have the pinned tabs on the top, next to each other,
+     * and the rest of the tabs are below them. */
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
+    padding: 5px;
+  }
+
+  .tabbrowser-tab:not([pinned]) {
+    grid-column: 1 / -1;
+  }
+
+  .tabbrowser-tab[pinned] {
+    grid-column: span 1;
   }
 
   #zen-workspaces-button {
@@ -753,19 +783,10 @@ panelmultiview {
     padding-right: 10px;
   }
 
-  .tab-label-container {
-    
-    #tabbrowser-tabs:not([secondarytext-unsupported]) & {
-      display: flex;
-      align-items: center;
-      padding-left: 10px;
-    }
-  }
-
   #zen-sidebar-icons-wrapper {
     width: 100%;
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
     transition: .1s;
   }