Merge branch 'dev' into firefox-135

Signed-off-by: mr. m  <91018726+mauro-balades@users.noreply.github.com>

src/browser/base/content/ZenCustomizableUI.sys.mjs

@@ -126,7 +126,7 @@ export var ZenCustomizableUI = new (class {
     window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-top-buttons'));
     window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-icons-wrapper'));
     window.addEventListener(
-      'MozAfterPaint',
+      'DOMContentLoaded',
       () => {
         this._dispatchResizeEvent(window);
       },

src/browser/base/content/ZenUIManager.mjs

@@ -1,6 +1,7 @@
 var gZenUIManager = {
   _popupTrackingElements: [],
   _hoverPausedForExpand: false,
+  _hasLoadedDOM: false,
 
   init() {
     document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
@@ -23,6 +24,10 @@ var gZenUIManager = {
       )
     ).observe(document.getElementById('navigator-toolbox'));
 
+    SessionStore.promiseAllWindowsRestored.then(() => {
+      this._hasLoadedDOM = true;
+    });
+
     window.addEventListener('TabClose', this.updateTabsToolbar.bind(this));
   },
 
@@ -212,6 +217,45 @@ var gZenVerticalTabsManager = {
     return this.__topButtonsSeparatorElement;
   },
 
+  animateTab(aTab) {
+    if (!gZenUIManager.motion || !aTab || !gZenUIManager._hasLoadedDOM) {
+      return;
+    }
+    // get next visible tab
+    const isLastTab = () => {
+      const visibleTabs = gBrowser.visibleTabs;
+      return visibleTabs[visibleTabs.length - 1] === aTab;
+    };
+
+    const tabSize = aTab.getBoundingClientRect().height;
+    const transform = `-${tabSize}px`;
+    gZenUIManager.motion
+      .animate(
+        aTab,
+        {
+          opacity: [0, 1],
+          transform: ['scale(0.95)', 'scale(1)'],
+          marginBottom: isLastTab() ? [] : [transform, '0px'],
+        },
+        {
+          duration: 0.2,
+          easing: 'ease-out',
+        }
+      )
+      .then(() => {
+        aTab.style.removeProperty('margin-bottom');
+        aTab.style.removeProperty('transform');
+        aTab.style.removeProperty('opacity');
+      });
+    gZenUIManager.motion
+      .animate(aTab.querySelector('.tab-stack'), {
+        filter: ['blur(1px)', 'blur(0px)'],
+      })
+      .then(() => {
+        aTab.querySelector('.tab-stack').style.removeProperty('filter');
+      });
+  },
+
   get actualWindowButtons() {
     // we have multiple ".titlebar-buttonbox-container" in the DOM, because of the titlebar
     if (!this.__actualWindowButtons) {

src/browser/base/content/zen-styles/zen-animations.css

@@ -56,21 +56,6 @@
   }
 }
 
-@keyframes zen-new-tab-appear-vertical {
-  0% {
-    opacity: 0;
-    transform: translateY(-25px);
-  }
-  60% {
-    opacity: 0.8;
-    transform: translateY(4px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes zen-main-app-wrapper-animation {
   from {
     opacity: 1;

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -228,8 +228,8 @@
           1.003423 100%
         );
         transition:
-          left 0.3125s var(--zen-compact-mode-func),
-          right 0.3125s var(--zen-compact-mode-func);
+          left 0.3s var(--zen-compact-mode-func),
+          right 0.3s var(--zen-compact-mode-func);
         opacity: 1;
 
         left: -1px;

src/browser/base/content/zen-styles/zen-popup.css

@@ -56,6 +56,11 @@ panel {
   --panel-border-radius: var(--zen-native-inner-radius);
 }
 
+/* split-view popup */
+#confirmation-hint {
+  --arrowpanel-background: var(--zen-colors-primary);
+}
+
 /* app menu */
 .addon-banner-item,
 .panel-banner-item {

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -60,12 +60,6 @@
   #tabbrowser-arrowscrollbox {
     min-height: fit-content !important;
   }
-
-  #vertical-pinned-tabs-container, #tabbrowser-arrowscrollbox {
-    .tabbrowser-tab[fadein='true'][zen-initial-fadein='true'] {
-      animation: zen-new-tab-appear-vertical 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
-    }
-  }
 }
 
 :root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
@@ -78,7 +72,11 @@
 }
 
 #browser {
-  --zen-toolbox-padding: max(5px, calc(var(--zen-element-separation) / 1.5));
+  --zen-min-toolbox-padding: .4rem;
+  @media (-moz-platform: macos) {
+    --zen-min-toolbox-padding: .52rem;
+  }
+  --zen-toolbox-padding: max(var(--zen-min-toolbox-padding), calc(var(--zen-element-separation) / 1.5));
 }
 
 :root[zen-single-toolbar='true'] {
@@ -131,11 +129,15 @@
   background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
   margin: 8px auto;
   border: none;
-  min-height: 1px;
+  height: 1px;
+  max-height: 1px;
   width: 98%;
+  transition: margin 0.2s ease-in-out, background 0.2s ease-in-out, max-height 0.2s ease-in-out;
 
-  #vertical-pinned-tabs-container:not(:has(tab:not([hidden]))) + & {
-    display: none;
+  #vertical-pinned-tabs-container:not(:has(tab:not([hidden]))) + &,
+  #tabbrowser-tabs:not(:has(#tabbrowser-arrowscrollbox tab:not([hidden]))) & {
+    max-height: 0;
+    margin: 0 auto;
   }
 }
 
@@ -943,6 +945,7 @@
 
   & .tab-background {
     border-radius: var(--border-radius-medium) !important;
+    transition: background 0.2s ease-in-out;
   }
 
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
@@ -974,6 +977,10 @@
     margin-inline-end: 0 !important;
   }
 
+  &:hover .tab-background {
+    background: var(--tab-selected-bgcolor);
+  }
+
   @media (-moz-bool-pref: 'zen.theme.essentials-favicon-bg') {
     &[selected] .tab-background {
       &::after {

src/browser/base/content/zen-styles/zen-workspaces.css

@@ -61,13 +61,17 @@
 
       @media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
         & {
-          color: transparent;
-          text-shadow: 0 0 0 light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.15));
-          transition: text-shadow 0.2s ease;
+          filter: grayscale(1);
+          opacity: 0.5;
+          transition:
+            filter 0.2s,
+            opacity 0.2s;
         }
 
-        &[active='true'] {
-          text-shadow: 0 0 0 color-mix(in srgb, var(--zen-primary-color) 80%, transparent 20%);
+        &[active='true'],
+        &:hover {
+          filter: grayscale(0);
+          opacity: 1;
         }
       }
     }

src/browser/base/zen-components/ZenWorkspaces.mjs

@@ -246,9 +246,22 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this._swipeState.cumulativeDelta += event.delta;
 
     // Determine swipe direction based on cumulative delta
-    if (Math.abs(this._swipeState.cumulativeDelta) > 0.25) {
+    if (Math.abs(this._swipeState.cumulativeDelta) > 1) {
       this._swipeState.direction = this._swipeState.cumulativeDelta > 0 ? 'left' : 'right';
     }
+
+    // Apply a translateX to the tab strip to give the user feedback on the swipe
+    const stripWidth = document.getElementById('tabbrowser-tabs').scrollWidth;
+    // To make the animation larger, we multiply the delta by 5
+    let translateX = this._swipeState.cumulativeDelta * 10;
+    if (this._swipeState.direction === 'left') {
+      translateX = Math.min(translateX, stripWidth);
+    } else {
+      translateX = Math.max(translateX, -stripWidth);
+    }
+    for (const element of this._animateTabsElements) {
+      element.style.transform = `translateX(${translateX}px)`;
+    }
   }
 
   async _handleSwipeEnd(event) {
@@ -262,6 +275,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (this._swipeState.direction) {
       let direction = this.naturalScroll ? -1 : 1;
       this.changeWorkspaceShortcut(rawDirection * direction);
+    } else {
+      this._cancelSwipeAnimation();
     }
 
     // Reset swipe state
@@ -1273,10 +1288,29 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
+  _cancelSwipeAnimation() {
+    const existingTransform = this._animateTabsElements[0].style.transform;
+    const newTransform = 'translateX(0)';
+    for (const element of this._animateTabsElements) {
+      gZenUIManager.motion.animate(
+        element,
+        {
+          transform: existingTransform ? [existingTransform, newTransform] : newTransform,
+        },
+        {
+          type: 'spring',
+          bounce: 0,
+          duration: 0.12,
+        }
+      );
+    }
+  }
+
   async _performWorkspaceChange(window, { onInit = false, explicitAnimationDirection = undefined } = {}) {
     const previousWorkspace = await this.getActiveWorkspace();
 
     if (previousWorkspace && previousWorkspace.uuid === window.uuid && !onInit) {
+      this._cancelSwipeAnimation();
       return;
     }
 
@@ -1316,21 +1350,24 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
-  async _animateTabs(direction, out = false) {
+  get _animateTabsElements() {
     const selector = `#zen-browser-tabs-wrapper`;
     const extraSelector = `#zen-current-workspace-indicator`;
+    return [...this.tabContainer.querySelectorAll(selector), ...this.tabContainer.querySelectorAll(extraSelector)];
+  }
+
+  async _animateTabs(direction, out = false) {
     this.tabContainer.removeAttribute('dont-animate-tabs');
     const tabsWidth = this.tabContainer.getBoundingClientRect().width;
     // order by actual position in the children list to animate
-    const elements = Array.from([
-      ...this.tabContainer.querySelectorAll(selector),
-      ...this.tabContainer.querySelectorAll(extraSelector),
-    ]);
+    const elements = this._animateTabsElements;
     if (out) {
+      const existingTransform = elements[0].style.transform;
+      const newTransform = `translateX(${direction === 'left' ? '-' : ''}${tabsWidth}px)`;
       return gZenUIManager.motion.animate(
         elements,
         {
-          transform: `translateX(${direction === 'left' ? '-' : ''}${tabsWidth}px)`,
+          transform: existingTransform ? [existingTransform, newTransform] : newTransform,
         },
         {
           type: 'spring',