mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-17 07:16:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed common issues with split views and glance

Browse Source
This commit is contained in:
mr. m
2025-03-04 15:21:00 +01:00
parent 096a28002f
commit 5bbd881f01
5 changed files with 81 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/browser/base/content/zen-styles/zen-decks.css
View File

@@ -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,

1
src/browser/base/content/zen-styles/zen-workspaces.css
View File

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

1
src/browser/base/zen-components/ZenCompactMode.mjs
View File

@@ -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);
});
});

7
src/browser/base/zen-components/ZenGlanceManager.mjs
View File

@@ -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);

143
src/browser/base/zen-components/ZenViewSplitter.mjs
View File

@@ -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;
}