Merge branch 'dev' of https://github.com/zen-browser/desktop into dev

MediaController: account for playbackRate

.github/workflows/build.yml

@@ -517,6 +517,8 @@ jobs:
           repository: ./updates-server
 
       - name: Generate Release Notes
+        env:
+          RELEASE_BRANCH: ${{ inputs.update_branch }}
         run: bash .github/workflows/src/generate_release_notes.sh
 
         # If we are on Twilight, we want to just update the Twilight tag's release

README.md

@@ -28,7 +28,7 @@
 
 ## 🖥️ Compatibility
 
-Zen is currently built using Firefox version `136.0.1`! 🚀
+Zen is currently built using Firefox version `136.0.2`! 🚀
 
 - [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 136.0`!
 - Check out the latest [release notes](https://zen-browser.app/release-notes)!

firefox-cache/l10n-last-commit-hash

@@ -1 +1 @@
-6ad0ab3c43a6208d8bcd997b40e802fccd48ba0a
+6013afe489c3d5e19c5f0d0f6c3f94b91f5bd7d1

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

scripts/update_ff.py

@@ -64,6 +64,12 @@ def update_l10n_last_commit_hash():
     if not os.path.exists("firefox-cache"):
       os.mkdir("firefox-cache")
     os.system("cat l10n-temp/.git/refs/heads/main > firefox-cache/l10n-last-commit-hash")
+    # Remove new line character
+    data = ""
+    with open("firefox-cache/l10n-last-commit-hash", "r") as f:
+      data = f.read()
+    with open("firefox-cache/l10n-last-commit-hash", "w") as f:
+      f.write(data.strip())
   except KeyboardInterrupt:
     print("Exiting...")
   shutil.rmtree("l10n-temp")

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);
@@ -199,7 +201,6 @@ pref('zen.startup.smooth-scroll-in-tabs', true);
 
 // Zen Workspaces
 pref('zen.workspaces.disabled_for_testing', false);
-pref('zen.workspaces.hide-deactivated-workspaces', false);
 pref('zen.workspaces.hide-default-container-indicator', true);
 pref('zen.workspaces.force-container-workspace', false);
 pref('zen.workspaces.open-new-tab-if-last-unpinned-tab-is-closed', false);

src/browser/base/content/ZenUIManager.mjs

@@ -250,7 +250,7 @@ var gZenUIManager = {
     const toast = this._createToastElement(messageId, options);
     this._toastContainer.removeAttribute('hidden');
     this._toastContainer.appendChild(toast);
-    await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.5 });
+    await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.7 });
     await new Promise((resolve) => setTimeout(resolve, 3000));
     await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
     const toastHeight = toast.getBoundingClientRect().height;
@@ -265,14 +265,6 @@ var gZenUIManager = {
   get panelUIPosition() {
     return gZenVerticalTabsManager._hasSetSingleToolbar ? 'bottomleft topleft' : 'bottomright topright';
   },
-
-  openSettingsWindow() {
-    window.openDialog(
-      'chrome://browser/content/zen-components/windows/zen-settings.xhtml',
-      '_blank',
-      'centerscreen,chrome,dialog=no,resizable=no,titlebar'
-    );
-  },
 };
 
 var gZenVerticalTabsManager = {

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

@@ -52,8 +52,6 @@
         content/browser/zen-styles/zen-welcome.css              (content/zen-styles/zen-welcome.css)
         content/browser/zen-styles/zen-media-controls.css       (content/zen-styles/zen-media-controls.css)
 
-        content/browser/zen-styles/windows/zen-settings.css     (content/zen-styles/windows/zen-settings.css)
-
         content/browser/zen-styles/zen-panels/bookmarks.css     (content/zen-styles/zen-panels/bookmarks.css)
         content/browser/zen-styles/zen-panels/extensions.css    (content/zen-styles/zen-panels/extensions.css)
         content/browser/zen-styles/zen-panels/print.css         (content/zen-styles/zen-panels/print.css)
@@ -83,6 +81,3 @@
         # JS Vendor
         content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (content/zen-vendor/tsparticles.confetti.bundle.min.js)
         content/browser/zen-vendor/motion.min.mjs                      (content/zen-vendor/motion.min.mjs)
-
-        # Windows
-        content/browser/zen-components/windows/zen-settings.xhtml (zen-components/windows/zen-settings.xhtml)

src/browser/base/content/zen-styles/windows/zen-settings.css

@@ -1,49 +0,0 @@
-@namespace html 'http://www.w3.org/1999/xhtml';
-@namespace xul 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
-
-* {
-  margin: 0;
-  box-sizing: border-box;
-}
-
-:root {
-  font: message-box;
-}
-
-body {
-  width: 100%;
-}
-
-#main-content {
-  background: var(--zen-themed-toolbar-bg-transparent);
-  @supports (-moz-osx-font-smoothing: auto) {
-    appearance: -moz-window-titlebar;
-  }
-
-  user-select: none;
-  touch-action: none;
-  pointer-events: auto;
-
-  width: 100%;
-  height: 100%;
-
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  gap: 2rem;
-  padding: 1rem;
-}
-
-.section {
-  width: 100%;
-  position: relative;
-  gap: 0.6rem;
-
-  .section-content {
-    width: 100%;
-    background: var(--zen-toolbar-element-bg);
-    border-radius: 6px;
-    padding: 1em;
-    font-size: 1.1em;
-  }
-}

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-gradient-generator.css

@@ -5,7 +5,7 @@
  */
 
 #PanelUI-zen-gradient-generator {
-  --panel-width: 300px;
+  --panel-width: 320px;
   --panel-padding: 10px;
   min-width: var(--panel-width);
 }

src/browser/base/content/zen-styles/zen-media-controls.css

@@ -163,6 +163,7 @@
     font-size: x-small;
     opacity: 0.7;
     font-weight: 500;
+    font-variant-numeric: tabular-nums;
   }
 }
 

src/browser/base/content/zen-styles/zen-popup.css

@@ -360,9 +360,14 @@ menuitem {
   & .zen-toast {
     padding: 0.9rem 0.8rem;
     border-radius: 12px;
-    background: linear-gradient(170deg, light-dark(rgb(187, 187, 187), rgb(240, 240, 240)) -40%, var(--zen-primary-color) 140%);
+    background: linear-gradient(
+      170deg,
+      var(--zen-primary-color) -40%,
+      color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
+    );
     color: var(--button-primary-color);
-    box-shadow: 0 0 16px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     display: flex;
     font-weight: 500;
     gap: 5px;

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -111,7 +111,7 @@
   background: transparent;
   border: none;
   cursor: ew-resize;
-  z-index: 2;
+  z-index: 3;
 
   &:is(.zen-split-view-splitter[orient='vertical']) {
     /* Bit of a hacky solution, but it works */

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -269,7 +269,7 @@
     }
 
     #tabbrowser-tabs:not([movingtab]) & .tab-content > image:active {
-      scale: var(--zen-active-tab-scale);
+      scale: 0.92;
     }
 
     & .tab-icon-image {
@@ -474,9 +474,6 @@
   }
 
   & #zen-workspaces-button {
-    margin-left: 2px;
-    margin-right: 2px;
-
     & .zen-workspace-sidebar-icon[no-icon='true'] {
       display: none;
     }
@@ -1050,14 +1047,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,13 +158,13 @@
   --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;
     --zen-themed-toolbar-bg-transparent: transparent;
     @media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
-      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 75%, transparent 25%);
+      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 35%, transparent 65%);
     }
   }
 

src/browser/base/content/zen-styles/zen-workspaces.css

@@ -20,13 +20,15 @@
   --toolbarbutton-hover-background: transparent !important;
   border-radius: var(--zen-button-border-radius) !important;
   background: transparent;
-  padding: 2px;
   appearance: unset !important;
   height: fit-content;
   gap: 3px;
 
+  container-type: inline-size;
+  width: 100%;
+
   & toolbarbutton {
-    margin: auto;
+    margin: 0;
     width: 25px;
     display: flex;
     justify-content: center;
@@ -34,8 +36,43 @@
     align-items: center;
     position: relative;
 
-    @media (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
-      &:not([active='true']):not(:hover) {
+    & .zen-workspace-icon[no-icon='true'] {
+      width: 6px;
+      height: 6px;
+      background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
+      border-radius: 50%;
+    }
+
+    filter: grayscale(1);
+    opacity: 0.5;
+    transition:
+      filter 0.2s,
+      opacity 0.2s,
+      width 0.1s;
+
+    &[active='true'],
+    &:hover {
+      filter: grayscale(0);
+      opacity: 1;
+    }
+
+    &:hover {
+      background-color: var(--zen-toolbar-element-bg);
+    }
+  }
+
+  &[overflow] {
+    gap: 0 !important;
+
+    & toolbarbutton {
+      margin: 0;
+    }
+
+    & toolbarbutton:not([active='true']),
+    &:has(toolbarbutton:hover) toolbarbutton[active='true'] {
+      &:not(:hover) {
+        width: min(var(--zen-overflowed-workspace-button-width), 25px);
+
         &::after {
           content: '';
           position: absolute;
@@ -58,33 +95,6 @@
         }
       }
     }
-
-    & .zen-workspace-icon[no-icon='true'] {
-      width: 6px;
-      height: 6px;
-      background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
-      border-radius: 50%;
-    }
-
-    @media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
-      & {
-        filter: grayscale(1);
-        opacity: 0.5;
-        transition:
-          filter 0.2s,
-          opacity 0.2s;
-      }
-
-      &[active='true'],
-      &:hover {
-        filter: grayscale(0);
-        opacity: 1;
-      }
-
-      &:hover {
-        background-color: var(--zen-toolbar-element-bg);
-      }
-    }
   }
 }
 
@@ -118,8 +128,6 @@
 
   & #zen-workspaces-button {
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     display: flex;
     gap: 0.5ch;
   }
@@ -425,7 +433,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 +451,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

@@ -500,9 +500,8 @@
       const centerPosition = { x: rect.width / 2, y: rect.height / 2 };
 
       const harmonyAngles = getColorHarmonyType(dots.length + (action === 'add' ? 1 : action === 'remove' ? -1 : 0), this.dots);
-      if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots;
-
       this.useAlgo = harmonyAngles.type;
+      if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots;
 
       let primaryDot = dots.find((dot) => dot.ID === 0);
       if (!primaryDot) return [];
@@ -638,7 +637,7 @@
           }
         });
 
-        let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
+        let colorPositions = this.calculateCompliments(this.dots, 'remove');
         this.handleColorPositions(colorPositions);
         this.updateCurrentWorkspace();
         return;
@@ -780,7 +779,7 @@
           }
         });
 
-        let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
+        let colorPositions = this.calculateCompliments(this.dots, 'remove');
         this.handleColorPositions(colorPositions);
 
         this.updateCurrentWorkspace();
@@ -870,8 +869,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');
@@ -58,16 +60,8 @@ class ZenMediaController {
       }
     });
 
-    window.addEventListener('TabClose', (event) => {
-      const linkedBrowser = event.target.linkedBrowser;
-      if (!linkedBrowser?.browsingContext?.mediaController) return;
-      this.deinitMediaController(
-        linkedBrowser.browsingContext.mediaController,
-        true,
-        linkedBrowser.browserId === this._currentBrowser?.browserId,
-        true
-      );
-    });
+    const onTabDiscardedOrClosed = this.onTabDiscardedOrClosed.bind(this);
+    window.addEventListener('TabClose', onTabDiscardedOrClosed);
 
     window.addEventListener('DOMAudioPlaybackStarted', (event) => {
       setTimeout(() => {
@@ -89,6 +83,17 @@ class ZenMediaController {
     window.addEventListener('DOMAudioPlaybackStopped', () => this.updateMuteState());
   }
 
+  onTabDiscardedOrClosed(event) {
+    const linkedBrowser = event.target.linkedBrowser;
+    if (!linkedBrowser?.browsingContext?.mediaController) return;
+    this.deinitMediaController(
+      linkedBrowser.browsingContext.mediaController,
+      true,
+      linkedBrowser.browserId === this._currentBrowser?.browserId,
+      true
+    );
+  }
+
   async deinitMediaController(mediaController, shouldForget = true, shouldOverride = true, shouldHide = true) {
     if (!mediaController) return;
 
@@ -138,6 +143,7 @@ class ZenMediaController {
       .then(() => {
         this.mediaControlBar.setAttribute('hidden', 'true');
         gZenUIManager.updateTabsToolbar();
+        gZenUIManager.restoreScrollbarState();
       });
   }
 
@@ -157,6 +163,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,9 +217,12 @@ class ZenMediaController {
     this.mediaArtist.textContent = metadata.artist || '';
 
     gZenUIManager.updateTabsToolbar();
+    gZenUIManager.restoreScrollbarState();
 
     this._currentPosition = positionState.position;
     this._currentDuration = positionState.duration;
+    this._currentPlaybackRate = positionState.playbackRate;
+
     this.updateMediaPosition();
 
     for (const key of this.supportedKeys) {
@@ -277,18 +287,20 @@ 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;
+    this._currentPlaybackRate = event.playbackRate;
+
     this.updateMediaPosition();
   }
 
@@ -349,7 +361,7 @@ class ZenMediaController {
 
     this._mediaUpdateInterval = setInterval(() => {
       if (this._currentMediaController?.isPlaying) {
-        this._currentPosition += 1;
+        this._currentPosition += 1 * this._currentPlaybackRate;
         if (this._currentPosition > this._currentDuration) {
           this._currentPosition = this._currentDuration;
         }
@@ -428,7 +440,10 @@ class ZenMediaController {
   }
 
   onMediaFocus() {
-    this._currentMediaController?.focus();
+    if (!this._currentBrowser) return;
+    const sidebarId = this._currentBrowser.getAttribute('zen-sidebar-id');
+    if (sidebarId) gZenBrowserManagerSidebar.open(sidebarId);
+    else this._currentMediaController?.focus();
   }
 
   onMediaMute() {

src/browser/base/zen-components/ZenPinnedTabManager.mjs

@@ -510,6 +510,10 @@
         case 'unload-switch':
         case 'reset-switch':
         case 'switch':
+          let { permitUnload } = selectedTab.linkedBrowser?.permitUnload();
+          if (!permitUnload) {
+            return;
+          }
           this._handleTabSwitch(selectedTab);
           if (behavior.includes('reset')) {
             this._resetTabToStoredState(selectedTab);
@@ -520,8 +524,7 @@
             }
             // Do not unload about:* pages
             if (!selectedTab.linkedBrowser?.currentURI.spec.startsWith('about:')) {
-              gBrowser.explicitUnloadTabs([selectedTab]);
-              selectedTab.removeAttribute('linkedpanel');
+              gZenTabUnloader.explicitUnloadTabs([selectedTab], { permitUnload });
             }
           }
           break;
@@ -831,7 +834,7 @@
     removeTabContainersDragoverClass() {
       this.dragIndicator.remove();
       this._dragIndicator = null;
-      ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
+      ZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
     }
 
     get dragIndicator() {
@@ -891,9 +894,9 @@
       targetTab = targetTab?.group || targetTab;
       if (event.target.closest('.zen-current-workspace-indicator')) {
         this.removeTabContainersDragoverClass();
-        ZenWorkspaces.activeWorkspaceIndicator.setAttribute('open', true);
+        ZenWorkspaces.activeWorkspaceIndicator?.setAttribute('open', true);
       } else {
-        ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
+        ZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
       }
 
       // If there's no valid target tab, nothing to do

src/browser/base/zen-components/ZenSidebarManager.mjs

@@ -280,8 +280,10 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
     this.close();
   }
 
-  open() {
+  open(id = null) {
     let sidebar = document.getElementById('zen-sidebar-web-panel');
+    if (id) this._currentPanel = id;
+
     sidebar.removeAttribute('hidden');
     this.update();
   }

src/browser/base/zen-components/ZenTabUnloader.mjs

@@ -22,8 +22,6 @@
       'TabAttrModified',
       'TabPinned',
       'TabUnpinned',
-      'TabBrowserInserted',
-      'TabBrowserDiscarded',
       'TabShow',
       'TabHide',
       'TabOpen',
@@ -150,8 +148,6 @@
       switch (action) {
         case 'TabPinned':
         case 'TabUnpinned':
-        case 'TabBrowserInserted':
-        case 'TabBrowserDiscarded':
         case 'TabShow':
         case 'TabHide':
           break;
@@ -235,9 +231,9 @@
       this.explicitUnloadTabs(tabs);
     }
 
-    explicitUnloadTabs(tabs) {
+    explicitUnloadTabs(tabs, extraArgs = {}) {
       for (let i = 0; i < tabs.length; i++) {
-        if (this.canUnloadTab(tabs[i], Date.now(), this.intervalUnloader.excludedUrls, true)) {
+        if (this.canUnloadTab(tabs[i], Date.now(), this.intervalUnloader.excludedUrls, true, extraArgs)) {
           this.unload(tabs[i]);
         }
       }
@@ -259,15 +255,15 @@
       }
     }
 
-    canUnloadTab(tab, currentTimestamp, excludedUrls, ignoreTimestamp = false) {
+    canUnloadTab(tab, currentTimestamp, excludedUrls, ignoreTimestamp = false, extraArgs = {}) {
       if (
         (tab.pinned && !ignoreTimestamp) ||
         tab.selected ||
         (tab.multiselected && !ignoreTimestamp) ||
         (tab.hasAttribute('busy') && !ignoreTimestamp) ||
-        tab.hasAttribute('pending') ||
         !tab.linkedPanel ||
         tab.splitView ||
+        tab.group?.hasAttribute('split-view-group') ||
         tab.attention ||
         tab.hasAttribute('glance-id') ||
         tab.linkedBrowser?.zenModeActive ||
@@ -280,7 +276,7 @@
         return false;
       }
       if (ignoreTimestamp) {
-        return true;
+        return this._tabPermitsUnload(tab, extraArgs);
       }
       const lastActivity = tab.lastActivity;
       if (!lastActivity) {
@@ -288,7 +284,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;
         });

src/browser/base/zen-components/ZenWelcome.mjs

@@ -52,13 +52,6 @@
     }
   }
 
-  function openWelcomeTab() {
-    const tab = window.gBrowser.addTrustedTab('https://zen-browser.app/welcome', {
-      inBackground: true,
-    });
-    gBrowser.selectedTab = tab;
-  }
-
   class ZenWelcomePages {
     constructor(pages) {
       this._currentPage = -1;
@@ -410,7 +403,6 @@
             _tabsToPinEssentials.push(createdTab);
           }
           openInitialPinTab();
-          openWelcomeTab();
         },
       },
       {

src/browser/base/zen-components/ZenWorkspaces.mjs

@@ -77,6 +77,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
     ChromeUtils.defineLazyGetter(this, 'tabContainer', () => document.getElementById('tabbrowser-tabs'));
     this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', '');
+
+    window.addEventListener('resize', this.onWindowResize.bind(this));
   }
 
   async afterLoadInit() {
@@ -599,6 +601,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       } catch (e) {
         console.error('ZenWorkspaces: Error initializing theme picker', e);
       }
+      this.onWindowResize();
       await this._selectStartPage();
       this._fixTabPositions();
       this._resolveInitialized();
@@ -870,6 +873,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     await ZenWorkspacesStorage.removeWorkspace(windowID);
     await this._propagateWorkspaceData();
     await this._updateWorkspacesChangeContextMenu();
+    this.onWindowResize();
   }
 
   isWorkspaceActive(workspace) {
@@ -1928,6 +1932,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       }
       await this.changeWorkspace(workspaceData);
     }
+    this.onWindowResize();
     return workspaceData;
   }
 
@@ -2368,4 +2373,26 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     const workspace = workspaces.workspaces.find((workspace) => workspace.uuid === activeWorkspace);
     return workspace.containerTabId;
   }
+
+  onWindowResize(event = undefined) {
+    if (!(!event || event.target === window)) return;
+    // Check if workspace icons overflow the parent container
+    const parent = document.getElementById('zen-workspaces-button');
+    if (!parent || this._processingResize) {
+      return;
+    }
+    this._processingResize = true;
+    // Once we are overflowing, we align the buttons to always stay inside the container,
+    // meaning we need to remove the overflow attribute to reset the width
+    parent.removeAttribute('overflow');
+    requestAnimationFrame(() => {
+      const overflow = parent.scrollWidth > parent.clientWidth;
+      parent.toggleAttribute('overflow', overflow);
+      // The maximum width a button has when it overflows based on the number of buttons
+      const numButtons = parent.children.length + 1; // +1 to exclude the active button
+      const maxWidth = 100 / numButtons;
+      parent.style.setProperty('--zen-overflowed-workspace-button-width', `${maxWidth}%`);
+      this._processingResize = false;
+    });
+  }
 })();

src/browser/base/zen-components/windows/zen-settings.xhtml

@@ -1,45 +0,0 @@
-<?xml version="1.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/. -->
-
-<html xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-      xmlns:html="http://www.w3.org/1999/xhtml"
-      id="zenSettingsWindow"
-      style="min-width: 35em; max-width: 35em; min-height: 40em;">
-  <head>
-    <linkset>
-      <html:link
-        rel="stylesheet"
-        href="chrome://browser/content/zen-styles/zen-theme.css"
-      />
-      <html:link
-        rel="stylesheet"
-        href="chrome://browser/content/zen-styles/windows/zen-settings.css"
-      />
-
-      <html:link rel="localization" href="browser/preferences/preferences.ftl" />
-      <html:link rel="localization" href="browser/preferences/zen-preferences.ftl" />
-    </linkset>
-
-    <script src="chrome://browser/content/zenThemeModifier.js"></script>
-  </head>
-
-  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-    <vbox id="main-content">
-      <vbox class="section">
-        <html:h2 data-l10n-id="pane-general-title"/>
-        <div class="section-content">
-          test
-        </div>
-      </vbox>
-      <vbox class="section">
-        <html:h2 data-l10n-id="pane-general-title"/>
-        <div class="section-content">
-          test
-        </div>
-      </vbox>
-    </vbox>
-  </html:body>
-</html>

src/browser/components/preferences/zen-settings.js

@@ -959,11 +959,6 @@ Preferences.addAll([
     type: 'int',
     default: 10,
   },
-  {
-    id: 'zen.workspaces.hide-deactivated-workspaces',
-    type: 'bool',
-    default: true,
-  },
   {
     id: 'zen.pinned-tab-manager.restore-pinned-tabs-to-pinned-url',
     type: 'bool',

src/browser/components/preferences/zenTabsManagement.inc.xhtml

@@ -23,9 +23,6 @@
       <checkbox id="zenWorkspacesForceContainerTabsToWorkspace"
             data-l10n-id="zen-settings-workspaces-force-container-tabs-to-workspace"
             preference="zen.workspaces.force-container-workspace"/>
-      <checkbox id="zenWorkspaceHideDeactivatedWorkspaces"
-            data-l10n-id="zen-settings-workspaces-hide-deactivated-workspaces"
-            preference="zen.workspaces.hide-deactivated-workspaces"/>
 </groupbox>
 
 <hbox id="zenTabsUnloadCategory"

src/browser/themes/windows/browser-css.patch

@@ -1,8 +1,15 @@
 diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
-index f49604e53780763b9aa19897458c45f0be6cbc9b..aa9da99641ba4a3b7f67a27acbbf6c75c1346ced 100644
+index f49604e53780763b9aa19897458c45f0be6cbc9b..5ea9098a9b689470ef4ddfea91069cd23391d020 100644
 --- a/browser/themes/windows/browser.css
 +++ b/browser/themes/windows/browser.css
-@@ -47,7 +47,7 @@
+@@ -40,14 +40,13 @@
+          * override these on the tabs toolbar because the accent color is
+          * arbitrary, so the hardcoded colors from browser-custom-colors might
+          * not provide sufficient contrast. */
+-        --toolbarbutton-icon-fill: currentColor;
+         --toolbarbutton-hover-background: color-mix(in srgb, currentColor 17%, transparent);
+         --toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent);
+       }
      }
  
      &[sizemode="normal"] #navigator-toolbox {

src/toolkit/components/pictureinpicture/content/player-js.patch

@@ -0,0 +1,16 @@
+diff --git a/toolkit/components/pictureinpicture/content/player.js b/toolkit/components/pictureinpicture/content/player.js
+index 9a4971d5d24dba6e543be8ea321c6be8c43ad859..b0788967e51736b1ec95daf96a1504bfd7c1dea7 100644
+--- a/toolkit/components/pictureinpicture/content/player.js
++++ b/toolkit/components/pictureinpicture/content/player.js
+@@ -722,6 +722,11 @@ let Player = {
+         document.getElementById("large").click();
+         break;
+       }
++
++      case "minimize": {
++        this.closePipWindow({ reason: "CloseButton" });
++        break;
++      }
+     }
+     // If the click came from a element that is not inside the subtitles settings panel
+     // then we want to hide the panel

src/toolkit/components/pictureinpicture/content/player-xhtml.patch

@@ -0,0 +1,29 @@
+diff --git a/toolkit/components/pictureinpicture/content/player.xhtml b/toolkit/components/pictureinpicture/content/player.xhtml
+index 440ce51e8e67e4d3a7bdcb78f38f2fb6684c9848..6b48a3178f9de460dd3b08728f5638ef2751de21 100644
+--- a/toolkit/components/pictureinpicture/content/player.xhtml
++++ b/toolkit/components/pictureinpicture/content/player.xhtml
+@@ -52,13 +52,22 @@
+       tabindex="10"
+ #endif
+       />
+-      <button id="unpip"
+-      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-unpip-btn" data-l10n-attrs="tooltip"
++      <button id="minimize"
++      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-minimize-btn" data-l10n-attrs="tooltip"
+ #ifdef XP_MACOSX
+       mac="true"
+       tabindex="10"
+ #else
+       tabindex="9"
++#endif
++      />
++      <button id="unpip"
++      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-unpip-btn" data-l10n-attrs="tooltip"
++#ifdef XP_MACOSX
++      mac="true"
++      tabindex="11"
++#else
++      tabindex="10"
+ #endif
+       />
+     <div id="controls-bottom-gradient" class="control-item"></div>

src/toolkit/themes/shared/pictureinpicture/player-css.patch

@@ -0,0 +1,22 @@
+diff --git a/toolkit/themes/shared/pictureinpicture/player.css b/toolkit/themes/shared/pictureinpicture/player.css
+index a3ffe31d47cc81a0cb578acc9177aaa6f41668eb..cf69507804b7c50f9afcfabb744098cfbe409396 100644
+--- a/toolkit/themes/shared/pictureinpicture/player.css
++++ b/toolkit/themes/shared/pictureinpicture/player.css
+@@ -724,3 +724,17 @@ input:checked + .slider::before {
+     justify-self: center;
+   }
+ }
++
++#minimize {
++  background-image: url("chrome://browser/skin/zen-icons/unpin.svg");
++  background-color: rgba(255, 255, 255, .8);
++  position: absolute;
++  fill: var(--close-btn-fill-color);
++  right: 50px;
++  top: 10px;
++}
++
++#minimize[mac="true"] {
++  right: auto;
++  left: 50px;
++}

surfer.json

@@ -5,8 +5,8 @@
   "binaryName": "zen",
   "version": {
     "product": "firefox",
-    "version": "136.0.1",
-    "candidate": "136.0.1"
+    "version": "136.0.2",
+    "candidate": "136.0.2"
   },
   "buildOptions": {
     "generateBranding": true
@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.10b",
+        "displayVersion": "1.10.1b",
         "github": {
           "repo": "zen-browser/desktop"
         },
@@ -39,7 +39,7 @@
       "brandShortName": "Twilight",
       "brandFullName": "Zen Twilight",
       "release": {
-        "displayVersion": "1.10t",
+        "displayVersion": "1.10.1t",
         "github": {
           "repo": "zen-browser/desktop"
         }