From 5bbd881f01c90defe81987bb68c6b539eade6404 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Tue, 4 Mar 2025 15:21:00 +0100 Subject: [PATCH] Fixed common issues with split views and glance --- .../base/content/zen-styles/zen-decks.css | 12 +- .../content/zen-styles/zen-workspaces.css | 1 + .../base/zen-components/ZenCompactMode.mjs | 1 + .../base/zen-components/ZenGlanceManager.mjs | 7 +- .../base/zen-components/ZenViewSplitter.mjs | 143 +++++++++--------- 5 files changed, 81 insertions(+), 83 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css index 40bc938eb..79200caec 100644 --- a/src/browser/base/content/zen-styles/zen-decks.css +++ b/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, diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index 5b9ce55d5..9a13ac4da 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/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 { diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs index a88b25032..94f86472e 100644 --- a/src/browser/base/zen-components/ZenCompactMode.mjs +++ b/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); }); }); diff --git a/src/browser/base/zen-components/ZenGlanceManager.mjs b/src/browser/base/zen-components/ZenGlanceManager.mjs index d075beae4..578eb8183 100644 --- a/src/browser/base/zen-components/ZenGlanceManager.mjs +++ b/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); diff --git a/src/browser/base/zen-components/ZenViewSplitter.mjs b/src/browser/base/zen-components/ZenViewSplitter.mjs index 323d31223..20eb67afc 100644 --- a/src/browser/base/zen-components/ZenViewSplitter.mjs +++ b/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); - const browser = dropTarget?.closest('browser'); + window.requestAnimationFrame(() => { + const dropTarget = document.elementFromPoint(event.clientX, event.clientY); + const browser = dropTarget?.closest('browser'); - gBrowser.selectedTab = this._draggingTab; - this._draggingTab = null; + if (!browser) { + return false; + } - if (!browser) { - return false; - } + gBrowser.selectedTab = this._draggingTab; + this._draggingTab = null; - const droppedOnTab = gBrowser.getTabForBrowser(browser); - 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 = 'right'; + const droppedOnTab = gBrowser.getTabForBrowser(browser); + 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 = 'right'; - if (droppedOnTab.splitView) { - // Add to existing split view - const groupIndex = this._data.findIndex((group) => group.tabs.includes(droppedOnTab)); - const group = this._data[groupIndex]; + if (droppedOnTab.splitView) { + // Add to existing split view + const groupIndex = this._data.findIndex((group) => group.tabs.includes(droppedOnTab)); + const group = this._data[groupIndex]; - if (!group.tabs.includes(draggedTab) && group.tabs.length < this.MAX_TABS) { - // 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); - } + if (!group.tabs.includes(draggedTab) && group.tabs.length < this.MAX_TABS) { + // 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); + } - const droppedOnSplitNode = this.getSplitNodeFromTab(droppedOnTab); - const parentNode = droppedOnSplitNode.parent; + const droppedOnSplitNode = this.getSplitNodeFromTab(droppedOnTab); + const parentNode = droppedOnSplitNode.parent; - // Then add the tab to the split view - group.tabs.push(draggedTab); + // Then add the tab to the split view + group.tabs.push(draggedTab); - // If dropping on a side, create a new split in that direction - if (hoverSide !== 'center') { - const splitDirection = hoverSide === 'left' || hoverSide === 'right' ? 'row' : 'column'; - if (parentNode.direction !== splitDirection) { - this.splitIntoNode(droppedOnSplitNode, new SplitLeafNode(draggedTab, 50), hoverSide, 0.5); + // If dropping on a side, create a new split in that direction + if (hoverSide !== 'center') { + const splitDirection = hoverSide === 'left' || hoverSide === 'right' ? 'row' : 'column'; + if (parentNode.direction !== splitDirection) { + 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); - } - } 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'; - //} - - // 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, - } - ); + // 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; }