Enhance tab animations and transition effects for improved user exper…

…ience
zen-browser · Jan 29, 2025 · d158472 · d158472
1 parent cb9c7d5
commit d158472
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 15 deletions.
diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
@@ -221,14 +221,13 @@ var gZenVerticalTabsManager = {
       .animate(
         aTab,
         {
-          opacity: [0.7, 1],
-          transform: ['translateY(-20px)', 'translateY(0px)'],
+          opacity: [0, 1],
+          transform: ['translateY(-50px)', 'translateY(0px)'],
           marginBottom: isLastTab ? [] : ['-20px', '0px'],
         },
         {
           duration: 0.2,
-          type: 'spring',
-          bounce: 0,
+          easing: 'ease-out',
         }
       )
       .then(() => {

diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/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;

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -72,7 +72,7 @@
 }
 
 #browser {
-  --zen-toolbox-padding: max(5px, calc(var(--zen-element-separation) / 1.5));
+  --zen-toolbox-padding: max(.4rem, calc(var(--zen-element-separation) / 1.5));
 }
 
 :root[zen-single-toolbar='true'] {

diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/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 ce68c339f35416574b7bc7ebf8c93378f653242b..810b9c96bc26cc75e37c8b1ed6a61c1a51e123b8 100644
+index ce68c339f35416574b7bc7ebf8c93378f653242b..751dfb93d39b9e066b8c2c0aabdebb5581606e12 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -409,11 +409,39 @@
@@ -204,7 +204,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..810b9c96bc26cc75e37c8b1ed6a61c1a
        if (typeof index != "number") {
          // Move the new tab after another tab if needed, to the end otherwise.
 -        index = Infinity;
-+        index = Services.prefs.getBoolPref("zen.view.show-newtab-button-top") ? this.pinnedTabCount + 1 : Infinity;
++        index = Services.prefs.getBoolPref("zen.view.show-newtab-button-top") ? this.pinnedTabCount : Infinity;
          if (
            !bulkOrderedOpen &&
            ((openerTab &&

diff --git a/src/browser/components/zen-welcome/welcome.css b/src/browser/components/zen-welcome/welcome.css
@@ -39,7 +39,7 @@ body {
 #welcome .zen-branding-title,
 #thanks .zen-branding-title {
   text-align: center;
-  font-size: 9rem;
+  font-size: 7rem;
 }
 
 #buttons-footer {
@@ -62,11 +62,6 @@ body {
   }
 }
 
-body:has(#welcome:not([hidden='true'])) {
-  background: var(--zen-branding-coral);
-  color: var(--zen-branding-paper);
-}
-
 body:has(:is(#welcome, #thanks):not([hidden='true'])) {
   & #buttons-footer {
     justify-content: center;