Fixed common issues with split views and glance

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

@@ -222,17 +222,6 @@
   z-index: 100;
   transform: translateX(-50%);
   pointer-events: none;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 6px;
-    background: var(--zen-colors-border);
-  }
 }
 
 .zen-view-splitter-header {
@@ -244,6 +233,7 @@
   background-color: light-dark(rgba(255, 255, 255, 1), rgba(0, 0, 0, 1));
   box-shadow: 0 0 0 1px var(--button-primary-border-color);
   gap: 0.8rem;
+  transform: translateX(-50%);
 }
 
 :root:not([inDOMFullscreen='true']) .browserSidebarContainer:hover .zen-view-splitter-header-container,

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

@@ -489,6 +489,7 @@
 
   & .zen-current-workspace-indicator-icon {
     font-size: 12px;
+    line-height: 1;
   }
 
   .zen-current-workspace-indicator-name {

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

@@ -202,6 +202,7 @@ var gZenCompactModeManager = {
                 this._animating = false;
                 this.sidebar.style.removeProperty('visibility');
                 this.sidebar.style.removeProperty('transition');
+                thhis.sidebar.style.removeProperty('opacity');
               }, 300);
             });
           });

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

@@ -468,7 +468,6 @@
         owner &&
         owner.pinned &&
         this._lazyPref.SHOULD_OPEN_EXTERNAL_TABS_IN_GLANCE &&
-        owner.linkedBrowser?.docShellIsActive &&
         owner.linkedBrowser?.browsingContext?.isAppTab &&
         this.tabDomainsDiffer(owner, uri) &&
         Services.prefs.getBoolPref('zen.glance.enabled', true)
@@ -483,7 +482,11 @@
       try {
         if (this.shouldOpenTabInGlance(tab, uri)) {
           const browserRect = gBrowser.tabbox.getBoundingClientRect();
-          this.openGlance({ url: undefined, x: browserRect.width / 2, y: browserRect.height / 2, width: 0, height: 0 });
+          this.openGlance(
+            { url: undefined, x: browserRect.width / 2, y: browserRect.height / 2, width: 0, height: 0 },
+            tab,
+            tab.owner
+          );
         }
       } catch (e) {
         console.error(e);

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

@@ -1494,94 +1494,97 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     const canDrop = this._canDrop;
     this._maybeRemoveFakeBrowser(false);
     this._canDrop = false;
+
     if (!canDrop) {
       return false;
     }
 
-    const dropTarget = document.elementFromPoint(event.clientX, event.clientY);
+    window.requestAnimationFrame(() => {
-    const browser = dropTarget?.closest('browser');
+      const dropTarget = document.elementFromPoint(event.clientX, event.clientY);
+      const browser = dropTarget?.closest('browser');
 
-    gBrowser.selectedTab = this._draggingTab;
+      if (!browser) {
-    this._draggingTab = null;
+        return false;
+      }
 
-    if (!browser) {
+      gBrowser.selectedTab = this._draggingTab;
-      return false;
+      this._draggingTab = null;
-    }
 
-    const droppedOnTab = gBrowser.getTabForBrowser(browser);
+      const droppedOnTab = gBrowser.getTabForBrowser(browser);
-    if (droppedOnTab && droppedOnTab !== draggedTab) {
+      if (droppedOnTab && droppedOnTab !== draggedTab) {
-      // Calculate which side of the target browser the drop occurred
+        // Calculate which side of the target browser the drop occurred
-      // const browserRect = browser.getBoundingClientRect();
+        // const browserRect = browser.getBoundingClientRect();
-      // const hoverSide = this.calculateHoverSide(event.clientX, event.clientY, browserRect);
+        // const hoverSide = this.calculateHoverSide(event.clientX, event.clientY, browserRect);
-      const hoverSide = 'right';
+        const hoverSide = 'right';
 
-      if (droppedOnTab.splitView) {
+        if (droppedOnTab.splitView) {
-        // Add to existing split view
+          // Add to existing split view
-        const groupIndex = this._data.findIndex((group) => group.tabs.includes(droppedOnTab));
+          const groupIndex = this._data.findIndex((group) => group.tabs.includes(droppedOnTab));
-        const group = this._data[groupIndex];
+          const group = this._data[groupIndex];
 
-        if (!group.tabs.includes(draggedTab) && group.tabs.length < this.MAX_TABS) {
+          if (!group.tabs.includes(draggedTab) && group.tabs.length < this.MAX_TABS) {
-          // First move the tab to the split view group
+            // First move the tab to the split view group
-          let splitGroup = droppedOnTab.group;
+            let splitGroup = droppedOnTab.group;
-          if (splitGroup && (!draggedTab.group || draggedTab.group !== splitGroup)) {
+            if (splitGroup && (!draggedTab.group || draggedTab.group !== splitGroup)) {
-            this._moveTabsToContainer([draggedTab], droppedOnTab);
+              this._moveTabsToContainer([draggedTab], droppedOnTab);
-            gBrowser.moveTabToGroup(draggedTab, splitGroup);
+              gBrowser.moveTabToGroup(draggedTab, splitGroup);
-          }
+            }
 
-          const droppedOnSplitNode = this.getSplitNodeFromTab(droppedOnTab);
+            const droppedOnSplitNode = this.getSplitNodeFromTab(droppedOnTab);
-          const parentNode = droppedOnSplitNode.parent;
+            const parentNode = droppedOnSplitNode.parent;
 
-          // Then add the tab to the split view
+            // Then add the tab to the split view
-          group.tabs.push(draggedTab);
+            group.tabs.push(draggedTab);
 
-          // If dropping on a side, create a new split in that direction
+            // If dropping on a side, create a new split in that direction
-          if (hoverSide !== 'center') {
+            if (hoverSide !== 'center') {
-            const splitDirection = hoverSide === 'left' || hoverSide === 'right' ? 'row' : 'column';
+              const splitDirection = hoverSide === 'left' || hoverSide === 'right' ? 'row' : 'column';
-            if (parentNode.direction !== splitDirection) {
+              if (parentNode.direction !== splitDirection) {
-              this.splitIntoNode(droppedOnSplitNode, new SplitLeafNode(draggedTab, 50), hoverSide, 0.5);
+                this.splitIntoNode(droppedOnSplitNode, new SplitLeafNode(draggedTab, 50), hoverSide, 0.5);
+              } else {
+                this.addTabToSplit(draggedTab, parentNode);
+              }
             } else {
-              this.addTabToSplit(draggedTab, parentNode);
+              this.addTabToSplit(draggedTab, group.layoutTree);
             }
-          } else {
+
-            this.addTabToSplit(draggedTab, group.layoutTree);
+            this.activateSplitView(group, true);
           }
+        } else {
+          // Create new split view with layout based on drop position
+          let gridType = 'vsep';
+          //switch (hoverSide) {
+          //  case 'left':
+          //  case 'right':
+          //    gridType = 'vsep';
+          //    break;
+          //  case 'top':
+          //  case 'bottom':
+          //    gridType = 'hsep';
+          //    break;
+          //  default:
+          //    gridType = 'grid';
+          //}
 
-          this.activateSplitView(group, true);
+          // Put tabs always as if it was dropped from the left
-        }
+          this.splitTabs([draggedTab, droppedOnTab], gridType, 1);
-      } else {
+          if (draggedTab.linkedBrowser) {
-        // Create new split view with layout based on drop position
+            gZenUIManager.motion.animate(
-        let gridType = 'vsep';
+              draggedTab.linkedBrowser.closest('.browserSidebarContainer'),
-        //switch (hoverSide) {
+              {
-        //  case 'left':
+                scale: [0.98, 1],
-        //  case 'right':
+              },
-        //    gridType = 'vsep';
+              {
-        //    break;
+                type: 'spring',
-        //  case 'top':
+                bounce: 0.5,
-        //  case 'bottom':
+                duration: 0.5,
-        //    gridType = 'hsep';
+                delay: 0.1,
-        //    break;
+              }
-        //  default:
+            );
-        //    gridType = 'grid';
+          }
-        //}
-
-        // Put tabs always as if it was dropped from the left
-        this.splitTabs([draggedTab, droppedOnTab], gridType, 1);
-        if (draggedTab.linkedBrowser) {
-          gZenUIManager.motion.animate(
-            draggedTab.linkedBrowser.closest('.browserSidebarContainer'),
-            {
-              scale: [0.98, 1],
-            },
-            {
-              type: 'spring',
-              bounce: 0.5,
-              duration: 0.5,
-              delay: 0.1,
-            }
-          );
         }
       }
-    }
+    });
     return true;
   }