From a53b3130c8a8aa8708d8d0f41d09f898b02c3c6e Mon Sep 17 00:00:00 2001 From: Sarangem <156000180+Sarangem@users.noreply.github.com> Date: Wed, 19 Mar 2025 07:47:02 +0000 Subject: [PATCH 1/4] Update flatpak manifest file Update variable $MESA_SHADER_CACHE_DIR to /var/cache/ which is mounted at ~/.var/app/$FLATPAK_ID/cache. Solves issue #3813 Signed-off-by: Sarangem <156000180+Sarangem@users.noreply.github.com> --- flatpak/app.zen_browser.zen.yml.template | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/flatpak/app.zen_browser.zen.yml.template b/flatpak/app.zen_browser.zen.yml.template index a8f5adeac..20b242489 100644 --- a/flatpak/app.zen_browser.zen.yml.template +++ b/flatpak/app.zen_browser.zen.yml.template @@ -28,7 +28,7 @@ finish-args: - --system-talk-name=org.freedesktop.NetworkManager - --talk-name=org.a11y.Bus - --env=GTK_PATH=/app/lib/gtkmodules - - --env=MESA_SHADER_CACHE_DIR=$XDG_RUNTIME_DIR/app/$FLATPAK_ID/cache/mesa_shader_cache_db + - --env=MESA_SHADER_CACHE_DIR=/var/cache/mesa_shader_cache_db modules: - name: zen_browser buildsystem: simple From 37b5ab916ce946504381916c5d6897c7064d07a2 Mon Sep 17 00:00:00 2001 From: Slowlife01 Date: Thu, 20 Mar 2025 08:47:07 +0700 Subject: [PATCH 2/4] fix(MediaController): restore scrollbar when updating ui & don't update time from other tab --- .../zen-components/ZenMediaController.mjs | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/browser/base/zen-components/ZenMediaController.mjs b/src/browser/base/zen-components/ZenMediaController.mjs index 6aded7022..e6c7e9542 100644 --- a/src/browser/base/zen-components/ZenMediaController.mjs +++ b/src/browser/base/zen-components/ZenMediaController.mjs @@ -138,6 +138,7 @@ class ZenMediaController { .then(() => { this.mediaControlBar.setAttribute('hidden', 'true'); gZenUIManager.updateTabsToolbar(); + gZenUIManager.restoreScrollbarState(); }); } @@ -157,6 +158,7 @@ class ZenMediaController { this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px'; this.mediaControlBar.style.opacity = 0; gZenUIManager.updateTabsToolbar(); + gZenUIManager.restoreScrollbarState(); gZenUIManager.motion.animate( this.mediaControlBar, { @@ -210,6 +212,7 @@ class ZenMediaController { this.mediaArtist.textContent = metadata.artist || ''; gZenUIManager.updateTabsToolbar(); + gZenUIManager.restoreScrollbarState(); this._currentPosition = positionState.position; this._currentDuration = positionState.duration; @@ -277,15 +280,15 @@ class ZenMediaController { } _onPositionstateChange(event) { - if (event.target.id !== this._currentMediaController?.id) { - const mediaController = this.mediaControllersMap.get(event.target.id); - this.mediaControllersMap.set(event.target.id, { - ...mediaController, - position: event.position, - duration: event.duration, - lastUpdated: Date.now(), - }); - } + const mediaController = this.mediaControllersMap.get(event.target.id); + this.mediaControllersMap.set(event.target.id, { + ...mediaController, + position: event.position, + duration: event.duration, + lastUpdated: Date.now(), + }); + + if (event.target.id !== this._currentMediaController?.id) return; this._currentPosition = event.position; this._currentDuration = event.duration; From 38770d9393b9c4c80e508c2f3dc8e99988990076 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Thu, 20 Mar 2025 13:34:10 +0100 Subject: [PATCH 3/4] refactor(styles): update CSS variables and layout for improved theming and spacing --- .../base/content/zen-styles/zen-browser-ui.css | 2 +- .../content/zen-styles/zen-tabs/vertical-tabs.css | 4 ++-- src/browser/base/content/zen-styles/zen-theme.css | 2 +- .../base/content/zen-styles/zen-workspaces.css | 11 +++++------ .../base/zen-components/ZenGradientGenerator.mjs | 7 +++++-- src/browser/base/zen-components/ZenTabUnloader.mjs | 13 ++++++++----- src/browser/base/zen-components/ZenViewSplitter.mjs | 2 +- 7 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index 2235c3881..ada3d5667 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -109,7 +109,7 @@ } #zen-main-app-wrapper { - background: transparent; + background: var(--zen-themed-toolbar-bg-transparent); overflow: hidden; & > * { diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index 5b0110255..a5fcf745e 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -1050,14 +1050,14 @@ #zen-essentials-container { padding-bottom: var(--zen-toolbox-padding); overflow: hidden; - gap: 3px; + gap: calc(var(--zen-toolbox-padding) - 2px); } #zen-essentials-container { overflow: hidden; transition: max-height 0.3s ease-out; opacity: 1; - grid-template-columns: repeat(auto-fit, minmax(48px, auto)); + grid-template-columns: repeat(auto-fit, minmax(49px, auto)); overflow: hidden; scrollbar-width: thin; display: grid; diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index 3ec3f6061..ac751160f 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -158,7 +158,7 @@ --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #171717); --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717); - --zen-workspace-indicator-height: 45px; + --zen-workspace-indicator-height: 48px; @media (-moz-windows-mica) or (-moz-platform: macos) { background: transparent; diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index daf77b3c2..dc3ff6c85 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -425,7 +425,7 @@ } .zen-current-workspace-indicator { - padding: 15px calc(4px + var(--tab-inline-padding)); + padding: calc(15px + var(--zen-toolbox-padding)) calc(4px + var(--tab-inline-padding)); font-weight: 600; position: absolute; max-height: var(--zen-workspace-indicator-height); @@ -443,11 +443,10 @@ pointer-events: none; content: ''; position: absolute; - top: 4px; - left: 2px; - z-index: -1; - width: calc(100% - 4px); - height: calc(100% - 10px); + top: var(--zen-toolbox-padding); + left: calc(var(--zen-toolbox-padding) / 2); + width: calc(100% - var(--zen-toolbox-padding)); + height: calc(100% - var(--zen-toolbox-padding) * 2); } &:hover, diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs index fc18114e5..1dd3a8e7e 100644 --- a/src/browser/base/zen-components/ZenGradientGenerator.mjs +++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs @@ -870,8 +870,11 @@ if (color.isCustom) { return color.c; } - const toolbarBg = forToolbar ? this.getToolbarModifiedBase() : 'var(--zen-themed-toolbar-bg-transparent)'; - return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`; + if (forToolbar) { + const toolbarBg = this.getToolbarModifiedBase(); + return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`; + } + return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${this.currentOpacity})`; } getGradient(colors, forToolbar = false) { diff --git a/src/browser/base/zen-components/ZenTabUnloader.mjs b/src/browser/base/zen-components/ZenTabUnloader.mjs index 5ea8f46fe..a3479e412 100644 --- a/src/browser/base/zen-components/ZenTabUnloader.mjs +++ b/src/browser/base/zen-components/ZenTabUnloader.mjs @@ -271,9 +271,6 @@ tab.attention || tab.hasAttribute('glance-id') || tab.linkedBrowser?.zenModeActive || - (typeof extraArgs.permitUnload === 'undefined' - ? !tab.linkedBrowser?.permitUnload()?.permitUnload - : !extraArgs.permitUnload) || (tab.pictureinpicture && !ignoreTimestamp) || (tab.soundPlaying && !ignoreTimestamp) || (tab.zenIgnoreUnload && !ignoreTimestamp) || @@ -283,7 +280,7 @@ return false; } if (ignoreTimestamp) { - return true; + return this._tabPermitsUnload(tab, extraArgs); } const lastActivity = tab.lastActivity; if (!lastActivity) { @@ -291,7 +288,13 @@ } const diff = currentTimestamp - lastActivity; // Check if the tab has been inactive for more than the timeout - return diff > lazy.zenTabUnloaderTimeout * 60 * 1000; + return diff > lazy.zenTabUnloaderTimeout * 60 * 1000 && this._tabPermitsUnload(tab, extraArgs); + } + + _tabPermitsUnload(tab, extraArgs) { + return typeof extraArgs.permitUnload === 'undefined' + ? !tab.linkedBrowser?.permitUnload()?.permitUnload + : !extraArgs.permitUnload; } } diff --git a/src/browser/base/zen-components/ZenViewSplitter.mjs b/src/browser/base/zen-components/ZenViewSplitter.mjs index f9a0734fd..b50a6f4f0 100644 --- a/src/browser/base/zen-components/ZenViewSplitter.mjs +++ b/src/browser/base/zen-components/ZenViewSplitter.mjs @@ -230,7 +230,6 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { const halfWidth = panelsWidth / 2; const side = event.clientX > halfWidth ? 'right' : 'left'; this.fakeBrowser = document.createXULElement('vbox'); - this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit); window.addEventListener('dragend', this.onBrowserDragEndToSplit, { once: true }); const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0); this.fakeBrowser.setAttribute('flex', '1'); @@ -277,6 +276,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { ]); if (this._finishAllAnimatingPromise) { this._finishAllAnimatingPromise.then(() => { + this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit); this._canDrop = true; draggedTab._visuallySelected = true; }); From 34c78dff5209bda6d9e8baae188aa88e5703cdec Mon Sep 17 00:00:00 2001 From: Slowlife01 Date: Thu, 20 Mar 2025 22:09:43 +0700 Subject: [PATCH 4/4] add config to disable media controls --- src/browser/app/profile/zen-browser.js | 2 ++ src/browser/base/zen-components/ZenMediaController.mjs | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 84fe71202..2e2cb0f4d 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -90,6 +90,8 @@ pref('zen.tabs.show-newtab-vertical', true); pref('zen.view.show-newtab-button-border-top', false); pref('zen.view.show-newtab-button-top', true); +perf('zen.mediacontrols.enabled', true); + #ifdef MOZILLA_OFFICIAL pref('zen.rice.api.url', 'https://share.zen-browser.app', locked); pref('zen.injections.match-urls', 'https://zen-browser.app/*,https://share.zen-browser.app/*', locked); diff --git a/src/browser/base/zen-components/ZenMediaController.mjs b/src/browser/base/zen-components/ZenMediaController.mjs index e6c7e9542..a07530a53 100644 --- a/src/browser/base/zen-components/ZenMediaController.mjs +++ b/src/browser/base/zen-components/ZenMediaController.mjs @@ -21,6 +21,8 @@ class ZenMediaController { _controllerSwitchTimeout = null; init() { + if (!Services.prefs.getBoolPref('zen.mediacontrols.enabled', true)) return; + this.mediaTitle = document.querySelector('#zen-media-title'); this.mediaArtist = document.querySelector('#zen-media-artist'); this.mediaControlBar = document.querySelector('#zen-media-controls-toolbar');