Enhance ZenGlanceManager to conditionally open tabs based on domain differences and refactor tab open handling

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

.github/workflows/build.yml

@@ -441,7 +441,7 @@ jobs:
           echo "Stopping self-hosted runner"
           echo "${{ secrets.SELF_HOSTED_RUNNER_STOP_SCRIPT }}" | base64 -d > stop.sh
           sudo chmod +x stop.sh
-          bash ./stop.sh > /dev/null 2>&1 &
+          bash ./stop.sh > /dev/null
 
       - name: Remove self-hosted runner script
         if: always() && ${{ inputs.create_release && inputs.update_branch == 'release' }}

README.md

@@ -28,9 +28,9 @@
 
 ## 🖥️ Compatibility
 
-Zen is currently built using firefox version `134.0.1`! 🚀
+Zen is currently built using firefox version `134.0.2`! 🚀
 
-- [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using firefox version `RC 134.0.1`!
+- [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using firefox version `RC 134.0.2`!
 - Check out the latest [release notes](https://zen-browser.app/release-notes)!
 - Part of our mission is to keep Zen up-to-date with the latest version of Firefox, so you can enjoy the latest features and security updates!
 

flatpak/app.zen_browser.zen.yml.template

@@ -44,21 +44,21 @@ modules:
 
     sources:
       - type: archive
-        url: https://github.com/zen-browser/desktop/releases/download/${version}/zen.linux-x86_64.tar.bz2
+        url: https://github.com/zen-browser/desktop/releases/download/{version}/zen.linux-x86_64.tar.bz2
         sha256: {linux_sha256}
         strip-components: 0
         only-arches:
           - x86_64
 
       - type: archive
-        url: https://github.com/zen-browser/desktop/releases/download/${version}/zen.linux-aarch64.tar.bz2
+        url: https://github.com/zen-browser/desktop/releases/download/{version}/zen.linux-aarch64.tar.bz2
         sha256: {linux_aarch64_sha256}
         strip-components: 0
         only-arches:
           - aarch64
 
       - type: archive
-        url: https://github.com/zen-browser/flatpak/releases/download/${version}/archive.tar
+        url: https://github.com/zen-browser/flatpak/releases/download/{version}/archive.tar
         sha256: {flatpak_sha256}
         strip-components: 0
         dest: metadata

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

@@ -102,10 +102,14 @@ pref('zen.injections.match-urls', 'http://localhost/*', locked);
 pref('zen.rice.share.notice.accepted', false);
 
 #ifdef XP_MACOSX
-pref('zen.theme.border-radius', 11); // In pixels
+pref('zen.theme.border-radius', 12); // In pixels
+#else
+#ifdef XP_WIN
+pref('zen.theme.border-radius', 12); // In pixels
 #else
 pref('zen.theme.border-radius', 8); // In pixels
 #endif
+#endif
 
 pref('zen.theme.color-prefs.use-workspace-colors', true);
 pref('zen.theme.color-prefs.amoled', false);
@@ -129,9 +133,10 @@ pref('zen.view.experimental-rounded-view', false);
 pref('zen.view.experimental-rounded-view', true);
 #endif
 
+// Glance
 pref('zen.glance.enabled', true);
 pref('zen.glance.hold-duration', 300); // in ms
-
+pref('zen.glance.open-essential-external-links', true);
 pref('zen.glance.activation-method', 'alt'); // ctrl, alt, shift, none, hold
 
 pref('zen.view.sidebar-height-throttle', 200); // in ms
@@ -201,9 +206,11 @@ pref('zen.workspaces.wrap-around-navigation', true);
 pref('zen.workspaces.natural-scroll', false);
 pref('zen.workspaces.scroll-modifier-key','ctrl'); // can be ctrl, alt, shift, or a meta key
 pref('services.sync.engine.workspaces', false);
-pref('zen.essentials.enabled', true);
 pref('zen.workspaces.container-specific-essentials-enabled', false);
 
+// Essentials
+pref('zen.essentials.enabled', true);
+
 // Zen Watermark
 #ifdef MOZILLA_OFFICIAL
 pref('zen.watermark.enabled', true, sticky);

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

@@ -11,7 +11,7 @@ export var ZenCustomizableUI = new (class {
       'zen-sidebar-top-buttons',
       {
         type: this.TYPE_TOOLBAR,
-        defaultPlacements: ['home-button'],
+        defaultPlacements: [],
         defaultCollapsed: null,
         overflowable: true,
       },
@@ -64,6 +64,7 @@ export var ZenCustomizableUI = new (class {
         addon-webext-overflowtarget="overflowed-extensions-list"
         mode="icons">
         <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
+          <html:div id="zen-sidebar-top-buttons-separator" skipintoolbarset="true" overflows="false"></html:div>
         </hbox>
       </toolbar>
     `);
@@ -83,13 +84,9 @@ export var ZenCustomizableUI = new (class {
     const newTab = window.document.getElementById('vertical-tabs-newtab-button');
     newTab.classList.add('zen-sidebar-action-button');
 
-    const wrapper = window.document.createXULElement('toolbarbutton');
-    wrapper.id = 'zen-workspaces-button';
-    window.document.getElementById('zen-sidebar-icons-wrapper').prepend(wrapper);
-
     for (let id of this.defaultSidebarIcons) {
       const elem = window.document.getElementById(id);
-      if (!elem) continue;
+      if (!elem || elem.id === 'zen-workspaces-button') continue;
       elem.setAttribute('removable', 'true');
     }
 
@@ -128,5 +125,12 @@ export var ZenCustomizableUI = new (class {
   registerToolbarNodes(window) {
     window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-top-buttons'));
     window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-icons-wrapper'));
+    window.addEventListener(
+      'MozAfterPaint',
+      () => {
+        this._dispatchResizeEvent(window);
+      },
+      { once: true }
+    );
   }
 })();

src/browser/base/content/ZenUIManager.mjs

@@ -198,10 +198,7 @@ var gZenVerticalTabsManager = {
     if (this.__topButtonsSeparatorElement) {
       return this.__topButtonsSeparatorElement;
     }
-    this.__topButtonsSeparatorElement = document.createElement('div');
-    this.__topButtonsSeparatorElement.id = 'zen-sidebar-top-buttons-separator';
-    this.__topButtonsSeparatorElement.setAttribute('skipintoolbarset', 'true');
-    this.__topButtonsSeparatorElement.setAttribute('overflows', 'false');
+    this.__topButtonsSeparatorElement = document.getElementById('zen-sidebar-top-buttons-separator');
     return this.__topButtonsSeparatorElement;
   },
 

src/browser/base/content/browser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
-index ccd83c15d0d73a1e53bdbfdfbe6fed43a26c961d..f18a6abf7debb97539a4cdf8422315b4dff08adb 100644
+index 9a65dcc7ad41ab961907c95338e023b173d4f474..9477e0c115ed3c4a670f1ac63846b6de01bf8b8c 100644
 --- a/browser/base/content/browser.js
 +++ b/browser/base/content/browser.js
 @@ -32,6 +32,7 @@ ChromeUtils.defineESModuleGetters(this, {
@@ -10,7 +10,7 @@ index ccd83c15d0d73a1e53bdbfdfbe6fed43a26c961d..f18a6abf7debb97539a4cdf8422315b4
    DevToolsSocketStatus:
      "resource://devtools/shared/security/DevToolsSocketStatus.sys.mjs",
    DownloadUtils: "resource://gre/modules/DownloadUtils.sys.mjs",
-@@ -632,6 +633,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
+@@ -630,6 +631,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
    false
  );
  
@@ -26,7 +26,7 @@ index ccd83c15d0d73a1e53bdbfdfbe6fed43a26c961d..f18a6abf7debb97539a4cdf8422315b4
  customElements.setElementCreationCallback("screenshots-buttons", () => {
    Services.scriptloader.loadSubScript(
      "chrome://browser/content/screenshots/screenshots-buttons.js",
-@@ -3438,6 +3448,11 @@ var XULBrowserWindow = {
+@@ -3440,6 +3450,11 @@ var XULBrowserWindow = {
      AboutReaderParent.updateReaderButton(gBrowser.selectedBrowser);
      TranslationsParent.onLocationChange(gBrowser.selectedBrowser);
  
@@ -38,7 +38,27 @@ index ccd83c15d0d73a1e53bdbfdfbe6fed43a26c961d..f18a6abf7debb97539a4cdf8422315b4
      PictureInPicture.updateUrlbarToggle(gBrowser.selectedBrowser);
  
      if (!gMultiProcessBrowser) {
-@@ -7289,6 +7304,12 @@ var gDialogBox = {
+@@ -4435,7 +4450,7 @@ nsBrowserAccess.prototype = {
+     // Passing a null-URI to only create the content window,
+     // and pass true for aSkipLoad to prevent loading of
+     // about:blank
+-    return this.getContentWindowOrOpenURIInFrame(
++    let res = this.getContentWindowOrOpenURIInFrame(
+       null,
+       aParams,
+       aWhere,
+@@ -4443,6 +4458,10 @@ nsBrowserAccess.prototype = {
+       aName,
+       true
+     );
++    if (typeof window.gZenGlanceManager !== "undefined" && window.toolbar.visible) {
++      window.gZenGlanceManager.onTabOpen(res, aURI);
++    }
++    return res;
+   },
+ 
+   openURIInFrame: function browser_openURIInFrame(
+@@ -7281,6 +7300,12 @@ var gDialogBox = {
      parentElement.showModal();
      this._didOpenHTMLDialog = true;
  

src/browser/base/content/zen-sidebar-icons.inc.xhtml

@@ -9,7 +9,7 @@
   mode="icons">
   <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
   <toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button zen-compact-mode-ignore" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
-  <toolbarbutton removable="true" id="zen-workspaces-button"></toolbarbutton>
+  <toolbarbutton id="zen-workspaces-button" class="chromeclass-toolbar-additional" overflows="false" removable="false"></toolbarbutton>
   <toolbarbutton id="zen-profile-button"
     class="zen-sidebar-action-button toolbarbutton-1 chromeclass-toolbar-additional"
     delegatesanchor="true"

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

@@ -219,16 +219,6 @@
   }
 }
 
-@keyframes zen-workspaces-button-active {
-  from {
-    bottom: -20px;
-  }
-
-  to {
-    bottom: -2px;
-  }
-}
-
 /* Mark: Zen Glance */
 @keyframes zen-glance-overlay-animation {
   from {

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

@@ -100,7 +100,7 @@
 
     #navigator-toolbox:not([animate='true']) #titlebar {
       box-shadow: var(--zen-big-shadow);
-      border-radius: calc(var(--zen-native-inner-radius) + 2px);
+      border-radius: var(--zen-native-inner-radius);
       padding: var(--zen-toolbox-padding) !important;
       position: relative;
       background: var(--zen-dialog-background);

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

@@ -38,19 +38,6 @@
   }
 }
 
-/*#zen-profile-button::before {
-  background: transparent;
-  border-radius: 50%;
-  border: 3px solid var(--zen-colors-border);
-  position: absolute;
-  content: "";
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px - 8px - var(--toolbarbutton-inner-padding));
-  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px - 8px - var(--toolbarbutton-inner-padding));
-}*/
-
 /* Bookmarks sidebar */
 #zen-tabbox-wrapper {
   & #sidebar-splitter {
@@ -59,9 +46,8 @@
   }
 
   & #sidebar-box {
-    border-radius: var(--zen-border-radius);
-    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-    margin-bottom: var(--zen-element-separation);
+    border-radius: var(--zen-native-inner-radius);
+    box-shadow: var(--zen-big-shadow);
     overflow: hidden;
     border: 1px solid var(--zen-colors-border);
 

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

@@ -127,8 +127,8 @@
 }
 
 #navigator-toolbox {
-  --border-radius-medium: 10px;
-  --tab-border-radius: 10px;
+  --border-radius-medium: 12px;
+  --tab-border-radius: 8px;
   --zen-toolbox-min-width: 1px;
 
   --tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%);
@@ -228,7 +228,7 @@
   border-bottom: 0px solid transparent !important;
 
   --tab-block-margin: 2px;
-  --tab-selected-bgcolor: var(--zen-toolbar-element-bg);
+  --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12));
   grid-gap: 0 !important;
 
   &[overflow]::after,
@@ -243,6 +243,10 @@
       #tabbrowser-tabs[dont-animate-tabs] & {
         opacity: 0;
       }
+
+      &:is([selected], [multiselected], [visuallyselected]) .tab-background {
+        box-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1));
+      }
     }
 
     &:not([zen-essential='true']):active {
@@ -276,10 +280,10 @@
 
     /* We have a tab inside a tab, this means, it's a glance tab */
     & .tabbrowser-tab {
-      border-radius: 5px;
       pointer-events: none;
       margin: 0;
       --toolbarbutton-inner-padding: 0;
+      --border-radius-medium: 8px;
 
       & .tab-background {
         background: transparent;
@@ -299,10 +303,10 @@
     /* On essentials, glance tabs are floating */
     &[zen-essential='true'] .tabbrowser-tab {
       position: absolute;
-      top: 3px;
-      right: 5px;
-      --tab-collapsed-width: 15px;
-      --tab-min-height: 15px;
+      top: 4px;
+      right: 4px;
+      --tab-collapsed-width: 35px;
+      --tab-min-height: 16px;
       width: var(--tab-collapsed-width) !important;
       z-index: 1;
       pointer-events: none;
@@ -908,12 +912,11 @@
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
 
   &[selected] .tab-background {
-    box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.1));
+    box-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1));
   }
 
   &:not([selected], [multiselected="true"]) .tab-background {
     background: var(--zen-toolbar-element-bg);
-    backdrop-filter: none !important;
     border: none;
   }
 

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

@@ -104,7 +104,7 @@
   --zen-button-border-radius: 5px;
   --zen-button-padding: 0.6rem 1.2rem;
 
-  --zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.11));
+  --zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.11), rgba(255, 255, 255, 0.11));
 
   /* Toolbar */
   --zen-toolbar-height: 38px;
@@ -172,26 +172,31 @@
   --zen-big-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
 
   /* Nativity */
-  --zen-native-content-radius: env(-moz-gtk-csd-titlebar-radius, var(--zen-border-radius));
+  --zen-native-content-radius: var(--zen-border-radius);
+  @media (-moz-platform: linux) {
+    --zen-native-content-radius: env(-moz-gtk-csd-titlebar-radius);
+  }
   --zen-native-inner-radius: var(
     --zen-webview-border-radius,
     /* Inner radius calculation:
       * 1. If the native radius - the separation is less than 4px, use 4px.
       * 2. Otherwise, use the the calculated value (inner radius = outer radius - separation).
     */
-      max(4px, calc(var(--zen-native-content-radius) - var(--zen-element-separation)))
+      max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation)))
   );
 
   /** Other theme-related styles */
-  font-family:
-    SF Pro,
-    ui-sans-serif,
-    system-ui,
-    sans-serif,
-    Apple Color Emoji,
-    Segoe UI Emoji,
-    Segoe UI Symbol,
-    Noto Color Emoji;
+  @media (-moz-platform: macos) {
+    font-family:
+      SF Pro,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      Apple Color Emoji,
+      Segoe UI Emoji,
+      Segoe UI Symbol,
+      Noto Color Emoji;
+  }
 }
 
 @media (prefers-color-scheme: dark) {

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

@@ -120,6 +120,7 @@
 #urlbar[breakout-extend='true'] #urlbar-background {
   border: 1px solid var(--zen-colors-border) !important;
   box-shadow: var(--zen-big-shadow) !important;
+  backdrop-filter: none !important;
 }
 
 :root[zen-single-toolbar='true'] {

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

@@ -63,7 +63,9 @@
         & {
           opacity: 0.4;
           filter: grayscale(1);
-          transition: opacity 0.2s;
+          transition:
+            opacity 0.2s,
+            filter 0.2s;
         }
 
         &[active='true'] {

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

@@ -14,16 +14,17 @@ XPCOMUtils.defineLazyPreferenceGetter(
   true
 );
 
+ChromeUtils.defineLazyGetter(lazyCompactMode, 'mainAppWrapper', () => document.getElementById('zen-main-app-wrapper'));
+
 var gZenCompactModeManager = {
   _flashTimeouts: {},
   _evenListeners: [],
   _removeHoverFrames: {},
+  _animating: false,
 
   init() {
     Services.prefs.addObserver('zen.tabs.vertical.right-side', this._updateSidebarIsOnRight.bind(this));
 
-    ChromeUtils.defineLazyGetter(this, 'mainAppWrapper', () => document.getElementById('zen-main-app-wrapper'));
-
     this._canAnimateSidebar = Services.prefs.getBoolPref('zen.view.compact.animate-sidebar', true);
 
     gZenUIManager.addPopupTrackingAttribute(this.sidebar);
@@ -35,18 +36,22 @@ var gZenCompactModeManager = {
 
   get preference() {
     if (!document.documentElement.hasAttribute('zen-compact-mode')) {
-      document.documentElement.setAttribute('zen-compact-mode', this.mainAppWrapper.getAttribute('zen-compact-mode'));
+      document.documentElement.setAttribute(
+        'zen-compact-mode',
+        lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode')
+      );
     }
-    return this.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
+    return lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
   },
 
   set preference(value) {
-    if (this.preference === value) {
+    if (this.preference === value || this._animating) {
+      // We dont want the user to be able to spam the button
       return value;
     }
     // We use this element in order to make it persis across restarts, by using the XULStore.
     // main-window can't store attributes other than window sizes, so we use this instead
-    this.mainAppWrapper.setAttribute('zen-compact-mode', value);
+    lazyCompactMode.mainAppWrapper.setAttribute('zen-compact-mode', value);
     document.documentElement.setAttribute('zen-compact-mode', value);
     this._updateEvent();
     return value;
@@ -136,6 +141,7 @@ var gZenCompactModeManager = {
   },
 
   animateCompactMode() {
+    this._animating = true;
     const isCompactMode = this.preference;
     const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
     // Do this so we can get the correct width ONCE compact mode styled have been applied
@@ -171,6 +177,7 @@ var gZenCompactModeManager = {
             this.sidebar.style.removeProperty('margin-right');
             this.sidebar.style.removeProperty('margin-left');
             this.sidebar.style.removeProperty('transform');
+            this._animating = false;
             setTimeout(() => {
               this.sidebar.style.removeProperty('transition');
             });
@@ -206,6 +213,7 @@ var gZenCompactModeManager = {
             this.sidebar.style.removeProperty('margin-right');
             this.sidebar.style.removeProperty('margin-left');
             this.sidebar.style.removeProperty('transform');
+            this._animating = false;
             setTimeout(() => {
               this.sidebar.style.removeProperty('transition');
             });
@@ -219,8 +227,8 @@ var gZenCompactModeManager = {
   updateContextMenu() {
     document.getElementById('zen-context-menu-compact-mode-toggle').setAttribute('checked', this.preference);
 
-    const hideTabBar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
-    const hideToolbar = Services.prefs.getBoolPref('zen.view.compact.hide-toolbar');
+    const hideTabBar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar', false);
+    const hideToolbar = Services.prefs.getBoolPref('zen.view.compact.hide-toolbar', false);
     const hideBoth = hideTabBar && hideToolbar;
 
     const idName = 'zen-context-menu-compact-mode-hide-';

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

@@ -4,12 +4,19 @@
     #currentTab = null;
 
     _animating = false;
+    _lazyPref = {};
 
     init() {
-      document.documentElement.setAttribute('zen-glance-uuid', gZenUIManager.generateUuidv4());
       window.addEventListener('keydown', this.onKeyDown.bind(this));
       window.addEventListener('TabClose', this.onTabClose.bind(this));
 
+      XPCOMUtils.defineLazyPreferenceGetter(
+        this._lazyPref,
+        'SHOULD_OPEN_EXTERNAL_TABS_IN_GLANCE',
+        'zen.glance.open-essential-external-links',
+        false
+      );
+
       ChromeUtils.defineLazyGetter(this, 'sidebarButtons', () => document.getElementById('zen-glance-sidebar-container'));
 
       document.getElementById('tabbrowser-tabpanels').addEventListener('click', this.onOverlayClick.bind(this));
@@ -46,16 +53,20 @@
       }
     }
 
-    createBrowserElement(url, currentTab) {
+    getTabPosition(tab) {
+      return Math.max(gBrowser._numVisiblePinTabs, tab._tPos) + 1;
+    }
+
+    createBrowserElement(url, currentTab, existingTab = null) {
       const newTabOptions = {
         userContextId: currentTab.getAttribute('usercontextid') || '',
         skipBackgroundNotify: true,
         insertTab: true,
         skipLoad: false,
-        index: currentTab._tPos + 1,
+        index: this.getTabPosition(currentTab),
       };
       this.currentParentTab = currentTab;
-      const newTab = gBrowser.addTrustedTab(Services.io.newURI(url).spec, newTabOptions);
+      const newTab = existingTab ?? gBrowser.addTrustedTab(Services.io.newURI(url).spec, newTabOptions);
 
       gBrowser.selectedTab = newTab;
       currentTab.querySelector('.tab-content').appendChild(newTab);
@@ -65,7 +76,7 @@
       return this.#currentBrowser;
     }
 
-    openGlance(data) {
+    openGlance(data, existingTab = null, ownerTab = null) {
       if (this.#currentBrowser) {
         return;
       }
@@ -82,13 +93,12 @@
       this.browserWrapper?.removeAttribute('has-finished-animation');
       this.overlay?.removeAttribute('post-fade-out');
 
-      const url = data.url;
-      const currentTab = gBrowser.selectedTab;
+      const currentTab = ownerTab ?? gBrowser.selectedTab;
 
       this.animatingOpen = true;
       this._animating = true;
 
-      const browserElement = this.createBrowserElement(url, currentTab);
+      const browserElement = this.createBrowserElement(data.url, currentTab, existingTab);
 
       this.overlay = browserElement.closest('.browserSidebarContainer');
       this.browserWrapper = browserElement.closest('.browserContainer');
@@ -104,28 +114,30 @@
 
         this.overlay.removeAttribute('fade-out');
         this.browserWrapper.setAttribute('animate', true);
-        this.browserWrapper.style.top = `${initialY}px`;
-        this.browserWrapper.style.left = `${initialX}px`;
+        this.browserWrapper.style.top = `${initialY + initialHeight / 2}px`;
+        this.browserWrapper.style.left = `${initialX + initialWidth / 2}px`;
         this.browserWrapper.style.width = `${initialWidth}px`;
         this.browserWrapper.style.height = `${initialHeight}px`;
+        this.browserWrapper.style.opacity = 0.8;
+        this.overlay.style.overflow = 'visible';
         gZenUIManager.motion
           .animate(
             this.browserWrapper,
             {
-              top: [`${initialY}px`, '50%'],
-              left: [`${initialX}px`, '50%'],
-              width: [`${initialWidth}px`, '85%'],
-              height: [`${initialHeight}px`, '100%'],
-              opacity: [0.8, 1],
+              top: '50%',
+              left: '50%',
+              width: '85%',
+              height: '100%',
+              opacity: 1,
             },
             {
-              duration: 0.5,
-              ease: 'easeIn',
+              duration: 0.4,
               type: 'spring',
-              bounce: 0.25,
+              bounce: 0.2,
             }
           )
           .then(() => {
+            this.overlay.style.removeProperty('overflow');
             this.browserWrapper.removeAttribute('animate');
             this.browserWrapper.setAttribute('animate-end', true);
             this.browserWrapper.setAttribute('has-finished-animation', true);
@@ -151,7 +163,7 @@
       this._animating = true;
 
       gBrowser._insertTabAtIndex(this.#currentTab, {
-        index: this.currentParentTab._tPos + 1,
+        index: this.getTabPosition(this.currentParentTab),
       });
 
       let quikcCloseZen = false;
@@ -295,9 +307,43 @@
       }
     }
 
+    tabDomainsDiffer(tab1, url2) {
+      try {
+        if (!tab1) {
+          return true;
+        }
+        let url1 = tab1.linkedBrowser.currentURI.spec;
+        if (url1.startsWith('about:')) {
+          return true;
+        }
+        return Services.io.newURI(url1).host !== url2.host;
+      } catch (e) {
+        return true;
+      }
+    }
+
+    shouldOpenTabInGlance(tab, uri) {
+      let owner = tab.owner;
+      return (
+        owner &&
+        owner.getAttribute('zen-essential') === 'true' &&
+        this._lazyPref.SHOULD_OPEN_EXTERNAL_TABS_IN_GLANCE &&
+        owner.linkedBrowser?.docShellIsActive &&
+        owner.linkedBrowser?.browsingContext?.isAppTab &&
+        this.tabDomainsDiffer(owner, uri)
+      );
+    }
+
+    onTabOpen(browser, uri) {
+      let tab = gBrowser.getTabForBrowser(browser);
+      if (this.shouldOpenTabInGlance(tab, uri)) {
+        this.openGlance({ url: undefined, x: 0, y: 0, width: 0, height: 0 }, tab, tab.owner);
+      }
+    }
+
     fullyOpenGlance() {
       gBrowser._insertTabAtIndex(this.#currentTab, {
-        index: this.#currentTab._tPos + 1,
+        index: this.getTabPosition(this.#currentTab),
       });
 
       this.animatingFullOpen = true;

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

@@ -1058,14 +1058,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       button.firstChild.remove();
     }
 
-    for (let attr of [...button.attributes]) {
-      if (attr.name !== 'id') {
-        button.removeAttribute(attr.name);
-      }
-    }
-
-    button.className = '';
-
     if (this._workspacesButtonClickListener) {
       button.removeEventListener('click', this._workspacesButtonClickListener);
       this._workspacesButtonClickListener = null;
@@ -1075,7 +1067,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       this._workspaceButtonContextMenuListener = null;
     }
 
-    button.setAttribute('removable', 'true');
     button.setAttribute('showInPrivateBrowsing', 'false');
     button.setAttribute('tooltiptext', 'Workspaces');
     if (this.shouldShowIconStrip) {

src/browser/components/customizableui/CustomizableUI-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
-index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..1a3142c58af638a731f546b8695a0fc3fab9054c 100644
+index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..251c3a7fa624057a8eaba5c0c42ef23fe2a6ace3 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -13,6 +13,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -124,16 +124,30 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..1a3142c58af638a731f546b8695a0fc3
    /**
     * Add a widget to an area.
     * If the area to which you try to add is not known to CustomizableUI,
-@@ -6404,7 +6403,8 @@ class OverflowableToolbar {
-         this.#target
-       );
-       totalAvailWidth =
--        getInlineSize(this.#toolbar) -
-+        ((win.gZenVerticalTabsManager._hasSetSingleToolbar ? parseInt(this.#toolbar.closest("#navigator-toolbox")?.getAttribute("width")) : 0) ||
-+        getInlineSize(this.#toolbar)) -
+@@ -6408,11 +6407,11 @@ class OverflowableToolbar {
          parseFloat(style.paddingLeft) -
          parseFloat(style.paddingRight) -
          toolbarChildrenWidth;
+-      targetWidth = getInlineSize(this.#target);
++      targetWidth = getInlineSize(this.#target) - ((win.gZenVerticalTabsManager._hasSetSingleToolbar && this.#target.id == 'zen-sidebar-top-buttons-customization-target') ? win.gZenVerticalTabsManager._topButtonsSeparatorElement.getBoundingClientRect().width : 0);
+       targetChildrenWidth =
+         this.#target == this.#toolbar
+           ? toolbarChildrenWidth
+-          : sumChildrenInlineSize(this.#target);
++          : sumChildrenInlineSize(this.#target, win.gZenVerticalTabsManager._topButtonsSeparatorElement);
+     });
+ 
+     lazy.log.debug(
+@@ -6422,7 +6421,8 @@ class OverflowableToolbar {
+     // If the target has min-width: 0, their children might actually overflow
+     // it, so check for both cases explicitly.
+     let targetContentWidth = Math.max(targetWidth, targetChildrenWidth);
+-    let isOverflowing = Math.floor(targetContentWidth) > totalAvailWidth;
++    if (win.gZenVerticalTabsManager._hasSetSingleToolbar && this.#toolbar == 'nav-bar') return { isOverflowing: false, targetContentWidth, totalAvailWidth };
++    let isOverflowing = Math.floor(targetContentWidth) + (win.gZenVerticalTabsManager._hasSetSingleToolbar ? 0.1 : 0) > totalAvailWidth;
+     return { isOverflowing, targetContentWidth, totalAvailWidth };
+   }
+ 
 @@ -6516,7 +6516,7 @@ class OverflowableToolbar {
          }
        }

src/browser/components/preferences/zen-settings.js

@@ -601,8 +601,8 @@ var gZenLooksAndFeel = {
 
     let value = '';
     if (
-      Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') &&
-      Services.prefs.getBoolPref('zen.view.compact.hide-toolbar')
+      Services.prefs.getBoolPref('zen.view.compact.hide-tabbar', false) &&
+      Services.prefs.getBoolPref('zen.view.compact.hide-toolbar', false)
     ) {
       value = 'both';
     } else {

surfer.json

@@ -5,8 +5,8 @@
   "binaryName": "zen",
   "version": {
     "product": "firefox",
-    "version": "134.0.1",
-    "candidate": "134.0.1"
+    "version": "134.0.2",
+    "candidate": "134.0.2"
   },
   "buildOptions": {
     "generateBranding": true
@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.7.1b",
+        "displayVersion": "1.7.2b",
         "github": {
           "repo": "zen-browser/desktop"
         },
@@ -39,7 +39,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Twilight",
       "release": {
-        "displayVersion": "1.7t",
+        "displayVersion": "1.7.2t",
         "github": {
           "repo": "zen-browser/desktop"
         }