Added expand to fullscreen for glance

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

@@ -95,7 +95,7 @@ pref('zen.view.compact.toolbar-flash-popup.duration', 800);
 pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
 
 pref('zen.glance.enabled', true);
-pref('zen.glance.activation-method', 'ctrl'); // ctrl, alt, shift, none, hold
+pref('zen.glance.activation-method', 'alt'); // ctrl, alt, shift, none, hold
 pref('zen.glance.hold-duration', 300); // in ms
 
 pref('zen.view.sidebar-height-throttle', 200); // in ms

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

@@ -1,11 +1,12 @@
 <hbox id="zen-glance-overlay" hidden="true" onclick="gZenGlanceManager.onOverlayClick(event)">
   <hbox id="zen-glance-content">
     <vbox id="zen-glance-browser-container">
-      <vbox id="zen-glance-browser">
-        <hbox id="zen-glance-loading"></hbox>
-      </vbox>
       <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 id="zen-glance-browser">
+        <hbox id="zen-glance-loading"></hbox>
       </vbox>
     </vbox>
   </hbox>

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

@@ -293,6 +293,25 @@
   }
 }
 
+@keyframes zen-glance-buttons-animation-full {
+  from {
+    width: 75%;
+    height: 100%;
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  to {
+    width: calc(100% - var(--zen-element-separation));
+    height: calc(100% - var(--zen-element-separation));
+    top: 0;
+    left: 0;
+    opacity: 1;
+    transform: none;
+  }
+}
+
 @keyframes zen-glance-loading-animation {
   0% {
     opacity: 1;
@@ -312,10 +331,11 @@
   from {
     right: 0;
     opacity: 0;
+    width: fit-content;
   }
 
   to {
     opacity: 1;
-    transform: translateX(105%);
+    transform: translateX(-100%) translateY(-50%);
   }
 }

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

@@ -7,9 +7,13 @@
   top: 0;
   left: 0;
   z-index: 3;
-  background: color-mix(in srgb, var(--zen-colors-tertiary) 20%, transparent 80%);
-  backdrop-filter: blur(2px);
-  animation: zen-glance-overlay-animation 0.1s ease-in-out forwards;
+
+  &:not(:has([animate-full-end='true'])):not(:has([animate-full='true'])) {
+    background: color-mix(in srgb, var(--zen-colors-tertiary) 20%, transparent 80%);
+    backdrop-filter: blur(2px);
+    animation: zen-glance-overlay-animation 0.1s ease-in-out forwards;
+  }
+
   border-radius: var(--zen-border-radius);
 
   &[hidden='true'] {
@@ -66,20 +70,24 @@
         overflow: hidden;
         width: 100%;
         position: relative;
+        border-radius: var(--zen-border-radius);
         height: 100%;
       }
 
       & #zen-glance-sidebar-container {
-        position: fixed;
-        top: 1%;
-        right: 0;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
         opacity: 0;
-        border-radius: var(--zen-border-radius);
         box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
         background: var(--zen-dialog-background);
 
+        border-top-left-radius: var(--zen-border-radius);
+        border-bottom-left-radius: var(--zen-border-radius);
+
         padding: 3px;
-        gap: 2px;
+        gap: 3px;
 
         animation: zen-glance-buttons-animation 0.2s ease-in-out forwards;
         animation-delay: 0.3s;
@@ -116,6 +124,20 @@
         transition-delay: 0.2s;
       }
 
+      &[animate-full='true'] {
+        opacity: 1;
+        animation: zen-glance-buttons-animation-full 0.2s ease-in-out forwards !important;
+
+        & #zen-glance-sidebar-container {
+          opacity: 0 !important;
+        }
+
+        & #zen-glance-loading {
+          width: 0 !important;
+          opacity: 0 !important;
+        }
+      }
+
       &[animate='true'] {
         animation: zen-glance-content-animation .4s ease-in-out forwards;
         animation-delay: 0.1s;

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

@@ -1,8 +1,8 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a90704a89 100644
+index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..7468ca5d73c343579d591e0dfbecf1bd9a102248 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
-@@ -456,11 +456,26 @@
+@@ -462,11 +462,26 @@
        return duplicateTabs;
      },
  
@@ -31,7 +31,7 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
        }
        return i;
      },
-@@ -1340,6 +1355,7 @@
+@@ -1346,6 +1361,7 @@
        if (!this._previewMode) {
          newTab.recordTimeFromUnloadToReload();
          newTab.updateLastAccessed();
@@ -39,7 +39,30 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
          oldTab.updateLastAccessed();
          // if this is the foreground window, update the last-seen timestamps.
          if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
-@@ -2485,7 +2501,7 @@
+@@ -2270,6 +2286,13 @@
+         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();
+-      panel.id = uniqueId;
++      if (!panel.id) panel.id = uniqueId;
+       aTab.linkedPanel = uniqueId;
+ 
+       // Inject the <browser> into the DOM if necessary.
+@@ -2491,7 +2514,7 @@
        // hasSiblings=false on both the existing browser and the new browser.
        if (this.tabs.length == 2) {
          this.tabs[0].linkedBrowser.browsingContext.hasSiblings = true;
@@ -48,7 +71,7 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
        } else {
          aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
        }
-@@ -2705,6 +2721,11 @@
+@@ -2711,6 +2734,11 @@
          );
        }
  
@@ -60,7 +83,7 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
        if (!UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.start("browser.tabs.opening", "initting", window);
        }
-@@ -2773,6 +2794,9 @@
+@@ -2780,6 +2808,9 @@
            noInitialLabel,
            skipBackgroundNotify,
          });
@@ -70,7 +93,7 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
          if (insertTab) {
            // insert the tab into the tab container in the correct position
            this._insertTabAtIndex(t, {
-@@ -3262,6 +3286,14 @@
+@@ -3291,6 +3322,14 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -85,7 +108,7 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3275,6 +3307,9 @@
+@@ -3304,6 +3343,9 @@
              restoreTabsLazily && !select && !tabData.pinned;
  
            let url = "about:blank";
@@ -95,7 +118,7 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
            if (tabData.entries?.length) {
              let activeIndex = (tabData.index || tabData.entries.length) - 1;
              // Ensure the index is in bounds.
-@@ -3311,6 +3346,12 @@
+@@ -3340,6 +3382,12 @@
              preferredRemoteType,
            });
  
@@ -108,7 +131,7 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
            if (select) {
              tabToSelect = tab;
            }
-@@ -3345,7 +3386,7 @@
+@@ -3374,7 +3422,7 @@
              this.tabContainer._invalidateCachedTabs();
            }
          }
@@ -117,7 +140,7 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
          tab.initialize();
        }
  
-@@ -4152,6 +4193,13 @@
+@@ -4148,6 +4196,13 @@
          TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
        }
  
@@ -131,7 +154,7 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -5131,10 +5180,10 @@
+@@ -5123,10 +5178,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      },
  
@@ -144,7 +167,7 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -7050,6 +7099,7 @@
+@@ -7042,6 +7097,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -152,7 +175,7 @@ index c89ae2cbb978d6218bd56a059c5ca1e371231607..15cc611a9b08227abcf2e0137ed9e82a
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
              gBrowser.syncThrobberAnimations(this.mTab);
-@@ -7870,7 +7920,7 @@ var TabContextMenu = {
+@@ -7874,7 +7930,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !multiselectionContext;

src/browser/themes/shared/zen-icons/icons.css

@@ -264,6 +264,7 @@
 
 #restore-button,
 #fullscreen-button,
+#zen-glance-sidebar-open,
 #appMenu-fullscreen-button2 {
   list-style-image: url('fullscreen.svg') !important;
 }