mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-28 18:24:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: Improve split view switching perf and them resetting scroll, p=#10863, c=split-view

Browse Source 
* feat: Improve button sizings for the sidebar, b=no-bug, c=common, tabs, workspaces

* perf: Improved split view switch perf, b=no-bug, c=glance, split-view
This commit is contained in:
mr. m
2025-10-19 00:05:20 +02:00
committed by GitHub
parent 5ca34a53d2
commit c0cc10ecd7
8 changed files with 48 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/zen/split-view/ZenViewSplitter.mjs
View File

@@ -883,6 +883,8 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
tab.removeAttribute('split-view');
tab.linkedBrowser.zenModeActive = false;
const container = tab.linkedBrowser.closest('.browserSidebarContainer');
container.removeAttribute('is-zen-split');
container.style.inset = '';
this._removeHeader(container);
this.resetContainerStyle(container);
container.removeEventListener('mousedown', this.handleTabEvent);
@@ -1012,7 +1014,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
*
* @param {Browser} browser - The browser instance.
*/
async onLocationChange(browser) {
onLocationChange(browser) {
this.disableTabRearrangeView();
let tab = window.gBrowser.getTabForBrowser(browser);
const ignoreSplit = tab.hasAttribute('zen-dont-split-glance');
@@ -1256,6 +1258,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
tab.splitViewValue = this.currentView;
tab.setAttribute('split-view', 'true');
const container = tab.linkedBrowser?.closest('.browserSidebarContainer');
container.setAttribute('is-zen-split', 'true');
if (!container?.querySelector('.zen-tab-rearrange-button')) {
// insert a header into the container
const header = this._createHeader(container);
@@ -1308,9 +1311,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
const nodeRootPosition = splitNode.positionToRoot;
if (!splitNode.children) {
const browserContainer = splitNode.tab.linkedBrowser.closest('.browserSidebarContainer');
window.requestAnimationFrame(() => {
browserContainer.style.inset = `${nodeRootPosition.top}% ${nodeRootPosition.right}% ${nodeRootPosition.bottom}% ${nodeRootPosition.left}%`;
});
browserContainer.style.inset = `${nodeRootPosition.top}% ${nodeRootPosition.right}% ${nodeRootPosition.bottom}% ${nodeRootPosition.left}%`;
this._tabToSplitNode.set(splitNode.tab, splitNode);
return;
}
@@ -1341,13 +1342,11 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
if (i < splittersNeeded) {
const splitter = currentSplitters[i];
window.requestAnimationFrame(() => {
if (splitNode.direction === 'column') {
splitter.style.inset = `${100 - childRootPosition.bottom}% ${childRootPosition.right}% 0% ${childRootPosition.left}%`;
} else {
splitter.style.inset = `${childRootPosition.top}% 0% ${childRootPosition.bottom}% ${100 - childRootPosition.right}%`;
}
});
if (splitNode.direction === 'column') {
splitter.style.inset = `${100 - childRootPosition.bottom}% ${childRootPosition.right}% 0% ${childRootPosition.left}%`;
} else {
splitter.style.inset = `${childRootPosition.top}% 0% ${childRootPosition.bottom}% ${100 - childRootPosition.right}%`;
}
}
});
this.maybeDisableOpeningTabOnSplitView();
@@ -1539,7 +1538,6 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
*/
resetContainerStyle(container, removeDeckSelected = false) {
container.removeAttribute('zen-split');
container.style.inset = '';
if (removeDeckSelected) {
container.classList.remove('deck-selected');
}

27
src/zen/split-view/zen-decks.css
View File

@@ -18,6 +18,7 @@
flex: 0;
margin: 0;
}
#zen-splitview-dropzone {
border-radius: var(--zen-native-inner-radius);
transition: inset ease-out 0.08s;
@@ -31,10 +32,6 @@
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'],
#zen-splitview-dropzone {
flex: 1;
margin: var(--zen-split-column-gap) var(--zen-split-row-gap) !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
position: absolute !important;
overflow: hidden;
& .dialogStack {
@@ -43,6 +40,20 @@
}
}
.browserSidebarContainer[is-zen-split='true'],
#zen-splitview-dropzone {
position: absolute !important;
margin: var(--zen-split-column-gap) var(--zen-split-row-gap) !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
&.browserSidebarContainer:not([zen-split='true']) {
margin-top: 0 !important;
visibility: hidden;
}
}
#zen-splitview-dropzone {
margin-top: 0 !important;
}
@@ -66,13 +77,15 @@
}
}
#tabbrowser-tabbox {
--zen-split-row-gap: var(--zen-element-separation);
--zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
}
#tabbrowser-tabbox[zen-split-view='true'] {
:root[zen-no-padding='true'] & {
--zen-element-separation: 8px;
}
--zen-split-row-gap: var(--zen-element-separation);
--zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
margin-right: calc(-1 * var(--zen-split-column-gap));
}