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

feat: Improved performance for compact mode by stoping the use of has selectors, b=no-bug, c=common, compact-mode, split-view

Browse Source
This commit is contained in:
mr. m
2025-07-24 12:14:59 +02:00
parent d0df3d5a52
commit 2ad591f784
9 changed files with 99 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -12,8 +12,9 @@
content/browser/zen-components/ZenUIMigration.mjs (../../zen/common/ZenUIMigration.mjs)
content/browser/zen-components/ZenCommonUtils.mjs (../../zen/common/ZenCommonUtils.mjs)
content/browser/zen-components/ZenSessionStore.mjs (../../zen/common/ZenSessionStore.mjs)
content/browser/zen-components/ZenEmojisData.min.mjs (../../zen/common/emojis/ZenEmojisData.min.mjs)
content/browser/zen-components/ZenEmojisData.min.mjs (../../zen/common/emojis/ZenEmojisData.min.mjs)
content/browser/zen-components/ZenEmojiPicker.mjs (../../zen/common/emojis/ZenEmojiPicker.mjs)
content/browser/zen-components/ZenHasPolyfill.mjs (../../zen/common/ZenHasPolyfill.mjs)
content/browser/zen-styles/zen-theme.css (../../zen/common/styles/zen-theme.css)
content/browser/zen-styles/zen-buttons.css (../../zen/common/styles/zen-buttons.css)
@@ -29,7 +30,6 @@
content/browser/zen-styles/zen-branding.css (../../zen/common/styles/zen-branding.css)
content/browser/zen-styles/zen-panels/bookmarks.css (../../zen/common/styles/zen-panels/bookmarks.css)
content/browser/zen-styles/zen-panels/extensions.css (../../zen/common/styles/zen-panels/extensions.css)
content/browser/zen-styles/zen-panels/print.css (../../zen/common/styles/zen-panels/print.css)
content/browser/zen-styles/zen-panels/dialog.css (../../zen/common/styles/zen-panels/dialog.css)

1
src/browser/base/content/zen-preloaded.inc.xhtml
View File

@@ -6,6 +6,7 @@
# the window is fully loaded.
# Make sure they are loaded before the global-scripts.inc file.
<script type="text/javascript" src="chrome://browser/content/zen-sets.js"></script>
<script type="text/javascript" src="chrome://browser/content/zen-components/ZenHasPolyfill.mjs"></script>
<script type="text/javascript" src="chrome://browser/content/zen-components/ZenCommonUtils.mjs"></script>
<script type="text/javascript" src="chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs"></script>
<script type="text/javascript" src="chrome://browser/content/zen-components/ZenWorkspaceIcons.mjs"></script>

71
src/zen/common/ZenHasPolyfill.mjs Normal file
View File

@@ -0,0 +1,71 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
{
class nsHasPolyfill {
constructor() {
this.observers = [];
this.idStore = 0;
}
/**
* @param {{selector: string, exists: boolean}} descendantSelectors
*/
observeSelectorExistence(element, descendantSelectors, stateAttribute) {
const updateState = () => {
const exists = descendantSelectors.some(({ selector }) => {
return element.querySelector(selector);
});
const { exists: shouldExist = true } = descendantSelectors;
if (exists === shouldExist) {
if (!element.hasAttribute(stateAttribute)) {
element.setAttribute(stateAttribute, 'true');
}
} else {
if (element.hasAttribute(stateAttribute)) {
element.removeAttribute(stateAttribute);
}
}
};
const observer = new MutationObserver(updateState);
updateState();
const observerId = this.idStore++;
this.observers.push({
id: observerId,
observer,
element,
});
return observerId;
}
disconnectObserver(observerId) {
const index = this.observers.findIndex((o) => o.id === observerId);
if (index !== -1) {
this.observers[index].observer.disconnect();
}
}
connectObserver(observerId) {
const observer = this.observers.find((o) => o.id === observerId);
if (observer) {
observer.observer.observe(observer.element, {
childList: true,
subtree: true,
attributes: true,
});
}
}
destroy() {
this.observers.forEach((observer) => observer.observer.disconnect());
this.observers = [];
}
}
const hasPolyfillInstance = new nsHasPolyfill();
window.addEventListener('unload', () => hasPolyfillInstance.destroy(), { once: true });
window.ZenHasPolyfill = hasPolyfillInstance;
}

73
src/zen/common/styles/zen-panels/extensions.css
View File

@@ -1,73 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
#unified-extensions-manage-extensions {
padding-left: 20px;
}
panelview .unified-extensions-item-action-button {
padding: 5px 20px;
}
#unified-extensions-description {
padding: 0 20px;
margin: 0;
}
.unified-extensions-item {
padding: 0;
}
#unified-extensions-view {
--uei-icon-size: 16px;
.unified-extensions-item {
margin-block: 0;
border-radius: var(--arrowpanel-menuitem-border-radius);
> .unified-extensions-item-action-button {
.unified-extensions-item-message-deck {
display: none;
}
&:hover {
background-color: initial;
}
}
> .unified-extensions-item-menu-button {
list-style-image: url('chrome://global/skin/icons/more.svg');
padding: 0;
> .toolbarbutton-icon {
padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
border: none;
opacity: 0;
}
&:hover {
> .toolbarbutton-icon {
background-color: initial;
}
&:active {
color: var(--button-primary-hover-bgcolor);
}
}
}
&:hover {
background-color: var(--panel-item-hover-bgcolor);
> .unified-extensions-item-menu-button > .toolbarbutton-icon {
opacity: 1;
}
}
&:has(> .unified-extensions-item-action-button:not([disabled]):hover:active) {
background-color: var(--panel-item-active-bgcolor);
}
}
}

1
src/zen/common/styles/zen-popup.css
View File

@@ -4,7 +4,6 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
@import url('chrome://browser/content/zen-styles/zen-panels/bookmarks.css');
@import url('chrome://browser/content/zen-styles/zen-panels/extensions.css');
@import url('chrome://browser/content/zen-styles/zen-panels/print.css');
@import url('chrome://browser/content/zen-styles/zen-panels/dialog.css');

20
src/zen/compact-mode/ZenCompactMode.mjs
View File

@@ -60,6 +60,8 @@ var gZenCompactModeManager = {
document.getElementById('zen-appcontent-navbar-wrapper')
);
this.addHasPolyfillObserver();
// Clear hover states when window state changes (minimize, maximize, etc.)
window.addEventListener('sizemodechange', () => this._clearAllHoverStates());
@@ -126,6 +128,19 @@ var gZenCompactModeManager = {
return gNavToolbox;
},
addHasPolyfillObserver() {
this.sidebarObserverId = ZenHasPolyfill.observeSelectorExistence(
this.sidebar,
[
{
selector:
":is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)",
},
],
'zen-compact-mode-active'
);
},
flashSidebarIfNecessary(aInstant = false) {
// This function is called after exiting DOM fullscreen mode,
// so we do a bit of a hack to re-calculate the URL height
@@ -199,6 +214,11 @@ var gZenCompactModeManager = {
// IF we are animating IN, call the callbacks first so we can calculate the width
// once the window buttons are shown
this.updateContextMenu();
if (this.preference) {
ZenHasPolyfill.connectObserver(this.sidebarObserverId);
} else {
ZenHasPolyfill.disconnectObserver(this.sidebarObserverId);
}
if (!this.preference) {
this._evenListeners.forEach((callback) => callback());
await this.animateCompactMode();

5
src/zen/compact-mode/zen-compact-mode.css
View File

@@ -182,11 +182,8 @@
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
#navigator-toolbox:has(.tabbrowser-tab:active),
&[zen-renaming-tab='true'] #navigator-toolbox,
#navigator-toolbox:has(
*:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)
) {
#navigator-toolbox[zen-compact-mode-active] {
&:not([animate='true']) {
--zen-compact-mode-func: linear(
0 0%,

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

@@ -1151,6 +1151,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
}
this.removeSplitters();
this.tabBrowserPanel.removeAttribute('zen-split-view');
document.getElementById('tabbrowser-tabbox').removeAttribute('zen-split-view');
this.currentView = -1;
this.toggleWrapperDisplay(false);
this.maybeDisableOpeningTabOnSplitView();
@@ -1174,6 +1175,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
});
this.tabBrowserPanel.setAttribute('zen-split-view', 'true');
document.getElementById('tabbrowser-tabbox').setAttribute('zen-split-view', 'true');
this.applyGridToTabs(splitData.tabs);
this.applyGridLayout(splitData.layoutTree);

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

@@ -64,7 +64,7 @@
}
}
#tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) {
#tabbrowser-tabbox[zen-split-view='true'] {
:root[zen-no-padding='true'] & {
--zen-element-separation: 8px;
}