Bumped version 10 1.10.3b

Signed-off-by: mr. m  <91018726+mauro-balades@users.noreply.github.com>

.github/workflows/build.yml

@@ -51,7 +51,6 @@ jobs:
           echo "update_branch: ${{ inputs.update_branch }}"
           echo "GITHUB_REPOSITORY: ${{ github.repository }}"
           echo "GITHUB_REPOSITORY_OWNER: ${{ github.repository_owner }}"
-          echo "GITHUB_REPOSITORY_OWNER: ${{ github.repository_owner }}"
           echo "GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}"
 
   buildid:
@@ -516,11 +515,17 @@ jobs:
           commit_user_email: zen-browser-auto@users.noreply.github.com
           repository: ./updates-server
 
+      - name: Generate Release Notes
+        env:
+          RELEASE_BRANCH: ${{ inputs.update_branch }}
+        run: bash .github/workflows/src/generate_release_notes.sh
+
         # If we are on Twilight, we want to just update the Twilight tag's release
       - name: Update Twilight tag
         if: ${{ inputs.update_branch == 'twilight' }}
         uses: softprops/action-gh-release@v2
         with:
+          body_path: release_notes.md
           files: |
             ./zen.source.tar.zst/*
             ./zen.linux-x86_64.tar.xz/*
@@ -559,6 +564,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: 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"

AppDir/AppRun

@@ -1,15 +1,6 @@
 #!/bin/sh
-SELF=$(readlink -f "$0")
-HERE=${SELF%/*}
-export PATH="${HERE}:${HERE}/usr/bin/:${HERE}/usr/sbin/:${HERE}/usr/games/:${HERE}/bin/:${HERE}/sbin/${PATH:+:$PATH}"
-export LD_LIBRARY_PATH="${HERE}/usr/lib/:${HERE}/usr/lib/i386-linux-gnu/:${HERE}/usr/lib/x86_64-linux-gnu/:${HERE}/usr/lib32/:${HERE}/usr/lib64/:${HERE}/lib/:${HERE}/lib/i386-linux-gnu/:${HERE}/lib/x86_64-linux-gnu/:${HERE}/lib32/:${HERE}/lib64/${LD_LIBRARY_PATH:+:$LD_LIBRARY_PATH}"
-export PYTHONPATH="${HERE}/usr/share/pyshared/${PYTHONPATH:+:$PYTHONPATH}"
-export MOZ_LEGACY_PROFILES=1 # Prevent per installation profiles
-DEFAULT_XDG_DATA_DIRS='./share/:/usr/share/gnome:/usr/local/share/:/usr/share/'
-export XDG_DATA_DIRS="${HERE}/usr/share/:${XDG_DATA_DIRS:-$DEFAULT_XDG_DATA_DIRS}"
-export PERLLIB="${HERE}/usr/share/perl5/:${HERE}/usr/lib/perl5/${PERLLIB:+:$PERLLIB}"
-export GSETTINGS_SCHEMA_DIR="${HERE}/usr/share/glib-2.0/schemas/${GSETTINGS_SCHEMA_DIR:+:$GSETTINGS_SCHEMA_DIR}"
-export MOZ_APP_LAUNCHER="${APPIMAGE}"
-export QT_PLUGIN_PATH="${HERE}/usr/lib/qt4/plugins/:${HERE}/usr/lib/i386-linux-gnu/qt4/plugins/:${HERE}/usr/lib/x86_64-linux-gnu/qt4/plugins/:${HERE}/usr/lib32/qt4/plugins/:${HERE}/usr/lib64/qt4/plugins/:${HERE}/usr/lib/qt5/plugins/:${HERE}/usr/lib/i386-linux-gnu/qt5/plugins/:${HERE}/usr/lib/x86_64-linux-gnu/qt5/plugins/:${HERE}/usr/lib32/qt5/plugins/:${HERE}/usr/lib64/qt5/plugins/${QT_PLUGIN_PATH:+:$QT_PLUGIN_PATH}"
-EXEC=$(grep -e '^Exec=.*' "${HERE}"/*.desktop | head -n 1 | cut -d "=" -f 2 | cut -d " " -f 1)
-exec "${EXEC}" "$@"
+CURRENTDIR="$(dirname "$(readlink -f "$0")")"
+export PATH="${CURRENTDIR}:${PATH}"
+export MOZ_LEGACY_PROFILES=1          # Prevent per installation profiles
+export MOZ_APP_LAUNCHER="${APPIMAGE}" # Allows setting as default browser
+exec "${CURRENTDIR}/zen" "$@"

README.md

@@ -6,7 +6,7 @@
 [![Crowdin](https://badges.crowdin.net/zen-browser/localized.svg)](https://crowdin.com/project/zen-browser)
 [![Zen Release builds](https://github.com/zen-browser/desktop/actions/workflows/build.yml/badge.svg?branch=stable)](https://github.com/zen-browser/desktop/actions/workflows/build.yml)
 
-✨ Experience tranquillity while browsing the web without people tracking you! Zen is a privacy-focused browser that blocks trackers, ads, and other unwanted content while offering the best browsing experience!
+✨ Experience tranquillity while browsing the internet with Zen! Our mission is to give you a balance between speed, privacy and productivity!
 
 <div flex="true">
   <a href="https://zen-browser.app/download">
@@ -28,7 +28,7 @@
 
 ## 🖥️ Compatibility
 
-Zen is currently built using Firefox version `136.0`! 🚀
+Zen is currently built using Firefox version `136.0.2`! 🚀
 
 - [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 136.0`!
 - Check out the latest [release notes](https://zen-browser.app/release-notes)!
@@ -96,17 +96,22 @@ brew install --cask zen-browser
 yay -S zen-browser-bin
 ```
 
-##### Other Linux distributions (AppImage with automated system integration)
+##### Other Linux distributions (Tarball or AppImage)
 
-- `native` tarball install:
-  `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
 

firefox-cache/l10n-last-commit-hash

@@ -0,0 +1 @@
+e234130176d2813fec2397bbf3a313909565006e

flatpak/app.zen_browser.zen.yml.template

@@ -28,7 +28,7 @@ finish-args:
   - --system-talk-name=org.freedesktop.NetworkManager
   - --talk-name=org.a11y.Bus
   - --env=GTK_PATH=/app/lib/gtkmodules
-  - --env=MESA_SHADER_CACHE_DIR=$XDG_RUNTIME_DIR/app/$FLATPAK_ID/cache/mesa_shader_cache_db
+  - --env=MESA_SHADER_CACHE_DIR=/var/cache/mesa_shader_cache_db
 modules:
   - name: zen_browser
     buildsystem: simple

package.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

scripts/update_ff.py

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

scripts/update_newtab.py

@@ -2,10 +2,11 @@ import os
 import subprocess
 import logging
 
-# Set up logging
-logging.basicConfig(level=logging.INFO)
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(levelname)s - %(message)s'
+)
 
-# Constants for paths
 NEW_TAB_DIR = "./engine/browser/components/newtab"
 ENGINE_DIR = "./engine"
 NPM_INSTALL_COMMANDS = ["npm install", "npm install meow@9.0.0"]
@@ -13,27 +14,62 @@ BUNDLE_COMMAND = "npm run bundle --prefix=browser/components/newtab"
 
 
 def install_dependencies():
-  """Install necessary npm packages for the newtab component."""
+  if not os.path.isdir(NEW_TAB_DIR):
+    logging.error(f"Directory not found: {NEW_TAB_DIR}")
+    raise FileNotFoundError(f"New tab directory {NEW_TAB_DIR} does not exist")
+
   for command in NPM_INSTALL_COMMANDS:
-    logging.info(f"Running command: {command} in {NEW_TAB_DIR}")
-    subprocess.run(command.split(), cwd=NEW_TAB_DIR, check=True)
+    try:
+      logging.info(f"Running command: {command} in {NEW_TAB_DIR}")
+      subprocess.run(
+          command.split(),
+          cwd=NEW_TAB_DIR,
+          check=True,
+          capture_output=True,
+          text=True
+      )
+      logging.info(f"Successfully executed: {command}")
+    except subprocess.CalledProcessError as e:
+      logging.error(f"Command failed: {command} - {e.stderr}")
+      raise
 
 
 def bundle_newtab_components():
-  """Bundle the newtab components."""
-  logging.info(f"Bundling newtab components in {ENGINE_DIR}")
-  subprocess.run(BUNDLE_COMMAND.split(), cwd=ENGINE_DIR, check=True)
+  if not os.path.isdir(ENGINE_DIR):
+    logging.error(f"Directory not found: {ENGINE_DIR}")
+    raise FileNotFoundError(f"Engine directory {ENGINE_DIR} does not exist")
+
+  try:
+    logging.info(f"Bundling newtab components in {ENGINE_DIR}")
+    result = subprocess.run(
+        BUNDLE_COMMAND.split(),
+        cwd=ENGINE_DIR,
+        check=True,
+        capture_output=True,
+        text=True
+    )
+    logging.info(f"Bundle completed successfully: {result.stdout}")
+  except subprocess.CalledProcessError as e:
+    logging.error(f"Bundle failed: {e.stderr}")
+    raise
 
 
 def update_newtab(init: bool = True):
-  """Update the newtab components, optionally initializing dependencies."""
   try:
     if init:
+      logging.info("Starting dependency installation")
       install_dependencies()
+      logging.info("Dependencies installed successfully")
 
+    logging.info("Starting bundle process")
     bundle_newtab_components()
-  except subprocess.CalledProcessError as e:
-    logging.error(f"An error occurred: {e}")
+    logging.info("Newtab update completed successfully")
+
+  except (subprocess.CalledProcessError, FileNotFoundError) as e:
+    logging.error(f"Update process failed: {str(e)}")
+    raise
+  except Exception as e:
+    logging.error(f"Unexpected error: {str(e)}")
     raise
 
 

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

@@ -90,6 +90,8 @@ pref('zen.tabs.show-newtab-vertical', true);
 pref('zen.view.show-newtab-button-border-top', false);
 pref('zen.view.show-newtab-button-top', true);
 
+pref('zen.mediacontrols.enabled', true);
+
 #ifdef MOZILLA_OFFICIAL
 pref('zen.rice.api.url', 'https://share.zen-browser.app', locked);
 pref('zen.injections.match-urls', 'https://zen-browser.app/*,https://share.zen-browser.app/*', locked);
@@ -118,6 +120,7 @@ pref('zen.view.compact.animate-sidebar', true);
 pref('zen.view.compact.show-sidebar-and-toolbar-on-hover', true);
 
 pref('zen.urlbar.replace-newtab', true);
+pref('zen.urlbar.show-protections-icon', false);
 pref('zen.urlbar.behavior', 'floating-on-type'); // default, floating-on-type, float
 pref('zen.urlbar.wait-to-clear', 45000); // in ms (default 45s)
 pref('zen.urlbar.show-domain-only-in-sidebar', true);
@@ -178,15 +181,17 @@ pref('zen.pinned-tab-manager.restore-pinned-tabs-to-pinned-url', false);
 pref('zen.pinned-tab-manager.close-shortcut-behavior', 'reset-unload-switch');
 
 // TODO: Check this out!
-pref("browser.profiles.enabled", true);
+pref("browser.profiles.enabled", false);
 
 // Zen webpanels (calling it sidebar due to legacy reasons)
 pref('zen.sidebar.data', "{\"data\":\n {\"p1\":{\n   \"url\":\"https://www.wikipedia.org/\"\n  },\n\"p2\":{\n   \"url\":\"https://m.twitter.com/\",\n\"ua\": true\n  },\n\"p3\": {\n   \"url\": \"https://www.youtube.com/\",\n\"ua\": true\n},\n\"p4\": {\n   \"url\": \"https://translate.google.com/\",\n\"ua\": true\n},\n\"p5\": {\n   \"url\": \"https://todoist.com/\",\n\"ua\": true\n}},\n\"index\":[\"p1\",\"p2\",\"p3\",\"p4\",\"p5\"]}");
 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);
 pref('zen.splitView.min-resize-width', 7);
 pref('zen.splitView.change-on-hover', false);
 pref('zen.splitView.rearrange-hover-size', 24);
@@ -196,9 +201,7 @@ pref('zen.startup.smooth-scroll-in-tabs', true);
 
 // Zen Workspaces
 pref('zen.workspaces.disabled_for_testing', false);
-pref('zen.workspaces.hide-deactivated-workspaces', false);
 pref('zen.workspaces.hide-default-container-indicator', true);
-pref('zen.workspaces.show-icon-strip', true);
 pref('zen.workspaces.force-container-workspace', false);
 pref('zen.workspaces.open-new-tab-if-last-unpinned-tab-is-closed', false);
 pref('zen.workspaces.show-workspace-indicator', true);
@@ -253,7 +256,7 @@ pref('browser.migrate.opera.enabled', true);
 // pref('network.trr.mode', 5);
 
 // security: They must enable this themselves, to avoid people downloading malware
-pref('xpinstall.signatures.required', false);
+pref('xpinstall.signatures.required', true);
 
 // Experimental Zen Features
 // Strategy to use for bytecode cache (Thanks https://github.com/gunir)
@@ -437,6 +440,13 @@ pref("browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features", false
 pref("browser.preferences.moreFromMozilla", false, locked);
 pref("browser.aboutwelcome.enabled", false);
 
+// AI/ML stuff
+pref("browser.ml.chat.enabled", false);
+pref("browser.ml.chat.shortcuts", false);
+pref("browser.ml.chat.shortcuts.custom", false);
+pref("browser.ml.chat.sidebar", false);
+pref("browser.ml.enable", false);
+
 // ---- Experimental settings to try make zen faster
 pref("gfx.canvas.accelerated.cache-items", 32768);
 pref("gfx.canvas.accelerated.cache-size", 256);

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() {
@@ -247,7 +250,7 @@ var gZenUIManager = {
     const toast = this._createToastElement(messageId, options);
     this._toastContainer.removeAttribute('hidden');
     this._toastContainer.appendChild(toast);
-    await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.5 });
+    await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.7 });
     await new Promise((resolve) => setTimeout(resolve, 3000));
     await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
     const toastHeight = toast.getBoundingClientRect().height;
@@ -258,6 +261,10 @@ var gZenUIManager = {
       this._toastContainer.setAttribute('hidden', 'true');
     }
   },
+
+  get panelUIPosition() {
+    return gZenVerticalTabsManager._hasSetSingleToolbar ? 'bottomleft topleft' : 'bottomright topright';
+  },
 };
 
 var gZenVerticalTabsManager = {
@@ -347,33 +354,44 @@ var gZenVerticalTabsManager = {
       return visibleTabs[visibleTabs.length - 1] === aTab;
     };
 
-    const tabSize = aTab.getBoundingClientRect().height;
-    const transform = `-${tabSize}px`;
-    gZenUIManager.motion
-      .animate(
-        aTab,
-        {
-          opacity: [0, 1],
-          transform: ['scale(0.95)', 'scale(1)'],
-          marginBottom: isLastTab() ? [] : [transform, '0px'],
-        },
-        {
-          duration: 0.2,
-          easing: 'ease-out',
-        }
-      )
-      .then(() => {
-        aTab.style.removeProperty('margin-bottom');
-        aTab.style.removeProperty('transform');
-        aTab.style.removeProperty('opacity');
-      });
-    gZenUIManager.motion
-      .animate(aTab.querySelector('.tab-content'), {
-        filter: ['blur(1px)', 'blur(0px)'],
-      })
-      .then(() => {
-        aTab.querySelector('.tab-stack').style.removeProperty('filter');
-      });
+    try {
+      const tabSize = aTab.getBoundingClientRect().height;
+      const transform = `-${tabSize}px`;
+      gZenUIManager.motion
+        .animate(
+          aTab,
+          {
+            opacity: [0, 1],
+            transform: ['scale(0.95)', 'scale(1)'],
+            marginBottom: isLastTab() ? [] : [transform, '0px'],
+          },
+          {
+            duration: 0.12,
+            easing: 'ease-out',
+          }
+        )
+        .then(() => {
+          aTab.style.removeProperty('margin-bottom');
+          aTab.style.removeProperty('transform');
+          aTab.style.removeProperty('opacity');
+        });
+      gZenUIManager.motion
+        .animate(
+          aTab.querySelector('.tab-content'),
+          {
+            filter: ['blur(1px)', 'blur(0px)'],
+          },
+          {
+            duration: 0.12,
+            easing: 'ease-out',
+          }
+        )
+        .then(() => {
+          aTab.querySelector('.tab-stack').style.removeProperty('filter');
+        });
+    } catch (e) {
+      console.error(e);
+    }
   },
 
   get actualWindowButtons() {
@@ -620,6 +638,12 @@ var gZenVerticalTabsManager = {
       }
 
       gZenCompactModeManager.updateCompactModeContext(isSingleToolbar);
+      document.getElementById('urlbar').removeAttribute('--urlbar-height');
+      if (!isSingleToolbar) {
+        document.getElementById('urlbar').style.setProperty('--urlbar-height', '32px');
+      } else {
+        gURLBar.updateLayoutBreakout();
+      }
 
       // Always move the splitter next to the sidebar
       this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));

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,7 @@
         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/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 +66,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)

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" 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/zen-animations.css

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

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

@@ -109,7 +109,7 @@
 }
 
 #zen-main-app-wrapper {
-  background: transparent;
+  background: var(--zen-themed-toolbar-bg-transparent);
   overflow: hidden;
 
   & > * {

src/browser/base/content/zen-styles/zen-compact-mode.css

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

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

@@ -276,6 +276,14 @@
   box-shadow: var(--zen-big-shadow);
   overflow: hidden;
 
+  &[side='right'] {
+    right: 0;
+
+    &[has-split-view='true'] {
+      right: var(--zen-element-separation);
+    }
+  }
+
   &::after {
     content: '';
     position: absolute;

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

@@ -58,6 +58,11 @@ tab-group[split-view-group] {
       right: 50%;
       transform: translateX(50%);
     }
+
+    & .tab-content {
+      min-width: 0;
+      justify-content: unset !important;
+    }
   }
 
   &:has(> tab:is([visuallyselected], [multiselected])) {

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

@@ -36,6 +36,7 @@
     appearance: none;
     box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.07);
     opacity: 0;
+    padding: 8px;
 
     &:hover {
       background: light-dark(rgb(41, 41, 41), rgb(204, 204, 204));
@@ -48,12 +49,43 @@
 
     & label {
       display: none;
+
+      &::before {
+        text-overflow: unset;
+      }
     }
 
     & image {
       filter: invert(1);
     }
   }
+
+  & #zen-glance-sidebar-close {
+    width: fit-content;
+    & label {
+      display: block;
+      max-width: 0px;
+      margin: 0;
+      overflow: hidden;
+      transition:
+        max-width 0.2s ease,
+        margin-left 0.2s ease;
+    }
+
+    &[waitconfirmation] {
+      background: rgb(220, 53, 69);
+      color: white;
+      fill: white;
+      & label {
+        max-width: 4rem;
+        margin-left: 8px;
+      }
+
+      & image {
+        filter: none;
+      }
+    }
+  }
 }
 
 .browserSidebarContainer.zen-glance-overlay {

src/browser/base/content/zen-styles/zen-gradient-generator.css

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

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

@@ -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%;
+  }
+
+  .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;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+#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

@@ -351,18 +351,30 @@ menuitem {
 #zen-toast-container {
   position: fixed;
   top: calc(var(--zen-element-separation) * 2);
-  right: calc(var(--zen-element-separation) * 2);
   z-index: 1000;
   gap: 1rem;
   display: flex;
   align-items: end;
 
+  :root:not([zen-right-side='true']) & {
+    right: calc(var(--zen-element-separation) * 2);
+  }
+
+  :root[zen-right-side='true'] & {
+    left: calc(var(--zen-element-separation) * 2);
+  }
+
   & .zen-toast {
-    padding: 0.9rem 0.8rem;
+    padding: 0.5rem 0.6rem;
     border-radius: 12px;
-    background-color: var(--button-primary-bgcolor);
+    background: linear-gradient(
+      170deg,
+      var(--zen-primary-color) -40%,
+      color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
+    );
     color: var(--button-primary-color);
-    box-shadow: var(--zen-big-shadow);
+    box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     display: flex;
     font-weight: 500;
     gap: 5px;

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

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

src/browser/base/content/zen-styles/zen-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: 0.92;
+    }
+
+    & .tab-icon-image {
+      &:not([src]),
+      &:-moz-broken {
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
+        background: color-mix(in srgb, var(--zen-primary-color) 30%, transparent 70%);
+      }
+    }
+
     max-width: unset;
     padding: 0 !important;
 
@@ -456,18 +469,11 @@
     margin-top: 0;
   }
 
-  & #zen-workspaces-button[as-button='true'] {
-    width: calc(100% - 10px) !important;
-  }
-
   & .zen-current-workspace-indicator-icon[no-icon='true'] {
     display: none;
   }
 
   & #zen-workspaces-button {
-    margin-left: 2px;
-    margin-right: 2px;
-
     & .zen-workspace-sidebar-icon[no-icon='true'] {
       display: none;
     }
@@ -756,14 +762,6 @@
   }
   & #zen-workspaces-button {
     flex-direction: column;
-    &:not([as-button='true']) {
-      & toolbarbutton {
-        &[active='true']::after {
-          bottom: 50% !important;
-          transform: translateY(50%) !important;
-        }
-      }
-    }
   }
 }
 
@@ -870,6 +868,7 @@
     pointer-events: none;
     width: 16px;
     height: 16px;
+    border-radius: 4px;
   }
 
   &::after {
@@ -1048,14 +1047,14 @@
 #zen-essentials-container {
   padding-bottom: var(--zen-toolbox-padding);
   overflow: hidden;
-  gap: 3px;
+  gap: calc(var(--zen-toolbox-padding) - 2px);
 }
 
 #zen-essentials-container {
   overflow: hidden;
   transition: max-height 0.3s ease-out;
   opacity: 1;
-  grid-template-columns: repeat(auto-fit, minmax(48px, auto));
+  grid-template-columns: repeat(auto-fit, minmax(49px, auto));
   overflow: hidden;
   scrollbar-width: thin;
   display: grid;
@@ -1107,7 +1106,7 @@
       &::after {
         content: "";
         inset: -50%;
-        filter: blur(15px) brightness(1.2);
+        filter: blur(20px);
         position: absolute;
         background-size: 100% 100%;
         background-clip: padding-box;
@@ -1173,7 +1172,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,16 +155,16 @@
 
   --input-bgcolor: var(--zen-colors-tertiary) !important;
   --input-border-color: var(--zen-input-border-color) !important;
-  --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #161616);
-  --zen-themed-toolbar-bg-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;
+  --zen-workspace-indicator-height: 48px;
 
   @media (-moz-windows-mica) or (-moz-platform: macos) {
     background: transparent;
     --zen-themed-toolbar-bg-transparent: transparent;
     @media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
-      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 75%, transparent 25%);
+      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 35%, transparent 65%);
     }
   }
 

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

@@ -16,6 +16,10 @@
   --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
   border-radius: var(--toolbarbutton-border-radius);
   padding: 1px;
+
+  :root:not([zen-single-toolbar='true']) &[zen-floating-urlbar='true'] {
+    --urlbar-container-padding: 2px !important;
+  }
 }
 
 .urlbar-input::placeholder {
@@ -90,6 +94,12 @@
   justify-content: center !important;
   align-items: center !important;
   margin: 0;
+
+  :root[zen-single-toolbar='true'] & {
+    padding: 6px !important;
+    width: unset !important;
+    height: unset !important;
+  }
 }
 
 #tracking-protection-icon-container {
@@ -326,7 +336,7 @@ button.popup-notification-dropmarker {
   background: transparent;
 
   &[notificationside='top'] {
-    position: absolute;
+    position: fixed;
     bottom: calc(var(--zen-element-separation) * 1.5);
     right: calc(var(--zen-element-separation) * 1.5);
     width: fit-content;
@@ -454,6 +464,12 @@ button.popup-notification-dropmarker {
   }
 }
 
+@media not (-moz-bool-pref: 'zen.urlbar.show-protections-icon') {
+  #tracking-protection-icon-container {
+    display: none !important;
+  }
+}
+
 /* Code ~~stolen~~ taken inspiration from https://github.com/greeeen-dev/zen-arc-cmd-bar
  *
  * MIT License

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

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

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

@@ -37,6 +37,17 @@ var gZenCompactModeManager = {
 
     this.addMouseActions();
     this.addContextMenu();
+
+    // 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() {
@@ -69,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');
@@ -334,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 {
@@ -360,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'));
       };
@@ -381,9 +394,10 @@ var gZenCompactModeManager = {
 
         // When moving the cursor between the url bar and bookmarks, or in-between bookmarks in the bookmark bar, the
         // mouseLeave event is triggered without a relatedTarget.
-        if (event.relatedTarget == null) {
-          return;
-        }
+        // TODO: Experiment with this for some time, see if people still have issues with the hover state
+        //if (event.relatedTarget == null) {
+        //  return;
+        //}
 
         // If it's a child element but not the target, ignore the event
         if (target.contains(event.explicitOriginalTarget) && event.explicitOriginalTarget !== target) {
@@ -450,4 +464,15 @@ var gZenCompactModeManager = {
     let toolbar = document.getElementById('zen-appcontent-navbar-container');
     toolbar.toggleAttribute('zen-user-show');
   },
+
+  _clearAllHoverStates() {
+    // Clear hover attributes from all hoverable elements
+    for (let entry of this.hoverableElements) {
+      const target = entry.element;
+      if (target && !target.matches(':hover') && target.hasAttribute('zen-has-hover')) {
+        target.removeAttribute('zen-has-hover');
+        this.clearFlashTimeout('has-hover' + target.id);
+      }
+    }
+  },
 };

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

@@ -6,8 +6,9 @@
     #glances = new Map();
     #currentGlanceID = null;
 
+    #confirmationTimeout = null;
+
     init() {
-      window.addEventListener('keydown', this.onKeyDown.bind(this));
       window.addEventListener('TabClose', this.onTabClose.bind(this));
       window.addEventListener('TabSelect', this.onLocationChange.bind(this));
 
@@ -37,17 +38,6 @@
       return this.#glances.get(this.#currentGlanceID)?.parentTab;
     }
 
-    onKeyDown(event) {
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (event.key === 'Escape' && this.#currentGlanceID) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.closeGlance({ onTabClose: true });
-      }
-    }
-
     onOverlayClick(event) {
       if (event.target === this.overlay && event.originalTarget !== this.contentWrapper) {
         this.closeGlance({ onTabClose: true });
@@ -216,11 +206,26 @@
       });
     }
 
-    closeGlance({ noAnimation = false, onTabClose = false, setNewID = null, isDifferent = false } = {}) {
+    closeGlance({ noAnimation = false, onTabClose = false, setNewID = null, isDifferent = false, hasFocused = false } = {}) {
       if (this._animating || !this.#currentBrowser || this.animatingOpen || this._duringOpening) {
         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);
+        this.#confirmationTimeout = setTimeout(() => {
+          cancelButton.removeAttribute('waitconfirmation');
+          this.#confirmationTimeout = null;
+        }, 3000);
+        return;
+      }
+
       this.browserWrapper.removeAttribute('has-finished-animation');
       if (noAnimation) {
         this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').removeAttribute('style');
@@ -275,7 +280,7 @@
             ...originalPosition,
             opacity: 0,
           },
-          { type: 'spring', bounce: 0, duration: 0.6, easing: 'ease-in' }
+          { type: 'spring', bounce: 0, duration: 0.5, easing: 'ease-in' }
         )
         .then(() => {
           this.browserWrapper.removeAttribute('animate');
@@ -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');
@@ -398,9 +402,18 @@
       }
     }
 
-    // note: must be async to avoid timing issues
+    clearConfirmationTimeout() {
+      if (this.#confirmationTimeout) {
+        clearTimeout(this.#confirmationTimeout);
+        this.#confirmationTimeout = null;
+      }
+      document.getElementById('zen-glance-sidebar-close')?.removeAttribute('waitconfirmation');
+    }
+
+    // note: must be sync to avoid timing issues
     onLocationChange(event) {
       const tab = event.target;
+      this.clearConfirmationTimeout();
       if (this.animatingFullOpen || this.closingGlance) {
         return;
       }
@@ -586,8 +599,12 @@
           esModuleURI: 'chrome://browser/content/zen-components/actors/ZenGlanceChild.sys.mjs',
           events: {
             DOMContentLoaded: {},
+            keydown: {
+              capture: true,
+            },
           },
         },
+        allFrames: true,
         matches: ['https://*/*'],
       });
     }

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

@@ -500,9 +500,8 @@
       const centerPosition = { x: rect.width / 2, y: rect.height / 2 };
 
       const harmonyAngles = getColorHarmonyType(dots.length + (action === 'add' ? 1 : action === 'remove' ? -1 : 0), this.dots);
-      if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots;
-
       this.useAlgo = harmonyAngles.type;
+      if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots;
 
       let primaryDot = dots.find((dot) => dot.ID === 0);
       if (!primaryDot) return [];
@@ -638,7 +637,7 @@
           }
         });
 
-        let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
+        let colorPositions = this.calculateCompliments(this.dots, 'remove');
         this.handleColorPositions(colorPositions);
         this.updateCurrentWorkspace();
         return;
@@ -780,7 +779,7 @@
           }
         });
 
-        let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
+        let colorPositions = this.calculateCompliments(this.dots, 'remove');
         this.handleColorPositions(colorPositions);
 
         this.updateCurrentWorkspace();
@@ -870,8 +869,11 @@
       if (color.isCustom) {
         return color.c;
       }
-      const toolbarBg = forToolbar ? this.getToolbarModifiedBase() : 'var(--zen-themed-toolbar-bg-transparent)';
-      return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`;
+      if (forToolbar) {
+        const toolbarBg = this.getToolbarModifiedBase();
+        return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`;
+      }
+      return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${this.currentOpacity})`;
     }
 
     getGradient(colors, forToolbar = false) {

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

@@ -0,0 +1,496 @@
+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() {
+    if (!Services.prefs.getBoolPref('zen.mediacontrols.enabled', true)) return;
+
+    this.mediaTitle = document.querySelector('#zen-media-title');
+    this.mediaArtist = document.querySelector('#zen-media-artist');
+    this.mediaControlBar = document.querySelector('#zen-media-controls-toolbar');
+    this.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);
+        }
+      }
+    });
+
+    const onTabDiscardedOrClosed = this.onTabDiscardedOrClosed.bind(this);
+    window.addEventListener('TabClose', onTabDiscardedOrClosed);
+
+    window.addEventListener('DOMAudioPlaybackStarted', (event) => {
+      setTimeout(() => {
+        if (
+          this._currentMediaController?.isPlaying &&
+          this.mediaControlBar.hasAttribute('hidden') &&
+          !this.mediaControlBar.hasAttribute('pip')
+        ) {
+          const { selectedBrowser } = gBrowser;
+          if (selectedBrowser.browserId !== this._currentBrowser.browserId) {
+            this.showMediaControls();
+          }
+        }
+      }, 1000);
+
+      this.activateMediaControls(event.target.browsingContext.mediaController, event.target);
+    });
+
+    window.addEventListener('DOMAudioPlaybackStopped', () => this.updateMuteState());
+  }
+
+  onTabDiscardedOrClosed(event) {
+    const linkedBrowser = event.target.linkedBrowser;
+    if (!linkedBrowser?.browsingContext?.mediaController) return;
+    this.deinitMediaController(
+      linkedBrowser.browsingContext.mediaController,
+      true,
+      linkedBrowser.browserId === this._currentBrowser?.browserId,
+      true
+    );
+  }
+
+  async deinitMediaController(mediaController, shouldForget = true, shouldOverride = true, shouldHide = true) {
+    if (!mediaController) return;
+
+    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();
+        gZenUIManager.restoreScrollbarState();
+      });
+  }
+
+  showMediaControls() {
+    if (this._currentMediaController.isBeingUsedInPIPModeOrFullscreen) return this.hideMediaControls();
+    if (!this.mediaControlBar.hasAttribute('hidden')) return;
+
+    this.updatePipButton();
+    const mediaInfoElements = [this.mediaTitle, this.mediaArtist];
+    for (const element of mediaInfoElements) {
+      element.removeAttribute('overflow'); // So we can properly recalculate the overflow
+    }
+
+    this.mediaControlBar.removeAttribute('hidden');
+    window.requestAnimationFrame(() => {
+      this.mediaControlBar.style.height =
+        this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
+      this.mediaControlBar.style.opacity = 0;
+      gZenUIManager.updateTabsToolbar();
+      gZenUIManager.restoreScrollbarState();
+      gZenUIManager.motion.animate(
+        this.mediaControlBar,
+        {
+          opacity: [0, 1],
+          y: [10, 0],
+        },
+        {}
+      );
+      this.addLabelOverflows(mediaInfoElements);
+    });
+  }
+
+  addLabelOverflows(elements) {
+    for (const element of elements) {
+      const parent = element.parentElement;
+      if (element.scrollWidth > parent.clientWidth) {
+        element.setAttribute('overflow', '');
+      } else {
+        element.removeAttribute('overflow');
+      }
+    }
+  }
+
+  setupMediaController(mediaController, browser) {
+    this._currentMediaController = mediaController;
+    this._currentBrowser = browser;
+
+    this.updatePipButton();
+  }
+
+  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();
+    gZenUIManager.restoreScrollbarState();
+
+    this._currentPosition = positionState.position;
+    this._currentDuration = positionState.duration;
+    this._currentPlaybackRate = positionState.playbackRate;
+
+    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,
+      playbackRate: positionState.playbackRate,
+      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) {
+    const mediaController = this.mediaControllersMap.get(event.target.id);
+    this.mediaControllersMap.set(event.target.id, {
+      ...mediaController,
+      position: event.position,
+      duration: event.duration,
+      playbackRate: event.playbackRate,
+      lastUpdated: Date.now(),
+    });
+
+    if (event.target.id !== this._currentMediaController?.id) return;
+
+    this._currentPosition = event.position;
+    this._currentDuration = event.duration;
+    this._currentPlaybackRate = event.playbackRate;
+
+    this.updateMediaPosition();
+  }
+
+  switchController(force = false) {
+    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,
+              playbackRate: nextController.playbackRate,
+            });
+
+            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 * this._currentPlaybackRate;
+        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 || '';
+
+    const mediaInfoElements = [this.mediaTitle, this.mediaArtist];
+    for (const element of mediaInfoElements) {
+      element.removeAttribute('overflow');
+    }
+
+    this.addLabelOverflows(mediaInfoElements);
+  }
+
+  _onPictureInPictureModeChange(event) {
+    if (event.target.id !== this._currentMediaController?.id) return;
+    if (event.target.isBeingUsedInPIPModeOrFullscreen) {
+      this.hideMediaControls();
+      this.mediaControlBar.setAttribute('pip', '');
+    } else {
+      const { selectedBrowser } = gBrowser;
+      if (selectedBrowser.browserId !== this._currentBrowser.browserId) {
+        this.showMediaControls();
+      }
+
+      this.mediaControlBar.removeAttribute('pip');
+    }
+  }
+
+  onMediaPlayPrev() {
+    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() {
+    if (!this._currentBrowser) return;
+    const sidebarId = this._currentBrowser.getAttribute('zen-sidebar-id');
+    if (sidebarId) gZenBrowserManagerSidebar.open(sidebarId);
+    else 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/ZenPinnedTabManager.mjs

@@ -82,11 +82,9 @@
     }
 
     onTabIconChanged(tab, url = null) {
-      if (tab.hasAttribute('zen-essential') && this._pinsCache) {
-        const pin = this._pinsCache.find((pin) => pin.uuid === tab.getAttribute('zen-pin-id'));
-        if (pin) {
-          tab.querySelector('.tab-background').style.setProperty('--zen-tab-icon', `url(${pin.iconUrl})`);
-        }
+      const iconUrl = url ?? tab.iconImage.src;
+      if (tab.hasAttribute('zen-essential')) {
+        tab.querySelector('.tab-background').style.setProperty('--zen-tab-icon', `url(${iconUrl})`);
       }
       // TODO: work on this
       //if (tab.hasAttribute('zen-pinned-changed') || !this._pinsCache) {
@@ -468,6 +466,7 @@
 
       if (!isClosing) {
         tab.removeAttribute('zen-pin-id');
+        tab.removeAttribute('zen-essential'); // Just in case
 
         if (!tab.hasAttribute('zen-workspace-id') && ZenWorkspaces.workspaceEnabled) {
           const workspace = await ZenWorkspaces.getActiveWorkspace();
@@ -511,6 +510,10 @@
         case 'unload-switch':
         case 'reset-switch':
         case 'switch':
+          let { permitUnload } = selectedTab.linkedBrowser?.permitUnload();
+          if (!permitUnload) {
+            return;
+          }
           this._handleTabSwitch(selectedTab);
           if (behavior.includes('reset')) {
             this._resetTabToStoredState(selectedTab);
@@ -521,8 +524,7 @@
             }
             // Do not unload about:* pages
             if (!selectedTab.linkedBrowser?.currentURI.spec.startsWith('about:')) {
-              gBrowser.explicitUnloadTabs([selectedTab]);
-              selectedTab.removeAttribute('linkedpanel');
+              gZenTabUnloader.explicitUnloadTabs([selectedTab], { permitUnload });
             }
           }
           break;
@@ -832,7 +834,7 @@
     removeTabContainersDragoverClass() {
       this.dragIndicator.remove();
       this._dragIndicator = null;
-      ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
+      ZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
     }
 
     get dragIndicator() {
@@ -892,9 +894,9 @@
       targetTab = targetTab?.group || targetTab;
       if (event.target.closest('.zen-current-workspace-indicator')) {
         this.removeTabContainersDragoverClass();
-        ZenWorkspaces.activeWorkspaceIndicator.setAttribute('open', true);
+        ZenWorkspaces.activeWorkspaceIndicator?.setAttribute('open', true);
       } else {
-        ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
+        ZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
       }
 
       // If there's no valid target tab, nothing to do

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

@@ -176,7 +176,7 @@
                   <checkbox data-l10n-id="zen-rice-share-include-workspace-themes" id="zen-rice-share-include-workspace-themes" />
                 </vbox>
                 <html:moz-button-group class="panel-footer">
-                  <button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-rice-share-cancel" />
+                  <button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-general-cancel" />
                   <button onclick="gZenThemePicker.riceManager.submit()" class="footer-button" data-l10n-id="zen-rice-share-save" default="true" slot="primary" id="zen-rice-share-save" disabled="true" />
                 </html:moz-button-group>
               </vbox>

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();
@@ -281,8 +280,10 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
     this.close();
   }
 
-  open() {
+  open(id = null) {
     let sidebar = document.getElementById('zen-sidebar-web-panel');
+    if (id) this._currentPanel = id;
+
     sidebar.removeAttribute('hidden');
     this.update();
   }
@@ -557,16 +558,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/ZenTabUnloader.mjs

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

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

@@ -49,9 +49,13 @@ class SplitNode extends SplitLeafNode {
     return this._children;
   }
 
-  addChild(child) {
+  addChild(child, prepend = true) {
     child.parent = this;
-    this._children.unshift(child);
+    if (prepend) {
+      this._children.unshift(child);
+    } else {
+      this._children.push(child);
+    }
   }
 }
 
@@ -89,9 +93,11 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     this.insertIntoContextMenu();
 
     // Add drag over listener to the browser view
-    const tabBox = document.getElementById('tabbrowser-tabbox');
-    tabBox.addEventListener('dragover', this.onBrowserDragOverToSplit.bind(this));
-    this.onBrowserDragEndToSplit = this.onBrowserDragEndToSplit.bind(this);
+    if (Services.prefs.getBoolPref('zen.splitView.enable-tab-drop')) {
+      const tabBox = document.getElementById('tabbrowser-tabbox');
+      tabBox.addEventListener('dragover', this.onBrowserDragOverToSplit.bind(this));
+      this.onBrowserDragEndToSplit = this.onBrowserDragEndToSplit.bind(this);
+    }
   }
 
   insertIntoContextMenu() {
@@ -196,21 +202,24 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     if (currentView?.tabs.length >= this.MAX_TABS) {
       return;
     }
-    // only show if we are  1/4 of the way to the edge
     const panelsRect = gBrowser.tabbox.getBoundingClientRect();
     const panelsWidth = panelsRect.width;
     if (
-      event.clientX > panelsWidth / 2 ||
+      event.clientX > panelsRect.left + panelsWidth - 10 ||
       event.clientX < panelsRect.left + 10 ||
       event.clientY < panelsRect.top + 10 ||
       event.clientY > panelsRect.bottom - 10
     ) {
       return;
     }
+    // first quarter or last quarter of the screen, but not the middle
+    if (!(event.clientX < panelsRect.left + panelsWidth / 4 || event.clientX > panelsRect.left + (panelsWidth / 4) * 3)) {
+      return;
+    }
+    dt.mozCursor = 'default';
     const oldTab = this._lastOpenedTab;
     this._canDrop = true;
-    // wait some time before showing the split view
-    this._showSplitViewTimeout = setTimeout(() => {
+    {
       this._draggingTab = draggedTab;
       gBrowser.selectedTab = oldTab;
       this._hasAnimated = true;
@@ -219,22 +228,33 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       }
       const panelsWidth = gBrowser.tabbox.getBoundingClientRect().width;
       const halfWidth = panelsWidth / 2;
+      const side = event.clientX > halfWidth ? 'right' : 'left';
       this.fakeBrowser = document.createXULElement('vbox');
-      this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit);
+      window.addEventListener('dragend', this.onBrowserDragEndToSplit, { once: true });
       const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
       this.fakeBrowser.setAttribute('flex', '1');
       this.fakeBrowser.id = 'zen-split-view-fake-browser';
+      if (oldTab.splitView) {
+        this.fakeBrowser.setAttribute('has-split-view', 'true');
+      }
       gBrowser.tabbox.appendChild(this.fakeBrowser);
       this.fakeBrowser.style.setProperty('--zen-split-view-fake-icon', `url(${draggedTab.getAttribute('image')})`);
       draggedTab._visuallySelected = true;
+      this.fakeBrowser.setAttribute('side', side);
       this._finishAllAnimatingPromise = Promise.all([
         gZenUIManager.motion.animate(
           gBrowser.tabbox,
+          side === 'left'
+            ? {
+                paddingLeft: [0, `${halfWidth}px`],
+                paddingRight: 0,
+              }
+            : {
+                paddingRight: [0, `${halfWidth}px`],
+                paddingLeft: 0,
+              },
           {
-            paddingLeft: [0, `${halfWidth}px`],
-          },
-          {
-            duration: 0.15,
+            duration: 0.08,
             easing: 'ease-out',
           }
         ),
@@ -242,21 +262,26 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
           this.fakeBrowser,
           {
             width: [0, `${halfWidth - padding}px`],
-            marginLeft: [0, `${-halfWidth}px`],
+            ...(side === 'left'
+              ? {
+                  marginLeft: [0, `${-halfWidth}px`],
+                }
+              : {}),
           },
           {
-            duration: 0.15,
+            duration: 0.08,
             easing: 'ease-out',
           }
         ),
       ]);
       if (this._finishAllAnimatingPromise) {
         this._finishAllAnimatingPromise.then(() => {
+          this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit);
           this._canDrop = true;
           draggedTab._visuallySelected = true;
         });
       }
-    }, 100);
+    }
   }
 
   onBrowserDragEndToSplit(event) {
@@ -276,9 +301,6 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     ) {
       return;
     }
-    if (this._showSplitViewTimeout) {
-      clearTimeout(this._showSplitViewTimeout);
-    }
     if (!this._hasAnimated || !this.fakeBrowser) {
       return;
     }
@@ -289,17 +311,23 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       return;
     }
     this.fakeBrowser.classList.add('fade-out');
-    gBrowser.selectedTab = this._draggingTab;
+    const side = this.fakeBrowser.getAttribute('side');
+    if (this._draggingTab) this._draggingTab.setAttribute('zen-has-splitted', 'true');
+    this._lastOpenedTab = gBrowser.selectedTab;
     this._draggingTab = null;
     try {
       Promise.all([
         gZenUIManager.motion.animate(
           gBrowser.tabbox,
+          side === 'left'
+            ? {
+                paddingLeft: [`${halfWidth}px`, 0],
+              }
+            : {
+                paddingRight: [`${halfWidth}px`, 0],
+              },
           {
-            paddingLeft: [`${halfWidth}px`, 0],
-          },
-          {
-            duration: 0.15,
+            duration: 0.1,
             easing: 'ease-out',
           }
         ),
@@ -307,10 +335,14 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
           this.fakeBrowser,
           {
             width: [`${halfWidth - padding * 2}px`, 0],
-            marginLeft: [`${-(halfWidth - padding)}px`, 0],
+            ...(side === 'left'
+              ? {
+                  marginLeft: [`${-halfWidth}px`, 0],
+                }
+              : {}),
           },
           {
-            duration: 0.15,
+            duration: 0.1,
             easing: 'ease-out',
           }
         ),
@@ -861,7 +893,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       return false;
     }
     for (const tab of window.gBrowser.selectedTabs) {
-      if (tab.splitView) {
+      if (tab.splitView || tab.hasAttribute('zen-empty-tab') || tab.hasAttribute('zen-essential')) {
         return false;
       }
     }
@@ -949,7 +981,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       layoutTree: this.calculateLayoutTree(tabs, gridType),
     };
     this._data.push(splitData);
-    window.gBrowser.selectedTab = tabs[0];
+    if (!this._sessionRestoring) {
+      window.gBrowser.selectedTab = tabs[0];
+    }
 
     // Add tabs to the split view group
     let splitGroup = this._getSplitViewGroup(tabs);
@@ -963,10 +997,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);
   }
 
   /**
@@ -1498,7 +1532,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       delete this._hasAnimated;
       this.fakeBrowser.remove();
       this.fakeBrowser = null;
-      this._draggingTab._visuallySelected = false;
+      if (this._draggingTab) this._draggingTab._visuallySelected = false;
       if (select) {
         gBrowser.selectedTab = this._draggingTab;
         this._draggingTab = null;
@@ -1521,9 +1555,13 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       return false;
     }
 
+    const dropSide = this.fakeBrowser?.getAttribute('side');
     const containerRect = this.fakeBrowser.getBoundingClientRect();
     const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
-    const dropTarget = document.elementFromPoint(containerRect.left + containerRect.width + padding + 5, event.clientY);
+    const dropTarget = document.elementFromPoint(
+      dropSide === 'left' ? containerRect.left + containerRect.width + padding + 5 : containerRect.left - padding - 5,
+      event.clientY
+    );
     const browser = dropTarget?.closest('browser');
 
     if (!browser) {
@@ -1543,7 +1581,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       // Calculate which side of the target browser the drop occurred
       // const browserRect = browser.getBoundingClientRect();
       // const hoverSide = this.calculateHoverSide(event.clientX, event.clientY, browserRect);
-      const hoverSide = 'left';
+      const hoverSide = dropSide;
 
       if (droppedOnTab.splitView) {
         // Add to existing split view
@@ -1570,7 +1608,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);
@@ -1595,7 +1633,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         //}
 
         // Put tabs always as if it was dropped from the left
-        this.splitTabs([draggedTab, droppedOnTab], gridType, 1);
+        this.splitTabs(dropSide == 'left' ? [draggedTab, droppedOnTab] : [droppedOnTab, draggedTab], gridType, 1);
       }
     }
     if (this._finishAllAnimatingPromise) {
@@ -1628,7 +1666,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
   }
 
   handleTabDrop(event, urls, replace, inBackground) {
-    if (!inBackground || replace || urls.length !== 1) {
+    if (replace || urls.length !== 1) {
       return false;
     }
     const url = urls[0];
@@ -1686,6 +1724,43 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
 
     return null;
   }
+
+  storeDataForSessionStore() {
+    // We cant store any tab or browser elements in the session store
+    // so we need to store the tab indexes and group indexes
+    const data = this._data.map((group) => {
+      return {
+        groupId: group.tabs[0].group?.id,
+        gridType: group.gridType,
+      };
+    });
+    return data;
+  }
+
+  restoreDataFromSessionStore(data) {
+    if (!data) {
+      return;
+    }
+    this._sessionRestoring = true;
+    // We can just get the tab group with document.getElementById(group.groupId)
+    // and add the tabs to it
+    for (const group of data) {
+      const groupElement = document.getElementById(group.groupId);
+      if (groupElement) {
+        const tabs = groupElement.querySelectorAll('tab');
+        this.splitTabs([...tabs], group.gridType);
+      }
+    }
+    delete this._sessionRestoring;
+  }
+
+  onAfterWorkspaceSessionRestore() {
+    if (this.currentView >= 0) {
+      // Activate all browsers in the split view
+      this.currentView = -1;
+      this.onLocationChange(gBrowser.selectedTab.linkedBrowser);
+    }
+  }
 }
 
 window.gZenViewSplitter = new ZenViewSplitter();

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

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

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

@@ -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',
@@ -84,6 +77,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
     ChromeUtils.defineLazyGetter(this, 'tabContainer', () => document.getElementById('tabbrowser-tabs'));
     this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', '');
+
+    window.addEventListener('resize', this.onWindowResize.bind(this));
   }
 
   async afterLoadInit() {
@@ -111,12 +106,13 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
   }
 
-  selectEmptyTab() {
+  selectEmptyTab(newTabTarget = null) {
     if (this._emptyTab && gZenVerticalTabsManager._canReplaceNewTab) {
       gBrowser.selectedTab = this._emptyTab;
       return this._emptyTab;
     }
-    let tab = gZenUIManager.openAndChangeToTab(Services.prefs.getStringPref('browser.startup.homepage'));
+    const newTabUrl = newTabTarget || Services.prefs.getStringPref('browser.startup.homepage');
+    let tab = gZenUIManager.openAndChangeToTab(newTabUrl);
     if (window.uuid) {
       tab.setAttribute('zen-workspace-id', this.activeWorkspace);
     }
@@ -138,12 +134,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 });
   }
 
@@ -264,12 +263,13 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   _organizeTabsToWorkspaceSections(workspace, section, pinnedSection, tabs) {
     const workspaceTabs = Array.from(tabs).filter((tab) => tab.getAttribute('zen-workspace-id') === workspace.uuid);
     let firstNormalTab = null;
-    for (const tab of workspaceTabs) {
+    for (let tab of workspaceTabs) {
       if (tab.hasAttribute('zen-essential')) {
         continue; // Ignore essentials as they need to be in their own section
       }
       // remove tab from list
       tabs.splice(tabs.indexOf(tab), 1);
+      tab = tab.group ?? tab;
       if (tab.pinned) {
         pinnedSection.insertBefore(tab, pinnedSection.nextSibling);
       } else {
@@ -405,6 +405,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   _handleSwipeMayStart(event) {
     if (!this.workspaceEnabled) return;
+    if (event.target.closest('#zen-sidebar-bottom-buttons')) return;
 
     // Only handle horizontal swipes
     if (event.direction === event.DIRECTION_LEFT || event.direction === event.DIRECTION_RIGHT) {
@@ -602,14 +603,25 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       } catch (e) {
         console.error('ZenWorkspaces: Error initializing theme picker', e);
       }
-      this._selectStartPage();
+      this.onWindowResize();
+      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) {
@@ -626,8 +638,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._possiblyEmpty
       ) {
         this.selectEmptyTab();
         this._removedByStartupPage = true;
@@ -638,6 +649,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (gZenVerticalTabsManager._canReplaceNewTab && showed) {
       BrowserCommands.openTab();
     }
+    gZenViewSplitter.onAfterWorkspaceSessionRestore();
+  }
+
+  handleInitialTab(tab, isEmpty) {
+    if (isEmpty) {
+      tab._possiblyEmpty = true;
+    } else {
+      this._initialTab = tab;
+    }
   }
 
   initIndicatorContextMenu(indicator) {
@@ -856,6 +876,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     await ZenWorkspacesStorage.removeWorkspace(windowID);
     await this._propagateWorkspaceData();
     await this._updateWorkspacesChangeContextMenu();
+    this.onWindowResize();
   }
 
   isWorkspaceActive(workspace) {
@@ -1302,82 +1323,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() {
@@ -1404,15 +1398,16 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   _deleteAllTabsInWorkspace(workspaceID) {
-    for (let tab of this.allStoredTabs) {
-      if (tab.getAttribute('zen-workspace-id') === workspaceID) {
-        gBrowser.removeTab(tab, {
-          animate: false,
-          skipSessionStore: true,
-          closeWindowWithLastTab: false,
-        });
+    gBrowser.removeTabs(
+      Array.from(gBrowser.tabs).filter(
+        (tab) => tab.getAttribute('zen-workspace-id') === workspaceID && !tab.hasAttribute('zen-empty-tab')
+      ),
+      {
+        animate: false,
+        skipSessionStore: true,
+        closeWindowWithLastTab: false,
       }
-    }
+    );
   }
 
   moveTabToWorkspace(tab, workspaceID) {
@@ -1940,6 +1935,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       }
       await this.changeWorkspace(workspaceData);
     }
+    this.onWindowResize();
     return workspaceData;
   }
 
@@ -2298,7 +2294,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this._hasInitializedTabsStrip) {
       const children = this.tabboxChildren;
       children.pop(); // Remove the last child which is the new tab button
-      return children;
+      return [
+        ...document.querySelectorAll('#zen-essentials-container tab'),
+        ...document.querySelectorAll('#vertical-pinned-tabs-container tab'),
+        ...children,
+      ];
     }
 
     if (this._allStoredTabs) {
@@ -2330,6 +2330,23 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     return this._allStoredTabs;
   }
 
+  get allTabGroups() {
+    if (!this._hasInitializedTabsStrip) {
+      let children = this.tabboxChildren;
+      return children.filter((node) => node.tagName == 'tab-group');
+    }
+    const pinnedContainers = document.querySelectorAll('#vertical-pinned-tabs-container .zen-workspace-tabs-section');
+    const normalContainers = document.querySelectorAll('#tabbrowser-arrowscrollbox .zen-workspace-tabs-section');
+    const containers = [...pinnedContainers, ...normalContainers];
+    const tabGroups = [];
+    for (const container of containers) {
+      for (const tabGroup of container.querySelectorAll('tab-group')) {
+        tabGroups.push(tabGroup);
+      }
+    }
+    return tabGroups;
+  }
+
   get allUsedBrowsers() {
     if (!this._hasInitializedTabsStrip) {
       return gBrowser.browsers;
@@ -2358,9 +2375,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;
   }
@@ -2377,4 +2397,37 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     const workspace = workspaces.workspaces.find((workspace) => workspace.uuid === activeWorkspace);
     return workspace.containerTabId;
   }
+
+  onWindowResize(event = undefined) {
+    if (!(!event || event.target === window)) return;
+    // Check if workspace icons overflow the parent container
+    const parent = document.getElementById('zen-workspaces-button');
+    if (!parent || this._processingResize) {
+      return;
+    }
+    this._processingResize = true;
+    // Once we are overflowing, we align the buttons to always stay inside the container,
+    // meaning we need to remove the overflow attribute to reset the width
+    parent.removeAttribute('overflow');
+    requestAnimationFrame(() => {
+      const overflow = parent.scrollWidth > parent.clientWidth;
+      parent.toggleAttribute('overflow', overflow);
+      // The maximum width a button has when it overflows based on the number of buttons
+      const numButtons = parent.children.length + 1; // +1 to exclude the active button
+      const maxWidth = 100 / numButtons;
+      parent.style.setProperty('--zen-overflowed-workspace-button-width', `${maxWidth}%`);
+      this._processingResize = false;
+
+      // Scroll to the active workspace button if it's not visible
+      const activeButton = parent.querySelector('.zen-workspace-button.active');
+      if (!activeButton) {
+        return;
+      }
+      const parentRect = parent.getBoundingClientRect();
+      const activeRect = activeButton.getBoundingClientRect();
+      if (activeRect.left < parentRect.left || activeRect.right > parentRect.right) {
+        parent.scrollLeft = activeButton.offsetLeft;
+      }
+    });
+  }
 })();

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

@@ -7,6 +7,7 @@ var ZenWorkspacesStorage = {
       Weave: 'resource://services-sync/main.sys.mjs',
     });
 
+    if (!window.ZenWorkspaces) return;
     await this._ensureTable();
     await ZenWorkspaceBookmarksStorage.init();
   },

src/browser/base/zen-components/actors/ZenGlanceChild.sys.mjs

@@ -12,6 +12,9 @@ export class ZenGlanceChild extends JSWindowActorChild {
       case 'DOMContentLoaded':
         await this.initiateGlance();
         break;
+      case 'keydown':
+        this.onKeyDown(event);
+        break;
       default:
     }
   }
@@ -120,4 +123,13 @@ export class ZenGlanceChild extends JSWindowActorChild {
       this.openGlance(target);
     }
   }
+
+  onKeyDown(event) {
+    if (event.defaultPrevented || event.key !== 'Escape') {
+      return;
+    }
+    this.sendAsyncMessage('ZenGlance:CloseGlance', {
+      hasFocused: this.contentWindow.document.activeElement !== this.contentWindow.document.body,
+    });
+  }
 }

src/browser/base/zen-components/actors/ZenGlanceParent.sys.mjs

@@ -15,6 +15,16 @@ export class ZenGlanceParent extends JSWindowActorParent {
         this.openGlance(this.browsingContext.topChromeWindow, message.data);
         break;
       }
+      case 'ZenGlance:CloseGlance': {
+        const params = {
+          onTabClose: true,
+          ...message.data,
+        };
+        this.browsingContext.topChromeWindow.gZenGlanceManager.closeGlance(params);
+        break;
+      }
+      default:
+        console.warn(`[glance]: Unknown message: ${message.name}`);
     }
   }
 

src/browser/base/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs

@@ -50,7 +50,7 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
 
   initiateThemeMarketplace() {
     this.contentWindow.setTimeout(() => {
-      this.addIntallButtons();
+      this.addInstallButtons();
       this.injectMarkplaceAPI();
     }, 0);
   }
@@ -111,7 +111,7 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
     });
   }
 
-  async addIntallButtons() {
+  async addInstallButtons() {
     const actionButton = this.actionButton;
     const actionButtonUnnstall = this.actionButtonUninstall;
     const errorMessage = this.contentWindow.document.getElementById('install-theme-error');

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/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/places/content/editBookmark-js.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/components/places/content/editBookmark.js b/browser/components/places/content/editBookmark.js
-index 9f17174fdd9cc1eaefb4330da1e10f40eeda2f31..e2c38872ee3a5c45d2e288e67d33f9ce24cab2b9 100644
+index 9ab4e96cc4738d0ba549dca67b8559e0f9534f37..07b9087b0b17e33853d78c66ea1e5321a2bfef80 100644
 --- a/browser/components/places/content/editBookmark.js
 +++ b/browser/components/places/content/editBookmark.js
-@@ -370,6 +370,10 @@ var gEditItemOverlay = {
+@@ -386,6 +386,10 @@ var gEditItemOverlay = {
          this._keywordField.readOnly = this.readOnly;
        }
  
@@ -13,7 +13,7 @@ index 9f17174fdd9cc1eaefb4330da1e10f40eeda2f31..e2c38872ee3a5c45d2e288e67d33f9ce
        // Collapse the tag selector if the item does not accept tags.
        if (showOrCollapse("tagsRow", isBookmark || bulkTagging, "tags")) {
          this._initTagsField();
-@@ -682,6 +686,7 @@ var gEditItemOverlay = {
+@@ -692,6 +696,7 @@ var gEditItemOverlay = {
        if (this._paneInfo.isBookmark) {
          options.tags = this._element("tagsField").value;
          options.keyword = this._keyword;
@@ -21,7 +21,17 @@ index 9f17174fdd9cc1eaefb4330da1e10f40eeda2f31..e2c38872ee3a5c45d2e288e67d33f9ce
        }
  
        if (this._paneInfo.bulkTagging) {
-@@ -1232,6 +1237,148 @@ var gEditItemOverlay = {
+@@ -1193,6 +1198,9 @@ var gEditItemOverlay = {
+           case "editBMPanel_tagsSelectorExpander":
+             this.toggleTagsSelector().catch(console.error);
+             break;
++          case "editBMPanel_workspacesSelectorExpander":
++            this.onWorkspaceDropdownToggle();
++            break;
+         }
+         break;
+     }
+@@ -1279,6 +1287,148 @@ var gEditItemOverlay = {
    get bookmarkState() {
      return this._bookmarkState;
    },
@@ -170,7 +180,7 @@ index 9f17174fdd9cc1eaefb4330da1e10f40eeda2f31..e2c38872ee3a5c45d2e288e67d33f9ce
  };
  
  ChromeUtils.defineLazyGetter(gEditItemOverlay, "_folderTree", () => {
-@@ -1267,6 +1414,9 @@ for (let elt of [
+@@ -1317,6 +1467,9 @@ for (let elt of [
    "locationField",
    "keywordField",
    "tagsField",

src/browser/components/places/content/editBookmarkPanel-inc-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/places/content/editBookmarkPanel.inc.xhtml b/browser/components/places/content/editBookmarkPanel.inc.xhtml
-index 40366677b60123c66bf0739d1b2374b423d3061c..3e722dce6b21ab62535369f20afe5f0acd43838f 100644
+index 40366677b60123c66bf0739d1b2374b423d3061c..a2774e99726407d95011126ea2a272f08eaf0961 100644
 --- a/browser/components/places/content/editBookmarkPanel.inc.xhtml
 +++ b/browser/components/places/content/editBookmarkPanel.inc.xhtml
 @@ -12,14 +12,15 @@
@@ -20,11 +20,10 @@ index 40366677b60123c66bf0739d1b2374b423d3061c..3e722dce6b21ab62535369f20afe5f0a
    <label data-l10n-id="bookmark-overlay-location-2"
           class="editBMPanel_folderRow hideable"
           control="editBMPanel_folderMenuList"/>
-@@ -47,7 +48,26 @@
+@@ -47,7 +48,25 @@
              class="expander-down panel-button"
              data-l10n-id="bookmark-overlay-folders-expander2"/>
    </hbox>
--
 +  </hbox>
 +    <hbox flex="1" class="zenEditBMPanel_fieldContainer">
 +      <label data-l10n-id="zen-bookmark-edit-panel-workspace-selector"
@@ -37,12 +36,11 @@ index 40366677b60123c66bf0739d1b2374b423d3061c..3e722dce6b21ab62535369f20afe5f0a
 +                class="workspace-trigger">-</div>
 +        <button id="editBMPanel_workspacesSelectorExpander"
 +                class="expander-down panel-button"
-+                data-l10n-id="bookmark-overlay-tags-expander2"
-+                oncommand="gEditItemOverlay.onWorkspaceDropdownToggle();"/>
-+  
++                data-l10n-id="bookmark-overlay-tags-expander2"/>
++
 +      </div>
 +    </hbox>
-+  
+ 
 +    <ul id="editBMPanel_workspaceList" class="workspace-list hideable" hidden="true">
 +    </ul>
    <vbox id="editBMPanel_folderTreeRow"

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

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

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

@@ -20,15 +20,9 @@
       <checkbox id="zenWorkspacesHideDefaultContainer"
             data-l10n-id="zen-settings-workspaces-hide-default-container-indicator"
             preference="zen.workspaces.hide-default-container-indicator"/>
-      <checkbox id="zenWorkspacesDisplayAsIconStrip"
-            data-l10n-id="zen-settings-workspaces-display-as-icon-strip"
-            preference="zen.workspaces.show-icon-strip"/>
       <checkbox id="zenWorkspacesForceContainerTabsToWorkspace"
             data-l10n-id="zen-settings-workspaces-force-container-tabs-to-workspace"
             preference="zen.workspaces.force-container-workspace"/>
-      <checkbox id="zenWorkspaceHideDeactivatedWorkspaces"
-            data-l10n-id="zen-settings-workspaces-hide-deactivated-workspaces"
-            preference="zen.workspaces.hide-deactivated-workspaces"/>
 </groupbox>
 
 <hbox id="zenTabsUnloadCategory"

src/browser/components/sessionstore/SessionStore-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/sessionstore/SessionStore.sys.mjs b/browser/components/sessionstore/SessionStore.sys.mjs
-index f814772114948f87cbb3c3a7231c95ea1f68d776..f7d1f1f05f33b42be6856fad52ee323751af56ee 100644
+index f814772114948f87cbb3c3a7231c95ea1f68d776..38913eb9dee97b42697440560f7a1bab1ffe9f15 100644
 --- a/browser/components/sessionstore/SessionStore.sys.mjs
 +++ b/browser/components/sessionstore/SessionStore.sys.mjs
 @@ -3171,7 +3171,7 @@ var SessionStoreInternal = {
@@ -11,15 +11,15 @@ index f814772114948f87cbb3c3a7231c95ea1f68d776..f7d1f1f05f33b42be6856fad52ee3237
        return;
      }
  
-@@ -3881,6 +3881,7 @@ var SessionStoreInternal = {
-         aWindow.gBrowser.selectedTab = newTab;
-       }
+@@ -3876,6 +3876,7 @@ var SessionStoreInternal = {
+         Math.min(tabState.index, tabState.entries.length)
+       );
+       tabState.pinned = false;
++      tabState.zenEssential = undefined;
  
-+      if (aTab.hasAttribute("zenDefaultUserContextId")) newTab.setAttribute("zenDefaultUserContextId", true);
-       // Restore the state into the new tab.
-       this.restoreTab(newTab, tabState, {
-         restoreImmediately: aRestoreImmediately,
-@@ -5355,14 +5356,14 @@ var SessionStoreInternal = {
+       if (inBackground === false) {
+         aWindow.gBrowser.selectedTab = newTab;
+@@ -5355,14 +5356,15 @@ var SessionStoreInternal = {
      }
  
      let tabbrowser = aWindow.gBrowser;
@@ -29,6 +29,7 @@ index f814772114948f87cbb3c3a7231c95ea1f68d776..f7d1f1f05f33b42be6856fad52ee3237
      let winData = this._windows[aWindow.__SSi];
      let tabsData = (winData.tabs = []);
  
++    winData.splitViewData = aWindow.gZenViewSplitter?.storeDataForSessionStore();
      // update the internal state data for this window
      for (let tab of tabs) {
 -      if (tab == aWindow.FirefoxViewHandler.tab) {
@@ -36,7 +37,7 @@ index f814772114948f87cbb3c3a7231c95ea1f68d776..f7d1f1f05f33b42be6856fad52ee3237
          continue;
        }
        let tabData = lazy.TabState.collect(tab, TAB_CUSTOM_VALUES.get(tab));
-@@ -5381,7 +5382,7 @@ var SessionStoreInternal = {
+@@ -5381,7 +5383,7 @@ var SessionStoreInternal = {
      // We don't store the Firefox View tab in Session Store, so if it was the last selected "tab" when
      // a window is closed, point to the first item in the tab strip instead (it will never be the Firefox View tab,
      // since it's only inserted into the tab strip after it's selected).
@@ -45,7 +46,15 @@ index f814772114948f87cbb3c3a7231c95ea1f68d776..f7d1f1f05f33b42be6856fad52ee3237
        selectedIndex = 1;
        winData.title = tabbrowser.tabs[0].label;
      }
-@@ -6086,6 +6087,18 @@ var SessionStoreInternal = {
+@@ -5538,6 +5540,7 @@ var SessionStoreInternal = {
+         winData.tabs,
+         winData.groups ?? []
+       );
++      aWindow.gZenViewSplitter?.restoreDataFromSessionStore(winData.splitViewData);
+       this._log.debug(
+         `restoreWindow, createTabsForSessionRestore returned ${tabs.length} tabs`
+       );
+@@ -6086,8 +6089,23 @@ var SessionStoreInternal = {
  
      // Most of tabData has been restored, now continue with restoring
      // attributes that may trigger external events.
@@ -61,6 +70,12 @@ index f814772114948f87cbb3c3a7231c95ea1f68d776..f7d1f1f05f33b42be6856fad52ee3237
 +    if (tabData.zenPinnedId) {
 +      tab.setAttribute("zen-pin-id", tabData.zenPinnedId);
 +    }
++    if (tabData.zenDefaultUserContextId) {
++      tab.setAttribute("zenDefaultUserContextId", true);
++    }
  
-     if (tabData.pinned) {
+-    if (tabData.pinned) {
++    if (tabData.pinned || tabData.zenEssential) {
        tabbrowser.pinTab(tab);
+     } else {
+       tabbrowser.unpinTab(tab);

src/browser/components/sessionstore/TabGroupState-sys-mjs.patch

@@ -0,0 +1,14 @@
+diff --git a/browser/components/sessionstore/TabGroupState.sys.mjs b/browser/components/sessionstore/TabGroupState.sys.mjs
+index 2406837c67d8ff590aa0db6c75ede81e53097506..b69fb7862cd76c891ef61e29aca8c10bab2f5d7e 100644
+--- a/browser/components/sessionstore/TabGroupState.sys.mjs
++++ b/browser/components/sessionstore/TabGroupState.sys.mjs
+@@ -66,6 +66,9 @@ class _TabGroupState {
+       name: tabGroup.label,
+       color: tabGroup.color,
+       collapsed: tabGroup.collapsed,
++      pinned: tabGroup.pinned,
++      essential: tabGroup.essential,
++      splitView: tabGroup.hasAttribute("split-view-group"),
+     };
+   }
+ 

src/browser/components/sessionstore/TabState-sys-mjs.patch

@@ -1,19 +1,15 @@
 diff --git a/browser/components/sessionstore/TabState.sys.mjs b/browser/components/sessionstore/TabState.sys.mjs
-index 8f7ed557e6aa61e7e16ed4a8d785ad5fe651b3d8..4c9f17408b912a2c51ebc1a670062203bf4994f3 100644
+index 8f7ed557e6aa61e7e16ed4a8d785ad5fe651b3d8..254849e13f7566029dc780c45e376e0f0d427cb5 100644
 --- a/browser/components/sessionstore/TabState.sys.mjs
 +++ b/browser/components/sessionstore/TabState.sys.mjs
-@@ -80,10 +80,19 @@ class _TabState {
-       tabData.muteReason = tab.muteReason;
-     }
- 
--    if (tab.group) {
-+    if (tab.group && !tab.group.hasAttribute("split-view-group")) {
+@@ -84,6 +84,16 @@ class _TabState {
        tabData.groupId = tab.group.id;
      }
  
 +    tabData.zenWorkspace = tab.getAttribute("zen-workspace-id");
 +    tabData.zenPinnedId = tab.getAttribute("zen-pin-id");
 +    tabData.zenEssential = tab.getAttribute("zen-essential");
++    tabData.pinned = tabData.pinned || tabData.zenEssential;
 +    tabData.zenDefaultUserContextId = tab.getAttribute("zenDefaultUserContextId");
 +    tabData.zenPinnedEntry = tab.getAttribute("zen-pinned-entry");
 +    tabData.zenPinnedIcon = tab.getAttribute("zen-pinned-icon");

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..c62727bad57eda3b9d9a73c1df739a92f194f0c2 100644
+index 628aa6596627c85efe361fc1ece8fd58f7ee653e..2a9ac30c7e270586ff4502046e5b1ae7409d0582 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..c62727bad57eda3b9d9a73c1df739a92
        }
        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..c62727bad57eda3b9d9a73c1df739a92
          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..c62727bad57eda3b9d9a73c1df739a92
          });
        } 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..c62727bad57eda3b9d9a73c1df739a92
        if (
          aIconURL &&
          !aLoadingPrincipal &&
-@@ -1028,6 +1073,9 @@
+@@ -1028,6 +1074,9 @@
          );
          return;
        }
@@ -109,7 +117,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
  
        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..c62727bad57eda3b9d9a73c1df739a92
          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..c62727bad57eda3b9d9a73c1df739a92
        // 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..c62727bad57eda3b9d9a73c1df739a92
          return false;
        }
  
-@@ -1851,7 +1903,7 @@
+@@ -1851,7 +1904,7 @@
          newIndex = this.selectedTab._tPos + 1;
        }
  
@@ -145,7 +153,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
          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..c62727bad57eda3b9d9a73c1df739a92
      } = {}) {
        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..c62727bad57eda3b9d9a73c1df739a92
          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..c62727bad57eda3b9d9a73c1df739a92
        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..c62727bad57eda3b9d9a73c1df739a92
        } 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..c62727bad57eda3b9d9a73c1df739a92
        } = {}
      ) {
        // 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..c62727bad57eda3b9d9a73c1df739a92
        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..c62727bad57eda3b9d9a73c1df739a92
          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..c62727bad57eda3b9d9a73c1df739a92
          }));
  
          if (focusUrlBar) {
-@@ -2845,6 +2914,9 @@
+@@ -2845,6 +2915,9 @@
          }
        }
  
@@ -238,7 +246,24 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        // Additionally send pinned tab events
        if (pinned) {
          this._notifyPinnedStatus(t);
-@@ -2904,6 +2976,7 @@
+@@ -2865,12 +2938,15 @@
+      * @param {string} [label=]
+      * @returns {MozTabbrowserTabGroup}
+      */
+-    _createTabGroup(id, color, collapsed, label = "") {
++    _createTabGroup(id, color, collapsed, label = "", pinned = false, essential = false, splitViewGroup = false) {
+       let group = document.createXULElement("tab-group", { is: "tab-group" });
+       group.id = id;
+       group.collapsed = collapsed;
+       group.color = color;
+       group.label = label;
++      group.pinned = pinned;
++      group.essential = essential;
++      if (splitViewGroup) group.setAttribute('split-view-group', true);
+       return group;
+     }
+ 
+@@ -2904,6 +2980,7 @@
          label = "",
          insertBefore = null,
          showCreateUI = false,
@@ -246,7 +271,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        } = {}
      ) {
        if (!tabs?.length) {
-@@ -2918,7 +2991,12 @@
+@@ -2918,7 +2995,12 @@
          id = `${Date.now()}-${Math.round(Math.random() * 100)}`;
        }
        let group = this._createTabGroup(id, color, false, label);
@@ -256,11 +281,11 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
 +      }
 +      group.essential = tabs.some(tab => tab.hasAttribute("essential"));
 +      group.pinned = group.essential || tabs.some(tab => tab.pinned);
-+      (group.essential ? document.getElementById("zen-essentials-container") : (group.pinned ? this.verticalPinnedTabsContainer : this.tabContainer)).insertBefore(
++      ((insertBefore?.group ?? insertBefore).parentNode).insertBefore(
          group,
          insertBefore?.group ?? insertBefore
        );
-@@ -3126,6 +3204,7 @@
+@@ -3126,6 +3208,7 @@
          initialBrowsingContextGroupId,
          openWindowInfo,
          skipLoad,
@@ -268,7 +293,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        }
      ) {
        // If we don't have a preferred remote type, and we have a remote
-@@ -3189,6 +3268,7 @@
+@@ -3189,6 +3272,7 @@
            openWindowInfo,
            name,
            skipLoad,
@@ -276,7 +301,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
          });
        }
  
-@@ -3367,6 +3447,27 @@
+@@ -3367,6 +3451,27 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -304,7 +329,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3380,6 +3481,7 @@
+@@ -3380,6 +3485,7 @@
              restoreTabsLazily && !select && !tabData.pinned;
  
            let url = "about:blank";
@@ -312,7 +337,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
            if (tabData.entries?.length) {
              let activeIndex = (tabData.index || tabData.entries.length) - 1;
              // Ensure the index is in bounds.
-@@ -3415,7 +3517,27 @@
+@@ -3415,7 +3521,27 @@
              skipLoad: true,
              preferredRemoteType,
            });
@@ -341,7 +366,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
            if (select) {
              tabToSelect = tab;
            }
-@@ -3428,8 +3550,8 @@
+@@ -3428,8 +3554,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 +377,39 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
              tab.toggleAttribute("pinned", true);
              this.tabContainer._invalidateCachedTabs();
              // Then ensure all the tab open/pinning information is sent.
-@@ -3504,6 +3626,9 @@
+@@ -3439,7 +3565,8 @@
+             // needs calling:
+             shouldUpdateForPinnedTabs = true;
+           }
+-        } else if (tabData.groupId) {
++        }
++        if (tabData.groupId) {
+           let { groupId } = tabData;
+           const tabGroup = tabGroupWorkingData.get(groupId);
+           // if a tab refers to a tab group we don't know, skip any group
+@@ -3453,7 +3580,10 @@
+                 tabGroup.stateData.id,
+                 tabGroup.stateData.color,
+                 tabGroup.stateData.collapsed,
+-                tabGroup.stateData.name
++                tabGroup.stateData.name,
++                tabGroup.stateData.pinned,
++                tabGroup.stateData.essential,
++                tabGroup.stateData.splitView,
+               );
+               tabsFragment.appendChild(tabGroup.node);
+             }
+@@ -3504,6 +3634,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 +3826,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 +418,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
          if (
            !bulkOrderedOpen &&
            ((openerTab &&
-@@ -3736,18 +3861,18 @@
+@@ -3736,18 +3869,18 @@
  
        // Ensure index is within bounds.
        if (tab.pinned) {
@@ -394,7 +441,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
          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 +4192,9 @@
          return;
        }
  
@@ -404,7 +451,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        this.removeTabs(selectedTabs);
      }
  
-@@ -4391,6 +4519,7 @@
+@@ -4391,6 +4527,7 @@
          skipSessionStore,
        } = {}
      ) {
@@ -412,7 +459,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        if (UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.finish("browser.tabs.opening", window);
        }
-@@ -4407,6 +4536,12 @@
+@@ -4407,6 +4544,12 @@
          TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
        }
  
@@ -425,7 +472,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -4421,7 +4556,9 @@
+@@ -4421,7 +4564,9 @@
        // frame created for it (for example, by updating the visually selected
        // state).
        let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -436,7 +483,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -4435,7 +4572,6 @@
+@@ -4435,7 +4580,6 @@
          TelemetryStopwatch.cancel("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
          return;
        }
@@ -444,7 +491,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        let lockTabSizing =
          !this.tabContainer.verticalMode &&
          !aTab.pinned &&
-@@ -4574,14 +4710,14 @@
+@@ -4574,14 +4718,14 @@
          !!this.tabsInCollapsedTabGroups.length;
        if (
          aTab.visible &&
@@ -461,7 +508,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
  
          if (closeWindow) {
            // We've already called beforeunload on all the relevant tabs if we get here,
-@@ -4605,6 +4741,7 @@
+@@ -4605,6 +4749,7 @@
  
          newTab = true;
        }
@@ -469,18 +516,18 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        aTab._endRemoveArgs = [closeWindow, newTab];
  
        // swapBrowsersAndCloseOther will take care of closing the window without animation.
-@@ -4645,9 +4782,7 @@
+@@ -4645,9 +4790,7 @@
        aTab._mouseleave();
  
        if (newTab) {
 -        this.addTrustedTab(BROWSER_NEW_TAB_URL, {
 -          skipAnimation: true,
 -        });
-+        ZenWorkspaces.selectEmptyTab();
++        ZenWorkspaces.selectEmptyTab(BROWSER_NEW_TAB_URL);
        } else {
          TabBarVisibility.update();
        }
-@@ -4776,6 +4911,8 @@
+@@ -4776,6 +4919,8 @@
          this.tabs[i]._tPos = i;
        }
  
@@ -489,7 +536,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        if (!this._windowIsClosing) {
          if (wasPinned) {
            this.tabContainer._positionPinnedTabs();
-@@ -4994,7 +5131,7 @@
+@@ -4994,7 +5139,7 @@
          !excludeTabs.has(aTab.owner) &&
          Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
        ) {
@@ -498,7 +545,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        }
  
        // Try to find a remaining tab that comes after the given tab
-@@ -5016,7 +5153,7 @@
+@@ -5016,7 +5161,7 @@
        }
  
        if (tab) {
@@ -507,7 +554,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        }
  
        // If no qualifying visible tab was found, see if there is a tab in
-@@ -5434,10 +5571,10 @@
+@@ -5434,10 +5579,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      }
  
@@ -520,7 +567,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -5675,7 +5812,7 @@
+@@ -5675,7 +5820,7 @@
  
        // Don't allow mixing pinned and unpinned tabs.
        if (aTab.pinned) {
@@ -529,13 +576,11 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        } else {
          aIndex = Math.max(aIndex, this.pinnedTabCount);
        }
-@@ -5684,11 +5821,18 @@
-       }
+@@ -5685,10 +5830,17 @@
  
        this._handleTabMove(aTab, () => {
--        let neighbor = this.tabs[aIndex];
+         let neighbor = this.tabs[aIndex];
 -        if (forceStandaloneTab && neighbor.group) {
-+        let neighbor = this.tabs.filter(tab => !tab.hasAttribute("zen-glance-tab"))[aIndex];
 +        const _tPos = aTab._tPos;
 +        if ((forceStandaloneTab && neighbor.group) || neighbor.group?.hasAttribute("split-view-group")) {
            neighbor = neighbor.group;
@@ -551,7 +596,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
            neighbor.after(aTab);
          } else {
            this.tabContainer.insertBefore(aTab, neighbor);
-@@ -5697,7 +5841,7 @@
+@@ -5697,7 +5849,7 @@
      }
  
      moveTabToGroup(aTab, aGroup) {
@@ -560,7 +605,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
          return;
        }
        if (aTab.group && aTab.group.id === aGroup.id) {
-@@ -5721,6 +5865,10 @@
+@@ -5721,6 +5873,10 @@
  
        moveActionCallback();
  
@@ -571,7 +616,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        // Clear tabs cache after moving nodes because the order of tabs may have
        // changed.
        this.tabContainer._invalidateCachedTabs();
-@@ -5771,7 +5919,7 @@
+@@ -5771,7 +5927,7 @@
          createLazyBrowser,
        };
  
@@ -580,7 +625,16 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
        if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) {
          params.pinned = true;
        }
-@@ -7415,6 +7563,7 @@
+@@ -6513,7 +6669,7 @@
+             // preventDefault(). It will still raise the window if appropriate.
+             break;
+           }
+-          this.selectedTab = tab;
++          ZenWorkspaces.switchTabIfNeeded(tab);
+           window.focus();
+           aEvent.preventDefault();
+           break;
+@@ -7415,6 +7571,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -588,7 +642,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
            }
-@@ -8381,7 +8530,7 @@ var TabContextMenu = {
+@@ -8381,7 +8538,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !multiselectionContext;
@@ -597,7 +651,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
      // Move Tab items
      let contextMoveTabOptions = document.getElementById(
        "context_moveTabOptions"
-@@ -8414,7 +8563,7 @@ var TabContextMenu = {
+@@ -8414,7 +8571,7 @@ var TabContextMenu = {
      let contextMoveTabToStart = document.getElementById("context_moveToStart");
      let isFirstTab =
        tabsToMove[0] == visibleTabs[0] ||
@@ -606,7 +660,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..c62727bad57eda3b9d9a73c1df739a92
      contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
  
      document.getElementById("context_openTabInWindow").disabled =
-@@ -8647,6 +8796,7 @@ var TabContextMenu = {
+@@ -8647,6 +8804,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..64e93a414f1544b89af05c636c587620036896db 100644
+index fa96568d366fd3608f9bd583fa793150bd815c8b..13a870629a98304cb18dc09b5ae075d734668f2a 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..64e93a414f1544b89af05c636c587620
          }
          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..64e93a414f1544b89af05c636c587620
          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..64e93a414f1544b89af05c636c587620
          }
  
          /* 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..64e93a414f1544b89af05c636c587620
          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,10 +48,14 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        if (
          (effects == "move" || effects == "copy") &&
          this == draggedTab.container &&
-@@ -996,6 +1002,14 @@
+@@ -996,6 +1001,18 @@
  
        this._tabDropIndicator.hidden = true;
        event.stopPropagation();
++      if (draggedTab?.hasAttribute("zen-has-splitted")) {
++        draggedTab.removeAttribute("zen-has-splitted");
++        draggedTab._visuallySelected = false;
++      }
 +      if (draggedTab && dropEffect == "move") {
 +        let moved = gZenPinnedTabManager.moveToAnotherTabContainerIfNecessary(event, movingTabs);
 +
@@ -71,7 +67,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        if (draggedTab && dropEffect == "copy") {
          // copy the dropped tab (wherever it's from)
          let newIndex = this._getDropIndex(event);
-@@ -1034,10 +1048,11 @@
+@@ -1034,10 +1051,11 @@
            }
          } else {
            let pinned = draggedTab.pinned;
@@ -87,7 +83,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            );
            let size = this.verticalMode ? "height" : "width";
            let screenAxis = this.verticalMode ? "screenY" : "screenX";
-@@ -1114,7 +1129,7 @@
+@@ -1114,7 +1132,7 @@
                let postTransitionCleanup = () => {
                  tab.removeAttribute("tabdrop-samewindow");
  
@@ -96,7 +92,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
                  if (dropIndex !== false) {
                    gBrowser.moveTabTo(tab, dropIndex);
                    if (!directionForward) {
-@@ -1122,7 +1137,7 @@
+@@ -1122,7 +1140,7 @@
                    }
                  }
                };
@@ -105,7 +101,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
                  postTransitionCleanup();
                } else {
                  let onTransitionEnd = transitionendEvent => {
-@@ -1249,7 +1264,7 @@
+@@ -1249,7 +1267,7 @@
                return;
              }
            }
@@ -114,7 +110,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            gBrowser.loadTabs(urls, {
              inBackground,
              replace,
-@@ -1279,13 +1294,23 @@
+@@ -1279,13 +1297,23 @@
          return;
        }
  
@@ -140,7 +136,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        ) {
          delete draggedTab._dragData;
          return;
-@@ -1517,7 +1542,7 @@
+@@ -1517,7 +1545,7 @@
      }
  
      get newTabButton() {
@@ -149,7 +145,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
      }
  
      get verticalMode() {
-@@ -1537,28 +1562,40 @@
+@@ -1537,29 +1565,41 @@
        if (this.#allTabs) {
          return this.#allTabs;
        }
@@ -193,12 +189,13 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
      }
  
      get allGroups() {
--      let children = Array.from(this.arrowScrollbox.children);
-+      let children = ZenWorkspaces.tabboxChildren;
-       return children.filter(node => node.tagName == "tab-group");
+       let children = Array.from(this.arrowScrollbox.children);
+-      return children.filter(node => node.tagName == "tab-group");
++      return ZenWorkspaces.allTabGroups;
      }
  
-@@ -1579,7 +1616,7 @@
+     /**
+@@ -1579,7 +1619,7 @@
       */
      get visibleTabs() {
        if (!this.#visibleTabs) {
@@ -207,7 +204,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        }
        return this.#visibleTabs;
      }
-@@ -1613,10 +1650,8 @@
+@@ -1613,10 +1653,8 @@
          return this.#focusableItems;
        }
  
@@ -220,7 +217,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
  
        let focusableItems = [];
        for (let child of children) {
-@@ -1632,6 +1667,7 @@
+@@ -1632,6 +1670,7 @@
        }
  
        this.#focusableItems = [
@@ -228,7 +225,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          ...verticalPinnedTabsContainer.children,
          ...focusableItems,
        ];
-@@ -1642,6 +1678,7 @@
+@@ -1642,6 +1681,7 @@
      _invalidateCachedTabs() {
        this.#allTabs = null;
        this._invalidateCachedVisibleTabs();
@@ -236,7 +233,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
      }
  
      _invalidateCachedVisibleTabs() {
-@@ -1656,8 +1693,8 @@
+@@ -1656,8 +1696,8 @@
      #isContainerVerticalPinnedExpanded(tab) {
        return (
          this.verticalMode &&
@@ -247,7 +244,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        );
      }
  
-@@ -1672,7 +1709,7 @@
+@@ -1672,7 +1712,7 @@
  
        if (node == null) {
          // We have a container for non-tab elements at the end of the scrollbox.
@@ -256,7 +253,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        }
  
        node.before(tab);
-@@ -1772,7 +1809,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.
@@ -265,7 +262,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            const newTab2 = this.newTabButton;
            const newTabVertical = document.getElementById(
              "vertical-tabs-newtab-button"
-@@ -1855,7 +1892,7 @@
+@@ -1855,7 +1895,7 @@
            let rect = ele => {
              return window.windowUtils.getBoundsWithoutFlushing(ele);
            };
@@ -274,7 +271,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            if (tab && rect(tab).width <= this._tabClipWidth) {
              this.setAttribute("closebuttons", "activetab");
            } else {
-@@ -1867,10 +1904,12 @@
+@@ -1867,10 +1907,12 @@
  
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -287,7 +284,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -1882,7 +1921,7 @@
+@@ -1882,7 +1924,7 @@
          return;
        }
  
@@ -296,7 +293,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        if (!tabs.length) {
          return;
        }
-@@ -1918,7 +1957,7 @@
+@@ -1918,7 +1960,7 @@
          if (isEndTab && !this._hasTabTempMaxWidth) {
            return;
          }
@@ -305,7 +302,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          // 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 +1972,7 @@
+@@ -1933,7 +1975,7 @@
          let tabsToReset = [];
          for (let i = numPinned; i < tabs.length; i++) {
            let tab = tabs[i];
@@ -314,7 +311,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            if (!isEndTab) {
              // keep tabs the same width
              tab.style.transition = "none";
-@@ -1999,16 +2038,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.
@@ -337,7 +334,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          }
        }
  
-@@ -2016,9 +2054,7 @@
+@@ -2016,9 +2057,7 @@
      }
  
      _resetVerticalPinnedTabs() {
@@ -348,7 +345,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
  
        if (!verticalTabsContainer.children.length) {
          return;
-@@ -2031,8 +2067,8 @@
+@@ -2031,8 +2070,8 @@
      }
  
      _positionPinnedTabs() {
@@ -359,7 +356,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        let absPositionHorizontalTabs =
          this.overflowing && tabs.length > numPinned && numPinned > 0;
  
-@@ -2041,7 +2077,7 @@
+@@ -2041,7 +2080,7 @@
  
        if (this.verticalMode) {
          this._updateVerticalPinnedTabs();
@@ -368,7 +365,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          let layoutData = this._pinnedTabsLayoutCache;
          let uiDensity = document.documentElement.getAttribute("uidensity");
          if (!layoutData || layoutData.uiDensity != uiDensity) {
-@@ -2113,7 +2149,7 @@
+@@ -2113,7 +2152,7 @@
          return;
        }
  
@@ -377,7 +374,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2121,7 +2157,7 @@
+@@ -2121,7 +2160,7 @@
        dragData.animLastScreenX = screenX;
  
        let { width: tabWidth, height: tabHeight } =
@@ -386,7 +383,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        let shiftSizeX = tabWidth * movingTabs.length;
        let shiftSizeY = tabHeight;
        dragData.tabWidth = tabWidth;
-@@ -2296,10 +2332,11 @@
+@@ -2296,10 +2335,11 @@
        }
  
        let pinned = draggedTab.pinned;
@@ -402,7 +399,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        );
  
        if (this.#rtlMode) {
-@@ -2348,7 +2385,11 @@
+@@ -2348,7 +2388,11 @@
        translate = Math.min(Math.max(translate, firstBound), lastBound);
  
        for (let tab of movingTabs) {
@@ -415,7 +412,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        }
  
        dragData.translatePos = translate;
-@@ -2484,12 +2525,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) {
@@ -433,7 +430,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          if (tab.group?.tabs[0] == tab) {
            tab.group.style.setProperty(
              "--tabgroup-dragover-transform",
-@@ -2541,8 +2586,9 @@
+@@ -2541,8 +2589,9 @@
        );
      }
  
@@ -445,7 +442,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          return;
        }
  
-@@ -2553,6 +2599,7 @@
+@@ -2553,6 +2602,7 @@
          tab.style.transform = "";
          if (tab.group) {
            tab.group.style.removeProperty("--tabgroup-dragover-transform");
@@ -453,7 +450,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          }
          tab.removeAttribute("dragover-createGroup");
        }
-@@ -2604,7 +2651,7 @@
+@@ -2604,7 +2654,7 @@
            movingTab._moveTogetherSelectedTabsData.newIndex = movingTabNewIndex;
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -462,7 +459,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -2707,9 +2754,9 @@
+@@ -2707,9 +2757,9 @@
        function newIndex(aTab, index) {
          // Don't allow mixing pinned and unpinned tabs.
          if (aTab.pinned) {
@@ -474,7 +471,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        }
      }
  
-@@ -2793,7 +2840,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/urlbar-searchbar-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
-index 574f83af7fa49ddcdff6711ca8b1d3bed1a35e0c..7919f21f6b0b4df2f197b9c6f0e134ff85d50d0a 100644
+index 574f83af7fa49ddcdff6711ca8b1d3bed1a35e0c..c2e8cb8b37438176db07a47e1e975ae1aea42252 100644
 --- a/browser/themes/shared/urlbar-searchbar.css
 +++ b/browser/themes/shared/urlbar-searchbar.css
 @@ -5,7 +5,7 @@
@@ -22,14 +22,3 @@ index 574f83af7fa49ddcdff6711ca8b1d3bed1a35e0c..7919f21f6b0b4df2f197b9c6f0e134ff
    width: calc(var(--urlbar-width) + 2 * var(--urlbar-margin-inline));
  
    > .urlbar-input-container {
-@@ -583,8 +585,8 @@
- .urlbar-revert-button,
- .urlbar-go-button,
- .search-go-button {
--  width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
--  height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
-+  width: calc(var(--urlbar-min-height) + 2px /* border */ - 2 * var(--urlbar-container-padding));
-+  height: calc(var(--urlbar-min-height) + 2px /* border */ - 2 * var(--urlbar-container-padding));
-   border-radius: var(--urlbar-icon-border-radius);
-   padding: var(--urlbar-icon-padding);
-   color: inherit;

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/browser/themes/windows/browser-css.patch

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

src/dom/chrome-webidl/MediaController-webidl.patch

@@ -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,22 @@
+diff --git a/dom/html/HTMLMediaElement.cpp b/dom/html/HTMLMediaElement.cpp
+index 0b8dee1ca22b1f0ddcf7e6a976f606990104b56e..db31132b67a041abf6bf3e5ed68ab20380fdc293 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);
+@@ -6952,6 +6953,9 @@ void HTMLMediaElement::FireTimeUpdate(TimeupdateType aType) {
+     DispatchAsyncEvent(std::move(runner));
+     mQueueTimeUpdateRunnerTime = TimeStamp::Now();
+     mLastCurrentTime = CurrentTime();
++    if (aType == TimeupdateType::eMandatory) {
++      mMediaControlKeyListener->NotifyMediaPositionState();
++    }
+   }
+   if (mFragmentEnd >= 0.0 && CurrentTime() >= mFragmentEnd) {
+     Pause();

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/security/mac/hardenedruntime/v2/production/firefox-browser-xml.patch

@@ -1,5 +1,5 @@
 diff --git a/security/mac/hardenedruntime/v2/production/firefox.browser.xml b/security/mac/hardenedruntime/v2/production/firefox.browser.xml
-index abbf33e9d2b3c9d1e0a34bd46e7cd289c435533b..4d988ca8201fa6aba6ca049e97d3cdc6b772b5eb 100644
+index abbf33e9d2b3c9d1e0a34bd46e7cd289c435533b..d580b156fed13f4de8eb73e5c29c646a7a22a1d2 100644
 --- a/security/mac/hardenedruntime/v2/production/firefox.browser.xml
 +++ b/security/mac/hardenedruntime/v2/production/firefox.browser.xml
 @@ -26,7 +26,7 @@
@@ -7,7 +7,7 @@ index abbf33e9d2b3c9d1e0a34bd46e7cd289c435533b..4d988ca8201fa6aba6ca049e97d3cdc6
      <!-- Required for com.apple.developer.web-browser.public-key-credential -->
      <key>com.apple.application-identifier</key>
 -    <string>43AQ936H96.org.mozilla.firefox</string>
-+    <string>H36NPCN86W.app.zen-browser.zen</string>
++    <string>9V5K9TP787.app.zen-browser.zen</string>
  
      <!-- For platform passkey (webauthn) support -->
      <key>com.apple.developer.web-browser.public-key-credential</key><true/>

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/toolkit/components/pictureinpicture/content/player-js.patch

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

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

@@ -0,0 +1,37 @@
+diff --git a/toolkit/components/pictureinpicture/content/player.xhtml b/toolkit/components/pictureinpicture/content/player.xhtml
+index 440ce51e8e67e4d3a7bdcb78f38f2fb6684c9848..38912579310314a13d516328ec770db6b589d243 100644
+--- a/toolkit/components/pictureinpicture/content/player.xhtml
++++ b/toolkit/components/pictureinpicture/content/player.xhtml
+@@ -17,6 +17,7 @@
+     <link rel="localization" href="browser/browserSets.ftl"/>
+     <script src="chrome://global/content/pictureinpicture/player.js"></script>
+     <title data-l10n-id="pictureinpicture-player-title"></title>
++    <link rel="localization" href="browser/zen-general.ftl"/>
+   </head>
+ 
+   <body>
+@@ -52,13 +53,22 @@
+       tabindex="10"
+ #endif
+       />
+-      <button id="unpip"
+-      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-unpip-btn" data-l10n-attrs="tooltip"
++      <button id="minimize"
++      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-minimize-btn" data-l10n-attrs="tooltip"
+ #ifdef XP_MACOSX
+       mac="true"
+       tabindex="10"
+ #else
+       tabindex="9"
++#endif
++      />
++      <button id="unpip"
++      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-unpip-btn" data-l10n-attrs="tooltip"
++#ifdef XP_MACOSX
++      mac="true"
++      tabindex="11"
++#else
++      tabindex="10"
+ #endif
+       />
+     <div id="controls-bottom-gradient" class="control-item"></div>

src/toolkit/content/widgets/findbar-js.patch

@@ -0,0 +1,12 @@
+diff --git a/toolkit/content/widgets/findbar.js b/toolkit/content/widgets/findbar.js
+index 8ca512e0b212bb6e25ed37e7edb4f8e2587d5bb0..5abfff92b3a8df5d138082af96419668a2c8a9bb 100644
+--- a/toolkit/content/widgets/findbar.js
++++ b/toolkit/content/widgets/findbar.js
+@@ -1188,6 +1188,7 @@
+      *   e.g. <command name="cmd_find" oncommand="gFindBar.onFindCommand();"/>
+      */
+     onFindCommand() {
++      if (gBrowser?.selectedTab?.hasAttribute("zen-empty-tab")) return;
+       return this.startFind(this.FIND_NORMAL);
+     }
+ 

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

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

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

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

surfer.json

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

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