Enhance ZenGlance functionality by enabling external link opening and adjusting tab positioning

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

@@ -133,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
@@ -205,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/zen-styles/zen-tabs/vertical-tabs.css

@@ -280,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;
@@ -303,10 +303,10 @@
     /* On essentials, glance tabs are floating */
     &[zen-essential='true'] .tabbrowser-tab {
       position: absolute;
-      top: 3px;
+      top: 4px;
-      right: 5px;
+      right: 4px;
-      --tab-collapsed-width: 15px;
+      --tab-collapsed-width: 35px;
-      --tab-min-height: 15px;
+      --tab-min-height: 16px;
       width: var(--tab-collapsed-width) !important;
       z-index: 1;
       pointer-events: none;

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

@@ -4,11 +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));
+      window.addEventListener('TabOpen', this.onTabOpen.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'));
 
@@ -46,16 +54,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 +77,7 @@
       return this.#currentBrowser;
     }
 
-    openGlance(data) {
+    openGlance(data, existingTab = null) {
       if (this.#currentBrowser) {
         return;
       }
@@ -82,13 +94,12 @@
       this.browserWrapper?.removeAttribute('has-finished-animation');
       this.overlay?.removeAttribute('post-fade-out');
 
-      const url = data.url;
       const currentTab = 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');
@@ -152,7 +163,7 @@
       this._animating = true;
 
       gBrowser._insertTabAtIndex(this.#currentTab, {
-        index: this.currentParentTab._tPos + 1,
+        index: this.getTabPosition(this.currentParentTab),
       });
 
       let quikcCloseZen = false;
@@ -296,9 +307,22 @@
       }
     }
 
+    shouldOpenTabInGlance(tab) {
+      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;
+    }
+
+    onTabOpen(event) {
+      let tab = event.target;
+      if (this.shouldOpenTabInGlance(tab)) {
+        this.openGlance({ url: undefined, x: 0, y: 0, width: 0, height: 0 }, tab);
+      }
+    }
+
     fullyOpenGlance() {
       gBrowser._insertTabAtIndex(this.#currentTab, {
-        index: this.#currentTab._tPos + 1,
+        index: this.getTabPosition(this.#currentTab),
       });
 
       this.animatingFullOpen = true;