mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor element separation handling in ZenThemeModifier and update references in ZenCompactMode and ZenViewSplitter

Browse Source
This commit is contained in:
mr. m
2025-04-09 14:04:24 +02:00
parent b31e712d2c
commit 509cb2471d
3 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/browser/base/content/zenThemeModifier.js
View File

@@ -11,6 +11,7 @@
*/
const kZenThemePrefsList = ['zen.theme.accent-color', 'zen.theme.border-radius', 'zen.theme.content-element-separation'];
const kZenMaxElementSeparation = 12;
/**
* ZenThemeModifier controls the application of theme data to the browser,
@@ -68,7 +69,7 @@ var ZenThemeModifier = {
},
updateElementSeparation() {
const separation = Services.prefs.getIntPref('zen.theme.content-element-separation');
let separation = this.elementSeparation;
document.documentElement.style.setProperty('--zen-element-separation', separation + 'px');
if (separation == 0) {
document.documentElement.setAttribute('zen-no-padding', true);
@@ -77,6 +78,10 @@ var ZenThemeModifier = {
}
},
get elementSeparation() {
return Math.min(Services.prefs.getIntPref('zen.theme.content-element-separation'), kZenMaxElementSeparation);
},
/**
* Update the accent color.
*/

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

@@ -190,7 +190,6 @@ var gZenCompactModeManager = {
!this.sidebar.hasAttribute('zen-has-empty-tab') &&
!this.sidebar.hasAttribute('zen-has-hover');
// Do this so we can get the correct width ONCE compact mode styled have been applied
const titlebar = this.sidebar.querySelector('#titlebar');
if (canAnimate) {
this.sidebar.setAttribute('animate', 'true');
}
@@ -206,7 +205,12 @@ var gZenCompactModeManager = {
return;
}
if (canHideSidebar && isCompactMode) {
const elementSeparation = ZenThemeModifier.elementSeparation;
sidebarWidth -= 0.5 * splitterWidth;
if (elementSeparation < splitterWidth) {
// Subtract from the splitter width to end up with the correct element separation
sidebarWidth += 1.5 * splitterWidth - elementSeparation;
}
gZenUIManager.motion
.animate(
this.sidebar,
@@ -223,24 +227,14 @@ var gZenCompactModeManager = {
)
.then(() => {
this.sidebar.style.transition = 'none';
this.sidebar.style.opacity = 0;
this.getAndApplySidebarWidth();
setTimeout(() => {
this.sidebar.removeAttribute('animate');
document.documentElement.removeAttribute('zen-compact-animating');
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
if (this.sidebarIsOnRight) {
this.sidebar.style.right = `-100%`;
} else {
this.sidebar.style.left = `-100%`;
}
setTimeout(() => {
this.sidebar.style.left = '';
this.sidebar.style.right = '';
this.sidebar.style.removeProperty('opacity');
this.sidebar.style.removeProperty('transform');
this.sidebar.style.removeProperty('transition');
}, 200);

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

@@ -242,7 +242,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
}
this.fakeBrowser = document.createXULElement('vbox');
window.addEventListener('dragend', this.onBrowserDragEndToSplit, { once: true });
const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
const padding = ZenThemeModifier.elementSeparation;
this.fakeBrowser.setAttribute('flex', '1');
this.fakeBrowser.id = 'zen-split-view-fake-browser';
if (oldTab.splitView) {
@@ -317,7 +317,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
}
const panelsWidth = panelsRect.width;
const halfWidth = panelsWidth / 2;
const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
const padding = ZenThemeModifier.elementSeparation;
if (!this.fakeBrowser) {
return;
}
@@ -1525,7 +1525,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
const dropSide = this.fakeBrowser?.getAttribute('side');
const containerRect = this.fakeBrowser.getBoundingClientRect();
const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
const padding = ZenThemeModifier.elementSeparation;
const dropTarget = document.elementFromPoint(
dropSide === 'left' ? containerRect.left + containerRect.width + padding + 5 : containerRect.left - padding - 5,
event.clientY