Merge branch 'dev' into glance-buttons-overflow

.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

.github/workflows/macos-universal-release-build.yml

@@ -182,7 +182,7 @@ jobs:
         run: |
           cd engine
           # TODO: Change it to "production" once we figure out the issue with the webauth
-          ./mach macos-sign -v -r -c "release" -e "production-without-restricted" -a "./obj-x86_64-apple-darwin/dist/${{ env.APP_NAME }}.app" --rcodesign-p12-file zenCert.p12 --rcodesign-p12-password-file zenpCertPassword.passwd
+          ./mach macos-sign -v -r -c "release" -e "production" -a "./obj-x86_64-apple-darwin/dist/${{ env.APP_NAME }}.app" --rcodesign-p12-file zenCert.p12 --rcodesign-p12-password-file zenpCertPassword.passwd
 
       - name: Create DMG
         run: |

.github/workflows/src/generate_release_notes.sh

@@ -67,33 +67,38 @@ cat << EOF >> "release_notes.md"
 EOF
 
 generate_checksum() {
-  local file=$1
+  local pattern=$1
-  if [ -f "$file" ]; then
+  echo "Generating checksum for $pattern"
-    echo "Generating checksum for $file"
+  sha256sum $pattern 2> /dev/null | awk '{sub(".*/", "", $2); print $1 "  " $2}' >> "release_notes.md"
-    sha256sum "$file" | awk '{print $1 "  " $2}' >> "release_notes.md"
+  if [ ${PIPESTATUS[0]} -ne 0 ]; then
-  else
+    echo "Warning: No files found matching $pattern, skipping checksum."
-    echo "Warning: $file not found, skipping checksum"
   fi
 }
 
 files=(
-  "./zen.source.tar.zst"
+  "./zen.source.tar.zst/*"
-  "./zen.linux-x86_64.tar.xz"
+  "./zen.linux-x86_64.tar.xz/*"
-  "./zen.linux-aarch64.tar.xz"
+  "./zen.linux-aarch64.tar.xz/*"
-  "./zen-x86_64.AppImage"
+  "./zen-x86_64.AppImage/*"
-  "./zen-x86_64.AppImage.zsync"
+  "./zen-x86_64.AppImage.zsync/*"
-  "./zen-aarch64.AppImage"
+  "./zen-aarch64.AppImage/*"
-  "./zen-aarch64.AppImage.zsync"
+  "./zen-aarch64.AppImage.zsync/*"
   "./.github/workflows/object/windows-x64-signed-x86_64/zen.win-x86_64.zip"
+  "./zen.win-x86_64.zip/*"
   "./.github/workflows/object/windows-x64-signed-arm64/zen.win-arm64.zip"
-  "./linux.mar"
+  "./zen.win-arm64.zip/*"
-  "./linux-aarch64.mar"
+  "./linux.mar/*"
+  "./linux-aarch64.mar/*"
   "./.github/workflows/object/windows-x64-signed-x86_64/windows.mar"
+  "./windows.mar/*"
   "./.github/workflows/object/windows-x64-signed-arm64/windows-arm64.mar"
-  "./macos.mar"
+  "./windows-arm64.mar/*"
+  "./macos.mar/*"
   "./.github/workflows/object/windows-x64-signed-x86_64/zen.installer.exe"
+  "./zen.installer.exe/*"
   "./.github/workflows/object/windows-x64-signed-arm64/zen.installer-arm64.exe"
-  "./zen.macos-universal.dmg"
+  "./zen.installer-arm64.exe/*"
+  "./zen.macos-universal.dmg/*"
 )
 
 for file in "${files[@]}"; do

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)!
@@ -96,17 +96,22 @@ brew install --cask zen-browser
 yay -S zen-browser-bin
 ```
 
-##### Other Linux distributions (AppImage with automated system integration)
+##### Other Linux distributions (Tarball or AppImage)
 
-- `native` tarball install:
+- `Tarball` install:
-  `bash <(curl -s https://updates.zen-browser.app/install.sh)`
 
-- `zsync` is required for the Update feature of the script below
+```sh
+bash <(curl -s https://updates.zen-browser.app/install.sh)
+```
+
+- `AppImage` install:
 
 ```sh
 bash <(curl https://updates.zen-browser.app/appimage.sh)
 ```
 
+> AppImage install requires `zsync` for the Update feature
+
 - Again, if you don't see your OS listed above, that's because we already have it in our [downloads page](https://zen-browser.app/download)! 🔄
 
 To upgrade the browser to a newer version, use the embedded update functionality in `About Zen`.

configs/macos/mozconfig

@@ -7,7 +7,7 @@ export MOZ_MACBUNDLE_ID=${appId}
 export MOZ_MACBUNDLE_NAME="Zen Browser.app"
 
 # override LTO settings
-# TODO: Dont
+# TODO: Dont use LTO for now, it's causing a lot of issues
 export MOZ_LTO=cross,thin
 ac_add_options --enable-lto=cross,thin
 

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

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@zen-browser/surfer": "^1.10.4"
+        "@zen-browser/surfer": "^1.10.5"
       },
       "devDependencies": {
         "husky": "^9.1.7",
@@ -288,9 +288,9 @@
       "license": "MIT"
     },
     "node_modules/@zen-browser/surfer": {
-      "version": "1.10.4",
+      "version": "1.10.5",
-      "resolved": "https://registry.npmjs.org/@zen-browser/surfer/-/surfer-1.10.4.tgz",
+      "resolved": "https://registry.npmjs.org/@zen-browser/surfer/-/surfer-1.10.5.tgz",
-      "integrity": "sha512-xDXJYgbJTfNpM+LsJDJ81VCotwIBY3CItrD7Y1hPqf84Ino/sTqy/QuHQCVqZU3StewAvVuV68MWnaiY9ytlMA==",
+      "integrity": "sha512-jpGArye02C6M65qy0b5kZWzDBO5sh/BY6k2otC1keAjICm9lxELsh5ELRz0tVQ6kwrBUC3yE4uP8jzUgQdCuCg==",
       "dependencies": {
         "@resvg/resvg-js": "^1.4.0",
         "async-icns": "^1.0.2",

package.json

@@ -41,7 +41,7 @@
   },
   "homepage": "https://github.com/zen-browser/core#readme",
   "dependencies": {
-    "@zen-browser/surfer": "^1.10.4"
+    "@zen-browser/surfer": "^1.10.5"
   },
   "devDependencies": {
     "husky": "^9.1.7",

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,9 +201,7 @@ 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.show-icon-strip', true);
 pref('zen.workspaces.force-container-workspace', false);
 pref('zen.workspaces.open-new-tab-if-last-unpinned-tab-is-closed', false);
 pref('zen.workspaces.show-workspace-indicator', true);

src/browser/base/content/ZenCustomizableUI.sys.mjs

@@ -125,12 +125,5 @@ export var ZenCustomizableUI = new (class {
   registerToolbarNodes(window) {
     window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-top-buttons'));
     window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-bottom-buttons'));
-    window.addEventListener(
-      'DOMContentLoaded',
-      () => {
-        this._dispatchResizeEvent(window);
-      },
-      { once: true }
-    );
   }
 })();

src/browser/base/content/ZenStartup.mjs

@@ -58,6 +58,7 @@
 
     closeWatermark() {
       document.documentElement.removeAttribute('zen-before-loaded');
+      window.dispatchEvent(new window.Event('resize')); // To recalculate the layout
       if (Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
         gZenUIManager.motion
           .animate(

src/browser/base/content/ZenUIManager.mjs

@@ -65,6 +65,7 @@ var gZenUIManager = {
     tabs.style.removeProperty('flex');
     tabs.style.maxHeight = height + 'px';
     gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
+    gURLBar.updateLayoutBreakout();
   },
 
   get tabsWrapper() {
@@ -249,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;
@@ -260,6 +261,10 @@ var gZenUIManager = {
       this._toastContainer.setAttribute('hidden', 'true');
     }
   },
+
+  get panelUIPosition() {
+    return gZenVerticalTabsManager._hasSetSingleToolbar ? 'bottomleft topleft' : 'bottomright topright';
+  },
 };
 
 var gZenVerticalTabsManager = {
@@ -361,7 +366,7 @@ var gZenVerticalTabsManager = {
             marginBottom: isLastTab() ? [] : [transform, '0px'],
           },
           {
-            duration: 0.2,
+            duration: 0.12,
             easing: 'ease-out',
           }
         )
@@ -371,9 +376,16 @@ var gZenVerticalTabsManager = {
           aTab.style.removeProperty('opacity');
         });
       gZenUIManager.motion
-        .animate(aTab.querySelector('.tab-content'), {
+        .animate(
-          filter: ['blur(1px)', 'blur(0px)'],
+          aTab.querySelector('.tab-content'),
-        })
+          {
+            filter: ['blur(1px)', 'blur(0px)'],
+          },
+          {
+            duration: 0.12,
+            easing: 'ease-out',
+          }
+        )
         .then(() => {
           aTab.querySelector('.tab-stack').style.removeProperty('filter');
         });

src/browser/base/content/browser-box-inc-xhtml.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index 7f71abe7d80e4c09dd088517ec9ef106c7cb8654..7e764f08346a048fd352d7f7c06ea434f9b19903 100644
+index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..2fd19f3b43db4bdd99e65fecd1481f80d4541a7a 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -22,7 +22,14 @@
+@@ -23,7 +23,14 @@
      <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
    </vbox>
    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>

src/browser/base/content/zen-images/note-indicator.svg

@@ -1,13 +1,13 @@
 <svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
   <rect width="100%" height="100%" fill="none"/>
-  
+
     <style type="text/css"><![CDATA[
     .note {
-      fill: white;
+      fill: currentColor;
       transform-box: fill-box;
       transform-origin: center;
     }
-    
+
     @keyframes flyUpLeft {
       from {
         opacity: 1;
@@ -41,7 +41,7 @@
     }*/
   ]]></style>
 
-  
+
   <g class="note-group">
     <g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 0s;">
       <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
@@ -51,7 +51,7 @@
         c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
         C475.403,321.974,514.2,236.599,448.231,166.755z"/>
     </g>
-    
+
     <g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 0.5s;">
       <path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
         c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
@@ -60,7 +60,7 @@
         c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
         H512V90.785V2.152L133.703,45.86z"/>
     </g>
-    
+
     <g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 1s;">
       <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
         c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
@@ -78,7 +78,7 @@
         c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
         H512V90.785V2.152L133.703,45.86z"/>
     </g>
-    
+
     <g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 2s;">
       <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
         c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
@@ -87,7 +87,7 @@
         c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
         C475.403,321.974,514.2,236.599,448.231,166.755z"/>
     </g>
-    
+
     <g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 2.5s;">
       <path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
         c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292

src/browser/base/content/zen-media-player.inc.xhtml

@@ -5,30 +5,30 @@
   hidden="true">
   <toolbaritem>
     <vbox id="zen-media-main-vbox">
-      <hbox id="zen-media-service-hbox" class="show-on-hover">
+      <vbox>
-        <hbox id="zen-media-service-button">
+        <hbox id="zen-media-info-container" class="show-on-hover">
-          <image/>
+          <vbox id="zen-media-info-vbox">
+            <label id="zen-media-title" fadein="true"/>
+            <label id="zen-media-artist" fadein="true"/>
+          </vbox>
+          <hbox id="zen-media-buttons-hbox">
+            <toolbarbutton id="zen-media-pip-button"
+              class="toolbarbutton-1"
+              oncommand="gZenMediaController.onMediaPip();" />
+            <toolbarbutton id="zen-media-close-button"
+              class="toolbarbutton-1"
+              oncommand="gZenMediaController.onControllerClose();" />
+          </hbox>
         </hbox>
-        <hbox id="zen-media-service-title" fadein="true">
+        <hbox id="zen-media-progress-hbox"  class="show-on-hover">
-          <label class="service" />
+          <label id="zen-media-current-time">0:00</label>
-          <label class="tld" />
+          <html:input type="range" id="zen-media-progress-bar"
+            value="0" min="0" max="100" step="0.1"
+            oninput="gZenMediaController.onMediaSeekDrag(event);"
+            onchange="gZenMediaController.onMediaSeekComplete(event);"/>
+          <label id="zen-media-duration">0:00</label>
         </hbox>
-      </hbox>
-      
-      <vbox id="zen-media-info-vbox" class="show-on-hover">
-        <label id="zen-media-title" fadein="true"/>
-        <label id="zen-media-artist" fadein="true"/>
       </vbox>
-
-      <hbox id="zen-media-progress-hbox"  class="show-on-hover">
-        <label id="zen-media-current-time">0:00</label>
-        <html:input type="range" id="zen-media-progress-bar" 
-          value="0" min="0" max="100" step="0.1"
-          oninput="gZenMediaController.onMediaSeekDrag(event);"
-          onchange="gZenMediaController.onMediaSeekComplete(event);"/>
-        <label id="zen-media-duration">0:00</label>
-      </hbox>
-      
       <hbox id="zen-media-controls-hbox">
         <toolbarbutton id="zen-media-focus-button"
           class="toolbarbutton-1"

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

@@ -290,3 +290,23 @@
     transform: scale(1);
   }
 }
+
+@keyframes zen-back-and-forth-text {
+  0%,
+  10% {
+    transform: translateX(0);
+    left: 0;
+  }
+
+  45%,
+  65% {
+    transform: translateX(calc(-100% - 5px));
+    left: 100%;
+  }
+
+  90%,
+  100% {
+    transform: translateX(0);
+    left: 0;
+  }
+}

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-compact-mode.css

@@ -16,10 +16,12 @@
     #zen-tabbox-wrapper {
       /* Remove extra 1px of margine we have to add to the tabbox */
       margin-left: 0 !important;
+      margin-right: 0 !important;
     }
 
     #zen-appcontent-wrapper {
       margin-left: var(--zen-element-separation) !important;
+      margin-right: var(--zen-element-separation) !important;
 
       & #tabbrowser-tabbox {
         margin-left: 0 !important;
@@ -92,7 +94,7 @@
 
       & .browserSidebarContainer {
         margin-left: 0 !important;
-        margin-right: var(--zen-element-separation) !important;
+        margin-right: 0 !important;
       }
     }
 

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

@@ -278,6 +278,10 @@
 
   &[side='right'] {
     right: 0;
+
+    &[has-split-view='true'] {
+      right: var(--zen-element-separation);
+    }
   }
 
   &::after {

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

@@ -54,6 +54,10 @@
 
     & label {
       display: none;
+
+      &::before {
+        text-overflow: unset;
+      }
     }
 
     & image {
@@ -78,7 +82,7 @@
       color: white;
       fill: white;
       & label {
-        max-width: 100px;
+        max-width: 4rem;
         margin-left: 8px;
       }
 

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

@@ -1,5 +1,5 @@
 #zen-media-controls-toolbar {
-  --progress-height: 5px;
+  --progress-height: 4px;
   --button-spacing: 2px;
 
   display: flex;
@@ -13,6 +13,23 @@
     color: white;
   }
 
+  #zen-media-buttons-hbox {
+    align-items: start;
+    margin-top: -4px;
+    --toolbarbutton-outer-padding: 2px;
+  }
+
+  &:not([can-pip]) {
+    #zen-media-info-vbox {
+      width: calc(100% - 26px);
+      flex-shrink: 0;
+    }
+
+    #zen-media-pip-button {
+      display: none;
+    }
+  }
+
   #zen-media-prev-button,
   #zen-media-play-pause-button,
   #zen-media-next-button {
@@ -50,42 +67,49 @@
     &::-moz-range-thumb {
       background: var(--zen-primary-color);
       border: none;
-      width: 14px;
+      width: calc(var(--progress-height) * 2);
-      height: 14px;
+      height: calc(var(--progress-height) * 2);
       border-radius: 50%;
       cursor: pointer;
+      transform: scale(0);
+      transition: transform 0.15s ease-out;
+    }
+
+    &:hover::-moz-range-thumb {
+      transform: scale(1);
     }
   }
 
   &:hover {
-    & #zen-media-main-vbox {
-      transition-delay: 0s;
-      gap: 6px;
-    }
-
     .show-on-hover {
       max-height: 50px;
-      padding: 2px 6px;
+      padding: 5px;
       margin-bottom: 0;
       opacity: 1;
-      transform: translateY(0);
+      transform: translateY(0) !important;
+      pointer-events: auto;
     }
   }
 
-  &:not(:hover) {
+  & #zen-media-focus-button::after {
-    &.playing:not([muted]) #zen-media-focus-button::after {
+    content: '';
-      content: '';
+    position: absolute;
-      position: absolute;
+    width: 110%;
-      width: 100%;
+    height: 110%;
-      height: 100%;
+    background-repeat: no-repeat;
-      background-repeat: no-repeat;
+    opacity: 1;
-      opacity: 1;
+    background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
-      background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
+    top: -70%;
-      top: -50%;
+    left: 50%;
-      left: 50%;
+    transform: translateX(-50%);
-      transform: translateX(-50%);
+    z-index: 0;
-      z-index: -1;
+    pointer-events: none;
-    }
+    transition: opacity 0.8s ease;
+    opacity: 1;
+  }
+
+  &:is(:not(.playing:not([muted])), :hover) #zen-media-focus-button::after {
+    opacity: 0;
   }
 
   #zen-media-focus-button {
@@ -93,47 +117,44 @@
     transition:
       opacity 0.2s ease,
       transform 0.2s ease;
+    position: relative;
 
-    @container (max-width: 185px) {
+    & image {
-      width: 0;
+      &:-moz-broken {
-      height: 0;
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
-      opacity: 0;
+        background: color-mix(in srgb, var(--zen-primary-color) 70%, transparent 30%);
-      padding: 0;
+      }
-      margin-right: -10%;
-      transform: translateX(-20px);
-      transition: margin 0.15s ease-in-out;
-    }
-
-    @container (min-width: 185px) {
-      opacity: 1;
-      transform: translateX(0);
     }
   }
 
-  toolbaritem {
+  & > toolbaritem {
+    --zen-media-control-bg: light-dark(rgba(255, 255, 255, 0.87), rgba(0, 0, 0, 0.87));
     flex-grow: 1;
     padding: 0;
     transition: padding 0.3s ease-out;
     position: absolute;
     left: 0;
     bottom: 0;
-    padding: 4px;
+    padding: 4px 6px;
     border-radius: var(--border-radius-medium);
-    background: light-dark(rgb(255, 255, 255), rgb(11, 11, 11)) !important;
+    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+    background-color: var(--zen-media-control-bg);
+    backdrop-filter: saturate(3) contrast(2) blur(10px);
     width: 100%;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+    will-change: transform;
   }
 
   .show-on-hover {
     max-height: 0;
     opacity: 0;
-    transform: translateY(5px);
+    transform: translateY(1rem);
     padding: 0 6px;
+    pointer-events: none;
     transition:
-      max-height 0.1s ease-in-out,
+      max-height 0.2s ease,
-      opacity 0.1s ease-in-out,
+      opacity 0.2s ease,
-      transform 0.05s ease-in-out,
+      transform 0.2s ease,
-      padding 0.15s ease-in-out;
+      padding 0.2s ease;
   }
 
   #zen-media-current-time,
@@ -142,6 +163,7 @@
     font-size: x-small;
     opacity: 0.7;
     font-weight: 500;
+    font-variant-numeric: tabular-nums;
   }
 }
 
@@ -159,28 +181,6 @@
   }
 }
 
-#zen-media-service-title,
-#zen-media-title,
-#zen-media-artist {
-  white-space: nowrap;
-  width: 0;
-  margin-left: 0;
-}
-
-#zen-media-service-title {
-  align-self: center;
-  font-size: math;
-  margin-left: 6px;
-
-  & label {
-    margin: 0;
-  }
-
-  & .tld {
-    opacity: 0.5;
-  }
-}
-
 #zen-media-title,
 #zen-media-artist {
   align-self: start;
@@ -188,48 +188,73 @@
 
 #zen-media-artist {
   opacity: 0.7;
-  font-weight: 500;
   font-size: smaller;
+
+  &:empty {
+    display: none;
+  }
 }
 
 #zen-media-title {
   height: 16px;
   font-size: math;
-  font-weight: bold;
 }
 
 #zen-media-main-vbox,
-#zen-media-service-hbox,
 #zen-media-info-vbox,
 #zen-media-progress-hbox {
   width: 100%;
 }
 
-#zen-media-service-hbox {
-  padding-top: 6px;
-}
-
 #zen-media-info-vbox {
+  #zen-media-controls-toolbar:not([media-position-hidden='true']) & {
+    transition-delay: 0.01s !important;
+  }
+  overflow-x: hidden;
+  overflow-x: visible;
+  white-space: nowrap;
+  /* Overflow inner box shadow from the left to simulate overflow */
+  mask-image: linear-gradient(to left, transparent, var(--zen-media-control-bg) 0.6em);
+  min-width: 1px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 0.6em;
+    background: linear-gradient(to right, var(--zen-media-control-bg) 0%, transparent 100%);
+    pointer-events: none;
+    top: 6px;
+    left: 0;
+    height: calc(100% - 6px);
+    z-index: 1;
+  }
+
   & label {
-    width: 100%;
+    min-height: 16px;
-    text-overflow: ellipsis;
+    margin-left: 0;
-    overflow: hidden;
+    font-weight: 500;
-    white-space: nowrap;
+    position: relative; /* For the animation */
+
+    &[overflow] {
+      animation: zen-back-and-forth-text 10s infinite ease-in-out;
+    }
   }
 }
 
 #zen-media-main-vbox {
   height: 100%;
   justify-content: space-between;
-  transition: gap 0.1s ease-out;
-  transition-delay: 0.1s;
-  gap: 0px;
 }
 
 #zen-media-progress-hbox {
   flex-grow: 1;
   height: 1.1rem;
   align-items: center;
+  padding-top: 0px !important;
+
+  #zen-media-controls-toolbar[media-position-hidden='true'] & {
+    display: none;
+  }
 }
 
 #zen-media-controls-hbox {
@@ -239,13 +264,17 @@
   --toolbarbutton-outer-padding: 0;
 }
 
-#zen-media-service-button {
+#zen-media-info-container {
-  align-items: center;
+  padding-right: 0 !important;
+}
 
-  & image {
+#zen-media-controls-toolbar[can-pip] {
-    width: 16px;
+  #zen-media-info-vbox {
-    height: 16px;
+    flex-shrink: 1;
-    border-radius: 4px;
+  }
+
+  #zen-media-pip-button {
+    display: flex;
   }
 }
 

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-color: var(--button-primary-bgcolor);
+    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: var(--zen-big-shadow);
+    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

@@ -108,7 +108,7 @@
   }
 
   & #zen-sidebar-top-buttons {
-    margin: var(--zen-element-separation) 0 calc(var(--zen-toolbox-padding) / 2) 0;
+    margin: var(--zen-toolbox-padding) 0 calc(var(--zen-toolbox-padding) / 2) 0;
   }
 
   & #PanelUI-menu-button {
@@ -153,8 +153,6 @@
   min-width: var(--zen-toolbox-min-width);
   margin-top: 0 !important; /* Fix full screen mode */
 
-  padding-bottom: var(--zen-element-separation) !important;
-
   border: none;
   order: 0 !important;
 
@@ -257,16 +255,31 @@
   }
 
   & .tabbrowser-tab {
-    transition: scale 0.07s ease;
+    &,
+    & .tab-content > image {
+      transition: scale 0.07s ease;
+    }
 
     &[zen-empty-tab] {
       display: none;
     }
 
-    #tabbrowser-tabs:not([movingtab]) &:active {
+    #tabbrowser-tabs:not([movingtab]) &:active:not(:has(.tab-content > image:active)) {
       scale: var(--zen-active-tab-scale);
     }
 
+    #tabbrowser-tabs:not([movingtab]) & .tab-content > image:active {
+      scale: 0.92;
+    }
+
+    & .tab-icon-image {
+      &:not([src]),
+      &:-moz-broken {
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
+        background: color-mix(in srgb, var(--zen-primary-color) 30%, transparent 70%);
+      }
+    }
+
     max-width: unset;
     padding: 0 !important;
 
@@ -456,18 +469,11 @@
     margin-top: 0;
   }
 
-  & #zen-workspaces-button[as-button='true'] {
-    width: calc(100% - 10px) !important;
-  }
-
   & .zen-current-workspace-indicator-icon[no-icon='true'] {
     display: none;
   }
 
   & #zen-workspaces-button {
-    margin-left: 2px;
-    margin-right: 2px;
-
     & .zen-workspace-sidebar-icon[no-icon='true'] {
       display: none;
     }
@@ -756,14 +762,6 @@
   }
   & #zen-workspaces-button {
     flex-direction: column;
-    &:not([as-button='true']) {
-      & toolbarbutton {
-        &[active='true']::after {
-          bottom: 50% !important;
-          transform: translateY(50%) !important;
-        }
-      }
-    }
   }
 }
 
@@ -1049,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

@@ -155,16 +155,16 @@
 
   --input-bgcolor: var(--zen-colors-tertiary) !important;
   --input-border-color: var(--zen-input-border-color) !important;
-  --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #161616);
+  --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #171717);
-  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #161616);
+  --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

@@ -17,98 +17,83 @@
     display: none !important;
   }
 
-  &:not([as-button='true']) {
+  --toolbarbutton-hover-background: transparent !important;
-    --toolbarbutton-hover-background: transparent !important;
+  border-radius: var(--zen-button-border-radius) !important;
-    border-radius: var(--zen-button-border-radius) !important;
+  background: transparent;
-    background: transparent;
+  appearance: unset !important;
-    padding: 2px;
+  height: fit-content;
-    appearance: unset !important;
+  gap: 3px;
-    height: fit-content;
+
-    gap: 3px;
+  container-type: inline-size;
+  width: 100%;
+
+  & toolbarbutton {
+    margin: 0;
+    width: 25px;
+    display: flex;
+    justify-content: center;
+    padding: 0 !important;
+    align-items: center;
+    position: relative;
+
+    & .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: auto;
+      margin: 0;
-      width: 25px;
-      display: flex;
-      justify-content: center;
-      padding: 0 !important;
-      align-items: center;
-      position: relative;
-
-      @media (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
-        &:not([active='true']):not(:hover) {
-          &::after {
-            content: '';
-            position: absolute;
-            width: 4px;
-            border-radius: 99px;
-            height: 4px;
-            background: color-mix(
-              in srgb,
-              var(--zen-primary-color) 10%,
-              light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
-            );
-            left: 50%;
-            top: 50%;
-            filter: saturate(140%) brightness(110%) !important;
-            transform: translate(-50%, -50%);
-          }
-
-          & .zen-workspace-icon {
-            display: none;
-          }
-        }
-      }
-
-      @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);
-        }
-      }
-    }
-  }
-
-  &[as-button='true'] {
-    border-radius: var(--tab-border-radius);
-
-    &:hover {
-      background: var(--toolbarbutton-hover-background);
-    }
-  }
-
-  &[as-button='true'] {
-    margin: auto;
-    padding: var(--toolbarbutton-inner-padding) !important;
-    width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
-    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
-    border-radius: var(--tab-border-radius) !important;
-
-    :root:not([zen-sidebar-expanded='true']) #navigator-toolbox & {
-      & .zen-workspace-sidebar-name {
-        display: none;
-      }
-
-      & .zen-workspace-sidebar-icon {
-        margin-inline-end: 0 !important;
-      }
     }
 
-    &:hover {
+    & toolbarbutton:not([active='true']),
-      background: var(--toolbarbutton-hover-background) !important;
+    &:has(toolbarbutton:hover) toolbarbutton[active='true'] {
+      &:not(:hover) {
+        width: min(var(--zen-overflowed-workspace-button-width), 25px);
+
+        &::after {
+          content: '';
+          position: absolute;
+          width: 4px;
+          border-radius: 99px;
+          height: 4px;
+          background: color-mix(
+            in srgb,
+            var(--zen-primary-color) 10%,
+            light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
+          );
+          left: 50%;
+          top: 50%;
+          filter: saturate(140%) brightness(110%) !important;
+          transform: translate(-50%, -50%);
+        }
+
+        & .zen-workspace-icon {
+          display: none;
+        }
+      }
     }
   }
 }
@@ -133,13 +118,6 @@
 
 /** Keep these selectors in sync with the ones in vertical-tabs.css */
 #navigator-toolbox {
-  & #zen-workspaces-button[as-button='true'] {
-    width: calc(100% - var(--toolbarbutton-outer-padding));
-    margin: 2px;
-    min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
-    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
-  }
-
   & #zen-workspaces-button .zen-workspace-sidebar-name {
     display: block;
   }
@@ -150,8 +128,6 @@
 
   & #zen-workspaces-button {
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     display: flex;
     gap: 0.5ch;
   }
@@ -457,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);
@@ -475,11 +451,10 @@
     pointer-events: none;
     content: '';
     position: absolute;
-    top: 4px;
+    top: var(--zen-toolbox-padding);
-    left: 2px;
+    left: calc(var(--zen-toolbox-padding) / 2);
-    z-index: -1;
+    width: calc(100% - var(--zen-toolbox-padding));
-    width: calc(100% - 4px);
+    height: calc(100% - var(--zen-toolbox-padding) * 2);
-    height: calc(100% - 10px);
   }
 
   &:hover,

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

@@ -40,6 +40,14 @@ var gZenCompactModeManager = {
 
     // Clear hover states when window state changes (minimize, maximize, etc.)
     window.addEventListener('sizemodechange', () => this._clearAllHoverStates());
+
+    if (AppConstants.platform == 'macosx') {
+      window.addEventListener('mouseover', (event) => {
+        const buttons = gZenVerticalTabsManager.actualWindowButtons;
+        if (event.target.closest('.titlebar-buttonbox-container') === buttons) return;
+        buttons.removeAttribute('zen-has-hover');
+      });
+    }
   },
 
   get preference() {
@@ -72,7 +80,7 @@ var gZenCompactModeManager = {
   },
 
   get sidebarIsOnRight() {
-    if (this._sidebarIsOnRight) {
+    if (typeof this._sidebarIsOnRight !== 'undefined') {
       return this._sidebarIsOnRight;
     }
     this._sidebarIsOnRight = Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
@@ -337,9 +345,9 @@ var gZenCompactModeManager = {
   },
 
   flashElement(element, duration, id, attrName = 'flash-popup') {
-    if (element.matches(':hover')) {
+    //if (element.matches(':hover')) {
-      return;
+    //  return;
-    }
+    //}
     if (this._flashTimeouts[id]) {
       clearTimeout(this._flashTimeouts[id]);
     } else {
@@ -363,6 +371,8 @@ var gZenCompactModeManager = {
       let target = this.hoverableElements[i].element;
       const onEnter = (event) => {
         if (event.type === 'mouseenter' && !event.target.matches(':hover')) return;
+        // Dont register the hover if the urlbar is floating and we are hovering over it
+        if (event.target.querySelector('#urlbar[zen-floating-urlbar]')) return;
         this.clearFlashTimeout('has-hover' + target.id);
         window.requestAnimationFrame(() => target.setAttribute('zen-has-hover', 'true'));
       };

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)';
+      if (forToolbar) {
-      return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`;
+        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

@@ -6,8 +6,6 @@ class ZenMediaController {
   mediaTitle = null;
   mediaArtist = null;
   mediaControlBar = null;
-  mediaServiceIcon = null;
-  mediaServiceTitle = null;
   mediaProgressBar = null;
   mediaCurrentTime = null;
   mediaDuration = null;
@@ -16,114 +14,215 @@ class ZenMediaController {
 
   supportedKeys = ['playpause', 'previoustrack', 'nexttrack'];
 
+  pipEligibilityMap = new Map();
+  mediaControllersMap = new Map();
+
+  _tabTimeout = null;
+  _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');
-    this.mediaServiceIcon = document.querySelector('#zen-media-service-button > image');
-    this.mediaServiceTitle = document.querySelector('#zen-media-service-title');
     this.mediaProgressBar = document.querySelector('#zen-media-progress-bar');
     this.mediaCurrentTime = document.querySelector('#zen-media-current-time');
     this.mediaDuration = document.querySelector('#zen-media-duration');
     this.mediaFocusButton = document.querySelector('#zen-media-focus-button');
     this.mediaProgressBarContainer = document.querySelector('#zen-media-progress-hbox');
 
+    this.onPositionstateChange = this._onPositionstateChange.bind(this);
+    this.onPlaybackstateChange = this._onPlaybackstateChange.bind(this);
+    this.onSupportedKeysChange = this._onSupportedKeysChange.bind(this);
+    this.onMetadataChange = this._onMetadataChange.bind(this);
+    this.onDeactivated = this._onDeactivated.bind(this);
+    this.onPipModeChange = this._onPictureInPictureModeChange.bind(this);
+
     window.addEventListener('TabSelect', (event) => {
-      if (this._currentBrowser) {
+      const linkedBrowser = event.target.linkedBrowser;
-        if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
+      this.switchController();
-          gZenUIManager.motion
-            .animate(this.mediaControlBar, {
-              opacity: [1, 0],
-              y: [0, 10],
-            })
-            .then(() => {
-              this.mediaControlBar.setAttribute('hidden', 'true');
-            });
-        } else if (this.mediaControlBar.hasAttribute('hidden')) {
-          this.mediaControlBar.removeAttribute('hidden');
-          window.requestAnimationFrame(() => {
-            this.mediaControlBar.style.height =
-              this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
-            gZenUIManager.motion.animate(
-              this.mediaControlBar,
-              {
-                opacity: [0, 1],
-                y: [10, 0],
-              },
-              {}
-            );
-          });
-        }
 
-        gZenUIManager.updateTabsToolbar();
-      }
-    });
-
-    window.addEventListener('TabClose', (event) => {
       if (this._currentBrowser) {
-        if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
+        if (linkedBrowser.browserId === this._currentBrowser.browserId) {
-          this.deinitMediaController(this._currentMediaController);
+          if (this._tabTimeout) {
+            clearTimeout(this._tabTimeout);
+            this._tabTimeout = null;
+          }
+
+          this.hideMediaControls();
+        } else {
+          this._tabTimeout = setTimeout(() => {
+            if (!this.mediaControlBar.hasAttribute('pip')) this.showMediaControls();
+            else this._tabTimeout = null;
+          }, 500);
         }
       }
     });
+
+    const onTabDiscardedOrClosed = this.onTabDiscardedOrClosed.bind(this);
+    window.addEventListener('TabClose', onTabDiscardedOrClosed);
+
+    window.addEventListener('DOMAudioPlaybackStarted', (event) => {
+      setTimeout(() => {
+        if (
+          this._currentMediaController?.isPlaying &&
+          this.mediaControlBar.hasAttribute('hidden') &&
+          !this.mediaControlBar.hasAttribute('pip')
+        ) {
+          const { selectedBrowser } = gBrowser;
+          if (selectedBrowser.browserId !== this._currentBrowser.browserId) {
+            this.showMediaControls();
+          }
+        }
+      }, 1000);
+
+      this.activateMediaControls(event.target.browsingContext.mediaController, event.target);
+    });
+
+    window.addEventListener('DOMAudioPlaybackStopped', () => this.updateMuteState());
   }
 
-  /**
+  onTabDiscardedOrClosed(event) {
-   * Deinitializes a media controller, removing all event listeners and resetting state.
+    const linkedBrowser = event.target.linkedBrowser;
-   * @param {Object} mediaController - The media controller to deinitialize.
+    if (!linkedBrowser?.browsingContext?.mediaController) return;
-   */
+    this.deinitMediaController(
-  deinitMediaController(mediaController) {
+      linkedBrowser.browsingContext.mediaController,
+      true,
+      linkedBrowser.browserId === this._currentBrowser?.browserId,
+      true
+    );
+  }
+
+  async deinitMediaController(mediaController, shouldForget = true, shouldOverride = true, shouldHide = true) {
     if (!mediaController) return;
 
-    mediaController.onpositionstatechange = null;
+    const retrievedMediaController = this.mediaControllersMap.get(mediaController.id);
-    mediaController.onplaybackstatechange = null;
-    mediaController.onsupportedkeyschange = null;
-    mediaController.onmetadatachange = null;
-    mediaController.ondeactivated = null;
 
-    this._currentMediaController = null;
+    if (shouldForget) {
-    this._currentBrowser = null;
+      mediaController.removeEventListener('pictureinpicturemodechange', this.onPipModeChange);
+      mediaController.removeEventListener('positionstatechange', this.onPositionstateChange);
+      mediaController.removeEventListener('playbackstatechange', this.onPlaybackstateChange);
+      mediaController.removeEventListener('supportedkeyschange', this.onSupportedKeysChange);
+      mediaController.removeEventListener('metadatachange', this.onMetadataChange);
+      mediaController.removeEventListener('deactivated', this.onDeactivated);
 
-    if (this._mediaUpdateInterval) {
+      this.mediaControllersMap.delete(mediaController.id);
-      clearInterval(this._mediaUpdateInterval);
+      this.pipEligibilityMap.delete(retrievedMediaController?.browser?.browserId);
-      this._mediaUpdateInterval = null;
     }
 
-    this.mediaControlBar.setAttribute('hidden', 'true');
+    if (shouldOverride) {
-    this.mediaControlBar.removeAttribute('muted');
+      this._currentMediaController = null;
-    this.mediaControlBar.classList.remove('playing');
+      this._currentBrowser = null;
 
-    gZenUIManager.updateTabsToolbar();
+      if (this._mediaUpdateInterval) {
+        clearInterval(this._mediaUpdateInterval);
+        this._mediaUpdateInterval = null;
+      }
+
+      if (shouldHide) await this.hideMediaControls();
+      this.mediaControlBar.removeAttribute('muted');
+      this.mediaControlBar.classList.remove('playing');
+    }
   }
 
-  /**
+  hideMediaControls() {
-   * Sets up the media control UI with metadata and position state.
+    if (this.mediaControlBar.hasAttribute('hidden')) return;
-   * @param {Object} metadata - The media metadata (title, artist, etc.).
+
-   * @param {Object} positionState - The position state (position, duration).
+    return gZenUIManager.motion
-   */
+      .animate(
-  setupMediaControl(metadata, positionState) {
+        this.mediaControlBar,
-    if (!this.mediaControlBar.classList.contains('playing')) {
+        {
+          opacity: [1, 0],
+          y: [0, 10],
+        },
+        {
+          duration: 0.1,
+        }
+      )
+      .then(() => {
+        this.mediaControlBar.setAttribute('hidden', 'true');
+        gZenUIManager.updateTabsToolbar();
+        gZenUIManager.restoreScrollbarState();
+      });
+  }
+
+  showMediaControls() {
+    if (this._currentMediaController.isBeingUsedInPIPModeOrFullscreen) return this.hideMediaControls();
+    if (!this.mediaControlBar.hasAttribute('hidden')) return;
+
+    this.updatePipButton();
+    const mediaInfoElements = [this.mediaTitle, this.mediaArtist];
+    for (const element of mediaInfoElements) {
+      element.removeAttribute('overflow'); // So we can properly recalculate the overflow
+    }
+
+    this.mediaControlBar.removeAttribute('hidden');
+    window.requestAnimationFrame(() => {
+      this.mediaControlBar.style.height =
+        this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
+      this.mediaControlBar.style.opacity = 0;
+      gZenUIManager.updateTabsToolbar();
+      gZenUIManager.restoreScrollbarState();
+      gZenUIManager.motion.animate(
+        this.mediaControlBar,
+        {
+          opacity: [0, 1],
+          y: [10, 0],
+        },
+        {}
+      );
+      this.addLabelOverflows(mediaInfoElements);
+    });
+  }
+
+  addLabelOverflows(elements) {
+    for (const element of elements) {
+      const parent = element.parentElement;
+      if (element.scrollWidth > parent.clientWidth) {
+        element.setAttribute('overflow', '');
+      } else {
+        element.removeAttribute('overflow');
+      }
+    }
+  }
+
+  setupMediaController(mediaController, browser) {
+    this._currentMediaController = mediaController;
+    this._currentBrowser = browser;
+
+    this.updatePipButton();
+
+    const positionState = mediaController.getPositionState();
+    this.mediaControllersMap.set(mediaController.id, {
+      controller: mediaController,
+      browser,
+      position: positionState.position,
+      duration: positionState.duration,
+      lastUpdated: Date.now(),
+    });
+  }
+
+  setupMediaControlUI(metadata, positionState) {
+    this.updatePipButton();
+
+    if (!this.mediaControlBar.classList.contains('playing') && this._currentMediaController.isPlaying) {
       this.mediaControlBar.classList.add('playing');
     }
 
-    // Have it displayed as e.g. <white>youtube</white><grey>.com</grey>
+    const iconURL = this._currentBrowser.mIconURL || `page-icon:${this._currentBrowser.currentURI.spec}`;
-    let host = this._currentBrowser._originalURI.displayHost;
+    this.mediaFocusButton.style.listStyleImage = `url(${iconURL})`;
-    if (host.startsWith('www.')) host = host.slice(4);
-    // note: we might have subdomains, so we need to split the host
-    const [service, ...tld] = host.split('.');
-    this.mediaServiceTitle.querySelector('.service').textContent = service;
-    this.mediaServiceTitle.querySelector('.tld').textContent = '.' + tld.join('.');
-
-    this.mediaServiceIcon.src = this._currentBrowser.mIconURL;
-    this.mediaFocusButton.style.listStyleImage = `url(${this._currentBrowser.mIconURL})`;
 
     this.mediaTitle.textContent = metadata.title || '';
     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) {
@@ -132,110 +231,149 @@ class ZenMediaController {
     }
   }
 
-  /**
-   * @param {Object} mediaController - The media controller to activate.
-   * @param {Object} browser - The browser associated with the media controller.
-   */
   activateMediaControls(mediaController, browser) {
     this.updateMuteState();
+    this.switchController();
 
-    if (this._currentBrowser?.browserId === browser.browserId) return;
+    if (!mediaController.isActive || this._currentBrowser?.browserId === browser.browserId) return;
-    else {
-      this.deinitMediaController(this._currentMediaController);
-      this._currentMediaController = mediaController;
-      this._currentBrowser = browser;
-    }
-
-    mediaController.onpositionstatechange = this.onPositionstateChange.bind(this);
-    mediaController.onplaybackstatechange = this.onPlaybackstateChange.bind(this);
-    mediaController.onsupportedkeyschange = this.onSupportedKeysChange.bind(this);
-    mediaController.onmetadatachange = this.onMetadataChange.bind(this);
-    mediaController.ondeactivated = this.onDeactivated.bind(this);
 
     const metadata = mediaController.getMetadata();
     const positionState = mediaController.getPositionState();
+    this.mediaControllersMap.set(mediaController.id, {
+      controller: mediaController,
+      browser,
+      position: positionState.position,
+      duration: positionState.duration,
+      lastUpdated: Date.now(),
+    });
 
-    this.setupMediaControl(metadata, positionState);
+    if (!this._currentBrowser) {
+      this.setupMediaController(mediaController, browser);
+      this.setupMediaControlUI(metadata, positionState);
+    }
+
+    mediaController.addEventListener('pictureinpicturemodechange', this.onPipModeChange);
+    mediaController.addEventListener('positionstatechange', this.onPositionstateChange);
+    mediaController.addEventListener('playbackstatechange', this.onPlaybackstateChange);
+    mediaController.addEventListener('supportedkeyschange', this.onSupportedKeysChange);
+    mediaController.addEventListener('metadatachange', this.onMetadataChange);
+    mediaController.addEventListener('deactivated', this.onDeactivated);
   }
 
-  /**
+  updatePipEligibility(browser, isEligible) {
-   * @param {Event} event - The deactivation event.
+    this.pipEligibilityMap.set(browser.browserId, isEligible);
-   */
+  }
-  onDeactivated(event) {
+
-    if (event.target === this._currentMediaController) {
+  _onDeactivated(event) {
-      this.deinitMediaController(event.target);
+    this.deinitMediaController(event.target, true, event.target.id === this._currentMediaController.id, true);
+    this.switchController();
+  }
+
+  _onPlaybackstateChange() {
+    if (this._currentMediaController?.isPlaying) {
+      this.mediaControlBar.classList.add('playing');
+    } else {
+      this.switchController();
+      this.mediaControlBar.classList.remove('playing');
     }
   }
 
-  /**
+  _onSupportedKeysChange(event) {
-   * Updates playback state and UI based on changes.
+    if (event.target.id !== this._currentMediaController?.id) return;
-   * @param {Event} event - The playback state change event.
-   */
-  onPlaybackstateChange(event) {
-    this.mediaControlBar.classList.toggle('playing', event.target.isPlaying);
-  }
-
-  /**
-   * Updates supported keys in the UI.
-   * @param {Event} event - The supported keys change event.
-   */
-  onSupportedKeysChange(event) {
     for (const key of this.supportedKeys) {
       const button = this.mediaControlBar.querySelector(`#zen-media-${key}-button`);
       button.disabled = !event.target.supportedKeys.includes(key);
     }
   }
 
-  /**
+  _onPositionstateChange(event) {
-   * Updates position state and UI when the media position changes.
+    const mediaController = this.mediaControllersMap.get(event.target.id);
-   * @param {Event} event - The position state change event.
+    this.mediaControllersMap.set(event.target.id, {
-   */
+      ...mediaController,
-  onPositionstateChange(event) {
+      position: event.position,
-    if (event.target !== this._currentMediaController) return;
+      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();
   }
 
-  /**
+  switchController(force = false) {
-   * Updates the media progress bar and time display.
+    let timeout = 3000;
-   */
+
+    if (this._controllerSwitchTimeout) {
+      clearTimeout(this._controllerSwitchTimeout);
+      this._controllerSwitchTimeout = null;
+    }
+
+    if (this.mediaControllersMap.size === 1) timeout = 0;
+    this._controllerSwitchTimeout = setTimeout(() => {
+      if (!this._currentMediaController?.isPlaying || force) {
+        const nextController = Array.from(this.mediaControllersMap.values())
+          .filter(
+            (ctrl) =>
+              ctrl.controller.isPlaying &&
+              gBrowser.selectedBrowser.browserId !== ctrl.browser.browserId &&
+              ctrl.controller.id !== this._currentMediaController?.id
+          )
+          .sort((a, b) => b.lastUpdated - a.lastUpdated)
+          .shift();
+
+        if (nextController) {
+          this.deinitMediaController(this._currentMediaController, false, true).then(() => {
+            this.setupMediaController(nextController.controller, nextController.browser);
+            const elapsedTime = Math.floor((Date.now() - nextController.lastUpdated) / 1000);
+
+            this.setupMediaControlUI(nextController.controller.getMetadata(), {
+              position: nextController.position + (nextController.controller.isPlaying ? elapsedTime : 0),
+              duration: nextController.duration,
+            });
+
+            this.showMediaControls();
+          });
+        }
+      }
+
+      this._controllerSwitchTimeout = null;
+    }, timeout);
+  }
+
   updateMediaPosition() {
     if (this._mediaUpdateInterval) {
       clearInterval(this._mediaUpdateInterval);
       this._mediaUpdateInterval = null;
     }
 
-    if (this._currentDuration >= 900_000) return this.mediaProgressBarContainer.setAttribute('hidden', 'true');
+    if (this._currentDuration >= 900_000) return this.mediaControlBar.setAttribute('media-position-hidden', 'true');
-    else this.mediaProgressBarContainer.removeAttribute('hidden');
+    else this.mediaControlBar.removeAttribute('media-position-hidden');
+
+    if (!this._currentDuration) return;
 
     this.mediaCurrentTime.textContent = this.formatSecondsToTime(this._currentPosition);
     this.mediaDuration.textContent = this.formatSecondsToTime(this._currentDuration);
     this.mediaProgressBar.value = (this._currentPosition / this._currentDuration) * 100;
 
-    if (this._currentMediaController?.isPlaying) {
+    this._mediaUpdateInterval = setInterval(() => {
-      this._mediaUpdateInterval = setInterval(() => {
+      if (this._currentMediaController?.isPlaying) {
-        if (this._currentMediaController?.isPlaying) {
+        this._currentPosition += 1 * this._currentPlaybackRate;
-          this._currentPosition += 1;
+        if (this._currentPosition > this._currentDuration) {
-          if (this._currentPosition > this._currentDuration) {
+          this._currentPosition = this._currentDuration;
-            this._currentPosition = this._currentDuration;
-          }
-          this.mediaCurrentTime.textContent = this.formatSecondsToTime(this._currentPosition);
-          this.mediaProgressBar.value = (this._currentPosition / this._currentDuration) * 100;
-        } else {
-          clearInterval(this._mediaUpdateInterval);
-          this._mediaUpdateInterval = null;
         }
-      }, 1000);
+        this.mediaCurrentTime.textContent = this.formatSecondsToTime(this._currentPosition);
-    }
+        this.mediaProgressBar.value = (this._currentPosition / this._currentDuration) * 100;
+      } else {
+        clearInterval(this._mediaUpdateInterval);
+        this._mediaUpdateInterval = null;
+      }
+    }, 1000);
   }
 
-  /**
-   * Formats seconds into a hours:minutes:seconds string.
-   * @param {number} seconds - The time in seconds.
-   * @returns {string} Formatted time string.
-   */
   formatSecondsToTime(seconds) {
     if (!seconds || isNaN(seconds)) return '0:00';
 
@@ -251,14 +389,35 @@ class ZenMediaController {
     return `${minutes}:${secs.padStart(2, '0')}`;
   }
 
-  /**
+  _onMetadataChange(event) {
-   * Updates metadata in the UI.
+    if (event.target.id !== this._currentMediaController?.id) return;
-   * @param {Event} event - The metadata change event.
+    this.updatePipButton();
-   */
+
-  onMetadataChange(event) {
     const metadata = event.target.getMetadata();
     this.mediaTitle.textContent = metadata.title || '';
     this.mediaArtist.textContent = metadata.artist || '';
+
+    const mediaInfoElements = [this.mediaTitle, this.mediaArtist];
+    for (const element of mediaInfoElements) {
+      element.removeAttribute('overflow');
+    }
+
+    this.addLabelOverflows(mediaInfoElements);
+  }
+
+  _onPictureInPictureModeChange(event) {
+    if (event.target.id !== this._currentMediaController?.id) return;
+    if (event.target.isBeingUsedInPIPModeOrFullscreen) {
+      this.hideMediaControls();
+      this.mediaControlBar.setAttribute('pip', '');
+    } else {
+      const { selectedBrowser } = gBrowser;
+      if (selectedBrowser.browserId !== this._currentBrowser.browserId) {
+        this.showMediaControls();
+      }
+
+      this.mediaControlBar.removeAttribute('pip');
+    }
   }
 
   onMediaPlayPrev() {
@@ -288,7 +447,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() {
@@ -309,6 +471,18 @@ class ZenMediaController {
     }
   }
 
+  onControllerClose() {
+    this._currentMediaController?.pause();
+    this.switchController(true);
+    this.deinitMediaController(this._currentMediaController);
+  }
+
+  onMediaPip() {
+    this._currentBrowser.browsingContext.currentWindowGlobal
+      .getActor('PictureInPictureLauncher')
+      .sendAsyncMessage('PictureInPicture:KeyToggle');
+  }
+
   updateMuteState() {
     if (!this._currentBrowser) return;
     if (this._currentBrowser._audioMuted) {
@@ -317,6 +491,12 @@ class ZenMediaController {
       this.mediaControlBar.removeAttribute('muted');
     }
   }
+
+  updatePipButton() {
+    const isPipEligible = this.pipEligibilityMap.get(this._currentBrowser.browserId);
+    if (isPipEligible) this.mediaControlBar.setAttribute('can-pip', '');
+    else this.mediaControlBar.removeAttribute('can-pip');
+  }
 }
 
 window.gZenMediaController = new ZenMediaController();

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]);
+              gZenTabUnloader.explicitUnloadTabs([selectedTab], { permitUnload });
-              selectedTab.removeAttribute('linkedpanel');
             }
           }
           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

@@ -49,9 +49,13 @@ class SplitNode extends SplitLeafNode {
     return this._children;
   }
 
-  addChild(child) {
+  addChild(child, prepend = true) {
     child.parent = this;
-    this._children.unshift(child);
+    if (prepend) {
+      this._children.unshift(child);
+    } else {
+      this._children.push(child);
+    }
   }
 }
 
@@ -226,11 +230,13 @@ 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');
       this.fakeBrowser.id = 'zen-split-view-fake-browser';
+      if (oldTab.splitView) {
+        this.fakeBrowser.setAttribute('has-split-view', 'true');
+      }
       gBrowser.tabbox.appendChild(this.fakeBrowser);
       this.fakeBrowser.style.setProperty('--zen-split-view-fake-icon', `url(${draggedTab.getAttribute('image')})`);
       draggedTab._visuallySelected = true;
@@ -270,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;
         });
@@ -988,10 +995,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     this.activateSplitView(splitData);
   }
 
-  addTabToSplit(tab, splitNode) {
+  addTabToSplit(tab, splitNode, prepend = true) {
     const reduce = splitNode.children.length / (splitNode.children.length + 1);
     splitNode.children.forEach((c) => (c.sizeInParent *= reduce));
-    splitNode.addChild(new SplitLeafNode(tab, (1 - reduce) * 100));
+    splitNode.addChild(new SplitLeafNode(tab, (1 - reduce) * 100), prepend);
   }
 
   /**
@@ -1599,7 +1606,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
             if (parentNode.direction !== splitDirection) {
               this.splitIntoNode(droppedOnSplitNode, new SplitLeafNode(draggedTab, 50), hoverSide, 0.5);
             } else {
-              this.addTabToSplit(draggedTab, parentNode);
+              this.addTabToSplit(draggedTab, parentNode, /* prepend = */ hoverSide === 'left' || hoverSide === 'top');
             }
           } else {
             this.addTabToSplit(draggedTab, group.layoutTree);

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

@@ -36,10 +36,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this._resolveInitialized = resolve;
   });
 
-  promiseEmptyTabInitialized = new Promise((resolve) => {
-    this._resolveEmptyTabInitialized = resolve;
-  });
-
   workspaceIndicatorXUL = `
     <hbox class="zen-current-workspace-indicator-icon"></hbox>
     <hbox class="zen-current-workspace-indicator-name"></hbox>
@@ -61,13 +57,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     XPCOMUtils.defineLazyPreferenceGetter(this, 'activationMethod', 'zen.workspaces.scroll-modifier-key', 'ctrl');
     XPCOMUtils.defineLazyPreferenceGetter(this, 'naturalScroll', 'zen.workspaces.natural-scroll', true);
     XPCOMUtils.defineLazyPreferenceGetter(this, 'shouldWrapAroundNavigation', 'zen.workspaces.wrap-around-navigation', true);
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      'shouldShowIconStrip',
-      'zen.workspaces.show-icon-strip',
-      true,
-      this._expandWorkspacesStrip.bind(this)
-    );
     XPCOMUtils.defineLazyPreferenceGetter(
       this,
       'shouldForceContainerTabsToWorkspace',
@@ -88,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() {
@@ -143,7 +134,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   async _createDefaultWorkspaceIfNeeded() {
     const workspaces = await this._workspaces();
     if (!workspaces.workspaces.length) {
-      await this.createAndSaveWorkspace('Default Workspace', true, '🏠', true);
+      await this.createAndSaveWorkspace('Default', true, null, true);
       this._workspaceCache = null;
     }
   }
@@ -610,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();
@@ -621,11 +613,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (Services.prefs.getBoolPref('zen.workspaces.disable_empty_state_for_testing', false)) {
       return;
     }
+    if (this._initialTab) {
+      this.moveTabToWorkspace(this._initialTab, this.activeWorkspace);
+      gBrowser.selectedTab = this._initialTab;
+      gBrowser.moveTabTo(this._initialTab, 0, { forceStandaloneTab: true });
+      this._initialTab._possiblyEmpty = false;
+      this._initialTab = null;
+    }
     const currentTab = gBrowser.selectedTab;
     let showed = false;
-    await this.promiseEmptyTabInitialized;
-    this._resolveEmptyTabInitialized = null;
-    this.promiseEmptyTabInitialized = null;
     if (currentTab.pinned) {
       this.selectEmptyTab();
       try {
@@ -640,8 +636,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       if (
         (currentTab.isEmpty &&
           (currentTab.getAttribute('image') === gPageIcons[currentTabURL] || !currentTab.hasAttribute('image'))) ||
-        currentTab.hasAttribute('zen-empty-tab') ||
+        currentTab._possiblyEmpty
-        (currentTab._possibleEmptyTab && currentTab.isEmpty)
       ) {
         this.selectEmptyTab();
         this._removedByStartupPage = true;
@@ -654,6 +649,14 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
+  handleInitialTab(tab, isEmpty) {
+    if (isEmpty) {
+      tab._possiblyEmpty = true;
+    } else {
+      this._initialTab = tab;
+    }
+  }
+
   initIndicatorContextMenu(indicator) {
     const th = (event) => {
       event.preventDefault();
@@ -870,6 +873,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     await ZenWorkspacesStorage.removeWorkspace(windowID);
     await this._propagateWorkspaceData();
     await this._updateWorkspacesChangeContextMenu();
+    this.onWindowResize();
   }
 
   isWorkspaceActive(workspace) {
@@ -1316,82 +1320,55 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     button.setAttribute('showInPrivateBrowsing', 'false');
     button.setAttribute('tooltiptext', 'Workspaces');
-    if (this.shouldShowIconStrip) {
+    let workspaces = await this._workspaces();
-      let workspaces = await this._workspaces();
 
-      for (let workspace of workspaces.workspaces) {
+    for (let workspace of workspaces.workspaces) {
-        let workspaceButton = browser.document.createXULElement('toolbarbutton');
+      let workspaceButton = browser.document.createXULElement('toolbarbutton');
-        workspaceButton.className = 'subviewbutton';
+      workspaceButton.className = 'subviewbutton';
-        workspaceButton.setAttribute('tooltiptext', workspace.name);
+      workspaceButton.setAttribute('tooltiptext', workspace.name);
-        workspaceButton.setAttribute('zen-workspace-id', workspace.uuid);
+      workspaceButton.setAttribute('zen-workspace-id', workspace.uuid);
 
-        if (this.isWorkspaceActive(workspace)) {
+      if (this.isWorkspaceActive(workspace)) {
-          workspaceButton.setAttribute('active', 'true');
+        workspaceButton.setAttribute('active', 'true');
-        } else {
-          workspaceButton.removeAttribute('active');
-        }
-        if (workspace.default) {
-          workspaceButton.setAttribute('default', 'true');
-        } else {
-          workspaceButton.removeAttribute('default');
-        }
-
-        workspaceButton.addEventListener('click', async (event) => {
-          if (event.button !== 0) {
-            return;
-          }
-          await this.changeWorkspace(workspace);
-        });
-
-        let icon = browser.document.createXULElement('div');
-        icon.className = 'zen-workspace-icon';
-        icon.textContent = this.getWorkspaceIcon(workspace);
-        workspaceButton.appendChild(icon);
-        button.appendChild(workspaceButton);
-      }
-
-      if (workspaces.workspaces.length <= 1) {
-        button.setAttribute('dont-show', true);
       } else {
-        button.removeAttribute('dont-show');
+        workspaceButton.removeAttribute('active');
+      }
+      if (workspace.default) {
+        workspaceButton.setAttribute('default', 'true');
+      } else {
+        workspaceButton.removeAttribute('default');
       }
 
-      this._workspaceButtonContextMenuListener = (event) => {
+      workspaceButton.addEventListener('click', async (event) => {
-        event.preventDefault();
+        if (event.button !== 0) {
-        event.stopPropagation();
+          return;
-        this.openWorkspacesDialog(event);
-      };
-      button.addEventListener('contextmenu', this._workspaceButtonContextMenuListener.bind(browser.ZenWorkspaces));
-    } else {
-      let activeWorkspace = await this.getActiveWorkspace();
-      if (activeWorkspace) {
-        button.setAttribute('as-button', 'true');
-        button.classList.add('toolbarbutton-1', 'zen-sidebar-action-button');
-
-        this._workspacesButtonClickListener = browser.ZenWorkspaces.openWorkspacesDialog.bind(browser.ZenWorkspaces);
-        button.addEventListener('click', this._workspacesButtonClickListener);
-
-        const wrapper = browser.document.createXULElement('hbox');
-        wrapper.className = 'zen-workspace-sidebar-wrapper';
-
-        const icon = browser.document.createXULElement('div');
-        icon.className = 'zen-workspace-sidebar-icon';
-        icon.textContent = this.getWorkspaceIcon(activeWorkspace);
-
-        const name = browser.document.createXULElement('div');
-        name.className = 'zen-workspace-sidebar-name';
-        name.textContent = activeWorkspace.name;
-
-        if (!this.workspaceHasIcon(activeWorkspace)) {
-          icon.setAttribute('no-icon', 'true');
         }
+        await this.changeWorkspace(workspace);
+      });
 
-        wrapper.appendChild(icon);
+      let icon = browser.document.createXULElement('div');
-        wrapper.appendChild(name);
+      icon.className = 'zen-workspace-icon';
-
+      if (this.workspaceHasIcon(workspace)) {
-        button.appendChild(wrapper);
+        icon.textContent = this.getWorkspaceIcon(workspace);
+      } else {
+        icon.setAttribute('no-icon', 'true');
       }
+      workspaceButton.appendChild(icon);
+      button.appendChild(workspaceButton);
     }
+
+    if (workspaces.workspaces.length <= 1) {
+      button.setAttribute('dont-show', true);
+    } else {
+      button.removeAttribute('dont-show');
+    }
+
+    this._workspaceButtonContextMenuListener = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.openWorkspacesDialog(event);
+    };
+    button.addEventListener('contextmenu', this._workspaceButtonContextMenuListener.bind(browser.ZenWorkspaces));
   }
 
   closeWorkspacesSubView() {
@@ -1955,6 +1932,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       }
       await this.changeWorkspace(workspaceData);
     }
+    this.onWindowResize();
     return workspaceData;
   }
 
@@ -2373,9 +2351,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   async switchIfNeeded(browser, i) {
     const tab = gBrowser.getTabForBrowser(browser);
-    const workspaceId = tab.getAttribute('zen-workspace-id');
+    await this.switchTabIfNeeded(tab);
-    if (!tab.hasAttribute('zen-essential') && workspaceId !== this.activeWorkspace) {
+  }
-      await this.changeWorkspace({ uuid: workspaceId });
+
+  async switchTabIfNeeded(tab) {
+    if (!tab.hasAttribute('zen-essential') && tab.getAttribute('zen-workspace-id') !== this.activeWorkspace) {
+      await this.changeWorkspace({ uuid: tab.getAttribute('zen-workspace-id') });
     }
     gBrowser.selectedTab = tab;
   }
@@ -2392,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/moz.build

@@ -2,3 +2,10 @@
 BROWSER_CHROME_MANIFESTS += [
     "tests/browser.toml",
 ]
+
+FINAL_TARGET_FILES.actors += [
+    "actors/ZenGlanceChild.sys.mjs",
+    "actors/ZenGlanceParent.sys.mjs",
+    "actors/ZenThemeMarketplaceChild.sys.mjs",
+    "actors/ZenThemeMarketplaceParent.sys.mjs",
+]

src/browser/components/customizableui/CustomizableUI-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
-index e6b9b7dcfab179e7552c146eb1551b45ad042266..d9d838a7a51f67b52b69f419024cc3174ae5260b 100644
+index 8eab0f9181c19c68a0a2daf0f819b3ae82ed92bc..092107b377ec4f7bc9ae86c817cded349732ffc6 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -13,6 +13,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -116,7 +116,7 @@ index e6b9b7dcfab179e7552c146eb1551b45ad042266..d9d838a7a51f67b52b69f419024cc317
              win.setToolbarVisibility(
                areaNode,
                typeof defaultCollapsed == "string"
-@@ -4658,6 +4656,7 @@ export var CustomizableUI = {
+@@ -4857,6 +4855,7 @@ export var CustomizableUI = {
    unregisterArea(aName, aDestroyPlacements) {
      CustomizableUIInternal.unregisterArea(aName, aDestroyPlacements);
    },
@@ -124,7 +124,7 @@ index e6b9b7dcfab179e7552c146eb1551b45ad042266..d9d838a7a51f67b52b69f419024cc317
    /**
     * Add a widget to an area.
     * If the area to which you try to add is not known to CustomizableUI,
-@@ -6483,11 +6482,11 @@ class OverflowableToolbar {
+@@ -6840,11 +6839,11 @@ class OverflowableToolbar {
          parseFloat(style.paddingLeft) -
          parseFloat(style.paddingRight) -
          toolbarChildrenWidth;
@@ -134,11 +134,11 @@ index e6b9b7dcfab179e7552c146eb1551b45ad042266..d9d838a7a51f67b52b69f419024cc317
          this.#target == this.#toolbar
            ? toolbarChildrenWidth
 -          : sumChildrenInlineSize(this.#target);
-+          : sumChildrenInlineSize(this.#target, win.gZenVerticalTabsManager._topButtonsSeparatorElement);
++          : sumChildrenInlineSize((win.gZenVerticalTabsManager._hasSetSingleToolbar && this.#target.id == 'nav-bar-customization-target') ? win.document.getElementById("zen-sidebar-top-buttons-customization-target") : this.#target, win.gZenVerticalTabsManager._topButtonsSeparatorElement);
      });
  
      lazy.log.debug(
-@@ -6497,7 +6496,8 @@ class OverflowableToolbar {
+@@ -6854,7 +6853,8 @@ class OverflowableToolbar {
      // If the target has min-width: 0, their children might actually overflow
      // it, so check for both cases explicitly.
      let targetContentWidth = Math.max(targetWidth, targetChildrenWidth);
@@ -148,7 +148,7 @@ index e6b9b7dcfab179e7552c146eb1551b45ad042266..d9d838a7a51f67b52b69f419024cc317
      return { isOverflowing, targetContentWidth, totalAvailWidth };
    }
  
-@@ -6591,7 +6591,7 @@ class OverflowableToolbar {
+@@ -6948,7 +6948,7 @@ class OverflowableToolbar {
          }
        }
        if (!inserted) {
@@ -157,7 +157,7 @@ index e6b9b7dcfab179e7552c146eb1551b45ad042266..d9d838a7a51f67b52b69f419024cc317
        }
        child.removeAttribute("cui-anchorid");
        child.removeAttribute("overflowedItem");
-@@ -6753,6 +6753,9 @@ class OverflowableToolbar {
+@@ -7110,6 +7110,9 @@ class OverflowableToolbar {
     * @param {MouseEvent} aEvent the click event.
     */
    #onClickDefaultListButton(aEvent) {

src/browser/components/customizableui/content/panelUI-inc-xhtml.patch

@@ -1,17 +1,13 @@
 diff --git a/browser/components/customizableui/content/panelUI.inc.xhtml b/browser/components/customizableui/content/panelUI.inc.xhtml
-index 956a6ae45d7adbec1513c5af528ebb687a4b7d0d..83b23e84cb6895497c1346f7c4aff15173e67b5c 100644
+index c78f08bdd3fc4d01e10552ef65c2d5813dd053e8..154fb1de2ab9384937d02c14cb7c9c607b330da9 100644
 --- a/browser/components/customizableui/content/panelUI.inc.xhtml
 +++ b/browser/components/customizableui/content/panelUI.inc.xhtml
-@@ -81,9 +81,10 @@
+@@ -132,7 +132,7 @@
-             <html:span data-l10n-id="unified-extensions-header-title"/>
+   <panel id="appMenu-notification-popup"
-           </html:h1>
+          class="popup-notification-panel panel-no-padding"
-         </box>
+          type="arrow"
--
+-         position="after_start"
-+        <html:p id="unified-extensions-description" data-l10n-id="unified-extensions-description" class="panel-description"/>
++         position="after_end"
-+#if 0
+          flip="slide"
-         <toolbarseparator />
+          orient="vertical"
--
+          noautofocus="true"
-+#endif
-         <vbox class="panel-subview-body" context="unified-extensions-context-menu">
-           <html:div id="unified-extensions-messages-container">
-             <!-- messages will be inserted here -->

src/browser/components/customizableui/content/panelUI-js.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/components/customizableui/content/panelUI.js b/browser/components/customizableui/content/panelUI.js
-index 1805bad6c58e060533f634ed9e511c05cad3ded1..f153761e406535270343fa1f430dea4f740cb2fc 100644
+index 7583473ee73538b2fa54337bfd844f03f261be49..559b593a6874296bd5894c5985f8eeb680cd3886 100644
 --- a/browser/components/customizableui/content/panelUI.js
 +++ b/browser/components/customizableui/content/panelUI.js
-@@ -496,8 +496,7 @@ const PanelUI = {
+@@ -515,8 +515,7 @@ const PanelUI = {
          tempPanel.setAttribute("animate", "false");
        }
        tempPanel.setAttribute("context", "");
@@ -12,13 +12,12 @@ index 1805bad6c58e060533f634ed9e511c05cad3ded1..f153761e406535270343fa1f430dea4f
          .appendChild(tempPanel);
  
        let multiView = document.createXULElement("panelmultiview");
-@@ -544,8 +543,8 @@ const PanelUI = {
+@@ -960,7 +959,7 @@ const PanelUI = {
-       }
+         el.removeAttribute("data-lazy-l10n-id");
+       });
  
-       if (viewShown) {
+-    this.notificationPanel.openPopup(anchor, "bottomright topright");
--        CustomizableUI.addPanelCloseListeners(tempPanel);
++    this.notificationPanel.openPopup(anchor, gZenUIManager.panelUIPosition);
-         tempPanel.addEventListener("popuphidden", panelRemover);
+   },
-+        CustomizableUI.addPanelCloseListeners(tempPanel);
+ 
-       } else {
+   _clearNotificationPanel() {
-         panelRemover();
-       }

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

@@ -944,11 +944,6 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
-  {
-    id: 'zen.workspaces.show-icon-strip',
-    type: 'bool',
-    default: true,
-  },
   {
     id: 'zen.tab-unloader.enabled',
     type: 'bool',
@@ -964,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

@@ -20,15 +20,9 @@
       <checkbox id="zenWorkspacesHideDefaultContainer"
             data-l10n-id="zen-settings-workspaces-hide-default-container-indicator"
             preference="zen.workspaces.hide-default-container-indicator"/>
-      <checkbox id="zenWorkspacesDisplayAsIconStrip"
-            data-l10n-id="zen-settings-workspaces-display-as-icon-strip"
-            preference="zen.workspaces.show-icon-strip"/>
       <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/components/tabbrowser/content/tabbrowser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad72079b02024 100644
+index 628aa6596627c85efe361fc1ece8fd58f7ee653e..06a4aae50ebe8a42d08d4689d8e80a63af1fa8a3 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -412,11 +412,50 @@
@@ -55,7 +55,15 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        }
        return i;
      }
-@@ -811,12 +850,13 @@
+@@ -546,6 +585,7 @@
+       this.tabpanels.appendChild(panel);
+ 
+       let tab = this.tabs[0];
++      ZenWorkspaces.handleInitialTab(tab, (!remoteType || remoteType === E10SUtils.PRIVILEGEDABOUT_REMOTE_TYPE) && !Services.prefs.getBoolPref('zen.workspaces.disable_empty_state_for_testing', false));
+       tab.linkedPanel = uniqueId;
+       this._selectedTab = tab;
+       this._selectedBrowser = browser;
+@@ -811,12 +851,13 @@
        }
  
        this.showTab(aTab);
@@ -73,7 +81,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          this.moveTabTo(aTab, this.pinnedTabCount, { forceStandaloneTab: true });
        }
        aTab.setAttribute("pinned", "true");
-@@ -830,12 +870,15 @@
+@@ -830,12 +871,15 @@
        }
  
        if (this.tabContainer.verticalMode) {
@@ -90,7 +98,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          });
        } else {
          this.moveTabTo(aTab, this.pinnedTabCount - 1, {
-@@ -1018,6 +1061,8 @@
+@@ -1018,6 +1062,8 @@
  
        let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
  
@@ -99,7 +107,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        if (
          aIconURL &&
          !aLoadingPrincipal &&
-@@ -1028,6 +1073,9 @@
+@@ -1028,6 +1074,9 @@
          );
          return;
        }
@@ -109,7 +117,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
  
        let browser = this.getBrowserForTab(aTab);
        browser.mIconURL = aIconURL;
-@@ -1273,6 +1321,7 @@
+@@ -1273,6 +1322,7 @@
        if (!this._previewMode) {
          newTab.recordTimeFromUnloadToReload();
          newTab.updateLastAccessed();
@@ -117,7 +125,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          oldTab.updateLastAccessed();
          // if this is the foreground window, update the last-seen timestamps.
          if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
-@@ -1425,6 +1474,9 @@
+@@ -1425,6 +1475,9 @@
        }
  
        let activeEl = document.activeElement;
@@ -127,7 +135,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        // If focus is on the old tab, move it to the new tab.
        if (activeEl == oldTab) {
          newTab.focus();
-@@ -1748,7 +1800,7 @@
+@@ -1748,7 +1801,7 @@
      }
  
      _setTabLabel(aTab, aLabel, { beforeTabOpen, isContentTitle, isURL } = {}) {
@@ -136,7 +144,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          return false;
        }
  
-@@ -1851,7 +1903,7 @@
+@@ -1851,7 +1904,7 @@
          newIndex = this.selectedTab._tPos + 1;
        }
  
@@ -145,7 +153,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          let browser;
          if (targetTab) {
            browser = this.getBrowserForTab(targetTab);
-@@ -2108,6 +2160,7 @@
+@@ -2108,6 +2161,7 @@
        uriIsAboutBlank,
        userContextId,
        skipLoad,
@@ -153,7 +161,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
      } = {}) {
        let b = document.createXULElement("browser");
        // Use the JSM global to create the permanentKey, so that if the
-@@ -2181,8 +2234,7 @@
+@@ -2181,8 +2235,7 @@
          // we use a different attribute name for this?
          b.setAttribute("name", name);
        }
@@ -163,7 +171,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          b.setAttribute("transparent", "true");
        }
  
-@@ -2347,7 +2399,7 @@
+@@ -2347,7 +2400,7 @@
  
        let panel = this.getPanel(browser);
        let uniqueId = this._generateUniquePanelID();
@@ -172,7 +180,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        aTab.linkedPanel = uniqueId;
  
        // Inject the <browser> into the DOM if necessary.
-@@ -2406,8 +2458,8 @@
+@@ -2406,8 +2459,8 @@
        // If we transitioned from one browser to two browsers, we need to set
        // hasSiblings=false on both the existing browser and the new browser.
        if (this.tabs.length == 2) {
@@ -183,7 +191,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        } else {
          aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
        }
-@@ -2629,6 +2681,7 @@
+@@ -2629,6 +2682,7 @@
          schemelessInput,
          hasValidUserGestureActivation = false,
          textDirectiveUserActivation = false,
@@ -191,7 +199,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        } = {}
      ) {
        // all callers of addTab that pass a params object need to pass
-@@ -2639,6 +2692,12 @@
+@@ -2639,6 +2693,12 @@
          );
        }
  
@@ -204,7 +212,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        if (!UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.start("browser.tabs.opening", "initting", window);
        }
-@@ -2702,6 +2761,15 @@
+@@ -2702,6 +2762,15 @@
            noInitialLabel,
            skipBackgroundNotify,
          });
@@ -220,7 +228,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          if (insertTab) {
            // insert the tab into the tab container in the correct position
            this._insertTabAtIndex(t, {
-@@ -2726,6 +2794,7 @@
+@@ -2726,6 +2795,7 @@
            initialBrowsingContextGroupId,
            openWindowInfo,
            skipLoad,
@@ -228,7 +236,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          }));
  
          if (focusUrlBar) {
-@@ -2845,6 +2914,9 @@
+@@ -2845,6 +2915,9 @@
          }
        }
  
@@ -238,7 +246,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        // Additionally send pinned tab events
        if (pinned) {
          this._notifyPinnedStatus(t);
-@@ -2904,6 +2976,7 @@
+@@ -2904,6 +2977,7 @@
          label = "",
          insertBefore = null,
          showCreateUI = false,
@@ -246,7 +254,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        } = {}
      ) {
        if (!tabs?.length) {
-@@ -2918,7 +2991,12 @@
+@@ -2918,7 +2992,12 @@
          id = `${Date.now()}-${Math.round(Math.random() * 100)}`;
        }
        let group = this._createTabGroup(id, color, false, label);
@@ -260,7 +268,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          group,
          insertBefore?.group ?? insertBefore
        );
-@@ -3126,6 +3204,7 @@
+@@ -3126,6 +3205,7 @@
          initialBrowsingContextGroupId,
          openWindowInfo,
          skipLoad,
@@ -268,7 +276,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        }
      ) {
        // If we don't have a preferred remote type, and we have a remote
-@@ -3189,6 +3268,7 @@
+@@ -3189,6 +3269,7 @@
            openWindowInfo,
            name,
            skipLoad,
@@ -276,7 +284,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          });
        }
  
-@@ -3367,6 +3447,27 @@
+@@ -3367,6 +3448,27 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -304,7 +312,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3380,6 +3481,7 @@
+@@ -3380,6 +3482,7 @@
              restoreTabsLazily && !select && !tabData.pinned;
  
            let url = "about:blank";
@@ -312,7 +320,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
            if (tabData.entries?.length) {
              let activeIndex = (tabData.index || tabData.entries.length) - 1;
              // Ensure the index is in bounds.
-@@ -3415,7 +3517,27 @@
+@@ -3415,7 +3518,27 @@
              skipLoad: true,
              preferredRemoteType,
            });
@@ -341,7 +349,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
            if (select) {
              tabToSelect = tab;
            }
-@@ -3428,8 +3550,8 @@
+@@ -3428,8 +3551,8 @@
            // inserted in the DOM. If the tab is not yet in the DOM,
            // just insert it in the right place from the start.
            if (!tab.parentNode) {
@@ -352,17 +360,17 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
              tab.toggleAttribute("pinned", true);
              this.tabContainer._invalidateCachedTabs();
              // Then ensure all the tab open/pinning information is sent.
-@@ -3504,6 +3626,9 @@
+@@ -3504,6 +3627,9 @@
          this.selectedTab = tabToSelect;
          this.removeTab(leftoverTab);
        }
 +      else {
-+        this.selectedTab._possibleEmptyTab = true; // Not needed, but just in case.
++        this.selectedTab._possiblyEmpty = this.selectedTab.isEmpty; // Not needed, but just in case.
 +      }
  
        if (tabs.length > 1 || !tabs[0].selected) {
          this._updateTabsAfterInsert();
-@@ -3693,7 +3818,7 @@
+@@ -3693,7 +3819,7 @@
        // Ensure we have an index if one was not provided.
        if (typeof index != "number") {
          // Move the new tab after another tab if needed, to the end otherwise.
@@ -371,7 +379,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          if (
            !bulkOrderedOpen &&
            ((openerTab &&
-@@ -3736,18 +3861,18 @@
+@@ -3736,18 +3862,18 @@
  
        // Ensure index is within bounds.
        if (tab.pinned) {
@@ -394,7 +402,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          if (tabAfter && tabAfter.group == tabGroup) {
            // Place at the front of, or between tabs in, the same tab group
            this.tabContainer.insertBefore(tab, tabAfter);
-@@ -4059,6 +4184,9 @@
+@@ -4059,6 +4185,9 @@
          return;
        }
  
@@ -404,7 +412,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        this.removeTabs(selectedTabs);
      }
  
-@@ -4391,6 +4519,7 @@
+@@ -4391,6 +4520,7 @@
          skipSessionStore,
        } = {}
      ) {
@@ -412,7 +420,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        if (UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.finish("browser.tabs.opening", window);
        }
-@@ -4407,6 +4536,12 @@
+@@ -4407,6 +4537,12 @@
          TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
        }
  
@@ -425,7 +433,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -4421,7 +4556,9 @@
+@@ -4421,7 +4557,9 @@
        // frame created for it (for example, by updating the visually selected
        // state).
        let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -436,7 +444,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -4435,7 +4572,6 @@
+@@ -4435,7 +4573,6 @@
          TelemetryStopwatch.cancel("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
          return;
        }
@@ -444,7 +452,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        let lockTabSizing =
          !this.tabContainer.verticalMode &&
          !aTab.pinned &&
-@@ -4574,14 +4710,14 @@
+@@ -4574,14 +4711,14 @@
          !!this.tabsInCollapsedTabGroups.length;
        if (
          aTab.visible &&
@@ -461,7 +469,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
  
          if (closeWindow) {
            // We've already called beforeunload on all the relevant tabs if we get here,
-@@ -4605,6 +4741,7 @@
+@@ -4605,6 +4742,7 @@
  
          newTab = true;
        }
@@ -469,7 +477,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        aTab._endRemoveArgs = [closeWindow, newTab];
  
        // swapBrowsersAndCloseOther will take care of closing the window without animation.
-@@ -4645,9 +4782,7 @@
+@@ -4645,9 +4783,7 @@
        aTab._mouseleave();
  
        if (newTab) {
@@ -480,7 +488,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        } else {
          TabBarVisibility.update();
        }
-@@ -4776,6 +4911,8 @@
+@@ -4776,6 +4912,8 @@
          this.tabs[i]._tPos = i;
        }
  
@@ -489,7 +497,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        if (!this._windowIsClosing) {
          if (wasPinned) {
            this.tabContainer._positionPinnedTabs();
-@@ -4994,7 +5131,7 @@
+@@ -4994,7 +5132,7 @@
          !excludeTabs.has(aTab.owner) &&
          Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
        ) {
@@ -498,7 +506,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        }
  
        // Try to find a remaining tab that comes after the given tab
-@@ -5016,7 +5153,7 @@
+@@ -5016,7 +5154,7 @@
        }
  
        if (tab) {
@@ -507,7 +515,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        }
  
        // If no qualifying visible tab was found, see if there is a tab in
-@@ -5434,10 +5571,10 @@
+@@ -5434,10 +5572,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      }
  
@@ -520,7 +528,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -5675,7 +5812,7 @@
+@@ -5675,7 +5813,7 @@
  
        // Don't allow mixing pinned and unpinned tabs.
        if (aTab.pinned) {
@@ -529,7 +537,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        } else {
          aIndex = Math.max(aIndex, this.pinnedTabCount);
        }
-@@ -5685,10 +5822,17 @@
+@@ -5685,10 +5823,17 @@
  
        this._handleTabMove(aTab, () => {
          let neighbor = this.tabs[aIndex];
@@ -549,7 +557,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
            neighbor.after(aTab);
          } else {
            this.tabContainer.insertBefore(aTab, neighbor);
-@@ -5697,7 +5841,7 @@
+@@ -5697,7 +5842,7 @@
      }
  
      moveTabToGroup(aTab, aGroup) {
@@ -558,7 +566,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
          return;
        }
        if (aTab.group && aTab.group.id === aGroup.id) {
-@@ -5721,6 +5865,10 @@
+@@ -5721,6 +5866,10 @@
  
        moveActionCallback();
  
@@ -569,7 +577,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        // Clear tabs cache after moving nodes because the order of tabs may have
        // changed.
        this.tabContainer._invalidateCachedTabs();
-@@ -5771,7 +5919,7 @@
+@@ -5771,7 +5920,7 @@
          createLazyBrowser,
        };
  
@@ -578,7 +586,16 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
        if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) {
          params.pinned = true;
        }
-@@ -7415,6 +7563,7 @@
+@@ -6513,7 +6662,7 @@
+             // preventDefault(). It will still raise the window if appropriate.
+             break;
+           }
+-          this.selectedTab = tab;
++          ZenWorkspaces.switchTabIfNeeded(tab);
+           window.focus();
+           aEvent.preventDefault();
+           break;
+@@ -7415,6 +7564,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -586,7 +603,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
            }
-@@ -8381,7 +8530,7 @@ var TabContextMenu = {
+@@ -8381,7 +8531,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !multiselectionContext;
@@ -595,7 +612,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
      // Move Tab items
      let contextMoveTabOptions = document.getElementById(
        "context_moveTabOptions"
-@@ -8414,7 +8563,7 @@ var TabContextMenu = {
+@@ -8414,7 +8564,7 @@ var TabContextMenu = {
      let contextMoveTabToStart = document.getElementById("context_moveToStart");
      let isFirstTab =
        tabsToMove[0] == visibleTabs[0] ||
@@ -604,7 +621,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
      contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
  
      document.getElementById("context_openTabInWindow").disabled =
-@@ -8647,6 +8796,7 @@ var TabContextMenu = {
+@@ -8647,6 +8797,7 @@ var TabContextMenu = {
      if (this.contextTab.multiselected) {
        gBrowser.removeMultiSelectedTabs();
      } else {

src/browser/components/tabbrowser/content/tabs-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a84f01452 100644
+index fa96568d366fd3608f9bd583fa793150bd815c8b..1c940a3b162919256ca73fa867c5c261a3395e25 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -94,7 +94,7 @@
@@ -11,16 +11,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
          }
          return true;
        };
-@@ -135,6 +135,8 @@
+@@ -339,7 +339,7 @@
-       this.previewPanel = null;
- 
-       this.allTabs[0].label = this.emptyTabTitle;
-+      this.allTabs[0]._possibleEmptyTab = true;
-+      ZenWorkspaces._resolveEmptyTabInitialized();
- 
-       // Hide the secondary text for locales where it is unsupported due to size constraints.
-       const language = Services.locale.appLocaleAsBCP47;
-@@ -339,7 +341,7 @@
        // and we're not hitting the scroll buttons.
        if (
          event.button != 0 ||
@@ -29,7 +20,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
          event.composedTarget.localName == "toolbarbutton"
        ) {
          return;
-@@ -388,6 +390,7 @@
+@@ -388,6 +388,7 @@
              // Reset the "ignored click" flag
              target._ignoredCloseButtonClicks = false;
            }
@@ -37,7 +28,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
          }
  
          /* Protects from close-tab-button errant doubleclick:
-@@ -683,7 +686,7 @@
+@@ -683,7 +684,7 @@
        if (this.#isContainerVerticalPinnedExpanded(tab)) {
          // In expanded vertical mode, the max number of pinned tabs per row is dynamic
          // Set this before adjusting dragged tab's position
@@ -46,7 +37,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
          let tabsPerRow = 0;
          let position = 0;
          for (let pinnedTab of pinnedTabs) {
-@@ -883,6 +886,10 @@
+@@ -883,6 +884,10 @@
        }
  
        let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
@@ -57,7 +48,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        if (
          (effects == "move" || effects == "copy") &&
          this == draggedTab.container &&
-@@ -996,6 +1003,18 @@
+@@ -996,6 +1001,18 @@
  
        this._tabDropIndicator.hidden = true;
        event.stopPropagation();
@@ -76,7 +67,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        if (draggedTab && dropEffect == "copy") {
          // copy the dropped tab (wherever it's from)
          let newIndex = this._getDropIndex(event);
-@@ -1034,10 +1053,11 @@
+@@ -1034,10 +1051,11 @@
            }
          } else {
            let pinned = draggedTab.pinned;
@@ -92,7 +83,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
            );
            let size = this.verticalMode ? "height" : "width";
            let screenAxis = this.verticalMode ? "screenY" : "screenX";
-@@ -1114,7 +1134,7 @@
+@@ -1114,7 +1132,7 @@
                let postTransitionCleanup = () => {
                  tab.removeAttribute("tabdrop-samewindow");
  
@@ -101,7 +92,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
                  if (dropIndex !== false) {
                    gBrowser.moveTabTo(tab, dropIndex);
                    if (!directionForward) {
-@@ -1122,7 +1142,7 @@
+@@ -1122,7 +1140,7 @@
                    }
                  }
                };
@@ -110,7 +101,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
                  postTransitionCleanup();
                } else {
                  let onTransitionEnd = transitionendEvent => {
-@@ -1249,7 +1269,7 @@
+@@ -1249,7 +1267,7 @@
                return;
              }
            }
@@ -119,7 +110,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
            gBrowser.loadTabs(urls, {
              inBackground,
              replace,
-@@ -1279,13 +1299,23 @@
+@@ -1279,13 +1297,23 @@
          return;
        }
  
@@ -145,7 +136,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        ) {
          delete draggedTab._dragData;
          return;
-@@ -1517,7 +1547,7 @@
+@@ -1517,7 +1545,7 @@
      }
  
      get newTabButton() {
@@ -154,7 +145,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
      }
  
      get verticalMode() {
-@@ -1537,28 +1567,40 @@
+@@ -1537,28 +1565,40 @@
        if (this.#allTabs) {
          return this.#allTabs;
        }
@@ -203,7 +194,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        return children.filter(node => node.tagName == "tab-group");
      }
  
-@@ -1579,7 +1621,7 @@
+@@ -1579,7 +1619,7 @@
       */
      get visibleTabs() {
        if (!this.#visibleTabs) {
@@ -212,7 +203,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        }
        return this.#visibleTabs;
      }
-@@ -1613,10 +1655,8 @@
+@@ -1613,10 +1653,8 @@
          return this.#focusableItems;
        }
  
@@ -225,7 +216,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
  
        let focusableItems = [];
        for (let child of children) {
-@@ -1632,6 +1672,7 @@
+@@ -1632,6 +1670,7 @@
        }
  
        this.#focusableItems = [
@@ -233,7 +224,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
          ...verticalPinnedTabsContainer.children,
          ...focusableItems,
        ];
-@@ -1642,6 +1683,7 @@
+@@ -1642,6 +1681,7 @@
      _invalidateCachedTabs() {
        this.#allTabs = null;
        this._invalidateCachedVisibleTabs();
@@ -241,7 +232,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
      }
  
      _invalidateCachedVisibleTabs() {
-@@ -1656,8 +1698,8 @@
+@@ -1656,8 +1696,8 @@
      #isContainerVerticalPinnedExpanded(tab) {
        return (
          this.verticalMode &&
@@ -252,7 +243,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        );
      }
  
-@@ -1672,7 +1714,7 @@
+@@ -1672,7 +1712,7 @@
  
        if (node == null) {
          // We have a container for non-tab elements at the end of the scrollbox.
@@ -261,7 +252,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        }
  
        node.before(tab);
-@@ -1772,7 +1814,7 @@
+@@ -1772,7 +1812,7 @@
            // There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
            // for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
            // Attach the long click popup to all of them.
@@ -270,7 +261,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
            const newTab2 = this.newTabButton;
            const newTabVertical = document.getElementById(
              "vertical-tabs-newtab-button"
-@@ -1855,7 +1897,7 @@
+@@ -1855,7 +1895,7 @@
            let rect = ele => {
              return window.windowUtils.getBoundsWithoutFlushing(ele);
            };
@@ -279,7 +270,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
            if (tab && rect(tab).width <= this._tabClipWidth) {
              this.setAttribute("closebuttons", "activetab");
            } else {
-@@ -1867,10 +1909,12 @@
+@@ -1867,10 +1907,12 @@
  
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -292,7 +283,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -1882,7 +1926,7 @@
+@@ -1882,7 +1924,7 @@
          return;
        }
  
@@ -301,7 +292,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        if (!tabs.length) {
          return;
        }
-@@ -1918,7 +1962,7 @@
+@@ -1918,7 +1960,7 @@
          if (isEndTab && !this._hasTabTempMaxWidth) {
            return;
          }
@@ -310,7 +301,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
          // Force tabs to stay the same width, unless we're closing the last tab,
          // which case we need to let them expand just enough so that the overall
          // tabbar width is the same.
-@@ -1933,7 +1977,7 @@
+@@ -1933,7 +1975,7 @@
          let tabsToReset = [];
          for (let i = numPinned; i < tabs.length; i++) {
            let tab = tabs[i];
@@ -319,7 +310,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
            if (!isEndTab) {
              // keep tabs the same width
              tab.style.transition = "none";
-@@ -1999,16 +2043,15 @@
+@@ -1999,16 +2041,15 @@
        // Move pinned tabs to another container when the tabstrip is toggled to vertical
        // and when session restore code calls _positionPinnedTabs; update styling whenever
        // the number of pinned tabs changes.
@@ -342,7 +333,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
          }
        }
  
-@@ -2016,9 +2059,7 @@
+@@ -2016,9 +2057,7 @@
      }
  
      _resetVerticalPinnedTabs() {
@@ -353,7 +344,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
  
        if (!verticalTabsContainer.children.length) {
          return;
-@@ -2031,8 +2072,8 @@
+@@ -2031,8 +2070,8 @@
      }
  
      _positionPinnedTabs() {
@@ -364,7 +355,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        let absPositionHorizontalTabs =
          this.overflowing && tabs.length > numPinned && numPinned > 0;
  
-@@ -2041,7 +2082,7 @@
+@@ -2041,7 +2080,7 @@
  
        if (this.verticalMode) {
          this._updateVerticalPinnedTabs();
@@ -373,7 +364,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
          let layoutData = this._pinnedTabsLayoutCache;
          let uiDensity = document.documentElement.getAttribute("uidensity");
          if (!layoutData || layoutData.uiDensity != uiDensity) {
-@@ -2113,7 +2154,7 @@
+@@ -2113,7 +2152,7 @@
          return;
        }
  
@@ -382,7 +373,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2121,7 +2162,7 @@
+@@ -2121,7 +2160,7 @@
        dragData.animLastScreenX = screenX;
  
        let { width: tabWidth, height: tabHeight } =
@@ -391,7 +382,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        let shiftSizeX = tabWidth * movingTabs.length;
        let shiftSizeY = tabHeight;
        dragData.tabWidth = tabWidth;
-@@ -2296,10 +2337,11 @@
+@@ -2296,10 +2335,11 @@
        }
  
        let pinned = draggedTab.pinned;
@@ -407,7 +398,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        );
  
        if (this.#rtlMode) {
-@@ -2348,7 +2390,11 @@
+@@ -2348,7 +2388,11 @@
        translate = Math.min(Math.max(translate, firstBound), lastBound);
  
        for (let tab of movingTabs) {
@@ -420,7 +411,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        }
  
        dragData.translatePos = translate;
-@@ -2484,12 +2530,16 @@
+@@ -2484,12 +2528,16 @@
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let tab of tabs) {
@@ -438,7 +429,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
          if (tab.group?.tabs[0] == tab) {
            tab.group.style.setProperty(
              "--tabgroup-dragover-transform",
-@@ -2541,8 +2591,9 @@
+@@ -2541,8 +2589,9 @@
        );
      }
  
@@ -450,7 +441,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
          return;
        }
  
-@@ -2553,6 +2604,7 @@
+@@ -2553,6 +2602,7 @@
          tab.style.transform = "";
          if (tab.group) {
            tab.group.style.removeProperty("--tabgroup-dragover-transform");
@@ -458,7 +449,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
          }
          tab.removeAttribute("dragover-createGroup");
        }
-@@ -2604,7 +2656,7 @@
+@@ -2604,7 +2654,7 @@
            movingTab._moveTogetherSelectedTabsData.newIndex = movingTabNewIndex;
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -467,7 +458,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -2707,9 +2759,9 @@
+@@ -2707,9 +2757,9 @@
        function newIndex(aTab, index) {
          // Don't allow mixing pinned and unpinned tabs.
          if (aTab.pinned) {
@@ -479,7 +470,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
        }
      }
  
-@@ -2793,7 +2845,7 @@
+@@ -2793,7 +2843,7 @@
      }
  
      _notifyBackgroundTab(aTab) {

src/browser/components/urlbar/UrlbarInput-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
-index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..30387bf4f128fdc1d687ee4f6c5a51eb0bee29ea 100644
+index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..79b9161544633d319d7e550dd95334b62e85eed4 100644
 --- a/browser/components/urlbar/UrlbarInput.sys.mjs
 +++ b/browser/components/urlbar/UrlbarInput.sys.mjs
 @@ -67,6 +67,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
@@ -52,7 +52,18 @@ index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..30387bf4f128fdc1d687ee4f6c5a51eb
    }
  
    /**
-@@ -1098,7 +1116,11 @@ export class UrlbarInput {
+@@ -943,6 +961,10 @@ export class UrlbarInput {
+     // Nullify search mode before setURI so it won't try to restore it.
+     this.searchMode = null;
+     this.setURI(null, true, false, true);
++    if (this.hasAttribute("zen-floating-urlbar")) {
++      this.window.gBrowser.selectedBrowser.focus();
++      return;
++    }
+     if (this.value && this.focused) {
+       this.select();
+     }
+@@ -1098,7 +1120,11 @@ export class UrlbarInput {
      }
  
      if (!this.#providesSearchMode(result)) {
@@ -65,7 +76,7 @@ index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..30387bf4f128fdc1d687ee4f6c5a51eb
      }
  
      this.controller.recordSelectedResult(event, result);
-@@ -2157,6 +2179,11 @@ export class UrlbarInput {
+@@ -2157,6 +2183,11 @@ export class UrlbarInput {
  
      this.setAttribute("breakout-extend", "true");
  
@@ -77,7 +88,7 @@ index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..30387bf4f128fdc1d687ee4f6c5a51eb
      // Enable the animation only after the first extend call to ensure it
      // doesn't run when opening a new window.
      if (!this.hasAttribute("breakout-extend-animate")) {
-@@ -2176,6 +2203,11 @@ export class UrlbarInput {
+@@ -2176,6 +2207,11 @@ export class UrlbarInput {
        return;
      }
  
@@ -89,7 +100,7 @@ index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..30387bf4f128fdc1d687ee4f6c5a51eb
      this.removeAttribute("breakout-extend");
      this.#updateTextboxPosition();
    }
-@@ -2998,7 +3030,7 @@ export class UrlbarInput {
+@@ -2998,7 +3034,7 @@ export class UrlbarInput {
     */
    _trimValue(val) {
      let trimmedValue = lazy.UrlbarPrefs.get("trimURLs")
@@ -98,7 +109,7 @@ index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..30387bf4f128fdc1d687ee4f6c5a51eb
        : val;
      // Only trim value if the directionality doesn't change to RTL and we're not
      // showing a strikeout https protocol.
-@@ -3365,7 +3397,7 @@ export class UrlbarInput {
+@@ -3365,7 +3401,7 @@ export class UrlbarInput {
      } else {
        where = lazy.BrowserUtils.whereToOpenLink(event, false, false);
      }
@@ -107,7 +118,7 @@ index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..30387bf4f128fdc1d687ee4f6c5a51eb
        if (where == "current") {
          where = "tab";
        } else if (where == "tab") {
-@@ -3380,6 +3412,9 @@ export class UrlbarInput {
+@@ -3380,6 +3416,9 @@ export class UrlbarInput {
      ) {
        where = "current";
      }
@@ -117,7 +128,7 @@ index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..30387bf4f128fdc1d687ee4f6c5a51eb
      return where;
    }
  
-@@ -3921,6 +3956,11 @@ export class UrlbarInput {
+@@ -3921,6 +3960,11 @@ export class UrlbarInput {
    }
  
    _on_click(event) {
@@ -129,7 +140,7 @@ index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..30387bf4f128fdc1d687ee4f6c5a51eb
      if (
        event.target == this.inputField ||
        event.target == this._inputContainer ||
-@@ -3992,7 +4032,7 @@ export class UrlbarInput {
+@@ -3992,7 +4036,7 @@ export class UrlbarInput {
        }
      }
  
@@ -138,7 +149,7 @@ index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..30387bf4f128fdc1d687ee4f6c5a51eb
        this.view.autoOpen({ event });
      } else {
        if (this._untrimOnFocusAfterKeydown) {
-@@ -4032,9 +4072,12 @@ export class UrlbarInput {
+@@ -4032,9 +4076,12 @@ export class UrlbarInput {
    }
  
    _on_mousedown(event) {
@@ -152,7 +163,7 @@ index 02c328f0d0724b0cf95c820fe49a43e94a97b3c2..30387bf4f128fdc1d687ee4f6c5a51eb
  
          if (
            event.target != this.inputField &&
-@@ -4044,8 +4087,8 @@ export class UrlbarInput {
+@@ -4044,8 +4091,8 @@ export class UrlbarInput {
            break;
          }
  

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

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
-index a9276a678f16a67e2a003474203c37cb5c9300ad..20cb1b022f7a94ad553f5e6df48014ee646f93ed 100644
+index dc95772553ef7130c27c1122178ff99028b601f2..81f7dbb40c35168376ca84eebfa9fba8d314cb90 100644
 --- a/browser/themes/linux/browser.css
 +++ b/browser/themes/linux/browser.css
 @@ -42,21 +42,25 @@

src/browser/themes/shared/zen-icons/icons.css

@@ -1179,8 +1179,14 @@ menupopup > menuitem:is([type='checkbox']) .menu-iconic-left {
   list-style-image: url('close.svg') !important;
 }
 
-#zen-media-controls-toolbar:hover {
+#zen-media-focus-button:hover {
-  #zen-media-focus-button {
+  list-style-image: url('screen.svg') !important;
-    list-style-image: url('screen.svg') !important;
+}
-  }
+
+#zen-media-close-button {
+  list-style-image: url('close.svg') !important;
+}
+
+#zen-media-pip-button {
+  list-style-image: url('chrome://global/skin/media/picture-in-picture-open.svg') !important;
 }

src/browser/themes/shared/zen-icons/lin/media-mute.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M13.75,5.143V2.664c0-.395-.437-.634-.77-.421l-5.48,3.508H3.75c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.63"></path><path d="M9,13.21l3.981,2.548c.333,.213,.77-.026,.77-.421v-6.72"></path><line x1="2.75" y1="15.75" x2="16.75" y2="2.25" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M3.75,13h1.853L14.5,4.422v-1.758c0-.457-.249-.877-.65-1.097-.4-.219-.887-.203-1.273,.044l-5.296,3.389H3.75c-1.24,0-2.25,1.009-2.25,2.25v3.5c0,1.241,1.01,2.25,2.25,2.25Z" fill="context-fill" fill-opacity="context-fill-opacity"></path><path d="M8.22,13.601l4.356,2.788c.205,.131,.439,.198,.674,.198,.206,0,.412-.051,.6-.153,.401-.219,.65-.64,.65-1.097V7.545l-6.28,6.056Z" fill="context-fill" fill-opacity="context-fill-opacity"></path><path d="M2.75,16.5c-.196,0-.393-.077-.54-.229-.287-.298-.278-.773,.02-1.061L16.229,1.71c.299-.286,.773-.279,1.061,.02,.287,.298,.278,.773-.02,1.061L3.271,16.29c-.146,.14-.333,.21-.521,.21Z" fill="context-fill" fill-opacity="context-fill-opacity" data-color="color-2"></path></svg>

src/browser/themes/shared/zen-icons/lin/media-next.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M4.05,3.677l8.254,4.57c.595,.33,.595,1.177,0,1.506L4.05,14.323c-.582,.322-1.3-.094-1.3-.753V4.43c0-.66,.718-1.075,1.3-.753Z" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="15.25" y1="15.25" x2="15.25" y2="2.75" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M12.667,7.59L4.413,3.021c-.511-.283-1.116-.275-1.618,.022-.498,.293-.795,.812-.795,1.387V13.57c0,.575,.297,1.094,.795,1.387,.258,.152,.542,.229,.828,.229,.271,0,.542-.069,.791-.207l8.254-4.57c.514-.285,.833-.825,.833-1.41s-.319-1.125-.833-1.41Z" fill="context-fill"></path><path d="M15.25,2c-.414,0-.75,.336-.75,.75V15.25c0,.414,.336,.75,.75,.75s.75-.336,.75-.75V2.75c0-.414-.336-.75-.75-.75Z" fill="context-fill" data-color="color-2"></path></svg>

src/browser/themes/shared/zen-icons/lin/media-previous.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M13.95,14.323L5.697,9.753c-.595-.33-.595-1.177,0-1.506L13.95,3.677c.582-.322,1.3,.094,1.3,.753V13.57c0,.66-.718,1.075-1.3,.753Z" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="2.75" y1="2.75" x2="2.75" y2="15.25" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M15.205,3.042c-.502-.297-1.107-.305-1.618-.022L5.333,7.59c-.514,.285-.833,.825-.833,1.41s.319,1.125,.833,1.41l8.254,4.57c.249,.138,.52,.207,.791,.206,.285,0,.57-.076,.828-.228,.498-.293,.795-.812,.795-1.387V4.43c0-.575-.297-1.094-.795-1.387Z" fill="context-fill"></path><path d="M2.75,2c-.414,0-.75,.336-.75,.75V15.25c0,.414,.336,.75,.75,.75s.75-.336,.75-.75V2.75c0-.414-.336-.75-.75-.75Z" fill="context-fill" data-color="color-2"></path></svg>

src/browser/themes/shared/zen-icons/lin/media-unmute.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5,5.75H2.25c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.75l5.48,3.508c.333,.213,.77-.026,.77-.421V2.664c0-.395-.437-.634-.77-.421l-5.48,3.508Z"></path><path d="M13.914,7.586c.781,.781,.781,2.047,0,2.828" data-color="color-2"></path><path d="M15.859,5.641c1.855,1.855,1.855,4.863,0,6.718" data-color="color-2"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M11.35,1.567c-.4-.219-.889-.203-1.273,.044l-5.295,3.389H2.25c-1.241,0-2.25,1.009-2.25,2.25v3.5c0,1.241,1.009,2.25,2.25,2.25h2.531l5.295,3.389c.205,.131,.439,.198,.675,.198,.206,0,.412-.051,.599-.153,.401-.219,.65-.64,.65-1.097V2.664c0-.457-.249-.877-.65-1.097Z" fill="context-fill" fill-opacity="context-fill-opacity"></path><path d="M14.444,7.056c-.293-.293-.769-.293-1.061,0-.293,.293-.293,.768,0,1.061,.236,.236,.366,.55,.366,.884s-.13,.647-.366,.884c-.293,.292-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c.52-.519,.806-1.209,.806-1.944s-.286-1.425-.806-1.944Z" fill="context-fill" fill-opacity="context-fill-opacity" data-color="color-2"></path><path d="M15.329,5.111c-.293,.293-.293,.768,0,1.061,1.56,1.56,1.56,4.098,0,5.657-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c1.039-1.039,1.611-2.42,1.611-3.889s-.572-2.851-1.611-3.889c-.293-.293-.768-.293-1.061,0Z" fill="context-fill" fill-opacity="context-fill-opacity" data-color="color-2"></path></svg>

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/dom/chrome-webidl/MediaController-webidl.patch

@@ -1,5 +1,5 @@
 diff --git a/dom/chrome-webidl/MediaController.webidl b/dom/chrome-webidl/MediaController.webidl
-index 20f416d1c3b41798e0f90bbac5db40ed2a4ab000..06cb4c847fcfba964eeb93089613e293dc10bd87 100644
+index 20f416d1c3b41798e0f90bbac5db40ed2a4ab000..1c5d893f9166a3aa7bc7802bb0d1207d169033ee 100644
 --- a/dom/chrome-webidl/MediaController.webidl
 +++ b/dom/chrome-webidl/MediaController.webidl
 @@ -20,6 +20,12 @@ enum MediaControlKey {
@@ -15,7 +15,12 @@ index 20f416d1c3b41798e0f90bbac5db40ed2a4ab000..06cb4c847fcfba964eeb93089613e293
  /**
   * MediaController is used to control media playback for a tab, and each tab
   * would only have one media controller, which can be accessed from the
-@@ -36,6 +42,9 @@ interface MediaController : EventTarget {
+@@ -32,10 +38,14 @@ interface MediaController : EventTarget {
+   readonly attribute boolean isAudible;
+   readonly attribute boolean isPlaying;
+   readonly attribute MediaSessionPlaybackState playbackState;
++  readonly attribute boolean isBeingUsedInPIPModeOrFullscreen;
+ 
    [Throws]
    MediaMetadataInit getMetadata();
  

src/dom/media/mediacontrol/MediaController-cpp.patch

@@ -1,5 +1,5 @@
 diff --git a/dom/media/mediacontrol/MediaController.cpp b/dom/media/mediacontrol/MediaController.cpp
-index 3f08d24d4ed56bb72ed513ed602b2c8fa48afe7b..690d9abdb0ab8efc019dd606743b82504834faa0 100644
+index 3f08d24d4ed56bb72ed513ed602b2c8fa48afe7b..98dfe4df48f5daebd2b619f0d4d4eb3ac873a66f 100644
 --- a/dom/media/mediacontrol/MediaController.cpp
 +++ b/dom/media/mediacontrol/MediaController.cpp
 @@ -51,6 +51,25 @@ void MediaController::GetSupportedKeys(
@@ -28,3 +28,11 @@ index 3f08d24d4ed56bb72ed513ed602b2c8fa48afe7b..690d9abdb0ab8efc019dd606743b8250
  void MediaController::GetMetadata(MediaMetadataInit& aMetadata,
                                    ErrorResult& aRv) {
    if (!IsActive() || mShutdown) {
+@@ -412,6 +431,7 @@ void MediaController::SetIsInPictureInPictureMode(
+   ForceToBecomeMainControllerIfNeeded();
+   UpdateDeactivationTimerIfNeeded();
+   mPictureInPictureModeChangedEvent.Notify(mIsInPictureInPictureMode);
++  DispatchAsyncEvent(u"pictureinpicturemodechange"_ns);
+ }
+ 
+ void MediaController::NotifyMediaFullScreenState(uint64_t aBrowsingContextId,

src/toolkit/actors/AudioPlaybackParent-sys-mjs.patch

@@ -1,17 +0,0 @@
-diff --git a/toolkit/actors/AudioPlaybackParent.sys.mjs b/toolkit/actors/AudioPlaybackParent.sys.mjs
-index db682fd90b2bb5330497d2cf2158ff4cac6bbc47..4e6f891275d489418b8ea58a10345a1baa3a554c 100644
---- a/toolkit/actors/AudioPlaybackParent.sys.mjs
-+++ b/toolkit/actors/AudioPlaybackParent.sys.mjs
-@@ -14,10 +14,12 @@ export class AudioPlaybackParent extends JSWindowActorParent {
-     switch (aMessage.name) {
-       case "AudioPlayback:Start":
-         this._hasAudioPlayback = true;
-+        browser.ownerGlobal.gZenMediaController.activateMediaControls(this.browsingContext.mediaController, browser);
-         browser.audioPlaybackStarted();
-         break;
-       case "AudioPlayback:Stop":
-         this._hasAudioPlayback = false;
-+        browser.ownerGlobal.gZenMediaController.updateMuteState();
-         browser.audioPlaybackStopped();
-         break;
-       case "AudioPlayback:ActiveMediaBlockStart":

src/toolkit/components/pictureinpicture/PictureInPicture-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs b/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs
-index 5da0404b2672ba8cce7bcf808bf2373474776654..c3d58941b66c54f9d506698d015e294f8c8a5ceb 100644
+index 5da0404b2672ba8cce7bcf808bf2373474776654..44b62bd752294c2af96dd5b5d08c90ddf3dc513f 100644
 --- a/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs
 +++ b/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs
 @@ -488,13 +488,13 @@ export var PictureInPicture = {
@@ -19,7 +19,15 @@ index 5da0404b2672ba8cce7bcf808bf2373474776654..c3d58941b66c54f9d506698d015e294f
      await this.closeSinglePipWindow({ reason: "Unpip", actorRef: pipActor });
    },
  
-@@ -877,7 +877,7 @@ export var PictureInPicture = {
+@@ -623,6 +623,7 @@ export var PictureInPicture = {
+       pipToggle.hidden = true;
+     }
+ 
++    win.gZenMediaController.updatePipEligibility(browser, !pipToggle.hidden);
+     let browserHasPip = !!this.browserWeakMap.get(browser);
+     if (browserHasPip) {
+       this.setUrlbarPipIconActive(browser.ownerGlobal);
+@@ -877,7 +878,7 @@ export var PictureInPicture = {
      win.setIsMutedState(videoData.isMuted);
  
      // set attribute which shows pip icon in tab

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,37 @@
+diff --git a/toolkit/components/pictureinpicture/content/player.xhtml b/toolkit/components/pictureinpicture/content/player.xhtml
+index 440ce51e8e67e4d3a7bdcb78f38f2fb6684c9848..38912579310314a13d516328ec770db6b589d243 100644
+--- a/toolkit/components/pictureinpicture/content/player.xhtml
++++ b/toolkit/components/pictureinpicture/content/player.xhtml
+@@ -17,6 +17,7 @@
+     <link rel="localization" href="browser/browserSets.ftl"/>
+     <script src="chrome://global/content/pictureinpicture/player.js"></script>
+     <title data-l10n-id="pictureinpicture-player-title"></title>
++    <link rel="localization" href="browser/zen-general.ftl"/>
+   </head>
+ 
+   <body>
+@@ -52,13 +53,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;
++}

src/tools/signing/macos/mach_commands-py.patch

@@ -1,5 +1,5 @@
 diff --git a/tools/signing/macos/mach_commands.py b/tools/signing/macos/mach_commands.py
-index a513ad723805459c194d27b42dac68e9babba468..be74acbfe16a4eb389bc7d0ba32820b82fe2819c 100644
+index a513ad723805459c194d27b42dac68e9babba468..3a08bb0987f9d6cf01c05f8ebb56efa91a5b9d0e 100644
 --- a/tools/signing/macos/mach_commands.py
 +++ b/tools/signing/macos/mach_commands.py
 @@ -37,7 +37,6 @@ from mozbuild.base import MachCommandConditions as conditions
@@ -10,15 +10,18 @@ index a513ad723805459c194d27b42dac68e9babba468..be74acbfe16a4eb389bc7d0ba32820b8
  )
  @CommandArgument(
      "-v",
-@@ -342,6 +341,7 @@ def macos_sign(
+@@ -342,6 +341,10 @@ def macos_sign(
      cs_reset_cmd = ["find", app, "-exec", "codesign", "--remove-signature", "{}", ";"]
      run(command_context, cs_reset_cmd, capture_output=not verbose_arg)
  
-+    run(command_context, ["mv", "./embedded.provisionprofile", os.path.join(app, "Contents")], capture_output=not verbose_arg)
++    originProfile = os.path.join(os.curdir, "embedded.provisionprofile")
++    endProfile = os.path.join(app, "Contents", "embedded.provisionprofile")
++    print(f"ZEN: Moving {originProfile} to {endProfile}")
++    os.rename(originProfile, endProfile)
      if use_rcodesign_arg is True:
          sign_with_rcodesign(
              command_context,
-@@ -567,7 +567,7 @@ def sign_with_rcodesign(
+@@ -567,7 +570,7 @@ def sign_with_rcodesign(
      # input path and its options are specified as standard arguments.
      ctx.log(logging.INFO, "macos-sign", {}, "Signing with rcodesign")
  

surfer.json

@@ -5,8 +5,8 @@
   "binaryName": "zen",
   "version": {
     "product": "firefox",
-    "version": "136.0.1",
+    "version": "136.0.2",
-    "candidate": "136.0.1"
+    "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"
         }