chore: Rewrite motion to animejs, b=no-bug, c=common, compact-mode, glance, media, split-view, vendor, welcome, workspaces

feat: Fix aligment issues with initial gradient text, b=no-bug, c=common, workspaces
fix: Fixed workspace overflows not working and refined new HSL picker, b=no-bug, c=tabs, common, compact-mode, workspaces
2025-09-05 19:08:18 +00:00 · 2025-06-24 18:43:12 +02:00 · 2025-06-24 17:53:11 +02:00 · 2025-06-24 17:44:22 +02:00 · 2025-06-24 16:37:14 +02:00 · 2025-06-24 05:08:40 -07:00
98 changed files with 2122 additions and 1184 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -50,10 +50,24 @@ on:
        default: false

 jobs:
-  debug-inputs:
-    name: Debug inputs
+  buildid:
+    name: Generate build ID
    runs-on: ubuntu-latest
+    outputs:
+      buildids: ${{ steps.get.outputs.bid }}
    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ secrets.DEPLOY_KEY }}
+
+      - id: get
+        shell: bash -xe {0}
+        run: |
+          bdat=`date +"%Y%m%d%I%M%S"`
+          echo "bid=${bdat}" >> $GITHUB_OUTPUT
+
      - name: Debug
        run: |
          echo "create_release: ${{ inputs.create_release }}"
@@ -64,21 +78,28 @@ jobs:
          echo "GITHUB_REPOSITORY_OWNER: ${{ github.repository_owner }}"
          echo "GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}"

-  buildid:
-    name: Generate build ID
-    runs-on: ubuntu-latest
-    outputs:
-      buildids: ${{ steps.get.outputs.bid }}
-    steps:
-      - id: get
-        shell: bash -xe {0}
+      - name: Check if correct branch
+        if: ${{ inputs.create_release }}
        run: |
-          bdat=`date +"%Y%m%d%I%M%S"`
-          echo "bid=${bdat}" >> $GITHUB_OUTPUT
+          echo "Checking if we are on the correct branch"
+          git branch
+          git status
+          git branch --show-current
+          branch="${{ inputs.update_branch }}"
+          if [[ $branch == "twilight" ]]; then
+            branch="dev"
+          elif [[ $branch == "release" ]]; then
+            branch="stable"
+          fi
+          if [[ $(git branch --show-current) != $branch ]]; then
+            echo ">>> Branch mismatch"
+          # exit 1
+          else
+            echo ">>> Branch matches"
+          fi

  start-self-host:
    runs-on: ubuntu-latest
-    needs: debug-inputs
    steps:
      - name: Download aws-cli
        if: ${{ inputs.create_release && inputs.update_branch == 'release' }}
@@ -101,42 +122,12 @@ jobs:
          echo "Removing self-hosted runner script"
          rm start.sh || true

-  check-build-is-correct:
-    runs-on: ubuntu-latest
-    needs: [debug-inputs]
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          submodules: recursive
-          token: ${{ secrets.DEPLOY_KEY }}
-
-      - name: Check if correct branch
-        if: ${{ inputs.create_release }}
-        run: |
-          echo "Checking if we are on the correct branch"
-          git branch
-          git status
-          git branch --show-current
-          branch="${{ inputs.update_branch }}"
-          if [[ $branch == "twilight" ]]; then
-            branch="dev"
-          elif [[ $branch == "release" ]]; then
-            branch="stable"
-          fi
-          if [[ $(git branch --show-current) != $branch ]]; then
-            echo ">>> Branch mismatch"
-          # exit 1
-          else
-            echo ">>> Branch matches"
-          fi
-
  build-data:
    permissions:
      contents: write
    name: Generate build data
-    runs-on: ubuntu-latest
-    needs: check-build-is-correct
+    runs-on: blacksmith-2vcpu-ubuntu-2404
+    needs: buildid
    outputs:
      build_date: ${{ steps.data.outputs.builddate }}
      version: ${{ steps.data.outputs.version }}
@@ -149,7 +140,7 @@ jobs:
          token: ${{ secrets.DEPLOY_KEY }}

      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: useblacksmith/setup-node@v5
        with:
          node-version-file: '.nvmrc'

@@ -199,7 +190,7 @@ jobs:
    name: Lint

  check-release:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404
    needs: [build-data, lint]
    steps:
      - name: Checkout repository
@@ -209,7 +200,7 @@ jobs:
          token: ${{ secrets.DEPLOY_KEY }}

      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: useblacksmith/setup-node@v5
        with:
          node-version-file: '.nvmrc'

@@ -240,7 +231,7 @@ jobs:
  source:
    permissions:
      contents: write
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404
    needs: [build-data, check-release]

    steps:
@@ -251,7 +242,7 @@ jobs:
          token: ${{ secrets.DEPLOY_KEY }}

      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: useblacksmith/setup-node@v5
        with:
          node-version-file: '.nvmrc'

@@ -368,7 +359,7 @@ jobs:
    name: AppImage build - Linux ${{ matrix.arch }}
    permissions:
      contents: write
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404
    strategy:
      matrix:
        arch: [x86_64, aarch64]
@@ -381,7 +372,7 @@ jobs:
          token: ${{ secrets.DEPLOY_KEY }}

      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: useblacksmith/setup-node@v5
        with:
          node-version-file: '.nvmrc'

@@ -446,7 +437,7 @@ jobs:
          path: ./dist/zen-${{ matrix.arch }}.AppImage.zsync

  stop-self-hosted:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404
    needs: [windows-step-3, linux]
    if: always()
    steps:
@@ -487,7 +478,7 @@ jobs:
        lint,
        stop-self-hosted,
      ]
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404
    environment:
      name: ${{ inputs.update_branch == 'release' && 'Deploy-Release' || 'Deploy-Twilight' }}

@@ -614,7 +605,7 @@ jobs:
    permissions: write-all
    name: Prepare Flatpak
    needs: [release, linux, build-data]
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404

    steps:
      - name: Checkout Flatpak repository
@@ -673,7 +664,7 @@ jobs:
    permissions: write-all
    name: Release Flatpak
    needs: [prepare-flatpak, build-data]
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404

    steps:
      - name: Checkout Flatpak repository
--- a/.github/workflows/code-linter.yml
+++ b/.github/workflows/code-linter.yml
@@ -4,7 +4,6 @@ on:
  push:
    branches:
      - dev
-  workflow_dispatch:
  workflow_call:
  pull_request:
    branches:
@@ -16,6 +15,7 @@ permissions:
 jobs:
  lint:
    runs-on: ubuntu-latest
+    if: ${{ !contains(github.event.head_commit.message, '[no-lint]') }}
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
--- a/.github/workflows/linux-release-build.yml
+++ b/.github/workflows/linux-release-build.yml
@@ -26,7 +26,7 @@ jobs:
    permissions:
      contents: write
    # aarch64 does not need full 16x
-    runs-on: ${{ (inputs.release-branch == 'release' && matrix.arch == 'x86_64') && 'self-hosted' || 'ubuntu-latest' }}
+    runs-on: ${{ (inputs.release-branch == 'release' && matrix.arch == 'x86_64') && 'self-hosted' || 'blacksmith-8vcpu-ubuntu-2404' }}
    strategy:
      fail-fast: false
      matrix:
@@ -44,10 +44,6 @@ jobs:
        with:
          tool-cache: false

-      # Bug: https://github.com/actions/checkout/issues/1153
-      - name: Remove zombie lock file
-        run: rm -f /home/ubuntu/actions-runner/_work/desktop/desktop/.git/modules/l10n/index.lock
-
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
@@ -55,7 +51,7 @@ jobs:
          token: ${{ secrets.DEPLOY_KEY }}

      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: useblacksmith/setup-node@v5
        with:
          node-version-file: '.nvmrc'

--- a/.github/workflows/windows-release-build.yml
+++ b/.github/workflows/windows-release-build.yml
@@ -35,7 +35,7 @@ jobs:
  windows-build:
    name: Build Windows - ${{ matrix.arch }}
    # aarch64 does not need full 16x, and we also dont use full LTO when generating GPO
-    runs-on: ${{ (inputs.release-branch == 'release' && !inputs.generate-gpo && matrix.arch == 'x86_64') && 'self-hosted' || 'ubuntu-latest' }}
+    runs-on: ${{ (inputs.release-branch == 'release' && !inputs.generate-gpo && matrix.arch == 'x86_64') && 'self-hosted' || 'blacksmith-8vcpu-ubuntu-2404' }}
    env:
      SCCACHE_GHA_ENABLED: ${{ inputs.use-sccache && 'true' || 'false' }}
      CARGO_TERM_COLOR: always
@@ -53,10 +53,6 @@ jobs:
        with:
          tool-cache: false

-      # Bug: https://github.com/actions/checkout/issues/1153
-      - name: Remove zombie lock file
-        run: rm -f /home/ubuntu/actions-runner/_work/desktop/desktop/.git/modules/l10n/index.lock
-
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
@@ -64,7 +60,7 @@ jobs:
          token: ${{ secrets.DEPLOY_KEY }}

      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: useblacksmith/setup-node@v5
        with:
          node-version-file: '.nvmrc'

@@ -103,7 +99,7 @@ jobs:
        env:
          SEGMENT_DOWNLOAD_TIMEOUT_MINS: 5
        id: cache-win-cross
-        uses: actions/cache@v4
+        uses: useblacksmith/cache@v5
        with:
          path: ${HOME}/win-cross
          key: win-cross
--- a/README.md
+++ b/README.md
@@ -30,10 +30,18 @@ Zen is a firefox-based browser with the aim of pushing your productivity to a ne
 ### Firefox Versions

 - [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `139.0.4`! 🚀
- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 139.0.4`!
+- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 140.0`!

 ### Contributing

 If you'd like to report a bug, please do so on our [GitHub Issues page](https://github.com/zen-browser/desktop/issues/) and for feature requests, you can use [Github Discussions](https://github.com/zen-browser/desktop/discussions).

 Zen is an open-source project, and we welcome contributions from the community! Please take a look at the [contribution guidelines](./docs/contribute.md) before getting started!
+
+#### Partners
+
+Thanks to all the partners of Zen for their support and contributions:
+
+<a href="https://blacksmith.sh">
+  <img src="./docs/assets/blacksmith-yellow.png" width="350px"/>
+</a>
--- a/build/firefox-cache/l10n-last-commit-hash
+++ b/build/firefox-cache/l10n-last-commit-hash
@@ -1 +1 @@
-29fd9c19879c6f9bfcf414f47426d8dc00dee1a5
+667950575bde54b8d83db2a25ccf468522d4e0c9
--- a/docs/assets/blacksmith-yellow.png
+++ b/docs/assets/blacksmith-yellow.png
--- a/2
+++ b/2
--- a/src/browser/app/profile/browser.inc
+++ b/src/browser/app/profile/browser.inc
@@ -53,3 +53,4 @@ pref("app.update.checkInstallTime.days", 6);
 // TODO: Check this out!
 pref("browser.profiles.enabled", false);
 pref("browser.tabs.groups.enabled", false);
+pref("browser.urlbar.scotchBonnet.enableOverride", false);
--- a/src/browser/app/profile/features/theme.inc
+++ b/src/browser/app/profile/features/theme.inc
@@ -7,6 +7,7 @@ pref('zen.theme.content-element-separation', 8); // In pixels
 pref('zen.theme.gradient', true);
 pref('zen.theme.gradient.show-custom-colors', false);
 pref('zen.theme.essentials-favicon-bg', true);
+pref('zen.theme.window.scheme', 'auto'); // auto, light, dark

 #ifdef XP_MACOSX
  pref('zen.theme.border-radius', 10); // In pixels
--- a/src/browser/app/profile/firefox-js.patch
+++ b/src/browser/app/profile/firefox-js.patch
@@ -1,10 +1,10 @@
 diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
-index beced8067e6c8b5c8cf8e3f6060ba259ec9a294d..33a264e7f9cf97944da3888bdb957fa6e7c4c346 100644
+index 412e0879bbb0c7e7d1eb842212b064e1c77cab8f..bd23e5f2cd3f9c382f704fd1fcfdbb3edd71a454 100644
 --- a/browser/app/profile/firefox.js
 +++ b/browser/app/profile/firefox.js
-@@ -3398,3 +3398,5 @@ pref("toolkit.contentRelevancy.enabled", false);
- pref("toolkit.contentRelevancy.ingestEnabled", false);
- // Pref to enable extra logging for the content relevancy feature
- pref("toolkit.contentRelevancy.log", false);
+@@ -3361,3 +3361,5 @@ pref("toolkit.contentRelevancy.log", false);
+ // rotation altogether.
+ pref("browser.contextual-services.contextId.rotation-in-days", 0);
+ pref("browser.contextual-services.contextId.rust-component.enabled", false);
 +
 +#include zen-browser.js
--- a/src/browser/app/profile/macos.inc
+++ b/src/browser/app/profile/macos.inc
@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.

 // Enable transparent background for macos
-pref('widget.macos.titlebar-blend-mode.behind-window', true);
+pref('widget.macos.sidebar-blend-mode.behind-window', true);
 // 1. hudWindow
 // 2. fullScreenUI
 // 3. popover
@@ -11,4 +11,4 @@ pref('widget.macos.titlebar-blend-mode.behind-window', true);
 // 5. toolTip
 // 6. headerView
 // 7. underlay
-pref('zen.widget.macos.window-material', 3);
+pref('zen.widget.macos.window-material', 1);
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -11,9 +11,6 @@
 // Dont download the multilingual dictionary
 pref("intl.multilingual.downloadEnabled", false);

-// Theme
-pref('toolkit.legacyUserProfileCustomizations.stylesheets', true);
-
 #ifdef XP_WIN
  #include windows.inc
 #endif
--- a/src/browser/base/content/browser-addons-js.patch
+++ b/src/browser/base/content/browser-addons-js.patch
@@ -1,8 +1,8 @@
 diff --git a/browser/base/content/browser-addons.js b/browser/base/content/browser-addons.js
-index 73593191936cc345ee8e2c28cb251dc13f4c2fd4..e6c459c1ebc60a1f3930a55e212570f696bf07a0 100644
+index f4d5125d9a1c8f0aef24536ca7d2ef3f133d8a99..cacd7f465e67226de4a366354779c6cb0cbd0b4c 100644
 --- a/browser/base/content/browser-addons.js
 +++ b/browser/base/content/browser-addons.js
-@@ -735,7 +735,7 @@ var gXPInstallObserver = {
+@@ -1057,7 +1057,7 @@ var gXPInstallObserver = {
       persistent: true,
       hideClose: true,
       popupOptions: {
@@ -11,7 +11,7 @@ index 73593191936cc345ee8e2c28cb251dc13f4c2fd4..e6c459c1ebc60a1f3930a55e212570f6
       },
     };
 
-@@ -942,7 +942,7 @@ var gXPInstallObserver = {
+@@ -1266,7 +1266,7 @@ var gXPInstallObserver = {
       hideClose: true,
       timeout: Date.now() + 30000,
       popupOptions: {
@@ -20,16 +20,16 @@ index 73593191936cc345ee8e2c28cb251dc13f4c2fd4..e6c459c1ebc60a1f3930a55e212570f6
       },
     };
 
-@@ -2125,7 +2125,7 @@ var gUnifiedExtensions = {
- 
-         panel.hidden = false;
+@@ -2571,7 +2571,7 @@ var gUnifiedExtensions = {
+         this.recordButtonTelemetry(reason || "extensions_panel_showing");
+         this.ensureButtonShownBeforeAttachingPanel(panel);
         PanelMultiView.openPopup(panel, this._button, {
 -          position: "bottomright topright",
 +          position: gZenUIManager.panelUIPosition,
           triggerEvent: aEvent,
         });
       }
-@@ -2294,18 +2294,20 @@ var gUnifiedExtensions = {
+@@ -2758,18 +2758,20 @@ var gUnifiedExtensions = {
       this._maybeMoveWidgetNodeBack(widgetId);
     }
 
--- a/src/browser/base/content/browser-box-inc-xhtml.patch
+++ b/src/browser/base/content/browser-box-inc-xhtml.patch
@@ -1,9 +1,9 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..64e950106dd05b443ce72107613ac9cc405d56ea 100644
+index afa7f8e7dd74173bf2c696bd96f7e86e8b0126bc..4847c24923f673e91eb7fb65ea6b037f38062405 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -23,7 +23,15 @@
-     <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
+@@ -25,7 +25,15 @@
+     </stack>
   </vbox>
   <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
 +<vbox flex="1" id="zen-appcontent-wrapper">
--- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
+++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index 30e7b9b2ac63db6ccd2727a9341081cecefc25cb..ceff29d10a32fe9e5296340c8c56a2fdbf321c31 100644
+index ad1515eb111bc2532b2f17ea28fc04463030d30d..899f4baf2cd3472abd5591f3c9987f0c02b9313f 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -29,9 +29,9 @@ index 30e7b9b2ac63db6ccd2727a9341081cecefc25cb..ceff29d10a32fe9e5296340c8c56a2fd
 +<html:div id="zen-essentials" skipintoolbarset="true"></html:div>
 +<html:div id="zen-tabs-wrapper">
           <hbox class="tab-drop-indicator" hidden="true"/>
-           <html:span id="tab-drag-empty-feedback" role="presentation"/>
 # If the name (tabbrowser-arrowscrollbox) or structure of this changes
-@@ -76,6 +78,7 @@
+ # significantly, there is an optimization in
+@@ -75,6 +77,7 @@
                               tooltip="dynamic-shortcut-tooltip"
                               data-l10n-id="tabs-toolbar-new-tab"/>
           <html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
@@ -39,7 +39,7 @@ index 30e7b9b2ac63db6ccd2727a9341081cecefc25cb..ceff29d10a32fe9e5296340c8c56a2fd
         </tabs>
 
         <toolbarbutton id="new-tab-button"
-@@ -101,9 +104,10 @@
+@@ -100,9 +103,10 @@
 #include private-browsing-indicator.inc.xhtml
     <toolbarbutton class="content-analysis-indicator toolbarbutton-1 content-analysis-indicator-icon"/>
 
--- a/src/browser/base/content/navigator-toolbox-js.patch
+++ b/src/browser/base/content/navigator-toolbox-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.js b/browser/base/content/navigator-toolbox.js
-index 64ded8fb2c08f1dbfec8fe08ab427a24b53f1169..9e1e888554279b6e1df3bc1cb907afd2ccb330ca 100644
+index 31d0ee325847834e7c58c1079225adf43d738bcd..4d2c69d4dd7e313bdb085530b3289dc9d93530a5 100644
 --- a/browser/base/content/navigator-toolbox.js
 +++ b/browser/base/content/navigator-toolbox.js
@@ -8,7 +8,7 @@
@@ -17,8 +17,8 @@ index 64ded8fb2c08f1dbfec8fe08ab427a24b53f1169..9e1e888554279b6e1df3bc1cb907afd2
         #reader-mode-button,
 +        #zen-tabs-wrapper,
         #picture-in-picture-button,
-         #shopping-sidebar-button,
         #urlbar-zoom-button,
+         #star-button-box,
@@ -208,6 +209,7 @@ document.addEventListener(
         case "vertical-tabs-newtab-button":
         case "tabs-newtab-button":
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -76,7 +76,6 @@


        # Images
-        content/browser/zen-images/gradient.png                                 (../../zen/images/gradient.png)
        content/browser/zen-images/brand-header.svg                             (../../zen/images/brand-header.svg)
        content/browser/zen-images/layouts/collapsed.png                        (../../zen/images/layouts/collapsed.png)
        content/browser/zen-images/layouts/multiple-toolbar.png                 (../../zen/images/layouts/multiple-toolbar.png)
@@ -93,7 +92,7 @@

        # JS Vendor
        content/browser/zen-vendor/tsparticles.confetti.bundle.min.js           (../../zen/vendor/tsparticles.confetti.bundle.min.js)
-        content/browser/zen-vendor/motion.min.mjs                               (../../zen/vendor/motion.min.mjs)
+        content/browser/zen-vendor/animejs.min.mjs                               (../../zen/vendor/animejs.min.mjs)

        # FavIcons for startup
        content/browser/zen-images/favicons/calendar.ico                        (../../zen/images/favicons/calendar.ico)
--- a/src/browser/base/content/zen-panels/gradient-generator.inc
+++ b/src/browser/base/content/zen-panels/gradient-generator.inc
@@ -5,39 +5,66 @@
 <panel flip="side" type="arrow" popupalign="center" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left">
  <panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
    <panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
-      <hbox>
-        <hbox id="PanelUI-zen-gradient-generator-predefined">
-          <box data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
-          <box data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
-          <box data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
-          <box data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
-          <box data-algo="analogous" data-num-dots="3" data-position="186,186" style="background: linear-gradient(135deg, #a07a48, #ab80e4);"></box>
-          <box data-algo="float" data-num-dots="1" data-position="196,176" style="background: #7bcbda;"></box>
-          <box data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
-          <box data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
-          <box data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
-          <box data-algo="complementary" data-num-dots="2" data-position="82,112" style="background: linear-gradient(135deg, #1e90ff, #cfb179);"></box>
-        </hbox>
-      </hbox>
      <hbox class="zen-theme-picker-gradient">
-        <box id="PanelUI-zen-gradient-generator-rotation-dot"></box>
-        <box id="PanelUI-zen-gradient-generator-rotation-line"></box>
-        <box id="PanelUI-zen-gradient-generator-color-actions">
+        <hbox id="PanelUI-zen-gradient-generator-scheme">
+          <button id="PanelUI-zen-gradient-generator-scheme-auto" class="subviewbutton"/>
+          <button id="PanelUI-zen-gradient-generator-scheme-light" class="subviewbutton"/>
+          <button id="PanelUI-zen-gradient-generator-scheme-dark" class="subviewbutton"/> 
+        </hbox>
+        <hbox id="PanelUI-zen-gradient-generator-color-actions">
          <button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
          </button>
          <button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton">
          </button>
-          <html:div class="separator"></html:div>
-          <button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton" data-l10n-id="zen-panel-ui-gradient-generator-algo-floating">
-          </button>
-        </box>
+        </hbox>
        <label data-l10n-id="zen-panel-ui-gradient-click-to-add" id="PanelUI-zen-gradient-generator-color-click-to-add"></label>
      </hbox>
+      <hbox>
+        <toolbarbutton id="PanelUI-zen-gradient-generator-color-page-left" class="toolbarbutton-1" disabled="true" />
+        <hbox id="PanelUI-zen-gradient-generator-color-pages">
+          <hbox>
+            <box data-lightness="90" data-algo="float" data-num-dots="1" data-position="196,176" style="background: #7bcbda;"></box>
+            <box data-lightness="80" data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
+            <box data-lightness="70" data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
+            <box data-lightness="60" data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
+            <box data-lightness="50" data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
+            <box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
+            <box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
+            <box data-lightness="20" data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
+          </hbox>
+          <hbox>
+            <box data-lightness="90" data-algo="float" data-num-dots="1" data-position="196,176" style="background: red;"></box>
+            <box data-lightness="80" data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
+            <box data-lightness="70" data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
+            <box data-lightness="60" data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
+            <box data-lightness="50" data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
+            <box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
+            <box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
+            <box data-lightness="20" data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
+          </hbox>
+        </hbox>
+        <toolbarbutton id="PanelUI-zen-gradient-generator-color-page-right" class="toolbarbutton-1" />
+      </hbox>
      <hbox id="PanelUI-zen-gradient-generator-controls">
        <hbox id="PanelUI-zen-gradient-colors-wrapper">
-          <vbox flex="1">
-            <label data-l10n-id="zen-panel-ui-gradient-generator-opacity-text"></label>
-            <html:input type="range" min="0" max="1" value="0.5" step="0.05" id="PanelUI-zen-gradient-generator-opacity" />
+          <vbox flex="1" id="PanelUI-zen-gradient-opacity-wrapper">
+            <box id="PanelUI-zen-gradient-slider-wave">
+              <svg viewBox="0 -7.605 455 70" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
+                <path d="M 51.373 27.395 L 419.634 27.395" 
+                      fill="none" 
+                      stroke-linecap="round" 
+                      stroke-linejoin="round" 
+                      style="stroke-width: 8px;"/>
+                <defs>
+                  <linearGradient id="PanelUI-zen-gradient-generator-slider-wave-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                    <stop offset="0%" stop-color="light-dark(rgb(90, 90, 90), rgb(161, 161, 161))"/>
+                    <stop offset="0%" stop-color="light-dark(rgb(90, 90, 90), rgba(161, 161, 161))"/>
+                    <stop offset="100%" stop-color="light-dark(rgba(77, 77, 77, 0.5), rgba(161, 161, 161, 0.5))"/>
+                  </linearGradient>
+                </defs>
+              </svg>
+            </box>
+            <html:input type="range" min="0.15" max="0.85" value="0.5" step="0.01" id="PanelUI-zen-gradient-generator-opacity" />
          </vbox>
          <vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
          </vbox>
--- a/src/browser/base/content/zen-panels/popups.inc
+++ b/src/browser/base/content/zen-panels/popups.inc
@@ -23,6 +23,7 @@
    hide-if-usercontext-disabled="true">
    <menupopup />
  </menu>
+  <menuseparator id="context_zenWorkspacesSeparator"/>
  <menuseparator/>
  <menuitem id="context_zenReorderWorkspaces" data-l10n-id="zen-workspaces-panel-context-reorder" command="cmd_zenReorderWorkspaces"/>
  <menuseparator/>
--- a/src/browser/components/BrowserGlue-sys-mjs.patch
+++ b/src/browser/components/BrowserGlue-sys-mjs.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs
-index cebca6d017a0c3fc8eff7a38f987726324789e69..73a24df91bec368f2f27c538b37d57595e18c599 100644
+index bde641f7112adde948707c172b9f18d3635d8ef1..3f430451586904e6be086114ec10f719745093be 100644
 --- a/browser/components/BrowserGlue.sys.mjs
 +++ b/browser/components/BrowserGlue.sys.mjs
@@ -8,6 +8,7 @@ import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
@@ -8,13 +8,14 @@ index cebca6d017a0c3fc8eff7a38f987726324789e69..73a24df91bec368f2f27c538b37d5759
 ChromeUtils.defineESModuleGetters(lazy, {
 +  gZenUIMigration: "chrome://browser/content/zen-components/ZenUIMigration.mjs",
   AboutHomeStartupCache: "resource:///modules/AboutHomeStartupCache.sys.mjs",
-   AboutNewTab: "resource:///modules/AboutNewTab.sys.mjs",
   AWToolbarButton: "resource:///modules/aboutwelcome/AWToolbarUtils.sys.mjs",
-@@ -881,6 +882,7 @@ BrowserGlue.prototype = {
+   ASRouter: "resource:///modules/asrouter/ASRouter.sys.mjs",
+@@ -1659,6 +1660,8 @@ BrowserGlue.prototype = {
+     } else if (profileDataVersion < APP_DATA_VERSION) {
+       lazy.ProfileDataUpgrader.upgrade(profileDataVersion, APP_DATA_VERSION);
+     }
+
+    lazy.gZenUIMigration.init(this._isNewProfile);
+   },
 
-     lazy.ProcessHangMonitor.init();
- 
-+    lazy.gZenUIMigration.init(this._isNewProfile, aWindow);
-     // A channel for "remote troubleshooting" code...
-     let channel = new lazy.WebChannel(
-       "remote-troubleshooting",
+   async _showUpgradeDialog() {
--- a/src/browser/components/extensions/parent/ext-tabs-js.patch
+++ b/src/browser/components/extensions/parent/ext-tabs-js.patch
@@ -1,16 +1,16 @@
 diff --git a/browser/components/extensions/parent/ext-tabs.js b/browser/components/extensions/parent/ext-tabs.js
-index 517ea0079c12941a844a4f9e4ba694c6411887ee..510ab14dfa2178c332c9862d6a01b75bd12dfe3b 100644
+index a53a12f91817a9e3d1773480928e858bc3182c77..10f6559ffb128906be31de220c93320e9a6d40e7 100644
 --- a/browser/components/extensions/parent/ext-tabs.js
 +++ b/browser/components/extensions/parent/ext-tabs.js
-@@ -482,6 +482,7 @@ this.tabs = class extends ExtensionAPIPersistent {
+@@ -494,6 +494,7 @@ this.tabs = class extends ExtensionAPIPersistent {
         }
 
-         let tab = tabManager.getWrapper(event.originalTarget);
+         let tab = tabManager.getWrapper(updatedTab);
 +        if (!tab) return;
 
         let changeInfo = {};
         for (let prop of needed) {
-@@ -836,6 +837,7 @@ this.tabs = class extends ExtensionAPIPersistent {
+@@ -848,6 +849,7 @@ this.tabs = class extends ExtensionAPIPersistent {
               });
             }
 
--- a/src/browser/components/sessionstore/SessionStore-sys-mjs.patch
+++ b/src/browser/components/sessionstore/SessionStore-sys-mjs.patch
@@ -1,8 +1,8 @@
 diff --git a/browser/components/sessionstore/SessionStore.sys.mjs b/browser/components/sessionstore/SessionStore.sys.mjs
-index 8c6047e1ada5a22e57e1e665965237c9e22641d7..d3472a36fc99c488f0fd0fa8cb9c6927c24bdc6d 100644
+index be029379c101a0105d4837136e064e6007b67c3e..f998ad44015b05104e8a1dbeebd7b94e586e4fbd 100644
 --- a/browser/components/sessionstore/SessionStore.sys.mjs
 +++ b/browser/components/sessionstore/SessionStore.sys.mjs
-@@ -2088,7 +2088,6 @@ var SessionStoreInternal = {
+@@ -2120,7 +2120,6 @@ var SessionStoreInternal = {
       if (closedWindowState) {
         let newWindowState;
         if (
@@ -10,7 +10,7 @@ index 8c6047e1ada5a22e57e1e665965237c9e22641d7..d3472a36fc99c488f0fd0fa8cb9c6927
           !lazy.SessionStartup.willRestore()
         ) {
           // We want to split the window up into pinned tabs and unpinned tabs.
-@@ -2303,11 +2302,9 @@ var SessionStoreInternal = {
+@@ -2353,11 +2352,9 @@ var SessionStoreInternal = {
           tabbrowser.selectedTab.label;
       }
 
@@ -22,7 +22,7 @@ index 8c6047e1ada5a22e57e1e665965237c9e22641d7..d3472a36fc99c488f0fd0fa8cb9c6927
 
       // Store the window's close date to figure out when each individual tab
       // was closed. This timestamp should allow re-arranging data based on how
-@@ -3216,7 +3213,7 @@ var SessionStoreInternal = {
+@@ -3303,7 +3300,7 @@ var SessionStoreInternal = {
     if (!isPrivateWindow && tabState.isPrivate) {
       return;
     }
@@ -31,7 +31,7 @@ index 8c6047e1ada5a22e57e1e665965237c9e22641d7..d3472a36fc99c488f0fd0fa8cb9c6927
       return;
     }
 
-@@ -3925,6 +3922,11 @@ var SessionStoreInternal = {
+@@ -4012,6 +4009,11 @@ var SessionStoreInternal = {
         Math.min(tabState.index, tabState.entries.length)
       );
       tabState.pinned = false;
@@ -43,15 +43,15 @@ index 8c6047e1ada5a22e57e1e665965237c9e22641d7..d3472a36fc99c488f0fd0fa8cb9c6927
 
       if (inBackground === false) {
         aWindow.gBrowser.selectedTab = newTab;
-@@ -4361,6 +4363,7 @@ var SessionStoreInternal = {
+@@ -4448,6 +4450,7 @@ var SessionStoreInternal = {
       // Append the tab if we're opening into a different window,
-       index: aSource == aTargetWindow ? pos : Infinity,
+       tabIndex: aSource == aTargetWindow ? pos : Infinity,
       pinned: state.pinned,
 +      essential: state.zenEssential,
       userContextId: state.userContextId,
       skipLoad: true,
       preferredRemoteType,
-@@ -5179,7 +5182,7 @@ var SessionStoreInternal = {
+@@ -5303,7 +5306,7 @@ var SessionStoreInternal = {
 
     for (let i = tabbrowser.pinnedTabCount; i < tabbrowser.tabs.length; i++) {
       let tab = tabbrowser.tabs[i];
@@ -60,7 +60,7 @@ index 8c6047e1ada5a22e57e1e665965237c9e22641d7..d3472a36fc99c488f0fd0fa8cb9c6927
         removableTabs.push(tab);
       }
     }
-@@ -5239,7 +5242,7 @@ var SessionStoreInternal = {
+@@ -5363,7 +5366,7 @@ var SessionStoreInternal = {
     }
 
     let workspaceID = aWindow.getWorkspaceID();
@@ -69,7 +69,7 @@ index 8c6047e1ada5a22e57e1e665965237c9e22641d7..d3472a36fc99c488f0fd0fa8cb9c6927
       winData.workspaceID = workspaceID;
     }
   },
-@@ -5430,14 +5433,15 @@ var SessionStoreInternal = {
+@@ -5554,14 +5557,15 @@ var SessionStoreInternal = {
     }
 
     let tabbrowser = aWindow.gBrowser;
@@ -87,7 +87,7 @@ index 8c6047e1ada5a22e57e1e665965237c9e22641d7..d3472a36fc99c488f0fd0fa8cb9c6927
         continue;
       }
       let tabData = lazy.TabState.collect(tab, TAB_CUSTOM_VALUES.get(tab));
-@@ -5456,8 +5460,8 @@ var SessionStoreInternal = {
+@@ -5580,8 +5584,8 @@ 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).
@@ -98,7 +98,7 @@ index 8c6047e1ada5a22e57e1e665965237c9e22641d7..d3472a36fc99c488f0fd0fa8cb9c6927
       winData.title = tabbrowser.tabs[0].label;
     }
     winData.selected = selectedIndex;
-@@ -5569,8 +5573,8 @@ var SessionStoreInternal = {
+@@ -5693,8 +5697,8 @@ var SessionStoreInternal = {
     // selectTab represents.
     let selectTab = 0;
     if (overwriteTabs) {
@@ -109,7 +109,7 @@ index 8c6047e1ada5a22e57e1e665965237c9e22641d7..d3472a36fc99c488f0fd0fa8cb9c6927
       selectTab = Math.min(selectTab, winData.tabs.length);
     }
 
-@@ -5613,6 +5617,7 @@ var SessionStoreInternal = {
+@@ -5737,6 +5741,7 @@ var SessionStoreInternal = {
         winData.tabs,
         winData.groups ?? []
       );
@@ -117,7 +117,7 @@ index 8c6047e1ada5a22e57e1e665965237c9e22641d7..d3472a36fc99c488f0fd0fa8cb9c6927
       this._log.debug(
         `restoreWindow, createTabsForSessionRestore returned ${tabs.length} tabs`
       );
-@@ -6162,6 +6167,22 @@ var SessionStoreInternal = {
+@@ -6286,6 +6291,22 @@ var SessionStoreInternal = {
 
     // Most of tabData has been restored, now continue with restoring
     // attributes that may trigger external events.
--- a/src/browser/components/tabbrowser/content/tab-js.patch
+++ b/src/browser/components/tabbrowser/content/tab-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
-index f43ab1cf6257ff1a9c9aa522a0180fd9bbfe4036..d9714c46de860243b06af7e8343d36b107efb855 100644
+index 793ba822f087f4d198c9876ed208ff16d8a41e3b..e53ccd748de015997c355d5d37cb38cc73e90f3d 100644
 --- a/browser/components/tabbrowser/content/tab.js
 +++ b/browser/components/tabbrowser/content/tab.js
@@ -21,6 +21,7 @@
@@ -68,15 +68,15 @@ index f43ab1cf6257ff1a9c9aa522a0180fd9bbfe4036..d9714c46de860243b06af7e8343d36b1
     on_click(event) {
       if (event.button != 0) {
         return;
-@@ -559,6 +568,7 @@
-             telemetrySource: lazy.TabMetrics.METRIC_SOURCE.TAB_STRIP,
-           });
+@@ -561,6 +570,7 @@
+             )
+           );
         } else {
 +          gZenPinnedTabManager._removePinnedAttributes(this, true);
           gBrowser.removeTab(this, {
             animate: true,
             triggeringEvent: event,
-@@ -569,6 +579,14 @@
+@@ -573,6 +583,14 @@
         // (see tabbrowser-tabs 'click' handler).
         gBrowser.tabContainer._blockDblClick = true;
       }
@@ -91,7 +91,7 @@ index f43ab1cf6257ff1a9c9aa522a0180fd9bbfe4036..d9714c46de860243b06af7e8343d36b1
     }
 
     on_dblclick(event) {
-@@ -592,6 +610,8 @@
+@@ -596,6 +614,8 @@
           animate: true,
           triggeringEvent: event,
         });
--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/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 d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386ffc8ec0b 100644
+index 37570c54b06f9cebc46aa232e2d01ac5d330e17a..818b1df6778d9d299b86fefa46bbf1d689d29fdb 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -413,11 +413,41 @@
@@ -188,7 +188,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       } else {
         aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
       }
-@@ -2680,6 +2726,8 @@
+@@ -2679,6 +2725,8 @@
         schemelessInput,
         hasValidUserGestureActivation = false,
         textDirectiveUserActivation = false,
@@ -197,7 +197,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       } = {}
     ) {
       // all callers of addTab that pass a params object need to pass
-@@ -2690,6 +2738,12 @@
+@@ -2689,6 +2737,12 @@
         );
       }
 
@@ -210,7 +210,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       if (!UserInteraction.running("browser.tabs.opening", window)) {
         UserInteraction.start("browser.tabs.opening", "initting", window);
       }
-@@ -2753,6 +2807,19 @@
+@@ -2752,6 +2806,19 @@
           noInitialLabel,
           skipBackgroundNotify,
         });
@@ -229,8 +229,8 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
 +        }
         if (insertTab) {
           // Insert the tab into the tab container in the correct position.
-           // For now, we support `index` as an alias for `tabIndex`.
-@@ -2765,6 +2832,7 @@
+           this.#insertTabAtIndex(t, {
+@@ -2760,6 +2827,7 @@
             ownerTab,
             openerTab,
             pinned,
@@ -238,7 +238,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
             bulkOrderedOpen,
             tabGroup: tabGroup ?? openerTab?.group,
           });
-@@ -2783,6 +2851,7 @@
+@@ -2778,6 +2846,7 @@
           openWindowInfo,
           skipLoad,
           triggeringRemoteType,
@@ -246,7 +246,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
         }));
 
         if (focusUrlBar) {
-@@ -2902,6 +2971,12 @@
+@@ -2897,6 +2966,12 @@
         }
       }
 
@@ -259,7 +259,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       // Additionally send pinned tab events
       if (pinned) {
         this._notifyPinnedStatus(t);
-@@ -2990,10 +3065,10 @@
+@@ -2985,10 +3060,10 @@
         isAdoptingGroup = false,
         isUserTriggered = false,
         telemetryUserCreateSource = "unknown",
@@ -271,7 +271,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       }
 
       if (!color) {
-@@ -3014,7 +3089,12 @@
+@@ -3009,7 +3084,12 @@
         label,
         isAdoptingGroup
       );
@@ -285,7 +285,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
         group,
         insertBefore?.group ?? insertBefore
       );
-@@ -3303,6 +3383,7 @@
+@@ -3304,6 +3384,7 @@
         openWindowInfo,
         skipLoad,
         triggeringRemoteType,
@@ -293,7 +293,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       }
     ) {
       // If we don't have a preferred remote type (or it is `NOT_REMOTE`), and
-@@ -3372,6 +3453,7 @@
+@@ -3373,6 +3454,7 @@
           openWindowInfo,
           name,
           skipLoad,
@@ -301,7 +301,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
         });
       }
 
-@@ -3517,7 +3599,9 @@
+@@ -3518,7 +3600,9 @@
       let shouldUpdateForPinnedTabs = false;
       /** @type {Map<TabGroupStateData['id'], TabGroupWorkingData>} */
       let tabGroupWorkingData = new Map();
@@ -312,7 +312,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       for (const tabGroupData of tabGroupDataList) {
         tabGroupWorkingData.set(tabGroupData.id, {
           stateData: tabGroupData,
-@@ -3560,7 +3644,7 @@
+@@ -3561,7 +3645,7 @@
         // Add a new tab if needed.
         if (!tab) {
           let createLazyBrowser =
@@ -321,7 +321,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
 
           let url = "about:blank";
           if (tabData.entries?.length) {
-@@ -3598,7 +3682,8 @@
+@@ -3599,7 +3683,8 @@
             skipLoad: true,
             preferredRemoteType,
           });
@@ -331,7 +331,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
           if (select) {
             tabToSelect = tab;
           }
-@@ -3622,7 +3707,8 @@
+@@ -3623,7 +3708,8 @@
             // needs calling:
             shouldUpdateForPinnedTabs = true;
           }
@@ -341,7 +341,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
           let { groupId } = tabData;
           const tabGroup = tabGroupWorkingData.get(groupId);
           // if a tab refers to a tab group we don't know, skip any group
-@@ -3636,7 +3722,10 @@
+@@ -3637,7 +3723,10 @@
                 tabGroup.stateData.id,
                 tabGroup.stateData.color,
                 tabGroup.stateData.collapsed,
@@ -353,7 +353,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
               );
               tabsFragment.appendChild(tabGroup.node);
             }
-@@ -3684,9 +3773,23 @@
+@@ -3685,9 +3774,23 @@
       // to remove the old selected tab.
       if (tabToSelect) {
         let leftoverTab = this.selectedTab;
@@ -377,7 +377,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
 
       if (tabs.length > 1 || !tabs[0].selected) {
         this._updateTabsAfterInsert();
-@@ -3881,7 +3984,7 @@
+@@ -3882,7 +3985,7 @@
       // Ensure we have an index if one was not provided.
       if (typeof elementIndex != "number" && typeof tabIndex != "number") {
         // Move the new tab after another tab if needed, to the end otherwise.
@@ -386,7 +386,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
         if (
           !bulkOrderedOpen &&
           ((openerTab &&
-@@ -3904,7 +4007,7 @@
+@@ -3905,7 +4008,7 @@
           ) {
             elementIndex = Infinity;
           } else if (previousTab.visible) {
@@ -395,7 +395,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
           } else if (previousTab == FirefoxViewHandler.tab) {
             elementIndex = 0;
           }
-@@ -3932,14 +4035,14 @@
+@@ -3933,14 +4036,14 @@
       }
       // Ensure index is within bounds.
       if (tab.pinned) {
@@ -414,7 +414,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
 
       // Prevent a flash of unstyled content by setting up the tab content
       // and inherited attributes before appending it (see Bug 1592054):
-@@ -3947,7 +4050,7 @@
+@@ -3948,7 +4051,7 @@
 
       this.tabContainer._invalidateCachedTabs();
 
@@ -423,7 +423,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
         if (this.isTab(itemAfter) && itemAfter.group == tabGroup) {
           // Place at the front of, or between tabs in, the same tab group
           this.tabContainer.insertBefore(tab, itemAfter);
-@@ -3980,6 +4083,7 @@
+@@ -3981,6 +4084,7 @@
       if (pinned) {
         this._updateTabBarForPinnedTabs();
       }
@@ -431,17 +431,17 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
 
       TabBarVisibility.update();
     }
-@@ -4268,6 +4372,9 @@
+@@ -4270,6 +4374,9 @@
         return;
       }
 
 +      for (let tab of selectedTabs) {
 +        gZenPinnedTabManager._removePinnedAttributes(tab, true);
 +      }
-       this.removeTabs(selectedTabs, { telemetrySource });
+       this.removeTabs(selectedTabs, { isUserTriggered, telemetrySource });
     }
 
-@@ -4520,6 +4627,7 @@
+@@ -4526,6 +4633,7 @@
         telemetrySource,
       } = {}
     ) {
@@ -449,7 +449,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       // When 'closeWindowWithLastTab' pref is enabled, closing all tabs
       // can be considered equivalent to closing the window.
       if (
-@@ -4604,6 +4712,7 @@
+@@ -4615,6 +4723,7 @@
         if (lastToClose) {
           this.removeTab(lastToClose, aParams);
         }
@@ -457,7 +457,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       } catch (e) {
         console.error(e);
       }
-@@ -4641,6 +4750,12 @@
+@@ -4653,6 +4762,12 @@
         aTab._closeTimeNoAnimTimerId = Glean.browserTabclose.timeNoAnim.start();
       }
 
@@ -470,7 +470,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       // Handle requests for synchronously removing an already
       // asynchronously closing tab.
       if (!animate && aTab.closing) {
-@@ -4655,7 +4770,9 @@
+@@ -4667,7 +4782,9 @@
       // frame created for it (for example, by updating the visually selected
       // state).
       let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -481,7 +481,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       if (
         !this._beginRemoveTab(aTab, {
           closeWindowFastpath: true,
-@@ -4821,7 +4938,7 @@
+@@ -4835,7 +4952,7 @@
           closeWindowWithLastTab != null
             ? closeWindowWithLastTab
             : !window.toolbar.visible ||
@@ -490,7 +490,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
 
         if (closeWindow) {
           // We've already called beforeunload on all the relevant tabs if we get here,
-@@ -4845,6 +4962,7 @@
+@@ -4859,6 +4976,7 @@
 
         newTab = true;
       }
@@ -498,7 +498,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       aTab._endRemoveArgs = [closeWindow, newTab];
 
       // swapBrowsersAndCloseOther will take care of closing the window without animation.
-@@ -4885,9 +5003,7 @@
+@@ -4899,9 +5017,7 @@
       aTab._mouseleave();
 
       if (newTab) {
@@ -509,7 +509,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       } else {
         TabBarVisibility.update();
       }
-@@ -5016,6 +5132,7 @@
+@@ -5035,6 +5151,7 @@
         this.tabs[i]._tPos = i;
       }
 
@@ -517,7 +517,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       if (!this._windowIsClosing) {
         if (wasPinned) {
           this.tabContainer._positionPinnedTabs();
-@@ -5230,6 +5347,7 @@
+@@ -5249,6 +5366,7 @@
       }
 
       let excludeTabs = new Set(aExcludeTabs);
@@ -525,7 +525,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
 
       // If this tab has a successor, it should be selectable, since
       // hiding or closing a tab removes that tab as a successor.
-@@ -5242,13 +5360,13 @@
+@@ -5261,13 +5379,13 @@
         !excludeTabs.has(aTab.owner) &&
         Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
       ) {
@@ -541,7 +541,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       );
 
       let tab = this.tabContainer.findNextTab(aTab, {
-@@ -5264,7 +5382,7 @@
+@@ -5283,7 +5401,7 @@
       }
 
       if (tab) {
@@ -550,7 +550,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       }
 
       // If no qualifying visible tab was found, see if there is a tab in
-@@ -5285,7 +5403,7 @@
+@@ -5304,7 +5422,7 @@
         });
       }
 
@@ -559,7 +559,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
     }
 
     _blurTab(aTab) {
-@@ -5686,10 +5804,10 @@
+@@ -5701,10 +5819,10 @@
       SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
     }
 
@@ -572,7 +572,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
         aTab.selected ||
         aTab.closing ||
         // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -5909,7 +6027,7 @@
+@@ -5924,7 +6042,7 @@
      *   `true` if element is a `<tab-group>`
      */
     isTabGroup(element) {
@@ -581,7 +581,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
     }
 
     /**
-@@ -5986,7 +6104,7 @@
+@@ -6001,7 +6119,7 @@
 
       // Don't allow mixing pinned and unpinned tabs.
       if (this.isTab(element) && element.pinned) {
@@ -590,7 +590,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       } else {
         tabIndex = Math.max(tabIndex, this.pinnedTabCount);
       }
-@@ -6012,10 +6130,16 @@
+@@ -6027,10 +6145,16 @@
       this.#handleTabMove(
         element,
         () => {
@@ -609,7 +609,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
           if (neighbor && this.isTab(element) && tabIndex > element._tPos) {
             neighbor.after(element);
           } else {
-@@ -6084,17 +6208,29 @@
+@@ -6099,17 +6223,29 @@
           targetElement = targetElement.group;
         }
       }
@@ -643,7 +643,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
         if (element.pinned && this.tabContainer.verticalMode) {
           return this.tabContainer.verticalPinnedTabsContainer;
         }
-@@ -6154,7 +6290,7 @@
+@@ -6169,7 +6305,7 @@
       if (!this.isTab(aTab)) {
         throw new Error("Can only move a tab into a tab group");
       }
@@ -652,7 +652,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
         return;
       }
       if (aTab.group && aTab.group.id === aGroup.id) {
-@@ -6248,6 +6384,10 @@
+@@ -6263,6 +6399,10 @@
 
       moveActionCallback();
 
@@ -663,7 +663,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
       // Clear tabs cache after moving nodes because the order of tabs may have
       // changed.
       this.tabContainer._invalidateCachedTabs();
-@@ -7145,7 +7285,7 @@
+@@ -7160,7 +7300,7 @@
             // preventDefault(). It will still raise the window if appropriate.
             break;
           }
@@ -672,7 +672,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
           window.focus();
           aEvent.preventDefault();
           break;
-@@ -8044,6 +8184,7 @@
+@@ -8059,6 +8199,7 @@
             aWebProgress.isTopLevel
           ) {
             this.mTab.setAttribute("busy", "true");
@@ -680,7 +680,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
             gBrowser._tabAttrModified(this.mTab, ["busy"]);
             this.mTab._notselectedsinceload = !this.mTab.selected;
           }
-@@ -9009,7 +9150,7 @@ var TabContextMenu = {
+@@ -9022,7 +9163,7 @@ var TabContextMenu = {
     );
     contextUnpinSelectedTabs.hidden =
       !this.contextTab.pinned || !this.multiselected;
@@ -689,11 +689,11 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386
     // Move Tab items
     let contextMoveTabOptions = document.getElementById(
       "context_moveTabOptions"
-@@ -9278,6 +9419,7 @@ var TabContextMenu = {
-         telemetrySource: gBrowser.TabMetrics.METRIC_SOURCE.TAB_STRIP,
-       });
+@@ -9298,6 +9439,7 @@ var TabContextMenu = {
+         )
+       );
     } else {
 +      gZenPinnedTabManager._removePinnedAttributes(this.contextTab, true);
       gBrowser.removeTab(this.contextTab, {
         animate: true,
-         telemetrySource: gBrowser.TabMetrics.METRIC_SOURCE.TAB_STRIP,
+         ...gBrowser.TabMetrics.userTriggeredContext(
--- a/src/browser/components/tabbrowser/content/tabs-js.patch
+++ b/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 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783eae31cc79a 100644
+index 67bba60cfc21b940f263e1eb26b8b5429355660f..9f73966429d8e82bb9ef0af73a996c8cff230eab 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
@@ -83,7 +83,7 @@
@@ -46,7 +46,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
           expandGroupOnDrop = true;
         }
       }
-@@ -868,7 +869,7 @@
+@@ -871,7 +872,7 @@
           ? event.screenY - window.screenY - tabOffset
           : event.screenY - window.screenY,
         scrollPos:
@@ -55,7 +55,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
             ? this.verticalPinnedTabsContainer.scrollPosition
             : this.arrowScrollbox.scrollPosition,
         screenX: event.screenX,
-@@ -921,6 +922,10 @@
+@@ -925,6 +926,10 @@
       }
 
       let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
@@ -66,7 +66,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
       if (
         (effects == "move" || effects == "copy") &&
         document == draggedTab.ownerDocument &&
-@@ -1077,6 +1082,18 @@
+@@ -1081,6 +1086,18 @@
 
       this._tabDropIndicator.hidden = true;
       event.stopPropagation();
@@ -85,7 +85,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
       if (draggedTab && dropEffect == "copy") {
         let duplicatedDraggedTab;
         let duplicatedTabs = [];
-@@ -1116,10 +1133,11 @@
+@@ -1120,10 +1137,11 @@
           }
         } else {
           let isPinned = draggedTab.pinned;
@@ -100,7 +100,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
           );
           let size = this.verticalMode ? "height" : "width";
           let screenAxis = this.verticalMode ? "screenY" : "screenX";
-@@ -1168,7 +1186,7 @@
+@@ -1172,7 +1190,7 @@
             (oldTranslateX && oldTranslateX != newTranslateX) ||
             (oldTranslateY && oldTranslateY != newTranslateY);
         } else if (this.verticalMode) {
@@ -109,7 +109,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
         } else {
           shouldTranslate &&= oldTranslateX && oldTranslateX != newTranslateX;
         }
-@@ -1337,6 +1355,7 @@
+@@ -1341,6 +1359,7 @@
 
           let nextItem = this.ariaFocusableItems[newIndex];
           let tabGroup = isTab(nextItem) && nextItem.group;
@@ -117,7 +117,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
           gBrowser.loadTabs(urls, {
             inBackground,
             replace,
-@@ -1369,6 +1388,17 @@
+@@ -1373,6 +1392,17 @@
 
       this.finishMoveTogetherSelectedTabs(draggedTab);
       this.finishAnimateTabMove();
@@ -135,7 +135,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
       this.#expandGroupOnDrop(draggedTab);
 
       if (
-@@ -1597,7 +1627,7 @@
+@@ -1601,7 +1631,7 @@
     }
 
     get newTabButton() {
@@ -144,7 +144,15 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
     }
 
     get verticalMode() {
-@@ -1621,29 +1651,54 @@
+@@ -1617,6 +1647,7 @@
+     }
+ 
+     get overflowing() {
+      gZenWorkspaces.updateOverflowingTabs();
+       return this.hasAttribute("overflow");
+     }
+ 
+@@ -1625,29 +1656,54 @@
       if (this.#allTabs) {
         return this.#allTabs;
       }
@@ -207,7 +215,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
     }
 
     /**
-@@ -1698,23 +1753,18 @@
+@@ -1702,23 +1758,18 @@
       }
 
       let elementIndex = 0;
@@ -235,7 +243,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
             let visibleTabsInGroup = child.tabs.filter(tab => tab.visible);
             visibleTabsInGroup.forEach(tab => {
               tab.elementIndex = elementIndex++;
-@@ -1724,10 +1774,7 @@
+@@ -1728,10 +1779,7 @@
         }
       }
 
@@ -247,7 +255,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
 
       return this.#focusableItems;
     }
-@@ -1735,6 +1782,7 @@
+@@ -1739,6 +1787,7 @@
     _invalidateCachedTabs() {
       this.#allTabs = null;
       this._invalidateCachedVisibleTabs();
@@ -255,7 +263,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
     }
 
     _invalidateCachedVisibleTabs() {
-@@ -1749,8 +1797,8 @@
+@@ -1753,8 +1802,8 @@
     #isContainerVerticalPinnedGrid(tab) {
       return (
         this.verticalMode &&
@@ -266,7 +274,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
         !this.expandOnHover
       );
     }
-@@ -1766,7 +1814,7 @@
+@@ -1770,7 +1819,7 @@
 
       if (node == null) {
         // We have a container for non-tab elements at the end of the scrollbox.
@@ -275,7 +283,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
       }
 
       node.before(tab);
-@@ -1861,7 +1909,7 @@
+@@ -1865,7 +1914,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.
@@ -284,7 +292,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
           const newTab2 = this.newTabButton;
           const newTabVertical = document.getElementById(
             "vertical-tabs-newtab-button"
-@@ -1956,10 +2004,12 @@
+@@ -1960,10 +2009,12 @@
 
     _handleTabSelect(aInstant) {
       let selectedTab = this.selectedItem;
@@ -297,7 +305,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
       selectedTab._notselectedsinceload = false;
     }
 
-@@ -2132,6 +2182,7 @@
+@@ -2136,6 +2187,7 @@
     }
 
     _positionPinnedTabs() {
@@ -305,7 +313,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
       let tabs = this.visibleTabs;
       let numPinned = gBrowser.pinnedTabCount;
       let absPositionHorizontalTabs =
-@@ -2206,7 +2257,7 @@
+@@ -2210,7 +2262,7 @@
         return;
       }
 
@@ -314,7 +322,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
 
       let directionX = screenX > dragData.animLastScreenX;
       let directionY = screenY > dragData.animLastScreenY;
-@@ -2215,6 +2266,8 @@
+@@ -2219,6 +2271,8 @@
 
       let { width: tabWidth, height: tabHeight } =
         draggedTab.getBoundingClientRect();
@@ -323,7 +331,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
       let shiftSizeX = tabWidth * movingTabs.length;
       let shiftSizeY = tabHeight;
       dragData.tabWidth = tabWidth;
-@@ -2244,7 +2297,7 @@
+@@ -2248,7 +2302,7 @@
       let translateX = screenX - dragData.screenX;
       let translateY = screenY - dragData.screenY;
       translateY +=
@@ -332,7 +340,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
       let firstBoundX = firstTabInRow.screenX - firstMovingTabScreenX;
       let firstBoundY = firstTabInRow.screenY - firstMovingTabScreenY;
       let lastBoundX =
-@@ -2389,12 +2442,16 @@
+@@ -2394,12 +2448,16 @@
 
       this.#clearDragOverCreateGroupTimer();
 
@@ -353,7 +361,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
 
       if (this.#rtlMode) {
         tabs.reverse();
-@@ -2408,7 +2465,7 @@
+@@ -2413,7 +2471,7 @@
       let size = this.verticalMode ? "height" : "width";
       let translateAxis = this.verticalMode ? "translateY" : "translateX";
       let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@@ -362,7 +370,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
       let translateX = event.screenX - dragData.screenX;
       let translateY = event.screenY - dragData.screenY;
 
-@@ -2422,12 +2479,21 @@
+@@ -2427,12 +2485,21 @@
       let lastTab = tabs.at(-1);
       let lastMovingTab = movingTabs.at(-1);
       let firstMovingTab = movingTabs[0];
@@ -385,7 +393,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
         translate +=
           this.arrowScrollbox.scrollbox[scrollDirection] - dragData.scrollPos;
       } else if (isPinned && this.verticalMode) {
-@@ -2446,6 +2512,9 @@
+@@ -2451,6 +2518,9 @@
           // Shift the `.tab-group-label-container` to shift the label element.
           item = item.parentElement;
         }
@@ -395,7 +403,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
         item.style.transform = `${translateAxis}(${translate}px)`;
       }
 
-@@ -2583,6 +2652,9 @@
+@@ -2588,6 +2658,9 @@
             break;
           }
           let element = tabs[mid];
@@ -405,18 +413,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
           let elementForSize = isTabGroupLabel(element)
             ? element.parentElement
             : element;
-@@ -2605,6 +2677,10 @@
-       if (!dropElement) {
-         dropElement = this.ariaFocusableItems[oldDropElementIndex];
-       }
-+      if (dropElement?.group?.hasAttribute("split-view-group")) {
-+        // We focus the group label element, not the group itself.
-+        dropElement = dropElement.group.labelElement;
-+      }
-       let newDropElementIndex = dropElement
-         ? dropElement.elementIndex
-         : oldDropElementIndex;
-@@ -2613,7 +2689,7 @@
+@@ -2664,7 +2737,7 @@
       let shouldCreateGroupOnDrop;
       let dropBefore;
       if (dropElement) {
@@ -425,7 +422,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
           ? dropElement.parentElement
           : dropElement;
 
-@@ -2675,12 +2751,12 @@
+@@ -2726,12 +2799,12 @@
         }
       }
 
@@ -437,10 +434,10 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
         // that dropping the tab(s) will create a new tab group.
 -        shouldCreateGroupOnDrop =
 +        shouldCreateGroupOnDrop = false &&
-           dropElement != draggedTab &&
           isTab(dropElement) &&
           !dropElement?.group &&
-@@ -2720,7 +2796,7 @@
+           overlapPercent > dragOverGroupingThreshold;
+@@ -2773,7 +2846,7 @@
               // Dropping right before the tab group.
               dropElement = dropElementGroup;
               colorCode = undefined;
@@ -449,7 +446,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
               // Dropping right after the collapsed tab group.
               dropElement = dropElementGroup;
               colorCode = undefined;
-@@ -2750,7 +2826,7 @@
+@@ -2803,7 +2876,7 @@
       // Shift background tabs to leave a gap where the dragged tab
       // would currently be dropped.
       for (let item of tabs) {
@@ -458,7 +455,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
           continue;
         }
 
-@@ -2759,6 +2835,9 @@
+@@ -2812,6 +2885,9 @@
         if (isTabGroupLabel(item)) {
           // Shift the `.tab-group-label-container` to shift the label element.
           item = item.parentElement;
@@ -468,7 +465,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
         }
         item.style.transform = transform;
       }
-@@ -2811,8 +2890,9 @@
+@@ -2864,8 +2940,9 @@
       );
     }
 
@@ -480,7 +477,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
         return;
       }
 
-@@ -2824,6 +2904,12 @@
+@@ -2877,6 +2954,12 @@
           item = item.parentElement;
         }
         item.style.transform = "";
@@ -493,7 +490,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
         item.removeAttribute("dragover-createGroup");
       }
       this.removeAttribute("movingtab-createGroup");
-@@ -2870,7 +2956,7 @@
+@@ -2923,7 +3006,7 @@
         let postTransitionCleanup = () => {
           movingTab._moveTogetherSelectedTabsData.animate = false;
         };
@@ -502,7 +499,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
           postTransitionCleanup();
         } else {
           let onTransitionEnd = transitionendEvent => {
-@@ -3043,7 +3129,7 @@
+@@ -3096,7 +3179,7 @@
     }
 
     _notifyBackgroundTab(aTab) {
@@ -511,7 +508,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783ea
         return;
       }
 
-@@ -3169,6 +3255,9 @@
+@@ -3222,6 +3305,9 @@
           return null;
         }
       }
--- a/src/browser/extensions/newtab/lib/AboutPreferences-sys-mjs.patch
+++ b/src/browser/extensions/newtab/lib/AboutPreferences-sys-mjs.patch
@@ -1,13 +0,0 @@
-diff --git a/browser/extensions/newtab/lib/AboutPreferences.sys.mjs b/browser/extensions/newtab/lib/AboutPreferences.sys.mjs
-index a325becabddda511204fc5bd2022edc332cdde7c..6bb29b21f1e6c1d6ea3d38d50f01148e0a51f0d7 100644
--- a/browser/extensions/newtab/lib/AboutPreferences.sys.mjs
-+++ b/browser/extensions/newtab/lib/AboutPreferences.sys.mjs
-@@ -52,7 +52,7 @@ const PREFS_BEFORE_SECTIONS = () => [
-       titleString: "home-prefs-shortcuts-header",
-       descString: "home-prefs-shortcuts-description",
-       get nestedPrefs() {
-        return Services.prefs.getBoolPref("browser.topsites.useRemoteSetting")
-+        return Services.prefs.getBoolPref("browser.topsites.useRemoteSetting") && false
-           ? [
-               {
-                 name: "showSponsoredTopSites",
--- a/src/browser/themes/shared/preferences/zen-preferences.css
+++ b/src/browser/themes/shared/preferences/zen-preferences.css
@@ -249,37 +249,6 @@ groupbox h2 {
  }
 }

-.zenLooksAndFeelColorOption {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background: var(--zen-primary-color);
-  position: relative;
-  overflow: hidden;
-}
-
-.zenLooksAndFeelColorOption::before {
-  content: '';
-  display: block;
-  width: 50%;
-  height: 50%;
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  background: var(--zen-colors-secondary);
-}
-
-.zenLooksAndFeelColorOption::after {
-  content: '';
-  display: block;
-  width: 50%;
-  height: 50%;
-  bottom: 0;
-  right: 0;
-  position: absolute;
-  background: var(--zen-colors-tertiary);
-}
-
 /* Workspace */

 #category-zen-tabs-management > .category-icon {
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -16,8 +16,7 @@
  border-radius: 100% !important;
 }

-#back-button,
-#zen-sidebar-web-panel-back {
+#back-button {
  list-style-image: url('back.svg') !important;
 }

@@ -25,19 +24,16 @@
  list-style-image: url('move-tab.svg') !important;
 }

-#forward-button,
-#zen-sidebar-web-panel-forward {
+#forward-button {
  list-style-image: url('forward.svg') !important;
 }

-#reload-button,
-#zen-sidebar-web-panel-reload {
+#reload-button {
  list-style-image: url('reload.svg') !important;
 }

 #stop-button,
 .close-icon,
-#zen-sidebar-web-panel-close,
 #zen-glance-sidebar-close,
 .zen-theme-picker-custom-list-item-remove {
  list-style-image: url('close.svg') !important;
@@ -51,10 +47,6 @@
  list-style-image: url('reload.svg') !important;
 }

-#PanelUI-zen-gradient-generator-color-toggle-algo {
-  list-style-image: url('palette.svg');
-}
-
 .tab-reset-button,
 #PanelUI-zen-gradient-generator-color-remove {
  list-style-image: url('unpin.svg') !important;
@@ -105,7 +97,8 @@
  list-style-image: url('chevron.svg') !important;
 }

-#zen-rice-share-options .options-header {
+#zen-rice-share-options .options-header,
+#PanelUI-zen-gradient-generator-color-page-right {
  list-style-image: url('arrow-right.svg');
 }

@@ -281,8 +274,7 @@
  list-style-image: url('bookmark-star-on-tray.svg') !important;
 }

-#home-button,
-#zen-sidebar-web-panel-home {
+#home-button {
  list-style-image: url('home.svg') !important;
 }

@@ -405,7 +397,8 @@
  list-style-image: url('expand-sidebar.svg') !important;
 }

-.panel-header > .subviewbutton-back {
+.panel-header > .subviewbutton-back,
+#PanelUI-zen-gradient-generator-color-page-left {
  list-style-image: url('arrow-left.svg') !important;
 }

@@ -600,11 +593,6 @@
  > #reload-button[displaystop]
  + #stop-button
  > .toolbarbutton-animatable-box
-  > .toolbarbutton-animatable-image,
-#zen-sidebar-web-panel-reload[animate]
-  > #zen-sidebar-web-panel-reload-button[displaystop]
-  + #zen-sidebar-web-panel-stop-button
-  > .toolbarbutton-animatable-box
  > .toolbarbutton-animatable-image {
  background-image: url('reload-to-stop.svg') !important;
 }
@@ -612,10 +600,6 @@
 #stop-reload-button[animate]
  > #reload-button
  > .toolbarbutton-animatable-box
-  > .toolbarbutton-animatable-image,
-#zen-sidebar-web-panel-reload[animate]
-  > #zen-sidebar-web-panel-reload-button
-  > .toolbarbutton-animatable-box
  > .toolbarbutton-animatable-image {
  background-image: url('stop-to-reload.svg') !important;
 }
@@ -782,3 +766,33 @@
    background: transparent !important;
  }
 }
+
+#PanelUI-zen-gradient-generator-scheme-auto {
+  list-style-image: url('sparkles.svg');
+}
+
+@media -moz-pref('zen.theme.window.scheme', 'auto') {
+  #PanelUI-zen-gradient-generator-scheme-auto {
+    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+  }
+}
+
+#PanelUI-zen-gradient-generator-scheme-dark {
+  list-style-image: url('moon-stars.svg');
+}
+
+@media -moz-pref('zen.theme.window.scheme', 'dark') {
+  #PanelUI-zen-gradient-generator-scheme-dark {
+    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+  }
+}
+
+#PanelUI-zen-gradient-generator-scheme-light {
+  list-style-image: url('face-sun.svg');
+}
+
+@media -moz-pref('zen.theme.window.scheme', 'light') {
+  #PanelUI-zen-gradient-generator-scheme-light {
+    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+  }
+}
--- a/src/browser/themes/shared/zen-icons/jar.inc.mn
+++ b/src/browser/themes/shared/zen-icons/jar.inc.mn
@@ -35,15 +35,16 @@
  skin/classic/browser/zen-icons/edit-paste.svg                      (../shared/zen-icons/lin/edit-paste.svg) 
  skin/classic/browser/zen-icons/edit-redo.svg                      (../shared/zen-icons/lin/edit-redo.svg) 
  skin/classic/browser/zen-icons/edit-select-all.svg                      (../shared/zen-icons/lin/edit-select-all.svg) 
-  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/edit-theme.svg                      (../shared/zen-icons/lin/edit-theme.svg) 
  skin/classic/browser/zen-icons/edit-undo.svg                      (../shared/zen-icons/lin/edit-undo.svg) 
+  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/essential-add.svg                      (../shared/zen-icons/lin/essential-add.svg) 
  skin/classic/browser/zen-icons/essential-remove.svg                      (../shared/zen-icons/lin/essential-remove.svg) 
  skin/classic/browser/zen-icons/expand-sidebar.svg                      (../shared/zen-icons/lin/expand-sidebar.svg) 
+  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
  skin/classic/browser/zen-icons/extension-blocked.svg                      (../shared/zen-icons/lin/extension-blocked.svg) 
  skin/classic/browser/zen-icons/extension.svg                      (../shared/zen-icons/lin/extension.svg) 
-  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
+  skin/classic/browser/zen-icons/face-sun.svg                      (../shared/zen-icons/lin/face-sun.svg) 
  skin/classic/browser/zen-icons/firefox.svg                      (../shared/zen-icons/lin/firefox.svg) 
  skin/classic/browser/zen-icons/folder.svg                      (../shared/zen-icons/lin/folder.svg) 
  skin/classic/browser/zen-icons/forget.svg                      (../shared/zen-icons/lin/forget.svg) 
@@ -80,6 +81,7 @@
  skin/classic/browser/zen-icons/microphone-fill.svg                      (../shared/zen-icons/lin/microphone-fill.svg) 
  skin/classic/browser/zen-icons/microphone.svg                      (../shared/zen-icons/lin/microphone.svg) 
  skin/classic/browser/zen-icons/midi.svg                      (../shared/zen-icons/lin/midi.svg) 
+  skin/classic/browser/zen-icons/moon-stars.svg                      (../shared/zen-icons/lin/moon-stars.svg) 
  skin/classic/browser/zen-icons/move-tab.svg                      (../shared/zen-icons/lin/move-tab.svg) 
  skin/classic/browser/zen-icons/new-tab-image.svg                      (../shared/zen-icons/lin/new-tab-image.svg) 
  skin/classic/browser/zen-icons/open.svg                      (../shared/zen-icons/lin/open.svg) 
@@ -95,27 +97,28 @@
  skin/classic/browser/zen-icons/pocket-outline.svg                      (../shared/zen-icons/lin/pocket-outline.svg) 
  skin/classic/browser/zen-icons/popup.svg                      (../shared/zen-icons/lin/popup.svg) 
  skin/classic/browser/zen-icons/print.svg                      (../shared/zen-icons/lin/print.svg) 
-  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/private-window.svg                      (../shared/zen-icons/lin/private-window.svg) 
+  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/reader-mode.svg                      (../shared/zen-icons/lin/reader-mode.svg) 
-  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/reload-to-stop.svg                      (../shared/zen-icons/lin/reload-to-stop.svg) 
+  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/report.svg                      (../shared/zen-icons/lin/report.svg) 
  skin/classic/browser/zen-icons/save.svg                      (../shared/zen-icons/lin/save.svg) 
  skin/classic/browser/zen-icons/screen-blocked.svg                      (../shared/zen-icons/lin/screen-blocked.svg) 
-  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/screen.svg                      (../shared/zen-icons/lin/screen.svg) 
+  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/search-glass.svg                      (../shared/zen-icons/lin/search-glass.svg) 
  skin/classic/browser/zen-icons/search-page.svg                      (../shared/zen-icons/lin/search-page.svg) 
  skin/classic/browser/zen-icons/security-broken.svg                      (../shared/zen-icons/lin/security-broken.svg) 
-  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/security-warning.svg                      (../shared/zen-icons/lin/security-warning.svg) 
+  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/send-to-device.svg                      (../shared/zen-icons/lin/send-to-device.svg) 
  skin/classic/browser/zen-icons/settings.svg                      (../shared/zen-icons/lin/settings.svg) 
  skin/classic/browser/zen-icons/share.svg                      (../shared/zen-icons/lin/share.svg) 
-  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/sidebar.svg                      (../shared/zen-icons/lin/sidebar.svg) 
+  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/source-code.svg                      (../shared/zen-icons/lin/source-code.svg) 
+  skin/classic/browser/zen-icons/sparkles.svg                      (../shared/zen-icons/lin/sparkles.svg) 
  skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/lin/spell-check.svg) 
  skin/classic/browser/zen-icons/split.svg                      (../shared/zen-icons/lin/split.svg) 
  skin/classic/browser/zen-icons/stop-to-reload.svg                      (../shared/zen-icons/lin/stop-to-reload.svg) 
@@ -174,15 +177,16 @@
  skin/classic/browser/zen-icons/edit-paste.svg                      (../shared/zen-icons/lin/edit-paste.svg) 
  skin/classic/browser/zen-icons/edit-redo.svg                      (../shared/zen-icons/lin/edit-redo.svg) 
  skin/classic/browser/zen-icons/edit-select-all.svg                      (../shared/zen-icons/lin/edit-select-all.svg) 
-  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/edit-theme.svg                      (../shared/zen-icons/lin/edit-theme.svg) 
  skin/classic/browser/zen-icons/edit-undo.svg                      (../shared/zen-icons/lin/edit-undo.svg) 
+  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/essential-add.svg                      (../shared/zen-icons/lin/essential-add.svg) 
  skin/classic/browser/zen-icons/essential-remove.svg                      (../shared/zen-icons/lin/essential-remove.svg) 
  skin/classic/browser/zen-icons/expand-sidebar.svg                      (../shared/zen-icons/lin/expand-sidebar.svg) 
+  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
  skin/classic/browser/zen-icons/extension-blocked.svg                      (../shared/zen-icons/lin/extension-blocked.svg) 
  skin/classic/browser/zen-icons/extension.svg                      (../shared/zen-icons/lin/extension.svg) 
-  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
+  skin/classic/browser/zen-icons/face-sun.svg                      (../shared/zen-icons/lin/face-sun.svg) 
  skin/classic/browser/zen-icons/firefox.svg                      (../shared/zen-icons/lin/firefox.svg) 
  skin/classic/browser/zen-icons/folder.svg                      (../shared/zen-icons/lin/folder.svg) 
  skin/classic/browser/zen-icons/forget.svg                      (../shared/zen-icons/lin/forget.svg) 
@@ -219,6 +223,7 @@
  skin/classic/browser/zen-icons/microphone-fill.svg                      (../shared/zen-icons/lin/microphone-fill.svg) 
  skin/classic/browser/zen-icons/microphone.svg                      (../shared/zen-icons/lin/microphone.svg) 
  skin/classic/browser/zen-icons/midi.svg                      (../shared/zen-icons/lin/midi.svg) 
+  skin/classic/browser/zen-icons/moon-stars.svg                      (../shared/zen-icons/lin/moon-stars.svg) 
  skin/classic/browser/zen-icons/move-tab.svg                      (../shared/zen-icons/lin/move-tab.svg) 
  skin/classic/browser/zen-icons/new-tab-image.svg                      (../shared/zen-icons/lin/new-tab-image.svg) 
  skin/classic/browser/zen-icons/open.svg                      (../shared/zen-icons/lin/open.svg) 
@@ -234,27 +239,28 @@
  skin/classic/browser/zen-icons/pocket-outline.svg                      (../shared/zen-icons/lin/pocket-outline.svg) 
  skin/classic/browser/zen-icons/popup.svg                      (../shared/zen-icons/lin/popup.svg) 
  skin/classic/browser/zen-icons/print.svg                      (../shared/zen-icons/lin/print.svg) 
-  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/private-window.svg                      (../shared/zen-icons/lin/private-window.svg) 
+  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/reader-mode.svg                      (../shared/zen-icons/lin/reader-mode.svg) 
-  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/reload-to-stop.svg                      (../shared/zen-icons/lin/reload-to-stop.svg) 
+  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/report.svg                      (../shared/zen-icons/lin/report.svg) 
  skin/classic/browser/zen-icons/save.svg                      (../shared/zen-icons/lin/save.svg) 
  skin/classic/browser/zen-icons/screen-blocked.svg                      (../shared/zen-icons/lin/screen-blocked.svg) 
-  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/screen.svg                      (../shared/zen-icons/lin/screen.svg) 
+  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/search-glass.svg                      (../shared/zen-icons/lin/search-glass.svg) 
  skin/classic/browser/zen-icons/search-page.svg                      (../shared/zen-icons/lin/search-page.svg) 
  skin/classic/browser/zen-icons/security-broken.svg                      (../shared/zen-icons/lin/security-broken.svg) 
-  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/security-warning.svg                      (../shared/zen-icons/lin/security-warning.svg) 
+  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/send-to-device.svg                      (../shared/zen-icons/lin/send-to-device.svg) 
  skin/classic/browser/zen-icons/settings.svg                      (../shared/zen-icons/lin/settings.svg) 
  skin/classic/browser/zen-icons/share.svg                      (../shared/zen-icons/lin/share.svg) 
-  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/sidebar.svg                      (../shared/zen-icons/lin/sidebar.svg) 
+  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/source-code.svg                      (../shared/zen-icons/lin/source-code.svg) 
+  skin/classic/browser/zen-icons/sparkles.svg                      (../shared/zen-icons/lin/sparkles.svg) 
  skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/lin/spell-check.svg) 
  skin/classic/browser/zen-icons/split.svg                      (../shared/zen-icons/lin/split.svg) 
  skin/classic/browser/zen-icons/stop-to-reload.svg                      (../shared/zen-icons/lin/stop-to-reload.svg) 
@@ -313,15 +319,16 @@
  skin/classic/browser/zen-icons/edit-paste.svg                      (../shared/zen-icons/lin/edit-paste.svg) 
  skin/classic/browser/zen-icons/edit-redo.svg                      (../shared/zen-icons/lin/edit-redo.svg) 
  skin/classic/browser/zen-icons/edit-select-all.svg                      (../shared/zen-icons/lin/edit-select-all.svg) 
-  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/edit-theme.svg                      (../shared/zen-icons/lin/edit-theme.svg) 
  skin/classic/browser/zen-icons/edit-undo.svg                      (../shared/zen-icons/lin/edit-undo.svg) 
+  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/lin/edit.svg) 
  skin/classic/browser/zen-icons/essential-add.svg                      (../shared/zen-icons/lin/essential-add.svg) 
  skin/classic/browser/zen-icons/essential-remove.svg                      (../shared/zen-icons/lin/essential-remove.svg) 
  skin/classic/browser/zen-icons/expand-sidebar.svg                      (../shared/zen-icons/lin/expand-sidebar.svg) 
+  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
  skin/classic/browser/zen-icons/extension-blocked.svg                      (../shared/zen-icons/lin/extension-blocked.svg) 
  skin/classic/browser/zen-icons/extension.svg                      (../shared/zen-icons/lin/extension.svg) 
-  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/lin/ext-link.svg) 
+  skin/classic/browser/zen-icons/face-sun.svg                      (../shared/zen-icons/lin/face-sun.svg) 
  skin/classic/browser/zen-icons/firefox.svg                      (../shared/zen-icons/lin/firefox.svg) 
  skin/classic/browser/zen-icons/folder.svg                      (../shared/zen-icons/lin/folder.svg) 
  skin/classic/browser/zen-icons/forget.svg                      (../shared/zen-icons/lin/forget.svg) 
@@ -358,6 +365,7 @@
  skin/classic/browser/zen-icons/microphone-fill.svg                      (../shared/zen-icons/lin/microphone-fill.svg) 
  skin/classic/browser/zen-icons/microphone.svg                      (../shared/zen-icons/lin/microphone.svg) 
  skin/classic/browser/zen-icons/midi.svg                      (../shared/zen-icons/lin/midi.svg) 
+  skin/classic/browser/zen-icons/moon-stars.svg                      (../shared/zen-icons/lin/moon-stars.svg) 
  skin/classic/browser/zen-icons/move-tab.svg                      (../shared/zen-icons/lin/move-tab.svg) 
  skin/classic/browser/zen-icons/new-tab-image.svg                      (../shared/zen-icons/lin/new-tab-image.svg) 
  skin/classic/browser/zen-icons/open.svg                      (../shared/zen-icons/lin/open.svg) 
@@ -373,27 +381,28 @@
  skin/classic/browser/zen-icons/pocket-outline.svg                      (../shared/zen-icons/lin/pocket-outline.svg) 
  skin/classic/browser/zen-icons/popup.svg                      (../shared/zen-icons/lin/popup.svg) 
  skin/classic/browser/zen-icons/print.svg                      (../shared/zen-icons/lin/print.svg) 
-  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/private-window.svg                      (../shared/zen-icons/lin/private-window.svg) 
+  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/lin/privateBrowsing.svg) 
  skin/classic/browser/zen-icons/reader-mode.svg                      (../shared/zen-icons/lin/reader-mode.svg) 
-  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/reload-to-stop.svg                      (../shared/zen-icons/lin/reload-to-stop.svg) 
+  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/lin/reload.svg) 
  skin/classic/browser/zen-icons/report.svg                      (../shared/zen-icons/lin/report.svg) 
  skin/classic/browser/zen-icons/save.svg                      (../shared/zen-icons/lin/save.svg) 
  skin/classic/browser/zen-icons/screen-blocked.svg                      (../shared/zen-icons/lin/screen-blocked.svg) 
-  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/screen.svg                      (../shared/zen-icons/lin/screen.svg) 
+  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/lin/screenshot.svg) 
  skin/classic/browser/zen-icons/search-glass.svg                      (../shared/zen-icons/lin/search-glass.svg) 
  skin/classic/browser/zen-icons/search-page.svg                      (../shared/zen-icons/lin/search-page.svg) 
  skin/classic/browser/zen-icons/security-broken.svg                      (../shared/zen-icons/lin/security-broken.svg) 
-  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/security-warning.svg                      (../shared/zen-icons/lin/security-warning.svg) 
+  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/lin/security.svg) 
  skin/classic/browser/zen-icons/send-to-device.svg                      (../shared/zen-icons/lin/send-to-device.svg) 
  skin/classic/browser/zen-icons/settings.svg                      (../shared/zen-icons/lin/settings.svg) 
  skin/classic/browser/zen-icons/share.svg                      (../shared/zen-icons/lin/share.svg) 
-  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/sidebar.svg                      (../shared/zen-icons/lin/sidebar.svg) 
+  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/lin/sidebars-right.svg) 
  skin/classic/browser/zen-icons/source-code.svg                      (../shared/zen-icons/lin/source-code.svg) 
+  skin/classic/browser/zen-icons/sparkles.svg                      (../shared/zen-icons/lin/sparkles.svg) 
  skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/lin/spell-check.svg) 
  skin/classic/browser/zen-icons/split.svg                      (../shared/zen-icons/lin/split.svg) 
  skin/classic/browser/zen-icons/stop-to-reload.svg                      (../shared/zen-icons/lin/stop-to-reload.svg) 
--- a/src/browser/themes/shared/zen-icons/lin/face-sun.svg
+++ b/src/browser/themes/shared/zen-icons/lin/face-sun.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="M17.25,8.25h-1.292c-.146-1.369-.69-2.619-1.512-3.637l1.583-1.583c.293-.293,.293-.768,0-1.061s-.767-.294-1.061,0l-1.583,1.583c-1.018-.821-2.268-1.365-3.636-1.511V.75c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75v1.292c-1.368,.146-2.618,.69-3.636,1.511l-1.583-1.583c-.293-.293-.768-.293-1.061,0s-.293,.768,0,1.061l1.583,1.583c-.821,1.018-1.365,2.268-1.511,3.637H.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h1.292c.146,1.369,.69,2.619,1.511,3.637l-1.583,1.583c-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22,.191,0,.384-.073,.53-.22l1.583-1.583c1.018,.821,2.268,1.365,3.636,1.511v1.292c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.292c1.368-.146,2.618-.69,3.636-1.511l1.583,1.583c.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c.293-.293,.293-.768,0-1.061l-1.583-1.583c.821-1.018,1.365-2.268,1.512-3.637h1.292c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-11.25,1.75c-.552,0-1-.448-1-1s.448-1,1-1,1,.448,1,1-.448,1-1,1Zm3,2c-.828,0-1.5-.672-1.5-1.5,0-.276,.224-.5,.5-.5h2c.276,0,.5,.224,.5,.5,0,.828-.672,1.5-1.5,1.5Zm2-3c0-.552,.448-1,1-1s1,.448,1,1-.448,1-1,1-1-.448-1-1Z" fill="currentColor"></path></svg>
--- a/src/browser/themes/shared/zen-icons/lin/moon-stars.svg
+++ b/src/browser/themes/shared/zen-icons/lin/moon-stars.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="M16.705,10.223c-.246-.183-.578-.197-.838-.037-.868,.532-1.859,.813-2.867,.813-3.033,0-5.5-2.467-5.5-5.5,0-1.146,.354-2.247,1.023-3.186,.177-.249,.186-.581,.021-.839-.164-.258-.467-.386-.77-.334C3.994,1.847,1.25,5.152,1.25,9c0,4.411,3.589,8,8,8,3.638,0,6.819-2.461,7.735-5.986,.077-.296-.034-.609-.28-.791Z" fill="currentColor"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-color="color-2"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" data-color="color-2"></circle></svg>
--- a/src/browser/themes/shared/zen-icons/lin/sparkles.svg
+++ b/src/browser/themes/shared/zen-icons/lin/sparkles.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="M3.025,5.623c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263Z" fill="currentColor" data-color="color-2"></path><path d="M16.525,8.803l-4.535-1.793-1.793-4.535c-.227-.572-1.168-.572-1.395,0l-1.793,4.535-4.535,1.793c-.286,.113-.475,.39-.475,.697s.188,.584,.475,.697l4.535,1.793,1.793,4.535c.113,.286,.39,.474,.697,.474s.584-.188,.697-.474l1.793-4.535,4.535-1.793c.286-.113,.475-.39,.475-.697s-.188-.584-.475-.697Z" fill="currentColor"></path></svg>
--- a/src/dom/base/Document-cpp.patch
+++ b/src/dom/base/Document-cpp.patch
@@ -0,0 +1,20 @@
+diff --git a/dom/base/Document.cpp b/dom/base/Document.cpp
+index a16bef739fcde0f14ba7e53e0acfa3aa2ee1dd3a..f928c0f1df4e86bd344ab7e57dab112234fb92e8 100644
+--- a/dom/base/Document.cpp
+++ b/dom/base/Document.cpp
+@@ -3332,6 +3332,15 @@ void Document::FillStyleSetUserAndUASheets() {
+ 
+   ServoStyleSet& styleSet = EnsureStyleSet();
+   for (StyleSheet* sheet : *sheetService->UserStyleSheets()) {
+    // If the url starts with "file://" and ends with 'zen-themes.css', then
+    // skip it if the document is not in a chrome docshell.
+    // This is to avoid loading the user chrome stylesheet in the content
+    // process, which is not allowed.
+    auto spec = sheet->GetSheetURI()->GetSpecOrDefault();
+    if (!IsInChromeDocShell() && StringBeginsWith(spec, "file://"_ns) &&
+        StringEndsWith(spec, "zen-themes.css"_ns)) {
+      continue;
+    }
+     styleSet.AppendStyleSheet(*sheet);
+   }
+ 
--- a/src/firefox-patches/ff139-sandbox-missing-header.patch
+++ b/src/firefox-patches/ff139-sandbox-missing-header.patch
@@ -1,32 +0,0 @@
-
-# HG changeset patch
-# User Julian Descottes <jdescottes@mozilla.com>
-# Date 1744201993 0
-# Node ID 2e2d932d75c44447af89224be5e4324dc080c447
-# Parent  9f134a1b1a884a857c59517ba0e8f3603e4009dd
-Bug 1959377 - Include vector in mac/Sandbox.h to fix build on macos 15.4 r=emilio
-
-Differential Revision: https://phabricator.services.mozilla.com/D244870
-
-diff --git a/security/sandbox/mac/Sandbox.h b/security/sandbox/mac/Sandbox.h
--- a/security/sandbox/mac/Sandbox.h
-+++ b/security/sandbox/mac/Sandbox.h
-@@ -2,16 +2,17 @@
- /* This Source Code Form is subject to the terms of the Mozilla Public
-  * License, v. 2.0. If a copy of the MPL was not distributed with this
-  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
- 
- #ifndef mozilla_Sandbox_h
- #define mozilla_Sandbox_h
- 
- #include <string>
-+#include <vector>
- #include "mozilla/ipc/UtilityProcessSandboxing.h"
- 
- enum MacSandboxType {
-   MacSandboxType_Default = 0,
-   MacSandboxType_Content,
-   MacSandboxType_GMP,
-   MacSandboxType_RDD,
-   MacSandboxType_Socket,
-
--- a/src/firefox-patches/ff141-gradienth-dithering.patch
+++ b/src/firefox-patches/ff141-gradienth-dithering.patch
@@ -0,0 +1,97 @@
+diff --git a/gfx/wr/swgl/build.rs b/gfx/wr/swgl/build.rs
+--- a/gfx/wr/swgl/build.rs
+++ b/gfx/wr/swgl/build.rs
+@@ -147,10 +147,11 @@
+     let shader_dir = std::env::var("CARGO_MANIFEST_DIR").unwrap() + "/../webrender/res";
+ 
+     let shader_flags = ShaderFeatureFlags::GL
+         | ShaderFeatureFlags::DUAL_SOURCE_BLENDING
+         | ShaderFeatureFlags::ADVANCED_BLEND_EQUATION
+        | ShaderFeatureFlags::DITHERING
+         | ShaderFeatureFlags::DEBUG;
+     let mut shaders: Vec<String> = Vec::new();
+     for (name, features) in get_shader_features(shader_flags) {
+         shaders.extend(features.iter().map(|f| {
+             if f.is_empty() {
+diff --git a/gfx/wr/webrender/res/brush_linear_gradient.glsl b/gfx/wr/webrender/res/brush_linear_gradient.glsl
+--- a/gfx/wr/webrender/res/brush_linear_gradient.glsl
+++ b/gfx/wr/webrender/res/brush_linear_gradient.glsl
+@@ -79,17 +79,23 @@
+ 
+     return Fragment(color);
+ }
+ 
+ #ifdef SWGL_DRAW_SPAN
+#ifdef WR_FEATURE_DITHERING
+void swgl_drawSpanRGBA8() {
+    return;
+}
+#else
+ void swgl_drawSpanRGBA8() {
+     int address = swgl_validateGradient(sGpuBufferF, get_gpu_buffer_uv(v_gradient_address.x), int(GRADIENT_ENTRIES + 2.0));
+     if (address < 0) {
+         return;
+     }
+ 
+     swgl_commitLinearGradientRGBA8(sGpuBufferF, address, GRADIENT_ENTRIES, true, v_gradient_repeat.x != 0.0,
+                                    v_pos, v_scale_dir, v_start_offset.x);
+ }
+ #endif
+#endif
+ 
+ #endif
+diff --git a/gfx/wr/webrender/src/renderer/init.rs b/gfx/wr/webrender/src/renderer/init.rs
+--- a/gfx/wr/webrender/src/renderer/init.rs
+++ b/gfx/wr/webrender/src/renderer/init.rs
+@@ -222,11 +222,11 @@
+     fn default() -> Self {
+         WebRenderOptions {
+             resource_override_path: None,
+             use_optimized_shaders: false,
+             enable_aa: true,
+-            enable_dithering: false,
+            enable_dithering: true,
+             debug_flags: DebugFlags::empty(),
+             max_recorded_profiles: 0,
+             precache_flags: ShaderPrecacheFlags::empty(),
+             enable_subpixel_aa: false,
+             clear_color: ColorF::new(1.0, 1.0, 1.0, 1.0),
+--- a/gfx/wr/webrender/build.rs
+++ b/gfx/wr/webrender/build.rs
+@@ -150,11 +150,10 @@
+         ) {
+             flags.remove(ShaderFeatureFlags::TEXTURE_EXTERNAL_ESSL1);
+         }
+         // The optimizer cannot handle the required EXT_YUV_target extension
+         flags.remove(ShaderFeatureFlags::TEXTURE_EXTERNAL_BT709);
+-        flags.remove(ShaderFeatureFlags::DITHERING);
+ 
+         for (shader_name, configs) in get_shader_features(flags) {
+             for config in configs {
+                 shaders.push(ShaderOptimizationInput {
+                     shader_name,
+diff --git a/gfx/wr/webrender/res/shared.glsl b/gfx/wr/webrender/res/shared.glsl
+index f9c093f8486dbd481f2520762f80ace257c294f6..904f9991e917423e11563d862bbd185725523573 100644
+--- a/gfx/wr/webrender/res/shared.glsl
+++ b/gfx/wr/webrender/res/shared.glsl
+@@ -226,6 +226,7 @@ uniform __samplerExternal2DY2YEXT sColor1;
+ uniform __samplerExternal2DY2YEXT sColor2;
+ #endif
+ 
+#define WR_FEATURE_DITHERING
+ #ifdef WR_FEATURE_DITHERING
+ uniform sampler2D sDither;
+ #endif
+diff --git a/gfx/wr/webrender/res/gradient.glsl b/gfx/wr/webrender/res/gradient.glsl
+index 6ed2e6987135e04a70fcc908c089bf225ffdb255..09a4acdf3f53a53e123510fdc5aea8b9b8c4d91e 100644
+--- a/gfx/wr/webrender/res/gradient.glsl
+++ b/gfx/wr/webrender/res/gradient.glsl
+@@ -11,6 +11,7 @@ flat varying mediump vec2 v_gradient_repeat;
+ 
+ #ifdef WR_FRAGMENT_SHADER
+ 
+#define WR_FEATURE_DITHERING
+ #ifdef WR_FEATURE_DITHERING
+ vec4 dither(vec4 color) {
+     const int matrix_mask = 7;
+
--- a/src/layout/base/nsStyleSheetService-h.patch
+++ b/src/layout/base/nsStyleSheetService-h.patch
@@ -0,0 +1,13 @@
+diff --git a/layout/base/nsStyleSheetService.h b/layout/base/nsStyleSheetService.h
+index 8c49b338bf8e6830874ace9a08e8c0713167ee58..53a48129b2b6b2adf15e0fe17da14c3b16577966 100644
+--- a/layout/base/nsStyleSheetService.h
+++ b/layout/base/nsStyleSheetService.h
+@@ -50,6 +50,8 @@ class nsStyleSheetService final : public nsIStyleSheetService,
+ 
+   size_t SizeOfIncludingThis(mozilla::MallocSizeOf aMallocSizeOf) const;
+ 
+  void UpdateZenModStyles(mozilla::StyleSheet* aSheet, nsIURI* aURI, bool aInsert);
+
+   static nsStyleSheetService* GetInstance();
+   static nsStyleSheetService* gInstance;
+ 
--- a/src/security/mac/hardenedruntime/v2/production/firefox-browser-xml.patch
+++ b/src/security/mac/hardenedruntime/v2/production/firefox-browser-xml.patch
@@ -1,7 +1,7 @@
-diff --git a/security/mac/hardenedruntime/v2/production/firefox.browser.xml b/security/mac/hardenedruntime/v2/production/firefox.browser.xml
+diff --git a/security/mac/hardenedruntime/production/firefox.browser.xml b/security/mac/hardenedruntime/production/firefox.browser.xml
 index abbf33e9d2b3c9d1e0a34bd46e7cd289c435533b..d580b156fed13f4de8eb73e5c29c646a7a22a1d2 100644
--- a/security/mac/hardenedruntime/v2/production/firefox.browser.xml
-+++ b/security/mac/hardenedruntime/v2/production/firefox.browser.xml
+--- a/security/mac/hardenedruntime/production/firefox.browser.xml
+++ b/security/mac/hardenedruntime/production/firefox.browser.xml
@@ -26,7 +26,7 @@
 
     <!-- Required for com.apple.developer.web-browser.public-key-credential -->
--- a/src/servo/components/style/gecko/media_features-rs.patch
+++ b/src/servo/components/style/gecko/media_features-rs.patch
@@ -1,5 +1,5 @@
 diff --git a/servo/components/style/gecko/media_features.rs b/servo/components/style/gecko/media_features.rs
-index cc24406e22f536733b07a9398580a8719b61e134..214f238b38377a8480711ea2d0ec30e99800bb5c 100644
+index c66f1e26b22a6eeb2192d531e365ba34a61e220d..097ffce888ee0e180cc06448ea34860e6a467a2a 100644
 --- a/servo/components/style/gecko/media_features.rs
 +++ b/servo/components/style/gecko/media_features.rs
@@ -13,6 +13,9 @@ use crate::values::computed::{CSSPixelLength, Context, Ratio, Resolution};
@@ -12,7 +12,7 @@ index cc24406e22f536733b07a9398580a8719b61e134..214f238b38377a8480711ea2d0ec30e9
 
 fn device_size(device: &Device) -> Size2D<Au> {
     let mut width = 0;
-@@ -606,6 +609,13 @@ fn eval_moz_overlay_scrollbars(context: &Context) -> bool {
+@@ -610,6 +613,13 @@ fn eval_moz_overlay_scrollbars(context: &Context) -> bool {
     unsafe { bindings::Gecko_MediaFeatures_UseOverlayScrollbars(context.device().document()) }
 }
 
@@ -26,16 +26,16 @@ index cc24406e22f536733b07a9398580a8719b61e134..214f238b38377a8480711ea2d0ec30e9
 fn get_lnf_int(int_id: i32) -> i32 {
     unsafe { bindings::Gecko_GetLookAndFeelInt(int_id) }
 }
-@@ -653,7 +663,7 @@ macro_rules! lnf_int_feature {
+@@ -657,7 +667,7 @@ macro_rules! lnf_int_feature {
 /// to support new types in these entries and (2) ensuring that either
 /// nsPresContext::MediaFeatureValuesChanged is called when the value that
 /// would be returned by the evaluator function could change.
-pub static MEDIA_FEATURES: [QueryFeatureDescription; 61] = [
-+pub static MEDIA_FEATURES: [QueryFeatureDescription; 62] = [
+-pub static MEDIA_FEATURES: [QueryFeatureDescription; 62] = [
+pub static MEDIA_FEATURES: [QueryFeatureDescription; 63] = [
     feature!(
         atom!("width"),
         AllowsRanges::Yes,
-@@ -918,6 +928,12 @@ pub static MEDIA_FEATURES: [QueryFeatureDescription; 61] = [
+@@ -928,6 +938,12 @@ pub static MEDIA_FEATURES: [QueryFeatureDescription; 62] = [
         Evaluator::BoolInteger(eval_moz_overlay_scrollbars),
         FeatureFlags::CHROME_AND_UA_ONLY,
     ),
--- a/src/testing/profiles/mochitest/user-js.patch
+++ b/src/testing/profiles/mochitest/user-js.patch
@@ -1,8 +1,8 @@
 diff --git a/testing/profiles/mochitest/user.js b/testing/profiles/mochitest/user.js
-index a4068ac3f61161d014c49d54ae7a3bf886868f1b..6af5907abb46b6d3b871c159c73eec8373ee8ef5 100644
+index a4068ac3f61161d014c49d54ae7a3bf886868f1b..b9861cfaae19a4a71b75ccc73095dc602df22b12 100644
 --- a/testing/profiles/mochitest/user.js
 +++ b/testing/profiles/mochitest/user.js
-@@ -41,3 +41,10 @@ user_pref("places.history.floodingPrevention.enabled", false);
+@@ -41,3 +41,9 @@ 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);
@@ -12,4 +12,3 @@ index a4068ac3f61161d014c49d54ae7a3bf886868f1b..6af5907abb46b6d3b871c159c73eec83
 +user_pref("zen.watermark.enabled", false);
 +user_pref("zen.urlbar.replace-newtab", false);
 +user_pref("zen.testing.enabled", true);
-+user_pref("dom.security.https_only_mode", false); // Dont ask why
--- a/src/testing/profiles/profileserver/user-js.patch
+++ b/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..531446847039fd683af52ac7fdfd601bea3cb624 100644
+index 19ff7d474f6d22d2d386764e2e6942ce6a324470..75ec03c0d6a2f12986eb434f4b9b5350e1af37fd 100644
 --- a/testing/profiles/profileserver/user.js
 +++ b/testing/profiles/profileserver/user.js
-@@ -8,3 +8,13 @@
+@@ -8,3 +8,12 @@
 user_pref("dom.timeout.enable_budget_timer_throttling", false);
 // Turn off update
 user_pref("app.update.disabledForTesting", true);
@@ -15,4 +15,3 @@ index 19ff7d474f6d22d2d386764e2e6942ce6a324470..531446847039fd683af52ac7fdfd601b
 +user_pref("zen.urlbar.replace-newtab", false);
 +user_pref("zen.testing.enabled", true);
 +user_pref("zen.testing.profiling.enabled", true);
-+user_pref("dom.security.https_only_mode", false); // Dont ask why
--- a/src/toolkit/content/widgets/browser-custom-element-js.patch
+++ b/src/toolkit/content/widgets/browser-custom-element-js.patch
@@ -1,18 +0,0 @@
-diff --git a/toolkit/content/widgets/browser-custom-element.js b/toolkit/content/widgets/browser-custom-element.js
-index a531577a29212cdb9e745b88e17fe4177be76635..ae976ecef71d0d659fa6a1d6fea60f5270073544 100644
--- a/toolkit/content/widgets/browser-custom-element.js
-+++ b/toolkit/content/widgets/browser-custom-element.js
-@@ -556,11 +556,11 @@
-       if (!this.browsingContext) {
-         return;
-       }
-      this.browsingContext.isActive = val;
-+      this.browsingContext.isActive = val || this.zenModeActive;
-       if (this.isRemoteBrowser) {
-         let remoteTab = this.frameLoader?.remoteTab;
-         if (remoteTab) {
-          remoteTab.renderLayers = val;
-+          remoteTab.renderLayers = val || this.zenModeActive;
-         }
-       }
-     }
--- a/src/toolkit/content/widgets/browser-custom-element-mjs.patch
+++ b/src/toolkit/content/widgets/browser-custom-element-mjs.patch
@@ -0,0 +1,18 @@
+diff --git a/toolkit/content/widgets/browser-custom-element.mjs b/toolkit/content/widgets/browser-custom-element.mjs
+index 8eeea2a403ba2007a1a1e6074bb982b24f40fef5..29bae869dfd8c9df6039b3c9b8b1603092e517ea 100644
+--- a/toolkit/content/widgets/browser-custom-element.mjs
+++ b/toolkit/content/widgets/browser-custom-element.mjs
+@@ -482,11 +482,11 @@ class MozBrowser extends MozElements.MozElementMixin(XULFrameElement) {
+     if (!this.browsingContext) {
+       return;
+     }
+-    this.browsingContext.isActive = val;
+    this.browsingContext.isActive = val || this.zenModeActive;
+     if (this.isRemoteBrowser) {
+       let remoteTab = this.frameLoader?.remoteTab;
+       if (remoteTab) {
+-        remoteTab.renderLayers = val;
+        remoteTab.renderLayers = val || this.zenModeActive;
+       }
+     }
+   }
--- a/src/toolkit/modules/ShortcutUtils-sys-mjs.patch
+++ b/src/toolkit/modules/ShortcutUtils-sys-mjs.patch
@@ -1,5 +1,5 @@
 diff --git a/toolkit/modules/ShortcutUtils.sys.mjs b/toolkit/modules/ShortcutUtils.sys.mjs
-index 360a7dbeeae3899af01945e35d5fe3aa0cb3c562..354c0c9e65e443682a2b12113bc618af9e07910f 100644
+index 3e796cb6586ad39257a29c2a6da1d0415f4c2676..dd883f81612d9dc892e720b63e2793e43b9686b3 100644
 --- a/toolkit/modules/ShortcutUtils.sys.mjs
 +++ b/toolkit/modules/ShortcutUtils.sys.mjs
@@ -140,6 +140,7 @@ export var ShortcutUtils = {
@@ -10,18 +10,3 @@ index 360a7dbeeae3899af01945e35d5fe3aa0cb3c562..354c0c9e65e443682a2b12113bc618af
       key = keyAttribute.toUpperCase();
     }
 
-@@ -382,12 +383,12 @@ export var ShortcutUtils = {
-           return ShortcutUtils.MOVE_TAB_FORWARD;
-         }
-         break;
-      case event.DOM_VK_LEFT:
-+      case event.DOM_VK_UP: // For macOS, make sure if this patch needs to be updated
-         if (accelMetaKey && event.altKey && !event.shiftKey && !event.ctrlKey) {
-           return ShortcutUtils.PREVIOUS_TAB;
-         }
-         break;
-      case event.DOM_VK_RIGHT:
-+      case event.DOM_VK_DOWN: // For macOS, make sure if this patch needs to be updated
-         if (accelMetaKey && event.altKey && !event.shiftKey && !event.ctrlKey) {
-           return ShortcutUtils.NEXT_TAB;
-         }
--- a/src/toolkit/themes/shared/menulist-css.patch
+++ b/src/toolkit/themes/shared/menulist-css.patch
@@ -0,0 +1,13 @@
+diff --git a/toolkit/themes/shared/menulist.css b/toolkit/themes/shared/menulist.css
+index e5ac973b1ee2595e8547680465e25d537685a9e7..20f85152d783c81be5e29846353daca9ccd0c67d 100644
+--- a/toolkit/themes/shared/menulist.css
+++ b/toolkit/themes/shared/menulist.css
+@@ -53,7 +53,7 @@
+ 
+ :host(:not([native])) {
+   appearance: none;
+-  background-color: var(--button-background-color);
+  background-color: light-dark(rgba(0,0,0,.1), rgba(255,255,255,.1));
+   color: var(--button-text-color);
+   border-radius: 4px;
+   padding-block: 4px;
--- a/src/toolkit/themes/shared/menulist-shared-css.patch
+++ b/src/toolkit/themes/shared/menulist-shared-css.patch
@@ -1,13 +0,0 @@
-diff --git a/toolkit/themes/shared/menulist-shared.css b/toolkit/themes/shared/menulist-shared.css
-index 5dd5549674570170a694afbd9ea4526e52e3192a..a24ded413065ce1493e8622c5777c5b5bdac128e 100644
--- a/toolkit/themes/shared/menulist-shared.css
-+++ b/toolkit/themes/shared/menulist-shared.css
-@@ -14,7 +14,7 @@
- 
- :host(:not([native])) {
-   appearance: none;
-  background-color: var(--button-background-color);
-+  background-color: light-dark(rgba(0,0,0,.1), rgba(255,255,255,.1));
-   color: var(--button-text-color);
-   border-radius: 4px;
-   padding-block: 4px;
--- a/src/widget/cocoa/VibrancyManager-mm.patch
+++ b/src/widget/cocoa/VibrancyManager-mm.patch
@@ -1,20 +1,20 @@
 diff --git a/widget/cocoa/VibrancyManager.mm b/widget/cocoa/VibrancyManager.mm
-index 849b62c9976a7bc5fee35e074e54c8f556ed9c38..a9742c7ff30d417a18f41f9c120259192f33a0fd 100644
+index b4c14233c64dd3515518d3167f8ee2877fe41a93..2b91fa3044794765b8e15c6b66b348de4111f29f 100644
 --- a/widget/cocoa/VibrancyManager.mm
 +++ b/widget/cocoa/VibrancyManager.mm
@@ -13,6 +13,7 @@
 
- #include "nsChildView.h"
+ #include "nsCocoaWindow.h"
 #include "mozilla/StaticPrefs_widget.h"
 +#include "mozilla/StaticPrefs_zen.h"
 
 using namespace mozilla;
 
-@@ -40,7 +41,23 @@ static NSVisualEffectMaterial VisualEffectMaterialForVibrancyType(
+@@ -38,7 +39,23 @@ static NSVisualEffectMaterial VisualEffectMaterialForVibrancyType(
+     VibrancyType aType) {
+   switch (aType) {
     case VibrancyType::Sidebar:
-       return NSVisualEffectMaterialSidebar;
-     case VibrancyType::Titlebar:
-      return NSVisualEffectMaterialTitlebar;
+-      return NSVisualEffectMaterialSidebar;
 +      switch (StaticPrefs::zen_widget_macos_window_material()) {
 +        case 1:
 +          return NSVisualEffectMaterialHUDWindow;
@@ -32,10 +32,10 @@ index 849b62c9976a7bc5fee35e074e54c8f556ed9c38..a9742c7ff30d417a18f41f9c12025919
 +        default:
 +          return NSVisualEffectMaterialUnderWindowBackground;
 +      }
+     case VibrancyType::Titlebar:
+       return NSVisualEffectMaterialTitlebar;
   }
- }
- 
-@@ -78,6 +95,7 @@ static NSVisualEffectBlendingMode VisualEffectBlendingModeForVibrancyType(
+@@ -78,6 +95,7 @@ - (NSView*)hitTest:(NSPoint)aPoint {
 
 - (void)prefChanged {
   self.blendingMode = VisualEffectBlendingModeForVibrancyType(mType);
@@ -50,4 +50,4 @@ index 849b62c9976a7bc5fee35e074e54c8f556ed9c38..a9742c7ff30d417a18f41f9c12025919
 +    "zen.widget.macos.window-material"_ns,
 };
 
- VibrancyManager::VibrancyManager(const nsChildView& aCoordinateConverter,
+ VibrancyManager::VibrancyManager(const nsCocoaWindow& aCoordinateConverter,
--- a/src/widget/cocoa/nsCocoaWindow-mm.patch
+++ b/src/widget/cocoa/nsCocoaWindow-mm.patch
@@ -0,0 +1,13 @@
+diff --git a/widget/cocoa/nsCocoaWindow.mm b/widget/cocoa/nsCocoaWindow.mm
+index c4627621344d35081f11a7b0e03d02eca2097609..709a0dbfe46daa4148a423242c63598ba6904fde 100644
+--- a/widget/cocoa/nsCocoaWindow.mm
+++ b/widget/cocoa/nsCocoaWindow.mm
+@@ -7376,7 +7376,7 @@ - (id)initWithContentRect:(NSRect)aContentRect
+ 
+ // Returns an autoreleased NSImage.
+ static NSImage* GetMenuMaskImage() {
+-  const CGFloat radius = 6.0f;
+  const CGFloat radius = 11.0f;
+   const NSSize maskSize = {radius * 3.0f, radius * 3.0f};
+   NSImage* maskImage = [NSImage imageWithSize:maskSize
+                                       flipped:FALSE
--- a/src/zen/common/ZenCommonUtils.mjs
+++ b/src/zen/common/ZenCommonUtils.mjs
@@ -72,7 +72,7 @@ var gZenCommonActions = {
      let transferable = Cc['@mozilla.org/widget/transferable;1'].createInstance(
        Ci.nsITransferable
      );
-      transferable.init(getLoadContext());
+      transferable.init(window.docShell.QueryInterface(Ci.nsILoadContext));
      transferable.addDataFlavor('text/plain');
      transferable.setTransferData('text/plain', str);
      Services.clipboard.setData(transferable, null, Ci.nsIClipboard.kGlobalClipboard);
@@ -110,7 +110,7 @@ var gZenCommonActions = {
      let transferable = Cc['@mozilla.org/widget/transferable;1'].createInstance(
        Ci.nsITransferable
      );
-      transferable.init(getLoadContext());
+      transferable.init(window.docShell.QueryInterface(Ci.nsILoadContext));
      transferable.addDataFlavor('text/plain');
      transferable.setTransferData('text/plain', str);
      Services.clipboard.setData(transferable, null, Ci.nsIClipboard.kGlobalClipboard);
--- a/src/zen/common/ZenCustomizableUI.sys.mjs
+++ b/src/zen/common/ZenCustomizableUI.sys.mjs
@@ -117,7 +117,7 @@ export var ZenCustomizableUI = new (class {
        window.setTimeout(() => {
          button.removeAttribute('open');
        }, 500);
-        window.gZenUIManager.motion.animate(
+        window.gZenUIManager.anime.animate(
          image,
          { transform: ['rotate(45deg)', 'rotate(0deg)'] },
          { duration: 0.2 }
@@ -125,7 +125,7 @@ export var ZenCustomizableUI = new (class {
      };
      popup.addEventListener('popuphidden', handlePopupHidden, { once: true });
      popup.openPopup(button, 'after_start');
-      window.gZenUIManager.motion.animate(
+      window.gZenUIManager.anime.animate(
        image,
        { transform: ['rotate(0deg)', 'rotate(45deg)'] },
        { duration: 0.2 }
--- a/src/zen/common/ZenStartup.mjs
+++ b/src/zen/common/ZenStartup.mjs
@@ -107,7 +107,7 @@
      document.documentElement.removeAttribute('zen-before-loaded');
      if (Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
        let elementsToIgnore = this._watermarkIgnoreElements.map((id) => '#' + id).join(', ');
-        gZenUIManager.motion
+        gZenUIManager.anime
          .animate(
            '#browser > *:not(' + elementsToIgnore + '), #urlbar, #tabbrowser-tabbox > *',
            {
@@ -115,7 +115,6 @@
            },
            {
              delay: 0.6,
-              easing: 'ease-in-out',
            }
          )
          .then(() => {
--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -36,10 +36,51 @@ var gZenUIManager = {

    document.addEventListener('mousedown', this.handleMouseDown.bind(this), true);

-    ChromeUtils.defineLazyGetter(this, 'motion', () => {
-      return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', {
-        global: 'current',
-      });
+    ChromeUtils.defineLazyGetter(this, 'anime', () => {
+      // Polyphill in case we need to change library animations again
+      const module = ChromeUtils.importESModule(
+        'chrome://browser/content/zen-vendor/animejs.min.mjs',
+        {
+          global: 'current',
+        }
+      );
+      return {
+        animate: (element, keyframes, options) => {
+          if (options.duration) {
+            options.duration *= 1000; // convert seconds to milliseconds
+          }
+          if (options.delay) {
+            options.delay *= 1000; // convert seconds to milliseconds
+          }
+          delete options.bounce; // anime.js does not support bounce
+          delete options.type; // anime.js does not support type
+          return module.animate(element, {
+            ...keyframes,
+            ...options,
+          });
+        },
+        waapi: (element, keyframes, options) => {
+          if (options.duration) {
+            options.duration *= 1000; // convert seconds to milliseconds
+          }
+          if (options.delay) {
+            options.delay *= 1000; // convert seconds to milliseconds
+          }
+          return module.waapi.animate(element, {
+            ...keyframes,
+            ...options,
+          });
+        },
+        stagger: (delay, {
+          startDelay = 0,
+        } = {}) => {
+          delay *= 1000; // convert seconds to milliseconds
+          startDelay *= 1000; // convert seconds to milliseconds
+          return module.stagger(delay,{
+            start: startDelay,
+          });
+        },
+      };
    });

    ChromeUtils.defineLazyGetter(this, '_toastContainer', () => {
@@ -479,7 +520,7 @@ var gZenUIManager = {
    this._toastContainer.removeAttribute('hidden');
    this._toastContainer.appendChild(toast);
    const timeoutFunction = () => {
-      this.motion
+      this.anime
        .animate(toast, { opacity: [1, 0], scale: [1, 0.5] }, { duration: 0.2, bounce: 0 })
        .then(() => {
          toast.remove();
@@ -489,7 +530,7 @@ var gZenUIManager = {
        });
    };
    if (reused) {
-      await this.motion.animate(toast, { scale: 0.2 }, { duration: 0.1, bounce: 0 });
+      await this.anime.animate(toast, { scale: 0.2 }, { duration: 0.1, bounce: 0 });
    } else {
      toast.addEventListener('mouseover', () => {
        if (this._toastTimeouts[messageId]) {
@@ -506,7 +547,7 @@ var gZenUIManager = {
    if (!toast.style.hasOwnProperty('transform')) {
      toast.style.transform = 'scale(0)';
    }
-    await this.motion.animate(toast, { scale: 1 }, { type: 'spring', bounce: 0.2, duration: 0.5 });
+    await this.anime.animate(toast, { scale: 1 }, { type: 'spring', bounce: 0.2, duration: 0.5 });
    if (this._toastTimeouts[messageId]) {
      clearTimeout(this._toastTimeouts[messageId]);
    }
@@ -601,7 +642,7 @@ var gZenVerticalTabsManager = {
  },

  animateTab(aTab) {
-    if (!gZenUIManager.motion || !aTab || !gZenUIManager._hasLoadedDOM || !aTab.isConnected) {
+    if (!gZenUIManager.anime || !aTab || !gZenUIManager._hasLoadedDOM || !aTab.isConnected) {
      return;
    }
    // get next visible tab
@@ -613,7 +654,7 @@ var gZenVerticalTabsManager = {
    try {
      const tabSize = aTab.getBoundingClientRect().height;
      const transform = `-${tabSize}px`;
-      gZenUIManager.motion
+      gZenUIManager.anime
        .animate(
          aTab,
          {
@@ -635,7 +676,7 @@ var gZenVerticalTabsManager = {
          aTab.style.removeProperty('transform');
          aTab.style.removeProperty('opacity');
        });
-      gZenUIManager.motion
+      gZenUIManager.anime
        .animate(
          aTab.querySelector('.tab-content'),
          {
@@ -1060,7 +1101,7 @@ var gZenVerticalTabsManager = {
        }

        // Maybe add some confetti here?!?
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          this._tabEdited,
          {
            scale: [1, 0.98, 1],
--- a/src/zen/common/ZenUIMigration.mjs
+++ b/src/zen/common/ZenUIMigration.mjs
@@ -1,22 +1,15 @@
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
-const lazy = {};

-var { AppConstants } = ChromeUtils.importESModule('resource://gre/modules/AppConstants.sys.mjs');
+class nsZenUIMigration {
+  PREF_NAME = 'zen.ui.migration.version';
+  MIGRATION_VERSION = 1;

-ChromeUtils.defineESModuleGetters(lazy, {
-  BrowserWindowTracker: 'resource:///modules/BrowserWindowTracker.sys.mjs',
-});
-
-class ZenUIMigration {
-  PREF_NAME = 'zen.migration.version';
-  MIGRATION_VERSION = 5;
-
-  init(isNewProfile, win) {
+  init(isNewProfile) {
    if (!isNewProfile) {
      try {
-        this._migrate(win);
+        this._migrate();
      } catch (e) {
        console.error('ZenUIMigration: Error during migration', e);
      }
@@ -32,18 +25,11 @@ class ZenUIMigration {
    Services.prefs.setIntPref(this.PREF_NAME, value);
  }

-  _migrate(win) {
-    if (this._migrationVersion < 1) {
-      this._migrateV1(win);
-    }
-    if (this._migrationVersion < 2) {
-      this._migrateV2(win);
-    }
-    if (this._migrationVersion < 3) {
-      this._migrateV3(win);
-    }
-    if (this._migrationVersion < 4) {
-      this._migrateV4(win);
+  _migrate() {
+    for (let i = 0; i <= this.MIGRATION_VERSION; i++) {
+      if (this._migrationVersion < i) {
+        this[`_migrateV${i}`]?.();
+      }
    }
  }

@@ -51,59 +37,21 @@ class ZenUIMigration {
    this._migrationVersion = this.MIGRATION_VERSION;
  }

-  _migrateV1(win) {
-    // Introduction of the new URL bar, show a message to the user
-    const notification = win.gNotificationBox.appendNotification(
-      'zen-new-urlbar-notification',
-      {
-        label: { 'l10n-id': 'zen-new-urlbar-notification' },
-        image: 'chrome://browser/skin/notification-icons/persistent-storage-blocked.svg',
-        priority: win.gNotificationBox.PRIORITY_WARNING_HIGH,
-      },
-      [
-        {
-          'l10n-id': 'zen-disable',
-          accessKey: 'D',
-          callback: () => {
-            Services.prefs.setBoolPref('zen.urlbar.replace-newtab', false);
-          },
-        },
-        {
-          link: 'https://docs.zen-browser.app/user-manual/urlbar/',
-          'l10n-id': 'zen-learn-more-text',
-        },
-      ]
-    );
-  }
-
-  _migrateV2(win) {
-    if (Services.prefs.getBoolPref('zen.widget.windows.acrylic', false)) {
-      Services.prefs.setIntPref('widget.windows.mica.toplevel-backdrop', 2);
-      Services.prefs.clearUserPref('zen.widget.windows.acrylic');
+  _migrateV1() {
+    // If there's an userChrome.css or userContent.css existing, we set
+    // 'toolkit.legacyUserProfileCustomizations.stylesheets' back to true
+    // We do this to avoid existing user stylesheets to be ignored
+    const profileDir = Services.dirsvc.get('ProfD', Ci.nsIFile);
+    const userChromeFile = profileDir.clone();
+    userChromeFile.append('chrome');
+    userChromeFile.append('userChrome.css');
+    const userContentFile = profileDir.clone();
+    userContentFile.append('chrome');
+    userContentFile.append('userContent.css');
+    if (userChromeFile.exists() || userContentFile.exists()) {
+      Services.prefs.setBoolPref('toolkit.legacyUserProfileCustomizations.stylesheets', true);
    }
  }
-
-  _migrateV3(win) {
-    const kArea = win.CustomizableUI.AREA_TABSTRIP;
-    const widgets = win.CustomizableUI.getWidgetsInArea(kArea);
-    for (const widget of widgets) {
-      const widgetId = widget.id;
-      if (widgetId === 'tabbrowser-tabs') {
-        continue;
-      }
-      win.CustomizableUI.removeWidgetFromArea(widgetId);
-    }
-  }
-
-  _migrateV4(win) {
-    if (AppConstants.platform === 'linux') {
-      return;
-    }
-    Services.prefs.setBoolPref(
-      'browser.tabs.unloadOnLowMemory',
-      Services.prefs.getBoolPref('zen.tab-unloader.enabled', true)
-    );
-  }
 }

-export var gZenUIMigration = new ZenUIMigration();
+export var gZenUIMigration = new nsZenUIMigration();
--- a/src/zen/common/styles/zen-browser-container.css
+++ b/src/zen/common/styles/zen-browser-container.css
@@ -17,7 +17,7 @@
      }

      & browser[transparent='true'] {
-        background: rgba(255, 255, 255, 0.1);
+        background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
      }
    }
  }
--- a/src/zen/common/styles/zen-browser-ui.css
+++ b/src/zen/common/styles/zen-browser-ui.css
@@ -47,6 +47,8 @@

  isolation: isolate;

+  background: var(--zen-themed-toolbar-bg-transparent);
+
  &::after,
  &::before {
    content: '';
@@ -100,11 +102,11 @@
  border: none;
 }

-@supports (-moz-osx-font-smoothing: auto) {
+@media (-moz-platform: macos) {
  #zen-main-app-wrapper,
  #zen-appcontent-wrapper,
  #zen-sidebar-splitter {
-    appearance: -moz-window-titlebar !important;
+    appearance: -moz-sidebar !important;
  }
 }

@@ -118,7 +120,7 @@
 }

 #zen-main-app-wrapper {
-  background: var(--zen-themed-toolbar-bg-transparent);
+  background: transparent;
  /* See bug #8814, don't an overflow here as it causes issues 
   * with firefox's rendering of the tab bar */

--- a/src/zen/common/styles/zen-panel-ui.css
+++ b/src/zen/common/styles/zen-panel-ui.css
@@ -4,7 +4,7 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 panel[type='arrow'][animate='open'] {
-  @media (-moz-platform: macos) {
+  @media (-moz-platform: macos) and (-moz-panel-animations) {
    animation: zen-jello-animation-macos 0.4s ease-out;
    &[side='bottom'] {
      /* Animate from the bottom */
@@ -20,7 +20,7 @@ panel[type='arrow'][animate='open'] {
      }
    }
  }
-  @media (-moz-platform: linux) or ((-moz-platform: windows) and (not (-moz-windows-mica-popups))) {
+  @media (-moz-platform: linux) or ((-moz-platform: windows) and (not (-moz-windows-mica-popups))) and (-moz-panel-animations) {
    /* Mica popups have a weird background while the animation is running */
    &::part(content) {
      animation: zen-jello-animation 0.35s ease;
@@ -64,7 +64,7 @@ panel[type='arrow'] {
    --panel-border-radius: 6px;

    &::part(content) {
-      background-color: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
+      background-color: transparent !important;
    }
  }
 }
--- a/src/zen/common/styles/zen-popup.css
+++ b/src/zen/common/styles/zen-popup.css
@@ -394,7 +394,6 @@ menuseparator {
    }

    & button {
-      color-scheme: dark;
      width: min-content;
      padding: 0 10px !important;
      min-width: unset !important;
@@ -402,6 +401,7 @@ menuseparator {
      border-radius: calc(var(--zen-native-inner-radius) + 2px) !important;
      background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)) !important;
      border: 1px solid light-dark(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15)) !important;
+      color: var(--toolbar-color);

      :root[zen-right-side='true'] & {
        order: -1;
--- a/src/zen/common/styles/zen-theme.css
+++ b/src/zen/common/styles/zen-theme.css
@@ -9,12 +9,7 @@
 */

 :host(:is(.anonymous-content-host, notification-message)),
-:root,
-.zenLooksAndFeelColorOption {
-  /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
-   * in the preferences page.
-   */
-
+:root {
  /* Default values */
  --zen-border-radius: 7px;
  --zen-primary-color: #ffb787;
@@ -92,7 +87,7 @@
  --focus-outline-color: var(--button-bgcolor) !important;

  --toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
-  --toolbarbutton-icon-fill: light-dark(rgba(57, 57, 58, 0.6), rgba(251, 251, 254, 0.6)) !important;
+  --toolbarbutton-icon-fill: currentColor !important;

  --button-primary-bgcolor: var(--in-content-primary-button-background) !important;
  --button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
@@ -121,7 +116,10 @@
  --zen-button-border-radius: 5px;
  --zen-button-padding: 0.6rem 1.2rem;

-  --zen-toolbar-element-bg: light-dark(rgba(89, 89, 89, 0.1), rgba(255, 255, 255, 0.1));
+  --zen-toolbar-element-bg: light-dark(
+    color-mix(in srgb, currentColor 5%, transparent 5%),
+    color-mix(in srgb, currentColor 10%, transparent 90%)
+  ) !important;

  /* Toolbar */
  --zen-toolbar-height: 38px;
@@ -162,27 +160,11 @@

  --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), #171717);
  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);

  --zen-workspace-indicator-height: 48px;

-  @media (-moz-windows-mica) or (-moz-platform: macos) {
-    background: transparent;
-    --zen-themed-toolbar-bg-transparent: transparent;
-    @media -moz-pref('widget.windows.mica.toplevel-backdrop', 2) {
-      --zen-themed-toolbar-bg-transparent: color-mix(
-        in srgb,
-        var(--zen-themed-toolbar-bg) 35%,
-        transparent 65%
-      );
-    }
-  }
-
-  @media (-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency') {
-    background: transparent;
-    --zen-themed-toolbar-bg-transparent: transparent;
-  }
+  --toolbar-field-color: var(--toolbox-textcolor) !important;

  &[zen-private-window='true'] {
    --zen-main-browser-background: linear-gradient(
@@ -239,6 +221,53 @@

 #main-window:not([chromehidden~='toolbar']) {
  min-height: 495px !important;
+
+  @media (-moz-windows-mica) or (-moz-platform: macos) {
+    background: transparent;
+    --zen-themed-toolbar-bg-transparent: transparent;
+    &[zen-should-be-dark-mode] {
+      --zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg);
+    }
+  }
+
+  @media (-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency') {
+    background: transparent;
+    --zen-themed-toolbar-bg-transparent: transparent;
+    &[zen-should-be-dark-mode] {
+      --zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg);
+    }
+  }
+
+  &[zen-should-be-dark-mode='true'] #browser {
+    color-scheme: dark;
+    --tab-selected-color-scheme: dark;
+  }
+
+  &[zen-should-be-dark-mode='false'] #browser {
+    color-scheme: light;
+    --tab-selected-color-scheme: light;
+  }
+
+  &,
+  & #tabbrowser-tabpanels,
+  & panel,
+  & menupopup,
+  & #zen-browser-background {
+    @media -moz-pref('zen.theme.window.scheme', 'dark') {
+      color-scheme: dark;
+    }
+
+    @media -moz-pref('zen.theme.window.scheme', 'light') {
+      color-scheme: light;
+    }
+
+    @media -moz-pref('zen.theme.window.scheme', 'auto') {
+      color-scheme: light;
+      @media (-moz-system-dark-theme) {
+        color-scheme: dark;
+      }
+    }
+  }
 }

@media (prefers-color-scheme: dark) {
--- a/src/zen/common/styles/zen-urlbar.css
+++ b/src/zen/common/styles/zen-urlbar.css
@@ -481,11 +481,14 @@ button.popup-notification-dropmarker {
  left: 50% !important;

  #urlbar-container:has(&) {
-    border-radius: 10px;
+    border-radius: var(--border-radius-medium);
    background: var(--toolbarbutton-hover-background);
+    height: var(--urlbar-height) !important;
+    margin-inline: 0.15rem !important;
    :root:not([zen-single-toolbar='true']) & {
      max-height: 32px !important;
-      min-height: unset;
+      min-height: unset !important;
+      margin-block: -1px !important;
    }
  }
 }
--- a/src/zen/compact-mode/ZenCompactMode.mjs
+++ b/src/zen/compact-mode/ZenCompactMode.mjs
@@ -155,13 +155,13 @@ var gZenCompactModeManager = {
  },

  updateCompactModeContext(isSingleToolbar) {
-    const IDs = [
-      'zen-context-menu-compact-mode-hide-sidebar',
-      'zen-context-menu-compact-mode-hide-toolbar',
-      'zen-context-menu-compact-mode-hide-both',
-    ];
-    for (let id of IDs) {
-      document.getElementById(id).disabled = isSingleToolbar;
+    const menuitem = document.getElementById('zen-context-menu-compact-mode-toggle');
+    const menu = document.getElementById('zen-context-menu-compact-mode');
+    menu.setAttribute('hidden', isSingleToolbar);
+    if (isSingleToolbar) {
+      menu.before(menuitem);
+    } else {
+      menu.querySelector('menupopup').prepend(menuitem);
    }
  },

@@ -279,7 +279,7 @@ var gZenCompactModeManager = {

          // TODO: Work on this a bit more, needs polishing
          if (lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && false) {
-            gZenUIManager.motion
+            gZenUIManager.anime
              .animate(
                [
                  this.sidebar,
@@ -299,7 +299,7 @@ var gZenCompactModeManager = {
                  ],
                },
                {
-                  ease: 'easeIn',
+                  ease: 'in',
                  type: 'spring',
                  bounce: 0,
                  duration: 0.2,
@@ -324,18 +324,16 @@ var gZenCompactModeManager = {
          } else {
            sidebarWidth -= elementSeparation;
          }
-          gZenUIManager.motion
-            .animate(
+          gZenUIManager.anime
+            .waapi(
              this.sidebar,
              {
                marginRight: this.sidebarIsOnRight ? `-${sidebarWidth}px` : 0,
                marginLeft: this.sidebarIsOnRight ? 0 : `-${sidebarWidth}px`,
              },
              {
-                ease: 'easeIn',
-                type: 'spring',
-                bounce: 0,
-                duration: 0.2,
+                ease: 'out',
+                duration: 0.1,
              }
            )
            .then(() => {
@@ -373,8 +371,8 @@ var gZenCompactModeManager = {
          } else {
            this.sidebar.style.marginLeft = `-${sidebarWidth}px`;
          }
-          gZenUIManager.motion
-            .animate(
+          gZenUIManager.anime
+            .waapi(
              this.sidebar,
              this.sidebarIsOnRight
                ? {
@@ -383,10 +381,8 @@ var gZenCompactModeManager = {
                  }
                : { marginLeft: 0 },
              {
-                ease: 'easeOut',
-                type: 'spring',
-                bounce: 0,
-                duration: 0.2,
+                ease: 'in',
+                duration: 0.1,
              }
            )
            .then(() => {
--- a/src/zen/compact-mode/zen-compact-mode.css
+++ b/src/zen/compact-mode/zen-compact-mode.css
@@ -185,7 +185,15 @@
      #navigator-toolbox:has(.tabbrowser-tab:active),
      &[zen-renaming-tab='true'] #navigator-toolbox,
      #navigator-toolbox:has(
-          *:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)
+          *:is(
+            [panelopen='true'], 
+            [open='true'], 
+            #urlbar:focus-within, 
+            [breakout-extend='true']
+          )
+          :not(#urlbar[zen-floating-urlbar='true'])
+          :not(tab)
+          :not(.zen-compact-mode-ignore)
        ) {
        &:not([animate='true']) {
          --zen-compact-mode-func: linear(
@@ -328,8 +336,7 @@
      }

      & #titlebar,
-      & #zen-appcontent-wrapper,
-      & #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
+      & #zen-appcontent-wrapper {
        margin-top: var(--zen-element-separation) !important;
      }

@@ -337,10 +344,6 @@
        z-index: 3 !important;
      }

-      & #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
-        margin-top: calc(var(--zen-element-separation) * 2) !important;
-      }
-
      & #zen-appcontent-navbar-wrapper {
        --zen-compact-toolbar-offset: 5px;
        position: absolute;
--- a/src/zen/downloads/ZenDownloadAnimation.mjs
+++ b/src/zen/downloads/ZenDownloadAnimation.mjs
@@ -13,7 +13,7 @@
    },
  });

-  class ZenDownloadAnimation extends ZenDOMOperatedFeature {
+  class nsZenDownloadAnimation extends ZenDOMOperatedFeature {
    async init() {
      await this.#setupDownloadListeners();
    }
@@ -26,7 +26,7 @@
        });
      } catch (error) {
        console.error(
-          `[${ZenDownloadAnimation.name}] Failed to set up download animation listeners: ${error}`
+          `[${nsZenDownloadAnimation.name}] Failed to set up download animation listeners: ${error}`
        );
      }
    }
@@ -41,7 +41,7 @@

      if (!gZenUIManager._lastClickPosition) {
        console.warn(
-          `[${ZenDownloadAnimation.name}] No recent click position available for animation`
+          `[${nsZenDownloadAnimation.name}] No recent click position available for animation`
        );
        return;
      }
@@ -61,7 +61,7 @@
    }
  }

-  class ZenDownloadAnimationElement extends HTMLElement {
+  class nsZenDownloadAnimationElement extends HTMLElement {
    #boxAnimationElement = null;
    #boxAnimationTimeoutId = null;
    #isBoxAnimationRunning = false;
@@ -82,14 +82,14 @@
        );
        this.shadowRoot.appendChild(link);
      } catch (error) {
-        console.error(`[${ZenDownloadAnimationElement.name}] Error loading arc styles: ${error}`);
+        console.error(`[${nsZenDownloadAnimationElement.name}] Error loading arc styles: ${error}`);
      }
    }

    async initializeAnimation(startPosition) {
      if (!startPosition) {
        console.warn(
-          `[${ZenDownloadAnimationElement.name}] No start position provided, skipping animation`
+          `[${nsZenDownloadAnimationElement.name}] No start position provided, skipping animation`
        );
        return;
      }
@@ -221,7 +221,7 @@
          this.#startBoxAnimation(areTabsPositionedRight);
        }

-        await gZenUIManager.motion.animate(arcAnimationElement, sequence, {
+        await gZenUIManager.anime.animate(arcAnimationElement, sequence, {
          duration: Services.prefs.getIntPref('zen.downloads.download-animation-duration') / 1000,
          easing: 'cubic-bezier(0.37, 0, 0.63, 1)',
          fill: 'forwards',
@@ -229,7 +229,7 @@

        this.#cleanArcAnimation(arcAnimationElement);
      } catch (error) {
-        console.error('[ZenDownloadAnimationElement] Error in animation sequence:', error);
+        console.error('[nsZenDownloadAnimationElement] Error in animation sequence:', error);
        this.#cleanArcAnimation(arcAnimationElement);
      }
    }
@@ -309,7 +309,7 @@
      // If animation is already in progress, don't start a new one
      if (this.#isBoxAnimationRunning) {
        console.warn(
-          `[${ZenDownloadAnimationElement.name}] Box animation already running, skipping new request.`
+          `[${nsZenDownloadAnimationElement.name}] Box animation already running, skipping new request.`
        );
        return;
      }
@@ -326,7 +326,7 @@
      const wrapper = document.getElementById('zen-main-app-wrapper');
      if (!wrapper) {
        console.warn(
-          `[${ZenDownloadAnimationElement.name}] Cannot start box animation, Wrapper element not found`
+          `[${nsZenDownloadAnimationElement.name}] Cannot start box animation, Wrapper element not found`
        );
        return;
      }
@@ -353,7 +353,7 @@

        wrapper.appendChild(this.#boxAnimationElement);

-        await gZenUIManager.motion.animate(
+        await gZenUIManager.anime.animate(
          this.#boxAnimationElement,
          {
            [sideProp]: '34px',
@@ -366,7 +366,7 @@
          }
        ).finished;

-        await gZenUIManager.motion.animate(
+        await gZenUIManager.anime.animate(
          this.#boxAnimationElement,
          {
            [sideProp]: '24px',
@@ -385,7 +385,7 @@
        );
      } catch (error) {
        console.error(
-          `[${ZenDownloadAnimationElement.name}] Error during box entry animation: ${error}`
+          `[${nsZenDownloadAnimationElement.name}] Error during box entry animation: ${error}`
        );
        this.#cleanBoxAnimation();
      } finally {
@@ -411,7 +411,7 @@
      try {
        const sideProp = areTabsPositionedRight ? 'right' : 'left';

-        await gZenUIManager.motion.animate(
+        await gZenUIManager.anime.animate(
          this.#boxAnimationElement,
          {
            transform: 'scale(0.9)',
@@ -422,7 +422,7 @@
          }
        ).finished;

-        await gZenUIManager.motion.animate(
+        await gZenUIManager.anime.animate(
          this.#boxAnimationElement,
          {
            [sideProp]: '-50px',
@@ -436,7 +436,7 @@
        ).finished;
      } catch (error) {
        console.warn(
-          `[${ZenDownloadAnimationElement.name}] Error during box exit animation: ${error}`
+          `[${nsZenDownloadAnimationElement.name}] Error during box exit animation: ${error}`
        );
      } finally {
        this.#cleanBoxAnimation();
@@ -458,7 +458,7 @@
          this.#boxAnimationElement.remove();
        } catch (error) {
          console.error(
-            `[${ZenDownloadAnimationElement.name}] Error removing box animation element: ${error}`,
+            `[${nsZenDownloadAnimationElement.name}] Error removing box animation element: ${error}`,
            error
          );
        }
@@ -488,7 +488,7 @@
    }
  }

-  customElements.define('zen-download-animation', ZenDownloadAnimationElement);
+  customElements.define('zen-download-animation', nsZenDownloadAnimationElement);

-  new ZenDownloadAnimation();
+  new nsZenDownloadAnimation();
 }
--- a/src/zen/folders/ZenFolders.mjs
+++ b/src/zen/folders/ZenFolders.mjs
@@ -17,7 +17,7 @@
    }

    #onTabGrouped(event) {
-      const tab = event.target;
+      const tab = event.detail;
      const group = tab.group;
      group.pinned = tab.pinned;

@@ -30,8 +30,8 @@
    }

    #onTabUngrouped(event) {
-      const tab = event.target;
-      const group = event.detail;
+      const tab = event.detail;
+      const group = event.target;
      if (group.hasAttribute('split-view-group') && tab.hasAttribute('had-zen-pinned-changed')) {
        tab.setAttribute('zen-pinned-changed', true);
        tab.removeAttribute('had-zen-pinned-changed');
--- a/src/zen/glance/ZenGlanceManager.mjs
+++ b/src/zen/glance/ZenGlanceManager.mjs
@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 {
-  class ZenGlanceManager extends ZenDOMOperatedFeature {
+  class nsZenGlanceManager extends ZenDOMOperatedFeature {
    _animating = false;
    _lazyPref = {};

@@ -131,10 +131,10 @@

        const startX = isRightSide ? -50 : 50;

-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          this.sidebarButtons.querySelectorAll('toolbarbutton'),
          { x: [startX, 0], opacity: [0, 1] },
-          { delay: gZenUIManager.motion.stagger(0.1) }
+          { delay: gZenUIManager.anime.stagger(0.1) }
        );
      }
      this.sidebarButtons.removeAttribute('hidden');
@@ -180,7 +180,7 @@
          this.quickOpenGlance({ dontOpenButtons: true });
          this.showSidebarButtons(true);

-          gZenUIManager.motion.animate(
+          gZenUIManager.anime.animate(
            this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
            {
              scale: [1, 0.98],
@@ -211,7 +211,7 @@
          };
          this.browserWrapper.style.transform = 'translate(-50%, -50%)';
          this.overlay.style.overflow = 'visible';
-          gZenUIManager.motion
+          gZenUIManager.anime
            .animate(
              this.browserWrapper,
              {
@@ -311,7 +311,7 @@
      this.overlay.style.pointerEvents = 'none';
      this.quickCloseGlance({ justAnimateParent: true, clearID: false });
      const originalPosition = this.#glances.get(this.#currentGlanceID).originalPosition;
-      gZenUIManager.motion
+      gZenUIManager.anime
        .animate(
          this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
          {
@@ -332,7 +332,7 @@
        });
      this.browserWrapper.style.opacity = 1;
      return new Promise((resolve) => {
-        gZenUIManager.motion
+        gZenUIManager.anime
          .animate(
            this.browserWrapper,
            {
@@ -653,7 +653,7 @@
        this.finishOpeningGlance();
        return;
      }
-      await gZenUIManager.motion.animate(
+      await gZenUIManager.anime.animate(
        this.browserWrapper,
        {
          width: ['85%', '100%'],
@@ -783,7 +783,7 @@
    }
  }

-  window.gZenGlanceManager = new ZenGlanceManager();
+  window.gZenGlanceManager = new nsZenGlanceManager();

  function registerWindowActors() {
    gZenActorsManager.addJSWindowActor('ZenGlance', {
--- a/src/zen/images/gradient.png
+++ b/src/zen/images/gradient.png
--- a/src/zen/kbs/ZenKeyboardShortcuts.mjs
+++ b/src/zen/kbs/ZenKeyboardShortcuts.mjs
@@ -138,7 +138,7 @@ const VALID_SHORTCUT_GROUPS = [
  'other',
 ];

-class KeyShortcutModifiers {
+class nsKeyShortcutModifiers {
  #control = false;
  #alt = false;
  #shift = false;
@@ -161,10 +161,10 @@ class KeyShortcutModifiers {

  static parseFromJSON(modifiers) {
    if (!modifiers) {
-      return new KeyShortcutModifiers(false, false, false, false, false);
+      return new nsKeyShortcutModifiers(false, false, false, false, false);
    }

-    return new KeyShortcutModifiers(
+    return new nsKeyShortcutModifiers(
      modifiers['control'] == true,
      modifiers['alt'] == true,
      modifiers['shift'] == true,
@@ -175,10 +175,10 @@ class KeyShortcutModifiers {

  static parseFromXHTMLAttribute(modifiers) {
    if (!modifiers) {
-      return new KeyShortcutModifiers(false, false, false, false, false);
+      return new nsKeyShortcutModifiers(false, false, false, false, false);
    }

-    return new KeyShortcutModifiers(
+    return new nsKeyShortcutModifiers(
      modifiers.includes('control'),
      modifiers.includes('alt'),
      modifiers.includes('shift'),
@@ -189,7 +189,7 @@ class KeyShortcutModifiers {

  // used to avoid any future changes to the object
  static fromObject({ ctrl = false, alt = false, shift = false, meta = false, accel = false }) {
-    return new KeyShortcutModifiers(ctrl, alt, shift, meta, accel);
+    return new nsKeyShortcutModifiers(ctrl, alt, shift, meta, accel);
  }

  toUserString() {
@@ -290,7 +290,7 @@ class KeyShortcut {
  #key = '';
  #keycode = '';
  #group = FIREFOX_SHORTCUTS_GROUP;
-  #modifiers = new KeyShortcutModifiers(false, false, false, false, false);
+  #modifiers = new nsKeyShortcutModifiers(false, false, false, false, false);
  #action = '';
  #l10nId = '';
  #disabled = false;
@@ -357,7 +357,7 @@ class KeyShortcut {
      json['key'],
      json['keycode'],
      json['group'],
-      KeyShortcutModifiers.parseFromJSON(json['modifiers']),
+      nsKeyShortcutModifiers.parseFromJSON(json['modifiers']),
      json['action'],
      json['l10nId'],
      json['disabled'],
@@ -376,7 +376,7 @@ class KeyShortcut {
          KeyShortcut.sanitizeL10nId(key.getAttribute('data-l10n-id')),
          key.getAttribute('id')
        ),
-      KeyShortcutModifiers.parseFromXHTMLAttribute(key.getAttribute('modifiers')),
+      nsKeyShortcutModifiers.parseFromXHTMLAttribute(key.getAttribute('modifiers')),
      key.getAttribute('command'),
      key.getAttribute('data-l10n-id'),
      key.getAttribute('disabled') == 'true',
@@ -504,8 +504,8 @@ class KeyShortcut {
  }

  setModifiers(modifiers) {
-    if ((!modifiers) instanceof KeyShortcutModifiers) {
-      throw new Error('Only KeyShortcutModifiers allowed');
+    if ((!modifiers) instanceof nsKeyShortcutModifiers) {
+      throw new Error('Only nsKeyShortcutModifiers allowed');
    }
    this.#modifiers = modifiers;
  }
@@ -554,7 +554,7 @@ class KeyShortcut {
  clearKeybind() {
    this.#key = '';
    this.#keycode = '';
-    this.#modifiers = new KeyShortcutModifiers(false, false, false, false);
+    this.#modifiers = new nsKeyShortcutModifiers(false, false, false, false);
  }

  setNewBinding(shortcut) {
@@ -571,7 +571,7 @@ class KeyShortcut {
  }
 }

-class ZenKeyboardShortcutsLoader {
+class nsZenKeyboardShortcutsLoader {
  constructor() {}

  get shortcutsFile() {
@@ -623,7 +623,7 @@ class ZenKeyboardShortcutsLoader {
        'C',
        '',
        ZEN_COMPACT_MODE_SHORTCUTS_GROUP,
-        KeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
        'cmd_zenCompactModeToggle',
        'zen-compact-mode-shortcut-toggle'
      )
@@ -634,7 +634,7 @@ class ZenKeyboardShortcutsLoader {
        'S',
        '',
        ZEN_COMPACT_MODE_SHORTCUTS_GROUP,
-        KeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
        'cmd_zenCompactModeShowSidebar',
        'zen-compact-mode-shortcut-show-sidebar'
      )
@@ -645,7 +645,7 @@ class ZenKeyboardShortcutsLoader {
        'T',
        '',
        ZEN_COMPACT_MODE_SHORTCUTS_GROUP,
-        KeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
        'cmd_zenCompactModeShowToolbar',
        'zen-compact-mode-shortcut-show-toolbar'
      )
@@ -659,7 +659,7 @@ class ZenKeyboardShortcutsLoader {
          '',
          '',
          ZEN_WORKSPACE_SHORTCUTS_GROUP,
-          KeyShortcutModifiers.fromObject({}),
+          nsKeyShortcutModifiers.fromObject({}),
          `cmd_zenWorkspaceSwitch${i}`,
          `zen-workspace-shortcut-switch-${i}`
        )
@@ -671,7 +671,7 @@ class ZenKeyboardShortcutsLoader {
        'E',
        '',
        ZEN_WORKSPACE_SHORTCUTS_GROUP,
-        KeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
        'cmd_zenWorkspaceForward',
        'zen-workspace-shortcut-forward'
      )
@@ -682,7 +682,7 @@ class ZenKeyboardShortcutsLoader {
        'Q',
        '',
        ZEN_WORKSPACE_SHORTCUTS_GROUP,
-        KeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
        'cmd_zenWorkspaceBackward',
        'zen-workspace-shortcut-backward'
      )
@@ -695,7 +695,7 @@ class ZenKeyboardShortcutsLoader {
        'G',
        '',
        ZEN_SPLIT_VIEW_SHORTCUTS_GROUP,
-        KeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
        'cmd_zenSplitViewGrid',
        'zen-split-view-shortcut-grid'
      )
@@ -706,7 +706,7 @@ class ZenKeyboardShortcutsLoader {
        'V',
        '',
        ZEN_SPLIT_VIEW_SHORTCUTS_GROUP,
-        KeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
        'cmd_zenSplitViewVertical',
        'zen-split-view-shortcut-vertical'
      )
@@ -717,7 +717,7 @@ class ZenKeyboardShortcutsLoader {
        'H',
        '',
        ZEN_SPLIT_VIEW_SHORTCUTS_GROUP,
-        KeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
        'cmd_zenSplitViewHorizontal',
        'zen-split-view-shortcut-horizontal'
      )
@@ -728,7 +728,7 @@ class ZenKeyboardShortcutsLoader {
        'U',
        '',
        ZEN_SPLIT_VIEW_SHORTCUTS_GROUP,
-        KeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
        'cmd_zenSplitViewUnsplit',
        'zen-split-view-shortcut-unsplit'
      )
@@ -763,7 +763,7 @@ class ZenKeyboardShortcutsLoader {
  }
 }

-class ZenKeyboardShortcutsVersioner {
+class nsZenKeyboardShortcutsVersioner {
  static LATEST_KBS_VERSION = 9;

  constructor() {}
@@ -783,11 +783,11 @@ class ZenKeyboardShortcutsVersioner {
  }

  isVersionUpToDate() {
-    return this.version == ZenKeyboardShortcutsVersioner.LATEST_KBS_VERSION;
+    return this.version == nsZenKeyboardShortcutsVersioner.LATEST_KBS_VERSION;
  }

  isVersionOutdated() {
-    return this.version < ZenKeyboardShortcutsVersioner.LATEST_KBS_VERSION;
+    return this.version < nsZenKeyboardShortcutsVersioner.LATEST_KBS_VERSION;
  }

  migrateIfNeeded(data) {
@@ -806,10 +806,10 @@ class ZenKeyboardShortcutsVersioner {
        'Zen CKS: Migrating shortcuts from version',
        version,
        'to',
-        ZenKeyboardShortcutsVersioner.LATEST_KBS_VERSION
+        nsZenKeyboardShortcutsVersioner.LATEST_KBS_VERSION
      );
      const newData = this.migrate(data, version);
-      this.version = ZenKeyboardShortcutsVersioner.LATEST_KBS_VERSION;
+      this.version = nsZenKeyboardShortcutsVersioner.LATEST_KBS_VERSION;
      return newData;
    }

@@ -819,7 +819,7 @@ class ZenKeyboardShortcutsVersioner {
  }

  fillDefaultIfNotPresent(data) {
-    for (let shortcut of ZenKeyboardShortcutsLoader.zenGetDefaultShortcuts()) {
+    for (let shortcut of nsZenKeyboardShortcutsLoader.zenGetDefaultShortcuts()) {
      // If it has an ID and we dont find it in the data, we add it
      if (shortcut.getID() && !data.find((s) => s.getID() == shortcut.getID())) {
        data.push(shortcut);
@@ -837,7 +837,7 @@ class ZenKeyboardShortcutsVersioner {
      // Migrate from 0 to 1
      // Here, we do a complet reset of the shortcuts,
      // since nothing seems to work properly.
-      data = ZenKeyboardShortcutsLoader.zenGetDefaultShortcuts();
+      data = nsZenKeyboardShortcutsLoader.zenGetDefaultShortcuts();
    }
    if (version < 2) {
      // Migrate from 1 to 2
@@ -855,7 +855,7 @@ class ZenKeyboardShortcutsVersioner {
          '',
          '',
          ZEN_OTHER_SHORTCUTS_GROUP,
-          KeyShortcutModifiers.fromObject({}),
+          nsKeyShortcutModifiers.fromObject({}),
          'cmd_zenPinnedTabReset',
          'zen-pinned-tab-shortcut-reset'
        )
@@ -867,7 +867,7 @@ class ZenKeyboardShortcutsVersioner {
      //  detection for internal keys was not working properly, so every internal
      //  shortcut was being saved as a user-editable shortcut.
      // This migration will fix this issue.
-      const defaultShortcuts = ZenKeyboardShortcutsLoader.zenGetDefaultShortcuts();
+      const defaultShortcuts = nsZenKeyboardShortcutsLoader.zenGetDefaultShortcuts();
      // Get the default shortcut, compare the id and set the internal flag if needed
      for (let shortcut of data) {
        for (let defaultShortcut of defaultShortcuts) {
@@ -892,7 +892,7 @@ class ZenKeyboardShortcutsVersioner {
          'B',
          '',
          ZEN_OTHER_SHORTCUTS_GROUP,
-          KeyShortcutModifiers.fromObject({ alt: true }),
+          nsKeyShortcutModifiers.fromObject({ alt: true }),
          'cmd_zenToggleSidebar',
          'zen-sidebar-shortcut-toggle'
        )
@@ -907,7 +907,7 @@ class ZenKeyboardShortcutsVersioner {
          'C',
          '',
          ZEN_OTHER_SHORTCUTS_GROUP,
-          KeyShortcutModifiers.fromObject({ accel: true, shift: true }),
+          nsKeyShortcutModifiers.fromObject({ accel: true, shift: true }),
          'cmd_zenCopyCurrentURL',
          'zen-text-action-copy-url-shortcut'
        )
@@ -919,7 +919,7 @@ class ZenKeyboardShortcutsVersioner {
      const listener = (event) => {
        event.stopPropagation();

-        const devToolsShortcuts = ZenKeyboardShortcutsLoader.zenGetDefaultDevToolsShortcuts();
+        const devToolsShortcuts = nsZenKeyboardShortcutsLoader.zenGetDefaultDevToolsShortcuts();
        gZenKeyboardShortcutsManager.updatedDefaultDevtoolsShortcuts(devToolsShortcuts);

        window.removeEventListener('zen-devtools-keyset-added', listener);
@@ -939,7 +939,7 @@ class ZenKeyboardShortcutsVersioner {
          'C',
          '',
          ZEN_OTHER_SHORTCUTS_GROUP,
-          KeyShortcutModifiers.fromObject({ accel: true, shift: true, alt: true }),
+          nsKeyShortcutModifiers.fromObject({ accel: true, shift: true, alt: true }),
          'cmd_zenCopyCurrentURLMarkdown',
          'zen-text-action-copy-url-markdown-shortcut'
        )
@@ -989,7 +989,7 @@ class ZenKeyboardShortcutsVersioner {
 }

 var gZenKeyboardShortcutsManager = {
-  loader: new ZenKeyboardShortcutsLoader(),
+  loader: new nsZenKeyboardShortcutsLoader(),
  _hasToLoadDevtools: false,
  _inlineCommands: [],

@@ -1051,7 +1051,7 @@ var gZenKeyboardShortcutsManager = {
    };

    const loadedShortcuts = await innerLoad();
-    this.versioner = new ZenKeyboardShortcutsVersioner(loadedShortcuts);
+    this.versioner = new nsZenKeyboardShortcutsVersioner(loadedShortcuts);
    return loadedShortcuts;
  },

@@ -1160,7 +1160,7 @@ var gZenKeyboardShortcutsManager = {
      if (key.getGroup() != 'devTools') {
        continue;
      }
-      if (ZenKeyboardShortcutsLoader.IGNORED_DEVTOOLS_SHORTCUTS.includes(key.getID())) {
+      if (nsZenKeyboardShortcutsLoader.IGNORED_DEVTOOLS_SHORTCUTS.includes(key.getID())) {
        continue;
      }
      const originalKey = browser.document.getElementById(key.getID());
--- a/src/zen/media/ZenMediaController.mjs
+++ b/src/zen/media/ZenMediaController.mjs
@@ -10,7 +10,7 @@
    true
  );

-  class ZenMediaController {
+  class nsZenMediaController {
    _currentMediaController = null;
    _currentBrowser = null;
    _mediaUpdateInterval = null;
@@ -219,7 +219,7 @@
    hideMediaControls() {
      if (this.mediaControlBar.hasAttribute('hidden')) return;

-      return gZenUIManager.motion
+      return gZenUIManager.anime
        .animate(
          this.mediaControlBar,
          {
@@ -259,7 +259,7 @@
          this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
        this.mediaControlBar.style.opacity = 0;
        gZenUIManager.updateTabsToolbar();
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          this.mediaControlBar,
          {
            opacity: [0, 1],
@@ -684,5 +684,5 @@
    }
  }

-  window.gZenMediaController = new ZenMediaController();
+  window.gZenMediaController = new nsZenMediaController();
 }
--- a/src/zen/mods/ZenMods.mjs
+++ b/src/zen/mods/ZenMods.mjs
@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.

 {
-  class ZenMods extends ZenPreloadedFeature {
+  class nsZenMods extends ZenPreloadedFeature {
    // private properties start
    #kZenStylesheetModHeader = '/* Zen Mods - Generated by ZenMods.';
    #kZenStylesheetModHeaderBody = `* DO NOT EDIT THIS FILE DIRECTLY!
@@ -25,24 +25,13 @@
    }

    // Stylesheet service
-    #sss = null;
+    #_modsBackend = null;

-    get #stylesheetService() {
-      if (!this.#sss) {
-        this.#sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(
-          Ci.nsIStyleSheetService
-        );
+    get #modsBackend() {
+      if (!this.#_modsBackend) {
+        this.#_modsBackend = Cc['@mozilla.org/zen/mods-backend;1'].getService(Ci.nsIZenModsBackend);
      }
-      return this.#sss;
-    }
-
-    #ssu = null;
-
-    get #styleSheetUri() {
-      if (!this.#ssu) {
-        this.#ssu = Services.io.newFileURI(new FileUtils.File(this.#styleSheetPath));
-      }
-      return this.#ssu;
+      return this.#_modsBackend;
    }

    get #styleSheetPath() {
@@ -50,15 +39,7 @@
    }

    async #handleDisableMods() {
-      if (Services.prefs.getBoolPref('zen.themes.disable-all', false)) {
-        console.log('[ZenMods]: Disabling mods module.');
-
-        await this.#removeStylesheet();
-      } else {
-        console.log('[ZenMods]: Enabling mods module.');
-
-        await this.#rebuildModsStylesheet();
-      }
+      await this.#rebuildModsStylesheet();
    }

    #getStylesheetURIForMod(mod) {
@@ -68,60 +49,35 @@
    }

    async #insertStylesheet() {
-      if (await IOUtils.exists(this.#styleSheetPath)) {
-        await this.#stylesheetService.loadAndRegisterSheet(
-          this.#styleSheetUri,
-          this.#stylesheetService.AGENT_SHEET
-        );
-      }
-
-      if (
-        !this.#stylesheetService.sheetRegistered(
-          this.#styleSheetUri,
-          this.#stylesheetService.AGENT_SHEET
-        )
-      ) {
-        console.error(`[ZenMods]: Failed to register stylesheet at ${this.#styleSheetUri.spec}.`);
-      }
-    }
-
-    async #removeStylesheet() {
-      await this.#stylesheetService.unregisterSheet(
-        this.#styleSheetUri,
-        this.#stylesheetService.AGENT_SHEET
-      );
-      const rv = this.#stylesheetService.sheetRegistered(
-        this.#styleSheetUri,
-        this.#stylesheetService.AGENT_SHEET
-      );
-      await IOUtils.remove(this.#styleSheetPath, { ignoreAbsent: true });
-
-      if (rv || (await IOUtils.exists(this.#styleSheetPath))) {
-        console.error(`[ZenMods]: Failed to unregister stylesheet at ${this.#styleSheetUri.spec}.`);
+      try {
+        this.#modsBackend.rebuildModsStyles();
+      } catch (e) {
+        console.warn('[ZenMods]: Error rebuilding mods styles:', e);
      }
    }

    async #rebuildModsStylesheet() {
-      await this.#removeStylesheet();
+      const shouldBeEnabled = !Services.prefs.getBoolPref('zen.themes.disable-all', false);
+      if (shouldBeEnabled) {
+        const mods = await this.#getEnabledMods();

-      const mods = await this.#getEnabledMods();
+        await this.#writeStylesheet(mods);

-      await this.#writeStylesheet(mods);
+        const modsWithPreferences = await Promise.all(
+          mods.map(async (mod) => {
+            const preferences = await this.getModPreferences(mod);

-      const modsWithPreferences = await Promise.all(
-        mods.map(async (mod) => {
-          const preferences = await this.getModPreferences(mod);
+            return {
+              name: mod.name,
+              enabled: mod.enabled,
+              preferences,
+            };
+          })
+        );

-          return {
-            name: mod.name,
-            enabled: mod.enabled,
-            preferences,
-          };
-        })
-      );
-
-      this.#setDefaults(modsWithPreferences);
-      this.#writeToDom(modsWithPreferences);
+        this.#setDefaults(modsWithPreferences);
+        this.#writeToDom(modsWithPreferences);
+      }

      await this.#insertStylesheet();
    }
@@ -336,20 +292,8 @@

          const data = await response.text();

-          let content = data;
-
-          if (isStyleSheet) {
-            content = '@-moz-document url-prefix("chrome:") {\n';
-
-            for (const line of data.split('\n')) {
-              content += `  ${line}\n`;
-            }
-
-            content += '}';
-          }
-
          // convert the data into a Uint8Array
-          const buffer = new TextEncoder().encode(content);
+          const buffer = new TextEncoder().encode(data);
          await IOUtils.write(path, buffer);

          return; // to exit the loop
@@ -715,7 +659,7 @@
    // public properties end
  }

-  window.gZenMods = new ZenMods();
+  window.gZenMods = new nsZenMods();

  gZenActorsManager.addJSWindowActor('ZenModsMarketplace', {
    parent: {
--- a/src/zen/mods/ZenStyleSheetCache.cpp
+++ b/src/zen/mods/ZenStyleSheetCache.cpp
@@ -0,0 +1,70 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "ZenStyleSheetCache.h"
+#include "nsAppDirectoryServiceDefs.h"
+
+#include "nsCOMPtr.h"
+#include "nsIFile.h"
+
+#include "mozilla/css/SheetParsingMode.h"
+#include "mozilla/GlobalStyleSheetCache.h"
+
+namespace zen {
+
+using namespace mozilla;
+NS_IMPL_ISUPPORTS(ZenStyleSheetCache, nsISupports)
+
+auto ZenStyleSheetCache::InvalidateModsSheet() -> void {
+  mModsSheet = nullptr;
+}
+
+auto ZenStyleSheetCache::GetModsSheet() -> StyleSheet* {
+  if (mModsSheet) {
+    // If the mods stylesheet is already loaded, return it.
+    return mModsSheet;
+  }
+  nsCOMPtr<nsIFile> chromeFile;
+
+  NS_GetSpecialDirectory(NS_APP_USER_CHROME_DIR, getter_AddRefs(chromeFile));
+  if (!chromeFile) {
+    // if we don't have a profile yet, that's OK!
+    return nullptr;
+  }
+
+  chromeFile->Append(ZEN_MODS_FILENAME);
+  LoadSheetFile(chromeFile, css::eUserSheetFeatures);
+  return mModsSheet;
+}
+
+auto ZenStyleSheetCache::LoadSheetFile(nsIFile* aFile,
+                                        css::SheetParsingMode aParsingMode)
+    -> void {
+  nsCOMPtr<nsIURI> uri;
+  NS_NewFileURI(getter_AddRefs(uri), aFile);
+  if (!uri) {
+    return;
+  }
+
+  auto loader = new mozilla::css::Loader;
+  auto result = loader->LoadSheetSync(uri, aParsingMode,
+                                          css::Loader::UseSystemPrincipal::Yes);
+  if (MOZ_UNLIKELY(result.isErr())) {
+    return;
+  }
+  mModsSheet = result.unwrapOr(nullptr);
+}
+  
+/* static */
+auto ZenStyleSheetCache::Singleton() -> ZenStyleSheetCache* {
+  MOZ_ASSERT(NS_IsMainThread());
+  if (!gZenModsCache) {
+    gZenModsCache = new ZenStyleSheetCache;
+  }
+  return gZenModsCache;
+}
+
+mozilla::StaticRefPtr<ZenStyleSheetCache> ZenStyleSheetCache::gZenModsCache; 
+
+} // namespace: zen
--- a/src/zen/mods/ZenStyleSheetCache.h
+++ b/src/zen/mods/ZenStyleSheetCache.h
@@ -0,0 +1,57 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_ZenStyleSheetCache_h__
+#define mozilla_ZenStyleSheetCache_h__
+
+#include "mozilla/css/Loader.h"
+#include "mozilla/NotNull.h"
+#include "mozilla/StaticPtr.h"
+
+#ifndef ZEN_MODS_FILENAME
+  #define ZEN_MODS_FILENAME u"zen-themes.css"_ns
+#endif
+
+namespace zen {
+
+class ZenStyleSheetCache final : public nsISupports {
+  using StyleSheet = mozilla::StyleSheet;
+
+ public:
+  NS_DECL_ISUPPORTS
+
+  /**
+   * @brief Clear up the cache and create a new mods stylesheet.
+   * This is called when we need to recalculate the mods stylesheets.
+   * @returns The mods stylesheet.
+   */
+  auto InvalidateModsSheet() -> void;
+
+  /**
+   * @brief Get the mods stylesheet.
+   * This is called when we need to get the mods stylesheets.
+   * @returns The mods stylesheet.
+   */
+  auto GetModsSheet() -> StyleSheet*;
+
+  static auto Singleton() -> ZenStyleSheetCache*;
+ private:
+  ZenStyleSheetCache() = default;
+  ~ZenStyleSheetCache() = default;
+
+  /**
+   * @brief Load the stylesheet from the given file.
+   * @param aFile The file to load the stylesheet from.
+   */
+  auto LoadSheetFile(nsIFile* aFile, mozilla::css::SheetParsingMode aParsingMode)
+      -> void;
+
+  static mozilla::StaticRefPtr<ZenStyleSheetCache> gZenModsCache;
+
+  RefPtr<StyleSheet> mModsSheet;
+};
+
+} // namespace zen
+
+#endif
--- a/src/zen/mods/components.conf
+++ b/src/zen/mods/components.conf
@@ -0,0 +1,10 @@
+Classes = [
+    {
+        'cid': '{a0ee4792-b186-4497-936d-53a8989fe836}',
+        'interfaces': ['nsIZenModsBackend'],
+        'contract_ids': ['@mozilla.org/zen/mods-backend;1'],
+        'type': 'zen::nsZenModsBackend',
+        'headers': ['mozilla/nsZenModsBackend.h'],
+        'processes': ProcessSelector.MAIN_PROCESS_ONLY,
+    },
+]
--- a/src/zen/mods/moz.build
+++ b/src/zen/mods/moz.build
@@ -7,3 +7,31 @@ FINAL_TARGET_FILES.actors += [
    "actors/ZenModsMarketplaceChild.sys.mjs",
    "actors/ZenModsMarketplaceParent.sys.mjs",
 ]
+
+XPIDL_SOURCES += [
+    "nsIZenModsBackend.idl",
+]
+
+EXPORTS.mozilla += [
+    "nsZenModsBackend.h",
+    "ZenStyleSheetCache.h",
+]
+
+SOURCES += [
+    "nsZenModsBackend.cpp",
+    "ZenStyleSheetCache.cpp",
+]
+
+XPCOM_MANIFESTS += [
+    "components.conf",
+]
+
+include("/ipc/chromium/chromium-config.mozbuild")
+
+LOCAL_INCLUDES += [
+    "/dom/base",
+    "/dom/ipc",
+]
+
+FINAL_LIBRARY = "xul"
+XPIDL_MODULE = "zen_mods"
--- a/src/zen/mods/nsIZenModsBackend.idl
+++ b/src/zen/mods/nsIZenModsBackend.idl
@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "nsISupports.idl"
+#include "nsIURI.idl"
+
+%{C++
+#include "mozilla/ServoStyleSet.h"
+#include "mozilla/dom/Document.h"
+%}
+
+/**
+ * @brief Interface for Zen mods backend.
+ */
+[scriptable, uuid(a0ee4792-b186-4497-936d-53a8989fe836)]
+interface nsIZenModsBackend : nsISupports {
+  /*
+   * @brief Remove, clear cache and create a new mods stylesheet.
+   * This is called when we need to recalculate the mods stylesheets.
+   * @returns The mods stylesheet.
+   */
+  void invalidateModsSheet();
+  /**
+   * @brief Unregister and register the mods stylesheet.
+   * This is called when we need to recalculate the mods stylesheets.
+   * @returns void
+   */
+  void rebuildModsStyles();
+};
+
--- a/src/zen/mods/nsZenModsBackend.cpp
+++ b/src/zen/mods/nsZenModsBackend.cpp
@@ -0,0 +1,105 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "nsZenModsBackend.h"
+
+#include "nsIXULRuntime.h"
+#include "nsStyleSheetService.h"
+
+#include "mozilla/PresShell.h"
+#include "mozilla/dom/ContentParent.h"
+
+#include "nsIURI.h"
+#include "nsIFile.h"
+
+#include "ZenStyleSheetCache.h"
+
+namespace zen {
+
+namespace {
+/// @brief Helper function to get the singleton instance of ZenStyleSheetCache.
+/// @return A pointer to the singleton instance of ZenStyleSheetCache.
+static auto GetZenStyleSheetCache() -> ZenStyleSheetCache* {
+  return ZenStyleSheetCache::Singleton();
+}
+}
+
+// Use the macro to inject all of the definitions for nsISupports.
+NS_IMPL_ISUPPORTS(nsZenModsBackend, nsIZenModsBackend)
+
+nsZenModsBackend::nsZenModsBackend() {
+  mozilla::Unused << CheckEnabled();
+}
+
+auto nsZenModsBackend::CheckEnabled() -> bool {
+  // Check if the mods backend is enabled based on the preference.
+  nsCOMPtr<nsIXULRuntime> appInfo =
+      do_GetService("@mozilla.org/xre/app-info;1");
+  bool inSafeMode = false;
+  if (appInfo) {
+    appInfo->GetInSafeMode(&inSafeMode);
+  }
+  mEnabled = !inSafeMode &&
+             !mozilla::Preferences::GetBool("zen.themes.disable-all", false);
+  return mEnabled; 
+}
+
+auto nsZenModsBackend::RebuildModsStyles() -> nsresult {
+  // Invalidate the mods stylesheet cache.
+  GetZenStyleSheetCache()->InvalidateModsSheet();
+  // Rebuild the mods stylesheets.
+  auto modsSheet = GetZenStyleSheetCache()->GetModsSheet();
+  if (!modsSheet) {
+    return NS_ERROR_FAILURE;
+  }
+  // Get the service from @mozilla.org/content/style-sheet-service;1
+  if (auto* sss = nsStyleSheetService::GetInstance()) {
+    // Register the mods stylesheet.
+    sss->UpdateZenModStyles(modsSheet, modsSheet->GetSheetURI(), CheckEnabled());
+  }
+  // Notify that the mods stylesheets have been rebuilt.
+  return NS_OK;
+}
+
+NS_IMETHODIMP
+nsZenModsBackend::InvalidateModsSheet() {
+  if (!mEnabled) {
+    return NS_ERROR_NOT_AVAILABLE;
+  }
+  GetZenStyleSheetCache()->InvalidateModsSheet();
+  return NS_OK;
+}
+
+} // namespace: zen
+
+void nsStyleSheetService::UpdateZenModStyles(mozilla::StyleSheet* aSheet, nsIURI* aURI, bool aInsert) {
+  auto sheetType = nsStyleSheetService::USER_SHEET;
+  this->UnregisterSheet(aURI, sheetType);
+  if (!aSheet || !aInsert) {
+    return; // Nothing to update.
+  }
+  mSheets[sheetType].AppendElement(aSheet);
+  // Hold on to a copy of the registered PresShells.
+  for (mozilla::PresShell* presShell : mPresShells.Clone()) {
+    // Only allow on chrome documents.
+    auto doc = presShell->GetDocument();
+    if (doc && !doc->IsInChromeDocShell()) {
+      continue;
+    }
+    presShell->NotifyStyleSheetServiceSheetAdded(aSheet, sheetType);
+  }
+
+  if (XRE_IsParentProcess()) {
+    nsTArray<mozilla::dom::ContentParent*> children;
+    mozilla::dom::ContentParent::GetAll(children);
+
+    if (children.IsEmpty()) {
+      return;
+    }
+
+    for (uint32_t i = 0; i < children.Length(); i++) {
+      mozilla::Unused << children[i]->SendLoadAndRegisterSheet(aURI, sheetType);
+    }
+  }
+}
--- a/src/zen/mods/nsZenModsBackend.h
+++ b/src/zen/mods/nsZenModsBackend.h
@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_ZenModsBackend_h__
+#define mozilla_ZenModsBackend_h__
+
+#include "nsIZenModsBackend.h"
+#include "nsIZenCommonUtils.h"
+
+#include "mozilla/ServoStyleSet.h"
+#include "mozilla/dom/Document.h"
+
+namespace zen {
+
+class nsZenModsBackend final : public nsIZenModsBackend {
+  NS_DECL_ISUPPORTS
+  NS_DECL_NSIZENMODSBACKEND
+
+ public:
+  explicit nsZenModsBackend();
+
+ protected:
+  /**
+   * @brief Check for the preference and see if the app is on safe mode.
+   */
+  auto CheckEnabled() -> bool;
+
+ private:
+  ~nsZenModsBackend() = default;
+  bool mEnabled = false;
+};
+
+} // namespace zen
+
+#endif
--- a/src/zen/split-view/ZenViewSplitter.mjs
+++ b/src/zen/split-view/ZenViewSplitter.mjs
@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.

-class SplitLeafNode {
+class nsSplitLeafNode {
  /**
   * The percentage of the size of the parent the node takes up, dependent on parent direction this is either
   * width or height.
@@ -14,7 +14,7 @@ class SplitLeafNode {
   */
  positionToRoot; // position relative to root node
  /**
-   * @type {SplitNode}
+   * @type {nsSplitNode}
   */
  parent;
  constructor(tab, sizeInParent) {
@@ -31,7 +31,7 @@ class SplitLeafNode {
  }
 }

-class SplitNode extends SplitLeafNode {
+class nsSplitNode extends nsSplitLeafNode {
  /**
   * @type {string}
   */
@@ -63,7 +63,7 @@ class SplitNode extends SplitLeafNode {
  }
 }

-class ZenViewSplitter extends ZenDOMOperatedFeature {
+class nsZenViewSplitter extends ZenDOMOperatedFeature {
  currentView = -1;
  _data = [];
  _tabBrowserPanel = null;
@@ -322,7 +322,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
      draggedTab._visuallySelected = true;
      this.fakeBrowser.setAttribute('side', side);
      this._finishAllAnimatingPromise = Promise.all([
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          gBrowser.tabbox,
          side === 'left'
            ? {
@@ -338,7 +338,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
            easing: 'ease-out',
          }
        ),
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          this.fakeBrowser,
          {
            width: [0, `${halfWidth - padding}px`],
@@ -401,7 +401,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
    this._draggingTab = null;
    try {
      Promise.all([
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          gBrowser.tabbox,
          side === 'left'
            ? {
@@ -415,7 +415,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
            easing: 'ease-out',
          }
        ),
-        gZenUIManager.motion.animate(
+        gZenUIManager.anime.animate(
          this.fakeBrowser,
          {
            width: [`${halfWidth - padding * 2}px`, 0],
@@ -441,9 +441,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
  }

  /**
-   * Remove a SplitNode from its tree and the view
-   * @param {SplitNode} toRemove
-   * @return {SplitNode} that has to be updated
+   * Remove a nsSplitNode from its tree and the view
+   * @param {nsSplitNode} toRemove
+   * @return {nsSplitNode} that has to be updated
   */
  removeNode(toRemove) {
    this._removeNodeSplitters(toRemove, true);
@@ -825,7 +825,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
      nodeSize = node.sizeInParent;
    } else {
      nodeSize = 100;
-      newParent = new SplitNode(splitDirection, node.sizeInParent);
+      newParent = new nsSplitNode(splitDirection, node.sizeInParent);
      if (node.parent) {
        newParent.parent = node.parent;
        const nodeIndex = node.parent.children.indexOf(node);
@@ -1118,7 +1118,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
  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), prepend);
+    splitNode.addChild(new nsSplitLeafNode(tab, (1 - reduce) * 100), prepend);
  }

  /**
@@ -1184,21 +1184,24 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
  calculateLayoutTree(tabs, gridType) {
    let rootNode;
    if (gridType === 'vsep' || (tabs.length === 2 && gridType === 'grid')) {
-      rootNode = new SplitNode('row');
-      rootNode.children = tabs.map((tab) => new SplitLeafNode(tab, 100 / tabs.length));
+      rootNode = new nsSplitNode('row');
+      rootNode.children = tabs.map((tab) => new nsSplitLeafNode(tab, 100 / tabs.length));
    } else if (gridType === 'hsep') {
-      rootNode = new SplitNode('column');
-      rootNode.children = tabs.map((tab) => new SplitLeafNode(tab, 100 / tabs.length));
+      rootNode = new nsSplitNode('column');
+      rootNode.children = tabs.map((tab) => new nsSplitLeafNode(tab, 100 / tabs.length));
    } else if (gridType === 'grid') {
-      rootNode = new SplitNode('row');
+      rootNode = new nsSplitNode('row');
      const rowWidth = 100 / Math.ceil(tabs.length / 2);
      for (let i = 0; i < tabs.length - 1; i += 2) {
-        const columnNode = new SplitNode('column', rowWidth, 100);
-        columnNode.children = [new SplitLeafNode(tabs[i], 50), new SplitLeafNode(tabs[i + 1], 50)];
+        const columnNode = new nsSplitNode('column', rowWidth, 100);
+        columnNode.children = [
+          new nsSplitLeafNode(tabs[i], 50),
+          new nsSplitLeafNode(tabs[i + 1], 50),
+        ];
        rootNode.addChild(columnNode);
      }
      if (tabs.length % 2 !== 0) {
-        rootNode.addChild(new SplitLeafNode(tabs[tabs.length - 1], rowWidth));
+        rootNode.addChild(new nsSplitLeafNode(tabs[tabs.length - 1], rowWidth));
      }
    }

@@ -1260,7 +1263,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
  /**
   * Apply grid layout to tabBrowserPanel
   *
-   * @param {SplitNode} splitNode SplitNode
+   * @param {nsSplitNode} splitNode nsSplitNode
   */
  applyGridLayout(splitNode) {
    if (!splitNode.positionToRoot) {
@@ -1317,7 +1320,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
  /**
   *
   * @param {String} orient
-   * @param {SplitNode} parentNode
+   * @param {nsSplitNode} parentNode
   * @param {Number} idx
   */
  createSplitter(orient, parentNode, idx) {
@@ -1332,7 +1335,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
  }

  /**
-   * @param {SplitNode} parentNode
+   * @param {nsSplitNode} parentNode
   * @param {number|undefined} splittersNeeded if provided the amount of splitters for node will be adjusted to match
   */
  getSplitters(parentNode, splittersNeeded) {
@@ -1365,7 +1368,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {

  /**
   * @param {Tab} tab
-   * @return {SplitNode} splitNode
+   * @return {nsSplitNode} splitNode
   */
  getSplitNodeFromTab(tab) {
    return this._tabToSplitNode.get(tab);
@@ -1703,7 +1706,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
            if (parentNode.direction !== splitDirection) {
              this.splitIntoNode(
                droppedOnSplitNode,
-                new SplitLeafNode(draggedTab, 50),
+                new nsSplitLeafNode(draggedTab, 50),
                hoverSide,
                0.5
              );
@@ -1760,7 +1763,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
  }

  animateBrowserDrop(browserContainer, callback = () => {}) {
-    gZenUIManager.motion
+    gZenUIManager.anime
      .animate(
        browserContainer,
        {
@@ -1900,4 +1903,4 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
  }
 }

-window.gZenViewSplitter = new ZenViewSplitter();
+window.gZenViewSplitter = new nsZenViewSplitter();
--- a/src/zen/tabs/ZenPinnedTabManager.mjs
+++ b/src/zen/tabs/ZenPinnedTabManager.mjs
@@ -51,7 +51,7 @@
    }
  }

-  class ZenPinnedTabManager extends ZenDOMOperatedFeature {
+  class nsZenPinnedTabManager extends ZenDOMOperatedFeature {
    MAX_ESSENTIALS_TABS = 12;

    async init() {
@@ -546,6 +546,7 @@
              break;
            }
            await gBrowser.explicitUnloadTabs([selectedTab]);
+            selectedTab.removeAttribute('discarded');
          }
          if (selectedTab.selected) {
            this._handleTabSwitch(selectedTab);
@@ -611,7 +612,7 @@
        // Remove everything except the entry we want to keep
        state.entries = [state.entries[foundEntryIndex]];
      }
-      state.image ||= pin.iconUrl || null;
+      state.image = pin.iconUrl || null;
      state.index = 0;

      SessionStore.setTabState(tab, state);
@@ -856,7 +857,7 @@
              const rect = targetTab.getBoundingClientRect();
              let newIndex = targetTab._tPos;

-              if (isVertical) {
+              if (isVertical || !this.expandedSidebarMode) {
                const middleY = targetTab.screenY + rect.height / 2;
                if (!isRegularTabs && event.screenY > middleY) {
                  newIndex++;
@@ -1045,7 +1046,7 @@
      // Calculate middle to decide 'before' or 'after'
      const rect = targetTab.getBoundingClientRect();
      let shouldPlayHapticFeedback = false;
-      if (isVertical) {
+      if (isVertical || !this.expandedSidebarMode) {
        const separation = 8;
        const middleY = targetTab.screenY + rect.height / 2;
        const indicator = this.dragIndicator;
@@ -1103,5 +1104,5 @@
    }
  }

-  window.gZenPinnedTabManager = new ZenPinnedTabManager();
+  window.gZenPinnedTabManager = new nsZenPinnedTabManager();
 }
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -798,18 +798,16 @@
    }
  }

-  /* Center top buttons container */
  & #zen-sidebar-top-buttons {
    justify-content: center;
-    max-height: unset !important; /* Allow natural height */
+    max-height: unset !important;
    height: fit-content !important;
  }

-  /* Adjust titlebar layout for collapsed state */
  & #titlebar {
    display: grid;
    grid-template-rows: auto 1fr; /* Allow content below button box */
-    overflow: hidden;
+    overflow: clip;
  }

  /* Style top buttons customization target */
--- a/src/zen/tests/glance/browser_glance_next_tab.js
+++ b/src/zen/tests/glance/browser_glance_next_tab.js
@@ -4,12 +4,10 @@
 'use strict';

 add_task(async function test_Glance_Next_Tab() {
-  const selectedTab = gBrowser.selectedTab;
+  const tabToCheck = gBrowser.selectedTab;
  await BrowserTestUtils.openNewForegroundTab(window.gBrowser, 'https://example.com/', true, {
    skipAnimation: true,
  });
-  const tabToCheck = gBrowser.selectedTab;
-  gBrowser.selectedTab = selectedTab;
  await openGlanceOnTab(async (glanceTab) => {
    gBrowser.tabContainer.advanceSelectedTab(1);
    const nextTab = gBrowser.selectedTab;
--- a/src/zen/tests/glance/head.js
+++ b/src/zen/tests/glance/head.js
@@ -1,7 +1,6 @@
-/* Any copyright is dedicated to the Public Domain.
-   https://creativecommons.org/publicdomain/zero/1.0/ */
-
-'use strict';
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

 function openGlanceOnTab(callback, close = true) {
  return new Promise(async (resolve) => {
--- a/src/zen/tests/moz.build
+++ b/src/zen/tests/moz.build
@@ -8,5 +8,6 @@ BROWSER_CHROME_MANIFESTS += [
    "glance/browser.toml",
    "pinned/browser.toml",
    "urlbar/browser.toml",
+    "welcome/browser.toml",
    "workspaces/browser.toml",
 ]
--- a/src/zen/tests/welcome/browser.toml
+++ b/src/zen/tests/welcome/browser.toml
@@ -0,0 +1,7 @@
+[DEFAULT]
+prefs = ["zen.welcome-screen.seen=false"]
+support-files = [
+  "head.js",
+]
+
+["browser_welcome.js"]
--- a/src/zen/tests/welcome/browser_welcome.js
+++ b/src/zen/tests/welcome/browser_welcome.js
@@ -0,0 +1,154 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+'use strict';
+
+add_task(async function test_Welcome_Steps() {
+  const selectedTab = gBrowser.selectedTab;
+  await new Promise((resolve) => {
+    setTimeout(async () => {
+      await waitForFocus();
+      await EventUtils.synthesizeMouseAtCenter(
+        document.getElementById('zen-welcome-start-button'),
+        {}
+      );
+      setTimeout(() => {
+        resolve();
+      }, 4000); // Wait for the transition to complete
+    }, 2000); // Give tons of time for the welcome start button to be clicked
+  });
+  ok(true, 'Welcome start button clicked successfully');
+
+  const welcomeContent = document.getElementById('zen-welcome-page-content');
+
+  for (const button of document.querySelectorAll('#zen-welcome-page-sidebar-buttons button')) {
+    ok(
+      getComputedStyle(button).pointerEvents !== 'none',
+      `Button with l10n-id "${button.getAttribute('data-l10n-id')}" should be clickable`
+    );
+  }
+
+  await goNextWelcomePage('zen-welcome-skip-button');
+  ok(true, 'Welcome Import Step Test Finished');
+
+  Assert.greater(
+    welcomeContent.children.length,
+    0,
+    'Welcome page content should have children after clicking next action'
+  );
+
+  for (const child of welcomeContent.children) {
+    console.log(child);
+    ok(
+      child.querySelector('img').getAttribute('src').includes('blob:'),
+      'Welcome page content should have an image with a base64 data URL'
+    );
+  }
+
+  await EventUtils.synthesizeMouseAtCenter(welcomeContent.children[1], {});
+
+  await new Promise((resolve) => {
+    setTimeout(async () => {
+      let engineName = await Services.search.getDefault();
+      const selectedLabel = welcomeContent.children[1];
+      ok(selectedLabel.querySelector('input').checked, 'The selected label should be checked');
+      Assert.equal(
+        engineName.name,
+        selectedLabel.querySelector('label').textContent.trim(),
+        'The default search engine should match the selected label'
+      );
+      resolve();
+    }, 100); // Wait for the transition to complete
+  });
+
+  await goNextWelcomePage('zen-welcome-next-action');
+  ok(true, 'Welcome Search Step Test Finished');
+
+  await new Promise((resolve) => {
+    setTimeout(async () => {
+      const essentials = welcomeContent.querySelector(
+        '#zen-welcome-initial-essentials-browser-sidebar-essentials'
+      ).children;
+      Assert.greater(
+        essentials.length,
+        3,
+        'Welcome page content should have more than 3 essentials after clicking next action'
+      );
+      await EventUtils.synthesizeMouseAtCenter(essentials[0], {});
+      await EventUtils.synthesizeMouseAtCenter(essentials[1], {});
+      await EventUtils.synthesizeMouseAtCenter(essentials[2], {});
+
+      ok(
+        essentials[0].hasAttribute('visuallyselected'),
+        'The first essential should be visually selected'
+      );
+      ok(
+        !essentials[1].hasAttribute('visuallyselected'),
+        'The second essential should be visually selected'
+      );
+      ok(
+        essentials[2].hasAttribute('visuallyselected'),
+        'The third essential should be visually selected'
+      );
+      const urlsToCheck = [
+        essentials[0].getAttribute('data-url'),
+        essentials[2].getAttribute('data-url'),
+      ];
+      for (const url of urlsToCheck) {
+        ok(url.startsWith('https://'), `The URL "${url}" should start with "https://"`);
+      }
+
+      await goNextWelcomePage('zen-welcome-next-action');
+
+      await new Promise((resolve) => {
+        setTimeout(async () => {
+          for (const url of urlsToCheck) {
+            ok(
+              await PlacesUtils.history.hasVisits(url),
+              `The URL "${url}" should have visits in history`
+            );
+          }
+          resolve();
+        }, 1000); // Wait for the transition to complete
+      });
+      resolve();
+    }, 1000); // Wait for the transition to complete
+  });
+
+  await goNextWelcomePage('zen-welcome-next-action');
+  ok(true, 'Welcome Theme Step Test Finished');
+
+  await goNextWelcomePage('zen-welcome-start-browsing');
+  ok(true, 'Welcome Finish Step Test Finished');
+
+  await new Promise((resolve) => {
+    setTimeout(async () => {
+      Assert.greater(
+        gBrowser._numZenEssentials,
+        2,
+        'There should be more than 2 Zen Essentials after the welcome process'
+      );
+      Assert.equal(
+        gBrowser.tabs.filter((tab) => tab.pinned && !tab.hasAttribute('zen-essential')).length,
+        2,
+        'There should be 2 pinned tabs after the welcome process'
+      );
+
+      gBrowser.selectedTab = selectedTab;
+      for (const tab of gBrowser.tabs) {
+        if (tab.pinned) {
+          if (!tab.hasAttribute('zen-essential')) {
+            ok(
+              tab.hasAttribute('zen-workspace-id'),
+              'Pinned tabs should have a zen-workspace-id attribute'
+            );
+          }
+          ok(tab.hasAttribute('zen-pin-id'), 'Pinned tabs should have a zen-pin-id attribute');
+          await BrowserTestUtils.removeTab(tab);
+        }
+      }
+      resolve();
+    }, 8000); // Wait for the transition to complete
+  });
+  ok(true, 'Welcome process completed successfully');
+});
--- a/src/zen/tests/welcome/head.js
+++ b/src/zen/tests/welcome/head.js
@@ -0,0 +1,24 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+async function goNextWelcomePage(l10nId) {
+  await new Promise(async (resolve) => {
+    const button = document.querySelector(
+      `#zen-welcome-page-sidebar-buttons button[data-l10n-id="${l10nId}"]`
+    );
+    if (!button) {
+      throw new Error(`Button with l10n-id "${l10nId}" not found`);
+    }
+    await EventUtils.synthesizeMouseAtCenter(button, {});
+    setTimeout(() => {
+      setTimeout(() => {
+        resolve();
+      }, 0);
+    }, 3000); // Wait for the transition to complete
+  });
+}
+
+async function waitForFocus(...args) {
+  await new Promise((resolve) => SimpleTest.waitForFocus(resolve, ...args));
+}
--- a/src/zen/vendor/animejs.dep
+++ b/src/zen/vendor/animejs.dep
@@ -0,0 +1 @@
+https://cdn.jsdelivr.net/npm/animejs/+esm: v4.0.2
--- a/src/zen/vendor/animejs.min.mjs
+++ b/src/zen/vendor/animejs.min.mjs
--- a/src/zen/vendor/motion.dep
+++ b/src/zen/vendor/motion.dep
@@ -1 +0,0 @@
-https://cdn.jsdelivr.net/npm/motion@latest/+esm: v12.16.0
--- a/src/zen/vendor/motion.min.mjs
+++ b/src/zen/vendor/motion.min.mjs
--- a/src/zen/welcome/ZenWelcome.mjs
+++ b/src/zen/welcome/ZenWelcome.mjs
@@ -18,7 +18,7 @@
  }

  function getMotion() {
-    return gZenUIManager.motion;
+    return gZenUIManager.anime;
  }

  async function animate(...args) {
@@ -126,7 +126,7 @@
    }
  }

-  class ZenWelcomePages {
+  class nsZenWelcomePages {
    constructor(pages) {
      this._currentPage = -1;
      this._pages = pages;
@@ -161,6 +161,7 @@
    async fadeInButtons(page) {
      const buttons = document.getElementById('zen-welcome-page-sidebar-buttons');
      let i = 0;
+      const insertedButtons = [];
      for (const button of page.buttons) {
        const buttonElement = document.createXULElement('button');
        document.l10n.setAttributes(buttonElement, button.l10n);
@@ -174,6 +175,8 @@
            this.next();
          }
        });
+        buttonElement.style.pointerEvents = 'none'; // Disable pointer events until animation is done
+        insertedButtons.push(buttonElement);
        buttons.appendChild(buttonElement);
      }
      await animate(
@@ -185,6 +188,9 @@
          bounce: 0.2,
        }
      );
+      for (const button of insertedButtons) {
+        button.style.pointerEvents = ''; // Enable pointer events after animation
+      }
    }

    async fadeInContent() {
@@ -723,17 +729,6 @@
      }
    );
    const button = document.getElementById('zen-welcome-start-button');
-    await animate(
-      button,
-      { opacity: [0, 1], y: [20, 0], filter: ['blur(2px)', 'blur(0px)'] },
-      {
-        delay: 0.1,
-        type: 'spring',
-        stiffness: 300,
-        damping: 20,
-        mass: 1.8,
-      }
-    );
    button.addEventListener('click', async () => {
      await animate(
        '#zen-welcome-title span, #zen-welcome-start-button',
@@ -745,8 +740,19 @@
          delay: getMotion().stagger(0.4),
        }
      );
-      new ZenWelcomePages(getWelcomePages());
+      new nsZenWelcomePages(getWelcomePages());
    });
+    await animate(
+      button,
+      { opacity: [0, 1], y: [20, 0], filter: ['blur(2px)', 'blur(0px)'] },
+      {
+        delay: 0.1,
+        type: 'spring',
+        stiffness: 300,
+        damping: 20,
+        mass: 1.8,
+      }
+    );
  }

  function centerWindowOnScreen() {
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/src/zen/workspaces/ZenGradientGenerator.mjs
--- a/src/zen/workspaces/ZenWorkspace.mjs
+++ b/src/zen/workspaces/ZenWorkspace.mjs
@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 {
-  class ZenWorkspace extends MozXULElement {
+  class nsZenWorkspace extends MozXULElement {
    static get markup() {
      return `
        <vbox class="zen-workspace-tabs-section zen-current-workspace-indicator" flex="1" context="zenWorkspaceMoreActions">
@@ -220,5 +220,5 @@
    }
  }

-  customElements.define('zen-workspace', ZenWorkspace);
+  customElements.define('zen-workspace', nsZenWorkspace);
 }
--- a/src/zen/workspaces/ZenWorkspaceCreation.mjs
+++ b/src/zen/workspaces/ZenWorkspaceCreation.mjs
@@ -1,5 +1,5 @@
 {
-  class ZenWorkspaceCreation extends MozXULElement {
+  class nsZenWorkspaceCreation extends MozXULElement {
    #wasInCollapsedMode = false;

    promiseInitialized = new Promise((resolve) => {
@@ -119,7 +119,7 @@
        }
      }

-      for (const element of ZenWorkspaceCreation.elementsToDisable) {
+      for (const element of nsZenWorkspaceCreation.elementsToDisable) {
        const el = document.getElementById(element);
        if (el) {
          el.setAttribute('disabled', 'true');
@@ -152,7 +152,7 @@

      document.getElementById('zen-sidebar-splitter').style.pointerEvents = 'none';

-      gZenUIManager.motion
+      gZenUIManager.anime
        .animate(
          [gBrowser.tabContainer, gURLBar.textbox],
          {
@@ -172,7 +172,7 @@
          this.style.visibility = 'visible';
          gZenCompactModeManager.getAndApplySidebarWidth();
          this.resolveInitialized();
-          gZenUIManager.motion
+          gZenUIManager.anime
            .animate(
              this.elementsToAnimate,
              {
@@ -184,7 +184,7 @@
                duration: 0.6,
                type: 'spring',
                bounce: 0,
-                delay: gZenUIManager.motion.stagger(0.05, { startDelay: 0.2 }),
+                delay: gZenUIManager.anime.stagger(0.05, { startDelay: 0.2 }),
              }
            )
            .then(() => {
@@ -265,7 +265,7 @@
    }

    async #cleanup() {
-      await gZenUIManager.motion.animate(
+      await gZenUIManager.anime.animate(
        this.elementsToAnimate.reverse(),
        {
          y: [0, 20],
@@ -276,7 +276,7 @@
          duration: 0.4,
          type: 'spring',
          bounce: 0,
-          delay: gZenUIManager.motion.stagger(0.05),
+          delay: gZenUIManager.anime.stagger(0.05),
        }
      );

@@ -311,7 +311,7 @@
      await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true);
      await gZenWorkspaces.updateTabsContainers();

-      await gZenUIManager.motion.animate(
+      await gZenUIManager.anime.animate(
        [gBrowser.tabContainer, gURLBar.textbox],
        {
          opacity: [0, 1],
@@ -336,5 +336,5 @@
    }
  }

-  customElements.define('zen-workspace-creation', ZenWorkspaceCreation);
+  customElements.define('zen-workspace-creation', nsZenWorkspaceCreation);
 }
--- a/src/zen/workspaces/ZenWorkspaceIcons.mjs
+++ b/src/zen/workspaces/ZenWorkspaceIcons.mjs
@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 {
-  class ZenWorkspaceIcons extends MozXULElement {
+  class nsZenWorkspaceIcons extends MozXULElement {
    constructor() {
      super();
    }
@@ -145,6 +145,7 @@
        i++;
      }
      buttons[selected].setAttribute('active', true);
+      this.scrollLeft = buttons[selected].offsetLeft - 10;
      this.setAttribute('selected', selected);
    }

@@ -181,5 +182,5 @@
    }
  }

-  customElements.define('zen-workspace-icons', ZenWorkspaceIcons);
+  customElements.define('zen-workspace-icons', nsZenWorkspaceIcons);
 }
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -562,7 +562,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
        break;
    }
    requestAnimationFrame(() => {
-      gNavToolbox.setAttribute('zen-has-hover', 'true');
+      requestAnimationFrame(() => {
+        gNavToolbox.setAttribute('zen-has-hover', 'true');
+      });
    });
  }

@@ -883,7 +885,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    this.activeWorkspace = activeWorkspace?.uuid;
    try {
      if (activeWorkspace) {
-        window.gZenThemePicker = new ZenThemePicker();
+        window.gZenThemePicker = new nsZenThemePicker();
        await gZenThemePicker.onWorkspaceChange(activeWorkspace);
      }
    } catch (e) {
@@ -1167,7 +1169,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    } else {
      openInContainerMenuItem.setAttribute('hidden', 'true');
    }
-    const target = event.explicitOriginalTarget?.closest('toolbarbutton');
+    // Call parent node as on windows, the text can be double clicked
+    let target;
+    try {
+      target = event.explicitOriginalTarget?.closest('toolbarbutton');
+    } catch (_) {}
    this.#contextMenuData = {
      workspaceId: target?.getAttribute('zen-workspace-id'),
      originalTarget: target,
@@ -1180,6 +1186,30 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    themePicker.hidden =
      this.#contextMenuData.workspaceId &&
      this.#contextMenuData.workspaceId !== this.activeWorkspace;
+    const separator = document.getElementById('context_zenWorkspacesSeparator');
+    for (const item of event.target.querySelectorAll('.zen-workspace-context-menu-item')) {
+      item.remove();
+    }
+    if (!this.#contextMenuData.workspaceId) {
+      separator.hidden = false;
+      for (const workspace of [...this._workspaceCache.workspaces].reverse()) {
+        const item = document.createXULElement('menuitem');
+        item.className = 'zen-workspace-context-menu-item';
+        item.setAttribute('zen-workspace-id', workspace.uuid);
+        item.setAttribute('disabled', workspace.uuid === this.activeWorkspace);
+        let name = workspace.name;
+        if (workspace.icon && workspace.icon !== '') {
+          name = `${workspace.icon}  ${name}`;
+        }
+        item.setAttribute('label', name);
+        item.addEventListener('command', (e) => {
+          this.changeWorkspaceWithID(e.target.closest('menuitem').getAttribute('zen-workspace-id'));
+        });
+        separator.after(item);
+      }
+    } else {
+      separator.hidden = true;
+    }
    event.target.addEventListener(
      'popuphidden',
      () => {
@@ -1563,8 +1593,8 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    ) {
      delete this._alwaysAnimatePaddingTop;
      const essentialsHeight = essentialContainer.getBoundingClientRect().height;
-      if (!forAnimation && animateContainer && gZenUIManager.motion) {
-        gZenUIManager.motion.animate(
+      if (!forAnimation && animateContainer && gZenUIManager.anime) {
+        gZenUIManager.anime.animate(
          workspaceElement,
          {
            paddingTop: [workspaceElement.style.paddingTop, essentialsHeight + 'px'],
@@ -1713,7 +1743,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      await new Promise((resolve) => {
        requestAnimationFrame(() => {
          animations.push(
-            gZenUIManager.motion.animate(
+            gZenUIManager.anime.animate(
              document.documentElement,
              {
                '--zen-background-opacity': [previousBackgroundOpacity, 1],
@@ -1743,7 +1773,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      if (shouldAnimate) {
        const existingPaddingTop = element.style.paddingTop;
        animations.push(
-          gZenUIManager.motion.animate(
+          gZenUIManager.anime.animate(
            element,
            {
              transform: existingTransform ? [existingTransform, newTransform] : newTransform,
@@ -1882,7 +1912,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
        if (shouldAnimate) {
          container.style.transform = existingTransform;
          animations.push(
-            gZenUIManager.motion.animate(
+            gZenUIManager.anime.animate(
              container,
              {
                transform: [
@@ -2149,7 +2179,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      uuid: gZenUIManager.generateUuidv4(),
      icon: icon,
      name: name,
-      theme: ZenThemePicker.getTheme([]),
+      theme: nsZenThemePicker.getTheme([]),
      containerTabId,
    };
    if (moveTabs) {
@@ -2810,4 +2840,19 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      }
    }
  }
+
+  updateOverflowingTabs() {
+    if (!this._hasInitializedTabsStrip) {
+      return;
+    }
+    const currentWorkspaceStrip = this.workspaceElement(this.activeWorkspace);
+    if (!currentWorkspaceStrip) {
+      return;
+    }
+    if (currentWorkspaceStrip.overflows) {
+      gBrowser.tabContainer.setAttribute('overflow', 'true');
+    } else {
+      gBrowser.tabContainer.removeAttribute('overflow');
+    }
+  }
 })();
--- a/src/zen/workspaces/overflow-icons.inc.css
+++ b/src/zen/workspaces/overflow-icons.inc.css
@@ -6,6 +6,8 @@

 &:not(:hover) {
  width: min(var(--zen-overflowed-workspace-button-width), 25px);
+  min-width: 10px;
+
  &::after {
    content: '';
    position: absolute;
--- a/src/zen/workspaces/zen-gradient-generator.css
+++ b/src/zen/workspaces/zen-gradient-generator.css
@@ -5,7 +5,7 @@
 */

 #PanelUI-zen-gradient-generator {
-  --panel-width: 320px;
+  --panel-width: 340px;
  --panel-padding: 10px;
  min-width: var(--panel-width);
 }
@@ -20,6 +20,7 @@
 #PanelUI-zen-gradient-generator-controls {
  align-items: center;
  gap: var(--panel-padding);
+  padding-top: 10px;
 }

 #zen-theme-picker-color {
@@ -62,7 +63,11 @@
  padding: 0 var(--panel-padding);

  @media (-moz-platform: macos) {
-    gap: 3rem;
+    gap: 2rem;
+  }
+
+  #PanelUI-zen-gradient-opacity-wrapper {
+    position: relative;
  }

  & label {
@@ -76,46 +81,58 @@
  }
 }

-#PanelUI-zen-gradient-generator-predefined {
+#PanelUI-zen-gradient-generator-color-pages-wrapper {
+  align-items: center;
+}
+
+#PanelUI-zen-gradient-generator-color-pages {
  display: flex;
  justify-content: space-around;
+  margin: 0 10px;
  align-items: center;
-  margin: 5px auto 10px auto;
  width: 100%;
+  overflow: auto;
+  scrollbar-width: none;
+  scroll-behavior: smooth;

-  & > box {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    cursor: pointer;
-    position: relative;
-    transition: transform 0.1s;
-    &::after {
-      content: '';
-      position: absolute;
+  & > hbox {
+    justify-content: space-around;
+    min-width: 100%;
+
+    & > box {
      width: 18px;
      height: 18px;
-      top: 0;
-      left: 0;
-      outline: 2px solid var(--zen-toolbar-element-bg);
      border-radius: 50%;
-      pointer-events: none;
+      cursor: pointer;
+      position: relative;
      transition: transform 0.1s;
-    }
-
-    &:hover {
-      transform: scale(1.05);
-
      &::after {
-        transform: scale(1.05);
+        content: '';
+        position: absolute;
+        width: 18px;
+        height: 18px;
+        top: 0;
+        left: 0;
+        outline: 2px solid var(--zen-toolbar-element-bg);
+        border-radius: 50%;
+        pointer-events: none;
+        transition: transform 0.1s;
      }
-    }

-    &:hover:active {
-      transform: scale(0.95);
+      &:hover {
+        transform: scale(1.05);

-      &::after {
+        &::after {
+          transform: scale(1.05);
+        }
+      }
+
+      &:hover:active {
        transform: scale(0.95);
+
+        &::after {
+          transform: scale(0.95);
+        }
      }
    }
  }
@@ -124,7 +141,7 @@
 #PanelUI-zen-gradient-generator-custom-list {
  margin-top: 15px;

-  &:not(:has(.zen-theme-picker-custom-list-item)) {
+  &:empty {
    display: none;
  }

@@ -164,46 +181,75 @@
  }
 }

-#PanelUI-zen-gradient-generator-opacity,
-#PanelUI-zen-gradient-generator-texture {
+#PanelUI-zen-gradient-slider-wave {
+  position: absolute;
+  left: -5px;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 16px;
+    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+    border-radius: 999px;
+    pointer-events: none;
+    z-index: -1;
+    top: 50%;
+    left: 4px;
+    transform: translateY(-50%);
+  }
+
+  & svg {
+    overflow: visible;
+    min-width: calc(100% + 2rem);
+    scale: 1.2;
+    margin-left: 4px;
+  }
+}
+
+#PanelUI-zen-gradient-generator-opacity {
  margin: 0 !important;
-  margin-top: 5px !important;
  background: transparent;
+  z-index: 2;

  &::-moz-range-thumb {
-    background: var(--zen-colors-tertiary);
-    border: 2px solid var(--zen-colors-border);
-    border-radius: 12px;
-    height: 25px;
-    width: 13px;
+    background: light-dark(black, white);
+    border-radius: 999px;
+    height: var(--zen-thumb-height);
+    width: var(--zen-thumb-width);
    cursor: pointer;
+    border: none;
  }

  &::-moz-range-track {
-    background: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
    border-radius: 999px;
-    height: 6px;
+    height: 18px;
  }

  &::-moz-range-progress {
-    background: var(--zen-primary-color);
-    border-radius: 999px;
-    height: 8px;
+    background: transparent;
  }
 }

 .zen-theme-picker-gradient {
  position: relative;
-  border-radius: calc(var(--zen-border-radius) - 2px);
  overflow: hidden;
  border-radius: var(--zen-border-radius);

-  min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
-  margin-bottom: 20px;
-
-  background: var(--zen-toolbar-element-bg);
+  min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
+  background: light-dark(
+    var(--zen-toolbar-element-bg),
+    color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent 40%)
+  );
  background-image: radial-gradient(
-    light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4)) 1px,
+    light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)) 1px,
    transparent 0
  );
  background-position: -19px -19px;
@@ -220,7 +266,7 @@
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    }
    cursor: pointer;
-    border: 2px solid #ffffff;
+    border: 3px solid #ffffff;
    animation: zen-theme-picker-dot-animation 0.5s;
    transform: translate(-50%, -50%);

@@ -229,7 +275,7 @@
      height: 36px;
      border-width: 4px;
      z-index: 2;
-      transition: transform 0.1s;
+      transition: transform 0.2s;
      &:hover {
        transform: scale(1.05) translate(-50%, -50%);
      }
@@ -241,6 +287,10 @@
  }
 }

+#PanelUI-zen-gradient-generator-view {
+  gap: 10px;
+}
+
 #PanelUI-zen-gradient-generator-color-click-to-add {
  position: absolute;
  font-weight: 600;
@@ -249,41 +299,46 @@
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
+  font-size: small;
+  margin: 0;

  &[hidden] {
    display: none;
  }
 }

-#PanelUI-zen-gradient-generator-color-actions {
+#PanelUI-zen-gradient-generator-color-actions,
+#PanelUI-zen-gradient-generator-scheme {
  display: flex;
  position: absolute;
-  bottom: 8px;
+  bottom: 12px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
-  & .separator,
-  & #PanelUI-zen-gradient-generator-color-toggle-algo {
-    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15));
-  }
+  gap: 5px;

  & button {
    border: none !important;
-    padding: 0.4rem !important;
+    padding: 0 !important;
    min-width: fit-content !important;
    transition: background 0.2s;
    appearance: none;
+    max-height: 26px;
+    max-width: 26px;
+    min-height: 26px;
+    min-width: 26px !important;
+    color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.9));

    & .button-box {
      gap: 0.1rem;
    }

-    &:not(#PanelUI-zen-gradient-generator-color-toggle-algo) .button-text {
+    & .button-text {
      display: none;
    }

    &:hover {
-      background: light-dark(#cfcfcf, #313131);
+      background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    }

    &[disabled] {
@@ -291,12 +346,11 @@
      cursor: not-allowed;
    }
  }
+}

-  & .separator {
-    width: 1px;
-    margin: 0 0.5rem;
-    height: 30px;
-  }
+#PanelUI-zen-gradient-generator-scheme {
+  top: 15px;
+  max-height: 32px;
 }

@media not -moz-pref('zen.theme.gradient.show-custom-colors') {
@@ -311,9 +365,8 @@
  position: relative;

  @media (-moz-platform: macos) {
-    width: 25%;
-    aspect-ratio: 1;
-    height: unset;
+    width: 5rem;
+    height: 5rem;
  }

  &::after {
@@ -381,32 +434,19 @@
  }
 }

-#PanelUI-zen-gradient-generator-rotation-line {
-  border: 1px solid var(--zen-colors-border);
-  position: absolute;
-  --rotation-padding: 15px;
-  width: calc(100% - var(--rotation-padding) * 2);
-  border-bottom-color: transparent;
-  height: calc(100% - var(--rotation-padding) * 2);
-  top: var(--rotation-padding);
-  left: var(--rotation-padding);
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
+#PanelUI-zen-gradient-generator-color-page-left,
+#PanelUI-zen-gradient-generator-color-page-right {
+  max-width: 28px;
+  max-height: 28px;
+  margin: 0 !important;
 }

-#PanelUI-zen-gradient-generator-rotation-dot {
-  position: absolute;
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-  border: 1px solid var(--zen-colors-border);
-  background: var(--zen-colors-tertiary);
-  opacity: 0;
-  cursor: pointer;
-  z-index: 2;
-  transition: transform 0.1s;
-  &:hover {
-    transform: scale(1.1);
+:root:not([zen-should-be-dark-mode]) {
+  #PanelUI-zen-gradient-generator-opacity {
+    display: none !important;
+  }
+
+  #PanelUI-zen-gradient-slider-wave svg path {
+    stroke: dimgray !important;
  }
 }
--- a/src/zen/workspaces/zen-workspaces.css
+++ b/src/zen/workspaces/zen-workspaces.css
@@ -34,7 +34,8 @@

  & toolbarbutton {
    margin: 0;
-    width: 25px;
+    width: 28px;
+    height: 28px;
    display: flex;
    justify-content: center;
    padding: 0 !important;
--- a/surfer.json
+++ b/surfer.json
@@ -6,7 +6,7 @@
  "version": {
    "product": "firefox",
    "version": "139.0.4",
-    "candidate": "139.0.4"
+    "candidate": "140.0"
  },
  "buildOptions": {
    "generateBranding": true
@@ -19,7 +19,7 @@
      "brandShortName": "Zen",
      "brandFullName": "Zen Browser",
      "release": {
-        "displayVersion": "1.13.1b",
+        "displayVersion": "1.13.2b",
        "github": {
          "repo": "zen-browser/desktop"
        },
@@ -53,4 +53,4 @@
    "licenseType": "MPL-2.0"
  },
  "updateHostname": "updates.zen-browser.app"
-}
+}
Author	SHA1	Message	Date
Mr. M	fdeeb972f7	chore: Rewrite motion to animejs, b=no-bug, c=common, compact-mode, glance, media, split-view, vendor, welcome, workspaces	2025-06-24 18:43:12 +02:00
Mr. M	12ae2daeba	feat: Fix aligment issues with initial gradient text, b=no-bug, c=common, workspaces	2025-06-24 17:53:11 +02:00
mr. m	fe77048619	fix: Fixed workspace overflows not working and refined new HSL picker, b=no-bug, c=tabs, common, compact-mode, workspaces	2025-06-24 17:44:22 +02:00
Mr. M	9971dbd0ad	fix: Fixed positions for gradients selector, b=no-bug, c=common, workspaces	2025-06-24 16:37:14 +02:00
mr. m	b735567504	Gradient hue revamp (#9093 )	2025-06-24 05:08:40 -07:00
Jai A P	ba7eff60ef	Fix minor changes in urlbar when using zen-floating-urlbar (#9120 )	2025-06-23 06:56:00 +02:00
mr. m	400598a0b1	feat: Removed legacy stylesheets config and implement c++ mods backen… (#9131 )	2025-06-23 00:07:39 +02:00
Shinwoo PARK	dc6f46695a	fix: Fix tab drag indicator orientation to horizontal on collapsed toolbar (#9126 )	2025-06-22 17:07:36 +02:00
octaviusz	48f036d6a0	Fix TypeError: can't access property "pinned", group is undefined (#9116 )	2025-06-21 18:36:33 +02:00
Mr. M	3a317daa87	Merge branch 'dev' of https://github.com/zen-browser/desktop into dev	2025-06-21 17:30:08 +02:00
Mr. M	8e67690f82	fix: Fixed tab icon URL being incorrect when unloading, b=no-bug, c=tabs	2025-06-21 17:30:03 +02:00
mr. m	1594c5c08f	fix: Fixed copy url for firefox 140.0, b=no-bug, c=common	2025-06-21 11:55:31 +02:00
mr. m	fd4c96e4b3	feat: Make the browser window have a sidebar appearance, b=no-bug, c=common	2025-06-21 11:18:34 +02:00
Mr. M	37bd317391	test: Added tests for the welcome page, b=no-bug, c=tests, glance, welcome	2025-06-21 02:05:55 +02:00
Mr. M	2c53b4a8c5	chore: [no-lint] Added blacksmith logo to readme, b=no-bug, c=no-component	2025-06-20 23:45:17 +02:00
Mr. M	5040df2416	chore: [no-lint] Fix action runners for blacksmith, b=no-bug, c=workflows	2025-06-20 14:13:23 +02:00
blacksmith-sh[bot]	8bc4c97215	.github/workflows: Migrate workflows to Blacksmith runners (#9104 ) Co-authored-by: blacksmith-sh[bot] <157653362+blacksmith-sh[bot]@users.noreply.github.com> Co-authored-by: mr. m <91018726+mr-cheffy@users.noreply.github.com>	2025-06-20 14:02:23 +02:00
mr. m	a435d4ec18	feat: Added support for linear gradient dithering, b=no-bug, c=no-component	2025-06-20 01:58:09 +02:00
mr. m	bed6fa7eca	Updated to firfox RC `140.0` (#9092 )	2025-06-18 17:16:40 +02:00
mr. m	dcd032856b	fix: Fixed invalid targets being used on workspace labels, b=no-bug, c=tabs, workspaces	2025-06-16 19:44:14 +02:00
mr. m	bf95bc7078	feat: Wait one more frame before marking the sidebar as hover, b=no-bug, c=tabs, workspaces	2025-06-16 12:09:34 +02:00
mr. m	ab2a982bf0	fix: Fixed context menu not updating when right clicking the workspace icon, b=no-bug, c=workspaces	2025-06-16 11:45:08 +02:00
mr. m	5cd1f77e2d	feat: Insert workspace names on the context menu for easier switch, b=no-bug, c=workspaces	2025-06-16 01:15:11 +02:00
				`@@ -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="M17.25,8.25h-1.292c-.146-1.369-.69-2.619-1.512-3.637l1.583-1.583c.293-.293,.293-.768,0-1.061s-.767-.294-1.061,0l-1.583,1.583c-1.018-.821-2.268-1.365-3.636-1.511V.75c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75v1.292c-1.368,.146-2.618,.69-3.636,1.511l-1.583-1.583c-.293-.293-.768-.293-1.061,0s-.293,.768,0,1.061l1.583,1.583c-.821,1.018-1.365,2.268-1.511,3.637H.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h1.292c.146,1.369,.69,2.619,1.511,3.637l-1.583,1.583c-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22,.191,0,.384-.073,.53-.22l1.583-1.583c1.018,.821,2.268,1.365,3.636,1.511v1.292c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.292c1.368-.146,2.618-.69,3.636-1.511l1.583,1.583c.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c.293-.293,.293-.768,0-1.061l-1.583-1.583c.821-1.018,1.365-2.268,1.512-3.637h1.292c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-11.25,1.75c-.552,0-1-.448-1-1s.448-1,1-1,1,.448,1,1-.448,1-1,1Zm3,2c-.828,0-1.5-.672-1.5-1.5,0-.276,.224-.5,.5-.5h2c.276,0,.5,.224,.5,.5,0,.828-.672,1.5-1.5,1.5Zm2-3c0-.552,.448-1,1-1s1,.448,1,1-.448,1-1,1-1-.448-1-1Z" fill="currentColor"></path></svg>
				`@@ -0,0 +1 @@`
				`https://cdn.jsdelivr.net/npm/animejs/+esm: v4.0.2`
				`@@ -1 +0,0 @@`
				`https://cdn.jsdelivr.net/npm/motion@latest/+esm: v12.16.0`