chore: Updated to firefox 141.0.3, b=no-bug, c=tabs, folders

README.md

@@ -30,7 +30,7 @@ Zen is a firefox-based browser with the aim of pushing your productivity to a ne
 ### Firefox Versions
 
 - [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `141.0.2`! 🚀
-- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 141.0.2`!
+- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 141.0.3`!
 
 ### Contributing
 

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 1fcebe3962398ff1b7cadef657ac8b68a80e720d..9022f3f566e8829fa8d3c5a58f0300ab96869073 100644
+index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..49cb1c803b3b4384d948103f6352058e543081de 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -289,6 +289,7 @@
@@ -548,7 +548,12 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..9022f3f566e8829fa8d3c5a58f0300ab
            }
            this.#setDragOverGroupColor(colorCode);
            this.toggleAttribute("movingtab-ungroup", !colorCode);
-@@ -2769,15 +2817,24 @@
+@@ -2765,19 +2813,28 @@
+       dragData.dropElement = dropElement;
+       dragData.dropBefore = dropBefore;
+       dragData.animDropElementIndex = newDropElementIndex;
+-
++      gZenFolders.setFolderIndentation(draggedTab, dropElement);
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let item of tabs) {

src/zen/folders/ZenFolders.mjs

@@ -318,6 +318,7 @@
       if (selectedItem) {
         group.setAttribute('has-active', 'true');
         selectedItem.setAttribute('folder-active', 'true');
+        this.setFolderIndentation(selectedItem, group, false);
       }
 
       for (const item of itemsAfterSelected) {
@@ -380,6 +381,21 @@
             item = item.parentNode;
           }
         }
+        // If all the groups above the item are visible, remove the indentation
+        if (gBrowser.isTab(item)) {
+          let isVisible = true;
+          let parent = item.group;
+          while (parent) {
+            if (parent.collapsed && !parent.hasAttribute('has-active')) {
+              isVisible = false;
+              break;
+            }
+            parent = parent.group;
+          }
+          if (isVisible) {
+            item.style.removeProperty('--zen-folder-indent');
+          }
+        }
         groupItems.push(item);
       });
 
@@ -858,14 +874,23 @@
       return [];
     }
 
-    getFolderIndentation(tab, group = undefined) {
+    setFolderIndentation(tab, group = undefined, dropBefore = false) {
-      const level = group?.level || 0;
+      if (!gZenPinnedTabManager.expandedSidebarMode) {
-      const baseSpacing = 4; // Base spacing for each level
+        return;
+      }
+      let isTab = false;
+      if (!group && tab?.group) {
+        group = tab; // So we can set isTab later
+      }
+      if (gBrowser.isTab(group)) {
+        group = group.group;
+        isTab = true;
+      }
+      const level = group?.level + 1 - (dropBefore && !isTab ? 1 : 0) || 0;
+      const baseSpacing = 14; // Base spacing for each level
       const tabLevel = tab?.group?.level || 0;
-      // If the level is less, we need to make a negative margin
+      const spacing = (level - tabLevel) * baseSpacing;
-      const spacing =
+      tab.style.setProperty('--zen-folder-indent', `${spacing}px`);
-        level > tabLevel ? -baseSpacing * (level - tabLevel) : baseSpacing * (tabLevel - level);
-      return spacing;
     }
 
     changeFolderUserIcon(group) {

src/zen/folders/zen-folders.css

@@ -166,14 +166,6 @@ tab-group[split-view-group] .tab-group-line {
   display: none !important;
 }
 
-#tabbrowser-tabs[orient='vertical'][expanded] {
-  tab-group > :is(.tab-group-label-container, .tabbrowser-tab),
-  &[movingtab][movingtab-addToGroup]:not([movingtab-createGroup], [movingtab-ungroup])
-    .tabbrowser-tab:is(:active, [multiselected]) {
-    margin-inline-start: 0;
-  }
-}
-
 zen-folder {
   display: flex;
   flex-direction: column;
@@ -191,6 +183,7 @@ zen-folder {
   );
 
   -moz-window-dragging: no-drag;
+  transition: margin-inline-start 0.15s ease-in-out;
 
   &[selected] > .tab-group-label-container::before {
     background-color: color-mix(in srgb, var(--zen-colors-border) 60%, transparent);
@@ -215,7 +208,8 @@ zen-folder {
 
   & > .tab-group-container {
     :root[zen-sidebar-expanded] & > * {
-      margin-inline-start: var(--zen-folder-indent, 14px) !important;
+      --zen-folder-indent: 14px; /* Can get overriden by the JS */
+      margin-inline-start: var(--zen-folder-indent) !important;
     }
 
     & > zen-folder {
@@ -227,10 +221,6 @@ zen-folder {
     }
   }
 
-  &[collapsed][has-active='true'] > .tab-group-container zen-folder {
-    margin-inline-start: 0 !important;
-  }
-
   margin: 0 var(--tab-block-margin);
   margin-inline-end: 0;
 
@@ -296,6 +286,7 @@ zen-folder {
     & > label,
     & > #tab-label-input {
       padding: 0 0 0 30px !important;
+      width: 100%;
     }
 
     & > label {

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -998,33 +998,27 @@
         let hasActuallyMoved;
         for (const draggedTab of movingTabs) {
           let isRegularTabs = false;
-          // Check for pinned tabs container
-          if (pinnedTabsTarget) {
-            if (!draggedTab.pinned) {
-              gBrowser.pinTab(draggedTab);
-              moved = true;
-            } else if (draggedTab.hasAttribute('zen-essential')) {
-              this.removeEssentials(draggedTab, false);
-              moved = true;
-            }
-          }
           // Check for essentials container
-          else if (essentialTabsTarget) {
+          if (essentialTabsTarget) {
             if (!draggedTab.hasAttribute('zen-essential') && !draggedTab?.group) {
               moved = true;
               isVertical = false;
               hasActuallyMoved = this.addToEssentials(draggedTab);
             }
           }
+          // Check for pinned tabs container
+          else if (pinnedTabsTarget) {
+            if (!draggedTab.pinned) {
+              gBrowser.pinTab(draggedTab);
+            } else if (draggedTab.hasAttribute('zen-essential')) {
+              this.removeEssentials(draggedTab, false);
+              moved = true;
+            }
+          }
           // Check for normal tabs container
           else if (tabsTarget || event.target.id === 'zen-tabs-wrapper') {
-            if (
+            if (draggedTab.pinned && !draggedTab.hasAttribute('zen-essential')) {
-              draggedTab.pinned &&
-              !draggedTab.hasAttribute('zen-essential') &&
-              !draggedTab?.group?.isZenFolder
-            ) {
               gBrowser.unpinTab(draggedTab);
-              moved = true;
               isRegularTabs = true;
             } else if (draggedTab.hasAttribute('zen-essential')) {
               this.removeEssentials(draggedTab);
@@ -1139,6 +1133,23 @@
       for (const item of this.dragShiftableItems) {
         item.style.transform = '';
       }
+      for (const item of gBrowser.tabContainer.ariaFocusableItems) {
+        if (gBrowser.isTab(item)) {
+          let isVisible = true;
+          let parent = item.group;
+          while (parent) {
+            if (parent.collapsed && !parent.hasAttribute('has-active')) {
+              isVisible = false;
+              break;
+            }
+            parent = parent.group;
+          }
+          if (!isVisible) {
+            continue;
+          }
+        }
+        item.style.removeProperty('--zen-folder-indent');
+      }
       this.removeTabContainersDragoverClass();
     }
 
@@ -1157,11 +1168,11 @@
         draggedTab = draggedTab.group;
       }
       const itemsToCheck = this.dragShiftableItems;
-      const separator = itemsToCheck[0];
+      const separatorHeight = window.windowUtils.getBoundsWithoutFlushing(itemsToCheck[0]).height;
-      const separatorRect = window.windowUtils.getBoundsWithoutFlushing(separator);
       const tabRect = window.windowUtils.getBoundsWithoutFlushing(draggedTab);
-      const translate = tabRect.top - tabRect.height / 2 + separatorRect.height / 2;
+      const translate = tabRect.top - tabRect.height / 2;
-      const topToNormalTabs = separatorRect.top - separatorRect.height / 2;
+      const topToNormalTabs =
+        window.windowUtils.getBoundsWithoutFlushing(itemsToCheck[0]).top - separatorHeight / 2;
       const isGoingToPinnedTabs = translate < topToNormalTabs;
       const multiplier = isGoingToPinnedTabs !== isPinned ? (isGoingToPinnedTabs ? 1 : -1) : 0;
       const draggingTabHeight =
@@ -1253,12 +1264,7 @@
       if (!this.enabled) {
         return;
       }
-      const folderTarget = event.target.closest('zen-folder');
       let isVertical = this.expandedSidebarMode;
-      //if (isVertical) {
-      //  draggedTab.style.marginInlineStart = `${gZenFolders.getFolderIndentation(draggedTab, folderTarget)}px`;
-      //}
-
       if (
         gBrowser.isTabGroupLabel(draggedTab) &&
         !draggedTab?.group?.hasAttribute('split-view-group')
@@ -1270,6 +1276,7 @@
       const pinnedTabsTarget = event.target.closest('.zen-workspace-pinned-tabs-section');
       const essentialTabsTarget = event.target.closest('.zen-essentials-container');
       const tabsTarget = event.target.closest('.zen-workspace-normal-tabs-section');
+      const folderTarget = event.target.closest('zen-folder');
       let targetTab = event.target.closest('.tabbrowser-tab');
       targetTab = targetTab?.group || targetTab;
       draggedTab = draggedTab?.group?.hasAttribute('split-view-group')
@@ -1290,15 +1297,15 @@
       let shouldAddDragOverElement = false;
 
       // Decide whether we should show a dragover class for the given target
-      if (pinnedTabsTarget) {
+      if (essentialTabsTarget) {
-        if (draggedTab.hasAttribute('zen-essential')) {
-          shouldAddDragOverElement = true;
-        }
-      } else if (essentialTabsTarget) {
         if (!draggedTab.hasAttribute('zen-essential') && this.canEssentialBeAdded(draggedTab)) {
           shouldAddDragOverElement = true;
           isVertical = false;
         }
+      } else if (pinnedTabsTarget) {
+        if (draggedTab.hasAttribute('zen-essential')) {
+          shouldAddDragOverElement = true;
+        }
       } else if (tabsTarget) {
         if (draggedTab.hasAttribute('zen-essential')) {
           shouldAddDragOverElement = true;

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -297,12 +297,15 @@
      Individual Tab Styles (.tabbrowser-tab within #tabbrowser-tabs)
      ======================================================================== */
   & .tabbrowser-tab {
-    /* Add smooth scaling transition */
     &,
     & .tab-content > image {
-      transition: scale 0.07s ease;
+      transition:
+        scale 0.07s ease,
+        margin-inline-start 0.15s ease-in-out;
     }
 
+    margin-inline-start: var(--zen-folder-indent) !important;
+
     /* Hide specific empty tabs (likely placeholders) */
     &[zen-empty-tab] {
       display: none;

surfer.json

@@ -6,7 +6,7 @@
   "version": {
     "product": "firefox",
     "version": "141.0.2",
-    "candidate": "141.0.2"
+    "candidate": "141.0.3"
   },
   "buildOptions": {
     "generateBranding": true