Refactor split view styles and update theme variables for improved UI consistency

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

@@ -379,7 +379,7 @@ pref('widget.macos.titlebar-blend-mode.behind-window', true);
 // 5. toolTip
 // 6. headerView
 // 7. underlay
-pref('zen.widget.macos.window-material', 7);
+pref('zen.widget.macos.window-material', 1);
 #endif
 
 // Urlbar and autocomplete

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

@@ -45,8 +45,7 @@
 }
 
 #tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer.deck-selected {
-  outline: 2px solid var(--zen-primary-color) !important;
-  outline-offset: -1px;
+  outline: 1px solid var(--zen-primary-color) !important;
 }
 
 #tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) {
@@ -214,38 +213,69 @@
   display: revert;
 }
 
-.zen-view-splitter-header {
-  display: flex;
-  width: 100%;
-  height: 20px;
-  /*TODO: update with appropriate color*/
-  background-color: var(--zen-colors-secondary);
-  align-items: center;
+.zen-view-splitter-header-container {
+  position: absolute;
+  top: calc(var(--zen-split-column-gap) / -2);
+  left: 50%;
+  opacity: 0;
+  transition: opacity 0.2s;
   z-index: 100;
-  cursor: move;
+  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-tab-unsplit-button {
+.zen-view-splitter-header {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  padding: 0.4rem 0.6rem;
+  border-radius: 8px;
+  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;
+}
+
+:root:not([inDOMFullscreen='true']) .browserSidebarContainer:hover .zen-view-splitter-header-container,
+.zen-view-splitter-header-container:hover {
+  pointer-events: all;
+  opacity: 1;
+  transition-delay: 0.2s;
+}
+
+.zen-view-splitter-header-container toolbarbutton {
   display: block;
   -moz-context-properties: fill, fill-opacity;
   border-radius: var(--tab-border-radius);
-  /*TODO: update with appropriate color*/
   color: inherit;
   fill: currentColor;
-  padding: var(--tab-close-button-padding);
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   cursor: pointer;
   appearance: none;
-  margin-left: auto;
-  outline: var(--toolbarbutton-outline);
-  list-style-image: url('chrome://global/skin/icons/close-fill.svg') !important;
-  &:hover {
-    outline-color: var(--toolbarbutton-hover-outline-color);
+  outline: none;
+  color: var(--button-primary-color);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+
+  & image {
+    width: 14px;
+    height: 14px;
   }
 
-  &:hover:active {
-    outline-color: var(--toolbarbutton-active-outline-color);
+  &.zen-tab-rearrange-button image {
+    transform: rotate(90deg);
+    cursor: move;
   }
 }
 
@@ -264,6 +294,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     width: 3.5rem;
+    pointer-events: none;
     height: 3.5rem;
     background: var(--zen-split-view-fake-icon);
     background-size: contain;

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -122,7 +122,7 @@
   &::before {
     height: 50px;
     width: 4px;
-    background: var(--zen-colors-primary);
+    background: var(--button-primary-bgcolor);
     border-radius: 2px;
     content: '';
     position: absolute;

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

@@ -164,7 +164,7 @@
     background: transparent;
     --zen-themed-toolbar-bg-transparent: transparent;
     @media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
-      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 80%, transparent 20%);
+      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 75%, transparent 25%);
     }
   }
 

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

@@ -177,13 +177,21 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       }
       draggedTab.container._finishMoveTogetherSelectedTabs(draggedTab);
     }
-    if (!draggedTab || this._canDrop || this._hasAnimated || this.fakeBrowser || !this._lastOpenedTab) {
+    if (
+      !draggedTab ||
+      this._canDrop ||
+      this._hasAnimated ||
+      this.fakeBrowser ||
+      !this._lastOpenedTab ||
+      (this._lastOpenedTab &&
+        this._lastOpenedTab.getAttribute('zen-workspace-id') !== draggedTab.getAttribute('zen-workspace-id'))
+    ) {
       return;
     }
     if (draggedTab.splitView) {
       return;
     }
-    const currentView = this._data[this.currentView];
+    const currentView = this._data[this._lastOpenedTab.splitViewValue];
     if (currentView?.tabs.length >= this.MAX_TABS) {
       return;
     }
@@ -249,48 +257,46 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     if (!this._hasAnimated || !this.fakeBrowser) {
       return;
     }
-    setTimeout(() => {
-      const panelsWidth = panelsRect.width;
-      const halfWidth = panelsWidth / 2;
-      const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
-      if (!this.fakeBrowser) {
-        return;
-      }
-      this.fakeBrowser.classList.add('fade-out');
-      gBrowser.selectedTab = this._draggingTab;
-      this._draggingTab = null;
-      try {
-        Promise.all([
-          gZenUIManager.motion.animate(
-            gBrowser.tabbox,
-            {
-              paddingLeft: [`${halfWidth}px`, 0],
-            },
-            {
-              duration: 0.15,
-              easing: 'ease-out',
-            }
-          ),
-          gZenUIManager.motion.animate(
-            this.fakeBrowser,
-            {
-              width: [`${halfWidth - padding * 2}px`, 0],
-              marginLeft: [`${-(halfWidth - padding)}px`, 0],
-            },
-            {
-              duration: 0.15,
-              easing: 'ease-out',
-            }
-          ),
-        ]).then(() => {
-          this._canDrop = false;
-          this._maybeRemoveFakeBrowser();
-        });
-      } catch (e) {
+    const panelsWidth = panelsRect.width;
+    const halfWidth = panelsWidth / 2;
+    const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
+    if (!this.fakeBrowser) {
+      return;
+    }
+    this.fakeBrowser.classList.add('fade-out');
+    gBrowser.selectedTab = this._draggingTab;
+    this._draggingTab = null;
+    try {
+      Promise.all([
+        gZenUIManager.motion.animate(
+          gBrowser.tabbox,
+          {
+            paddingLeft: [`${halfWidth}px`, 0],
+          },
+          {
+            duration: 0.15,
+            easing: 'ease-out',
+          }
+        ),
+        gZenUIManager.motion.animate(
+          this.fakeBrowser,
+          {
+            width: [`${halfWidth - padding * 2}px`, 0],
+            marginLeft: [`${-(halfWidth - padding)}px`, 0],
+          },
+          {
+            duration: 0.15,
+            easing: 'ease-out',
+          }
+        ),
+      ]).then(() => {
         this._canDrop = false;
         this._maybeRemoveFakeBrowser();
-      }
-    }, 100);
+      });
+    } catch (e) {
+      this._canDrop = false;
+      this._maybeRemoveFakeBrowser();
+    }
   }
 
   /**
@@ -440,7 +446,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     let isSplitHeaderDrag = false;
 
     const container = event.target.closest('.browserSidebarContainer[zen-split]');
-    if (container && event.offsetY < 20) {
+    if (container && event.target.closest('.zen-tab-rearrange-button')) {
       // Split tab header drag case
       const containerRect = container.getBoundingClientRect();
       const clickX = event.clientX - containerRect.left;
@@ -700,6 +706,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
    */
   resetTabState(tab, forUnsplit) {
     tab.splitView = false;
+    delete tab.splitViewValue;
     tab.removeAttribute('split-view');
     tab.linkedBrowser.zenModeActive = false;
     const container = tab.linkedBrowser.closest('.browserSidebarContainer');
@@ -853,6 +860,26 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     this._maybeRemoveFakeBrowser();
   }
 
+  /**
+   * @param {Tab} tab
+   */
+  _moveTabsToContainer(tabs, relativeTab) {
+    const relativeTabIsPinned = relativeTab.pinned;
+    const relativeTabIsEssential = relativeTab.hasAttribute('zen-essential');
+
+    if (relativeTabIsEssential) {
+      gZenPinnedTabManager.addToEssentials(tabs);
+    } else {
+      for (const tab of tabs) {
+        if (relativeTabIsPinned) {
+          gBrowser.pinTab(tab);
+        } else {
+          gBrowser.unpinTab(tab);
+        }
+      }
+    }
+  }
+
   /**
    * Splits the given tabs.
    *
@@ -865,20 +892,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     if (tabs.length < 2 || tabs.length > this.MAX_TABS) {
       return;
     }
-    const firstIsPinned = tabs[initialIndex].pinned;
-    const firstIsEssential = tabs[initialIndex].hasAttribute('zen-essential');
-    const oddOnes = tabs.filter((t) => t.pinned !== firstIsPinned || t.hasAttribute('zen-essential') != firstIsEssential);
-    if (firstIsEssential) {
-      gZenPinnedTabManager.addToEssentials(oddOnes);
-    } else {
-      for (const tab of oddOnes) {
-        if (firstIsPinned) {
-          gBrowser.pinTab(tab);
-        } else {
-          gBrowser.unpinTab(tab);
-        }
-      }
-    }
+    this._moveTabsToContainer(tabs, tabs[initialIndex]);
 
     const existingSplitTab = tabs.find((tab) => tab.splitView);
     if (existingSplitTab) {
@@ -1025,9 +1039,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
   applyGridToTabs(tabs) {
     tabs.forEach((tab, index) => {
       tab.splitView = true;
+      tab.splitViewValue = this.currentView;
       tab.setAttribute('split-view', 'true');
-      const container = tab.linkedBrowser.closest('.browserContainer');
-      if (!container.querySelector('.zen-view-splitter-header')) {
+      const container = tab.linkedBrowser?.closest('.browserSidebarContainer');
+      if (!container?.querySelector('.zen-tab-rearrange-button')) {
         // insert a header into the container
         const header = this._createHeader(container);
         container.insertBefore(header, container.firstChild);
@@ -1043,6 +1058,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
    * @private
    */
   _createHeader(container) {
+    const headerContainer = document.createElement('div');
+    headerContainer.classList.add('zen-view-splitter-header-container');
     const header = document.createElement('div');
     header.classList.add('zen-view-splitter-header');
     const removeButton = document.createXULElement('toolbarbutton');
@@ -1050,12 +1067,16 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     removeButton.addEventListener('click', () => {
       this.removeTabFromSplit(container);
     });
+    const rearrangeButton = document.createXULElement('toolbarbutton');
+    rearrangeButton.classList.add('zen-tab-rearrange-button');
+    header.appendChild(rearrangeButton);
     header.appendChild(removeButton);
-    return header;
+    headerContainer.appendChild(header);
+    return headerContainer;
   }
 
   _removeHeader(container) {
-    const header = container.querySelector('.zen-view-splitter-header');
+    const header = container.querySelector('.zen-view-splitter-header-container');
     if (header) {
       header.remove();
     }
@@ -1446,14 +1467,16 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     }
   };
 
-  _maybeRemoveFakeBrowser() {
+  _maybeRemoveFakeBrowser(select = true) {
     gBrowser.tabbox.removeAttribute('style');
     if (this.fakeBrowser) {
       delete this._hasAnimated;
       this.fakeBrowser.remove();
       this.fakeBrowser = null;
-      gBrowser.selectedTab = this._draggingTab;
-      this._draggingTab = null;
+      if (select) {
+        gBrowser.selectedTab = this._draggingTab;
+        this._draggingTab = null;
+      }
     }
   }
 
@@ -1465,7 +1488,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
    */
   moveTabToSplitView(event, draggedTab) {
     const canDrop = this._canDrop;
-    this._maybeRemoveFakeBrowser();
+    this._maybeRemoveFakeBrowser(false);
     this._canDrop = false;
     if (!canDrop) {
       return false;
@@ -1474,6 +1497,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     const dropTarget = document.elementFromPoint(event.clientX, event.clientY);
     const browser = dropTarget?.closest('browser');
 
+    gBrowser.selectedTab = this._draggingTab;
+    this._draggingTab = null;
+
     if (!browser) {
       return false;
     }
@@ -1482,7 +1508,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     if (droppedOnTab && droppedOnTab !== draggedTab) {
       // Calculate which side of the target browser the drop occurred
       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';
 
       if (droppedOnTab.splitView) {
         // Add to existing split view
@@ -1493,6 +1520,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
           // First move the tab to the split view group
           let splitGroup = droppedOnTab.group;
           if (splitGroup && (!draggedTab.group || draggedTab.group !== splitGroup)) {
+            this._moveTabsToContainer([draggedTab], droppedOnTab);
             gBrowser.moveTabToGroup(draggedTab, splitGroup);
           }
 

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

@@ -23,6 +23,10 @@
   list-style-image: url('move-tab.svg') !important;
 }
 
+.zen-tab-unsplit-button {
+  list-style-image: url('unpin.svg') !important;
+}
+
 #forward-button,
 #zen-sidebar-web-panel-forward {
   list-style-image: url('forward.svg') !important;
@@ -381,7 +385,8 @@
   list-style-image: url('arrow-down.svg') !important;
 }
 
-.zen-workspace-actions-reorder-icon {
+.zen-workspace-actions-reorder-icon,
+.zen-tab-rearrange-button {
   list-style-image: url('drag-indicator.svg') !important;
 }
 

src/toolkit/components/pictureinpicture/PictureInPicture-sys-mjs.patch

@@ -1,8 +1,8 @@
 diff --git a/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs b/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs
-index 27f7208ac689c51443a0a6ffafd77f89b71d0030..dcd664f85e27618e23118a80af54a6400b12b806 100644
+index 5da0404b2672ba8cce7bcf808bf2373474776654..c3d58941b66c54f9d506698d015e294f8c8a5ceb 100644
 --- a/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs
 +++ b/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs
-@@ -471,8 +471,8 @@ export var PictureInPicture = {
+@@ -488,13 +488,13 @@ export var PictureInPicture = {
        return;
      }
  
@@ -13,7 +13,13 @@ index 27f7208ac689c51443a0a6ffafd77f89b71d0030..dcd664f85e27618e23118a80af54a640
  
      // focus the tab's window
      tab.ownerGlobal.focus();
-@@ -875,7 +875,7 @@ export var PictureInPicture = {
+ 
+-    gBrowser.selectedTab = tab;
++    browser?.ownerGlobal?.ZenWorkspaces.switchIfNeeded(browser);
+     await this.closeSinglePipWindow({ reason: "Unpip", actorRef: pipActor });
+   },
+ 
+@@ -877,7 +877,7 @@ export var PictureInPicture = {
      win.setIsMutedState(videoData.isMuted);
  
      // set attribute which shows pip icon in tab