Added sidebar compact mode animations!

zen-browser · Dec 13, 2024 · a9fb598 · a9fb598
1 parent c67fc71
commit a9fb598
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css
@@ -2,7 +2,7 @@ height: var(--zen-toolbar-height);
 
 @media (-moz-bool-pref: 'zen.view.hide-window-controls') {
   & {
-    transition: height 0.2s ease-out, opacity 0.2s ease-out;
+    transition: height 0.2s ease, opacity 0.2s ease-out;
     transition-delay: 0.05s;
   }
 

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
@@ -371,7 +371,7 @@
     padding-right: 0;
 
     :root[zen-single-toolbar='true'] & {
-      margin-left: calc(var(--zen-toolbox-padding) / 2);
+      margin-left: var(--zen-toolbox-padding);
       width: calc(100% - var(--zen-toolbox-padding));
       & #urlbar:not([breakout-extend='true']) .urlbar-input-container {
         padding-left: 4px;

diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs
@@ -93,6 +93,56 @@ var gZenCompactModeManager = {
     this._evenListeners.forEach((callback) => callback());
     this._disableTabsOnHoverIfConflict();
     this.updateContextMenu();
+    this.animateCompactMode();
+  },
+
+  animateCompactMode() {
+    const isCompactMode = this.prefefence;
+    const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
+    if (this._isAnimating) {
+      return;
+    }
+    this._isAnimating = true;
+    if (canHideSidebar && isCompactMode) {
+      window.requestAnimationFrame(() => {
+        this.sidebar.style.position = "relative";
+        this.sidebar.style.transition = "margin-left .3s ease";
+        this.sidebar.style.marginLeft = `calc(-1 * ${this.sidebar.getAttribute("width")}px)`;
+        this.sidebar.style.pointerEvents = "none";
+        this.sidebar.style.opacity = "0";
+
+        setTimeout(() => {
+          window.requestAnimationFrame(() => {
+            this._isAnimating = false;
+            this.sidebar.style.removeProperty("position");
+            this.sidebar.style.removeProperty("transition");
+            this.sidebar.style.removeProperty("margin-left");
+            this.sidebar.style.removeProperty("pointer-events");
+            this.sidebar.style.removeProperty("opacity");
+          });
+        }, 300);
+      });
+    } else if (canHideSidebar && !isCompactMode) {
+      // we are in compact mode and we are exiting it
+      this.sidebar.style.marginLeft = `calc(-1 * ${this.sidebar.getAttribute("width")}px)`;
+
+      window.requestAnimationFrame(() => {
+        this.sidebar.style.position = "relative";
+        this.sidebar.style.transition = "margin-left .3s ease";
+        this.sidebar.style.marginLeft = "0";
+        this.sidebar.style.pointerEvents = "none";
+
+        setTimeout(() => {
+          window.requestAnimationFrame(() => {
+            this._isAnimating = false;
+            this.sidebar.style.removeProperty("position");
+            this.sidebar.style.removeProperty("transition");
+            this.sidebar.style.removeProperty("margin-left");
+            this.sidebar.style.removeProperty("pointer-events");
+          });
+        }, 300);
+      });
+    }
   },
 
   updateContextMenu() {