style: adjust padding and border radius in settings window CSS; add test content in XHTML

Fix media control not working for web panels

.github/workflows/build.yml

@@ -516,31 +516,15 @@ jobs:
           commit_user_email: zen-browser-auto@users.noreply.github.com
           repository: ./updates-server
 
-      - name: Build release README
-        run: |
-          echo "# Zen Stable Release" > README.md
-          echo "This is the stable release of Zen Browser." >> README.md
-          echo "## Sha256 checksums" >> README.md
-          echo "```" >> README.md
-          sha256sum ./zen.source.tar.zst/* >> README.md
-          sha256sum ./zen.linux-x86_64.tar.xz/* >> README.md
-          sha256sum ./zen.linux-aarch64.tar.xz/* >> README.md
-          sha256sum ./zen-x86_64.AppImage/* >> README.md
-          sha256sum ./zen-x86_64.AppImage.zsync/* >> README.md
-          sha256sum ./zen-aarch64.AppImage/* >> README.md
-          sha256sum ./zen-aarch64.AppImage.zsync/* >> README.md
-          sha256sum ./linux-aarch64.mar/* >> README.md
-          sha256sum ./.github/workflows/object/windows-x64-signed-x86_64/zen.installer.exe >> README.md
-          sha256sum ./.github/workflows/object/windows-x64-signed-arm64/zen.installer-arm64.exe >> README.md
-          sha256sum ./zen.macos-universal.dmg/* >> README.md
-          echo "```" >> README.md
+      - name: Generate Release Notes
+        run: bash .github/workflows/src/generate_release_notes.sh
 
         # If we are on Twilight, we want to just update the Twilight tag's release
       - name: Update Twilight tag
         if: ${{ inputs.update_branch == 'twilight' }}
         uses: softprops/action-gh-release@v2
         with:
-          body_path: README.md
+          body_path: release_notes.md
           files: |
             ./zen.source.tar.zst/*
             ./zen.linux-x86_64.tar.xz/*
@@ -579,7 +563,7 @@ jobs:
           fail_on_unmatched_files: false
           generate_release_notes: false
           name: 'Release build - ${{ needs.build-data.outputs.version }} (${{ needs.build-data.outputs.build_date }})'
-          body_path: README.md
+          body_path: release_notes.md
           files: |
             ./zen.source.tar.zst/*
             ./zen.linux-x86_64.tar.xz/*

.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

@@ -0,0 +1,113 @@
+#!/usr/bin/env bash
+RELEASE_NOTES_URL="https://raw.githubusercontent.com/zen-browser/www/refs/heads/main/src/release-notes/stable.json"
+
+if [ "$RELEASE_BRANCH" = "release" ]; then
+  RELEASE_TYPE="Stable"
+
+  echo "Fetching release notes from GitHub..."
+  RELEASE_NOTES_JSON=$(curl -s "$RELEASE_NOTES_URL")
+
+  if [ -z "$RELEASE_NOTES_JSON" ]; then
+    echo "Error: Failed to fetch release notes from GitHub"
+    exit 1
+  fi
+
+  LATEST_RELEASE=$(echo "$RELEASE_NOTES_JSON" | jq -r 'last')
+  EXTRA_NOTES=$(echo "$LATEST_RELEASE" | jq -r '.extra // ""')
+else
+  RELEASE_TYPE="Twilight"
+fi
+
+cat << EOF > "release_notes.md"
+# Zen ${RELEASE_TYPE} Release
+EOF
+
+if [ "$RELEASE_BRANCH" = "release" ]; then
+  echo "${EXTRA_NOTES}" >> "release_notes.md"
+
+  if echo "$LATEST_RELEASE" | jq -e 'has("features")' > /dev/null; then
+    cat << EOF >> "release_notes.md"
+
+## New Features
+$(echo "$LATEST_RELEASE" | jq -r '.features[] | "- " + .')
+EOF
+  fi
+
+  if echo "$LATEST_RELEASE" | jq -e 'has("fixes")' > /dev/null; then
+    cat << EOF >> "release_notes.md"
+
+## Fixes
+EOF
+    echo "$LATEST_RELEASE" | jq -r '.fixes[] | if type=="object" then "- " + .description + " ([#" + (.issue|tostring) + "](" + "https://github.com/zen-browser/desktop/issues/" + (.issue|tostring) + "))" else "- " + . end' >> "release_notes.md"
+  fi
+
+  if echo "$LATEST_RELEASE" | jq -e 'has("breakingChanges")' > /dev/null; then
+    cat << EOF >> "release_notes.md"
+
+## Breaking Changes
+EOF
+    echo "$LATEST_RELEASE" | jq -r '.breakingChanges[] | if type=="string" then "- " + . else "- " + .description + " [Learn more](" + .link + ")" end' >> "release_notes.md"
+  fi
+
+  if echo "$LATEST_RELEASE" | jq -e 'has("themeChanges")' > /dev/null; then
+    cat << EOF >> "release_notes.md"
+
+## Theme Changes
+$(echo "$LATEST_RELEASE" | jq -r '.themeChanges[] | "- " + .')
+EOF
+  fi
+fi
+
+cat << EOF >> "release_notes.md"
+
+<details>
+<summary>File Checksums (SHA-256)</summary>
+
+\`\`\`
+EOF
+
+generate_checksum() {
+  local pattern=$1
+  echo "Generating checksum for $pattern"
+  sha256sum $pattern 2> /dev/null | awk '{sub(".*/", "", $2); print $1 "  " $2}' >> "release_notes.md"
+  if [ ${PIPESTATUS[0]} -ne 0 ]; then
+    echo "Warning: No files found matching $pattern, skipping checksum."
+  fi
+}
+
+files=(
+  "./zen.source.tar.zst/*"
+  "./zen.linux-x86_64.tar.xz/*"
+  "./zen.linux-aarch64.tar.xz/*"
+  "./zen-x86_64.AppImage/*"
+  "./zen-x86_64.AppImage.zsync/*"
+  "./zen-aarch64.AppImage/*"
+  "./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"
+  "./zen.win-arm64.zip/*"
+  "./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"
+  "./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.installer-arm64.exe/*"
+  "./zen.macos-universal.dmg/*"
+)
+
+for file in "${files[@]}"; do
+  generate_checksum "$file"
+done
+
+cat << EOF >> "release_notes.md"
+\`\`\`
+</details>
+EOF
+
+echo "Release notes generated: release_notes.md"

README.md

@@ -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:
-  `bash <(curl -s https://updates.zen-browser.app/install.sh)`
+- `Tarball` install:
 
-- `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
 

package.json

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

scripts/update-surfer.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# make sure we are on root
+if [ ! -f "package.json" ]; then
+  echo "Please run this script from the root of the project"
+  exit 1
+fi
+
+npm update @zen-browser/surfer
+npm i @zen-browser/surfer@latest

src/browser/app/profile/zen-browser.js

@@ -186,6 +186,7 @@ pref('zen.sidebar.data', "{\"data\":\n {\"p1\":{\n   \"url\":\"https://www.wikip
 pref('zen.sidebar.enabled', true);
 pref('zen.sidebar.close-on-blur', true);
 pref('zen.sidebar.max-webpanels', 8);
+pref('zen.sidebar.use-google-favicons', true);
 
 // Zen Split View
 pref('zen.splitView.enable-tab-drop', true);
@@ -200,7 +201,6 @@ pref('zen.startup.smooth-scroll-in-tabs', true);
 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

@@ -48,6 +48,7 @@
 
     openWatermark() {
       if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
+        document.documentElement.removeAttribute('zen-before-loaded');
         return;
       }
       for (let elem of document.querySelectorAll('#browser > *, #urlbar')) {
@@ -57,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

@@ -37,6 +37,8 @@ var gZenUIManager = {
 
     window.addEventListener('TabClose', this.onTabClose.bind(this));
     this.tabsWrapper.addEventListener('scroll', this.saveScrollbarState.bind(this));
+
+    gZenMediaController.init();
   },
 
   updateTabsToolbar() {
@@ -63,6 +65,7 @@ var gZenUIManager = {
     tabs.style.removeProperty('flex');
     tabs.style.maxHeight = height + 'px';
     gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
+    gURLBar.updateLayoutBreakout();
   },
 
   get tabsWrapper() {
@@ -258,6 +261,18 @@ var gZenUIManager = {
       this._toastContainer.setAttribute('hidden', 'true');
     }
   },
+
+  get panelUIPosition() {
+    return gZenVerticalTabsManager._hasSetSingleToolbar ? 'bottomleft topleft' : 'bottomright topright';
+  },
+
+  openSettingsWindow() {
+    window.openDialog(
+      'chrome://browser/content/zen-components/windows/zen-settings.xhtml',
+      '_blank',
+      'centerscreen,chrome,dialog=no,resizable=no,titlebar'
+    );
+  },
 };
 
 var gZenVerticalTabsManager = {
@@ -359,7 +374,7 @@ var gZenVerticalTabsManager = {
             marginBottom: isLastTab() ? [] : [transform, '0px'],
           },
           {
-            duration: 0.2,
+            duration: 0.12,
             easing: 'ease-out',
           }
         )
@@ -369,9 +384,16 @@ var gZenVerticalTabsManager = {
           aTab.style.removeProperty('opacity');
         });
       gZenUIManager.motion
-        .animate(aTab.querySelector('.tab-content'), {
-          filter: ['blur(1px)', 'blur(0px)'],
-        })
+        .animate(
+          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-assets.inc.xhtml

@@ -26,6 +26,7 @@
 <link rel="stylesheet" type="text/css" href="chrome://browser/skin/zen-icons/icons.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-branding.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-welcome.css" />
+<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-media-controls.css" />
 </linkset>
 
 # Scripts used all over the browser
@@ -42,6 +43,7 @@
 <script src="chrome://browser/content/zen-components/ZenGradientGenerator.mjs" />
 <script src="chrome://browser/content/zen-components/ZenViewSplitter.mjs"/>
 <script src="chrome://browser/content/zen-components/ZenGlanceManager.mjs" />
+<script src="chrome://browser/content/zen-components/ZenMediaController.mjs" />
 
 # Unimportant scripts
 <script src="chrome://browser/content/zen-components/ZenRices.mjs" />

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

@@ -25,6 +25,7 @@
         content/browser/zen-components/ZenRices.mjs             (zen-components/ZenRices.mjs)
         content/browser/zen-components/ZenEmojies.mjs           (zen-components/ZenEmojies.mjs)
         content/browser/zen-components/ZenWelcome.mjs           (zen-components/ZenWelcome.mjs)
+        content/browser/zen-components/ZenMediaController.mjs   (zen-components/ZenMediaController.mjs)
 
         content/browser/zen-styles/zen-theme.css                (content/zen-styles/zen-theme.css)
         content/browser/zen-styles/zen-buttons.css              (content/zen-styles/zen-buttons.css)
@@ -49,6 +50,9 @@
         content/browser/zen-styles/zen-rices.css                (content/zen-styles/zen-rices.css)
         content/browser/zen-styles/zen-branding.css             (content/zen-styles/zen-branding.css)
         content/browser/zen-styles/zen-welcome.css              (content/zen-styles/zen-welcome.css)
+        content/browser/zen-styles/zen-media-controls.css       (content/zen-styles/zen-media-controls.css)
+
+        content/browser/zen-styles/windows/zen-settings.css     (content/zen-styles/windows/zen-settings.css)
 
         content/browser/zen-styles/zen-panels/bookmarks.css     (content/zen-styles/zen-panels/bookmarks.css)
         content/browser/zen-styles/zen-panels/extensions.css    (content/zen-styles/zen-panels/extensions.css)
@@ -64,6 +68,7 @@
         content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png)
         content/browser/zen-images/layouts/single-toolbar.png   (content/zen-images/layouts/single-toolbar.png)
         content/browser/zen-images/grain-bg.png                 (content/zen-images/grain-bg.png)
+        content/browser/zen-images/note-indicator.svg           (content/zen-images/note-indicator.svg)
 
         # Actors
         content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (zen-components/actors/ZenThemeMarketplaceParent.sys.mjs)
@@ -78,3 +83,6 @@
         # JS Vendor
         content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (content/zen-vendor/tsparticles.confetti.bundle.min.js)
         content/browser/zen-vendor/motion.min.mjs                      (content/zen-vendor/motion.min.mjs)
+
+        # Windows
+        content/browser/zen-components/windows/zen-settings.xhtml (zen-components/windows/zen-settings.xhtml)

src/browser/base/content/zen-glance.inc.xhtml

@@ -1,4 +1,4 @@
 <vbox id="zen-glance-sidebar-container" hidden="true">
-  <toolbarbutton id="zen-glance-sidebar-close" data-l10n-id="zen-general-confrim" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance({ onTabClose: true })"/>
+  <toolbarbutton id="zen-glance-sidebar-close" data-l10n-id="zen-general-confirm" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance({ onTabClose: true })"/>
   <toolbarbutton id="zen-glance-sidebar-open" class="toolbarbutton-1" oncommand="gZenGlanceManager.fullyOpenGlance()"/>
 </vbox>

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

@@ -0,0 +1,100 @@
+<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: currentColor;
+      transform-box: fill-box;
+      transform-origin: center;
+    }
+
+    @keyframes flyUpLeft {
+      from {
+        opacity: 1;
+        transform: translate(0px, 0px) scale(0.5) rotate(0deg);
+      }
+      to {
+        opacity: 0;
+        transform: translate(-9px, -35px) scale(5) rotate(0deg);
+      }
+    }
+    @keyframes flyUpRight {
+      from {
+        opacity: 1;
+        transform: translate(0px, 0px) scale(0.5) rotate(0deg);
+      }
+      to {
+        opacity: 0;
+        transform: translate(9px, -35px) scale(5) rotate(0deg);
+      }
+    }
+    @keyframes flyUpCenter {
+      from {
+        opacity: 1;
+        transform: translate(0px, 0px) scale(0.5) rotate(0deg);
+      }
+      to {
+        opacity: 0;
+        transform: translate(0px, -35px) scale(5) rotate(0deg);
+      }
+    }
+    }*/
+  ]]></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
+        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
+        c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
+        c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
+        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
+        c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
+        c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
+        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
+        c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
+        c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
+        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: flyUpLeft 3s ease-in-out infinite; animation-delay: 1.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
+        c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
+        c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
+        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
+        c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
+        c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
+        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
+        c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
+        c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
+        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>
+</svg>

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

@@ -0,0 +1,51 @@
+<toolbar id="zen-media-controls-toolbar"
+  class="browser-toolbar customization-target zen-sidebar-toolbar"
+  context="toolbar-context-menu"
+  mode="icons"
+  hidden="true">
+  <toolbaritem>
+    <vbox id="zen-media-main-vbox">
+      <vbox>
+        <hbox id="zen-media-info-container" class="show-on-hover">
+          <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-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>
+      </vbox>
+      <hbox id="zen-media-controls-hbox">
+        <toolbarbutton id="zen-media-focus-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaFocus();" />
+        <toolbarbutton id="zen-media-previoustrack-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaPlayPrev();" />
+        <toolbarbutton id="zen-media-playpause-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaToggle();" />
+        <toolbarbutton id="zen-media-nexttrack-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaPlayNext();" />
+        <toolbarbutton id="zen-media-mute-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaMute();" />
+      </hbox>
+    </vbox>
+  </toolbaritem>
+</toolbar>

src/browser/base/content/zen-sidebar-icons.inc.xhtml

@@ -1,3 +1,4 @@
+#include zen-media-player.inc.xhtml
 <toolbar brighttext="true"
   id="zen-sidebar-bottom-buttons"
   fullscreentoolbar="true"

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

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

src/browser/base/content/zen-styles/zen-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-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

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

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

@@ -0,0 +1,284 @@
+#zen-media-controls-toolbar {
+  --progress-height: 4px;
+  --button-spacing: 2px;
+
+  display: flex;
+  justify-content: space-between;
+  min-width: 0;
+  background: transparent;
+  container-type: inline-size;
+
+  .toolbarbutton-1 {
+    border-radius: 5px;
+    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 {
+    margin: 0;
+  }
+
+  image.toolbarbutton-icon {
+    padding: 5px;
+    width: 26px;
+    height: 26px;
+  }
+
+  #zen-media-progress-bar {
+    appearance: none;
+    width: 100%;
+    height: var(--progress-height);
+    margin: 0 8px;
+    border-radius: 2px;
+    background-color: rgba(255, 255, 255, 0.2);
+    cursor: pointer;
+    transition: height 0.15s ease-out;
+
+    &::-moz-range-track {
+      background: var(--zen-colors-border);
+      border-radius: 999px;
+      height: var(--progress-height);
+    }
+
+    &::-moz-range-progress {
+      background: var(--zen-primary-color);
+      border-radius: 999px;
+      height: var(--progress-height);
+    }
+
+    &::-moz-range-thumb {
+      background: var(--zen-primary-color);
+      border: none;
+      width: calc(var(--progress-height) * 2);
+      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 {
+    .show-on-hover {
+      max-height: 50px;
+      padding: 5px;
+      margin-bottom: 0;
+      opacity: 1;
+      transform: translateY(0) !important;
+      pointer-events: auto;
+    }
+  }
+
+  & #zen-media-focus-button::after {
+    content: '';
+    position: absolute;
+    width: 110%;
+    height: 110%;
+    background-repeat: no-repeat;
+    opacity: 1;
+    background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
+    top: -70%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 0;
+    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 {
+    align-self: center;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+    position: relative;
+
+    & image {
+      &:-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) 70%, transparent 30%);
+      }
+    }
+  }
+
+  & > 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 6px;
+    border-radius: var(--border-radius-medium);
+    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%;
+    will-change: transform;
+  }
+
+  .show-on-hover {
+    max-height: 0;
+    opacity: 0;
+    transform: translateY(1rem);
+    padding: 0 6px;
+    pointer-events: none;
+    transition:
+      max-height 0.2s ease,
+      opacity 0.2s ease,
+      transform 0.2s ease,
+      padding 0.2s ease;
+  }
+
+  #zen-media-current-time,
+  #zen-media-duration {
+    margin: 0 0 0 1px;
+    font-size: x-small;
+    opacity: 0.7;
+    font-weight: 500;
+  }
+}
+
+#zen-media-controls-toolbar {
+  display: none;
+  animation: none;
+  transition: none;
+
+  &:not([hidden]) {
+    display: flex;
+    height: 2.5rem;
+    overflow: visible;
+    position: relative;
+    z-index: 2;
+  }
+}
+
+#zen-media-title,
+#zen-media-artist {
+  align-self: start;
+}
+
+#zen-media-artist {
+  opacity: 0.7;
+  font-size: smaller;
+
+  &:empty {
+    display: none;
+  }
+}
+
+#zen-media-title {
+  height: 16px;
+  font-size: math;
+}
+
+#zen-media-main-vbox,
+#zen-media-info-vbox,
+#zen-media-progress-hbox {
+  width: 100%;
+}
+
+#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 {
+    min-height: 16px;
+    margin-left: 0;
+    font-weight: 500;
+    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;
+}
+
+#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 {
+  align-items: flex-end;
+  justify-content: space-between;
+  max-width: 100%;
+  --toolbarbutton-outer-padding: 0;
+}
+
+#zen-media-info-container {
+  padding-right: 0 !important;
+}
+
+#zen-media-controls-toolbar[can-pip] {
+  #zen-media-info-vbox {
+    flex-shrink: 1;
+  }
+
+  #zen-media-pip-button {
+    display: flex;
+  }
+}
+
+:root:not([zen-sidebar-expanded='true']) {
+  #zen-media-controls-toolbar {
+    display: none;
+  }
+}

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

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

src/browser/base/content/zen-styles/zen-single-components.css

@@ -19,12 +19,6 @@
   text-overflow: ellipsis;
 }
 
-@media not (-moz-bool-pref: 'zen.watermark.enabled') {
-  #zen-watermark {
-    display: none;
-  }
-}
-
 #customization-footer #customization-toolbar-visibility-button {
   display: none !important;
 }

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: var(--zen-active-tab-scale);
+    }
+
+    & .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,10 +469,6 @@
     margin-top: 0;
   }
 
-  & #zen-workspaces-button[as-button='true'] {
-    width: calc(100% - 10px) !important;
-  }
-
   & .zen-current-workspace-indicator-icon[no-icon='true'] {
     display: none;
   }
@@ -756,14 +765,6 @@
   }
   & #zen-workspaces-button {
     flex-direction: column;
-    &:not([as-button='true']) {
-      & toolbarbutton {
-        &[active='true']::after {
-          bottom: 50% !important;
-          transform: translateY(50%) !important;
-        }
-      }
-    }
   }
 }
 
@@ -1174,7 +1175,7 @@
     }
 
     & .titlebar-buttonbox-container {
-      margin-left: calc(-1 * var(--zen-toolbox-max-width)) !important;
+      margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
     }
 
     & #zen-appcontent-wrapper {

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

@@ -155,8 +155,8 @@
 
   --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-transparent: light-dark(var(--zen-branding-bg), #161616);
+  --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #171717);
+  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);
 
   --zen-workspace-indicator-height: 45px;
 

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

@@ -17,98 +17,73 @@
     display: none !important;
   }
 
-  &:not([as-button='true']) {
-    --toolbarbutton-hover-background: transparent !important;
-    border-radius: var(--zen-button-border-radius) !important;
-    background: transparent;
-    padding: 2px;
-    appearance: unset !important;
-    height: fit-content;
-    gap: 3px;
+  --toolbarbutton-hover-background: transparent !important;
+  border-radius: var(--zen-button-border-radius) !important;
+  background: transparent;
+  padding: 2px;
+  appearance: unset !important;
+  height: fit-content;
+  gap: 3px;
 
-    & toolbarbutton {
-      margin: auto;
-      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'] {
+  & toolbarbutton {
     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;
+    width: 25px;
+    display: flex;
+    justify-content: center;
+    padding: 0 !important;
+    align-items: center;
+    position: relative;
 
-    :root:not([zen-sidebar-expanded='true']) #navigator-toolbox & {
-      & .zen-workspace-sidebar-name {
-        display: none;
-      }
+    @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-sidebar-icon {
-        margin-inline-end: 0 !important;
+        & .zen-workspace-icon {
+          display: none;
+        }
       }
     }
 
-    &:hover {
-      background: var(--toolbarbutton-hover-background) !important;
+    & .zen-workspace-icon[no-icon='true'] {
+      width: 6px;
+      height: 6px;
+      background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
+      border-radius: 50%;
+    }
+
+    @media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
+      & {
+        filter: grayscale(1);
+        opacity: 0.5;
+        transition:
+          filter 0.2s,
+          opacity 0.2s;
+      }
+
+      &[active='true'],
+      &:hover {
+        filter: grayscale(0);
+        opacity: 1;
+      }
+
+      &:hover {
+        background-color: var(--zen-toolbar-element-bg);
+      }
     }
   }
 }
@@ -133,13 +108,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;
   }

src/browser/base/moz-build.patch

@@ -0,0 +1,10 @@
+diff --git a/browser/base/moz.build b/browser/base/moz.build
+index 636e0841786735a63ddea00e819c0b6f0b8a5d4d..6685d857180944d68bf4f049919f81361084c481 100644
+--- a/browser/base/moz.build
++++ b/browser/base/moz.build
+@@ -87,3 +87,5 @@ if CONFIG["MOZ_WIDGET_TOOLKIT"] in ("windows", "gtk"):
+     DEFINES["MENUBAR_CAN_AUTOHIDE"] = 1
+ 
+ JAR_MANIFESTS += ["jar.mn"]
++
++DIRS += ["zen-components"]

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')) {
-      return;
-    }
+    //if (element.matches(':hover')) {
+    //  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/ZenGlanceManager.mjs

@@ -211,6 +211,11 @@
         return;
       }
 
+      let { permitUnload } = this.#currentBrowser.permitUnload();
+      if (!permitUnload) {
+        return;
+      }
+
       if (onTabClose && hasFocused && !this.#confirmationTimeout) {
         const cancelButton = document.getElementById('zen-glance-sidebar-close');
         cancelButton.setAttribute('waitconfirmation', true);
@@ -300,7 +305,6 @@
           }
 
           // reset everything
-          const prevOverlay = this.overlay;
           this.browserWrapper = null;
           this.overlay = null;
           this.contentWrapper = null;
@@ -312,7 +316,7 @@
             gBrowser.selectedTab = this.#currentParentTab;
           }
           this._ignoreClose = true;
-          gBrowser.removeTab(this.lastCurrentTab, { animate: true });
+          gBrowser.removeTab(this.lastCurrentTab, { animate: true, skipPermitUnload: true });
           gBrowser.tabContainer._invalidateCachedTabs();
 
           this.#currentParentTab.removeAttribute('glance-id');

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

@@ -0,0 +1,480 @@
+class ZenMediaController {
+  _currentMediaController = null;
+  _currentBrowser = null;
+  _mediaUpdateInterval = null;
+
+  mediaTitle = null;
+  mediaArtist = null;
+  mediaControlBar = null;
+  mediaProgressBar = null;
+  mediaCurrentTime = null;
+  mediaDuration = null;
+  mediaFocusButton = null;
+  mediaProgressBarContainer = null;
+
+  supportedKeys = ['playpause', 'previoustrack', 'nexttrack'];
+
+  pipEligibilityMap = new Map();
+  mediaControllersMap = new Map();
+
+  _tabTimeout = null;
+  _controllerSwitchTimeout = null;
+
+  init() {
+    this.mediaTitle = document.querySelector('#zen-media-title');
+    this.mediaArtist = document.querySelector('#zen-media-artist');
+    this.mediaControlBar = document.querySelector('#zen-media-controls-toolbar');
+    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) => {
+      const linkedBrowser = event.target.linkedBrowser;
+      this.switchController();
+
+      if (this._currentBrowser) {
+        if (linkedBrowser.browserId === this._currentBrowser.browserId) {
+          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);
+        }
+      }
+    });
+
+    window.addEventListener('TabClose', (event) => {
+      const linkedBrowser = event.target.linkedBrowser;
+      if (!linkedBrowser?.browsingContext?.mediaController) return;
+      this.deinitMediaController(
+        linkedBrowser.browsingContext.mediaController,
+        true,
+        linkedBrowser.browserId === this._currentBrowser?.browserId,
+        true
+      );
+    });
+
+    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());
+  }
+
+  async deinitMediaController(mediaController, shouldForget = true, shouldOverride = true, shouldHide = true) {
+    if (!mediaController) return;
+
+    const retrievedMediaController = this.mediaControllersMap.get(mediaController.id);
+
+    if (shouldForget) {
+      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);
+
+      this.mediaControllersMap.delete(mediaController.id);
+      this.pipEligibilityMap.delete(retrievedMediaController?.browser?.browserId);
+    }
+
+    if (shouldOverride) {
+      this._currentMediaController = null;
+      this._currentBrowser = null;
+
+      if (this._mediaUpdateInterval) {
+        clearInterval(this._mediaUpdateInterval);
+        this._mediaUpdateInterval = null;
+      }
+
+      if (shouldHide) await this.hideMediaControls();
+      this.mediaControlBar.removeAttribute('muted');
+      this.mediaControlBar.classList.remove('playing');
+    }
+  }
+
+  hideMediaControls() {
+    if (this.mediaControlBar.hasAttribute('hidden')) return;
+
+    return gZenUIManager.motion
+      .animate(
+        this.mediaControlBar,
+        {
+          opacity: [1, 0],
+          y: [0, 10],
+        },
+        {
+          duration: 0.1,
+        }
+      )
+      .then(() => {
+        this.mediaControlBar.setAttribute('hidden', 'true');
+        gZenUIManager.updateTabsToolbar();
+      });
+  }
+
+  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.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');
+    }
+
+    const iconURL = this._currentBrowser.mIconURL || `page-icon:${this._currentBrowser.currentURI.spec}`;
+    this.mediaFocusButton.style.listStyleImage = `url(${iconURL})`;
+
+    this.mediaTitle.textContent = metadata.title || '';
+    this.mediaArtist.textContent = metadata.artist || '';
+
+    gZenUIManager.updateTabsToolbar();
+
+    this._currentPosition = positionState.position;
+    this._currentDuration = positionState.duration;
+    this.updateMediaPosition();
+
+    for (const key of this.supportedKeys) {
+      const button = this.mediaControlBar.querySelector(`#zen-media-${key}-button`);
+      button.disabled = !this._currentMediaController.supportedKeys.includes(key);
+    }
+  }
+
+  activateMediaControls(mediaController, browser) {
+    this.updateMuteState();
+    this.switchController();
+
+    if (!mediaController.isActive || this._currentBrowser?.browserId === browser.browserId) return;
+
+    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(),
+    });
+
+    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) {
+    this.pipEligibilityMap.set(browser.browserId, isEligible);
+  }
+
+  _onDeactivated(event) {
+    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) {
+    if (event.target.id !== this._currentMediaController?.id) return;
+    for (const key of this.supportedKeys) {
+      const button = this.mediaControlBar.querySelector(`#zen-media-${key}-button`);
+      button.disabled = !event.target.supportedKeys.includes(key);
+    }
+  }
+
+  _onPositionstateChange(event) {
+    if (event.target.id !== this._currentMediaController?.id) {
+      const mediaController = this.mediaControllersMap.get(event.target.id);
+      this.mediaControllersMap.set(event.target.id, {
+        ...mediaController,
+        position: event.position,
+        duration: event.duration,
+        lastUpdated: Date.now(),
+      });
+    }
+
+    this._currentPosition = event.position;
+    this._currentDuration = event.duration;
+    this.updateMediaPosition();
+  }
+
+  switchController(force = false) {
+    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.mediaControlBar.setAttribute('media-position-hidden', 'true');
+    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;
+
+    this._mediaUpdateInterval = setInterval(() => {
+      if (this._currentMediaController?.isPlaying) {
+        this._currentPosition += 1;
+        if (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);
+  }
+
+  formatSecondsToTime(seconds) {
+    if (!seconds || isNaN(seconds)) return '0:00';
+
+    const totalSeconds = Math.max(0, Math.ceil(seconds));
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60).toString();
+    const secs = (totalSeconds % 60).toString();
+
+    if (hours > 0) {
+      return `${hours}:${minutes.padStart(2, '0')}:${secs.padStart(2, '0')}`;
+    }
+
+    return `${minutes}:${secs.padStart(2, '0')}`;
+  }
+
+  _onMetadataChange(event) {
+    if (event.target.id !== this._currentMediaController?.id) return;
+    this.updatePipButton();
+
+    const metadata = event.target.getMetadata();
+    this.mediaTitle.textContent = metadata.title || '';
+    this.mediaArtist.textContent = metadata.artist || '';
+  }
+
+  _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() {
+    if (this._currentMediaController?.supportedKeys.includes('previoustrack')) {
+      this._currentMediaController.prevTrack();
+    }
+  }
+
+  onMediaPlayNext() {
+    if (this._currentMediaController?.supportedKeys.includes('nexttrack')) {
+      this._currentMediaController.nextTrack();
+    }
+  }
+
+  onMediaSeekDrag(event) {
+    this._currentMediaController?.pause();
+    const newTime = (event.target.value / 100) * this._currentDuration;
+    this.mediaCurrentTime.textContent = this.formatSecondsToTime(newTime);
+  }
+
+  onMediaSeekComplete(event) {
+    const newPosition = (event.target.value / 100) * this._currentDuration;
+    if (this._currentMediaController?.supportedKeys.includes('seekto')) {
+      this._currentMediaController.seekTo(newPosition);
+      this._currentMediaController.play();
+    }
+  }
+
+  onMediaFocus() {
+    this._currentMediaController?.focus();
+  }
+
+  onMediaMute() {
+    if (!this.mediaControlBar.hasAttribute('muted')) {
+      this._currentBrowser.mute();
+      this.mediaControlBar.setAttribute('muted', '');
+    } else {
+      this._currentBrowser.unmute();
+      this.mediaControlBar.removeAttribute('muted');
+    }
+  }
+
+  onMediaToggle() {
+    if (this.mediaControlBar.classList.contains('playing')) {
+      this._currentMediaController?.pause();
+    } else {
+      this._currentMediaController?.play();
+    }
+  }
+
+  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) {
+      this.mediaControlBar.setAttribute('muted', '');
+    } else {
+      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/ZenSidebarManager.mjs

@@ -27,7 +27,6 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
     this.onlySafeWidthAndHeight();
 
     this.initProgressListener();
-    this.update();
     this.close(); // avoid caching
     this.tabBox.prepend(this.sidebarWrapper);
     this.listenForPrefChanges();
@@ -557,16 +556,18 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
   _getWebPanelIcon(url, element) {
     let { preferredURI } = Services.uriFixup.getFixupURIInfo(url);
     element.setAttribute('image', `page-icon:${preferredURI.spec}`);
-    fetch(`https://s2.googleusercontent.com/s2/favicons?domain_url=${preferredURI.spec}`).then(async (response) => {
-      if (response.ok) {
-        let blob = await response.blob();
-        let reader = new FileReader();
-        reader.onload = function () {
-          element.setAttribute('image', reader.result);
-        };
-        reader.readAsDataURL(blob);
-      }
-    });
+    if (Services.prefs.getBoolPref('zen.sidebar.use-google-favicons')) {
+      fetch(`https://s2.googleusercontent.com/s2/favicons?domain_url=${preferredURI.spec}`).then(async (response) => {
+        if (response.ok) {
+          let blob = await response.blob();
+          let reader = new FileReader();
+          reader.onload = function () {
+            element.setAttribute('image', reader.result);
+          };
+          reader.readAsDataURL(blob);
+        }
+      });
+    }
   }
 
   _getBrowserById(id) {

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);
+    }
   }
 }
 
@@ -231,6 +235,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       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;
@@ -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/ZenWorkspaces.mjs

@@ -57,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',
@@ -139,12 +132,15 @@ 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;
     }
   }
 
   _initializeEmptyTab() {
+    if (Services.prefs.getBoolPref('zen.workspaces.disable_empty_state_for_testing', false)) {
+      return;
+    }
     this._emptyTab = gBrowser.addTrustedTab('about:blank', { inBackground: true, userContextId: 0, _forZenEmptyTab: true });
   }
 
@@ -603,14 +599,24 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       } catch (e) {
         console.error('ZenWorkspaces: Error initializing theme picker', e);
       }
-      this._selectStartPage();
+      await this._selectStartPage();
       this._fixTabPositions();
       this._resolveInitialized();
       this._clearAnyZombieTabs(); // Dont call with await
     }
   }
 
-  _selectStartPage() {
+  async _selectStartPage() {
+    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;
     if (currentTab.pinned) {
@@ -627,8 +633,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       if (
         (currentTab.isEmpty &&
           (currentTab.getAttribute('image') === gPageIcons[currentTabURL] || !currentTab.hasAttribute('image'))) ||
-        currentTab.hasAttribute('zen-empty-tab') ||
-        (currentTab._possibleEmptyTab && currentTab.isEmpty)
+        currentTab._possiblyEmpty
       ) {
         this.selectEmptyTab();
         this._removedByStartupPage = true;
@@ -641,6 +646,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();
@@ -1303,82 +1316,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) {
-        let workspaceButton = browser.document.createXULElement('toolbarbutton');
-        workspaceButton.className = 'subviewbutton';
-        workspaceButton.setAttribute('tooltiptext', workspace.name);
-        workspaceButton.setAttribute('zen-workspace-id', workspace.uuid);
+    for (let workspace of workspaces.workspaces) {
+      let workspaceButton = browser.document.createXULElement('toolbarbutton');
+      workspaceButton.className = 'subviewbutton';
+      workspaceButton.setAttribute('tooltiptext', workspace.name);
+      workspaceButton.setAttribute('zen-workspace-id', workspace.uuid);
 
-        if (this.isWorkspaceActive(workspace)) {
-          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);
+      if (this.isWorkspaceActive(workspace)) {
+        workspaceButton.setAttribute('active', 'true');
       } else {
-        button.removeAttribute('dont-show');
+        workspaceButton.removeAttribute('active');
+      }
+      if (workspace.default) {
+        workspaceButton.setAttribute('default', 'true');
+      } else {
+        workspaceButton.removeAttribute('default');
       }
 
-      this._workspaceButtonContextMenuListener = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        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');
+      workspaceButton.addEventListener('click', async (event) => {
+        if (event.button !== 0) {
+          return;
         }
+        await this.changeWorkspace(workspace);
+      });
 
-        wrapper.appendChild(icon);
-        wrapper.appendChild(name);
-
-        button.appendChild(wrapper);
+      let icon = browser.document.createXULElement('div');
+      icon.className = 'zen-workspace-icon';
+      if (this.workspaceHasIcon(workspace)) {
+        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() {
@@ -2360,9 +2346,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   async switchIfNeeded(browser, i) {
     const tab = gBrowser.getTabForBrowser(browser);
-    const workspaceId = tab.getAttribute('zen-workspace-id');
-    if (!tab.hasAttribute('zen-essential') && workspaceId !== this.activeWorkspace) {
-      await this.changeWorkspace({ uuid: workspaceId });
+    await this.switchTabIfNeeded(tab);
+  }
+
+  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;
   }

src/browser/base/zen-components/moz.build

@@ -0,0 +1,11 @@
+
+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/base/zen-components/windows/zen-settings.xhtml

@@ -0,0 +1,45 @@
+<?xml version="1.0"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<html xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      id="zenSettingsWindow"
+      style="min-width: 35em; max-width: 35em; min-height: 40em;">
+  <head>
+    <linkset>
+      <html:link
+        rel="stylesheet"
+        href="chrome://browser/content/zen-styles/zen-theme.css"
+      />
+      <html:link
+        rel="stylesheet"
+        href="chrome://browser/content/zen-styles/windows/zen-settings.css"
+      />
+
+      <html:link rel="localization" href="browser/preferences/preferences.ftl" />
+      <html:link rel="localization" href="browser/preferences/zen-preferences.ftl" />
+    </linkset>
+
+    <script src="chrome://browser/content/zenThemeModifier.js"></script>
+  </head>
+
+  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+    <vbox id="main-content">
+      <vbox class="section">
+        <html:h2 data-l10n-id="pane-general-title"/>
+        <div class="section-content">
+          test
+        </div>
+      </vbox>
+      <vbox class="section">
+        <html:h2 data-l10n-id="pane-general-title"/>
+        <div class="section-content">
+          test
+        </div>
+      </vbox>
+    </vbox>
+  </html:body>
+</html>

src/browser/components/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 @@
-             <html:span data-l10n-id="unified-extensions-header-title"/>
-           </html:h1>
-         </box>
--
-+        <html:p id="unified-extensions-description" data-l10n-id="unified-extensions-description" class="panel-description"/>
-+#if 0
-         <toolbarseparator />
--
-+#endif
-         <vbox class="panel-subview-body" context="unified-extensions-context-menu">
-           <html:div id="unified-extensions-messages-container">
-             <!-- messages will be inserted here -->
+@@ -132,7 +132,7 @@
+   <panel id="appMenu-notification-popup"
+          class="popup-notification-panel panel-no-padding"
+          type="arrow"
+-         position="after_start"
++         position="after_end"
+          flip="slide"
+          orient="vertical"
+          noautofocus="true"

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) {
--        CustomizableUI.addPanelCloseListeners(tempPanel);
-         tempPanel.addEventListener("popuphidden", panelRemover);
-+        CustomizableUI.addPanelCloseListeners(tempPanel);
-       } else {
-         panelRemover();
-       }
+-    this.notificationPanel.openPopup(anchor, "bottomright topright");
++    this.notificationPanel.openPopup(anchor, gZenUIManager.panelUIPosition);
+   },
+ 
+   _clearNotificationPanel() {

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',

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

@@ -20,9 +20,6 @@
       <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"/>

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..a13d501f2f0f190b9dc8fe0ce4f1d7af66b0495e 100644
+index fa96568d366fd3608f9bd583fa793150bd815c8b..1c940a3b162919256ca73fa867c5c261a3395e25 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -94,7 +94,7 @@
@@ -11,15 +11,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
          }
          return true;
        };
-@@ -135,6 +135,7 @@
-       this.previewPanel = null;
- 
-       this.allTabs[0].label = this.emptyTabTitle;
-+      this.allTabs[0]._possibleEmptyTab = true;
- 
-       // Hide the secondary text for locales where it is unsupported due to size constraints.
-       const language = Services.locale.appLocaleAsBCP47;
-@@ -339,7 +340,7 @@
+@@ -339,7 +339,7 @@
        // and we're not hitting the scroll buttons.
        if (
          event.button != 0 ||
@@ -28,7 +20,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
          event.composedTarget.localName == "toolbarbutton"
        ) {
          return;
-@@ -388,6 +389,7 @@
+@@ -388,6 +388,7 @@
              // Reset the "ignored click" flag
              target._ignoredCloseButtonClicks = false;
            }
@@ -36,7 +28,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
          }
  
          /* Protects from close-tab-button errant doubleclick:
-@@ -683,7 +685,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
@@ -45,7 +37,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
          let tabsPerRow = 0;
          let position = 0;
          for (let pinnedTab of pinnedTabs) {
-@@ -883,6 +885,10 @@
+@@ -883,6 +884,10 @@
        }
  
        let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
@@ -56,7 +48,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        if (
          (effects == "move" || effects == "copy") &&
          this == draggedTab.container &&
-@@ -996,6 +1002,18 @@
+@@ -996,6 +1001,18 @@
  
        this._tabDropIndicator.hidden = true;
        event.stopPropagation();
@@ -75,7 +67,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        if (draggedTab && dropEffect == "copy") {
          // copy the dropped tab (wherever it's from)
          let newIndex = this._getDropIndex(event);
-@@ -1034,10 +1052,11 @@
+@@ -1034,10 +1051,11 @@
            }
          } else {
            let pinned = draggedTab.pinned;
@@ -91,7 +83,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
            );
            let size = this.verticalMode ? "height" : "width";
            let screenAxis = this.verticalMode ? "screenY" : "screenX";
-@@ -1114,7 +1133,7 @@
+@@ -1114,7 +1132,7 @@
                let postTransitionCleanup = () => {
                  tab.removeAttribute("tabdrop-samewindow");
  
@@ -100,7 +92,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
                  if (dropIndex !== false) {
                    gBrowser.moveTabTo(tab, dropIndex);
                    if (!directionForward) {
-@@ -1122,7 +1141,7 @@
+@@ -1122,7 +1140,7 @@
                    }
                  }
                };
@@ -109,7 +101,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
                  postTransitionCleanup();
                } else {
                  let onTransitionEnd = transitionendEvent => {
-@@ -1249,7 +1268,7 @@
+@@ -1249,7 +1267,7 @@
                return;
              }
            }
@@ -118,7 +110,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
            gBrowser.loadTabs(urls, {
              inBackground,
              replace,
-@@ -1279,13 +1298,23 @@
+@@ -1279,13 +1297,23 @@
          return;
        }
  
@@ -144,7 +136,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        ) {
          delete draggedTab._dragData;
          return;
-@@ -1517,7 +1546,7 @@
+@@ -1517,7 +1545,7 @@
      }
  
      get newTabButton() {
@@ -153,7 +145,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
      }
  
      get verticalMode() {
-@@ -1537,28 +1566,40 @@
+@@ -1537,28 +1565,40 @@
        if (this.#allTabs) {
          return this.#allTabs;
        }
@@ -202,7 +194,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        return children.filter(node => node.tagName == "tab-group");
      }
  
-@@ -1579,7 +1620,7 @@
+@@ -1579,7 +1619,7 @@
       */
      get visibleTabs() {
        if (!this.#visibleTabs) {
@@ -211,7 +203,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        }
        return this.#visibleTabs;
      }
-@@ -1613,10 +1654,8 @@
+@@ -1613,10 +1653,8 @@
          return this.#focusableItems;
        }
  
@@ -224,7 +216,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
  
        let focusableItems = [];
        for (let child of children) {
-@@ -1632,6 +1671,7 @@
+@@ -1632,6 +1670,7 @@
        }
  
        this.#focusableItems = [
@@ -232,7 +224,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
          ...verticalPinnedTabsContainer.children,
          ...focusableItems,
        ];
-@@ -1642,6 +1682,7 @@
+@@ -1642,6 +1681,7 @@
      _invalidateCachedTabs() {
        this.#allTabs = null;
        this._invalidateCachedVisibleTabs();
@@ -240,7 +232,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
      }
  
      _invalidateCachedVisibleTabs() {
-@@ -1656,8 +1697,8 @@
+@@ -1656,8 +1696,8 @@
      #isContainerVerticalPinnedExpanded(tab) {
        return (
          this.verticalMode &&
@@ -251,7 +243,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        );
      }
  
-@@ -1672,7 +1713,7 @@
+@@ -1672,7 +1712,7 @@
  
        if (node == null) {
          // We have a container for non-tab elements at the end of the scrollbox.
@@ -260,7 +252,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        }
  
        node.before(tab);
-@@ -1772,7 +1813,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.
@@ -269,7 +261,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
            const newTab2 = this.newTabButton;
            const newTabVertical = document.getElementById(
              "vertical-tabs-newtab-button"
-@@ -1855,7 +1896,7 @@
+@@ -1855,7 +1895,7 @@
            let rect = ele => {
              return window.windowUtils.getBoundsWithoutFlushing(ele);
            };
@@ -278,7 +270,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
            if (tab && rect(tab).width <= this._tabClipWidth) {
              this.setAttribute("closebuttons", "activetab");
            } else {
-@@ -1867,10 +1908,12 @@
+@@ -1867,10 +1907,12 @@
  
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -291,7 +283,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -1882,7 +1925,7 @@
+@@ -1882,7 +1924,7 @@
          return;
        }
  
@@ -300,7 +292,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        if (!tabs.length) {
          return;
        }
-@@ -1918,7 +1961,7 @@
+@@ -1918,7 +1960,7 @@
          if (isEndTab && !this._hasTabTempMaxWidth) {
            return;
          }
@@ -309,7 +301,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
          // 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 +1976,7 @@
+@@ -1933,7 +1975,7 @@
          let tabsToReset = [];
          for (let i = numPinned; i < tabs.length; i++) {
            let tab = tabs[i];
@@ -318,7 +310,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
            if (!isEndTab) {
              // keep tabs the same width
              tab.style.transition = "none";
-@@ -1999,16 +2042,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.
@@ -341,7 +333,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
          }
        }
  
-@@ -2016,9 +2058,7 @@
+@@ -2016,9 +2057,7 @@
      }
  
      _resetVerticalPinnedTabs() {
@@ -352,7 +344,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
  
        if (!verticalTabsContainer.children.length) {
          return;
-@@ -2031,8 +2071,8 @@
+@@ -2031,8 +2070,8 @@
      }
  
      _positionPinnedTabs() {
@@ -363,7 +355,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        let absPositionHorizontalTabs =
          this.overflowing && tabs.length > numPinned && numPinned > 0;
  
-@@ -2041,7 +2081,7 @@
+@@ -2041,7 +2080,7 @@
  
        if (this.verticalMode) {
          this._updateVerticalPinnedTabs();
@@ -372,7 +364,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
          let layoutData = this._pinnedTabsLayoutCache;
          let uiDensity = document.documentElement.getAttribute("uidensity");
          if (!layoutData || layoutData.uiDensity != uiDensity) {
-@@ -2113,7 +2153,7 @@
+@@ -2113,7 +2152,7 @@
          return;
        }
  
@@ -381,7 +373,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2121,7 +2161,7 @@
+@@ -2121,7 +2160,7 @@
        dragData.animLastScreenX = screenX;
  
        let { width: tabWidth, height: tabHeight } =
@@ -390,7 +382,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        let shiftSizeX = tabWidth * movingTabs.length;
        let shiftSizeY = tabHeight;
        dragData.tabWidth = tabWidth;
-@@ -2296,10 +2336,11 @@
+@@ -2296,10 +2335,11 @@
        }
  
        let pinned = draggedTab.pinned;
@@ -406,7 +398,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        );
  
        if (this.#rtlMode) {
-@@ -2348,7 +2389,11 @@
+@@ -2348,7 +2388,11 @@
        translate = Math.min(Math.max(translate, firstBound), lastBound);
  
        for (let tab of movingTabs) {
@@ -419,7 +411,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        }
  
        dragData.translatePos = translate;
-@@ -2484,12 +2529,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) {
@@ -437,7 +429,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
          if (tab.group?.tabs[0] == tab) {
            tab.group.style.setProperty(
              "--tabgroup-dragover-transform",
-@@ -2541,8 +2590,9 @@
+@@ -2541,8 +2589,9 @@
        );
      }
  
@@ -449,7 +441,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
          return;
        }
  
-@@ -2553,6 +2603,7 @@
+@@ -2553,6 +2602,7 @@
          tab.style.transform = "";
          if (tab.group) {
            tab.group.style.removeProperty("--tabgroup-dragover-transform");
@@ -457,7 +449,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
          }
          tab.removeAttribute("dragover-createGroup");
        }
-@@ -2604,7 +2655,7 @@
+@@ -2604,7 +2654,7 @@
            movingTab._moveTogetherSelectedTabsData.newIndex = movingTabNewIndex;
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -466,7 +458,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -2707,9 +2758,9 @@
+@@ -2707,9 +2757,9 @@
        function newIndex(aTab, index) {
          // Don't allow mixing pinned and unpinned tabs.
          if (aTab.pinned) {
@@ -478,7 +470,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..a13d501f2f0f190b9dc8fe0ce4f1d7af
        }
      }
  
-@@ -2793,7 +2844,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

@@ -1150,3 +1150,43 @@ menupopup > menuitem:is([type='checkbox']) .menu-iconic-left {
 #sidebarRevampSeparator {
   display: none !important;
 }
+
+#zen-media-playpause-button {
+  list-style-image: url('media-play.svg') !important;
+}
+
+#zen-media-controls-toolbar.playing #zen-media-playpause-button {
+  list-style-image: url('media-pause.svg') !important;
+}
+
+#zen-media-nexttrack-button {
+  list-style-image: url('media-next.svg') !important;
+}
+
+#zen-media-previoustrack-button {
+  list-style-image: url('media-previous.svg') !important;
+}
+
+#zen-media-controls-toolbar[muted] #zen-media-mute-button {
+  list-style-image: url('media-mute.svg') !important;
+}
+
+#zen-media-mute-button {
+  list-style-image: url('media-unmute.svg') !important;
+}
+
+#zen-media-close-button {
+  list-style-image: url('close.svg') !important;
+}
+
+#zen-media-focus-button:hover {
+  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/jar.inc.mn

@@ -66,9 +66,11 @@
   skin/classic/browser/zen-icons/manage.svg                      (../shared/zen-icons/lin/manage.svg) 
   skin/classic/browser/zen-icons/media-loop.svg                      (../shared/zen-icons/lin/media-loop.svg) 
   skin/classic/browser/zen-icons/media-mute.svg                      (../shared/zen-icons/lin/media-mute.svg) 
+  skin/classic/browser/zen-icons/media-next.svg                      (../shared/zen-icons/lin/media-next.svg) 
   skin/classic/browser/zen-icons/media-pause.svg                      (../shared/zen-icons/lin/media-pause.svg) 
   skin/classic/browser/zen-icons/media-pip.svg                      (../shared/zen-icons/lin/media-pip.svg) 
   skin/classic/browser/zen-icons/media-play.svg                      (../shared/zen-icons/lin/media-play.svg) 
+  skin/classic/browser/zen-icons/media-previous.svg                      (../shared/zen-icons/lin/media-previous.svg) 
   skin/classic/browser/zen-icons/media-speed.svg                      (../shared/zen-icons/lin/media-speed.svg) 
   skin/classic/browser/zen-icons/media-unmute.svg                      (../shared/zen-icons/lin/media-unmute.svg) 
   skin/classic/browser/zen-icons/menu-bar.svg                      (../shared/zen-icons/lin/menu-bar.svg) 
@@ -198,9 +200,11 @@
   skin/classic/browser/zen-icons/manage.svg                      (../shared/zen-icons/lin/manage.svg) 
   skin/classic/browser/zen-icons/media-loop.svg                      (../shared/zen-icons/lin/media-loop.svg) 
   skin/classic/browser/zen-icons/media-mute.svg                      (../shared/zen-icons/lin/media-mute.svg) 
+  skin/classic/browser/zen-icons/media-next.svg                      (../shared/zen-icons/lin/media-next.svg) 
   skin/classic/browser/zen-icons/media-pause.svg                      (../shared/zen-icons/lin/media-pause.svg) 
   skin/classic/browser/zen-icons/media-pip.svg                      (../shared/zen-icons/lin/media-pip.svg) 
   skin/classic/browser/zen-icons/media-play.svg                      (../shared/zen-icons/lin/media-play.svg) 
+  skin/classic/browser/zen-icons/media-previous.svg                      (../shared/zen-icons/lin/media-previous.svg) 
   skin/classic/browser/zen-icons/media-speed.svg                      (../shared/zen-icons/lin/media-speed.svg) 
   skin/classic/browser/zen-icons/media-unmute.svg                      (../shared/zen-icons/lin/media-unmute.svg) 
   skin/classic/browser/zen-icons/menu-bar.svg                      (../shared/zen-icons/lin/menu-bar.svg) 
@@ -330,9 +334,11 @@
   skin/classic/browser/zen-icons/manage.svg                      (../shared/zen-icons/lin/manage.svg) 
   skin/classic/browser/zen-icons/media-loop.svg                      (../shared/zen-icons/lin/media-loop.svg) 
   skin/classic/browser/zen-icons/media-mute.svg                      (../shared/zen-icons/lin/media-mute.svg) 
+  skin/classic/browser/zen-icons/media-next.svg                      (../shared/zen-icons/lin/media-next.svg) 
   skin/classic/browser/zen-icons/media-pause.svg                      (../shared/zen-icons/lin/media-pause.svg) 
   skin/classic/browser/zen-icons/media-pip.svg                      (../shared/zen-icons/lin/media-pip.svg) 
   skin/classic/browser/zen-icons/media-play.svg                      (../shared/zen-icons/lin/media-play.svg) 
+  skin/classic/browser/zen-icons/media-previous.svg                      (../shared/zen-icons/lin/media-previous.svg) 
   skin/classic/browser/zen-icons/media-speed.svg                      (../shared/zen-icons/lin/media-speed.svg) 
   skin/classic/browser/zen-icons/media-unmute.svg                      (../shared/zen-icons/lin/media-unmute.svg) 
   skin/classic/browser/zen-icons/menu-bar.svg                      (../shared/zen-icons/lin/menu-bar.svg) 

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

@@ -0,0 +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="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-pause.svg

@@ -1 +1,4 @@
-<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"><rect x="2.75" y="2.75" width="3.5" height="12.5" rx="1" ry="1"></rect><rect x="11.75" y="2.75" width="3.5" height="12.5" rx="1" ry="1" data-color="color-2"></rect></g></svg>
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.33333 2.22217H4.66667C3.59278 2.22217 2.72222 3.09273 2.72222 4.16661V15.8333C2.72222 16.9072 3.59278 17.7777 4.66667 17.7777H6.33333C7.40722 17.7777 8.27778 16.9072 8.27778 15.8333V4.16661C8.27778 3.09273 7.40722 2.22217 6.33333 2.22217Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+<path d="M16.3333 2.22217H14.6667C13.5928 2.22217 12.7222 3.09273 12.7222 4.16661V15.8333C12.7222 16.9072 13.5928 17.7777 14.6667 17.7777H16.3333C17.4072 17.7777 18.2778 16.9072 18.2778 15.8333V4.16661C18.2778 3.09273 17.4072 2.22217 16.3333 2.22217Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>

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

@@ -1 +1,3 @@
-<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="M11.652,8.568l-3.651-2.129c-.333-.194-.752,.046-.752,.432v4.259c0,.386,.419,.626,.752,.432l3.651-2.129c.331-.193,.331-.671,0-.864Z" data-color="color-2"></path><path d="M4.987,2.961c.778-.518,1.662-.89,2.612-1.075"></path><path d="M1.879,7.631c.185-.968,.562-1.867,1.091-2.657"></path><path d="M4.987,15.039c.778,.518,1.662,.89,2.612,1.075"></path><path d="M1.879,10.369c.185,.968,.562,1.867,1.091,2.657"></path><path d="M10.435,1.892c3.317,.666,5.815,3.595,5.815,7.108s-2.499,6.443-5.817,7.108"></path></g></svg>
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2778 8.30893L6.73111 2.46893C6.11667 2.12893 5.39111 2.13893 4.78778 2.49448C4.19 2.84671 3.83334 3.46893 3.83334 4.16004V15.84C3.83334 16.5312 4.19 17.1534 4.78778 17.5056C5.09778 17.6878 5.43889 17.78 5.78222 17.78C6.10778 17.78 6.43334 17.6967 6.73111 17.5323L17.2767 11.6923C17.8944 11.3512 18.2778 10.7023 18.2778 10.0012C18.2778 9.30004 17.8944 8.65004 17.2778 8.30893Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>

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

@@ -0,0 +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="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/dom/chrome-webidl/MediaController-webidl.patch

@@ -0,0 +1,32 @@
+diff --git a/dom/chrome-webidl/MediaController.webidl b/dom/chrome-webidl/MediaController.webidl
+index 20f416d1c3b41798e0f90bbac5db40ed2a4ab000..1c5d893f9166a3aa7bc7802bb0d1207d169033ee 100644
+--- a/dom/chrome-webidl/MediaController.webidl
++++ b/dom/chrome-webidl/MediaController.webidl
+@@ -20,6 +20,12 @@ enum MediaControlKey {
+   "stop",
+ };
+ 
++dictionary MediaControllerPositionState {
++  required double duration;
++  required double playbackRate;
++  required double position;
++};
++
+ /**
+  * 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
+@@ -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();
+ 
++  [Throws]
++  MediaControllerPositionState getPositionState();
++
+   [Frozen, Cached, Pure]
+   readonly attribute sequence<MediaControlKey> supportedKeys;
+ 

src/dom/html/HTMLMediaElement-cpp.patch

@@ -0,0 +1,12 @@
+diff --git a/dom/html/HTMLMediaElement.cpp b/dom/html/HTMLMediaElement.cpp
+index 0b8dee1ca22b1f0ddcf7e6a976f606990104b56e..a3a5a7cfcaa8a4719e56988bc917183fa3cc9d10 100644
+--- a/dom/html/HTMLMediaElement.cpp
++++ b/dom/html/HTMLMediaElement.cpp
+@@ -455,6 +455,7 @@ class HTMLMediaElement::MediaControlKeyListener final
+     // audible state. Therefore, in that case we would noitfy the audible state
+     // when media starts playing.
+     if (mState == MediaPlaybackState::ePlayed) {
++      NotifyMediaPositionState();
+       NotifyAudibleStateChanged(mIsOwnerAudible
+                                     ? MediaAudibleState::eAudible
+                                     : MediaAudibleState::eInaudible);

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

@@ -0,0 +1,38 @@
+diff --git a/dom/media/mediacontrol/MediaController.cpp b/dom/media/mediacontrol/MediaController.cpp
+index 3f08d24d4ed56bb72ed513ed602b2c8fa48afe7b..98dfe4df48f5daebd2b619f0d4d4eb3ac873a66f 100644
+--- a/dom/media/mediacontrol/MediaController.cpp
++++ b/dom/media/mediacontrol/MediaController.cpp
+@@ -51,6 +51,25 @@ void MediaController::GetSupportedKeys(
+   }
+ }
+ 
++void MediaController::GetPositionState(MediaControllerPositionState& aPositionState, ErrorResult& aRv) {
++  if (!IsActive() || mShutdown) {
++    LOG("Cannot get position state: controller is inactive or shut down");
++    aRv.Throw(NS_ERROR_NOT_AVAILABLE);
++    return;
++  }
++
++  Maybe<PositionState> currentPositionState = GetCurrentPositionState();
++  if (!currentPositionState) {
++    LOG("No position state available for controller %" PRId64, Id());
++    aRv.Throw(NS_ERROR_NOT_AVAILABLE);
++    return;
++  }
++
++  aPositionState.mDuration = currentPositionState->mDuration;
++  aPositionState.mPosition = currentPositionState->mLastReportedPlaybackPosition;
++  aPositionState.mPlaybackRate = currentPositionState->mPlaybackRate;
++}
++
+ 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/dom/media/mediacontrol/MediaController-h.patch

@@ -0,0 +1,12 @@
+diff --git a/dom/media/mediacontrol/MediaController.h b/dom/media/mediacontrol/MediaController.h
+index 8fec9c59e38bc24b9ff6d30ddbaebff67107bc76..5e7f3634f9edef48d6f96b4900f82a7ebbd730be 100644
+--- a/dom/media/mediacontrol/MediaController.h
++++ b/dom/media/mediacontrol/MediaController.h
+@@ -90,6 +90,7 @@ class MediaController final : public DOMEventTargetHelper,
+                        JS::Handle<JSObject*> aGivenProto) override;
+   void GetSupportedKeys(nsTArray<MediaControlKey>& aRetVal) const;
+   void GetMetadata(MediaMetadataInit& aMetadata, ErrorResult& aRv);
++  void GetPositionState(MediaControllerPositionState& aPositionState, ErrorResult& aRv);
+   IMPL_EVENT_HANDLER(activated);
+   IMPL_EVENT_HANDLER(deactivated);
+   IMPL_EVENT_HANDLER(metadatachange);

src/testing/profiles/mochitest/user-js.patch

@@ -0,0 +1,16 @@
+diff --git a/testing/profiles/mochitest/user.js b/testing/profiles/mochitest/user.js
+index a4068ac3f61161d014c49d54ae7a3bf886868f1b..84523e9e10d44269172aa6913699ec50def8166e 100644
+--- a/testing/profiles/mochitest/user.js
++++ b/testing/profiles/mochitest/user.js
+@@ -41,3 +41,11 @@ user_pref("places.history.floodingPrevention.enabled", false);
+ // permission, and we can open it and wait for the user to give permission, then
+ // don't do that.
+ user_pref("geo.prompt.open_system_prefs", false);
++
++user_pref("zen.keyboard.shortcuts.enabled", false);
++user_pref("zen.welcome-screen.seen", true);
++user_pref("zen.tab-unloader.enabled", false);
++user_pref("zen.workspaces.disable_empty_state_for_testing", true);
++user_pref("zen.watermark.enabled", false);
++user_pref("zen.urlbar.replace-newtab", false);
++user_pref("zen.sidebar.use-google-favicons", false); // Crashes on some platforms

src/testing/profiles/profileserver/user-js.patch

@@ -1,8 +1,8 @@
 diff --git a/testing/profiles/profileserver/user.js b/testing/profiles/profileserver/user.js
-index 19ff7d474f6d22d2d386764e2e6942ce6a324470..40d1906bdebd08510014fd6124be17052248e748 100644
+index 19ff7d474f6d22d2d386764e2e6942ce6a324470..a1ed4b51f26f458f965fbc29dfa7b8ad451faf7f 100644
 --- a/testing/profiles/profileserver/user.js
 +++ b/testing/profiles/profileserver/user.js
-@@ -8,3 +8,11 @@
+@@ -8,3 +8,12 @@
  user_pref("dom.timeout.enable_budget_timer_throttling", false);
  // Turn off update
  user_pref("app.update.disabledForTesting", true);
@@ -10,7 +10,8 @@ index 19ff7d474f6d22d2d386764e2e6942ce6a324470..40d1906bdebd08510014fd6124be1705
 +// zen:
 +// Disable some of zen's features to better match the default Firefox experience
 +user_pref("zen.workspaces.disabled_for_testing", true);
-+user_pref("zen.welcome-screen.enabled", false);
++user_pref("zen.workspaces.disable_empty_state_for_testing", true);
++user_pref("zen.welcome-screen.seen", true);
 +user_pref("zen.tab-unloader.enabled", false);
 +user_pref("zen.watermark.enabled", false);
 +user_pref("zen.glance.enabled", false);

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/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

@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.9.1b",
+        "displayVersion": "1.10b",
         "github": {
           "repo": "zen-browser/desktop"
         },
@@ -39,7 +39,7 @@
       "brandShortName": "Twilight",
       "brandFullName": "Zen Twilight",
       "release": {
-        "displayVersion": "1.9.1t",
+        "displayVersion": "1.10t",
         "github": {
           "repo": "zen-browser/desktop"
         }
@@ -53,4 +53,4 @@
     "licenseType": "MPL-2.0"
   },
   "updateHostname": "updates.zen-browser.app"
-}
+}

tests/browser.toml

@@ -0,0 +1,2 @@
+["browser_zen_workspaces.js"]
+

tests/browser_zen_workspaces.js

@@ -0,0 +1,8 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+'use strict';
+
+add_task(async function test_TODO() {
+  ok(true, 'TODO: implement the test');
+});

tests/run.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# make sure we are on root
+if [ ! -f "package.json" ]; then
+  echo "Please run this script from the root of the project"
+  exit 1
+fi
+
+rm -rf engine/browser/base/zen-components/tests/
+
+npm run import
+npm run build:ui
+cd ./engine
+./mach mochitest browser/base/zen-components/tests
+cd ..