no-bug - Improved icon handling and added support for rearranging, c=common, folders, tabs, t=feat

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index d5aa64842a35c6697263c63fd3a0571b64b01344..e6dd6f42cb2bb1fc8957ea3c4bfe87d6538a1f24 100644
+index d5aa64842a35c6697263c63fd3a0571b64b01344..c9a0a404324ae0ae139f92d82270206683470e4f 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -413,11 +413,41 @@
@@ -9,7 +9,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e6dd6f42cb2bb1fc8957ea3c4bfe87d6
 +    get _numVisiblePinTabsWithoutCollapsed() {
 +      let i = 0;
 +      for (let item of this.tabContainer.ariaFocusableItems) {
-+        if (!!item?.classList?.contains("tab-group-label") && item.closest("tab-folder").pinned) {
++        if (this.isTabGroupLabel(item) && item.closest("zen-folder")?.pinned) {
 +          i += 1;
 +          continue;
 +        }
@@ -54,7 +54,13 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e6dd6f42cb2bb1fc8957ea3c4bfe87d6
        tab.linkedPanel = uniqueId;
        this._selectedTab = tab;
        this._selectedBrowser = browser;
-@@ -834,11 +865,13 @@
+@@ -829,16 +860,18 @@
+     }
+ 
+     pinTab(aTab) {
+-      if (aTab.pinned || aTab == FirefoxViewHandler.tab) {
++      if (aTab.pinned || aTab == FirefoxViewHandler.tab || aTab.hasAttribute("zen-empty-tab")) {
+         return;
        }
  
        this.showTab(aTab);

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabgroup.js b/browser/components/tabbrowser/content/tabgroup.js
-index 6dc774ea335b0c5dba7dcf76cdb23728faae1343..3872cef8158d391f56ec417382382bc641a859b8 100644
+index 6dc774ea335b0c5dba7dcf76cdb23728faae1343..523ae38163c04ba8e37b767394bc98e8d5138537 100644
 --- a/browser/components/tabbrowser/content/tabgroup.js
 +++ b/browser/components/tabbrowser/content/tabgroup.js
 @@ -13,10 +13,13 @@
@@ -7,12 +7,11 @@ index 6dc774ea335b0c5dba7dcf76cdb23728faae1343..3872cef8158d391f56ec417382382bc6
    class MozTabbrowserTabGroup extends MozXULElement {
      static markup = `
 -      <vbox class="tab-group-label-container" pack="center">
--        <label class="tab-group-label" role="button"/>
++      <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 class="tab-group-label-container" pack="center">
-+        <image class="tab-group-folder-icon"/>
-+         <label class="tab-group-label" role="button"/>
 +      </hbox>
 +      <html:div class="tab-group-container">
 +        <html:div class="zen-tab-group-start" />

src/browser/themes/shared/zen-icons/common/folder-closed.svg

@@ -1 +0,0 @@
-<svg width="28" height="19" viewBox="-5 0 30 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 3.5C1 2.39543 1.89543 1.5 3 1.5H8L10 3.5H15C16.1046 3.5 17 4.39543 17 5.5V15.5C17 16.6046 16.1046 17.5 15 17.5H3C1.89543 17.5 1 16.6046 1 15.5V3.5Z" fill="context-stroke"></path><path d="M1 3.5C1 2.39543 1.89543 1.5 3 1.5H8L10 3.5H15C16.1046 3.5 17 4.39543 17 5.5V15.5C17 16.6046 16.1046 17.5 15 17.5H3C1.89543 17.5 1 16.6046 1 15.5V3.5Z" fill="context-fill"  fill-opacity="0.7"></path><path d="M1 3.5C1 2.39543 1.89543 1.5 3 1.5H8L10 3.5H15C16.1046 3.5 17 4.39543 17 5.5V15.5C17 16.6046 16.1046 17.5 15 17.5H3C1.89543 17.5 1 16.6046 1 15.5V3.5Z" stroke="context-stroke" stroke-width="1.5"></path><path d="M1 8.5C1 7.39543 1.89543 6.5 3 6.5H15C16.1046 6.5 17 7.39543 17 8.5V15.5C17 16.6046 16.1046 17.5 15 17.5H3C1.89543 17.5 1 16.6046 1 15.5V8.5Z" fill="context-fill" stroke="context-stroke" stroke-width="1.5" style="stroke-opacity: 1;"></path></svg>

src/browser/themes/shared/zen-icons/common/folder-open.svg

@@ -1 +0,0 @@
-<svg width="28" height="19" viewBox="-3 0 30 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.44411 3.86858C1.21333 2.63775 2.15758 1.5 3.40985 1.5H7.81325C8.40681 1.5 8.96971 1.76365 9.34969 2.21963L9.40031 2.28037C9.7803 2.73635 10.3432 3 10.9367 3H15.3153C16.2888 3 17.1208 3.70088 17.2862 4.66019L19.0966 15.1602C19.3073 16.3826 18.3661 17.5 17.1257 17.5H5.65985C4.69742 17.5 3.87147 16.8145 3.69411 15.8686L1.44411 3.86858Z" fill="context-stroke" fill-opacity="1"></path><path d="M1.44411 3.86858C1.21333 2.63775 2.15758 1.5 3.40985 1.5H7.81325C8.40681 1.5 8.96971 1.76365 9.34969 2.21963L9.40031 2.28037C9.7803 2.73635 10.3432 3 10.9367 3H15.3153C16.2888 3 17.1208 3.70088 17.2862 4.66019L19.0966 15.1602C19.3073 16.3826 18.3661 17.5 17.1257 17.5H5.65985C4.69742 17.5 3.87147 16.8145 3.69411 15.8686L1.44411 3.86858Z" fill="context-fill" fill-opacity="0.7"></path><path d="M1.44411 3.86858C1.21333 2.63775 2.15758 1.5 3.40985 1.5H7.81325C8.40681 1.5 8.96971 1.76365 9.34969 2.21963L9.40031 2.28037C9.7803 2.73635 10.3432 3 10.9367 3H15.3153C16.2888 3 17.1208 3.70088 17.2862 4.66019L19.0966 15.1602C19.3073 16.3826 18.3661 17.5 17.1257 17.5H5.65985C4.69742 17.5 3.87147 16.8145 3.69411 15.8686L1.44411 3.86858Z" fill="url(#paint0_linear_70_12)" fill-opacity="0.15"></path><path d="M1.44411 3.86858C1.21333 2.63775 2.15758 1.5 3.40985 1.5H7.81325C8.40681 1.5 8.96971 1.76365 9.34969 2.21963L9.40031 2.28037C9.7803 2.73635 10.3432 3 10.9367 3H15.3153C16.2888 3 17.1208 3.70088 17.2862 4.66019L19.0966 15.1602C19.3073 16.3826 18.3661 17.5 17.1257 17.5H5.65985C4.69742 17.5 3.87147 16.8145 3.69411 15.8686L1.44411 3.86858Z" stroke="context-stroke" stroke-width="1.5"></path><path d="M5.59806 7.97376C5.83537 7.10364 6.62569 6.5 7.52759 6.5H19.3815C20.7002 6.5 21.658 7.75396 21.311 9.02623L19.4019 16.0262C19.1646 16.8964 18.3743 17.5 17.4724 17.5H5.6185C4.29975 17.5 3.34199 16.246 3.68897 14.9738L5.59806 7.97376Z" fill="context-fill" fill-opacity="1"></path><path d="M5.59806 7.97376C5.83537 7.10364 6.62569 6.5 7.52759 6.5H19.3815C20.7002 6.5 21.658 7.75396 21.311 9.02623L19.4019 16.0262C19.1646 16.8964 18.3743 17.5 17.4724 17.5H5.6185C4.29975 17.5 3.34199 16.246 3.68897 14.9738L5.59806 7.97376Z" fill="url(#paint1_linear_70_12)" fill-opacity="0.15"></path><path d="M5.59806 7.97376C5.83537 7.10364 6.62569 6.5 7.52759 6.5H19.3815C20.7002 6.5 21.658 7.75396 21.311 9.02623L19.4019 16.0262C19.1646 16.8964 18.3743 17.5 17.4724 17.5H5.6185C4.29975 17.5 3.34199 16.246 3.68897 14.9738L5.59806 7.97376Z" stroke="context-stroke" stroke-width="1.5"></path><defs><linearGradient id="paint0_linear_70_12" x1="13.5" y1="5.8125" x2="13.5" y2="17.5" gradientUnits="userSpaceOnUse"><stop stop-opacity="0"></stop><stop offset="1" stop-color="black" stop-opacity="1"></stop></linearGradient><linearGradient id="paint1_linear_70_12" x1="12.5" y1="5.49404" x2="12.5" y2="17.5" gradientUnits="userSpaceOnUse"><stop stop-opacity="0"></stop><stop offset="1" stop-color="black" stop-opacity="1"></stop></linearGradient></defs></svg>

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

@@ -768,9 +768,5 @@
 
 /* Tab folders */
 .tab-group-folder-icon {
-  list-style-image: url('folder-open.svg');
+  list-style-image: url('folder.svg');
-
-  tab-group[collapsed] > .tab-group-label-container & {
-    list-style-image: url('folder-closed.svg');
-  }
 }

src/browser/themes/shared/zen-icons/jar.inc.mn

@@ -413,7 +413,5 @@
   skin/classic/browser/zen-icons/zoom-control.svg                      (../shared/zen-icons/lin/zoom-control.svg) 
   skin/classic/browser/zen-icons/zoom-out.svg                      (../shared/zen-icons/lin/zoom-out.svg) 
 #endif
-  skin/classic/browser/zen-icons/folder-closed.svg                      (../shared/zen-icons/common/folder-closed.svg) 
-  skin/classic/browser/zen-icons/folder-open.svg                      (../shared/zen-icons/common/folder-open.svg) 
   skin/classic/browser/zen-icons/urlbar-arrow.svg                      (../shared/zen-icons/common/urlbar-arrow.svg) 
   skin/classic/browser/zen-icons/icons.css                      (../shared/zen-icons/icons.css) 

src/zen/folders/ZenFolders.mjs

@@ -3,12 +3,62 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 {
   class ZenFolder extends MozTabbrowserTabGroup {
+    #initialized = false;
+
+    static rawIcon = new DOMParser().parseFromString(
+      `
+        <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="-67.409 -14.145 29.279 28.92">
+          <defs>
+            <linearGradient gradientUnits="userSpaceOnUse" x1="-53.05" y1="-3.8" x2="-53.05" y2="8.998" id="gradient-1">
+              <stop offset="0" style="stop-color: rgb(255, 255, 255);"/>
+              <stop offset="1" style="stop-color: rgb(0% 0% 0%)"/>
+            </linearGradient>
+              <linearGradient gradientUnits="userSpaceOnUse" x1="-40.286" y1="-3.091" x2="-40.286" y2="13.31" id="gradient-0" gradientTransform="matrix(1, 0, 0, 1, -12.717999, -4.409)">
+              <stop offset="0" style="stop-color: rgb(255, 255, 255);"/>
+              <stop offset="1" style="stop-color: rgb(0% 0% 0%)"/>
+            </linearGradient>
+          </defs>
+          <path d="M -61.3 -5.25 C -61.3 -6.492 -60.293 -7.5 -59.05 -7.5 L -55.102 -7.5 C -54.591 -7.5 -54.096 -7.326 -53.697 -7.007 L -52.84 -6.321 C -52.175 -5.79 -51.349 -5.5 -50.498 -5.5 L -47.05 -5.5 C -45.807 -5.5 -44.8 -4.492 -44.8 -3.25 L -44.731 4.42 L -44.708 6.651 C -44.708 7.894 -45.715 8.901 -46.958 8.901 L -58.958 8.901 C -60.201 8.901 -61.208 7.894 -61.208 6.651 L -61.3 4.752 L -61.3 -5.25 Z" style="stroke-width: 1.25px; transform-box: fill-box; transform-origin: 50% 50%; fill: var(--zen-workspace-color-bg); stroke: currentColor;">
+            <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;17" dur="0.4s" fill="freeze" keyTimes="0; 1" end="0.6s" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+            <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-0.4 -0.2" dur="0.4s" keyTimes="0; 1" fill="freeze" end="0.6s" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+            <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.9 0.9" begin="0s" dur="0.4s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+          </path>
+          <path d="M -61.3 -5.25 C -61.3 -6.492 -60.293 -7.5 -59.05 -7.5 L -55.102 -7.5 C -54.591 -7.5 -54.096 -7.326 -53.697 -7.007 L -52.84 -6.321 C -52.175 -5.79 -51.349 -5.5 -50.498 -5.5 L -47.05 -5.5 C -45.807 -5.5 -44.8 -4.492 -44.8 -3.25 L -44.731 4.42 L -44.708 6.651 C -44.708 7.894 -45.715 8.901 -46.958 8.901 L -58.958 8.901 C -60.201 8.901 -61.208 7.894 -61.208 6.651 L -61.3 4.752 L -61.3 -5.25 Z" style="stroke-width: 1.25; fill-opacity: 0.15; fill: url(&quot;#gradient-0&quot;); transform-origin: -53.004px 0.701px;">
+            <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;17" dur="0.4s" fill="freeze" keyTimes="0; 1" end="0.6s" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+            <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-0.4 -0.2" dur="0.4s" keyTimes="0; 1" fill="freeze" end="0.6s" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+            <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.9 0.9" begin="0s" dur="0.4s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+          </path>
+          <rect x="-61.301" y="-3.768" width="16.5" height="12.798" rx="2.25" style="stroke-width: 1.25px; transform-box: fill-box; transform-origin: 50% 50%; fill: var(--zen-colors-primary); stroke: currentColor;" id="object-0">
+            <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-17" dur="0.4s" keyTimes="0; 1" max="0.6s" fill="freeze" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+            <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;3 -0.5" dur="0.4s" fill="freeze" keyTimes="0; 1" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+            <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.9 0.9" begin="0s" dur="0.4s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+          </rect>
+          <rect x="-61.3" y="-3.8" width="16.5" height="12.798" style="stroke-width: 1.25; fill-opacity: 0.15; transform-origin: -53.05px 2.599px; fill: url(&quot;#gradient-1&quot;);" id="rect-1" rx="2.25">
+            <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-17" dur="0.4s" keyTimes="0; 1" max="0.6s" fill="freeze" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+            <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;3 -0.5" dur="0.4s" fill="freeze" keyTimes="0; 1" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+            <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.9 0.9" dur="0.4s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+          </rect>
+        </svg>
+      `,
+      'image/svg+xml'
+    ).documentElement;
+
     constructor() {
       super();
     }
 
     connectedCallback() {
       super.connectedCallback();
+      if (this.#initialized) {
+        return;
+      }
+      this.#initialized = true;
+      this.icon.appendChild(ZenFolder.rawIcon.cloneNode(true));
+      this.labelElement.pinned = true;
+    }
+
+    get icon() {
+      return this.querySelector('.tab-group-folder-icon');
     }
 
     /**
@@ -190,8 +240,8 @@
       folder.label = label;
       folder.collapsed = !!options.collapsed;
       folder.pinned = true;
-      folder.addTabs(tabs);
       insertBefore.before(folder);
+      folder.addTabs(tabs);
 
       // Fixes bug1953801 and bug1954689
       // Ensure that the tab state cache is updated immediately after creating
@@ -203,6 +253,7 @@
         gBrowser.TabStateFlusher.flush(tab.linkedBrowser);
       });
 
+      this.#updateFolderIcon(folder, false);
       return folder;
     }
 
@@ -215,6 +266,7 @@
       let heightUntilSelected = 0;
       let selectedItem = null;
       let itemsAfterSelected = [];
+      animations.push(...this.#updateFolderIcon(group));
       for (const item of tabsContainer.children) {
         const rect = item.getBoundingClientRect();
         if (item.hasAttribute('visuallyselected')) {
@@ -247,6 +299,7 @@
       const groupStart = group.querySelector('.zen-tab-group-start');
       const animations = [];
       tabsContainer.style.overflow = 'hidden';
+      animations.push(...this.#updateFolderIcon(group));
       animations.push(
         gZenUIManager.motion.animate(
           groupStart,
@@ -262,6 +315,30 @@
       await Promise.all(animations);
       tabsContainer.style.overflow = '';
     }
+
+    #updateFolderIcon(group, actuallyAnimate = true) {
+      const svgElement = group.icon.querySelector('svg');
+      if (!svgElement) {
+        return;
+      }
+      const targetIsCollapsed = !group.collapsed;
+      const iconContainer = group.icon;
+      svgElement.querySelectorAll('animate, animateTransform, animateMotion').forEach((anim) => {
+        const v = anim.getAttribute('values');
+        if (v) {
+          const o = v.split(';');
+          if (o.length === 2) anim.setAttribute('values', `${o[1]};${o[0]}`);
+        }
+      });
+      iconContainer.innerHTML = '';
+      iconContainer.appendChild(svgElement);
+      if (!actuallyAnimate) {
+        svgElement.pauseAnimations();
+        svgElement.setCurrentTime(targetIsCollapsed ? 0 : 0.4);
+      }
+      iconContainer.dataset.iconIsCollapsed = String(targetIsCollapsed);
+      return [];
+    }
   }
 
   window.gZenFolders = new ZenFolders();

src/zen/folders/zen-folders.css

@@ -201,12 +201,11 @@ zen-folder {
     }
 
     .tab-group-folder-icon {
-      width: 28px;
+      width: 30px;
       height: 28px;
       margin-inline-end: calc(var(--toolbarbutton-inner-padding) / 3) !important;
-      -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
+      align-content: center;
-      stroke: currentColor;
+      pointer-events: none;
-      fill: var(--zen-colors-primary);
     }
 
     &:hover {

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -793,6 +793,7 @@
       if (!this.enabled) {
         return false;
       }
+      movingTabs = [...movingTabs];
       try {
         const pinnedTabsTarget =
           event.target.closest('.zen-workspace-pinned-tabs-section') ||
@@ -803,7 +804,7 @@
         // with the sub tabs
         for (let i = 0; i < movingTabs.length; i++) {
           const draggedTab = movingTabs[i];
-          if (draggedTab.classList.contains('tab-group-label')) {
+          if (gBrowser.isTabGroupLabel(draggedTab)) {
             const group = draggedTab.group;
             // remove label and add sub tabs to moving tabs
             if (group) {
@@ -1004,6 +1005,11 @@
       if (!this.enabled) {
         return;
       }
+      if (gBrowser.isTabGroupLabel(draggedTab)) {
+        // If the target is a tab group label, we don't want to apply the dragover class
+        this.removeTabContainersDragoverClass();
+        return;
+      }
       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');