Merge branch 'dev' into pip

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

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

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;
 
   & > * {

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;

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;

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,

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) {

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');
@@ -138,6 +140,7 @@ class ZenMediaController {
       .then(() => {
         this.mediaControlBar.setAttribute('hidden', 'true');
         gZenUIManager.updateTabsToolbar();
+        gZenUIManager.restoreScrollbarState();
       });
   }
 
@@ -157,6 +160,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 +214,7 @@ class ZenMediaController {
     this.mediaArtist.textContent = metadata.artist || '';
 
     gZenUIManager.updateTabsToolbar();
+    gZenUIManager.restoreScrollbarState();
 
     this._currentPosition = positionState.position;
     this._currentDuration = positionState.duration;
@@ -277,15 +282,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;

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

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