Refactor compact mode logic and enhance pinned tab URL handling (closes https://github.com/zen-browser/desktop/issues/7453#issuecomment-2794479221)

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

@@ -118,6 +118,7 @@
   --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
   --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
   --urlbar-box-hover-bgcolor: var(--toolbarbutton-hover-background) !important;
+  --input-bgcolor: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
 
   /* XUL */
   --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);

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

@@ -57,7 +57,6 @@ var gZenCompactModeManager = {
     }
 
     this.preference = this._wasInCompactMode;
-    delete this._wasInCompactMode;
   },
 
   get preference() {
@@ -195,11 +194,15 @@ var gZenCompactModeManager = {
       const isCompactMode = this.preference;
       const canHideSidebar =
         Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') || gZenVerticalTabsManager._hasSetSingleToolbar;
-      const canAnimate =
+      let canAnimate =
         lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR &&
         !this.sidebar.hasAttribute('zen-user-show') &&
         !this.sidebar.hasAttribute('zen-has-empty-tab') &&
         !this.sidebar.hasAttribute('zen-has-hover');
+      if (typeof this._wasInCompactMode !== 'undefined') {
+        canAnimate = false;
+        delete this._wasInCompactMode;
+      }
       // Do this so we can get the correct width ONCE compact mode styled have been applied
       if (canAnimate) {
         this.sidebar.setAttribute('animate', 'true');

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

@@ -386,8 +386,8 @@
       await this._resetTabToStoredState(tab);
     }
 
-    async replacePinnedUrlWithCurrent() {
-      const tab = TabContextMenu.contextTab;
+    async replacePinnedUrlWithCurrent(tab = undefined) {
+      tab ??= TabContextMenu.contextTab;
       if (!tab || !tab.pinned || !tab.getAttribute('zen-pin-id')) {
         return;
       }
@@ -806,8 +806,11 @@
       if (!pin) {
         return;
       }
+      // Remove # and ? from the url
+      const pinUrl = pin.url.split('#')[0].split('?')[0];
+      const currentUrl = browser.currentURI.spec.split('#')[0].split('?')[0];
       // Add an indicator that the pin has been changed
-      if (pin.url === browser.currentURI.spec) {
+      if (pinUrl === currentUrl) {
         this.resetPinChangedUrl(tab);
         return;
       }
@@ -967,6 +970,20 @@
         indicator.style.removeProperty('top');
       }
     }
+
+    async onTabLabelChanged(tab) {
+      if (!this._pinsCache) {
+        return;
+      }
+      // If our current pin in the cache point to about:blank, we need to update the entry
+      const pin = this._pinsCache.find((pin) => pin.uuid === tab.getAttribute('zen-pin-id'));
+      if (!pin) {
+        return;
+      }
+      if (pin.url === 'about:blank') {
+        await this.replacePinnedUrlWithCurrent(tab);
+      }
+    }
   }
 
   window.gZenPinnedTabManager = new ZenPinnedTabManager();