Merge branch 'dev' of https://github.com/zen-browser/desktop into dev

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..1b934a6837a79e378d729462b62de424b0741bbd 100644
+index 1fcebe3962..16f7783530 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -289,6 +289,7 @@
@@ -401,7 +401,19 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          translate +=
            this.arrowScrollbox.scrollbox[scrollDirection] - dragData.scrollPos;
        } else if (isPinned && this.verticalMode) {
-@@ -2384,6 +2456,9 @@
+@@ -2377,6 +2449,11 @@
+       // - for unpinned tabs, between the first and last unpinned tab
+       let firstBound = firstTab[screenAxis] - firstMovingTabScreen;
+       let lastBound = endEdge(lastTab) - lastMovingTabScreen;
++      // Hack if last tab is Folder with has-active
++      if (lastTab?.group?.hasAttribute("has-active")) {
++        lastBound += 40;
++      }
++
+       translate = Math.min(Math.max(translate, firstBound), lastBound);
+ 
+       for (let item of movingTabs) {
+@@ -2384,6 +2461,9 @@
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
          }
@@ -411,25 +423,17 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          item.style.transform = `${translateAxis}(${translate}px)`;
        }
  
-@@ -2521,6 +2596,9 @@
+@@ -2521,6 +2601,9 @@
              break;
            }
            let element = tabs[mid];
 +          if (element?.group?.hasAttribute("split-view-group")) {
-+            element = element.group;
++            element = element.group.labelElement;
 +          }
            let elementForSize = isTabGroupLabel(element)
              ? element.parentElement
              : element;
-@@ -2540,6 +2618,7 @@
-       };
- 
-       let dropElement = getOverlappedElement();
-+      if (dropElement?.hasAttribute("split-view-group")) dropElement = dropElement.labelElement;
- 
-       let newDropElementIndex;
-       if (dropElement) {
-@@ -2604,7 +2683,7 @@
+@@ -2604,7 +2687,7 @@
        let shouldCreateGroupOnDrop;
        let dropBefore;
        if (dropElement) {
@@ -438,7 +442,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
            ? dropElement.parentElement
            : dropElement;
  
-@@ -2624,7 +2703,7 @@
+@@ -2624,7 +2707,7 @@
            ? Services.prefs.getIntPref(
                "browser.tabs.dragDrop.moveOverThresholdPercent"
              ) / 100
@@ -447,7 +451,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          moveOverThreshold = Math.min(1, Math.max(0, moveOverThreshold));
          let shouldMoveOver = overlapPercent > moveOverThreshold;
          if (logicalForward && shouldMoveOver) {
-@@ -2656,23 +2735,6 @@
+@@ -2656,23 +2739,6 @@
  
          // If dragging a group over another group, don't make it look like it is
          // possible to drop the dragged group inside the other group.
@@ -471,7 +475,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
  
          // Constrain drop direction at the boundary between pinned and
          // unpinned tabs so that they don't mix together.
-@@ -2686,14 +2748,13 @@
+@@ -2686,14 +2752,13 @@
          }
        }
  
@@ -491,7 +495,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          // When dragging tab(s) over an ungrouped tab, signal to the user
          // that dropping the tab(s) will create a new tab group.
          shouldCreateGroupOnDrop =
-@@ -2703,12 +2764,12 @@
+@@ -2703,12 +2768,12 @@
            overlapPercent > dragOverGroupingThreshold;
  
          if (shouldCreateGroupOnDrop) {
@@ -510,7 +514,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          } else {
            this.removeAttribute("movingtab-createGroup");
            document
-@@ -2735,19 +2796,14 @@
+@@ -2735,19 +2800,14 @@
              dropElement = dropElementGroup;
              colorCode = undefined;
            } else if (isTabGroupLabel(dropElement)) {
@@ -538,7 +542,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
            }
            this.#setDragOverGroupColor(colorCode);
            this.toggleAttribute("movingtab-ungroup", !colorCode);
-@@ -2769,15 +2825,24 @@
+@@ -2769,15 +2829,24 @@
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let item of tabs) {
@@ -564,7 +568,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          }
          item.style.transform = transform;
        }
-@@ -2830,12 +2895,14 @@
+@@ -2830,12 +2899,14 @@
        );
      }
  
@@ -581,7 +585,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
  
        for (let item of this.ariaFocusableItems) {
          if (isTabGroupLabel(item)) {
-@@ -2843,6 +2910,18 @@
+@@ -2843,6 +2914,18 @@
            item = item.parentElement;
          }
          item.style.transform = "";
@@ -600,7 +604,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          item.removeAttribute("dragover-createGroup");
        }
        this.removeAttribute("movingtab-createGroup");
-@@ -2889,7 +2968,7 @@
+@@ -2889,7 +2972,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -609,7 +613,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3062,7 +3141,7 @@
+@@ -3062,7 +3145,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -618,7 +622,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          return;
        }
  
-@@ -3171,7 +3250,10 @@
+@@ -3171,7 +3254,10 @@
      #getDragTarget(event, { ignoreSides = false } = {}) {
        let { target } = event;
        while (target) {
@@ -630,7 +634,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
            break;
          }
          target = target.parentNode;
-@@ -3188,6 +3270,9 @@
+@@ -3188,6 +3274,9 @@
            return null;
          }
        }

src/zen/common/styles/zen-theme.css

@@ -86,7 +86,7 @@
   --button-hover-color: var(--in-content-button-text-color-hover) !important;
   --focus-outline-color: var(--color-accent-primary) !important;
 
-  --toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
+  --toolbarbutton-icon-fill-attention: var(--toolbar-color) !important;
   --toolbarbutton-icon-fill: currentColor !important;
 
   --button-primary-bgcolor: var(--in-content-primary-button-background) !important;

src/zen/folders/ZenFolders.mjs

@@ -817,7 +817,7 @@
       if (!group) return;
 
       gZenEmojiPicker
-        .open(group, { onlySvgIcons: true })
+        .open(group.labelElement, { onlySvgIcons: true })
         .then((icon) => {
           this.setFolderUserIcon(group, icon);
           group.dispatchEvent(new CustomEvent('ZenFolderIconChanged', { bubbles: true }));

src/zen/folders/zen-folders.css

@@ -144,7 +144,10 @@ tab-group[split-view-group] .tabbrowser-tab {
 }
 
 tab-group[split-view-group] .tab-group-label-container {
-  visibility: collapse;
+  position: absolute;
+  width: 100%;
+  height: 40px;
+  visibility: hidden;
   padding: 0 !important;
   margin: 0 !important;
 }
@@ -227,6 +230,7 @@ zen-folder {
   }
 
   margin: 0 var(--tab-block-margin);
+  margin-inline-end: 0;
 
   & > .tab-group-label-container {
     flex: 0 0 auto !important;
@@ -282,6 +286,11 @@ zen-folder {
       display: none;
     }
 
+    & > label,
+    & > #tab-label-input {
+      padding: 0 0 0 30px !important;
+    }
+
     & > label {
       width: 100% !important;
       background: transparent !important;
@@ -289,7 +298,6 @@ zen-folder {
       color: var(--sidebar-text-color) !important;
       margin: 0 !important;
       font-weight: 500;
-      padding: 0 0 0 30px !important;
       display: flex;
       align-items: center;
       height: 100% !important;

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -1260,6 +1260,7 @@
             for (const tab of tabs) {
               gBrowser.pinTab(tab);
             }
+            gBrowser.tabContainer.finishAnimateTabMove(true);
             Services.zen.playHapticFeedback();
           } else {
             shouldAddDragOverElement = true;
@@ -1280,6 +1281,7 @@
             for (const tab of tabs) {
               gBrowser.unpinTab(tab);
             }
+            gBrowser.tabContainer.finishAnimateTabMove(true);
             Services.zen.playHapticFeedback();
           } else {
             shouldAddDragOverElement = true;

src/zen/workspaces/ZenWorkspaces.mjs

@@ -407,7 +407,7 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
         if (tabs.length) {
           const defaultSelectedContainer = this.workspaceElement(
             this.activeWorkspace
-          ).querySelector('.zen-workspace-normal-tabs-section');
+          )?.querySelector('.zen-workspace-normal-tabs-section');
           const pinnedContainer = this.workspaceElement(this.activeWorkspace).querySelector(
             '.zen-workspace-pinned-tabs-section'
           );