Update subproject commit in zen-components

src/browser/base/content/ZenUIManager.mjs

@@ -49,7 +49,7 @@ var gZenUIManager = {
     for (const el of this._popupTrackingElements) {
       // target may be inside a shadow root, not directly under the element
       // we also ignore menus inside panels
-      if (!el.contains(showEvent.explicitOriginalTarget) || showEvent.explicitOriginalTarget.closest('panel')) {
+      if (!el.contains(showEvent.explicitOriginalTarget) || (showEvent.explicitOriginalTarget && showEvent.explicitOriginalTarget?.closest('panel'))) {
         continue;
       }
       document.removeEventListener('mousemove', this.__removeHasPopupAttribute);

src/browser/base/content/zen-glance.inc.xhtml

@@ -1,14 +1,4 @@
-<hbox id="zen-glance-overlay" hidden="true" onclick="gZenGlanceManager.onOverlayClick(event)">
+<vbox id="zen-glance-sidebar-container">
-  <hbox id="zen-glance-content">
-    <vbox id="zen-glance-browser-container">
-      <vbox id="zen-glance-sidebar-container">
   <toolbarbutton id="zen-glance-sidebar-close" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance()"/>
   <toolbarbutton id="zen-glance-sidebar-open" class="toolbarbutton-1" oncommand="gZenGlanceManager.fullyOpenGlance()"/>
-      </vbox>
+</vbox>
-      <vbox id="zen-glance-browser">
-        <hbox id="zen-glance-loading"></hbox>
-      </vbox>
-    </vbox>
-  </hbox>
-  <hbox id="zen-glance-tabs" hidden="true"></hbox>
-</hbox>

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

@@ -3,10 +3,6 @@
 @media (-moz-bool-pref: 'zen.view.compact') {
   :root:not([customizing]):not([inDOMFullscreen='true']) {
     @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
-      #zen-glance-overlay {
-        width: calc(100% - var(--zen-element-separation) * 2);
-      }
-
       #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
         margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
       }
@@ -15,11 +11,6 @@
         padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
       }
 
-      &:not([inDOMFullscreen='true']) #zen-glance-overlay {
-        margin-left: var(--zen-element-separation) !important;
-        padding-right: var(--zen-element-separation) !important;
-      }
-
       /* Set the extra paddings */
       #tabbrowser-tabpanels {
         :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox[zen-right-side='true']) & {
@@ -108,10 +99,6 @@
     }
 
     @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
-      #zen-glance-overlay {
-        height: calc(100% - var(--zen-element-separation) * 2);
-      }
-
       #navigator-toolbox {
         --zen-toolbox-top-align: var(--zen-element-separation);
       }
@@ -120,10 +107,6 @@
         padding-top: var(--zen-element-separation) !important;
       }
 
-      &:not([inDOMFullscreen='true']) #zen-glance-overlay {
-        margin-top: var(--zen-element-separation) !important;
-      }
-
       #sidebar-box,
       #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
         margin-top: var(--zen-element-separation) !important;

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

@@ -1,35 +1,33 @@
 
-#zen-glance-overlay {
+.browserSidebarContainer:has([zen-glance-selected]),
-  height: calc(100% - var(--zen-element-separation));
+.browserSidebarContainer.zen-glance-overlay {
-  width: calc(100% - var(--zen-element-separation));
+  visibility: inherit;
-  display: flex;
+}
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 3;
 
-  #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+#tabbrowser-tabpanels {
-    margin-left: var(--zen-element-separation);
+  transition: transform 0.1s ease-in-out;
+}
+
+#tabbrowser-tabpanels:has(.zen-glance-background) {
+  transform: scale(0.98);
+  backdrop-filter: blur(5px);
+
+  & .zen-glance-background {
+    opacity: 0.8;
+    transition: opacity 0.1s ease-in-out;
   }
+}
 
-  &:not(:has([animate-full-end='true'])):not(:has([animate-full='true'])) {
+#zen-glance-sidebar-container {
-    background: color-mix(in srgb, var(--zen-colors-secondary) 30%, transparent 70%);
-    backdrop-filter: blur(2px);
-    animation: zen-glance-overlay-animation 0.1s ease-in-out forwards;
-  }
-
-  border-radius: var(--zen-border-radius);
-
-  &[hidden='true'] {
   display: none;
-  }
+}
 
+.browserSidebarContainer.zen-glance-overlay {
   &[fade-out='true'] {
     background: transparent;
     opacity: 1;
 
-    & #zen-glance-content {
+    & .browserContainer {
-      & #zen-glance-browser-container {
       animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
       animation-direction: reverse !important;
 
@@ -42,23 +40,11 @@
         opacity: 0;
         transition: opacity .1s ease-in-out;
       }
-
-        & #zen-glance-loading {
-          width: 0 !important;
-          opacity: 0 !important;
-          transition: none !important;
-        }
-      }
     }
   }
 
-  & #zen-glance-content {
+  & .browserContainer {
-    z-index: 1;
+    background: var(--zen-dialog-background);
-    width: 100%;
-    height: 100%;
-    display: flex;
-
-    & #zen-glance-browser-container {
     box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
     transform: translate(var(--initial-x), var(--initial-y));
     width: var(--initial-width);
@@ -68,6 +54,7 @@
     opacity: 0;
     top: 0;
     left: 0;
+    flex: unset !important;
 
     &[has-finished-animation='true'] {
       position: relative !important;
@@ -89,7 +76,8 @@
     }
 
     & #zen-glance-sidebar-container {
-        position: absolute;
+      position: fixed;
+      display: flex;
       top: 10%;
       left: 0;
       transform: translateY(-50%);
@@ -118,29 +106,6 @@
       }
     }
 
-      & #zen-glance-loading {
-        height: 2px;
-        background: var(--zen-primary-color);
-
-        pointer-events: none;
-        position: absolute;
-        left: 0;
-        top: 0;
-
-        &[not-loading='true'] {
-          width: 0;
-        }
-
-        &[loading='true'] {
-          width: 80%;
-          transition: width 8s ease-in-out;
-        }
-
-        &:not([loading='true']):not([not-loading='true']) {
-          animation: zen-glance-loading-animation .8s ease-in-out forwards;
-        }
-      }
-
     & browser {
       width: 100%;
       height: 100%;
@@ -156,11 +121,6 @@
       & #zen-glance-sidebar-container {
         opacity: 0 !important;
       }
-
-        & #zen-glance-loading {
-          width: 0 !important;
-          opacity: 0 !important;
-        }
     }
 
     &[animate='true'] {
@@ -172,6 +132,7 @@
 
         & browser {
           opacity: 0;
+          visibility: hidden;
         }
 
         & #zen-glance-sidebar-container {
@@ -182,5 +143,4 @@
       }
     }
   }
-  }
 }

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

@@ -128,6 +128,26 @@
           opacity: 0.5;
         }
       }
+
+      /* We have a tab inside a tab, this means, it's a glance tab */
+      & .tabbrowser-tab {
+        border-radius: 5px;
+        pointer-events: none;
+        margin: 0;
+
+        & .tab-background {
+          background: transparent;
+          box-shadow: none !important;
+        }
+        & label { display: none !important; }
+        & .tab-close-button { 
+          display: none !important; 
+        }
+
+        & .tab-icon-image {
+          --toolbarbutton-inner-padding: 0 !important;
+        }
+      }
     }
   }
 
@@ -321,7 +341,7 @@
         & .tab-background {
           @media not (prefers-color-scheme: dark) {
             &:is([selected], [multiselected]) {
-              box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15) !important;
+              box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15);
             }
           }
           margin-inline: var(--tab-block-margin);
@@ -329,7 +349,7 @@
         }
 
         &:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
-          display: block !important;
+          display: block;
         }
 
         .tab-throbber,
@@ -474,6 +494,11 @@
           & .tab-icon-pending {
             margin-inline-end: 0 !important;
           }
+
+          /* Hide glances */
+          & .tabbrowser-tab {
+            display: none !important;
+          }
         }
       }
 

src/browser/components/tabbrowser/content/tabbrowser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e1e46aca1 100644
+index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..fe626dc19c9abaf4f9736ec6bcc8cf7d44bbdc10 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -462,11 +462,26 @@
@@ -39,21 +39,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
          oldTab.updateLastAccessed();
          // if this is the foreground window, update the last-seen timestamps.
          if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
-@@ -2270,6 +2286,13 @@
+@@ -2431,7 +2447,7 @@
-         b.setAttribute("transparent", "true");
-       }
- 
-+      if (this.zenGlanceBrowser) {
-+        b.setAttribute("zen-glance", "true");
-+        gZenGlanceManager.browser.appendChild(b);
-+        this.zenGlanceBrowser = undefined;
-+        return b;
-+      }
-+
-       let stack = document.createXULElement("stack");
-       stack.className = "browserStack";
-       stack.appendChild(b);
-@@ -2431,7 +2454,7 @@
  
        let panel = this.getPanel(browser);
        let uniqueId = this._generateUniquePanelID();
@@ -62,7 +48,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
        aTab.linkedPanel = uniqueId;
  
        // Inject the <browser> into the DOM if necessary.
-@@ -2491,7 +2514,7 @@
+@@ -2491,7 +2507,7 @@
        // hasSiblings=false on both the existing browser and the new browser.
        if (this.tabs.length == 2) {
          this.tabs[0].linkedBrowser.browsingContext.hasSiblings = true;
@@ -71,7 +57,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
        } else {
          aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
        }
-@@ -2711,6 +2734,11 @@
+@@ -2711,6 +2727,11 @@
          );
        }
  
@@ -83,7 +69,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
        if (!UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.start("browser.tabs.opening", "initting", window);
        }
-@@ -2780,6 +2808,9 @@
+@@ -2780,6 +2801,9 @@
            noInitialLabel,
            skipBackgroundNotify,
          });
@@ -93,7 +79,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
          if (insertTab) {
            // insert the tab into the tab container in the correct position
            this._insertTabAtIndex(t, {
-@@ -3291,6 +3322,14 @@
+@@ -3291,6 +3315,14 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -108,7 +94,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3304,6 +3343,9 @@
+@@ -3304,6 +3336,9 @@
              restoreTabsLazily && !select && !tabData.pinned;
  
            let url = "about:blank";
@@ -118,7 +104,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
            if (tabData.entries?.length) {
              let activeIndex = (tabData.index || tabData.entries.length) - 1;
              // Ensure the index is in bounds.
-@@ -3340,6 +3382,12 @@
+@@ -3340,6 +3375,12 @@
              preferredRemoteType,
            });
  
@@ -131,7 +117,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
            if (select) {
              tabToSelect = tab;
            }
-@@ -3374,7 +3422,7 @@
+@@ -3374,7 +3415,7 @@
              this.tabContainer._invalidateCachedTabs();
            }
          }
@@ -140,7 +126,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
          tab.initialize();
        }
  
-@@ -4148,6 +4196,13 @@
+@@ -4148,6 +4189,13 @@
          TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
        }
  
@@ -154,7 +140,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -5123,10 +5178,10 @@
+@@ -5123,10 +5171,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      },
  
@@ -167,7 +153,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -7042,6 +7097,7 @@
+@@ -7042,6 +7090,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -175,7 +161,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..1dab566aa17efd996f7082c709ab2a3e
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
              gBrowser.syncThrobberAnimations(this.mTab);
-@@ -7874,7 +7930,7 @@ var TabContextMenu = {
+@@ -7874,7 +7923,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !multiselectionContext;