Added a split glance button

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

@@ -1,4 +1,5 @@
 <vbox id="zen-glance-sidebar-container" hidden="true">
-  <toolbarbutton id="zen-glance-sidebar-close" data-l10n-id="zen-general-confirm" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance({ onTabClose: true })"/>
-  <toolbarbutton id="zen-glance-sidebar-open" class="toolbarbutton-1" oncommand="gZenGlanceManager.fullyOpenGlance()"/>
+  <toolbarbutton id="zen-glance-sidebar-close" data-l10n-id="zen-general-confirm" class="toolbarbutton-1"/>
+  <toolbarbutton id="zen-glance-sidebar-open" class="toolbarbutton-1"/>
+  <toolbarbutton id="zen-glance-sidebar-split" class="toolbarbutton-1"/>
 </vbox>

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

@@ -20,10 +20,30 @@
       );
 
       ChromeUtils.defineLazyGetter(this, 'sidebarButtons', () => document.getElementById('zen-glance-sidebar-container'));
-
       document.getElementById('tabbrowser-tabpanels').addEventListener('click', this.onOverlayClick.bind(this));
-
       Services.obs.addObserver(this, 'quit-application-requested');
+
+      this.#addSidebarButtonListeners();
+    }
+
+    #addSidebarButtonListeners() {
+      this.sidebarButtons.addEventListener('command', (event) => {
+        const button = event.target.closest('toolbarbutton');
+        if (!button) {
+          return;
+        }
+        switch (button.id) {
+          case 'zen-glance-sidebar-close':
+            this.closeGlance({ onTabClose: true });
+            break;
+          case 'zen-glance-sidebar-fullscreen':
+            this.fullyOpenGlance();
+            break;
+          case 'zen-glance-sidebar-split':
+            this.splitGlance();
+            break;
+        }
+      });
     }
 
     get #currentBrowser() {
@@ -524,7 +544,7 @@
       this.#glances.delete(this.#currentGlanceID);
     }
 
-    async fullyOpenGlance() {
+    async fullyOpenGlance({ forSplit = false } = {}) {
       this.animatingFullOpen = true;
       gBrowser._insertTabAtIndex(this.#currentTab, {
         index: this.getTabPosition(this.#currentTab),
@@ -540,7 +560,7 @@
       this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('zen-glance-background');
       this.#currentParentTab._visuallySelected = false;
       this.hideSidebarButtons();
-      if (gReduceMotion) {
+      if (gReduceMotion || forSplit) {
         this.finishOpeningGlance();
         return;
       }
@@ -593,6 +613,20 @@
     getFocusedTab(aDir) {
       return aDir < 0 ? this.#currentParentTab : this.#currentTab;
     }
+
+    async splitGlance() {
+      if (this.#currentGlanceID) {
+        const currentTab = this.#currentTab;
+        const currentParentTab = this.#currentParentTab;
+
+        await this.fullyOpenGlance({ forSplit: true });
+        gZenViewSplitter.splitTabs([currentTab, currentParentTab], 'vsep');
+        const browserContainer = currentTab.linkedBrowser?.closest('.browserSidebarContainer');
+        if (!gReduceMotion && browserContainer) {
+          gZenViewSplitter.animateBrowserDrop(browserContainer);
+        }
+      }
+    }
   }
 
   window.gZenGlanceManager = new ZenGlanceManager();

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

@@ -624,6 +624,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       this.dropZone.setAttribute('enabled', true);
     }
     const splitNode = this.getSplitNodeFromTab(tab);
+    if (!splitNode) return;
 
     const posToRoot = { ...splitNode.positionToRoot };
     const browserRect = browser.getBoundingClientRect();
@@ -1589,28 +1590,32 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     }
 
     if (browserContainer) {
-      gZenUIManager.motion
-        .animate(
-          browserContainer,
-          {
-            scale: [0.97, 1],
-            opacity: [0, 1],
-          },
-          {
-            type: 'spring',
-            bounce: 0.4,
-            duration: 0.2,
-            delay: 0.1,
-          }
-        )
-        .then(() => {
-          this._maybeRemoveFakeBrowser(false);
-          this._finishAllAnimatingPromise = null;
-        });
+      this.animateBrowserDrop(browserContainer, () => {
+        this._maybeRemoveFakeBrowser(false);
+        this._finishAllAnimatingPromise = null;
+      });
     }
     return true;
   }
 
+  animateBrowserDrop(browserContainer, callback = () => {}) {
+    gZenUIManager.motion
+      .animate(
+        browserContainer,
+        {
+          scale: [0.97, 1],
+          opacity: [0, 1],
+        },
+        {
+          type: 'spring',
+          bounce: 0.4,
+          duration: 0.2,
+          delay: 0.1,
+        }
+      )
+      .then(callback);
+  }
+
   handleTabDrop(event, urls, replace, inBackground) {
     if (replace || urls.length !== 1) {
       return false;

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

@@ -432,10 +432,8 @@
   list-style-image: url('bookmark.svg') !important;
 }
 
-#zen-split-views-button {
-  list-style-image: url('split.svg') !important;
-  fill: var(--toolbarbutton-icon-fill-attention);
-  fill-opacity: 1;
+#zen-glance-sidebar-split {
+  list-style-image: url('split.svg');
 }
 
 #sidebar-box[sidebarcommand='viewTabsSidebar'] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon,