Refactor URL bar behavior, update compact mode styles, and enhance sidebar animations

src/browser/app/profile/zen-browser.js

@@ -108,7 +108,7 @@ pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
 pref('zen.view.compact.color-toolbar', true);
 pref('zen.view.compact.color-sidebar', true);
 
-pref('zen.urlbar.behavior', 'float'); // default, floating-on-type, float
+pref('zen.urlbar.behavior', 'floating-on-type'); // default, floating-on-type, float
 
 #ifdef XP_MACOSX
 // Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens

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

@@ -12,7 +12,6 @@
     margin: 1px;
 
     :root[zen-right-side='true'] & {
-      margin-right: 0;
       margin-left: var(--zen-element-separation);
     }
 

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

@@ -33,7 +33,6 @@
         position: absolute;
         z-index: 10;
         transition: transform 0.25s ease, opacity 0.1s ease-in-out;
-        right: calc(100% - var(--zen-element-separation));
         top: 0;
         bottom: var(--zen-element-separation);
         opacity: 0;
@@ -50,6 +49,10 @@
         }
       }
 
+      &:not([zen-right-side='true']) #navigator-toolbox {
+        right: calc(100% - var(--zen-element-separation));
+      }
+
       /* When we have multiple toolbars and the top-toolbar is NOT being hidden,
         * we need to adjust the top-padding of the toolbox to account for the
         * extra toolbar height. */
@@ -65,7 +68,6 @@
           padding-left: unset !important;
           padding-right: var(--zen-compact-float) !important;
           left: calc(100% - var(--zen-element-separation));
-          right: unset;
         }
 
         & .browserSidebarContainer {

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

@@ -353,9 +353,12 @@ button.popup-notification-dropmarker {
   }
 }
 
+:root[zen-single-toolbar='true'] #urlbar[open] {
+  min-width: 45vw;
+}
+
 #urlbar[open][zen-floating-urlbar='true'] {
   z-index: 1000;
-  min-width: 45vw;
   max-width: 45vw;
   top: 0 !important;
 
@@ -435,7 +438,7 @@ button.popup-notification-dropmarker {
   }
 
   &:hover {
-    background-color: var(--zen-colors-primary) !important;
+    background-color: light-dark(var(--zen-colors-secondary), var(--zen-colors-primary)) !important;
 
     .urlbarView-favicon {
       background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 20%, transparent 80%) !important;

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

@@ -104,48 +104,71 @@ var gZenCompactModeManager = {
       return;
     }
     this._isAnimating = true;
+    const sidebarWidth = this.sidebar.getBoundingClientRect().width;
     if (canHideSidebar && isCompactMode) {
-      window.requestAnimationFrame(() => {
+      document.getElementById('browser').style.overflow = "hidden";
-        window.requestAnimationFrame(() => {
+      this.sidebar.style.position = "relative";
-          this.sidebar.style.position = "relative";
+      this.sidebar.style.transition = "margin .3s ease, transform .4s ease, opacity .3s ease";
-          this.sidebar.style.transition = "margin-left .3s ease";
+      this.sidebar.style.left = "0";
-          this.sidebar.style.marginLeft = `${(this.sidebarIsOnRight ? 1 : -1) * this.sidebar.getAttribute("width")}px`;
+      if (!this.sidebarIsOnRight) {
-          this.sidebar.style.pointerEvents = "none";
+        this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
-          this.sidebar.style.opacity = "0";
+      } else {
+        this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`;
+      }
+      this.sidebar.style.pointerEvents = "none";
 
-          setTimeout(() => {
+      setTimeout(() => {
-            window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
-              this._isAnimating = false;
+          this._isAnimating = false;
-              this.sidebar.style.removeProperty("position");
+          this.sidebar.style.removeProperty("opacity");
-              this.sidebar.style.removeProperty("transition");
+          this.sidebar.style.removeProperty("position");
-              this.sidebar.style.removeProperty("margin-left");
+          this.sidebar.style.removeProperty("transition");
-              this.sidebar.style.removeProperty("pointer-events");
+          this.sidebar.style.removeProperty("pointer-events");
-              this.sidebar.style.removeProperty("opacity");
+          this.sidebar.style.removeProperty("margin-left");
-            });
+          this.sidebar.style.removeProperty("margin-right");
-          }, 300);
+          this.sidebar.style.removeProperty("transform");
+          this.sidebar.style.removeProperty("left");
+          document.getElementById('browser').style.removeProperty("overflow");
         });
-      });
+      }, 400);
     } else if (canHideSidebar && !isCompactMode) {
-      // we are in compact mode and we are exiting it
+      document.getElementById('browser').style.overflow = "hidden";
-      this.sidebar.style.marginLeft = `${(this.sidebarIsOnRight ? 1 : -1) * this.sidebar.getAttribute("width")}px`;
+      this.sidebar.style.position = "relative";
+      this.sidebar.style.left = "0";
+
+      if (!this.sidebarIsOnRight) {
+        this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
+      } else {
+        this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`;
+        this.sidebar.style.transform = `translateX(${sidebarWidth}px)`;
+      }
 
       window.requestAnimationFrame(() => {
-        window.requestAnimationFrame(() => {
+        this.sidebar.style.transition = "margin .3s ease, transform .4s ease, opacity .3s ease";
-          this.sidebar.style.position = "relative";
+        // we are in compact mode and we are exiting it
-          this.sidebar.style.transition = "margin-left .3s ease";
+        if (!this.sidebarIsOnRight) {
           this.sidebar.style.marginLeft = "0";
-          this.sidebar.style.pointerEvents = "none";
+        } else {
+          this.sidebar.style.marginRight = "0";
+          this.sidebar.style.transform = "translateX(0)";
+        }
+        this.sidebar.style.pointerEvents = "none";
 
-          setTimeout(() => {
+        setTimeout(() => {
-            window.requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
-              this._isAnimating = false;
+            this._isAnimating = false;
-              this.sidebar.style.removeProperty("position");
+            this.sidebar.style.removeProperty("position");
-              this.sidebar.style.removeProperty("transition");
+            this.sidebar.style.removeProperty("pointer-events");
-              this.sidebar.style.removeProperty("margin-left");
+            this.sidebar.style.removeProperty("opacity");
-              this.sidebar.style.removeProperty("pointer-events");
+            this.sidebar.style.removeProperty("margin-left");
-            });
+            this.sidebar.style.removeProperty("margin-right");
-          }, 300);
+            this.sidebar.style.removeProperty("transform");
-        });
+            this.sidebar.style.removeProperty("transition");
+            this.sidebar.style.removeProperty("left");
+
+            document.getElementById('browser').style.removeProperty("overflow");
+          });
+        }, 400);
       });
     }
   },

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

@@ -702,7 +702,7 @@ function zenGetDefaultShortcuts() {
 }
 
 class ZenKeyboardShortcutsVersioner {
-  static LATEST_KBS_VERSION = 4;
+  static LATEST_KBS_VERSION = 5;
 
   constructor() {}
 
@@ -807,6 +807,21 @@ class ZenKeyboardShortcutsVersioner {
       //  since it's not used anymore.
       data = data.filter((shortcut) => shortcut.getID() != 'zen-toggle-sidebar');
     }
+    if (version < 5) {
+      // Migrate from 4 to 5
+      // Here, we are adding the 'zen-toggle-sidebar' shortcut back, but with a new action
+      data.push(
+        new KeyShortcut(
+          'zen-toggle-sidebar',
+          'B',
+          '',
+          ZEN_OTHER_SHORTCUTS_GROUP,
+          KeyShortcutModifiers.fromObject({ alt: true }),
+          'code:gZenVerticalTabsManager.toggleExpand()',
+          'zen-sidebar-shortcut-toggle'
+        )
+      );
+    }
     return data;
   }
 }