mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-01-24 21:56:10 +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

4
src/zen/common/styles/zen-browser-ui.css
View File

@@ -26,6 +26,10 @@
}
}
:root:not([zen-single-toolbar='true']) #zen-navigator-toolbox #zen-sidebar-top-buttons {
--zen-toolbar-height: 42px;
}
:root[zen-before-loaded='true'] #browser > *:not(#zen-toast-container),
:root[zen-before-loaded='true'] #urlbar {
opacity: 0 !important;

5
src/zen/common/styles/zen-single-components.css
View File

@@ -173,7 +173,10 @@ body > #confetti {
.toolbarbutton-1:not(#tabs-newtab-button) {
--tab-border-radius: 6px;
--toolbarbutton-border-radius: var(--tab-border-radius);
--toolbarbutton-inner-padding: 7px;
--toolbarbutton-inner-padding: 6px;
@media (-moz-platform: macos) {
--toolbarbutton-inner-padding: 8px;
}
--toolbarbutton-outer-padding: 2px;
transition:

3
src/zen/glance/ZenGlanceManager.mjs
View File

@@ -320,6 +320,9 @@
// we see flashing and if we do it directly, the animation does not play at all.
// eslint-disable-next-line no-async-promise-executor
return new Promise(async (resolve) => {
// Recalculate location. When opening from pinned tabs,
// view splitter doesn't catch if the tab is a glance tab or not.
gZenViewSplitter.onLocationChange(browserElement);
this.#prepareGlanceAnimation(data, browserElement);
if (data.width && data.height) {
data.elementData = await this.#getElementPreviewData(data);

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

7
src/zen/tabs/zen-tabs/vertical-tabs.css
View File

@@ -115,7 +115,7 @@
}
& #zen-sidebar-top-buttons {
margin: var(--zen-toolbox-padding) 0 calc(var(--zen-toolbox-padding) / 2) 0;
margin: calc(var(--zen-toolbox-padding) / 2) 0;
:root[zen-right-side='true']:not([zen-window-buttons-reversed='true']) & {
margin-top: 0;
}
@@ -961,7 +961,10 @@
}
:root[zen-single-toolbar='true'] & {
--toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important;
--zen-toolbar-height: 36px;
@media (-moz-platform: macos) {
--zen-toolbar-height: 42px;
}
& #PanelUI-button {
order: -2;

2
src/zen/workspaces/ZenWorkspaces.mjs
View File

@@ -3048,7 +3048,7 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
parent.removeAttribute('icons-overflow');
return;
}
const maxButtonSize = 30; // IMPORTANT: This should match the CSS size of the icons
const maxButtonSize = 32; // IMPORTANT: This should match the CSS size of the icons
const minButtonSize = 15;
const separation = 3; // Space between icons

2
src/zen/workspaces/zen-workspaces.css
View File

@@ -239,7 +239,7 @@
--toolbarbutton-inner-padding: 6px;
& image {
border-radius: calc(var(--border-radius-medium) - 4px) !important;
border-radius: max(calc(var(--border-radius-medium) - 4px), 4px) !important;
width: 26px;
height: 26px;
margin-right: -1px;