Update ZenStartup.mjs, zen-components, zen-theme.css, and zen-urlbar.css

Update zen-browser.js

.gitattributes

@@ -1,2 +1 @@
-
 *.patch linguist-language=C++

.github/FUNDING.yml

@@ -1,3 +1,2 @@
-
 patreon: zen_browser
 ko_fi: zen_browser

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,5 @@
 name: Bug Report
 description: File a bug report
-labels: [Triage]
 body:
   - type: markdown
     attributes:

.github/workflows/alpha.yml

@@ -11,11 +11,10 @@ on:
       update_version:
         description: 'Update the version number'
         required: false
-        default: true
+        default: false
         type: 'boolean'
 
 jobs:
-
   build-data:
     permissions:
       contents: write
@@ -128,9 +127,7 @@ jobs:
             exit 1
           fi
 
-
   source:
-    if: false
     permissions:
       contents: write
     runs-on: ubuntu-latest
@@ -310,8 +307,10 @@ jobs:
     if: ${{ github.event.inputs.create_release == 'true' }}
     permissions: write-all
     name: Release
-    needs: [build-data, linux, windows-step-3, check-release, mac, appimage]
+    needs: [build-data, linux, windows-step-3, check-release, mac, appimage, source]
     runs-on: ubuntu-latest
+    environment:
+      name: Deploy-Release
 
     steps:
       - uses: actions/checkout@v4
@@ -320,7 +319,8 @@ jobs:
           token: ${{ secrets.DEPLOY_KEY }}
 
       - name: Git Pull
-        run: git pull
+        run: |
+          git pull
 
       - uses: actions/download-artifact@v4
 
@@ -341,8 +341,8 @@ jobs:
           cp -a ../linux_update_manifest_generic/.  updates/
           cp -a ../linux_update_manifest_specific/.  updates/
 
-          cp -a ../windows_update_manifest_generic/.  updates/
+          cp -a ../.github/workflows/object/windows-x64-signed-generic/update_manifest/.  updates/
-          cp -a ../windows_update_manifest_specific/.  updates/
+          cp -a ../.github/workflows/object/windows-x64-signed-specific/update_manifest/.  updates/
 
           cp -a ../macos_update_manifest_aarch64/.  updates/
           cp -a ../macos_update_manifest_x64/.  updates/
@@ -369,16 +369,16 @@ jobs:
             zen-generic.AppImage.zsync
             zen-specific.AppImage
             zen-specific.AppImage.zsync
-            zen.win-generic.zip
+            .github/workflows/object/windows-x64-signed-generic/zen.win-generic.zip
-            zen.win-specific.zip
+            .github/workflows/object/windows-x64-signed-specific/zen.win-specific.zip
             linux.mar
             linux-generic.mar
-            windows.mar
+            .github/workflows/object/windows-x64-signed-generic/windows-generic.mar
-            windows-generic.mar
+            .github/workflows/object/windows-x64-signed-specific/windows.mar
             macos-x64.mar
             macos-aarch64.mar
-            zen.installer.exe
+            .github/workflows/object/windows-x64-signed-specific/zen.installer.exe
-            zen.installer-generic.exe
+            .github/workflows/object/windows-x64-signed-generic/zen.installer-generic.exe
             zen.macos-x64.dmg
             zen.macos-aarch64.dmg
 
@@ -398,6 +398,7 @@ jobs:
 
       - name: Install dependencies
         run: |
+          git pull
           sudo apt-get update
           npm install
 
@@ -428,7 +429,6 @@ jobs:
           # output the version to the file
           echo -n ${{ needs.build-data.outputs.version }} > ./flatpak/version
 
-
       - uses: stefanzweifel/git-auto-commit-action@v4
         with:
           commit_message: '[release]: Update flatpak manifest'
@@ -522,41 +522,22 @@ jobs:
     permissions: write-all
     name: Homebrew release
     needs: [release, mac, build-data]
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
 
     steps:
-      - name: Clone repo
+      - name: Set up Homebrew
-        uses: actions/checkout@v4
+        uses: Homebrew/actions/setup-homebrew@master
         with:
-          token: ${{ secrets.DEPLOY_KEY }}
+          cask: true
+          test-bot: false
 
       - name: Setup git
-        run: |
+        uses: Homebrew/actions/git-user-config@master
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "github-actions[bot]@users.noreply.github.com"
-
-      - name: Download macOS ARM build 
-        uses: actions/download-artifact@v4
         with:
-          name: zen.macos-aarch64.dmg
+          username: zen-browser-bot
 
-      - name: Download macOS x64 build
+      - name: Bump zen-browser
-        uses: actions/download-artifact@v4
+        uses: Homebrew/actions/bump-packages@master
         with:
-          name: zen.macos-x64.dmg
+          token: ${{ secrets.DEPLOY_KEY }}
-
+          casks: zen-browser
-      - name: Update zen-browser Cask
-        run: sh .github/workflows/src/update-homebrew.sh ${{ needs.build-data.outputs.version }}
- 
-      - name: Clean up 
-        run: | 
-          rm -rf zen.macos-x64.dmg
-          rm -rf zen.macos-aarch64.dmg
-
-      - uses: stefanzweifel/git-auto-commit-action@v4
-        if: ${{ github.event.inputs.update_version == 'true' }}
-        with:
-          commit_message: 🔖 Update version to ${{ steps.data.outputs.version }} for homebrew!
-          commit_user_name: Zen Browser Robot
-          commit_user_email: zen-browser-bot@users.noreply.github.com
-

.github/workflows/linux-alpha-build.yml

@@ -1,4 +1,4 @@
-
+name: Linux Alpha Build
 on:
   workflow_call:
     inputs:
@@ -44,10 +44,10 @@ jobs:
 
       - name: Install system dependencies
         run: |
+          set -x
           sudo apt-get update --fix-missing
           sudo apt-get update
           sudo apt-get install dos2unix yasm nasm build-essential libgtk2.0-dev libpython3-dev m4 uuid libasound2-dev libcurl4-openssl-dev libdbus-1-dev libdrm-dev libdbus-glib-1-dev libdbus-glib-1-dev libgtk-3-dev libpulse-dev libx11-xcb-dev libxt-dev xvfb lld llvm
-          pip install pycairo testresources
 
       - name: Configure sccache
         uses: actions/github-script@v7
@@ -131,7 +131,6 @@ jobs:
       - name: Upload binary
         uses: actions/upload-artifact@v4
         with:
-
           name: zen.linux-${{ matrix.generic == true && 'generic' || 'specific' }}.tar.bz2
           path: ./zen.linux-${{ matrix.generic == true && 'generic' || 'specific' }}.tar.bz2
 

.github/workflows/macos-alpha-build.yml

@@ -1,4 +1,4 @@
-
+name: macOS Alpha Build
 on:
   workflow_call:
     inputs:
@@ -127,37 +127,29 @@ jobs:
           p12-file-base64: ${{ secrets.macOS_CERTIFICATES_P12_For_App_BASE64 }}
           p12-password: ${{ secrets.macOS_CERTIFICATES_P12_PASSWORD }}
 
-
-      - name: Decode .p12 file
-        id: decode_p12
-        run: |
-          echo "$P12_BASE64" | base64 --decode > certificate.p12
-          echo "$P12_PASSWORD" > certificate.p12.password
-        env:
-          P12_BASE64: ${{ secrets.macOS_CERTIFICATES_P12_For_App_BASE64 }}
-          P12_PASSWORD: ${{ secrets.macOS_CERTIFICATES_P12_PASSWORD }}
-
-      - name: Install rcodesign
-        run: |
-          cargo install --git https://github.com/indygreg/apple-platform-rs --branch main --bin rcodesign apple-codesign
-          export PATH="$HOME/.cargo/bin:$PATH"
-
       - name: Package
         env:
           SURFER_COMPAT: ${{ matrix.arch == 'x64' }}
-        run: pnpm package
+        run: |
+          export MACOS_APPLE_DEVELOPER_ID="${{ secrets.macOS_AppleDeveloperId }}"
+          pnpm package
 
       - name: Rename artifacts
         run: |
-          mv ./dist/*.dmg "zen.macos-${{ matrix.arch }}.dmg"
           mv ./dist/output.mar macos-${{ matrix.arch }}.mar
 
-          rm -rf certificate.p12
-          rm -rf certificate.p12.password
-
       - name: Sign to .dmg
         run: |
+          set -ex
+          hdiutil convert ./dist/*.dmg -format UDZO -imagekey zlib-level=9 -o zen.macos-${{ matrix.arch }}.dmg
+          xattr -cr zen.macos-${{ matrix.arch }}.dmg
           codesign -s "${{ secrets.macOS_AppleDeveloperId }}" zen.macos-${{ matrix.arch }}.dmg
+          xcrun notarytool submit "zen.macos-${{ matrix.arch }}.dmg" \
+            --apple-id "${{ secrets.macOS_AppleAccountId }}" \
+            --team-id "${{ secrets.macOS_AppleDeveloperIdTeamId }}" \
+            --password "${{ secrets.macOS_AppleDeveloperIdPassword }}" \
+            --wait
+          xcrun stapler staple "zen.macos-${{ matrix.arch }}.dmg"
 
       - name: Upload artifact
         uses: actions/upload-artifact@v4

.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha-generic/update.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<updates>
+  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001725">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows-generic.mar" hashFunction="sha512" hashValue="972023778514d694851f4e1ed4dc25d6a76b99873fb5e2ccaee39cfd1e16831e860fe8d5b8a79609126e5f3a30af493ad91bebc33c5e6c9cff03933bb48d50bf" size="72275244"/>
+  </update>
+</updates>

.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc/alpha-generic/update.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<updates>
+  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001725">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows-generic.mar" hashFunction="sha512" hashValue="972023778514d694851f4e1ed4dc25d6a76b99873fb5e2ccaee39cfd1e16831e860fe8d5b8a79609126e5f3a30af493ad91bebc33c5e6c9cff03933bb48d50bf" size="72275244"/>
+  </update>
+</updates>

.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha/update.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<updates>
+  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001715">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows.mar" hashFunction="sha512" hashValue="94a67207ea7c6cd9833397a339d647b4c8498d04976133f409aad06eb77e397fc5d3e6a325133d39dfa7d0a73a198f35954563dcbed1c2de089700ff1baf37b7" size="72228768"/>
+  </update>
+</updates>

.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc/alpha/update.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<updates>
+  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001715">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows.mar" hashFunction="sha512" hashValue="94a67207ea7c6cd9833397a339d647b4c8498d04976133f409aad06eb77e397fc5d3e6a325133d39dfa7d0a73a198f35954563dcbed1c2de089700ff1baf37b7" size="72228768"/>
+  </update>
+</updates>

.github/workflows/src/update-homebrew.sh

@@ -1,8 +0,0 @@
-
-latest_version=$1
-sed -i "s/version(.*)/version('${latest_version}')/" ./Casks/zen-browser.rb
-
-sha_x64=$(shasum -a 256 zen.macos-x64.dmg)
-sha_arm=$(shasum -a 256 zen.macos-aarch64.dmg)
-
-sed -i "s/sha256(.*)/sha256(arm:'${sha_arm}', intel:'${sha_x64}')/" ./Casks/zen-browser.rb

.github/workflows/stale.yml

@@ -0,0 +1,29 @@
+name: Close inactive issues
+on:
+  schedule:
+    - cron: '0 0 * * *'
+  workflow_dispatch:
+
+jobs:
+  close-issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@v5
+        with:
+          days-before-issue-stale: 30
+          days-before-issue-close: 14
+          stale-issue-label: 'stale'
+          stale-issue-message: |
+            This issue is stale because it has been open for 30 days with no activity.
+
+            Please close this issue if you feel it is no longer relevant, or comment if you have more information to share.
+          close-issue-message: |
+            This issue was closed because it has been inactive for 14 days since being marked as stale.
+
+            If you think this issue should remain open, please comment with a request for it to be re-opened or open a new issue.
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          repo-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/windows-alpha-build.yml

@@ -1,4 +1,4 @@
-
+name: Windows Alpha Build
 on:
   workflow_call:
     inputs:
@@ -59,7 +59,7 @@ jobs:
       - name: Download
         run: pnpm surfer download
 
-      - name: "win-cross Cache"
+      - name: 'win-cross Cache'
         env:
           SEGMENT_DOWNLOAD_TIMEOUT_MINS: 5
         id: cache-win-cross
@@ -197,13 +197,6 @@ jobs:
           mv ./dist/output.mar windows${{ matrix.generic == true && '-generic' || '' }}.mar
           mv ./dist/zen.installer.exe ./zen.installer${{ matrix.generic == true && '-generic' || '' }}.exe
 
-      - name: Upload artifact
-        uses: actions/upload-artifact@v4
-        if: ${{ !inputs.generate-gpo }}
-        with:
-          name: zen.win-${{ matrix.generic == true && 'generic' || 'specific' }}.zip
-          path: ./zen.win-${{ matrix.generic == true && 'generic' || 'specific' }}.zip
-
       - name: Upload PGO build
         uses: actions/upload-artifact@v4
         if: ${{ inputs.generate-gpo }}
@@ -211,30 +204,16 @@ jobs:
           name: ${{ matrix.generic == true && 'generic' || 'specific' }}-${{ inputs.profile-data-path-archive }}
           path: ./zen.win64-pgo-stage-1.zip
 
-      - name: Upload mar
+      - name: Remove symlinks from obj folder
-        uses: actions/upload-artifact@v4
         if: ${{ !inputs.generate-gpo }}
-        with:
+        run: |
-          name: windows${{ matrix.generic == true && '-generic' || '' }}.mar
+          set -x
-          path: ./windows${{ matrix.generic == true && '-generic' || '' }}.mar
+          find engine/obj-x86_64-pc-windows-msvc/ -type l -delete
 
-      - name: Upload installer
+      - name: Upload dist object
-        uses: actions/upload-artifact@v4
         if: ${{ !inputs.generate-gpo }}
-        with:
-          name: zen.installer${{ matrix.generic == true && '-generic' || '' }}.exe
-          path: ./zen.installer${{ matrix.generic == true && '-generic' || '' }}.exe
-
-      - name: Upload installer stub
         uses: actions/upload-artifact@v4
-        if: ${{ !inputs.generate-gpo && false }}
         with:
-          name: zen.installer.pretty.exe
+          name: windows-x64-obj-${{ matrix.generic == true && 'generic' || 'specific' }}
-          path: ./dist/zen.installer.pretty.exe
+          path: engine/obj-x86_64-pc-windows-msvc/
           
-      - name: Upload update manifests
-        uses: actions/upload-artifact@v4
-        if: ${{ !inputs.generate-gpo }}
-        with:
-          name: windows_update_manifest_${{ matrix.generic == true && 'generic' || 'specific' }}
-          path: ./dist/update

.github/workflows/windows-profile-build.yml

@@ -1,4 +1,4 @@
-
+name: Windows PGO Builds
 on:
   workflow_call:
     inputs:

.gitignore

@@ -7,3 +7,5 @@ node_modules/
 
 __pycache__/
 dist/
+
+windsign-temp/

.husky/pre-commit

@@ -0,0 +1 @@
+# npx lint-staged

.prettierignore

@@ -0,0 +1,12 @@
+engine/
+
+**/*.html
+**/*.xhtml
+**/*.inc.xhtml
+
+**/*.svg
+
+src/browser/app/profile/*.js
+pnpm-lock.yaml
+
+**/engine/

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "bracketSameLine": true,
+  "endOfLine": "lf",
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "jsxSingleQuote": false,
+  "semi": true,
+  "printWidth": 128,
+  "plugins": []
+}

.vscode/settings.json

@@ -17,6 +17,14 @@
     "string": "cpp",
     "string_view": "cpp",
     "span": "cpp",
-    "vector": "cpp"
+    "vector": "cpp",
+    "charconv": "cpp",
+    "chrono": "cpp",
+    "optional": "cpp",
+    "format": "cpp",
+    "ratio": "cpp",
+    "system_error": "cpp",
+    "regex": "cpp",
+    "type_traits": "cpp"
   }
 }

AppDir/distribution/policies.json

@@ -5,4 +5,4 @@
     "ManualAppUpdateOnly": true,
     "BackgroundAppUpdate": false
   }
- }
+}

Casks/zen-browser.rb

@@ -1,26 +0,0 @@
-cask("zen-browser") do
-  arch(arm: "aarch64", intel: "x64")
-  version("1.0.0-a.34")
-  sha256(arm: "6cc6e72c4a6a11d0139489d438ccf811715e170eebc01da739da32ace2580747", intel: "b9cb48f21a4ee39f3f3ae2361b9b0a55ae7219638cf798e1483c0eb8cf4660a6")
-
-  url("https://github.com/zen-browser/desktop/releases/download/#{version}/zen.macos-#{arch}.dmg")
-  name("Zen Browser")
-  desc("Beautifully designed, privacy-focused browser packed with awesome features")
-  homepage("https://zen-browser.app/")
-
-  livecheck do
-    url(:stable)
-    regex(/[0-9].*-a.[0-9]*/i)
-  end
-
-  zap trash: [
-    "~/Library/Preferences/org.mozilla.com.zen.browser.plist",
-    "~/Library/Saved Application State/org.mozilla.com.zen.browser.savedState"
-  ]
-
-  app("Zen Browser.app")
-
-  postflight do
-    system("xattr -c '/Applications/Zen Browser.app/'")
-  end
-end

README.md

@@ -1,6 +1,6 @@
 <div align="center">
 <picture>
-    <img src="./zen-black.svg" width="128px">
+    <img src="./docs/assets/zen-black.svg" width="128px">
 </picture>
 </div>
 <h1 align="center">
@@ -9,9 +9,9 @@ Zen Browser
 
 Experience tranquillity while browsing the web without people tracking you!
 
-* [Website](https://www.zen-browser.app)
+- [Website](https://zen-browser.app)
-* [Download](https://www.zen-browser.app/download)
+- [Download](https://zen-browser.app/download)
-* [Release Notes](https://www.zen-browser.app/release-notes/latest)
+- [Release Notes](https://zen-browser.app/release-notes/latest)
 
 [![Downloads](https://img.shields.io/github/downloads/zen-browser/desktop/total.svg)](https://github.com/zen-browser/desktop/releases)
 [![Crowdin](https://badges.crowdin.net/zen-browser/localized.svg)](https://crowdin.com/project/zen-browser)
@@ -26,24 +26,66 @@ Experience tranquillity while browsing the web without people tracking you!
 
 Zen is currently built using firefox version `130.0`!
 
-* Check out the latest [release notes](https://www.zen-browser.app/release-notes)!
+- Check out the latest [release notes](https://zen-browser.app/release-notes)!
 
 # Performance
 
 Zen is built with performance in mind, and we have optimized the browser to be as fast as possible!
 
-* Checkout the latest [performance benchmarks](https://docs.zen-browser.app/benchmarks)!
+- Checkout the latest [performance benchmarks](https://docs.zen-browser.app/benchmarks)!
 
 # Installation
 
-## MacOS
+## Supported Operating Systems
-You can install the Zen Browser using Homebrew: 
+
+Zen is available for Linux, macOS, and Windows. You can download the latest version from the official website at [zen-browser.app](https://zen-browser.app/download), or from the [GitHub Releases](https://github.com/zen-browser/desktop/releases) page.
+
+### Windows
+
+#### Winget
+
+- Generic
 
 ```
-brew tap zen-browser/browser https://github.com/zen-browser/desktop.git
+winget install --id Zen-Team.Zen-Browser
-brew install zen-browser
 ```
 
+- Optimized
+
+```
+winget install --id Zen-Team.Zen-Browser.Optimized
+```
+
+#### 
+
+### macOS
+
+- Requires macOS 10.15 or later
+- Available for ARM and Intel architectures
+
+You can also install Zen using Homebrew:
+
+```
+brew install --cask zen-browser
+```
+
+### Linux
+
+#### AppImage
+
+- `zsync` is required for the Update feature of the script below
+
+```
+bash <(curl https://updates.zen-browser.app/appimage.sh)
+```
+
+#### Flatpak
+```
+flatpak install flathub io.github.zen_browser.zen
+```
+
+To upgrade the browser to a newer version, use the embedded update functionality in `About Zen`.
+
 # Core Components
 
 Some components used by @zen-browser as an attempt to make firefox forks a better place. You can find them [here](https://github.com/zen-browser/components).
@@ -107,4 +149,3 @@ Zen couldn't be in its current state without the help of these amazing projects!
    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=zen-browser/desktop&type=Date" />
  </picture>
 </a>
-

build/codesign/codesign.bash

@@ -0,0 +1,169 @@
+#!/bin/bash
+#
+# 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 https://mozilla.org/MPL/2.0/.
+#
+# Runs codesign commands to codesign a Firefox .app bundle and enable macOS
+# Hardened Runtime. Intended to be manually run by developers working on macOS
+# 10.14+ who want to enable Hardened Runtime for manual testing. This is
+# provided as a stop-gap until automated build tooling is available that signs
+# binaries with a certificate generated during builds (bug 1522409). This
+# script requires macOS 10.14 because Hardened Runtime is only available for
+# applications running on 10.14 despite support for the codesign "-o runtime"
+# option being available in 10.13.6 and newer.
+#
+# The script requires an identity string (-i option) from an Apple Developer
+# ID certificate. This can be found in the macOS KeyChain after configuring an
+# Apple Developer ID certificate.
+#
+# Example usage on macOS 10.14:
+#
+#   $ ./mach build
+#   $ ./mach build package
+#   $ open </PATH/TO/DMG/FILE.dmg>
+#   <Drag Nightly.app to ~>
+#   $ ./security/mac/hardenedruntime/codesign.bash \
+#         -a ~/Nightly.app \
+#         -i <MY-IDENTITY-STRING> \
+#         -b security/mac/hardenedruntime/browser.developer.entitlements.xml
+#         -p security/mac/hardenedruntime/plugin-container.developer.entitlements.xml
+#   $ open ~/Nightly.app
+#
+
+usage ()
+{
+  echo  "Usage: $0 "
+  echo  "    -a <PATH-TO-BROWSER.app>"
+  echo  "    -i <IDENTITY>"
+  echo  "    -b <ENTITLEMENTS-FILE>"
+  echo  "    -p <CHILD-ENTITLEMENTS-FILE>"
+  echo  "    [-o <OUTPUT-DMG-FILE>]"
+  exit -1
+}
+
+# Make sure we are running on macOS with the sw_vers command available.
+SWVERS=/usr/bin/sw_vers
+if [ ! -x ${SWVERS} ]; then
+    echo "ERROR: macOS 10.14 or later is required"
+    exit -1
+fi
+
+# Require macOS 10.14 or newer.
+OSVERSION=`${SWVERS} -productVersion|sed -En 's/[0-9]+\.([0-9]+)\.[0-9]+/\1/p'`;
+if [ ${OSVERSION} \< 14 ]; then
+    echo "ERROR: macOS 10.14 or later is required"
+    exit -1
+fi
+
+while getopts "a:i:b:o:p:" opt; do
+  case ${opt} in
+    a ) BUNDLE=$OPTARG ;;
+    i ) IDENTITY=$OPTARG ;;
+    b ) BROWSER_ENTITLEMENTS_FILE=$OPTARG ;;
+    p ) PLUGINCONTAINER_ENTITLEMENTS_FILE=$OPTARG ;;
+    o ) OUTPUT_DMG_FILE=$OPTARG ;;
+    \? ) usage; exit -1 ;;
+  esac
+done
+
+if [ -z "${BUNDLE}" ] ||
+   [ -z "${IDENTITY}" ] ||
+   [ -z "${PLUGINCONTAINER_ENTITLEMENTS_FILE}" ] ||
+   [ -z "${BROWSER_ENTITLEMENTS_FILE}" ]; then
+    usage
+    exit -1
+fi
+
+if [ ! -d "${BUNDLE}" ]; then
+  echo "Invalid bundle. Bundle should be a .app directory"
+  usage
+  exit -1
+fi
+
+if [ ! -e "${PLUGINCONTAINER_ENTITLEMENTS_FILE}" ]; then
+  echo "Invalid entitlements file"
+  usage
+  exit -1
+fi
+
+if [ ! -e "${BROWSER_ENTITLEMENTS_FILE}" ]; then
+  echo "Invalid entitlements file"
+  usage
+  exit -1
+fi
+
+# DMG file output flag is optional
+if [ ! -z "${OUTPUT_DMG_FILE}" ] &&
+   [ -e "${OUTPUT_DMG_FILE}" ]; then
+  echo "Output dmg file ${OUTPUT_DMG_FILE} exists. Please delete it first."
+  usage
+  exit -1
+fi
+
+echo "-------------------------------------------------------------------------"
+echo "bundle:                              $BUNDLE"
+echo "identity:                            $IDENTITY"
+echo "browser entitlements file:           $BROWSER_ENTITLEMENTS_FILE"
+echo "plugin-container entitlements file:  $PLUGINCONTAINER_ENTITLEMENTS_FILE"
+echo "output dmg file (optional):          $OUTPUT_DMG_FILE"
+echo "-------------------------------------------------------------------------"
+
+set -x
+
+# Clear extended attributes which cause codesign to fail
+xattr -cr "${BUNDLE}"
+
+# Sign these binaries first. Signing of some binaries has an ordering
+# requirement where other binaries must be signed first.
+codesign --force -o runtime --verbose --sign "$IDENTITY" \
+"${BUNDLE}/Contents/Library/LaunchServices/org.mozilla.updater" \
+"${BUNDLE}/Contents/MacOS/XUL" \
+"${BUNDLE}/Contents/MacOS/pingsender" \
+"${BUNDLE}/Contents/MacOS/*.dylib" \
+
+codesign --force -o runtime --verbose --sign "$IDENTITY" --deep \
+"${BUNDLE}"/Contents/MacOS/updater.app
+
+# Sign zen main executable
+codesign --force -o runtime --verbose --sign "$IDENTITY" --deep \
+--entitlements ${BROWSER_ENTITLEMENTS_FILE} \
+"${BUNDLE}"/Contents/MacOS/zen
+
+# Sign Library/LaunchServices
+codesign --force -o runtime --verbose --sign "$IDENTITY" --deep \
+"${BUNDLE}"/Contents/Library/LaunchServices/org.mozilla.updater
+
+# Sign gmp-clearkey files
+find "${BUNDLE}"/Contents/Resources/gmp-clearkey -type f -exec \
+codesign --force -o runtime --verbose --sign "$IDENTITY" {} \;
+
+# Sign the main bundle
+codesign --force -o runtime --verbose --sign "$IDENTITY" \
+--entitlements ${BROWSER_ENTITLEMENTS_FILE} "${BUNDLE}"
+
+# Sign the plugin-container bundle with deep
+codesign --force -o runtime --verbose --sign "$IDENTITY" --deep \
+--entitlements ${PLUGINCONTAINER_ENTITLEMENTS_FILE} \
+"${BUNDLE}"/Contents/MacOS/plugin-container.app
+
+# Validate
+codesign -vvv --deep --strict "${BUNDLE}"
+
+# Create a DMG
+if [ ! -z "${OUTPUT_DMG_FILE}" ]; then
+  DISK_IMAGE_DIR=`mktemp -d`
+  TEMP_FILE=`mktemp`
+  TEMP_DMG=${TEMP_FILE}.dmg
+  NAME=`basename "${BUNDLE}"`
+
+  ditto "${BUNDLE}" "${DISK_IMAGE_DIR}/${NAME}"
+  hdiutil create -size 400m -fs HFS+ \
+    -volname Firefox -srcfolder "${DISK_IMAGE_DIR}" "${TEMP_DMG}"
+  hdiutil convert -format UDZO \
+    -o "${OUTPUT_DMG_FILE}" "${TEMP_DMG}"
+
+  rm ${TEMP_FILE}
+  rm ${TEMP_DMG}
+  rm -rf "${DISK_IMAGE_DIR}"
+fi

build/winsign/sign.ps1

@@ -0,0 +1,103 @@
+param(
+    [string][Parameter(Mandatory=$true)]$SignIdentity
+)
+
+$ErrorActionPreference = "Stop"
+
+echo "Preparing environment"
+mkdir windsign-temp -ErrorAction SilentlyContinue
+
+echo "Please UNZIP the generic and specific artifacts into windsign-temp"
+echo "With the following filenames:"
+echo "  - $pwd\windsign-temp\windows-x64-obj-specific"
+echo "  - $pwd\windsign-temp\windows-x64-obj-generic"
+Read-Host "Press Enter to continue when ready"
+mkdir engine\obj-x86_64-pc-windows-msvc\ -ErrorAction SilentlyContinue
+mkdir .\.github\workflows\object\ -ErrorAction SilentlyContinue
+
+pnpm surfer ci --brand alpha
+
+function SignAndPackage($name) {
+    echo "Executing on $name"
+    rmdir .\dist -Recurse -ErrorAction SilentlyContinue
+    rmdir engine\obj-x86_64-pc-windows-msvc\ -Recurse -ErrorAction SilentlyContinue
+    cp windsign-temp\windows-x64-obj-$name engine\obj-x86_64-pc-windows-msvc\ -Recurse
+    echo "Signing $name"
+
+    # Collect all .exe and .dll files into a list
+    $files = Get-ChildItem engine\obj-x86_64-pc-windows-msvc\ -Recurse -Include *.exe
+    $files += Get-ChildItem engine\obj-x86_64-pc-windows-msvc\ -Recurse -Include *.dll
+
+    signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha1 /v $files
+    echo "Packaging $name"
+    $env:SURFER_SIGNING_MODE="sign"
+    $env:MAR="$PWD\\build\\winsign\\mar.exe"
+    if ($name -eq "generic") {
+        $env:SURFER_COMPAT="true"
+    } else {
+        rm env:SURFER_COMPAT -ErrorAction SilentlyContinue
+    }
+
+    echo "Compat Mode? $env:SURFER_COMPAT"
+    pnpm surfer package --verbose
+
+    # In the release script, we do the following:
+    #  tar -xvf .github/workflows/object/windows-x64-signed-generic.tar.gz -C windows-x64-signed-generic
+    # We need to create a tar with the same structure and no top-level directory
+    # Inside, we need:
+    #  - update_manifest/*
+    #  - windows.mar or windows-generic.mar
+    #  - zen.installer.exe or zen.installer-generic.exe
+    #  - zen.win-generic.zip or zen.win-specific.zip
+    echo "Creating tar for $name"
+    rm .\windsign-temp\windows-x64-signed-$name -Recurse -ErrorAction SilentlyContinue
+    mkdir windsign-temp\windows-x64-signed-$name
+    
+    # Move the MAR, add the `-generic` suffix if needed
+    if ($name -eq "generic") {
+        mv .\dist\output.mar windsign-temp\windows-x64-signed-$name\windows-generic.mar
+    } else {
+        mv .\dist\output.mar windsign-temp\windows-x64-signed-$name\windows.mar
+    }
+
+    # Move the installer
+    if ($name -eq "generic") {
+        mv .\dist\zen.installer.exe windsign-temp\windows-x64-signed-$name\zen.installer-generic.exe
+    } else {
+        mv .\dist\zen.installer.exe windsign-temp\windows-x64-signed-$name\zen.installer.exe
+    }
+
+    # Move the zip
+    mv (Get-Item .\dist\*.en-US.win64.zip) windsign-temp\windows-x64-signed-$name\zen.win-$name.zip
+
+    # Extract the zip, sign everything inside, and repackage it
+    Expand-Archive -Path windsign-temp\windows-x64-signed-$name\zen.win-$name.zip -DestinationPath windsign-temp\windows-x64-signed-$name\zen.win-$name
+    rm windsign-temp\windows-x64-signed-$name\zen.win-$name.zip
+    $files = Get-ChildItem windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -Include *.exe
+    $files += Get-ChildItem windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -Include *.dll
+    signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha1 /v $files
+    Compress-Archive -Path windsign-temp\windows-x64-signed-$name\zen.win-$name -DestinationPath windsign-temp\windows-x64-signed-$name\zen.win-$name.zip
+    rmdir windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -ErrorAction SilentlyContinue
+
+    # Move the manifest
+    mv .\dist\update\. windsign-temp\windows-x64-signed-$name\update_manifest
+
+    echo "Invoking tar for $name"
+    # note: We need to sign it into a parent folder, called windows-x64-signed-$name
+    rmdir .\.github\workflows\object\windows-x64-signed-$name -Recurse -ErrorAction SilentlyContinue
+    mv .\windsign-temp\windows-x64-signed-$name .\.github\workflows\object\windows-x64-signed-$name -Force
+
+    echo "Finished $name"
+}
+
+SignAndPackage specific
+SignAndPackage generic
+
+# Cleaning up
+
+echo "All done!"
+echo "All the artifacts (Generic and Specific) are signed and packaged, get a rest now!"
+Read-Host "Press Enter to continue"
+
+echo "Cleaning up" 
+rmdir windsign-temp -Recurse -ErrorAction SilentlyContinue

configs/common/mozconfig

@@ -90,12 +90,11 @@ ac_add_options --enable-jxl
 ac_add_options --enable-av1
 ac_add_options --enable-eme=widevine
 
-ac_add_options --allow-addon-sideload
 ac_add_options --with-unsigned-addon-scopes=app,system
 
-mk_add_options MOZ_DATA_REPORTING=0
+mk_add_options MOZ_DATA_REPORTING=
-mk_add_options MOZ_SERVICES_HEALTHREPORT=0
+mk_add_options MOZ_SERVICES_HEALTHREPORT=
-mk_add_options MOZ_TELEMETRY_REPORTING=0
+mk_add_options MOZ_TELEMETRY_REPORTING=
 
 # Allow loading unsigned extensions
 export MOZ_REQUIRE_SIGNING=

configs/linux/mozconfig

@@ -42,9 +42,9 @@ if test "$ZEN_RELEASE"; then
         ac_add_options --enable-wasm-avx
         ac_add_options --enable-optimize="-O3 -march=x86-64-v3 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -maes -mpopcnt -mpclmul"
         
-        export CFLAGS="$CFLAGS -O3 -ffp-contract=fast -march=x86-64-v3 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -maes -mpopcnt -mpclmul"     
+        export CFLAGS="$CFLAGS -O3 -ffp-contract=fast -march=x86-64-v3 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -mavx2 -mfma -maes -mpopcnt -mpclmul"     
-        export CPPFLAGS="$CPPFLAGS -O3 -ffp-contract=fast -march=x86-64-v3 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -maes -mpopcnt -mpclmul"
+        export CPPFLAGS="$CPPFLAGS -O3 -ffp-contract=fast -march=x86-64-v3 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -mavx2 -mfma -maes -mpopcnt -mpclmul"
-        export CXXFLAGS="$CXXFLAGS -O3 -flto=thin -ffp-contract=fast -march=x86-64-v3 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -maes -mpopcnt -mpclmul"
+        export CXXFLAGS="$CXXFLAGS -O3 -flto=thin -ffp-contract=fast -march=x86-64-v3 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -mavx2 -mfma -maes -mpopcnt -mpclmul"
         export LDFLAGS="$LDFLAGS -Wl,-O3 -Wl,-mllvm,-fp-contract=fast -march=x86-64-v3"
         export RUSTFLAGS="$RUSTFLAGS -C target-cpu=x86-64-v3 -C target-feature=+sse4.1 -C target-feature=+avx2 -C codegen-units=1 -Clink-args=--icf=safe"
     fi

configs/macos/mozconfig

@@ -26,6 +26,9 @@ else
 
     ac_add_options --enable-optimize="-O3 -mcpu=apple-m1 -march=armv8.3-a+simd"
 
+    # As of Clang 13, the default is -mcpu=apple-m1 when using a aarch64-apple-macos target,
+    # but we're using apple64-apple-darwin, which defaults to -mcpu=apple-a7, which disables
+    # a bunch of # performance-enabling CPU features.
     export CFLAGS="-O3 -march=armv8.3-a+simd -mcpu=apple-m1"
     export CPPFLAGS="-O3 -march=armv8.3-a+simd -mcpu=apple-m1"
     export CXXFLAGS="-O3 -march=armv8.3-a+simd -mcpu=apple-m1"

configs/windows/mozconfig

@@ -40,14 +40,14 @@ if test "$SURFER_COMPAT" = "true"; then
   export LDFLAGS="-Wl,-O2"
   export RUSTFLAGS="-Clink-args=--icf=safe -C codegen-units=1 -Ctarget-cpu=x86-64"
 else
-  ac_add_options --enable-optimize="-O2 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -maes -ftree-vectorize -Xclang -w"
+  ac_add_options --enable-optimize="-O2 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -mavx2 -mfma -maes -ftree-vectorize -Xclang -w"
   ac_add_options --enable-wasm-avx
 
-  export CFLAGS="-O2 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -maes -march=x86-64-v3"   
+  export CFLAGS="-O2 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -mavx2 -mfma -maes -march=x86-64-v3"   
-  export CPPFLAGS="-O2 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -maes -march=x86-64-v3"
+  export CPPFLAGS="-O2 -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -mavx2 -mfma -maes -march=x86-64-v3"
-  export CXXFLAGS="-O2 -flto=thin -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -maes -march=x86-64-v3"
+  export CXXFLAGS="-O2 -flto=thin -msse3 -mssse3 -msse4.1 -msse4.2 -mavx -mavx2 -mfma -maes -march=x86-64-v3"
   export LDFLAGS="-Wl,-O3 -march=x86-64-v3"
-  export RUSTFLAGS="-Clink-args=--icf=safe -C target-feature=+avx -C codegen-units=1 -Ctarget-cpu=x86-64-v3"    
+  export RUSTFLAGS="-Clink-args=--icf=safe -C target-feature=+avx2 -C codegen-units=1 -Ctarget-cpu=x86-64-v3"    
 fi
 export POLLY="-mllvm -polly -mllvm -polly-2nd-level-tiling -mllvm -polly-loopfusion-greedy -mllvm -polly-pattern-matching-based-opts -mllvm -polly-position=before-vectorizer -mllvm -polly-vectorizer=stripmine"
 export VERBOSE=1

docs/changes.md

@@ -1,15 +1,14 @@
-
 ## Changed things that should be tested each release
 
-* Workspaces
+- Workspaces
-* Sidebar
+- Sidebar
-* Split views
+- Split views
-* Vertical tabs (expanded and not expanded)
+- Vertical tabs (expanded and not expanded)
-* Tab groups
+- Tab groups
-* Welcome Page
+- Welcome Page
-* Overall performance
+- Overall performance
-* Overall stability
+- Overall stability
-* Pinning tabs (Grid layout)
+- Pinning tabs (Grid layout)
-* Overall UX
+- Overall UX
-* Themes Page
+- Themes Page
-* Settings Page
+- Settings Page

docs/key-shortcuts.md

@@ -1,4 +1,3 @@
-
 # Custom Keyboard Shortcuts
 
 ```json

docs/requirements.md

@@ -1,31 +1,30 @@
-
 # Supported CPUs for optimized builds (Windows and Linux)
 
 > If you CPU is not listed, you should use the "Generic" build.
 
-* AMD Family 15h (Excavator)
+- AMD Family 15h (Excavator)
-* AMD Family 17h (Zen)
+- AMD Family 17h (Zen)
-* AMD Family 17h (Zen+)
+- AMD Family 17h (Zen+)
-* AMD Family 17h (Zen 2)
+- AMD Family 17h (Zen 2)
-* AMD Family 19h (Zen 3)
+- AMD Family 19h (Zen 3)
-* Intel 4th Gen Core (Haswell)
+- Intel 4th Gen Core (Haswell)
-* Intel 5th Gen Core (Broadwell)
+- Intel 5th Gen Core (Broadwell)
-* Intel 6th Gen Core (Skylake)
+- Intel 6th Gen Core (Skylake)
-* Intel 7th Gen Core (Kaby Lake)
+- Intel 7th Gen Core (Kaby Lake)
-* Intel 8/9th Gen Core (Coffee Lake)
+- Intel 8/9th Gen Core (Coffee Lake)
-* Intel 10th Gen Core (Comet Lake)
+- Intel 10th Gen Core (Comet Lake)
-* Intel 12th Gen (Alder Lake)
+- Intel 12th Gen (Alder Lake)
-* Intel 13th Gen (Raptor Lake)
+- Intel 13th Gen (Raptor Lake)
-* Intel 14th Gen (Raptor Lake Refresh)
+- Intel 14th Gen (Raptor Lake Refresh)
-* Intel 15th Gen (Lunar / Arrow Lake)
+- Intel 15th Gen (Lunar / Arrow Lake)
-* AMD Family 19h (Zen 4 / Zen 4c)
+- AMD Family 19h (Zen 4 / Zen 4c)
-* AMD Family 1Ah (Zen 5 / Zen 5c)
+- AMD Family 1Ah (Zen 5 / Zen 5c)
-* Intel 6th Gen Core (Skylake X)
+- Intel 6th Gen Core (Skylake X)
-* Intel 8th Gen Core i3 (Cannon Lake)
+- Intel 8th Gen Core i3 (Cannon Lake)
-* Intel Xeon / 10th Gen Core (Ice Lake)
+- Intel Xeon / 10th Gen Core (Ice Lake)
-* Intel Xeon (Cascade Lake)
+- Intel Xeon (Cascade Lake)
-* Intel Xeon (Cooper Lake)
+- Intel Xeon (Cooper Lake)
-* Intel 3rd Gen 10nm++ (Tiger Lake)
+- Intel 3rd Gen 10nm++ (Tiger Lake)
-* Intel 4th Gen 10nm++ (Sapphire Rapids)
+- Intel 4th Gen 10nm++ (Sapphire Rapids)
-* Intel 5th Gen 10nm++ (Emerald Rapids)
+- Intel 5th Gen 10nm++ (Emerald Rapids)
-* Intel 11th Gen (Rocket Lake)
+- Intel 11th Gen (Rocket Lake)

docs/side-panels.md

@@ -4,14 +4,12 @@ The `zen.sidepanels.data` configuration will be a JSON string that follows the f
 
 ```json
 {
-  data: {
+  "data": {
     "p1": {
       "url": "https://google.com",
-      "ua": false, // "ua" may not be declared! (default: false)
+      "ua": false // "ua" may not be declared! (default: false)
     }
   },
-  "index": [
+  "index": ["p1"]
-    "p1"
-  ]
 }
 ```

docs/workspaces.md

@@ -1,4 +1,3 @@
-
 # Workspaces Layout
 
 ```json
@@ -14,6 +13,7 @@
   ]
 }
 ```
+
 To save the tabs and identity them, they will contain a `zen-workspace-uuid` attribute with the workspace uuid.
 
 We will make use of firefox's builtin session restore feature to save the tabs and windows after the user closes the browser.

flatpak/io.github.zen_browser.zen.yml.template

@@ -4,6 +4,11 @@ runtime-version: '23.08'
 sdk: org.freedesktop.Sdk
 base: org.mozilla.firefox.BaseApp
 base-version: '23.08'
+add-extensions:
+  org.freedesktop.Platform.ffmpeg-full:
+    directory: lib/ffmpeg
+    version: 23.08
+    add-ld-path: .
 command: launch-script.sh
 finish-args:
   - --share=ipc
@@ -22,11 +27,13 @@ finish-args:
   - --own-name=org.mpris.MediaPlayer2.firefox.*
   - --system-talk-name=org.freedesktop.NetworkManager
   - --talk-name=org.a11y.Bus
+  - --env=GTK_PATH=/app/lib/gtkmodules
 modules:
   - name: zen_browser
     buildsystem: simple
     build-commands:
       - mv zen /app/
+      - mkdir -p /app/lib/ffmpeg
 
       - install -Dm0755 metadata/launch-script.sh ${{FLATPAK_DEST}}/bin/launch-script.sh
       - install -Dm0644 metadata/policies.json ${{FLATPAK_DEST}}/bin/distribution/policies.json

package.json

@@ -2,6 +2,9 @@
   "name": "zen-core",
   "version": "1.0.0",
   "description": "",
+  "lint-staged": {
+    "**/*": ""
+  },
   "scripts": {
     "build": "surfer build",
     "build:ui": "surfer build --ui",
@@ -13,7 +16,10 @@
     "package": "surfer package",
     "update-ff": "python3 scripts/update_ff.py",
     "update-ff:raw": "surfer update",
-    "update-newtab": "python3 scripts/update_newtab.py"
+    "update-newtab": "python3 scripts/update_newtab.py",
+    "pretty": "prettier . --write",
+    "lint": "npx prettier . --check",
+    "prepare": "husky"
   },
   "repository": {
     "type": "git",
@@ -27,6 +33,11 @@
   },
   "homepage": "https://github.com/zen-browser/core#readme",
   "dependencies": {
-    "@zen-browser/surfer": "^1.3.7"
+    "@zen-browser/surfer": "^1.4.20"
+  },
+  "devDependencies": {
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3"
   }
 }

pnpm-lock.yaml

@@ -9,8 +9,18 @@ importers:
   .:
     dependencies:
       '@zen-browser/surfer':
-        specifier: ^1.3.7
+        specifier: ^1.4.20
-        version: 1.3.7
+        version: 1.4.20
+    devDependencies:
+      husky:
+        specifier: ^9.1.5
+        version: 9.1.5
+      lint-staged:
+        specifier: ^15.2.10
+        version: 15.2.10
+      prettier:
+        specifier: ^3.3.3
+        version: 3.3.3
 
 packages:
 
@@ -109,18 +119,30 @@ packages:
   '@types/node@17.0.45':
     resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
 
-  '@zen-browser/surfer@1.3.7':
+  '@zen-browser/surfer@1.4.20':
-    resolution: {integrity: sha512-AZEk/xvmRhYUR6gpDPL/liv+b+BZ79mnGopP6cisrJ5Dl55m4EN3ZxAqVz6+IO2njLAfLBN99MxJlQ0ZPJTZpA==}
+    resolution: {integrity: sha512-M9+Jax/B+UQsebJ0K3BaNEKUi/EelKufvG2frWQ4uVAQF9LzFwyyliS5wbcUTs3Ufit4b8xQK7ddt02DmK/Lng==}
     hasBin: true
 
+  ansi-escapes@7.0.0:
+    resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
+    engines: {node: '>=18'}
+
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
+  ansi-regex@6.0.1:
+    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+    engines: {node: '>=12'}
+
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -160,6 +182,10 @@ packages:
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
   buffer-alloc-unsafe@1.1.0:
     resolution: {integrity: sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==}
 
@@ -179,13 +205,25 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  chalk@5.3.0:
+    resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
   chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
 
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
   cli-progress@3.12.0:
     resolution: {integrity: sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==}
     engines: {node: '>=4'}
 
+  cli-truncate@4.0.0:
+    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
+    engines: {node: '>=18'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -200,6 +238,13 @@ packages:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
 
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
+  commander@12.1.0:
+    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
+    engines: {node: '>=18'}
+
   commander@6.2.1:
     resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
     engines: {node: '>= 6'}
@@ -228,6 +273,15 @@ packages:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
+  debug@4.3.7:
+    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   decompress-response@6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
@@ -243,21 +297,35 @@ packages:
   duplexify@4.1.3:
     resolution: {integrity: sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==}
 
+  emoji-regex@10.4.0:
+    resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
   end-of-stream@1.4.4:
     resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
 
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
 
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
   execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
 
+  execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+
   expand-template@2.0.3:
     resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
     engines: {node: '>=6'}
@@ -273,6 +341,10 @@ packages:
   fifo@2.4.1:
     resolution: {integrity: sha512-XTbUCNmo54Jav0hcL6VxDuY4x1eCQH61HEF80C2Oww283pfjQ2C8avZeyq4v43sW2S2403kmzssE9j4lbF66Sg==}
 
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
   flush-write-stream@2.0.0:
     resolution: {integrity: sha512-uXClqPxT4xW0lcdSBheb2ObVU+kuqUk3Jk64EwieirEXZx9XUrVwp/JuBfKAWaM4T5Td/VL7QLDWPXp/MvGm/g==}
 
@@ -303,10 +375,18 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
+  get-east-asian-width@1.2.0:
+    resolution: {integrity: sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==}
+    engines: {node: '>=18'}
+
   get-stream@6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
 
+  get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+
   github-from-package@0.0.0:
     resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
 
@@ -334,6 +414,15 @@ packages:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
 
+  human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+
+  husky@9.1.5:
+    resolution: {integrity: sha512-rowAVRUBfI0b4+niA4SJMhfQwc107VLkBUgEYYAOQAbqDCnra1nYh83hF/MDmhYs9t9n1E3DuKOrs2LYNC+0Ag==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -373,6 +462,18 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
+  is-fullwidth-code-point@4.0.0:
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
+
+  is-fullwidth-code-point@5.0.0:
+    resolution: {integrity: sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==}
+    engines: {node: '>=18'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
   is-promise@4.0.0:
     resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
 
@@ -384,6 +485,10 @@ packages:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
 
+  is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   is-unc-path@1.0.0:
     resolution: {integrity: sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==}
     engines: {node: '>=0.10.0'}
@@ -416,19 +521,48 @@ packages:
   lifecycle@1.0.4:
     resolution: {integrity: sha512-FJx0SNrM2rouctdOH4rATsHT+BvgyXX4LEQ+Yn9COQNPK3u4XAPp9qS7OKpRO22MeT39oxkjZkRcLnHxSmiduw==}
 
+  lilconfig@3.1.2:
+    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
+    engines: {node: '>=14'}
+
+  lint-staged@15.2.10:
+    resolution: {integrity: sha512-5dY5t743e1byO19P9I4b3x8HJwalIznL5E1FWYnU6OWw33KxNBSLAc6Cy7F2PsFEO8FKnLwjwm5hx7aMF0jzZg==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+
+  listr2@8.2.4:
+    resolution: {integrity: sha512-opevsywziHd3zHCVQGAj8zu+Z3yHNkkoYhWIGnq54RrCVwLz0MozotJEDnKsIBLvkfLGN6BLOyAeRrYI0pKA4g==}
+    engines: {node: '>=18.0.0'}
+
   lodash.compact@3.0.1:
     resolution: {integrity: sha512-2ozeiPi+5eBXW1CLtzjk8XQFhQOEMwwfxblqeq6EGyTxZJ1bPATqilY0e6g2SLQpP4KuMeuioBhEnWz5Pr7ICQ==}
 
   lodash.throttle@4.1.1:
     resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
 
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
 
+  mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
   mimic-response@3.1.0:
     resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
     engines: {node: '>=10'}
@@ -452,6 +586,12 @@ packages:
   modern-async@1.1.4:
     resolution: {integrity: sha512-jaZlzQB3W9PRF43+T144lYWb7UaTapJM6MZxNGLqpgPVal6uV4ixkR+t/1H1/7UM03jDu5BnvAYDqeawvL7kiw==}
 
+  mount-dmg@1.0.1:
+    resolution: {integrity: sha512-YEHSgtE1d6jIm6ht0uqo4MWQSXHvHYujgURXf+59hQDErH5bL5rv4uGwko8ejiFIeK6ySk8jBX1oX9NrlmBTCg==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
   nanoassert@2.0.0:
     resolution: {integrity: sha512-7vO7n28+aYO4J+8w96AzhmU8G+Y/xpPDJz/se19ICsqj/momRbb9mh9ZUtkoJ5X3nTnPdhEJyc0qnM6yAsHBaA==}
 
@@ -476,6 +616,10 @@ packages:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
 
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -483,6 +627,14 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
   os-shim@0.1.3:
     resolution: {integrity: sha512-jd0cvB8qQ5uVt0lvCIexBaROw1KyKm5sbulg2fWOHjETisuCzWyt+eTZKEMs8v6HwzoGs8xik26jg7eCM6pS+A==}
     engines: {node: '>= 0.4.0'}
@@ -495,10 +647,19 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  pidtree@0.6.0:
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   png-to-ico@2.1.8:
     resolution: {integrity: sha512-Nf+IIn/cZ/DIZVdGveJp86NG5uNib1ZXMiDd/8x32HCTeKSvgpyg6D/6tUBn1QO/zybzoMK0/mc3QRgAyXdv9w==}
     engines: {node: '>=8'}
@@ -513,6 +674,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
@@ -551,6 +717,13 @@ packages:
     resolution: {integrity: sha512-qpFcKaXsq8+oRoLilkwyc7zHGF5i9Q2/25NIgLQQ/+VVv9rU4qvr6nXVAw1DsnXJyQkZsR4Ytfbtg5ehfcUssQ==}
     engines: {node: '>=0.10.0'}
 
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
   rimraf@2.7.1:
     resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
     deprecated: Rimraf versions prior to v4 are no longer supported
@@ -586,12 +759,19 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shell-escape@0.2.0:
+    resolution: {integrity: sha512-uRRBT2MfEOyxuECseCZd28jC1AJ8hmqqneWQ4VWUTgCAFvb3wKU1jLqj6egC4Exrr88ogg3dp+zroH4wJuaXzw==}
+
   short-hash@1.0.0:
     resolution: {integrity: sha512-qbUCD2Pkl4IXRyVqneEjGnUr0NGDGLzZnBUVGJngIQZf/FrhOL0yJhH+JQzak0t8xMmScIKpoX1SxOsPHdwa4w==}
 
   signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
   simple-concat@1.0.1:
     resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
 
@@ -604,6 +784,14 @@ packages:
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
+  slice-ansi@5.0.0:
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
+
+  slice-ansi@7.1.0:
+    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
+    engines: {node: '>=18'}
+
   speedometer@1.0.0:
     resolution: {integrity: sha512-lgxErLl/7A5+vgIIXsh9MbeukOaCb2axgQ+bKCdIE+ibNT4XNYGNCR1qFEGq6F+YDASXK3Fh/c5FgtZchFolxw==}
 
@@ -617,10 +805,18 @@ packages:
   stream-shift@1.0.3:
     resolution: {integrity: sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==}
 
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
 
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
@@ -631,10 +827,18 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
   strip-final-newline@2.0.0:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
 
+  strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+
   strip-json-comments@2.0.1:
     resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
     engines: {node: '>=0.10.0'}
@@ -671,6 +875,10 @@ packages:
   tiny-glob@0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
 
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
   to-utf8@0.0.1:
     resolution: {integrity: sha512-zks18/TWT1iHO3v0vFp5qLKOG27m67ycq/Y7a7cTiRuUNlc4gf3HGnkRgMv0NyhnfTamtkYBJl+YeD1/j07gBQ==}
 
@@ -696,6 +904,10 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
+
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
@@ -707,6 +919,11 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
+  yaml@2.5.1:
+    resolution: {integrity: sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
   zip-iterator@1.0.1:
     resolution: {integrity: sha512-0mrjvo33Z9E/7rd2iiNmEJMjbiv+/czKyTl+IOdgpY87+y9vUW+bB6HmhGU9s7G3TpWsEIID3n+7cckK3D2hwQ==}
     engines: {node: '>=0.8'}
@@ -786,7 +1003,7 @@ snapshots:
 
   '@types/node@17.0.45': {}
 
-  '@zen-browser/surfer@1.3.7':
+  '@zen-browser/surfer@1.4.20':
     dependencies:
       '@resvg/resvg-js': 1.4.0
       async-icns: 1.0.2
@@ -801,6 +1018,7 @@ snapshots:
       is-apple-silicon: https://codeload.github.com/trickypr/is-apple-silicon/tar.gz/5f75501a1d7566ba9f94174b6825d7bd9d302b6a
       kleur: 4.1.5
       modern-async: 1.1.4
+      mount-dmg: 1.0.1
       picomatch: 2.3.1
       png-to-ico: 2.1.8
       prompts: 2.4.2
@@ -812,12 +1030,20 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  ansi-escapes@7.0.0:
+    dependencies:
+      environment: 1.1.0
+
   ansi-regex@5.0.1: {}
 
+  ansi-regex@6.0.1: {}
+
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
 
+  ansi-styles@6.2.1: {}
+
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -868,6 +1094,10 @@ snapshots:
       balanced-match: 1.0.2
       concat-map: 0.0.1
 
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
   buffer-alloc-unsafe@1.1.0: {}
 
   buffer-alloc@1.2.0:
@@ -889,12 +1119,23 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  chalk@5.3.0: {}
+
   chownr@1.1.4: {}
 
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
   cli-progress@3.12.0:
     dependencies:
       string-width: 4.2.3
 
+  cli-truncate@4.0.0:
+    dependencies:
+      slice-ansi: 5.0.0
+      string-width: 7.2.0
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -911,6 +1152,10 @@ snapshots:
       color-convert: 2.0.1
       color-string: 1.9.1
 
+  colorette@2.0.20: {}
+
+  commander@12.1.0: {}
+
   commander@6.2.1: {}
 
   commander@9.5.0: {}
@@ -933,6 +1178,10 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  debug@4.3.7:
+    dependencies:
+      ms: 2.1.3
+
   decompress-response@6.0.0:
     dependencies:
       mimic-response: 3.1.0
@@ -948,14 +1197,20 @@ snapshots:
       readable-stream: 3.6.2
       stream-shift: 1.0.3
 
+  emoji-regex@10.4.0: {}
+
   emoji-regex@8.0.0: {}
 
   end-of-stream@1.4.4:
     dependencies:
       once: 1.4.0
 
+  environment@1.1.0: {}
+
   esprima@4.0.1: {}
 
+  eventemitter3@5.0.1: {}
+
   execa@5.1.1:
     dependencies:
       cross-spawn: 7.0.3
@@ -968,6 +1223,18 @@ snapshots:
       signal-exit: 3.0.7
       strip-final-newline: 2.0.0
 
+  execa@8.0.1:
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
   expand-template@2.0.3: {}
 
   extract-base-iterator@1.0.1:
@@ -1009,6 +1276,10 @@ snapshots:
 
   fifo@2.4.1: {}
 
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
   flush-write-stream@2.0.0:
     dependencies:
       inherits: 2.0.4
@@ -1030,8 +1301,12 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
+  get-east-asian-width@1.2.0: {}
+
   get-stream@6.0.1: {}
 
+  get-stream@8.0.1: {}
+
   github-from-package@0.0.0: {}
 
   glob@7.2.3:
@@ -1055,6 +1330,10 @@ snapshots:
 
   human-signals@2.1.0: {}
 
+  human-signals@5.0.0: {}
+
+  husky@9.1.5: {}
+
   ieee754@1.2.1: {}
 
   imurmurhash@0.1.4: {}
@@ -1083,6 +1362,14 @@ snapshots:
 
   is-fullwidth-code-point@3.0.0: {}
 
+  is-fullwidth-code-point@4.0.0: {}
+
+  is-fullwidth-code-point@5.0.0:
+    dependencies:
+      get-east-asian-width: 1.2.0
+
+  is-number@7.0.0: {}
+
   is-promise@4.0.0: {}
 
   is-relative@1.0.0:
@@ -1091,6 +1378,8 @@ snapshots:
 
   is-stream@2.0.1: {}
 
+  is-stream@3.0.0: {}
+
   is-unc-path@1.0.0:
     dependencies:
       unc-path-regex: 0.1.2
@@ -1118,14 +1407,57 @@ snapshots:
 
   lifecycle@1.0.4: {}
 
+  lilconfig@3.1.2: {}
+
+  lint-staged@15.2.10:
+    dependencies:
+      chalk: 5.3.0
+      commander: 12.1.0
+      debug: 4.3.7
+      execa: 8.0.1
+      lilconfig: 3.1.2
+      listr2: 8.2.4
+      micromatch: 4.0.8
+      pidtree: 0.6.0
+      string-argv: 0.3.2
+      yaml: 2.5.1
+    transitivePeerDependencies:
+      - supports-color
+
+  listr2@8.2.4:
+    dependencies:
+      cli-truncate: 4.0.0
+      colorette: 2.0.20
+      eventemitter3: 5.0.1
+      log-update: 6.1.0
+      rfdc: 1.4.1
+      wrap-ansi: 9.0.0
+
   lodash.compact@3.0.1: {}
 
   lodash.throttle@4.1.1: {}
 
+  log-update@6.1.0:
+    dependencies:
+      ansi-escapes: 7.0.0
+      cli-cursor: 5.0.0
+      slice-ansi: 7.1.0
+      strip-ansi: 7.1.0
+      wrap-ansi: 9.0.0
+
   merge-stream@2.0.0: {}
 
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
   mimic-fn@2.1.0: {}
 
+  mimic-fn@4.0.0: {}
+
+  mimic-function@5.0.1: {}
+
   mimic-response@3.1.0: {}
 
   minimatch@3.1.2:
@@ -1148,6 +1480,12 @@ snapshots:
       core-js-pure: 3.37.1
       nanoassert: 2.0.0
 
+  mount-dmg@1.0.1:
+    dependencies:
+      shell-escape: 0.2.0
+
+  ms@2.1.3: {}
+
   nanoassert@2.0.0: {}
 
   napi-build-utils@1.0.2: {}
@@ -1166,6 +1504,10 @@ snapshots:
     dependencies:
       path-key: 3.1.1
 
+  npm-run-path@5.3.0:
+    dependencies:
+      path-key: 4.0.0
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -1174,14 +1516,26 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
   os-shim@0.1.3: {}
 
   path-is-absolute@1.0.1: {}
 
   path-key@3.1.1: {}
 
+  path-key@4.0.0: {}
+
   picomatch@2.3.1: {}
 
+  pidtree@0.6.0: {}
+
   png-to-ico@2.1.8:
     dependencies:
       '@types/node': 17.0.45
@@ -1205,6 +1559,8 @@ snapshots:
       tar-fs: 2.1.1
       tunnel-agent: 0.6.0
 
+  prettier@3.3.3: {}
+
   process-nextick-args@2.0.1: {}
 
   progress-stream@2.0.0:
@@ -1260,6 +1616,13 @@ snapshots:
 
   resolve-from@2.0.0: {}
 
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  rfdc@1.4.1: {}
+
   rimraf@2.7.1:
     dependencies:
       glob: 7.2.3
@@ -1291,12 +1654,16 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shell-escape@0.2.0: {}
+
   short-hash@1.0.0:
     dependencies:
       hash-string: 1.0.0
 
   signal-exit@3.0.7: {}
 
+  signal-exit@4.1.0: {}
+
   simple-concat@1.0.1: {}
 
   simple-get@4.0.1:
@@ -1311,6 +1678,16 @@ snapshots:
 
   sisteransi@1.0.5: {}
 
+  slice-ansi@5.0.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 4.0.0
+
+  slice-ansi@7.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 5.0.0
+
   speedometer@1.0.0: {}
 
   sprintf-js@1.0.3: {}
@@ -1323,12 +1700,20 @@ snapshots:
 
   stream-shift@1.0.3: {}
 
+  string-argv@0.3.2: {}
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.4.0
+      get-east-asian-width: 1.2.0
+      strip-ansi: 7.1.0
+
   string_decoder@1.1.1:
     dependencies:
       safe-buffer: 5.1.2
@@ -1341,8 +1726,14 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
+  strip-ansi@7.1.0:
+    dependencies:
+      ansi-regex: 6.0.1
+
   strip-final-newline@2.0.0: {}
 
+  strip-final-newline@3.0.0: {}
+
   strip-json-comments@2.0.1: {}
 
   supports-color@7.2.0:
@@ -1402,6 +1793,10 @@ snapshots:
       globalyzer: 0.1.0
       globrex: 0.1.2
 
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
   to-utf8@0.0.1: {}
 
   tunnel-agent@0.6.0:
@@ -1423,6 +1818,12 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  wrap-ansi@9.0.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 7.2.0
+      strip-ansi: 7.1.0
+
   wrappy@1.0.2: {}
 
   xmlbuilder2@3.1.1:
@@ -1434,6 +1835,8 @@ snapshots:
 
   xtend@4.0.2: {}
 
+  yaml@2.5.1: {}
+
   zip-iterator@1.0.1:
     dependencies:
       buffer-v6-polyfill: 1.0.5

scripts/copy-language-pack.sh

@@ -9,6 +9,7 @@ copy_browser_locales() {
     return
   fi
   rm -rf $browser_locales/$langId/
+  # TODO: Copy the rest of the l10n directories to their respective locations
   rsync -av --exclude=.git ./l10n/$langId/ $browser_locales/$langId/
 }
 

src/browser/app/profile/better-fox.js

@@ -24,17 +24,20 @@
 pref("content.notify.interval", 100000); // (.10s); alt=500000 (.50s)
 
 /** GFX ***/
-pref("gfx.canvas.accelerated.cache-items", 4096);
+pref("gfx.canvas.accelerated.cache-items", 32768);
-pref("gfx.canvas.accelerated.cache-size", 512);
+pref("gfx.canvas.accelerated.cache-size", 4096);
-pref("gfx.content.skia-font-cache-size", 20);
+pref("gfx.content.skia-font-cache-size", 80);
 
 /** DISK CACHE ***/
 pref("browser.cache.jsbc_compression_level", 3);
 
 /** MEDIA CACHE ***/
-pref("media.memory_cache_max_size", 65536);
+pref("media.memory_cache_max_size", 1048576);
-pref("media.cache_readahead_limit", 7200);
+pref("media.cache_readahead_limit", 9000);
 pref("media.cache_resume_threshold", 3600);
+pref("media.memory_caches_combined_limit_kb", 2560000);
+
+pref("browser.cache.memory.max_entry_size", 0); 
 
 /** IMAGE CACHE ***/
 pref("image.mem.decode_bytes_at_a_time", 32768);
@@ -47,7 +50,7 @@ pref("network.http.pacing.requests.enabled", false);
 pref("network.dnsCacheExpiration", 3600);
 pref("network.http.max-persistent-connections-per-proxy", 48); // default=32
 pref("network.websocket.max-connections", 400); // default=200
-pref("network.ssl_tokens_cache_capacity", 10240);
+pref("network.ssl_tokens_cache_capacity", 32768);
 
 /** MIXED CONTENT + CROSS-SITE ***/
 pref("pdfjs.enableScripting", false);
@@ -82,7 +85,6 @@ pref("security.tls.enable_0rtt_data", false);
 
 /** DISK AVOIDANCE ***/
 pref("browser.privatebrowsing.forceMediaMemoryCache", true);
-pref("browser.sessionstore.interval", 60000);
 
 /** SHUTDOWN & SANITIZING ***/
 pref("privacy.history.custom", true);
@@ -104,10 +106,6 @@ pref("network.IDN_show_punycode", true);
 /** CONTAINERS ***/
 pref("privacy.userContext.ui.enabled", true);
 
-/** WEBRTC ***/
-pref("media.peerconnection.ice.proxy_only_if_behind_proxy", true);
-pref("media.peerconnection.ice.default_address_only", true);
-
 /** SAFE BROWSING ***/
 pref("browser.safebrowsing.downloads.remote.enabled", false);
 

src/browser/app/profile/firefox-js.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
-index b8aa71126c2bb4521caf25f9caf845a8a429dc64..59cdc2e9998e802d6c79ff967eaa30088a3b7a21 100644
+index a39a4f287ef843f7e0cdeac8320eeff81318116f..f84cdb85c249221522089667010d547cfab67819 100644
 --- a/browser/app/profile/firefox.js
 +++ b/browser/app/profile/firefox.js
-@@ -3110,3 +3110,5 @@ pref("toolkit.contentRelevancy.enabled", false);
+@@ -3190,3 +3190,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);

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

@@ -19,6 +19,9 @@ pref("devtools.debugger.prompt-connection", true);
 // Dont download the multilingual dictionary
 pref("intl.multilingual.downloadEnabled", false);
 
+// Restore session on startup
+pref("browser.startup.page", 3);
+
 // Theme
 pref('toolkit.legacyUserProfileCustomizations.stylesheets', true);
 pref('browser.compactmode.show', true);
@@ -48,6 +51,8 @@ pref('pdfjs.enableHighlightEditor', true);
 pref('pdfjs.enableHighlightFloatingButton', true);
 
 pref("alerts.showFavicons", true);
+
+pref("browser.tabs.loadBookmarksInTabs", false);
 pref('browser.toolbars.bookmarks.visibility', 'never');
 
 // Enable Do Not Track and GPC by default.
@@ -59,7 +64,7 @@ pref("browser.ping-centre.telemetry", false);
 pref("browser.attribution.enabled", false);
 pref("toolkit.telemetry.pioneer-new-studies-available", false);
 
-pref("app.update.checkInstallTime.days", 2);
+pref("app.update.checkInstallTime.days", 6);
 
 // CUSTOM ZEN PREFS
 
@@ -68,12 +73,20 @@ pref('zen.welcomeScreen.seen', false);
 pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
 pref('zen.theme.accent-color', "#aac7ff");
-pref('zen.theme.border-radius', 10); // In pixels
+pref('zen.theme.border-radius', 5); // In pixels
+pref('zen.theme.content-element-separation', 4); // In pixels
 pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
 pref('zen.view.compact', false);
 pref('zen.view.compact.hide-toolbar', false);
 
+pref('zen.theme.color-prefs.amoled', false);
+pref('zen.theme.color-prefs.colorful', false);
+
+pref('zen.view.compact.toolbar-flash-popup', true);
+pref('zen.view.compact.toolbar-flash-popup.duration', 800);
+
+pref('zen.view.sidebar-height-throttle', 200); // in ms
 pref('zen.view.sidebar-expanded', false);
 pref('zen.view.sidebar-expanded.on-hover', false);
 pref('zen.view.sidebar-expanded.show-button', true);
@@ -86,7 +99,12 @@ pref('zen.keyboard.shortcuts', ""); // Empty string means default shortcuts
 pref('zen.keyboard.shortcuts.disable-firefox', false);
 pref('zen.tabs.dim-pending', true);
 pref('zen.themes.updated-value-observer', false);
+
+#ifdef XP_MACOSX
+pref('zen.themes.tabs.legacy-location', true);
+#else
 pref('zen.themes.tabs.legacy-location', false);
+#endif
 
 // Pref to enable the new profiles (TODO: Check this out!)
 //pref("browser.profiles.enabled", true);
@@ -101,6 +119,9 @@ pref('zen.splitView.working', false);
 
 // Zen Workspaces
 pref('zen.workspaces.enabled', true);
+pref('zen.workspaces.hide-default-container-indicator', true);
+pref('zen.workspaces.individual-pinned-tabs', true);
+pref('zen.workspaces.icons', '["🌐", "📁", "📎", "📝", "📅", "📊"]');
 
 // Zen Watermark
 pref('zen.watermark.enabled', true, sticky);
@@ -115,11 +136,6 @@ pref('dom.security.https_only_mode', true);
 
 pref('media.eme.enabled', true);
 
-pref("app.update.url.manual", "https://www.zen-browser.app/download");
-pref("app.update.url.details", "https://www.zen-browser.app/download");
-pref("app.releaseNotesURL", "https://www.zen-browser.app/release-notes");
-pref("app.releaseNotesURL.aboutDialog", "https://www.zen-browser.app/release-notes");
-
 // Enable importers for other browsers
 pref('browser.migrate.vivaldi.enabled', true);
 pref('browser.migrate.opera-gx.enabled', true);
@@ -135,24 +151,21 @@ pref('xpinstall.signatures.required', false);
 // Strategy to use for bytecode cache (Thanks https://github.com/gunir)
 pref('dom.script_loader.bytecode_cache.strategy', 2);
 
-// Font rendering, not for MacOSX and Linux
+// Enable private suggestions
-#ifndef XP_UNIX
+pref('browser.search.suggest.enabled', true);
-#ifndef XP_MACOSX
+pref('browser.search.suggest.enabled.private', true);
-pref("gfx.font_rendering.directwrite.bold_simulation", 2);
-pref("gfx.font_rendering.cleartype_params.enhanced_contrast", 25);
-pref("gfx.font_rendering.cleartype_params.force_gdi_classic_for_families", "");
-#endif
-#endif
 
-// Enable GPU by default
+pref("extensions.enabledScopes", 5); // [HIDDEN PREF]
-pref('gfx.webrender.all', true);
+
-pref('layers.acceleration.force-enabled', true);
+// Enable JXL support
-pref('media.ffmpeg.vaapi.enabled', true);
+pref('image.jxl.enabled', true);
 
 #if defined(XP_WIN)
   pref("dom.ipc.processPriorityManager.backgroundUsesEcoQoS", false);
 #endif
 
+pref('browser.sessionstore.restore_pinned_tabs_on_demand', true);
+
 // Enable experimental settings page (Usef for Zen Labs)
 pref('browser.preferences.experimental', true);
 
@@ -186,3 +199,15 @@ pref("widget.non-native-theme.use-theme-accent", true);
 // Expose Letterboxing https://github.com/zen-browser/desktop/issues/475
 pref("privacy.resistFingerprinting.letterboxing", false);
 pref("privacy.resistFingerprinting.letterboxing.dimensions", "");
+
+// Remove Inspect Accessibity Properties menu
+pref("devtools.accessibility.enabled", false);
+
+// Enable GPU by default
+pref('gfx.webrender.all', true);
+pref('layers.acceleration.force-enabled', true);
+pref('media.ffmpeg.vaapi.enabled', true);
+pref('media.ffmpeg.encoder.enabled', true);
+
+pref("media.hardware-video-decoding.enabled", true);
+pref("gfx.canvas.accelerated", true);

src/browser/base/content/ZenStartup.mjs

@@ -1,9 +1,18 @@
 
-var ZenStartup = {
+{
+  const lazy = {};
+  XPCOMUtils.defineLazyPreferenceGetter(
+    lazy,
+    "sidebarHeightThrottle",
+    "zen.view.sidebar-height-throttle",
+    500
+  );
+  var ZenStartup = {
     init() {
+      this.openWatermark();
+      window.SessionStore.promiseInitialized.then(async () => {
         this._changeSidebarLocation();
         this._zenInitBrowserLayout();
-    window.SessionStore.promiseInitialized.then(async () => {
         this._focusSearchBar();
       });
     },
@@ -11,64 +20,74 @@ var ZenStartup = {
     _zenInitBrowserLayout() {
       if (this.__hasInitBrowserLayout) return;
       this.__hasInitBrowserLayout = true;
-    this.openWatermark();
+      try {
-    console.info("ZenThemeModifier: init browser layout");
+        console.info('ZenThemeModifier: init browser layout');
-    const kNavbarItems = [
+        const kNavbarItems = ['nav-bar', 'PersonalToolbar'];
-      "nav-bar",
+        const kNewContainerId = 'zen-appcontent-navbar-container';
-      "PersonalToolbar"
-    ];
-    const kNewContainerId = "zen-appcontent-navbar-container";
         let newContainer = document.getElementById(kNewContainerId);
         for (let id of kNavbarItems) {
           const node = document.getElementById(id);
-      console.assert(node, "Could not find node with id: " + id);
+          console.assert(node, 'Could not find node with id: ' + id);
           if (!node) continue;
           newContainer.appendChild(node);
         }
 
         // Fix notification deck
-    document.getElementById("zen-appcontent-navbar-container")
+        document
-      .appendChild(document.getElementById("tab-notification-deck-template"));
+          .getElementById('zen-appcontent-navbar-container')
+          .appendChild(document.getElementById('tab-notification-deck-template'));
 
+        // Disable smooth scroll
+        gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
+
+        ZenWorkspaces.init();
         gZenVerticalTabsManager.init();
         gZenCompactModeManager.init();
         gZenKeyboardShortcuts.init();
 
         function throttle(f, delay) {
           let timer = 0;
-      return function(...args) {
+          return function (...args) {
             clearTimeout(timer);
             timer = setTimeout(() => f.apply(this, args), delay);
-      }
+          };
         }
 
-    new ResizeObserver(throttle(
+        new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), lazy.sidebarHeightThrottle)).observe(document.getElementById('tabbrowser-tabs'));
-      this._updateTabsToolbar.bind(this), 1000
+      } catch (e) {
-    )).observe(document.getElementById("tabbrowser-tabs"));
+        console.error('ZenThemeModifier: Error initializing browser layout', e);
-
+      }
       this.closeWatermark();
     },
 
     _updateTabsToolbar() {
       // Set tabs max-height to the "toolbar-items" height
-    const toolbarItems = document.getElementById("tabbrowser-tabs");
+      const toolbarItems = document.getElementById('tabbrowser-tabs');
-    const tabs = document.getElementById("tabbrowser-arrowscrollbox");
+      const tabs = document.getElementById('tabbrowser-arrowscrollbox');
       tabs.style.maxHeight = '0px'; // reset to 0
       const toolbarRect = toolbarItems.getBoundingClientRect();
       // -5 for the controls padding
-    let totalHeight = toolbarRect.height - 15;
+      let totalHeight = toolbarRect.height - 5;
       // remove the height from other elements that aren't hidden
-    const otherElements = document.querySelectorAll("#tabbrowser-tabs > *:not([hidden=\"true\"])");
+      const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
       for (let tab of otherElements) {
         if (tabs === tab) continue;
         totalHeight -= tab.getBoundingClientRect().height;
       }
-    tabs.style.maxHeight = totalHeight + "px";
+      tabs.style.maxHeight = totalHeight + 'px';
-    console.info("ZenThemeModifier: set tabs max-height to", totalHeight + "px");
+      //console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
+
+      const allTabs = document.getElementById('alltabs-button');
+      allTabs.removeAttribute('hidden');
+      allTabs.removeAttribute('badged');
+      allTabs.setAttribute('class', 'toolbarbutton-1 zen-sidebar-action-button');
+      document.getElementById('zen-sidebar-icons-wrapper').prepend(
+        allTabs
+      );
     },
 
     openWatermark() {
-    if (!Services.prefs.getBoolPref("zen.watermark.enabled", false)) {
+      if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
         return;
       }
       const watermark = window.MozXULElement.parseXULToFragment(`
@@ -80,55 +99,53 @@ var ZenStartup = {
     },
 
     closeWatermark() {
-    const watermark = document.getElementById("zen-watermark");
+      const watermark = document.getElementById('zen-watermark');
       if (watermark) {
-      watermark.setAttribute("hidden", "true");
+        watermark.setAttribute('hidden', 'true');
       }
     },
 
     _changeSidebarLocation() {
-    const legacyLocation = Services.prefs.getBoolPref("zen.themes.tabs.legacy-location", false);
+      const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false);
-    const kElementsToAppend = [
+      const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
-      "sidebar-splitter",
-      "sidebar-box",
-    ];
       if (legacyLocation) {
-      kElementsToAppend.push("navigator-toolbox");
+        kElementsToAppend.push('navigator-toolbox');
-      window.document.documentElement.setAttribute("zen-sidebar-legacy", "true");
+        window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true');
       }
-    const wrapper = document.getElementById("zen-tabbox-wrapper");
+      const wrapper = document.getElementById('zen-tabbox-wrapper');
-    const appWrapepr = document.getElementById("zen-sidebar-box-container");
+      const appWrapepr = document.getElementById('zen-sidebar-box-container');
       for (let id of kElementsToAppend) {
         const elem = document.getElementById(id);
         if (elem) {
           wrapper.prepend(elem);
         }
       }
-    appWrapepr.setAttribute("hidden", "true");
+      appWrapepr.setAttribute('hidden', 'true');
 
-    const browser = document.getElementById("browser")
+      const browser = document.getElementById('browser');
-    const toolbox = document.getElementById("navigator-toolbox");
+      const toolbox = document.getElementById('navigator-toolbox');
       if (!legacyLocation) {
         browser.prepend(toolbox);
       }
 
       // remove all styles except for the width, since we are xulstoring the complet style list
       const width = toolbox.style.width;
-    toolbox.removeAttribute("style");
+      toolbox.removeAttribute('style');
       toolbox.style.width = width;
 
       // Set a splitter to navigator-toolbox
-    const splitter = document.createXULElement("splitter");
+      const splitter = document.createXULElement('splitter');
-    splitter.setAttribute("id", "zen-sidebar-splitter");
+      splitter.setAttribute('id', 'zen-sidebar-splitter');
-    splitter.setAttribute("orient", "horizontal");
+      splitter.setAttribute('orient', 'horizontal');
-    splitter.setAttribute("resizebefore", "sibling");
+      splitter.setAttribute('resizebefore', 'sibling');
-    splitter.setAttribute("resizeafter", "none");
+      splitter.setAttribute('resizeafter', 'none');
-    toolbox.insertAdjacentElement("afterend", splitter);
+      toolbox.insertAdjacentElement('afterend', splitter);
     },
 
     _focusSearchBar() {
       gURLBar.focus();
     },
-};
+  };
 
-ZenStartup.init();
+  ZenStartup.init();
+}

src/browser/base/content/ZenUIManager.mjs

@@ -1,4 +1,3 @@
-
 var gZenUIManager = {
   openAndChangeToTab(url, options) {
     if (window.ownerGlobal.parent) {
@@ -12,8 +11,8 @@ var gZenUIManager = {
   },
 
   generateUuidv4() {
-    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
+    return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
-      (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+      (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16)
     );
   },
 
@@ -24,23 +23,31 @@ var gZenUIManager = {
 
   createValidXULText(text) {
     return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-  }
+  },
 };
 
 var gZenVerticalTabsManager = {
   init() {
-    //Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
+    var updateEvent = this._updateEvent.bind(this);
-    Services.prefs.addObserver('zen.view.sidebar-expanded', this._updateEvent.bind(this));
+    Services.prefs.addObserver('zen.view.sidebar-expanded', updateEvent);
-    Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', this._updateEvent.bind(this));
+    Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
-    Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', this._updateOnHoverVerticalTabs.bind(this));
+    Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
-    this._updateMaxWidth();
+    Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', updateEvent);
+    this._updateEvent();
     this.initRightSideOrderContextMenu();
-    this._updateOnHoverVerticalTabs();
+  },
+
+  get navigatorToolbox() {
+    if (this._navigatorToolbox) {
+      return this._navigatorToolbox;
+    }
+    this._navigatorToolbox = document.getElementById('navigator-toolbox');
+    return this._navigatorToolbox;
   },
 
   _updateOnHoverVerticalTabs() {
     let onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
-    let sidebar = document.getElementById('navigator-toolbox');
+    let sidebar = this.navigatorToolbox;
     if (onHover) {
       sidebar.setAttribute('zen-user-hover', 'true');
     } else {
@@ -56,7 +63,7 @@ var gZenVerticalTabsManager = {
                 ${Services.prefs.getBoolPref(kConfigKey) ? 'checked="true"' : ''}
                 data-lazy-l10n-id="zen-toolbar-context-tabs-right"/>
     `);
-    fragment.getElementById("zen-toolbar-context-tabs-right").addEventListener('click', () => {
+    fragment.getElementById('zen-toolbar-context-tabs-right').addEventListener('click', () => {
       let rightSide = Services.prefs.getBoolPref(kConfigKey);
       Services.prefs.setBoolPref(kConfigKey, !rightSide);
     });
@@ -65,6 +72,17 @@ var gZenVerticalTabsManager = {
 
   _updateEvent() {
     this._updateMaxWidth();
+    if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) {
+      this.navigatorToolbox.setAttribute('zen-expanded', 'true');
+    } else {
+      this.navigatorToolbox.removeAttribute('zen-expanded');
+    }
+    if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
+      this.navigatorToolbox.setAttribute('zen-right-side', 'true');
+    } else {
+      this.navigatorToolbox.removeAttribute('zen-right-side');
+    }
+    this._updateOnHoverVerticalTabs();
   },
 
   _updateMaxWidth() {
@@ -110,8 +128,11 @@ var gZenVerticalTabsManager = {
 };
 
 var gZenCompactModeManager = {
+  _flashSidebarTimeout: null,
+
   init() {
     Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
+    Services.prefs.addObserver('zen.view.compact.toolbar-flash-popup.duration', this._updatedSidebarFlashDuration.bind(this));
   },
 
   get prefefence() {
@@ -130,13 +151,43 @@ var gZenCompactModeManager = {
     this.preference = !this.prefefence;
   },
 
+  _updatedSidebarFlashDuration() {
+    this._flashSidebarDuration = Services.prefs.getIntPref('zen.view.compact.toolbar-flash-popup.duration');
+  },
+
   toggleSidebar() {
     let sidebar = document.getElementById('navigator-toolbox');
     sidebar.toggleAttribute('zen-user-show');
   },
 
+  get flashSidebarDuration() {
+    if (this._flashSidebarDuration) {
+      return this._flashSidebarDuration;
+    }
+    return Services.prefs.getIntPref('zen.view.compact.toolbar-flash-popup.duration');
+  },
+
+  flashSidebar() {
+    let sidebar = document.getElementById('navigator-toolbox');
+    let tabPanels = document.getElementById('tabbrowser-tabpanels');
+    if (sidebar.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) {
+      return;
+    }
+    if (this._flashSidebarTimeout) {
+      clearTimeout(this._flashSidebarTimeout);
+    } else {
+      window.requestAnimationFrame(() => sidebar.setAttribute('flash-popup', ''));
+    }
+    this._flashSidebarTimeout = setTimeout(() => {
+      window.requestAnimationFrame(() => {
+        sidebar.removeAttribute('flash-popup');
+        this._flashSidebarTimeout = null;
+      });
+    }, this.flashSidebarDuration);
+  },
+
   toggleToolbar() {
     let toolbar = document.getElementById('zen-appcontent-navbar-container');
     toolbar.toggleAttribute('zen-user-show');
-  }
+  },
 };

src/browser/base/content/aboutDialog-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/aboutDialog.xhtml b/browser/base/content/aboutDialog.xhtml
-index 55de24241514d11f6a174dd97ca37c8a4a99b8af..1459c91ff11429788e103d385f1598b6275592c8 100644
+index 1e5c0f1c59175ec4a39938974c4a7a5c6355439f..ac9fe4b792c12a1aecba1fbbc941da9be6a53ce4 100644
 --- a/browser/base/content/aboutDialog.xhtml
 +++ b/browser/base/content/aboutDialog.xhtml
 @@ -36,6 +36,7 @@
@@ -10,7 +10,7 @@ index 55de24241514d11f6a174dd97ca37c8a4a99b8af..1459c91ff11429788e103d385f1598b6
    </linkset>
  
    <html:div id="aboutDialogContainer">
-@@ -134,13 +135,15 @@
+@@ -130,13 +131,15 @@
              </description>
            </vbox>
            <description class="text-blurb" id="communityDesc" data-l10n-id="community-2">
@@ -27,3 +27,12 @@ index 55de24241514d11f6a174dd97ca37c8a4a99b8af..1459c91ff11429788e103d385f1598b6
          </vbox>
        </vbox>
      </hbox>
+@@ -144,7 +147,7 @@
+       <hbox pack="center">
+         <label is="text-link" class="bottom-link" useoriginprincipal="true" href="about:license" data-l10n-id="bottomLinks-license"/>
+         <label is="text-link" class="bottom-link" useoriginprincipal="true" href="about:rights" data-l10n-id="bottomLinks-rights"/>
+-        <label is="text-link" class="bottom-link" href="https://www.mozilla.org/privacy/?utm_source=firefox-browser&#38;utm_medium=firefox-desktop&#38;utm_campaign=about-dialog" data-l10n-id="bottomLinks-privacy"/>
++        <label is="text-link" class="bottom-link" href="https://www.zen-browser.app/privacy-policy/" data-l10n-id="bottomLinks-privacy"/>
+       </hbox>
+       <description id="trademark" data-l10n-id="trademarkInfo"></description>
+     </vbox>

src/browser/base/content/zen-avatars/README.md

@@ -1,4 +1,3 @@
-
 # Zen's Avatars
 
 All avatars are fetched from [boring avatars](https://boringavatars.com/). Thanks a lot! <3

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

@@ -136,5 +136,15 @@
   <menuseparator/>
   <menuitem id="context_zenSetAsDefaultWorkspace" oncommand="ZenWorkspaces.setDefaultWorkspace();" data-l10n-id="zen-workspaces-panel-context-set-default"/>
   <menuitem id="context_zenEditWorkspace" oncommand="ZenWorkspaces.contextEdit(event);" data-l10n-id="zen-workspaces-panel-context-edit"/>
+  <menu id="context_zenWorkspacesOpenInContainerTab"
+    data-l10n-id="zen-workspaces-panel-context-open-in-container-tab"
+    selection-type="single"
+    node-type="link"
+    hide-if-private-browsing="true"
+    hide-if-usercontext-disabled="true">
+    <menupopup oncommand="ZenWorkspaces.contextChangeContainerTab(event);"
+          onpopupshowing="return ZenWorkspaces.createContainerTabMenu(event);" />
+  </menu>
+  <menuseparator/>
   <menuitem id="context_zenDeleteWorkspace" oncommand="ZenWorkspaces.contextDelete(event);" data-l10n-id="zen-workspaces-panel-context-delete"/>
 </menupopup>

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

@@ -1,4 +1,3 @@
-
 @keyframes zen-jello-animation {
   0% {
     transform: scale3d(0.8, 0.8, 0.8);
@@ -36,7 +35,7 @@
 
 @keyframes zen-slide-in {
   from {
-    transform: translateX(-10px);
+    transform: translateX(-30px);
     opacity: 0;
   }
   to {
@@ -83,11 +82,26 @@
 @keyframes zen-sidebar-panel-animation-2 {
   0% {
     opacity: 0;
-    transform: translateX(-5px);
+    transform: translateX(-50px) scale3d(0.95, 0.95, 0.95);
   }
 
   100% {
     opacity: 1;
+    transform: translateX(0) scale3d(1, 1, 1);
+  }
+}
+
+@keyframes zen-vtabs-animation {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  100% {
     transform: translateX(0);
   }
 }
@@ -95,11 +109,14 @@
 @keyframes zen-sidebar-panel-animation-right {
   0% {
     opacity: 0;
-    transform: translateX(5px);
+    transform: translateX(10px);
+  }
+  
+  20% {
+    opacity: 1;
   }
 
   100% {
-    opacity: 1;
     transform: translateX(0);
   }
 }
@@ -107,12 +124,12 @@
 @keyframes zen-sidebar-panel-animation-reverse {
   0% {
     opacity: 1;
-    transform: translateX(0);
+    transform: translateX(0) scale3d(1, 1, 1);
   }
 
   99% {
     opacity: 0;
-    transform: translateX(-50px);
+    transform: translateX(-50px) scale3d(0.95, 0.95, 0.95);
   }
 
   100% {

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

@@ -1,15 +1,41 @@
-
+:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
-:root:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not([chromehidden~="toolbar"]) {
   & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
     width: -moz-available;
-    margin: 0 var(--zen-element-separation) var(--zen-element-separation) 0;
-    box-shadow: 0 0 0 1px var(--zen-colors-border);
-    clip-path: inset(-5px -5px -5px round var(--zen-webview-border-radius, var(--zen-border-radius)));
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
     transform: translate3d(0, 0, 0);
-    overflow: hidden;
+    position: relative;
 
     /* This fixes an issue with the left border */
-    margin-left: 2px;
+    --zen-webview-correction-margin: 2px;
+    margin-left: var(--zen-webview-correction-margin);
+    margin-top: var(--zen-webview-correction-margin);
+    
+    #browser:has(#navigator-toolbox[zen-right-side="true"]) & {
+      margin-left: 0;
+      margin-right: var(--zen-webview-correction-margin);
+    }
+
+    --uc-tweak-rounded-corners-shadow-color: var(--zen-colors-border);
+
+    --uc-tweak-rounded-corners-shadow:
+      0 0 0 1px var(--uc-tweak-rounded-corners-shadow-color);
+
+    box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
+
+    /* Use pseudo element overlay to simulate rounded corners, similar to the
+     * tab corners, fixes bug with backdrop-filter. */
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      /* Draw toolbar background on the negative corner space, then draw the
+       * same shadow from the browser window on top. */
+      box-shadow:
+        var(--uc-tweak-rounded-corners-shadow, 0 0 transparent),
+        0 0 0 16px var(--zen-main-browser-background) !important;
+      clip-path: inset(0);
+      pointer-events: none;
+    }
   }
 }

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

@@ -1,4 +1,3 @@
- 
 #browser,
 #appcontent,
 #tabbrowser-tabpanels {
@@ -11,19 +10,34 @@
   --inactive-titlebar-opacity: 1;
 }
 
+:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
+  & #tabbrowser-tabpanels {
+    padding-right: var(--zen-element-separation);
+    padding-bottom: var(--zen-element-separation);
+
+    #browser:has(#navigator-toolbox[zen-right-side="true"]) & {
+      padding-right: 0;
+      padding-left: var(--zen-element-separation);
+    }
+  }
+}
+
+:root:is([inDOMFullscreen='true'], [chromehidden~='location'], [chromehidden~='toolbar']) {
+  #navigator-toolbox,
+  #zen-sidebar-splitter {
+    display: none;
+  }
+}
+
 #browser {
   width: 100%;
 }
 
-html#main-window > body {
+:not([inDOMFullscreen='true']) #appcontent {
-  background: var(--zen-main-browser-background) !important;
-}
-
-:not([inDOMFullscreen="true"]) #appcontent {
   overflow: hidden;
 }
 
-:not([inDOMFullscreen="true"]) #appcontent,
+:not([inDOMFullscreen='true']) #appcontent,
 #sidebar-box {
   /** Sidebar is already hidden in full screen mode */
   border: none;
@@ -31,9 +45,6 @@ html#main-window > body {
 
 #zen-main-app-wrapper {
   background: var(--zen-main-browser-background);
-
-  border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
-  border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
 }
 
 #tabbrowser-tabbox {

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

@@ -4,8 +4,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-@namespace html "http://www.w3.org/1999/xhtml";
+@namespace html 'http://www.w3.org/1999/xhtml';
-@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+@namespace xul 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
 
 /** This file is used to override UI inside "common-shared.css" */
 
@@ -13,7 +13,7 @@
 xul|button {
   border-radius: var(--zen-button-border-radius) !important;
   padding: var(--zen-button-padding) !important;
-  transition: .1s;
+  transition: 0.1s;
   min-width: 100px !important;
   font-weight: 500 !important;
 }
@@ -22,20 +22,14 @@ button:active {
   transform: scale(0.95);
 }
 
-html|button:not(:is(
+html|button:not(:is(.tab-button, .ghost-button, .button-toggle, .button-edit, .button-add, )),
-  .tab-button, .ghost-button,
+xul|button:is(.expander-down) {
-  .button-toggle, .button-edit,
+  transition: 0.2s;
-  .button-add,
-)),
-xul|button:is(
-  .expander-down
-) {
-  transition: .2s;
   min-width: unset !important;
   border-radius: 6px !important;
 }
 
-@media (-moz-bool-pref: "zen.theme.pill-button") {
+@media (-moz-bool-pref: 'zen.theme.pill-button') {
   :host(:is(.anonymous-content-host, notification-message)),
   :root {
     --zen-button-border-radius: 20px;

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

@@ -1,20 +1,23 @@
-
 /* All overrides for compact mode go here */
 
-@media not (-moz-bool-pref: "zen.view.compact") {
+@media not (-moz-bool-pref: 'zen.view.compact') {
   #sidebar-box {
     margin-top: 0 !important;
   }
 }
 
-@media (-moz-bool-pref: "zen.view.compact") {
+@media (-moz-bool-pref: 'zen.view.compact') {
-  :root[sizemode="fullscreen"],
+  :root[sizemode='fullscreen'],
-  #navigator-toolbox[inFullscreen]{ margin-top: 0 !important; }
+  #navigator-toolbox[inFullscreen] {
+    margin-top: 0 !important;
+  }
 
   #navigator-toolbox {
     --zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2);
-    --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single);
+    --zen-compact-toolbox-margin: 
-    position: absolute;
+      calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single) 
+      calc(var(--zen-compact-toolbox-margin-single) + var(--zen-element-separation)) var(--zen-compact-toolbox-margin-single);
+    position: absolute !important;
     display: block;
     transition: 200ms ease-in-out !important;
     transform: translateX(calc(-100% + (var(--zen-compact-toolbox-margin-single) / 2)));
@@ -23,13 +26,16 @@
     z-index: 2;
     height: 100%;
     margin: 0;
+    margin-top: var(--zen-element-separation) !important;
     padding: var(--zen-compact-toolbox-margin) !important;
 
+    min-width: 500px !important;
+
     & #titlebar {
       border: 1px solid var(--zen-colors-border);
       transition-delay: 200ms;
       background: var(--zen-colors-tertiary) !important;
-      padding: 0 5px;
+      padding: var(--zen-toolbox-padding);
       border-radius: var(--zen-panel-radius);
     }
 
@@ -37,30 +43,37 @@
       pointer-events: none;
     }
 
-    &, & #titlebar {
+    &,
-      min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 4) !important;
+    & #titlebar {
+      min-width: var(--zen-toolbox-min-width) !important;
     }
   }
 
-  @media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
+  :root:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
+    padding: var(--zen-element-separation) !important;
+    padding-top: 0 !important;
+  }
+
+  @media not (-moz-bool-pref: 'zen.view.sidebar-expanded') {
     #navigator-toolbox {
       width: fit-content !important;
+      --zen-toolbox-max-width: calc(50px + var(--zen-compact-toolbox-margin-single) * 2) !important;
     }
   }
 
-  @media (-moz-bool-pref: "zen.view.sidebar-expanded") {
+  @media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
     #navigator-toolbox {
       min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important;
     }
   }
 
-  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden="true"])),
+  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden='true'])),
-  #sidebar-box:not([positionend="true"]) {
+  #sidebar-box:not([positionend='true']) {
     margin-right: 0 !important;
     margin-left: var(--zen-sidebar-web-panel-spacing) !important;
   }
 
-  #sidebar-box[positionend="true"] {
+  #sidebar-box[positionend='true'] {
     margin-left: 0 !important;
     margin-right: var(--zen-sidebar-web-panel-spacing) !important;
   }
@@ -69,7 +82,7 @@
     margin: 0 !important;
   }
 
-  @media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
+  @media not (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
     #navigator-toolbox {
       /* Remove the top margin */
       /* The toolbox isn't relative to the webview anymore, meaning we can't just add a static value and call it a day... 
@@ -79,10 +92,16 @@
        *  3. Add element separation variable, to avoid overlaping with the toolbar
        *  4. Calculate toolbar height, taken from zen-urlbar.css
        */
-      --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) + .15rem + var(--zen-element-separation) + (18px + (var(--toolbarbutton-inner-padding) * 2))) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
+      --zen-compact-toolbox-margin: calc( 
+        var(--zen-element-separation) + 0.8rem + 
+        (18px + (var(--toolbarbutton-inner-padding) * 2)) 
+      ) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
 
-      :root[zen-sidebar-legacy="true"] & {
+      margin-top: 0 !important;
-        --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
+      :root[zen-sidebar-legacy='true'] & {
+        --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2)
+          var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single)
+          var(--zen-compact-toolbox-margin-single);
       }
     }
 
@@ -92,14 +111,21 @@
     }
   }
 
+  #navigator-toolbox[zen-right-side='true'] {
+    right: 0 !important;
+    transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;
+  }
+
   #navigator-toolbox:hover,
   #navigator-toolbox:focus-within,
   #navigator-toolbox[zen-user-show],
+  #navigator-toolbox[flash-popup],
   #navigator-toolbox[movingtab],
   #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
   #navigator-toolbox:has(.tabbrowser-tab:active),
-  #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
+  #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
     transform: none !important;
+    position: absolute !important;
     opacity: 1;
 
     & > * {
@@ -107,10 +133,12 @@
     }
   }
 
-  #navigator-toolbox > *{ line-height: normal; }
+  #navigator-toolbox > * {
+    line-height: normal;
+  }
 
   #navigator-toolbox,
-  #navigator-toolbox > *{
+  #navigator-toolbox > * {
     -moz-appearance: none !important;
   }
 
@@ -119,79 +147,63 @@
   }
 
   /* Don't apply transform before window has been fully created */
-  :root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }
+  :root:not([sessionrestored]) #navigator-toolbox {
+    transform: none !important;
+  }
 
-  :root[customizing] #navigator-toolbox{
+  :root[customizing] #navigator-toolbox {
     position: relative !important;
     transform: none !important;
     opacity: 1 !important;
   }
 
   #navigator-toolbox[inFullscreen] > #PersonalToolbar,
-  #PersonalToolbar[collapsed="true"]{ display: none }
+  #PersonalToolbar[collapsed='true'] {
-
+    display: none;
-  :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
-    margin-left: var(--zen-element-separation) !important;
   }
 
-  @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
+  :root:not([inDOMFullscreen='true']) #tabbrowser-tabbox #tabbrowser-tabpanels {
+    padding-left: var(--zen-element-separation) !important;
+  }
+
+  #zen-appcontent-navbar-container { 
+    z-index: 2;
+  }
+
+  @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
     #zen-appcontent-navbar-container {
       --urlbar-height: unset;
-      transition: .2s ease-in-out;
+      transition: 0.2s ease-in-out;
       transform: translateY(calc(-100% + var(--zen-element-separation)));
       opacity: 0;
       position: absolute;
       width: 100%;
       border-bottom-left-radius: 8px;
       border-bottom-right-radius: 8px;
+      border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
+      border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
       border-bottom: 1px solid var(--zen-colors-border);
       top: 0;
       background: var(--zen-colors-tertiary);
-      z-index: 2;
+      transition: 0.2s ease-in-out;
-      transition: .2s ease-in-out;
     }
 
     #zen-appcontent-navbar-container:hover,
     #zen-appcontent-navbar-container:focus-within,
+    #zen-appcontent-navbar-container:active,
     #zen-appcontent-navbar-container[zen-user-show],
     #mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container,
-    #zen-appcontent-navbar-container:has(*[open="true"]) {
+    #zen-appcontent-navbar-container:has(*[open='true']) {
       transform: translateY(0);
       opacity: 1;
     }
 
-    :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
+    :root:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
-      margin-top: var(--zen-element-separation) !important;
+      padding-top: var(--zen-element-separation) !important;
-    }
-
-    #titlebar {
-      padding-top: 5px !important;
     }
 
     #zen-sidebar-web-panel-wrapper {
       margin-top: 10px !important;
     }
   }
-
-  @media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
-    #navigator-toolbox {
-      right: 0 !important;
-      transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;;
-    }
-
-    #navigator-toolbox:hover,
-    #navigator-toolbox:focus-within,
-    #navigator-toolbox[zen-user-show],
-    #navigator-toolbox[movingtab],
-    #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
-    #navigator-toolbox:has(.tabbrowser-tab:active),
-    #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
-      transform: none !important;
-      opacity: 1;
-  
-      & > * {
-        pointer-events: all;  
-      }
-    }
-  }
 }

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

@@ -6,35 +6,36 @@
 
 /** Zen Decks - ONLY USED FOR SPLIT VIEWS, DO NOT USE THIS CLASS FOR ANY OTHER PURPOSE **/
 
-#tabbrowser-tabpanels[zen-split-view="true"] {
+#tabbrowser-tabpanels[zen-split-view='true'] {
   display: flex;
   flex-direction: row;
 }
 
-#tabbrowser-tabpanels[zen-split-view="true"] > *:not([zen-split="true"]) {
+#tabbrowser-tabpanels[zen-split-view='true'] > *:not([zen-split='true']) {
   flex: 0;
   margin: 0;
 }
 
-#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split="true"] {
+#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'] {
   flex: 1;
   margin-right: 5px;
 }
 
-#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split-anim="true"] {
+#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split-anim='true'] {
   animation: zen-deck-fadeIn 0.2s forwards;
 }
 
-#tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer[zen-split-active="true"] {
+#tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer[zen-split-active='true'] {
-  box-shadow: 0 0 0 2px var(--zen-primary-color) !important;
+  --uc-tweak-rounded-corners-shadow-color: var(--zen-primary-color) !important;
 }
 
-#tabbrowser-tabpanels:has(> [zen-split="true"]) {
+#tabbrowser-tabpanels:has(> [zen-split='true']) {
   display: grid;
-  grid-gap: 5px;
+  row-gap: var(--zen-element-separation);
+  column-gap: calc(var(--zen-element-separation) / 2);
 }
 
-#zen-split-views-box:not([hidden="true"]) {
+#zen-split-views-box:not([hidden='true']) {
   display: flex !important;
 }
 
@@ -103,7 +104,7 @@
 
 #zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid {
   display: grid;
-  grid-template-areas: "a b" "c b";
+  grid-template-areas: 'a b' 'c b';
   gap: 5px;
 }
 

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

@@ -1,8 +1,7 @@
-
+panel[type='arrow'][animate][animate='open'] {
-panel[type="arrow"][animate][animate="open"] {
   animation: zen-jello-animation 0.2s ease-in-out;
 }
 
-panel[type="arrow"][animate][animate="cancel"] {
+panel[type='arrow'][animate][animate='cancel'] {
   animation: zen-jello-out-animation 0.2s ease-in-out;
 }

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

@@ -7,7 +7,7 @@
   justify-content: center;
   align-items: center;
   margin: 16px;
-  background: light-dark(#fff, rgba(255,255,255,.1));
+  background: light-dark(#fff, rgba(255, 255, 255, 0.1));
 }
 
 #editBookmarkPanel::part(content) {

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

@@ -33,7 +33,7 @@ panelview .unified-extensions-item-action-button {
     }
 
     > .unified-extensions-item-menu-button {
-      list-style-image: url("chrome://global/skin/icons/more.svg");
+      list-style-image: url('chrome://global/skin/icons/more.svg');
       padding: 0;
 
       > .toolbarbutton-icon {
@@ -43,7 +43,6 @@ panelview .unified-extensions-item-action-button {
       }
 
       &:hover {
-
         > .toolbarbutton-icon {
           background-color: initial;
         }

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

@@ -3,25 +3,25 @@
   border: 1px solid var(--zen-dialog-border-color);
 }
 
-#window-modal-dialog:not([zen-dialog-welcome-element="true"]) .dialogBox:not(.spotlightBox) {
+#window-modal-dialog:not([zen-dialog-welcome-element='true']) .dialogBox:not(.spotlightBox) {
   transform: translateY(-9px);
 }
 
-#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogBox:not(.spotlightBox) {
+#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogBox:not(.spotlightBox) {
   margin: 0 !important;
 }
 
-#window-modal-dialog[zen-dialog-welcome-element="true"], 
+#window-modal-dialog[zen-dialog-welcome-element='true'],
-#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogOverlay,
+#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogOverlay,
-#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogFrame,
+#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogFrame,
-#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogBox {
+#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogBox {
   width: 100% !important;
   height: 100% !important;
   max-height: none !important;
   max-width: none !important;
 }
 
-#window-modal-dialog[zen-dialog-welcome-element="true"] {
+#window-modal-dialog[zen-dialog-welcome-element='true'] {
   --zen-welcome-dialog-space: 7px;
   margin: 0 auto !important;
   max-width: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important;

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

@@ -1,8 +1,7 @@
-
+@import url('chrome://browser/content/zen-styles/zen-panels/bookmarks.css');
-@import url("chrome://browser/content/zen-styles/zen-panels/bookmarks.css");
+@import url('chrome://browser/content/zen-styles/zen-panels/extensions.css');
-@import url("chrome://browser/content/zen-styles/zen-panels/extensions.css");
+@import url('chrome://browser/content/zen-styles/zen-panels/print.css');
-@import url("chrome://browser/content/zen-styles/zen-panels/print.css");
+@import url('chrome://browser/content/zen-styles/zen-panels/welcome.css');
-@import url("chrome://browser/content/zen-styles/zen-panels/welcome.css");
 
 :root {
   --panel-subview-body-padding: 2px 0;
@@ -46,7 +45,8 @@
   --zen-panel-separator-width: 1px;
 }
 
-menupopup, panel {
+menupopup,
+panel {
   --panel-background: var(--arrowpanel-background);
   --panel-border-radius: var(--zen-panel-radius);
 }
@@ -65,26 +65,26 @@ menupopup, panel {
   margin-block: 0;
 }
 
-.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined)>.toolbarbutton-text,
+.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
-.subviewbutton:not(#appMenu-zoom-controls > .subviewbutton)>.toolbarbutton-icon+.toolbarbutton-text,
+.subviewbutton:not(#appMenu-zoom-controls > .subviewbutton) > .toolbarbutton-icon + .toolbarbutton-text,
-#appMenu-fxa-label2>vbox {
+#appMenu-fxa-label2 > vbox {
   padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
 }
 
 /* special case menuitems with no icons */
-#appMenu-zoom-controls>.toolbarbutton-text,
+#appMenu-zoom-controls > .toolbarbutton-text,
-#fxa-manage-account-button>vbox,
+#fxa-manage-account-button > vbox,
-#PanelUI-fxa-menu-syncnow-button>hbox {
+#PanelUI-fxa-menu-syncnow-button > hbox {
   padding-inline-start: calc(16px + var(--uc-arrowpanel-menuicon-margin-inline));
 }
 
-.subviewbutton>.toolbarbutton-icon {
+.subviewbutton > .toolbarbutton-icon {
   width: 15px;
 }
 
 /* firefox profile avatar in appmenu */
 #appMenu-fxa-label2::before {
-  content: "";
+  content: '';
   display: -moz-box;
   height: 16px;
   width: 16px;
@@ -102,40 +102,46 @@ menupopup, panel {
   padding-block: 0;
 }
 
-#appMenu-fxa-status2:not([fxastatus])>#appMenu-fxa-label2 {
+#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
   margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1);
 }
 
 /* zoom controls */
 #appMenu-zoom-controls {
   border-top: 1px solid var(--panel-separator-color);
-  padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline);
+  padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline))
+    var(--uc-arrowpanel-menuitem-margin-inline);
   padding-block: var(--uc-panel-zoom-padding-block);
   margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1);
 }
 
-#appMenu-zoom-controls>.subviewbutton {
+#appMenu-zoom-controls > .subviewbutton {
   padding: var(--uc-panel-zoom-button-padding) var(--uc-panel-zoom-button-inline-padding);
   margin: 0;
 }
 
-#appMenu-zoom-controls>#appMenu-zoomReset-button2 {
+#appMenu-zoom-controls > #appMenu-zoomReset-button2 {
   padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2);
 }
 
 /* #appMenu-zoomReduce-button2, */
-#appMenu-zoom-controls>#appMenu-fullscreen-button2 {
+#appMenu-zoom-controls > #appMenu-fullscreen-button2 {
   margin-left: calc((var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px);
 }
 
-#appMenu-zoom-controls>#appMenu-fullscreen-button2::before {
+#appMenu-zoom-controls > #appMenu-fullscreen-button2::before {
-  content: "";
+  content: '';
   border-inline-start: 1px solid var(--panel-separator-color);
   display: block;
   position: relative;
   height: 32px;
   margin-block: calc(var(--uc-panel-zoom-button-padding) * -1);
-  transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px));
+  transform: translateX(
+    calc(
+      var(--uc-panel-zoom-button-inline-padding) * -1 -
+        (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px
+    )
+  );
 }
 
 #appMenu-zoomReset-button2 {
@@ -157,8 +163,8 @@ menupopup, panel {
   background-color: var(--panel-item-active-bgcolor);
 }
 
-#appMenu-zoomReset-button2>.toolbarbutton-text,
+#appMenu-zoomReset-button2 > .toolbarbutton-text,
-#appMenu-fullscreen-button2>.toolbarbutton-icon {
+#appMenu-fullscreen-button2 > .toolbarbutton-icon {
   background-color: transparent;
   padding: 0;
 }
@@ -171,11 +177,11 @@ menupopup, panel {
   padding-bottom: 0;
 }
 
-.PanelUI-subView>.panel-header+toolbarseparator {
+.PanelUI-subView > .panel-header + toolbarseparator {
   margin-bottom: 0;
 }
 
-.PanelUI-subView>.panel-header+toolbarseparator+.panel-subview-body {
+.PanelUI-subView > .panel-header + toolbarseparator + .panel-subview-body {
   padding-top: var(--panel-separator-margin-vertical);
 }
 
@@ -192,7 +198,7 @@ menupopup, panel {
 
 /* URL bar popup */
 
-.identity-popup-security-connection>hbox>description {
+.identity-popup-security-connection > hbox > description {
   margin-inline-start: 0;
 }
 
@@ -226,8 +232,8 @@ menupopup, panel {
   margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
 }
 
-#editBookmarkPanel>#editBookmarkHeaderSeparator,
+#editBookmarkPanel > #editBookmarkHeaderSeparator,
-#editBookmarkPanel>.panel-subview-body>#editBookmarkSeparator {
+#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator {
   margin-inline: 0;
 }
 
@@ -237,7 +243,6 @@ menupopup, panel {
   opacity: 0;
 }
 
-
 menupopup::part(content),
 panel::part(content) {
   border: var(--zen-appcontent-border);
@@ -263,7 +268,8 @@ panel {
   --arrowpanel-menuitem-padding-inline: 15px;
 }
 
-toolbarseparator, menuseparator {
+toolbarseparator,
+menuseparator {
   border-width: var(--zen-panel-separator-width);
 }
 
@@ -277,8 +283,9 @@ toolbarseparator, menuseparator {
 }
 
 /* Context menu */
-menu, menuitem {
+menu,
-  &:where([_moz-menuactive]:not([disabled="true"])) {
+menuitem {
+  &:where([_moz-menuactive]:not([disabled='true'])) {
     background-color: var(--button-hover-bgcolor);
     color: var(--button-hover-color);
   }

src/browser/base/content/zen-styles/zen-profile-dialog.css

@@ -50,7 +50,7 @@
 
 .PanelUI-zen-profiles-item::after {
   content: '';
-  background-image: url("chrome://global/skin/icons/arrow-right.svg");
+  background-image: url('chrome://global/skin/icons/arrow-right.svg');
   background-size: 1em;
   background-repeat: no-repeat;
   background-position: center;
@@ -97,7 +97,6 @@
   margin: 0 auto;
 }
 
-
 #PanelUI-zen-profiles toolbarbutton::after {
   display: none;
 }
@@ -107,7 +106,6 @@
   padding-right: 16px;
 }
 
-
 #PanelUI-zen-profiles toolbarbutton:last-child {
   margin-bottom: 5px !important;
 }
@@ -120,7 +118,6 @@
   font-weight: 600;
 }
 
-
 #PanelUI-zen-profiles-actions {
   color-scheme: dark;
   position: absolute;
@@ -128,7 +125,7 @@
   right: 10px;
   border-radius: 10px !important;
   padding: 1px 10px !important;
-  transition: .1s;
+  transition: 0.1s;
   color: light-dark(white, black);
   background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
 }

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

@@ -4,7 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
- #zen-sidebar-panels-wrapper {
+#zen-sidebar-panels-wrapper {
   /*min-height: 500px;*/
   display: flex;
   align-items: center;
@@ -19,7 +19,7 @@
 }
 
 #zen-sidebar-add-panel-button:not(:hover) image,
-.zen-sidebar-panel-button:not([selected="true"], #zen-sidebar-add-panel-button) image {
+.zen-sidebar-panel-button:not([selected='true'], #zen-sidebar-add-panel-button) image {
   background: transparent !important;
 }
 
@@ -45,7 +45,7 @@
   background: color-mix(in srgb, var(--toolbarbutton-hover-background) 12%, transparent);
 }
 
-.zen-sidebar-panel-button[selected="true"] image {
+.zen-sidebar-panel-button[selected='true'] image {
   border-color: var(--zen-primary-color);
 }
 
@@ -61,13 +61,13 @@
   transition: width 0.3s ease-in-out;
 }
 
-#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden="true"]) {
+#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden='true']) {
   max-width: 0;
   padding: 0;
   margin: 0;
 }
 
-#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned="true"]) {
+#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
   margin: var(--zen-appcontent-separator-from-window);
   position: absolute;
   z-index: 1;
@@ -92,7 +92,7 @@
   height: calc(100% - 20px);
 }
 
-#zen-sidebar-web-panel:not([pinned="true"]) {
+#zen-sidebar-web-panel:not([pinned='true']) {
   /* We need to always override the height */
   height: unset !important;
 }
@@ -119,23 +119,23 @@
   cursor: ns-resize;
 }
 
-#zen-sidebar-web-panel[hidden="true"] #zen-sidebar-web-panel-hsplitter,
+#zen-sidebar-web-panel[hidden='true'] #zen-sidebar-web-panel-hsplitter,
-#zen-sidebar-web-panel-wrapper[hidden="true"] + #zen-sidebar-web-panel-splitter,
+#zen-sidebar-web-panel-wrapper[hidden='true'] + #zen-sidebar-web-panel-splitter,
-#zen-sidebar-web-panel-wrapper[hidden="true"] + #zen-sidebar-web-panel-hsplitter,
+#zen-sidebar-web-panel-wrapper[hidden='true'] + #zen-sidebar-web-panel-hsplitter,
-#zen-sidebar-web-panel:not([pinned="true"]) #zen-sidebar-web-panel-hsplitter {
+#zen-sidebar-web-panel:not([pinned='true']) #zen-sidebar-web-panel-hsplitter {
   display: none;
   margin: 0;
 }
 
-#zen-sidebar-web-panel:not([pinned="true"]) {
+#zen-sidebar-web-panel:not([pinned='true']) {
   animation: zen-sidebar-panel-animation 0.3s ease-in-out forwards;
 }
 
-#main-window[customizing="true"] #zen-sidebar-web-panel-wrapper {
+#main-window[customizing='true'] #zen-sidebar-web-panel-wrapper {
   display: none !important;
 }
 
-#zen-sidebar-web-panel:not([hidden="true"]) {
+#zen-sidebar-web-panel:not([hidden='true']) {
   display: flex;
 }
 
@@ -143,16 +143,16 @@
   margin: 0 var(--zen-element-separation) var(--zen-element-separation) 1px;
 }
 
-#zen-sidebar-web-panel[pinned="true"] {
+#zen-sidebar-web-panel[pinned='true'] {
   position: absolute;
   z-index: 1;
-  animation: zen-sidebar-panel-animation-2 0.2s ease-in-out forwards;
+  animation: zen-sidebar-panel-animation-2 0.15s ease-in-out forwards;
 }
 
-#zen-sidebar-web-panel[hidden="true"][pinned="true"] {
+#zen-sidebar-web-panel[hidden='true'][pinned='true'] {
   display: flex;
   pointer-events: none;
-  animation: zen-sidebar-panel-animation-reverse 0.2s ease-in-out forwards;
+  animation: zen-sidebar-panel-animation-reverse 0.15s ease-in-out forwards;
 }
 
 #zen-sidebar-web-header,
@@ -199,7 +199,7 @@
   width: 70%;
 }
 
-#zen-sidebar-introduction-panel[hidden="true"] {
+#zen-sidebar-introduction-panel[hidden='true'] {
   display: none;
 }
 

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

@@ -1,117 +1,6 @@
-/*
- * 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/.
- */
 
-:root {
+toolbar {
-  --sidebar-background-color: var(--toolbar-bgcolor) !important; 
+  min-height: 46px;
-  --zen-sidebar-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-}
-
-#sidebar-box {
-  --zen-sidebar-box-border-radius: var(--zen-panel-radius);  
-  margin: var(--zen-element-separation);
-  border-radius: var(--zen-sidebar-box-border-radius);
-  overflow: hidden;
-  transition: .2s;
-  margin-left: 0;
-  border: var(--zen-appcontent-border);
-  box-shadow: none;
-  margin-top: 0;
-}   
-
-#sidebar-box[hidden="true"] {
-  width: 0;
-  opacity: 0;
-}
-
-#sidebar-box:not([positionend="true"]) {
-  margin-right: 0;
-}
-
-#zen-main-app-wrapper:has(#sidebar-box:not([hidden="true"], [positionend="true"])) #TabsToolbar {
-  margin-right: 0 !important;
-  box-shadow: none !important;
-}
-
-#sidebar-splitter {
-  /* we can still use the splitter but we can't see it */
-  background: transparent !important;  
-  border-color: transparent !important;
-  width: 1px !important;
-  margin-right: 5px;
-}
-
-#sidebar-box[positionend] {
-  margin-left: 0;
-}
-
-.zen-sidebar-action-button {
-  --toolbarbutton-active-background: var(--zen-colors-secondary);
-  width: var(--zen-sidebar-action-button-width);
-  height: var(--zen-sidebar-action-button-width);
-  padding: 0;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#TabsToolbar .toolbarbutton-1 {
-  width: var(--zen-sidebar-action-button-width);
-  height: var(--zen-sidebar-action-button-width);
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
-#TabsToolbar .toolbarbutton-1:not(.zen-sidebar-panel-button) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
-.zen-sidebar-action-button {
-  border-radius: 8px !important;
-}
-
-:root[customizing] #navigator-toolbox {
-  display: none;
-}
-
-.zen-sidebar-action-button:hover {
-  background: var(--toolbarbutton-hover-background) !important;
-}
-
-.zen-sidebar-action-button:hover image {
-  background: transparent !important;
-}
-
-#sidebar-box[hidden="true"] .zen-sidebar-action-button,
-.zen-sidebar-panel-button[animate] {
-  opacity: 0;
-  transform: translateX(-110%);
-  animation: zen-sidebar-button-fadeIn 0.4s forwards;
-}
-
-@keyframes zen-sidebar-button-fadeIn {
-  0% {
-    transform: translateX(-110%);
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* Icons */
-
-#zen-preferences-button {
-  list-style-image: url("chrome://global/skin/icons/settings.svg");
-}
-
-#zen-history-button {
-  list-style-image: url("chrome://browser/skin/history.svg");
-}
-
-#zen-bookmark-button {
-  list-style-image: url(chrome://browser/skin/bookmark-hollow.svg);
 }
 
 #zen-profile-button {
@@ -119,101 +8,75 @@
   justify-content: center;
   position: relative;
   align-items: center;
-}
+  list-style-image: var(--avatar-image-url);
-
-#zen-profile-button::before {
-  background-image: var(--avatar-image-url);
-  border-radius: 50%;
-  background-size: cover;
-  background-position: center;
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--zen-colors-border);
-  content: '';
-  top: 50%;
-  left: var(--toolbar-start-end-padding);
-  transform: translateY(-50%);
-  position: absolute;
-}
-
-/* Ugly code */
-
-#TabsToolbar .zen-sidebar-action-button:nth-child(1),  .zen-sidebar-panel-button:nth-child(1) { animation-delay: 0.1s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(2),  .zen-sidebar-panel-button:nth-child(2) { animation-delay: 0.2s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(3),  .zen-sidebar-panel-button:nth-child(3) { animation-delay: 0.3s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(4),  .zen-sidebar-panel-button:nth-child(4) { animation-delay: 0.4s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(5),  .zen-sidebar-panel-button:nth-child(5) { animation-delay: 0.5s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(6),  .zen-sidebar-panel-button:nth-child(6) { animation-delay: 0.6s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(7),  .zen-sidebar-panel-button:nth-child(7) { animation-delay: 0.7s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(8),  .zen-sidebar-panel-button:nth-child(8) { animation-delay: 0.8s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(9),  .zen-sidebar-panel-button:nth-child(9) { animation-delay: 0.9s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(10), .zen-sidebar-panel-button:nth-child(10) { animation-delay: 1s; }
-
-#zen-sidebar-icons-wrapper toolbarbutton {
   position: relative;
-}
+  border-radius: var(--tab-border-radius);
 
-#zen-sidebar-icons-wrapper {
+  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
+  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
+
+  & image {
+    border-radius: 999px;
     display: flex;
-  flex-direction: column;
+    justify-content: center;
-  margin: 0 var(--zen-tabbrowser-padding);
-  position: relative;
-  background: transparent !important;
     align-items: center;
-  justify-content: end;
+    height: calc(var(--toolbarbutton-inner-padding) + 10px);
-  min-height: fit-content;
+    width: calc(var(--toolbarbutton-inner-padding) + 10px);
-  --zen-sidebar-action-content-separator: calc(10px + var(--zen-tabbrowser-padding));
+    padding: 0;
-  padding-top: var(--zen-sidebar-action-content-separator);
-  margin-top:  var(--zen-sidebar-action-content-separator);
-  color-scheme: inherit !important;
-}
-
-#zen-sidebar-icons-wrapper::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60%;
-  height: 1px;
-  background: var(--zen-colors-border);
-}
-
-#zen-sidepanel-button[hidden="true"] {
-  display: none;
-}
-
-#zen-expand-sidebar-button {
-  display: none;
-}
-
-:root:not([inDOMFullscreen="true"]) #zen-sidebar-splitter {
-  display: block;
-  width: 1px;
-  opacity: 0;
-}
-
-:root[inDOMFullscreen="true"] #zen-sidebar-splitter {
-  display: none;
-}
-
-@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
-  #navigator-toolbox {
-    width: 0;
-    padding-right: 2px;
   }
 
-  #zen-sidebar-splitter {
+  &:hover {
-    display: none !important;
+    background-color: var(--toolbarbutton-hover-background);
+
+    & image {
+      background: transparent !important;
+    }
   }
 }
 
-@media (-moz-bool-pref: "zen.view.sidebar-expanded.show-button") {
+@media not (-moz-bool-pref: 'zen.view.sidebar-expanded.show-button') {
   #zen-expand-sidebar-button {
-    display: flex;
+    display: none !important;
   }
 }
 
-:root:is([chromehidden~="location"], [chromehidden~="toolbar"]) #navigator-toolbox {
+/*#zen-profile-button::before {
+  background: transparent;
+  border-radius: 50%;
+  border: 3px solid var(--zen-colors-border);
+  position: absolute;
+  content: "";
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px - 8px - var(--toolbarbutton-inner-padding));
+  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px - 8px - var(--toolbarbutton-inner-padding));
+}*/
+
+/* Bookmarks sidebar */
+#zen-tabbox-wrapper {
+  & #sidebar-splitter {
+    opacity: 0;
+  }
+
+  & #sidebar-box {
+    border-radius: var(--zen-border-radius);
+    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+    margin-bottom: var(--zen-element-separation) !important;
+    overflow: hidden;
+    border: 1px solid var(--zen-colors-border);
+
+    :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[positionend="true"] {
+      margin-right: var(--zen-element-separation);
+    }
+    
+    :root:has(#navigator-toolbox[zen-right-side='true']) & {
+      margin-left: var(--zen-element-separation);
+    }
+  }
+}
+
+/* Menubar */
+#toolbar-menubar {
   display: none !important;
 }

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

@@ -22,15 +22,14 @@
 }
 
 #zen-watermark image {
-  opacity: .2;
+  opacity: 0.2;
   filter: grayscale(100%);
   width: 200px;
   height: 200px;
 }
 
-#zen-watermark[hidden="true"] {
+#zen-watermark[hidden='true'] {
   transition: 0.6s;
-  transition-delay: .5s;
   opacity: 0;
   pointer-events: none;
 }
@@ -43,7 +42,7 @@
   text-overflow: ellipsis;
 }
 
-@media not (-moz-bool-pref: "zen.watermark.enabled") {
+@media not (-moz-bool-pref: 'zen.watermark.enabled') {
   #zen-watermark {
     display: none;
   }

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

@@ -1,8 +1,13 @@
-
 /* Styles for both vertical and horizontal tabs */
-@import url("chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css");
+@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');
-@import url("chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css");
+@import url('chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css');
 
 #zen-tabbox-wrapper {
   position: relative;
 }
+
+@media (-moz-bool-pref: 'zen.workspaces.hide-default-container-indicator') {
+  .tabbrowser-tab[zenDefaultUserContextId='true'] .tab-context-line {
+    display: none !important;
+  }
+}

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

@@ -1,3 +1,2 @@
-@media not (-moz-bool-pref: "zen.tabs.vertical") {
+@media not (-moz-bool-pref: 'zen.tabs.vertical') {
-  
 }

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

@@ -1,480 +1,349 @@
+@media (-moz-bool-pref: 'zen.tabs.vertical') {
 
-@media (-moz-bool-pref: "zen.tabs.vertical") {
+  #tabbrowser-tabs,
-  #titlebar {
+  #TabsToolbar,
+  #titlebar,
+  #TabsToolbar-customization-target {
+    flex-direction: column;
     height: 100%;
   }
 
-  #vertical-pinned-tabs-container {
+  #private-browsing-indicator-with-label {
-    padding-inline-end: 0 !important;
-    max-height: unset !important;
-    overflow: visible !important;
-    gap: 4px;
-
-    & .tabbrowser-tab:not(:hover):not([selected]):not([multiselected]) {
-      background: color-mix(in srgb, var(--zen-colors-secondary) 20%, transparent 80%);
-    }
-  }
-
-  #tabs-newtab-button {
     display: none !important;
   }
 
-  #newtab-button-container {
+  #browser {
-    margin-inline-end: 0 !important;
+    --zen-toolbox-padding: 5px;
-    margin-top: 0;
-    margin-bottom: calc(var(--space-small) / 2);
-    position: relative;
-    padding-top: 0 !important;
 
-    --zen-sidebar-action-button-width: 35px;
+    :root:not([zen-sidebar-legacy='true']) & {
-
+      --zen-toolbox-top-align: var(--zen-toolbox-padding);
-    & #vertical-tabs-newtab-button {
-      background: color-mix(in srgb, var(--button-hover-bgcolor) 40%, transparent 60%);
-    }
-
-    &::before {
-      width: 70%;
-      height: 1.2px;
-      background: var(--zen-colors-border);
-      content: '';
-      position: absolute;
-      top: -1px;
-      left: 50%;
-      display: none;
-      transform: translateX(-50%);
-    }
-
-    &[showborder] {
-      margin-top: var(--space-small);
-      border-top: 0px solid transparent !important;
-      padding-top: var(--space-small) !important;
-
-      &::before {
-        display: block;
-      }
     }
   }
 
   #navigator-toolbox {
-    --zen-tabbrowser-padding: 5px;
+    --border-radius-medium: 8px;
-    margin-top: 0; /* Issue #156 */
+    --tab-border-radius: var(--border-radius-medium);
-    order: 0 !important;
+    --zen-toolbox-min-width: 1px;
-  }
 
-  #zen-sidebar-splitter {
+    --tab-hover-background-color: var(--toolbarbutton-hover-background) !important;
-    order: 0 !important;
+
-  }
+    min-width: var(--zen-toolbox-min-width);
+
+    padding: var(--zen-toolbox-padding);
+    padding-top: var(--zen-toolbox-top-align);
 
-  #navigator-toolbox {
     margin-top: 0 !important;
+    display: flex;
   }
 
-  #zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state="dragging"])) #navigator-toolbox {
-    transition: .3s;
-  }
-  
-  #navigator-toolbox toolbar#TabsToolbar {
-    margin: var(--zen-appcontent-separator-from-window);
-    overflow: hidden;
-    transition: .2s;
-    flex-direction: column;
-    padding: 5px 0;
-    margin-right: 0;
-    -moz-window-dragging: no-drag;
-    --zen-sidebar-action-button-width: 38px;
-    padding-bottom: calc(5px + 5px); /* Taking into consideration the padding of the sidebar without being inlined */
-
-    :root[zen-sidebar-legacy="true"] & {
-      padding-top: 0 !important;
-    }
-  }
 
   #TabsToolbar-customization-target {
-    flex-direction: column;
-    max-width: 100%;
-  }
-  
-  :root[customizing] .customization-target:not(#widget-overflow-fixed-list) {
-    min-width: 0;
-  }
-  
-  toolbarpaletteitem {
-    justify-content: center;
-  }
-  
-  toolbarbutton#scrollbutton-down,
-  toolbarbutton#scrollbutton-up {
-    display: none;
-  }
-  
-  #toolbar-menubar {
-    display: none;
-  }
-  
-  .tab-label-container {
-    display: none;
-  }
-  
-  .tab-icon-stack > .tab-icon-image,
-  .tab-icon-stack > .tab-throbber {
-    width: var(--zen-browser-tab-icon-size);
-    height: var(--zen-browser-tab-icon-size);
-    margin-inline-end: 0;
-  }
-  
-  .tab-icon-stack .tab-icon-image {
-    transform: scale(0.5);
-    opacity: 0;
-    animation: zen-zoom-in 0.12s ease-in-out 0.3s forwards;
-  }
-  
-  .tab-background {
-    display: none;
-  }
-  
-  .tabbrowser-tab {
-    --zen-browser-tab-icon-size: 16px;
-    --tab-min-width: 36px;
-    margin: 0 auto;
-    border-radius: 8px;
     position: relative;
-    color-scheme: var(--tab-selected-color-scheme);
+    gap: var(--zen-toolbox-padding);
-    border: 2px solid transparent;
+    &::after {
-    background: transparent;
+      content: '';
-    padding: 0;
+      display: block;
-    align-items: center;
+      height: 1px;
-    min-height: var(--tab-min-width); /* Make a box */
+      background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
-    animation: zen-slide-in 0.3s;
+      margin: 0 auto;
-    width: calc(var(--zen-browser-tab-icon-size) + 2px);
+      width: 80%;
-    transition: .1s background, .1s border-color;
+      left: 50%;
-    min-width: var(--tab-min-width);
+      transform: translateX(-50%);
-    display: flex;
+      position: absolute;
-    justify-content: center;
+      bottom: calc(-1 * var(--zen-toolbox-padding));
-    align-items: center;
+    }
   }
 
-  @media (-moz-bool-pref: "zen.tabs.dim-pending") {
+  #tabbrowser-tabs {
-    .tabbrowser-tab[pending]:not(:hover) {
+    margin-inline-start: 0 !important;
+    padding-inline-start: 0 !important;
+
+    position: relative;
+    border-bottom: 0px solid transparent !important;
+
+    --tab-block-margin: 2px;
+    grid-gap: 0 !important;
+
+    & .tabbrowser-tab {
+      animation: zen-slide-in 0.2s;
+
+      max-width: unset !important;
+      padding: 0 !important;
+
+      font-size: var(--urlbarView-small-font-size);
+
+      position: relative;
+
+      height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
+      min-height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
+
+      border-radius: var(--border-radius-medium);
+
+      & .tab-background {
+        overflow: hidden;
+
+        & .tab-context-line {
+          margin: 0 0px !important;
+          width: 3px !important;
+        }
+      }
+
+      @media (-moz-bool-pref: 'zen.tabs.dim-pending') { 
+        &[pending='true'] .tab-icon-image {
           opacity: 0.5;
         }
       }
-  
+    }
-  .tabbrowser-tab[hidden="true"] {
-    display: none;
   }
 
-  .tabbrowser-tab:hover {
+  #zen-sidebar-icons-wrapper {
-    background: var(--toolbarbutton-hover-background);
+    background: transparent;
-  }
 
-  .tabbrowser-tab:active,
+    & toolbarbutton {
-  .zen-sidebar-panel-button:active {
-    transform: scale(0.9);
-  }
-  
-  .tab-stack {
-    width: 30px;
-    height: 30px;
-    min-width: 30px;
-    min-height: 30px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .tabbrowser-tab:not([fadein]) {
-    display: none;
-  }
-  
-  .tabbrowser-tab:is([multiselected="true"], [selected]) {
-    background: var(--toolbarbutton-hover-background);
-  }
-  
-  #private-browsing-indicator-with-label {
-    display: none;
-  }
-  
-  .tabbrowser-tab::after {/* Containers */
-    background: var(--identity-tab-color, transparent);
-    border-radius: 2px;
-    height: 80%;
-    width: 2px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: -2px;
-    content: '';
-    pointer-events: none;
-  }
-  
-  .tabbrowser-tab {
-    margin-inline-start: 0;
-    margin: 0 auto;
-    margin-bottom: 1.5px;
-  }
-  
-  .tabbrowser-tab[pinned] {
-    position: relative;
-    display: flex;
-  }
-  
-  .tab-close-button {
-    position: absolute;
-    display: none;
-    left: 0;
-    top: 50%;
-  }
-  
-  .tabbrowser-tab[open="true"]:hover .tab-close-button {
-    /* TODO: fix this */
-    /*display: block;*/
-  }
-  
-  .tab-content {
-    padding: 0;
       width: fit-content;
-
-    &[pinned] {
       padding: 0 !important;
     }
   }
 
-  .toolbar-items > toolbartabstop:first-child {
+  #newtab-button-container {
-    display: none;
+    margin-inline-end: 0 !important;
+    padding-top: 0 !important;
+    border-top: solid transparent 0px !important;
+    margin: 0 2px !important;
+
+    &[showborder] {
+      padding-top: 4px !important;
+
+      &::before {
+        content: '';
+        display: block;
+        height: 1px;
+        background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
+        margin: 0 auto;
+        margin-block-end: 4px;
+        width: 80%;
       }
-  
-  #nav-bar > *:not(.titlebar-buttonbox-container) {
-    padding-top: 5px;
-    padding-bottom: 5px;
     }
-  
-  #TabsToolbar-customization-target {
-    height: 100%;
-  }
-  
-  #tabbrowser-tabs {
-    margin-inline-start: 0;
-    padding-inline-start: 0;
-    border: none;
-    /*background: light-dark(rgba(0,0,0,.05), rgba(255,255,255,.05));*/
-    margin: 0;
-    border: none;
-    height: 100%;
-
-    border-bottom: 0 !important;
-
-    padding-inline-start: 0 !important;
-    margin-inline-start: 0 !important;
-
-    grid-gap: 0 !important;
   }
 
   #tabbrowser-arrowscrollbox {
-    margin-bottom: 3px !important;
+    &::part(scrollbox) {
-  }
+      gap: 0px !important;
-  
-  #alltabs-button stack {
-    transform: rotate(-90deg);
-  }
-  
-  .tab-icon-overlay {
-    margin-inline-end: 0 !important;
-    display: none; /* TODO: fix this */
-  }
-
-  @media (-moz-bool-pref: "zen.view.sidebar-collapsed.hide-mute-button") and (not (-moz-bool-pref: "zen.view.sidebar-expanded")) {
-    .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
-      display: none;
     }
   }
 
-  @media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") {  
-    :root:not([zen-sidebar-legacy="true"]) #navigator-toolbox:is([zen-user-hover="true"]:hover, :not([zen-user-hover="true"])) {
-      padding-right: 47px !important;
-    }
-  }
-  
-  @media (-moz-bool-pref: "zen.view.sidebar-expanded") {  
-    #navigator-toolbox:is(
-        #navigator-toolbox[zen-user-hover="true"]:hover,
-        #navigator-toolbox[zen-user-hover="true"]:focus-within,
-        #mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox,
-        #navigator-toolbox[zen-user-hover="true"]:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)), 
-      :not([zen-user-hover="true"])) {
-      --zen-hover-animation: zen-sidebar-panel-animation-2;
-      --zen-navigation-toolbar-min-width: 155px;
-      min-width: var(--zen-navigation-toolbar-min-width) !important;
-      align-items: start;
-      transition: .2s;
-      width: 170px;
-      border: none;
-      padding-left: 2px;
-      animation: var(--zen-hover-animation) 0.3s backwards;
-
   #vertical-pinned-tabs-container {
-        margin-left: var(--zen-tabbrowser-padding);
+    padding-inline-end: 0 !important;
+    gap: 3px !important;
+    max-height: unset !important;
+    overflow: visible !important;
+
+    & .tab-background:not(:hover):not([selected]):not([multiselected]) {
+      background: color-mix(in srgb, var(--zen-colors-secondary) 20%, transparent 80%) !important;
     }
 
-      #newtab-button-container {
+    & .tabbrowser-tab .tab-content {
-        margin: calc(var(--zen-tabbrowser-padding) - 2px);
+      display: flex;
-        margin-bottom: 0;
+      align-items: center;
-        margin-bottom: var(--space-small);
+      justify-content: center;
-
+    }
-        &[showborder] {
-          margin-top: 0;
-          padding-top: calc(var(--space-small) / 2) !important;
   }
 
+  /* Mark: toolbox as expanded */
+  #navigator-toolbox:is(
+    #navigator-toolbox[zen-user-hover='true']:hover,
+    #navigator-toolbox[zen-user-hover='true']:focus-within,
+    #navigator-toolbox[zen-user-hover='true'][movingtab],
+    #navigator-toolbox[zen-user-hover='true'][flash-popup],
+    #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
+    #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
+    #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) {
+    --zen-toolbox-min-width: 150px;
+
+    & #zen-sidebar-icons-wrapper {
+      display: grid;
+      /* Make sure the icons take most of the space, smartly */
+      grid-template-columns: repeat(auto-fit, minmax(34px, auto));
+      gap: 4px;
+      justify-content: space-between;
+
+      padding-top: calc(var(--zen-toolbox-padding) * 2);
+
+      width: 100%;
+      position: relative;
+
+      --toolbarbutton-inner-padding: 9px !important;
+
+      justify-content: space-between;
+    }
+
+    /* Mark: Fix separator paddings */
+    &[zen-right-side='true'] {
+      padding-left: 0 !important;
+    }
+
+    &:not([zen-right-side='true']) {
+      padding-right: 0 !important;
+    }
+
+    & #TabsToolbar-customization-target {
+      &::after {
+        width: 98%;
+        bottom: calc(-0.5 * var(--zen-toolbox-padding));
+      }
+    }
+
+    & #newtab-button-container {
       &::before {
         width: 100%;
-          top: calc(100% + var(--space-small));
+        margin-block-end: calc(var(--zen-toolbox-padding) + 2px);
-          display: block;
-        }
       }
 
-      & .tab-label-container {
+      & #vertical-tabs-newtab-button {
-        display: block;
+        padding: 0 !important;
+
+        & label {
+          display: flex;
+          text-align: start;
+          align-items: center;
+          padding: 0;
         }
   
-      & #titlebar,
+        &:hover * {
-      & #TabsToolbar,
-      & #TabsToolbar .toolbar-items {
-        width: 100%;
-        align-items: flex-start;
-      }
-    
-      & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) {
-        width: 100% !important;
-        border-radius: 8px;
-      }
-    
-      & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button):hover {
-        background: var(--button-hover-bgcolor);
-      }
-    
-      & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-text,
-      & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-icon,
-      & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-badge-stack {
           background: transparent !important;
         }
-    
+      }
-      & #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      & #tabbrowser-arrowscrollbox .tabbrowser-tab:first-child:not([hidden]) {
-        margin-top: var(--space-small) !important;
     }
 
+    & #tabbrowser-tabs {
       & .tabbrowser-tab {
-        max-width: unset !important;
+        & .tab-background {
+          @media not (prefers-color-scheme: dark) {
+            box-shadow: none !important;
+          }
+        }
 
-        &:not([pinned]) {
+        &:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
-          width: 100%;
-        
-          &:hover .tab-close-button {
           display: block !important;
         }
 
-          & .tab-content {
+        .tab-throbber,
-            position: relative;
+        .tab-icon-pending,
-            width: 100%;
+        .tab-icon-image,
+        .tab-sharing-icon-overlay,
+        .tab-icon-overlay {
+          &:not([pinned]) {
+            margin-inline-end: var(--toolbarbutton-inner-padding) !important;
+            margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important;    
+          }
+        }
+      }
     }
 
-          & .tab-stack {
+    @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') {
-            justify-content: start;
+      :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) {
-            padding: 10px;
+        padding-right: 47px !important;
+      }
+      
+      & #zen-profile-button {
         width: 100% !important;
+        padding: var(--toolbarbutton-inner-padding) !important;
+  
+        & label {
+          padding-left: calc(var(--toolbarbutton-inner-padding) * 1.5);
         }
-    
-          & .tab-label-container {
-        
-            #tabbrowser-tabs:not([secondarytext-unsupported]) & {
-              display: flex;
-              align-items: center;
-              padding-left: 10px;
       }
     }
   }
 
-        &:active,
+  /* Mark: toolbox as collapsed */
-        .zen-sidebar-panel-button:active {
+  #navigator-toolbox:not(#navigator-toolbox:is(
-          transform: scale(0.96) !important;
+    #navigator-toolbox[zen-user-hover='true']:hover,
-        }
+    #navigator-toolbox[zen-user-hover='true']:focus-within,
+    #navigator-toolbox[zen-user-hover='true'][movingtab],
+    #navigator-toolbox[zen-user-hover='true'][flash-popup],
+    #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
+    #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
+    #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']))) {
+    --zen-toolbox-max-width: 50px;
+    max-width: var(--zen-toolbox-max-width) !important;
 
-        &[pinned] {
+    #vertical-tabs-newtab-button {
-          margin: 0 !important;
+      padding: 0 !important;
-        }
+      background: transparent !important;
-      }
-
-      & #tabbrowser-arrowscrollbox::part(scrollbox) {
-        /* We have the pinned tabs on the top, next to each other,
-        * and the rest of the tabs are below them. */
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(var(--tab-min-height), 1fr));
-        padding: calc(var(--zen-tabbrowser-padding) / 2);
-        padding-right: 0;
-      }
-    
-      & .tabbrowser-tab:not([pinned]),
-      & #tabbrowser-arrowscrollbox-periphery {
-        grid-column: 1 / -1;
-      }
-    
-      & .tabbrowser-tab[pinned] {
-        grid-column: span 1;
-        min-width: 100%;
     }
 
     & #zen-sidebar-icons-wrapper {
-        width: -moz-available;
+      display: flex;
-        display: grid;
+      flex-direction: column;
-        grid-template-columns: repeat(auto-fill, minmax(37px, 1fr));
+      padding-top: calc(var(--zen-toolbox-padding) * 2);
-        transition: .1s;
+      align-items: center;
     }
 
-      & #zen-sidebar-icons-wrapper::before {
+    :root:has(&) #zen-sidebar-splitter {
-        width: 100%;
+      display: none !important;
+    }
+
+    & #tabbrowser-tabs {
+      --tab-min-width: 36px !important;
+
+      & .tabbrowser-tab {
+        margin: 0 auto;
+        width: var(--tab-min-width) !important;
+        height: var(--tab-min-width) !important;
+
+        & .tab-content {
+          display: flex;
+          align-content: center;
+          justify-content: center;
+
+          & .tab-label-container {
+            display: none;
+          }
+
+          & .tab-icon-image,
+          & .tab-icon-pending {
+            margin-inline-end: 0 !important;
           }
         }
       }
 
-  @media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
+      #vertical-pinned-tabs-container {
-    #navigator-toolbox {
+        display: flex;
-      width: fit-content !important;
+        flex-direction: column;
+        gap: 0 !important;
+      }
+
+      @media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') {
+        & .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
+          display: none !important;
+        
+          :is(
+            :root[uidensity=compact],
+            #tabbrowser-tabs[secondarytext-unsupported],
+            :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
+          ) .tab-icon-stack[indicator-replaces-favicon] > :not(&),
+          :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) &[indicator-replaces-favicon] {
+            opacity: 1 !important;
+          }
         }
       }
 
-  #navigator-toolbox[zen-user-hover="true"] {
+      & .tab-throbber, & .tab-icon-pending, & .tab-icon-image, & .tab-sharing-icon-overlay, & .tab-icon-overlay {
-    width: fit-content !important;
+        margin-inline-end: 0 !important;
-  } 
+      }
-
+    }
-  /* Display the vertical tabs on the right side */
-  @media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) {
-    #navigator-toolbox {
-      order: 8 !important;
-      padding-left: 0 !important;
-      --zen-hover-animation: zen-sidebar-panel-animation-right !important;
-    }
-
-    :root:not([zen-sidebar-legacy="true"]) {
-      padding: calc(var(--zen-tabbrowser-padding) * 1.5);
   }
 
+  /* Mark: Separator styling */
   #zen-sidebar-splitter {
-      order: 7 !important;
+    opacity: 0;
+    width: var(--zen-toolbox-padding);
+    height: 100%;
   }
 
-    #tabbrowser-tabpanels .browserSidebarContainer {
+  /* Mark: Expand on hover */
-      margin-left: var(--zen-element-separation) !important;
+  @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not (-moz-bool-pref: 'zen.view.compact')) {
-      margin-right: 0 !important;
-    }
-  }
-
-  @media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") and (not (-moz-bool-pref: "zen.view.compact")) {
     #zen-sidebar-splitter {
       display: none !important;
     }
@@ -483,10 +352,6 @@
       z-index: 1;
     }
 
-    #navigator-toolbox, #titlebar, #TabsToolbar {
-      transition: 0s !important;
-    }
-
     #TabsToolbar {
       --hovered-verticaltab-width: 20em;
 
@@ -501,16 +366,20 @@
       height: 100%;
 
       border-top-right-radius: var(--zen-border-radius);
-      transform: translateY(-1px);
     }
 
     #navigator-toolbox:hover,
     #navigator-toolbox:focus-within,
     #navigator-toolbox[movingtab],
+    #navigator-toolbox[flash-popup],
     #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
     #navigator-toolbox:has(.tabbrowser-tab:active),
-    #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
+    #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
-      --zen-navigation-toolbar-min-width: 3.3rem !important;
+      --zen-navigation-toolbar-min-width: 50px !important;
+
+      max-width: var(--zen-navigation-toolbar-min-width) !important;
+      min-width: var(--zen-navigation-toolbar-min-width) !important;
+      padding: 0 !important;
 
       & #TabsToolbar {
         z-index: 100 !important;
@@ -518,69 +387,89 @@
         background-color: var(--zen-dialog-background);
         border-top-color: var(--zen-colors-border);
         border-right-color: var(--zen-colors-border);
-        padding-right: .1rem !important;
         position: absolute;
+        padding: var(--zen-toolbox-padding);
+        transition: 0 !important;
+        animation: zen-vtabs-animation 0.3s ease-in-out;
       }
 
-      #navigator-toolbox:not(&) #TabsToolbar #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-content[class] > .tab-close-button[class] {
+      &[zen-right-side='true'] #TabsToolbar {
+        animation: zen-sidebar-panel-animation-right 0.3s ease-in-out;
+
+        right: 0;
+        border-right: 0;
+        border-left: 1px solid var(--zen-colors-border);
+        border-top-left-radius: var(--zen-border-radius);
+        border-top-right-radius: 0;
+      }
+
+      #navigator-toolbox:not(&)
+        #TabsToolbar
+        #tabbrowser-tabs[closebuttons='activetab']
+        .tabbrowser-tab
+        .tab-content[class]
+        > .tab-close-button[class] {
         display: none !important;
         visibility: hidden !important;
       }
 
-      & #tabbrowser-tabs {
-        --zen-tabbrowser-tabs-on-hover-padding: var(--zen-tabbrowser-padding);
-        padding: var(--zen-tabbrowser-tabs-on-hover-padding) !important;
-      }
-
       & #zen-sidebar-icons-wrapper {
         display: block !important;
       }
 
       & .zen-sidebar-action-button {
         width: 100%;
+        border-radius: var(--zen-button-border-radius);
 
-        & > * {
+        &:hover {
+          background: var(--button-hover-bgcolor);
+        }
+
+        & > *,
+        &:hover > * {
+          background: transparent !important;
           --toolbarbutton-active-background: transparent;
         }
 
-        & label {
+        & label:not(.toolbarbutton-badge) {
           --toolbarbutton-hover-background: transparent;
           display: block !important;
           text-align: start;
         }
       }
     }
-
-    @media (-moz-bool-pref: "zen.tabs.vertical.right-side") {      
-      #TabsToolbar {
-        border-right: 0 !important;
-        border-left: 1px solid transparent;
-        border-top-right-radius: 0;
-        border-top-left-radius: var(--zen-border-radius);
-
-        right: 0;
   }
 
-      #navigator-toolbox:hover,
+  /* Mark: Move sidebar to the right */
-      #navigator-toolbox:focus-within,
+  #browser:has(#navigator-toolbox[zen-right-side='true']) {
-      #navigator-toolbox[movingtab],
+    & #navigator-toolbox {
-      #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
+      order: 3;
-      #navigator-toolbox:has(.tabbrowser-tab:active),
-      #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
-        --zen-navigation-toolbar-min-width: 0 !important;
-        position: relative;
-        padding: 0 !important;
-
-        & #TabsToolbar {
-          border-left: 1px solid var(--zen-colors-border);
     }
+
+    & #zen-sidebar-splitter {
+      order: 2;
     }
   }
 
-    @media not (-moz-bool-pref: "zen.tabs.vertical.right-side") {
+  /* Mark: Override the default tab close button */
   #tabbrowser-tabs {
-        --zen-tabbrowser-tabs-on-hover-padding: 0 var(--zen-tabbrowser-padding) 0 0 !important;
+    & .tabbrowser-tab {
+      &[pinned] .tab-close-button {
+        display: none !important;
+      }
+
+      &[selected] .tab-background {
+        background: var(--zen-colors-secondary) !important;
       }
     }
   }
+
+  /* Customization mode */
+  :root[customizing] #navigator-toolbox {
+    overflow: hidden;
+    max-width: 0 !important;
+    margin-right: var(--zen-element-separation);
+    padding: 0 !important;
+    opacity: 0;
+  }
 }

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

@@ -1,4 +1,3 @@
-
 /* Here, we contain all the theme related variables, for example theme
  * colors, border radius, etc.
  * We have `--zen-border-radius` and `--zen-primary-color` as variables.
@@ -7,7 +6,6 @@
 :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.
   */
@@ -45,6 +43,7 @@
   --in-content-primary-button-border-color: transparent !important;
   --in-content-primary-button-border-hover: transparent !important;
   --in-content-primary-button-border-active: var(--zen-colors-border) !important;
+  --in-content-box-border-color: var(--zen-colors-border) !important;
 
   --in-content-accent-color: var(--zen-colors-primary) !important;
 
@@ -73,16 +72,13 @@
   --zen-in-content-dialog-background: var(--zen-colors-tertiary);
 
   --zen-button-border-radius: 7px;
-  --zen-button-padding: .6rem 1.2rem;
+  --zen-button-padding: 0.6rem 1.2rem;
 
   /* Other colors */
   --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
   --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
   --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
 
-  /* Constants */
-  --zen-element-separation: .6rem;
-
   /* XUL */
   --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
   --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
@@ -107,6 +103,8 @@
   --fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
   --toolbar-bgcolor: transparent;
 
+  --toolbarbutton-active-background: var(--zen-colors-border) !important;
+
   --input-bgcolor: var(--zen-colors-tertiary) !important;
   --input-border-color: var(--zen-input-border-color) !important;
   --zen-themed-toolbar-bg: var(--zen-colors-tertiary);
@@ -137,7 +135,37 @@
   }
 }
 
-@media not (-moz-bool-pref: "zen.theme.toolbar-themed") {
+@media (prefers-color-scheme: dark) {
+  @media (-moz-bool-pref: 'zen.theme.color-prefs.amoled') {
+    :root {
+      --zen-dark-color-mix-base: lch(2.467% 0 272 / 1);
+      --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(0, 0, 0) 96%);
+    }
+  }
+
+  @media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') {
+    :root {
+      --zen-in-content-dialog-background: rgb(28, 28, 32);
+
+      --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
+      --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, black 60%);
+      --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 15%, black 85%);
+    
+      --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, black 10%);
+      --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
+    
+      --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, black 80%);
+      --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%);
+    
+      --zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 10%, black 90%);
+      --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, rgb(15, 15, 15) 92%);
+  
+      --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, black 70%);
+    }
+  }
+}
+
+@media not (-moz-bool-pref: 'zen.theme.toolbar-themed') {
   :root {
     --toolbar-bgcolor: light-dark(white, #1b1b1b) !important;
     --zen-themed-toolbar-bg: var(--toolbar-bgcolor);

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

@@ -1,8 +1,7 @@
-
 #nav-bar {
   background: transparent;
 }
 
-:root[inDOMFullscreen="true"] #zen-appcontent-navbar-container {
+:root[inDOMFullscreen='true'] #zen-appcontent-navbar-container {
   display: none;
 }

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

@@ -1,17 +1,17 @@
 /* URL and tool bars */
 
 #urlbar {
-  --toolbarbutton-border-radius: 6px;
+  --toolbarbutton-border-radius: 10px;
   --urlbarView-separator-color: var(--zen-colors-border);
   --urlbarView-hover-background: var(--toolbarbutton-hover-background);
   --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
   border: 1px solid var(--zen-colors-border);
-  border-radius: 999px;
+  border-radius: var(--toolbarbutton-border-radius);
   overflow: hidden;
   padding: 1px;
 }
 
-#urlbar[focused="true"][breakout-extend="true"] {
+#urlbar[focused='true'][breakout-extend='true'] {
   overflow: visible;
 }
 
@@ -19,43 +19,47 @@
   border-color: transparent !important;
 }
 
-#urlbar[focused="true"] {
+#urlbar[focused='true'] {
   box-shadow: var(--panel-shadow) !important;
 }
 
-#urlbar[focused="true"] > #urlbar-background {
+#urlbar[focused='true'] > #urlbar-background {
   background: var(--zen-dialog-background) !important;
 }
 
-#urlbar-background { border: transparent !important; }
+#urlbar-background {
+  border: transparent !important;
+}
 
-#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
+#urlbar[focused='true']:not([suppress-focus-border]) > #urlbar-background,
 #searchbar:focus-within {
   outline: none !important;
   outline-offset: none !important;
   outline-color: none !important;
 }
 
-#urlbar .urlbar-page-action, 
+#urlbar #tracking-protection-icon-container {
-#urlbar #tracking-protection-icon-container,
+  border-radius: var(--toolbarbutton-border-radius);
-#urlbar:not([breakout-extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box {
-  border-radius: 999px;
 }
 
-#urlbar[breakout-extend="true"] .urlbar-page-action,
+#urlbar .urlbar-page-action {
-#urlbar[breakout-extend="true"] #tracking-protection-icon-container,
+  border-radius: calc(var(--toolbarbutton-border-radius) / 1.5);
-#urlbar[breakout-extend="true"] #identity-box #identity-icon-box,
+}
+
+#urlbar[breakout-extend='true'] .urlbar-page-action,
+#urlbar[breakout-extend='true'] #tracking-protection-icon-container,
+#urlbar[breakout-extend='true'] #identity-box #identity-icon-box,
 .searchbar-engine-one-off-item {
   border-radius: var(--toolbarbutton-border-radius) !important;
 }
 
-#urlbar[breakout-extend="true"] {
+#urlbar[breakout-extend='true'] {
   border-radius: 12px;
 }
 
 #identity-icon-box,
 #identity-permission-box {
-  background: var(--zen-colors-secondary) !important;
+  background: color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent 50%) !important;
   margin: 0 8px 0 0 !important;
 }
 
@@ -63,7 +67,8 @@
   background: var(--zen-colors-border) !important;
 }
 
-#urlbar:is([focused], [open]) > #urlbar-background, #searchbar:focus-within {
+#urlbar:is([focused], [open]) > #urlbar-background,
+#searchbar:focus-within {
   background: var(--urlbar-box-bgcolor);
 }
 
@@ -71,21 +76,19 @@
   padding-inline-start: 8px !important;
 }
 
-#identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box {
+#identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
   margin-right: 0 !important;
 }
 
-#urlbar:not([breakout-extend="true"]) #identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box {
+#urlbar:not([extend='true']) #identity-box #identity-icon-box {
-  border-radius: 20px 10px 10px 20px !important;
+  position: relative;
 }
 
-#urlbar:not([extend="true"]) #identity-box #identity-icon-box { position: relative; }
+#urlbar:not([extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) #identity-icon-box {
-
-#urlbar:not([extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box {
   margin-right: 5px;
 }
 
-#urlbar:not([extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) {
+#urlbar:not([extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) {
   margin-inline-end: 0 !important;
 }
 
@@ -99,8 +102,8 @@
   margin: 0 0 0 2px !important;
 }
 
-#urlbar[breakout-extend="true"] .urlbar-page-action,
+#urlbar[breakout-extend='true'] .urlbar-page-action,
-#urlbar[breakout-extend="true"] #tracking-protection-icon-container {
+#urlbar[breakout-extend='true'] #tracking-protection-icon-container {
   width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
   height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
 }
@@ -110,12 +113,13 @@
   border-bottom-left-radius: 0 !important;
 }
 
-#identity-box:has(#notification-popup-box:not([hidden="true"])) #identity-icon-box,
+#identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-icon-box,
-#identity-box:has(#notification-popup-box:not([hidden="true"])) #identity-permission-box {
+#identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-permission-box {
   margin-right: 4px !important;
 }
 
-#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate="invalid"]) #identity-icon-box {
+#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate='invalid'])
+  #identity-icon-box {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
   margin-right: 0 !important;
@@ -136,7 +140,7 @@
   gap: 8px;
 }
 
-#urlbar[breakout-extend="true"] #notification-popup-box {
+#urlbar[breakout-extend='true'] #notification-popup-box {
   min-width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
   height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
 }
@@ -151,7 +155,7 @@ button.popup-notification-dropmarker {
   border-bottom-left-radius: 0 !important;
 }
 
-.panel-footer:has(button.popup-notification-dropmarker:not([hidden="true"])) button.popup-notification-secondary-button {
+.panel-footer:has(button.popup-notification-dropmarker:not([hidden='true'])) button.popup-notification-secondary-button {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
@@ -164,5 +168,135 @@ button.popup-notification-dropmarker {
 }
 
 #downloadsHistory {
-  margin-top: 5px
+  margin-top: 5px;
+}
+
+:root:not([zen-sidebar-legacy='true']) {
+  @media (max-width: 650px) {
+    #urlbar-container {
+      width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
+    }
+
+    #nav-bar[downloadsbuttonshown] #urlbar-container,
+    #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
+      width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
+    }
+
+    #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
+      width: 176px;
+    }
+
+    #identity-icon-box {
+      max-width: 70px;
+    }
+
+    #urlbar-zoom-button {
+      display: none;
+    }
+  }
+}
+
+:root[zen-sidebar-legacy='true'] {
+  @media (max-width: 550px) {
+    #urlbar-container {
+      width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
+    }
+
+    #nav-bar[downloadsbuttonshown] #urlbar-container,
+    #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
+      width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
+    }
+
+    #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
+      width: 176px;
+    }
+
+    #identity-icon-box {
+      max-width: 70px;
+    }
+
+    #urlbar-zoom-button {
+      display: none;
+    }
+  }
+}
+
+/* Thanks to https://github.com/JLBlk!
+ * Checkout https://github.com/JLBlk/Zen-Themes/blob/main/SuperUrlBar/SuperUrlBar.css
+ */
+
+#notification-popup-box {
+  border-radius: 6px !important;
+}
+      
+/* Border radius on hover */
+#urlbar .urlbar-page-action, #urlbar #tracking-protection-icon-container, #urlbar:not([breakout-extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box {
+  border-radius: 6px !important;;
+}
+      
+/* Border radius of boxes on the left */
+#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate="invalid"]) #identity-icon-box {
+  border-top-left-radius: 6px !important;
+  border-bottom-left-radius: 6px !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+/* Extensions or similar */
+#urlbar:not([breakout-extend="true"]) #identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box {
+  border-radius: 6px 6px 6px 6px !important;
+}
+
+
+/* Notification Stack */
+
+.notificationbox-stack {
+  background: transparent;
+
+  &[notificationside="top"] {
+    position: absolute;
+    bottom: calc(var(--zen-element-separation) * 1.5);
+    right: calc(var(--zen-element-separation) * 1.5);
+    width: fit-content;
+    max-width: 30rem !important;
+
+    & notification-message {
+      background: var(--zen-colors-tertiary);
+      border: 1px solid var(--arrowpanel-border-color);
+      border-radius: var(--zen-border-radius);
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+}
+
+/* Other small tweaks */
+#nav-bar-customization-target {
+  /* Don't grow if potentially-user-sized elements (like the searchbar or the
+   * bookmarks toolbar item list) are too wide. This forces them to flex to the
+   * available space as much as possible, see bug 1795260. */
+  min-width: 0;
+
+  /* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */
+  > :is(toolbarbutton, toolbaritem):first-child,
+  > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
+    padding-inline-start: 0;
+  }
+}
+
+@media (-moz-bool-pref: 'zen.view.compact') or (-moz-bool-pref: 'zen.themes.tabs.legacy-location') {
+  #nav-bar {
+    padding-left: var(--zen-element-separation) !important;
+  }
+
+  .titlebar-button:last-child {
+    padding-right: var(--zen-element-separation) !important;
+  }
+}
+
+
+#PersonalToolbar:not([collapsed="true"]) {
+  padding-bottom: 6px;
 }

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

@@ -1,47 +1,49 @@
-
 #zen-workspaces-button {
-  --zen-workspaces-button-vmargin: 0.4rem;
   border: 1px solid var(--zen-colors-border);
-  border-radius: 50px;
+  border-radius: var(--zen-button-border-radius);
-  width: calc(var(--zen-sidebar-action-button-width) - 5px) !important;
+  min-height: 33px;
-  height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
-  margin-top: var(--zen-workspaces-button-vmargin) !important;
-  margin-bottom: var(--zen-workspaces-button-vmargin) !important;
   justify-content: center;
   align-items: center;
   display: flex;
-
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-  :root[zen-sidebar-legacy="true"] & {
+  -moz-window-dragging: no-drag;
-    margin-top: 0 !important;
-  }
 }
 
 #zen-workspaces-button .zen-workspace-sidebar-name {
-  margin-left: .2rem;
+  margin-left: 0.2rem;
   display: none;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 12px;
+  pointer-events: none;
 }
 
-@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
+@media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
   /** Keep these selectors in sync with the ones in vertical-tabs.css */
   #navigator-toolbox:is(
-    #navigator-toolbox[zen-user-hover="true"]:hover,
+      #navigator-toolbox[zen-user-hover='true']:hover,
-    #navigator-toolbox[zen-user-hover="true"]:focus-within,
+      #navigator-toolbox[zen-user-hover='true']:focus-within,
-    #mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox,
+      #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
-    #navigator-toolbox[zen-user-hover="true"]:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)), 
+      #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
-  :not([zen-user-hover="true"])) {
+      :not([zen-user-hover='true'])
+    ) {
+
+    & #zen-workspaces-button {
+      width: calc(var(--zen-sidebar-action-button-width) - 1px) !important;
+      margin-top: .2rem;
+      height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
+    }
+    
     & #zen-workspaces-button .zen-workspace-sidebar-name {
       display: block;
     }
 
-    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] {
+    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] {
       display: none;
     }
 
-    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] + .zen-workspace-sidebar-name {
+    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
       margin-left: 0;
     }
 
@@ -93,8 +95,8 @@
   border-radius: 7px;
 }
 
-#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected="true"],
+#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected='true'],
-#PanelUI-zen-workspaces-edit-icons-container toolbarbutton[selected="true"] {
+#PanelUI-zen-workspaces-edit-icons-container toolbarbutton[selected='true'] {
   border-color: var(--zen-colors-secondary);
 }
 
@@ -126,7 +128,7 @@
   flex-shrink: 0;
 }
 
-#PanelUI-zen-workspaces-list[empty="true"] {
+#PanelUI-zen-workspaces-list[empty='true'] {
   font-weight: 600;
   padding: 10px;
   width: 100%;
@@ -141,7 +143,7 @@
 #PanelUI-zen-workspaces-list toolbarbutton,
 #PanelUI-zen-workspaces-current-info toolbarbutton {
   padding: 5px;
-  border-radius: 7px;
+  border-radius: var(--zen-button-border-radius);
 
   margin-left: 0 !important;
   margin-right: 0 !important;
@@ -156,7 +158,7 @@
   & .zen-workspace-icon {
     width: 30px;
     height: 30px;
-    border-radius: 7px;
+    border-radius: var(--zen-button-border-radius);
     margin-right: 10px;
     border: 1px solid var(--zen-colors-border);
     display: flex;
@@ -166,6 +168,10 @@
     flex-shrink: 0;
   }
 
+  &[data-usercontextid] .zen-workspace-icon {
+    border-color: color-mix(in srgb, var(--identity-tab-color) 40%, transparent 60%);
+  }
+
   & .zen-workspace-name {
     font-weight: 600;
     white-space: nowrap;
@@ -173,6 +179,12 @@
     text-overflow: ellipsis;
   }
 
+  & .zen-workspace-container {
+    font-size: 12px;
+    opacity: 0.5;
+    font-weight: normal;
+  }
+
   & .zen-workspace-actions {
     display: none;
     margin: 0;
@@ -180,7 +192,7 @@
   }
 
   &:hover .zen-workspace-actions,
-  & .zen-workspace-actions[active="true"] {
+  & .zen-workspace-actions[active='true'] {
     display: flex;
   }
 }
@@ -190,7 +202,7 @@
   margin-top: 5px;
 }
 
-#PanelUI-zen-workspaces-view vbox:nth-child(2) {
+#PanelUI-zen-workspaces-view > vbox:nth-child(2) {
   margin-top: 10px;
 }
 
@@ -212,7 +224,7 @@
   width: 100%;
 }
 
-#PanelUI-zen-workspaces-create-footer button[default="true"],
+#PanelUI-zen-workspaces-create-footer button[default='true'],
-#PanelUI-zen-workspaces-edit-footer button[default="true"] {
+#PanelUI-zen-workspaces-edit-footer button[default='true'] {
   width: 100%;
 }

src/browser/base/content/zenThemeModifier.js

@@ -1,9 +1,8 @@
-
 /* 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/. */
 
- "use strict";
+'use strict';
 
 /* INCLUDE THIS FILE AS:
  *   <script src="chrome://browser/content/zenThemeModifier.js"></script>
@@ -11,18 +10,17 @@
  * FOR ANY WEBSITE THAT WOULD NEED TO USE THE ACCENT COLOR, ETC
  */
 
-const kZenThemeAccentColorPref = "zen.theme.accent-color";
+const kZenThemePrefsList = ['zen.theme.accent-color', 'zen.theme.border-radius', 'zen.theme.content-element-separation'];
-const kZenThemeBorderRadiusPref = "zen.theme.border-radius";
 
 /**
-* ZenThemeModifier controls the application of theme data to the browser,
+ * ZenThemeModifier controls the application of theme data to the browser,
-* for examplem, it injects the accent color to the document. This is used
+ * for examplem, it injects the accent color to the document. This is used
-* because we need a way to apply the accent color without having to worry about
+ * because we need a way to apply the accent color without having to worry about
-* shadow roots not inheriting the accent color.
+ * shadow roots not inheriting the accent color.
-* 
+ *
-* note: It must be a firefox builtin page with access to the browser's configuration
+ * note: It must be a firefox builtin page with access to the browser's configuration
-*  and services.
+ *  and services.
-*/
+ */
 var ZenThemeModifier = {
   _inMainBrowserWindow: false,
 
@@ -31,7 +29,7 @@ var ZenThemeModifier = {
    * begin listening to changes in preferred color scheme.
    */
   init() {
-    this._inMainBrowserWindow = window.location.href == "chrome://browser/content/browser.xhtml";
+    this._inMainBrowserWindow = window.location.href == 'chrome://browser/content/browser.xhtml';
     this.listenForEvents();
     this.updateAllThemeBasics();
     this._onPrefersColorSchemeChange();
@@ -40,8 +38,17 @@ var ZenThemeModifier = {
   listenForEvents() {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._onPrefersColorSchemeChange.bind(this));
 
-    Services.prefs.addObserver(kZenThemeAccentColorPref, this.handleEvent.bind(this));
+    var handleEvent = this.handleEvent.bind(this);
-    Services.prefs.addObserver(kZenThemeBorderRadiusPref, this.handleEvent.bind(this));
+    // Listen for changes in the accent color and border radius
+    for (let pref of kZenThemePrefsList) {
+      Services.prefs.addObserver(pref, handleEvent);
+    }
+
+    window.addEventListener('unload', () => {
+      for (let pref of kZenThemePrefsList) {
+        Services.prefs.removeObserver(pref, handleEvent);
+      }
+    });
   },
 
   handleEvent(event) {
@@ -52,25 +59,31 @@ var ZenThemeModifier = {
   /**
    * Update all theme basics, like the accent color.
    */
-  updateAllThemeBasics() {
+  async updateAllThemeBasics() {
     this.updateAccentColor();
     this.updateBorderRadius();
+    this.updateElementSeparation();
   },
 
   updateBorderRadius() {
-    const borderRadius = Services.prefs.getIntPref(kZenThemeBorderRadiusPref, 4);
+    const borderRadius = Services.prefs.getIntPref('zen.theme.border-radius');
-    document.documentElement.style.setProperty("--zen-border-radius", borderRadius + "px");
+    document.documentElement.style.setProperty('--zen-border-radius', borderRadius + 'px');
+  },
+
+  updateElementSeparation() {
+    const separation = Services.prefs.getIntPref('zen.theme.content-element-separation');
+    document.documentElement.style.setProperty('--zen-element-separation', separation + 'px');
   },
 
   /**
    * Update the accent color.
    */
   updateAccentColor() {
-    const accentColor = Services.prefs.getStringPref(kZenThemeAccentColorPref, "#0b57d0");
+    const accentColor = Services.prefs.getStringPref('zen.theme.accent-color');
-    document.documentElement.style.setProperty("--zen-primary-color", accentColor);
+    document.documentElement.style.setProperty('--zen-primary-color', accentColor);
     // Notify the page that the accent color has changed, only if a function
     // handler is defined.
-    if (typeof window.zenPageAccentColorChanged === "function") {
+    if (typeof window.zenPageAccentColorChanged === 'function') {
       window.zenPageAccentColorChanged(accentColor);
     }
   },
@@ -80,35 +93,33 @@ var ZenThemeModifier = {
   },
 
   _updateZenAvatar() {
-    if (typeof ProfileService === "undefined") {
+    if (typeof ProfileService === 'undefined') {
       return;
     }
     const mainWindowEl = document.documentElement;
     // Dont override the sync avatar if it's already set
-    if (mainWindowEl.style.hasOwnProperty("--avatar-image-url")) {
+    if (mainWindowEl.style.hasOwnProperty('--avatar-image-url')) {
       return;
     }
     let profile = ProfileService.currentProfile;
-    if (!profile || profile.zenAvatarPath == "") return;
+    if (!profile || profile.zenAvatarPath == '') return;
     // TODO: actually use profile data to generate the avatar, instead of just using the name
     let avatarUrl = this._getThemedAvatar(profile.zenAvatarPath);
-    if (document.documentElement.hasAttribute("privatebrowsingmode")) {
+    if (document.documentElement.hasAttribute('privatebrowsingmode')) {
-      avatarUrl = "chrome://global/skin/icons/indicator-private-browsing.svg";
+      avatarUrl = 'chrome://global/skin/icons/indicator-private-browsing.svg';
     }
-    mainWindowEl.style.setProperty("--zen-avatar-image-url", `url(${avatarUrl})`);
+    mainWindowEl.style.setProperty('--zen-avatar-image-url', `url(${avatarUrl})`);
-    mainWindowEl.style.setProperty("--avatar-image-url", `var(--zen-avatar-image-url)`, "important");
+    mainWindowEl.style.setProperty('--avatar-image-url', `var(--zen-avatar-image-url)`, 'important');
   },
 
   _getThemedAvatar(avatarPath) {
-    if (!avatarPath.startsWith("chrome://browser/content/zen-avatars/avatar-")
+    if (!avatarPath.startsWith('chrome://browser/content/zen-avatars/avatar-') || !avatarPath.endsWith('.svg')) {
-      || !avatarPath.endsWith(".svg")) {
       return avatarPath;
     }
     let withoutExtension = avatarPath.slice(0, -4);
-    let scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
+    let scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     return `${withoutExtension}-${scheme}.svg`;
   },
 };
 
-if (typeof Services !== "undefined")
+if (typeof Services !== 'undefined') ZenThemeModifier.init();
-  ZenThemeModifier.init();

src/browser/components/newtab/README.md

@@ -1,9 +1,8 @@
-
 # Checkout this documentation to build new tab assets
 
-* [New Tab Documentation](https://firefox-source-docs.mozilla.org/browser/components/newtab/docs/index.html)
+- [New Tab Documentation](https://firefox-source-docs.mozilla.org/browser/components/newtab/docs/index.html)
-* You also need `meow@9.0.0` (that's the one I tested) because other versions might not work.
+- You also need `meow@9.0.0` (that's the one I tested) because other versions might not work.
-* To bundle the new tab, execute the following:
+- To bundle the new tab, execute the following:
 
 ```
 ./mach npm run bundle --prefix=browser/components/newtab

src/browser/components/newtab/content-src/components/CustomizeMenu/_zenNewTabGlobals.scss

@@ -1,5 +1,4 @@
-
+.customize-menu[role='dialog'] {
-.customize-menu[role="dialog"] {
   margin: 10px;
   border-radius: 7px;
   height: -moz-fit-content;

src/browser/components/places/content/zenNewWebPanel.js

@@ -3,11 +3,11 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 var gZenNewWebPanel = {
-  init: function() {
+  init: function () {
-    document.addEventListener("dialogaccept", this.handleDialogAccept.bind(this));
+    document.addEventListener('dialogaccept', this.handleDialogAccept.bind(this));
   },
 
-  handleURLChange: async function(aURL) {
+  handleURLChange: async function (aURL) {
     try {
       let url = new URL(aURL.value);
     } catch (_) {
@@ -31,10 +31,10 @@ var gZenNewWebPanel = {
     return url;
   },
 
-  handleDialogAccept: async function(aEvent) {
+  handleDialogAccept: async function (aEvent) {
     document.commandDispatcher.focusedElement?.blur();
-    let url = document.getElementById("zenNWP_url");
+    let url = document.getElementById('zenNWP_url');
-    let ua = document.getElementById("zenNWP_userAgent");
+    let ua = document.getElementById('zenNWP_userAgent');
     if (!url || !ua) {
       return;
     }
@@ -51,11 +51,11 @@ var gZenNewWebPanel = {
       url: urlValue,
       ua: ua.value,
     };
-    let currentData = JSON.parse(Services.prefs.getStringPref("zen.sidebar.data"));
+    let currentData = JSON.parse(Services.prefs.getStringPref('zen.sidebar.data'));
-    let newName = "p" + new Date().getTime();
+    let newName = 'p' + new Date().getTime();
     currentData.index.push(newName);
     currentData.data[newName] = newSite;
-    Services.prefs.setStringPref("zen.sidebar.data", JSON.stringify(currentData));
+    Services.prefs.setStringPref('zen.sidebar.data', JSON.stringify(currentData));
   },
 };
 

src/browser/components/preferences/main-inc-xhtml.patch

@@ -1,7 +1,16 @@
 diff --git a/browser/components/preferences/main.inc.xhtml b/browser/components/preferences/main.inc.xhtml
-index 4c2637db10b7ad5d253d9588be3610c1ec5ad330..b8445b808cf9dcb54d380ae78172db4bf8250cd4 100644
+index 4c2637db10b7ad5d253d9588be3610c1ec5ad330..b7861f7888b0d3f9abd5249f8356e6b9b5c3005f 100644
 --- a/browser/components/preferences/main.inc.xhtml
 +++ b/browser/components/preferences/main.inc.xhtml
+@@ -163,7 +163,7 @@
+ </hbox>
+ 
+ <!-- Website appearance -->
+-<groupbox id="webAppearanceGroup" data-category="paneGeneral" hidden="true">
++<groupbox id="webAppearanceGroup" data-category="paneZenLooks" hidden="true">
+   <html:h2 data-l10n-id="preferences-web-appearance-header"/>
+   <html:div id="webAppearanceSettings">
+     <description class="description-deemphasized" data-l10n-id="preferences-web-appearance-description"/>
 @@ -369,6 +369,7 @@
                languages-customize-add.label,
              " />

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

@@ -3,43 +3,43 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 const kZenColors = [
-  "#aac7ff",
+  '#aac7ff',
-  "#74d7cb",
+  '#74d7cb',
-  "#a0d490",
+  '#a0d490',
-  "#dec663",
+  '#dec663',
-  "#ffb787",
+  '#ffb787',
-  "#dec1b1",
+  '#dec1b1',
-  "#ffb1c0",
+  '#ffb1c0',
-  "#ddbfc3",
+  '#ddbfc3',
-  "#f6b0ea",
+  '#f6b0ea',
-  "#d4bbff",
+  '#d4bbff',
 ];
 
 const kZenOSToSmallName = {
-  WINNT: "windows",
+  WINNT: 'windows',
-  Darwin: "macos",
+  Darwin: 'macos',
-  Linux: "linux",
+  Linux: 'linux',
 };
 
 var gZenMarketplaceManager = {
   init() {
-    const checkForUpdates = document.getElementById("zenThemeMarketplaceCheckForUpdates");
+    const checkForUpdates = document.getElementById('zenThemeMarketplaceCheckForUpdates');
     if (!checkForUpdates) return; // We havent entered the settings page yet.
     if (this.__hasInitializedEvents) return;
     this._buildThemesList();
     this.__hasInitializedEvents = true;
     Services.prefs.addObserver(this.updatePref, this);
-    checkForUpdates.addEventListener("click", (event) => {
+    checkForUpdates.addEventListener('click', (event) => {
       if (event.target === checkForUpdates) {
         event.preventDefault();
         this._checkForThemeUpdates(event);
       }
     });
-    document.addEventListener("ZenThemeMarketplace:CheckForUpdatesFinished", (event) => {
+    document.addEventListener('ZenThemeMarketplace:CheckForUpdatesFinished', (event) => {
       checkForUpdates.disabled = false;
       const updates = event.detail.updates;
-      const success = document.getElementById("zenThemeMarketplaceUpdatesSuccess");
+      const success = document.getElementById('zenThemeMarketplaceUpdatesSuccess');
-      const error = document.getElementById("zenThemeMarketplaceUpdatesFailure");
+      const error = document.getElementById('zenThemeMarketplaceUpdatesFailure');
       if (updates) {
         success.hidden = false;
         error.hidden = true;
@@ -48,7 +48,7 @@ var gZenMarketplaceManager = {
         error.hidden = false;
       }
     });
-    window.addEventListener("unload", this.uninit.bind(this));
+    window.addEventListener('unload', this.uninit.bind(this));
   },
 
   uninit() {
@@ -64,11 +64,11 @@ var gZenMarketplaceManager = {
     // Send a message to the child to check for theme updates.
     event.target.disabled = true;
     // send an event that will be listened by the child process.
-    document.dispatchEvent(new CustomEvent("ZenCheckForThemeUpdates"));
+    document.dispatchEvent(new CustomEvent('ZenCheckForThemeUpdates'));
   },
 
   get updatePref() {
-    return "zen.themes.updated-value-observer";
+    return 'zen.themes.updated-value-observer';
   },
 
   triggerThemeUpdate() {
@@ -76,27 +76,20 @@ var gZenMarketplaceManager = {
   },
 
   get themesList() {
-    return document.getElementById("zenThemeMarketplaceList");
+    return document.getElementById('zenThemeMarketplaceList');
   },
 
   get themesDataFile() {
-    return PathUtils.join(
+    return PathUtils.join(PathUtils.profileDir, 'zen-themes.json');
-      PathUtils.profileDir,
-      "zen-themes.json"
-    );
   },
 
   get themesRootPath() {
-    return PathUtils.join(
+    return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes');
-      PathUtils.profileDir,
-      "chrome",
-      "zen-themes"
-    );
   },
 
   async removeTheme(themeId) {
     const themePath = PathUtils.join(this.themesRootPath, themeId);
-    console.info("ZenThemeMarketplaceParent(settings): Removing theme ", themePath);
+    console.info('ZenThemeMarketplaceParent(settings): Removing theme ', themePath);
     await IOUtils.remove(themePath, { recursive: true, ignoreAbsent: true });
 
     let themes = await this._getThemes();
@@ -106,6 +99,28 @@ var gZenMarketplaceManager = {
     this.triggerThemeUpdate();
   },
 
+  async disableTheme(themeId) {
+    const themes = await this._getThemes();
+    const theme = themes[themeId];
+
+    theme.enabled = false;
+
+    await IOUtils.writeJSON(this.themesDataFile, themes);
+    this._doNotRebuildThemesList = true;
+    this.triggerThemeUpdate();
+  },
+
+  async enableTheme(themeId) {
+    const themes = await this._getThemes();
+    const theme = themes[themeId];
+
+    theme.enabled = true;
+
+    await IOUtils.writeJSON(this.themesDataFile, themes);
+    this._doNotRebuildThemesList = true;
+    this.triggerThemeUpdate();
+  },
+
   async _getThemes() {
     if (!this._themes) {
       if (!(await IOUtils.exists(this.themesDataFile))) {
@@ -122,17 +137,18 @@ var gZenMarketplaceManager = {
   },
 
   _getValidPreferences(preferences) {
-    for (let key in preferences) {
+    for (let entry of preferences) {
+      const key = entry.property;
       // [!][os:]key
       let restOfPreferences = key;
       let isNegation = false;
-      if (key.startsWith("!")) {
+      if (key.startsWith('!')) {
         isNegation = true;
         restOfPreferences = key.slice(1);
       }
-      let os = "";
+      let os = '';
-      if (restOfPreferences.includes(":")) {
+      if (restOfPreferences.includes(':')) {
-        [os, restOfPreferences] = restOfPreferences.split(":");
+        [os, restOfPreferences] = restOfPreferences.split(':');
       }
       if (isNegation && os === this.currentOperatingSystem) {
         delete preferences[key];
@@ -150,130 +166,448 @@ var gZenMarketplaceManager = {
   },
 
   async _getThemePreferences(theme) {
-    const themePath = PathUtils.join(this.themesRootPath, theme.id, "preferences.json");
+    const themePath = PathUtils.join(this.themesRootPath, theme.id, 'preferences.json');
     if (!(await IOUtils.exists(themePath)) || !theme.preferences) {
-      return {};
+      return [];
     }
-    return this._getValidPreferences(await IOUtils.readJSON(themePath));
+
+    let themePreferences = await IOUtils.readJSON(themePath);
+
+    // compat mode for old preferences, all of them can only be checkboxes
+    if (typeof themePreferences === 'object' && !Array.isArray(themePreferences)) {
+      console.warn(
+        `[ZenThemeMarketplaceManager]: Warning, ${theme.name} uses legacy preferences, please migrate them to the new preferences style, as legacy preferences might be removed at a future release. More information at: `
+      );
+      themePreferences = Object.entries(themePreferences).map(([property, label]) => {
+        return {
+          property,
+          label,
+          type: 'checkbox',
+        };
+      });
+    }
+
+    return this._getValidPreferences(themePreferences);
+  },
+
+  _getBrowser() {
+    if (!this.__browser) {
+      this.__browser = Services.wm.getMostRecentWindow('navigator:browser');
+    }
+
+    return this.__browser;
+  },
+
+  __throttle(mainFunction, delay) {
+    let timerFlag = null;
+
+    return (...args) => {
+      if (timerFlag === null) {
+        mainFunction(...args);
+        timerFlag = setTimeout(() => {
+          timerFlag = null;
+        }, delay);
+      }
+    };
   },
 
   async _buildThemesList() {
     if (!this.themesList) return;
-    console.log("ZenThemeMarketplaceParent(settings): Building themes list");
+    if (this._doNotRebuildThemesList) {
+      this._doNotRebuildThemesList = false;
+      return;
+    }
+
+    console.log('ZenThemeMarketplaceParent(settings): Building themes list');
+
     let themes = await this._getThemes();
-    this.themesList.innerHTML = "";
+
+    const browser = this._getBrowser();
+
+    const themeList = document.createElement('div');
+
     for (let theme of Object.values(themes)) {
+      const sanitizedName = `theme-${theme.name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`;
+
       const fragment = window.MozXULElement.parseXULToFragment(`
-        <hbox class="zenThemeMarketplaceItem" align="center">
+        <vbox class="zenThemeMarketplaceItem">
-          <vbox class="zenThemeMarketplaceItemContent" flex="1">
+          <vbox class="zenThemeMarketplaceItemContent">
+            <hbox flex="1" id="zenThemeMarketplaceItemContentHeader">
               <label><h3 class="zenThemeMarketplaceItemTitle"></h3></label>
+            </hbox>
             <description class="description-deemphasized zenThemeMarketplaceItemDescription"></description>
           </vbox>
+          <hbox class="zenThemeMarketplaceItemActions">
+            <button id="zenThemeMarketplaceItemConfigureButton-${sanitizedName}" class="zenThemeMarketplaceItemConfigureButton" hidden="true"></button>
             <button class="zenThemeMarketplaceItemUninstallButton" data-l10n-id="zen-theme-marketplace-remove-button" zen-theme-id="${theme.id}"></button>
           </hbox>
+        </vbox>
       `);
-      fragment.querySelector(".zenThemeMarketplaceItemTitle").textContent = `${theme.name} (v${theme.version || "1.0.0"})`;
+
-      fragment.querySelector(".zenThemeMarketplaceItemDescription").textContent = theme.description;
+      const themeName = `${theme.name} (v${theme.version || '1.0.0'})`;
-      fragment.querySelector(".zenThemeMarketplaceItemUninstallButton").addEventListener("click", async (event) => {
+
-        if (!confirm("Are you sure you want to remove this theme?")) {
+      const base = fragment.querySelector('.zenThemeMarketplaceItem');
+      const baseHeader = fragment.querySelector('#zenThemeMarketplaceItemContentHeader');
+
+      const dialog = document.createElement('dialog');
+      const mainDialogDiv = document.createElement('div');
+      const headerDiv = document.createElement('div');
+      const headerTitle = document.createElement('h3');
+      const closeButton = document.createElement('button');
+      const contentDiv = document.createElement('div');
+      const mozToggle = document.createElement('moz-toggle');
+
+      mainDialogDiv.className = 'zenThemeMarketplaceItemPreferenceDialog';
+      headerDiv.className = 'zenThemeMarketplaceItemPreferenceDialogTopBar';
+      headerTitle.textContent = themeName;
+      headerTitle.title = `CSS Selector: ${sanitizedName}`;
+      headerTitle.className = 'zenThemeMarketplaceItemTitle';
+      closeButton.id = `${sanitizedName}-modal-close`;
+      closeButton.textContent = 'Close';
+      contentDiv.id = `${sanitizedName}-preferences-content`;
+      contentDiv.className = 'zenThemeMarketplaceItemPreferenceDialogContent';
+      mozToggle.className = 'zenThemeMarketplaceItemPreferenceToggle';
+
+      mozToggle.pressed = theme.enabled;
+      mozToggle.title = theme.enabled ? 'Disable theme' : 'Enable theme';
+
+      baseHeader.appendChild(mozToggle);
+
+      headerDiv.appendChild(headerTitle);
+      headerDiv.appendChild(closeButton);
+
+      mainDialogDiv.appendChild(headerDiv);
+      mainDialogDiv.appendChild(contentDiv);
+      dialog.appendChild(mainDialogDiv);
+      base.appendChild(dialog);
+
+      closeButton.addEventListener('click', () => {
+        dialog.close();
+      });
+
+      mozToggle.addEventListener('toggle', async (event) => {
+        const themeId = event.target
+          .closest('.zenThemeMarketplaceItem')
+          .querySelector('.zenThemeMarketplaceItemUninstallButton')
+          .getAttribute('zen-theme-id');
+
+        if (!event.target.hasAttribute('pressed')) {
+          await this.disableTheme(themeId);
+          document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).setAttribute('hidden', true);
+        } else {
+          await this.enableTheme(themeId);
+          document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).removeAttribute('hidden');
+        }
+      });
+
+      fragment.querySelector('.zenThemeMarketplaceItemTitle').textContent = themeName;
+      fragment.querySelector('.zenThemeMarketplaceItemDescription').textContent = theme.description;
+      fragment.querySelector('.zenThemeMarketplaceItemUninstallButton').addEventListener('click', async (event) => {
+        if (!confirm('Are you sure you want to remove this theme?')) {
           return;
         }
         const target = event.target;
-        const themeId = target.getAttribute("zen-theme-id");
+        const themeId = target.getAttribute('zen-theme-id');
         await this.removeTheme(themeId);
       });
-      this.themesList.appendChild(fragment);
+      fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').addEventListener('click', () => {
+        dialog.showModal();
+      });
+
+      if (theme.enabled && theme.preferences) {
+        fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').removeAttribute('hidden');
+      }
+
       const preferences = await this._getThemePreferences(theme);
-      if (Object.keys(preferences).length > 0) {
+
-        let preferencesWrapper = document.createXULElement("vbox");
+      if (preferences.length > 0) {
-        preferencesWrapper.classList.add("indent");
+        const preferencesWrapper = document.createXULElement('vbox');
-        preferencesWrapper.classList.add("zenThemeMarketplaceItemPreferences");
+
-        for (let [key, value] of Object.entries(preferences)) {
+        preferencesWrapper.setAttribute('flex', '1');
-          const fragment = window.MozXULElement.parseXULToFragment(`
+
+        for (let entry of preferences) {
+          const { property, label, type } = entry;
+
+          switch (type) {
+            case 'dropdown': {
+              const { options } = entry;
+
+              const container = document.createXULElement('hbox');
+              container.classList.add('zenThemeMarketplaceItemPreference');
+              container.setAttribute('align', 'center');
+              container.setAttribute('role', 'group');
+
+              const menulist = document.createXULElement('menulist');
+              const menupopup = document.createXULElement('menupopup');
+
+              menulist.setAttribute('sizetopopup', 'none');
+              menulist.setAttribute('id', property + '-popup-menulist');
+
+              const savedValue = Services.prefs.getStringPref(property, 'none');
+
+              menulist.setAttribute('value', savedValue);
+              menulist.setAttribute('tooltiptext', property);
+
+              const defaultItem = document.createXULElement('menuitem');
+
+              defaultItem.setAttribute('value', 'none');
+              defaultItem.setAttribute('label', '-');
+
+              menupopup.appendChild(defaultItem);
+
+              for (let option of options) {
+                const { label, value } = option;
+
+                const valueType = typeof value;
+
+                if (!['string', 'number'].includes(valueType)) {
+                  console.log(
+                    `ZenThemeMarketplaceParent(settings): Warning, invalid data type received (${valueType}), skipping.`
+                  );
+                  continue;
+                }
+
+                const menuitem = document.createXULElement('menuitem');
+
+                menuitem.setAttribute('value', value.toString());
+                menuitem.setAttribute('label', label);
+
+                menupopup.appendChild(menuitem);
+              }
+
+              menulist.appendChild(menupopup);
+
+              menulist.addEventListener('command', () => {
+                const value = menulist.selectedItem.value;
+
+                let element = browser.document.getElementById(sanitizedName);
+
+                if (!element) {
+                  element = browser.document.createElement('div');
+
+                  element.style.display = 'none';
+                  element.setAttribute('id', sanitizedName);
+
+                  browser.document.body.appendChild(element);
+                }
+
+                element.setAttribute(property?.replaceAll(/\./g, '-'), value);
+
+                Services.prefs.setStringPref(property, value === 'none' ? '' : value);
+              });
+
+              const nameLabel = document.createXULElement('label');
+              nameLabel.setAttribute('flex', '1');
+              nameLabel.setAttribute('class', 'zenThemeMarketplaceItemPreferenceLabel');
+              nameLabel.setAttribute('value', label);
+              nameLabel.setAttribute('tooltiptext', property);
+
+              container.appendChild(nameLabel);
+              container.appendChild(menulist);
+              container.setAttribute('aria-labelledby', label);
+
+              preferencesWrapper.appendChild(container);
+              break;
+            }
+
+            case 'checkbox': {
+              const checkbox = window.MozXULElement.parseXULToFragment(`
                 <hbox class="zenThemeMarketplaceItemPreference">
-              <checkbox class="zenThemeMarketplaceItemPreferenceCheckbox" zen-pref="${key}"></checkbox>
+                  <checkbox class="zenThemeMarketplaceItemPreferenceCheckbox" label="${label}" tooltiptext="${property}" zen-pref="${property}"></checkbox>
-              <vbox class="zenThemeMarketplaceItemPreferenceData">
-                <label class="zenThemeMarketplaceItemPreferenceLabel">${key}</label>
-                <description class="description-deemphasized zenThemeMarketplaceItemPreferenceValue">${value}</description>
-              </vbox>
                 </hbox>
               `);
+
               // Checkbox only works with "true" and "false" values, it's not like HTML checkboxes.
-          if (Services.prefs.getBoolPref(key, false)) {
+              if (Services.prefs.getBoolPref(property, false)) {
-            fragment.querySelector(".zenThemeMarketplaceItemPreferenceCheckbox").setAttribute("checked", "true");
+                checkbox.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').setAttribute('checked', 'true');
               }
-          fragment.querySelector(".zenThemeMarketplaceItemPreferenceCheckbox").addEventListener("click", (event) => {
+
-            let target = event.target.closest(".zenThemeMarketplaceItemPreferenceCheckbox");
+              checkbox.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => {
-            let key = target.getAttribute("zen-pref");
+                let target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox');
-            let checked = target.hasAttribute("checked");
+                let key = target.getAttribute('zen-pref');
+                let checked = target.hasAttribute('checked');
+
                 if (!checked) {
-              target.removeAttribute("checked");
+                  target.removeAttribute('checked');
                 } else {
-              target.setAttribute("checked", "true");
+                  target.setAttribute('checked', 'true');
                 }
+
                 Services.prefs.setBoolPref(key, !checked);
               });
-          preferencesWrapper.appendChild(fragment);
+
+              preferencesWrapper.appendChild(checkbox);
+              break;
             }
-        this.themesList.appendChild(preferencesWrapper);
+
+            case 'string': {
+              const container = document.createXULElement('hbox');
+              container.classList.add('zenThemeMarketplaceItemPreference');
+              container.setAttribute('align', 'center');
+              container.setAttribute('role', 'group');
+
+              const savedValue = Services.prefs.getStringPref(property, '');
+              const sanitizedProperty = property?.replaceAll(/\./g, '-');
+
+              const input = document.createElement('input');
+              input.setAttribute('flex', '1');
+              input.setAttribute('type', 'text');
+              input.id = `${sanitizedProperty}-input`;
+              input.value = savedValue;
+
+              input.addEventListener(
+                'input',
+                this.__throttle((event) => {
+                  const value = event.target.value;
+
+                  Services.prefs.setStringPref(property, value);
+
+                  if (value === '') {
+                    browser.document.querySelector(':root').style.removeProperty(`--${sanitizedProperty}`);
+                  } else {
+                    browser.document.querySelector(':root').style.setProperty(`--${sanitizedProperty}`, value);
+                  }
+                }, 500)
+              );
+
+              const nameLabel = document.createXULElement('label');
+              nameLabel.setAttribute('flex', '1');
+              nameLabel.setAttribute('class', 'zenThemeMarketplaceItemPreferenceLabel');
+              nameLabel.setAttribute('value', label);
+              nameLabel.setAttribute('tooltiptext', property);
+
+              container.appendChild(nameLabel);
+              container.appendChild(input);
+              container.setAttribute('aria-labelledby', label);
+
+              preferencesWrapper.appendChild(container);
+              break;
+            }
+
+            default:
+              console.log(
+                `ZenThemeMarketplaceParent(settings): Warning, unknown preference type received (${type}), skipping.`
+              );
+              continue;
           }
         }
+        contentDiv.appendChild(preferencesWrapper);
       }
+      themeList.appendChild(fragment);
+    }
+
+    this.themesList.replaceChildren(...themeList.children);
+    themeList.remove();
+  },
 };
 
 var gZenLooksAndFeel = {
   init() {
+    if (this.__hasInitialized) return;
+    this.__hasInitialized = true;
     this._initializeColorPicker(this._getInitialAccentColor());
     window.zenPageAccentColorChanged = this._handleAccentColorChange.bind(this);
     this._initializeTabbarExpandForm();
     gZenThemeBuilder.init();
     gZenMarketplaceManager.init();
     var onLegacyToolbarChange = this.onLegacyToolbarChange.bind(this);
-    Services.prefs.addObserver("zen.themes.tabs.legacy-location", onLegacyToolbarChange);
+    Services.prefs.addObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
-    window.addEventListener("unload", () => {
+    var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this);
-      Services.prefs.removeObserver("zen.themes.tabs.legacy-location", onLegacyToolbarChange);
+    window.matchMedia('(prefers-color-scheme: dark)').addListener(onPreferColorSchemeChange);
+    this.onPreferColorSchemeChange();
+    window.addEventListener('unload', () => {
+      Services.prefs.removeObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
+      window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange);
     });
+    setTimeout(() => {
+      const group = document.getElementById('zenLooksAndFeelGroup');
+      const webGroup = document.getElementById('webAppearanceGroup');
+      webGroup.style.display = 'none';
+      // Iterate reverse to prepend the elements in the correct order.
+      for (let child of [...webGroup.children].reverse()) {
+        group.prepend(child);
+      }
+    }, 500);
+    this.setDarkThemeListener();
+  },
+
+  onPreferColorSchemeChange(event) {
+    const darkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    let elem = document.getElementById('ZenDarkThemeStyles');
+    if (darkTheme) {
+      elem.removeAttribute('hidden');
+    } else {
+      elem.setAttribute('hidden', 'true');
+    }
+  },
+
+  setDarkThemeListener() {
+    this.chooser = document.getElementById('zen-dark-theme-styles-form');
+    this.radios = [...this.chooser.querySelectorAll('input')];
+    for (let radio of this.radios) {
+      if (radio.value === 'amoled' && Services.prefs.getBoolPref('zen.theme.color-prefs.amoled')) {
+        radio.checked = true;
+      } else if (radio.value === 'colorful' && Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')) {
+        radio.checked = true;
+      } else if (
+        radio.value === 'default' &&
+        !Services.prefs.getBoolPref('zen.theme.color-prefs.amoled') &&
+        !Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')
+      ) {
+        radio.checked = true;
+      }
+      radio.addEventListener('change', (e) => {
+        let value = e.target.value;
+        switch (value) {
+          case 'amoled':
+            Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', true);
+            Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', false);
+            break;
+          case 'colorful':
+            Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', false);
+            Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', true);
+            break;
+          default:
+            Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', false);
+            Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', false);
+            break;
+        }
+      });
+    }
   },
 
   async onLegacyToolbarChange(event) {
-    let buttonIndex = await confirmRestartPrompt(
+    let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
-      true,
-      1,
-      true,
-      false
-    );
     if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
-      Services.startup.quit(
+      Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
-        Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
-      );
       return;
     }
   },
 
   _initializeTabbarExpandForm() {
-    const form = document.getElementById("zen-expand-tabbar-strat");
+    const form = document.getElementById('zen-expand-tabbar-strat');
-    const radios = form.querySelectorAll("input[type=radio]");
+    const radios = form.querySelectorAll('input[type=radio]');
-    const onHoverPref = "zen.view.sidebar-expanded.on-hover";
+    const onHoverPref = 'zen.view.sidebar-expanded.on-hover';
-    const defaultExpandPref = "zen.view.sidebar-expanded";
+    const defaultExpandPref = 'zen.view.sidebar-expanded';
     if (Services.prefs.getBoolPref(onHoverPref)) {
-      form.querySelector("input[value=\"hover\"]").checked = true;
+      form.querySelector('input[value="hover"]').checked = true;
     } else if (Services.prefs.getBoolPref(defaultExpandPref)) {
-      form.querySelector("input[value=\"expand\"]").checked = true;
+      form.querySelector('input[value="expand"]').checked = true;
     } else {
-      form.querySelector("input[value=\"none\"]").checked = true;
+      form.querySelector('input[value="none"]').checked = true;
     }
     for (let radio of radios) {
-      radio.addEventListener("change", e => {
+      radio.addEventListener('change', (e) => {
         switch (e.target.value) {
-          case "expand":
+          case 'expand':
             Services.prefs.setBoolPref(onHoverPref, false);
             Services.prefs.setBoolPref(defaultExpandPref, true);
             break;
-          case "none":
+          case 'none':
             Services.prefs.setBoolPref(onHoverPref, false);
             Services.prefs.setBoolPref(defaultExpandPref, false);
             break;
-          case "hover":
+          case 'hover':
             Services.prefs.setBoolPref(onHoverPref, true);
             Services.prefs.setBoolPref(defaultExpandPref, true);
             break;
@@ -283,19 +617,19 @@ var gZenLooksAndFeel = {
   },
 
   _initializeColorPicker(accentColor) {
-    let elem = document.getElementById("zenLooksAndFeelColorOptions");
+    let elem = document.getElementById('zenLooksAndFeelColorOptions');
-    elem.innerHTML = "";
+    elem.innerHTML = '';
     for (let color of kZenColors) {
-      let colorElemParen = document.createElement("div");
+      let colorElemParen = document.createElement('div');
-      let colorElem = document.createElement("div");
+      let colorElem = document.createElement('div');
-      colorElemParen.classList.add("zenLooksAndFeelColorOptionParen");
+      colorElemParen.classList.add('zenLooksAndFeelColorOptionParen');
-      colorElem.classList.add("zenLooksAndFeelColorOption");
+      colorElem.classList.add('zenLooksAndFeelColorOption');
-      colorElem.style.setProperty("--zen-primary-color", color, "important");
+      colorElem.style.setProperty('--zen-primary-color', color, 'important');
       if (accentColor === color) {
-        colorElemParen.setAttribute("selected", "true");
+        colorElemParen.setAttribute('selected', 'true');
       }
-      colorElemParen.addEventListener("click", () => {
+      colorElemParen.addEventListener('click', () => {
-        Services.prefs.setStringPref("zen.theme.accent-color", color);
+        Services.prefs.setStringPref('zen.theme.accent-color', color);
       });
       colorElemParen.appendChild(colorElem);
       elem.appendChild(colorElemParen);
@@ -308,38 +642,31 @@ var gZenLooksAndFeel = {
   },
 
   _getInitialAccentColor() {
-    return Services.prefs.getStringPref("zen.theme.accent-color", kZenColors[0]);
+    return Services.prefs.getStringPref('zen.theme.accent-color', kZenColors[0]);
   },
 };
 
 var gZenWorkspacesSettings = {
   init() {
-    Services.prefs.addObserver("zen.workspaces.enabled", this);
+    Services.prefs.addObserver('zen.workspaces.enabled', this);
-    window.addEventListener("unload", () => {
+    window.addEventListener('unload', () => {
-      Services.prefs.removeObserver("zen.workspaces.enabled", this);
+      Services.prefs.removeObserver('zen.workspaces.enabled', this);
     });
   },
 
   async observe(subject, topic, data) {
-    await this.onWorkspaceChange(Services.prefs.getBoolPref("zen.workspaces.enabled"));
+    await this.onWorkspaceChange(Services.prefs.getBoolPref('zen.workspaces.enabled'));
   },
 
   async onWorkspaceChange(checked) {
     if (checked) {
-      let buttonIndex = await confirmRestartPrompt(
+      let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
-        true,
-        1,
-        true,
-        false
-      );
       if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
-        Services.startup.quit(
+        Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
-          Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
-        );
         return;
       }
     }
-  }
+  },
 };
 
 var gZenCKSSettings = {
@@ -348,13 +675,13 @@ var gZenCKSSettings = {
     this._initializeEvents();
     this._initializeCKS();
     this._addPrefObservers();
-    window.addEventListener("unload", () => {
+    window.addEventListener('unload', () => {
-      Services.prefs.removeObserver("zen.keyboard.shortcuts.disable-firefox", this);
+      Services.prefs.removeObserver('zen.keyboard.shortcuts.disable-firefox', this);
     });
   },
 
   _addPrefObservers() {
-    Services.prefs.addObserver("zen.keyboard.shortcuts.disable-firefox", this);
+    Services.prefs.addObserver('zen.keyboard.shortcuts.disable-firefox', this);
   },
 
   observe(subject, topic, data) {
@@ -362,32 +689,25 @@ var gZenCKSSettings = {
   },
 
   async onDisableFirefoxShortcutsChange(event) {
-    let checked = Services.prefs.getBoolPref("zen.keyboard.shortcuts.disable-firefox");
+    let checked = Services.prefs.getBoolPref('zen.keyboard.shortcuts.disable-firefox');
     if (checked) return;
-    let buttonIndex = await confirmRestartPrompt(
+    let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
-      true,
-      1,
-      true,
-      false
-    );
     if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
-      Services.startup.quit(
+      Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
-        Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
-      );
       return;
     }
   },
 
   _initializeCKS() {
-    let wrapepr = document.getElementById("zenCKSOptions-wrapper");
+    let wrapepr = document.getElementById('zenCKSOptions-wrapper');
 
     // Create the groups first.
     for (let key in kZKSActions) {
       const data = kZKSActions[key];
       const group = data[2];
       if (!wrapepr.querySelector(`[data-group="${group}"]`)) {
-        let groupElem = document.createElement("h2");
+        let groupElem = document.createElement('h2');
-        groupElem.setAttribute("data-group", group);
+        groupElem.setAttribute('data-group', group);
         document.l10n.setAttributes(groupElem, `zen-cks-group-${group}`);
         wrapepr.appendChild(groupElem);
       }
@@ -405,9 +725,9 @@ var gZenCKSSettings = {
           <html:input readonly="1" class="zenCKSOption-input" id="zenCKSOption-${key}" />
         </hbox>
       `);
-      document.l10n.setAttributes(fragment.querySelector(".zenCKSOption-label"), l10nId);
+      document.l10n.setAttributes(fragment.querySelector('.zenCKSOption-label'), l10nId);
 
-      let input = fragment.querySelector(".zenCKSOption-input");
+      let input = fragment.querySelector('.zenCKSOption-input');
       let shortcut = gZenKeyboardShortcuts.getShortcut(key);
       if (shortcut) {
         input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
@@ -415,16 +735,16 @@ var gZenCKSSettings = {
         this._resetCKS(input, key);
       }
 
-      input.setAttribute("data-key", key);
+      input.setAttribute('data-key', key);
-      input.addEventListener("focus", (event) => {
+      input.addEventListener('focus', (event) => {
-        const key = event.target.getAttribute("data-key");
+        const key = event.target.getAttribute('data-key');
         this._currentAction = key;
-        event.target.classList.add("zenCKSOption-input-editing");
+        event.target.classList.add('zenCKSOption-input-editing');
       });
 
-      input.addEventListener("blur", (event) => {
+      input.addEventListener('blur', (event) => {
         this._currentAction = null;
-        event.target.classList.remove("zenCKSOption-input-editing");
+        event.target.classList.remove('zenCKSOption-input-editing');
       });
 
       const groupElem = wrapepr.querySelector(`[data-group="${group}"]`);
@@ -433,14 +753,14 @@ var gZenCKSSettings = {
   },
 
   _resetCKS(input, key) {
-    input.value = "Not set";
+    input.value = 'Not set';
-    input.classList.add("zenCKSOption-input-not-set");
+    input.classList.add('zenCKSOption-input-not-set');
-    input.classList.remove("zenCKSOption-input-invalid");
+    input.classList.remove('zenCKSOption-input-invalid');
     gZenKeyboardShortcuts.setShortcut(key, null);
   },
 
   _initializeEvents() {
-    window.addEventListener("keydown", this._handleKeyDown.bind(this));
+    window.addEventListener('keydown', this._handleKeyDown.bind(this));
   },
 
   _handleKeyDown(event) {
@@ -453,18 +773,18 @@ var gZenCKSSettings = {
       ctrl: event.ctrlKey,
       alt: event.altKey,
       shift: event.shiftKey,
-      meta: event.metaKey
+      meta: event.metaKey,
     };
 
     const shortcutWithoutModifiers = !shortcut.ctrl && !shortcut.alt && !shortcut.shift && !shortcut.meta;
 
-    if (event.key === "Tab" && shortcutWithoutModifiers) {
+    if (event.key === 'Tab' && shortcutWithoutModifiers) {
       return;
-    } else if (event.key === "Escape" && shortcutWithoutModifiers) {
+    } else if (event.key === 'Escape' && shortcutWithoutModifiers) {
       this._currentAction = null;
       input.blur();
       return;
-    } else if (event.key === "Backspace" && shortcutWithoutModifiers) {
+    } else if (event.key === 'Backspace' && shortcutWithoutModifiers) {
       this._resetCKS(input, this._currentAction);
       return;
     }
@@ -474,7 +794,7 @@ var gZenCKSSettings = {
       return; // No modifiers, ignore.
     }
 
-    if (!(["Control", "Alt", "Meta", "Shift"].includes(event.key))) {
+    if (!['Control', 'Alt', 'Meta', 'Shift'].includes(event.key)) {
       if (event.keycode) {
         shortcut.keycode = event.keycode;
       } else {
@@ -486,70 +806,85 @@ var gZenCKSSettings = {
     gZenKeyboardShortcuts.setShortcut(this._currentAction, shortcut);
 
     input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
-    input.classList.remove("zenCKSOption-input-not-set");
+    input.classList.remove('zenCKSOption-input-not-set');
 
     if (gZenKeyboardShortcuts.isValidShortcut(shortcut)) {
-      input.classList.remove("zenCKSOption-input-invalid");
+      input.classList.remove('zenCKSOption-input-invalid');
     } else {
-      input.classList.add("zenCKSOption-input-invalid");
+      input.classList.add('zenCKSOption-input-invalid');
     }
   },
 };
 
 Preferences.addAll([
   {
-    id: "zen.theme.toolbar-themed",
+    id: 'zen.theme.toolbar-themed',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.sidebar.enabled",
+    id: 'zen.sidebar.enabled',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.sidebar.close-on-blur",
+    id: 'zen.sidebar.close-on-blur',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.view.compact",
+    id: 'zen.view.compact',
-    type: "bool",
+    type: 'bool',
     default: false,
   },
   {
-    id: "zen.view.compact.hide-toolbar",
+    id: 'zen.view.compact.hide-toolbar',
-    type: "bool",
+    type: 'bool',
     default: false,
   },
   {
-    id: "zen.workspaces.enabled",
+    id: 'zen.view.compact.toolbar-flash-popup',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.view.sidebar-expanded.show-button",
+    id: 'zen.workspaces.enabled',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.view.sidebar-expanded",
+    id: 'zen.view.sidebar-expanded.show-button',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.theme.pill-button",
+    id: 'zen.view.sidebar-expanded',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.keyboard.shortcuts.disable-firefox",
+    id: 'zen.theme.pill-button',
-    type: "bool",
+    type: 'bool',
+    default: true,
+  },
+  {
+    id: 'zen.keyboard.shortcuts.disable-firefox',
+    type: 'bool',
     default: false,
   },
   {
-    id: "zen.themes.tabs.legacy-location",
+    id: 'zen.themes.tabs.legacy-location',
-    type: "bool",
+    type: 'bool',
     default: false,
-  }
+  },
+  {
+    id: 'zen.workspaces.hide-default-container-indicator',
+    type: 'bool',
+    default: true,
+  },
+  {
+    id: 'zen.workspaces.individual-pinned-tabs',
+    type: 'bool',
+    default: true,
+  },
 ]);

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

@@ -17,24 +17,153 @@
 
       <html:div id="zen-theme-builder-wrapper"></html:div>
 
+      <box class="indent">
             <checkbox id="zenLooksAndFeelUseThemedToolbar"
             data-l10n-id="zen-look-and-feel-themed-toolbar"
             preference="zen.theme.toolbar-themed"/>
+      </box>
 
-      <label><html:h2 data-l10n-id="zen-look-and-feel-compact-view-header"/></label>
+      <html:div id="ZenDarkThemeStyles">
-      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-compact-view-description" />
+            <html:h2 data-l10n-id="zen-dark-theme-styles-header"/>
-
+            <description class="description-deemphasized" data-l10n-id="zen-dark-theme-styles-description" />
-      <checkbox id="zenLooksAndFeelShowCompactView"
+            <form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-dark-theme-styles-form">
-            data-l10n-id="zen-look-and-feel-compact-view-enabled"
+                  <label class="web-appearance-choice">
-            preference="zen.view.compact"/>
+                        <div class="web-appearance-choice-image-container">
-      <vbox class="indent">
+<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
-            <checkbox id="zenLooksAndFeelShowCompactViewToolbar"
+    <g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
-                  data-l10n-id="zen-look-and-feel-compact-view-top-toolbar"
+        <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-                  preference="zen.view.compact.hide-toolbar"/> 
+            <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:transparent"/>
-      </vbox>
+        </g>
-      <checkbox id="zenLooksAndFeelShowLegacyToolbar"
+        <g id="Outline">
-            data-l10n-id="zen-look-and-feel-legacy-toolbar"
+            <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-            preference="zen.themes.tabs.legacy-location"/>
+                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:7.21px;"/>
+            </g>
+            <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
+                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:8.78px;"/>
+            </g>
+        </g>
+        <g id="Top-Bar" serif:id="Top Bar">
+            <g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
+            </g>
+            <g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
+            </g>
+            <g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
+                <path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-colors-primary);"/>
+            </g>
+        </g>
+        <g id="Side-Bar" serif:id="Side Bar">
+            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
+            </g>
+            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
+            </g>
+            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
+            </g>
+        </g>
+    </g>
+</svg>      
+                        </div>
+                        <div class="web-appearance-choice-footer">
+                        <input type="radio" name="web-appearance" value="amoled" data-l10n-id="preferences-web-appearance-choice-input-auto"
+                        /><span data-l10n-id="zen-dark-theme-styles-amoled" />
+                  </div>
+                  </label>
+                        <label class="web-appearance-choice">
+                        <div class="web-appearance-choice-image-container">
+<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
+        <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
+            <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 40%, transparent 40%)"/>
+        </g>
+        <g id="Outline">
+            <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
+                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:7.21px;"/>
+            </g>
+            <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
+                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:8.78px;"/>
+            </g>
+        </g>
+        <g id="Top-Bar" serif:id="Top Bar">
+            <g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
+            </g>
+            <g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
+            </g>
+            <g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
+                <path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
+            </g>
+        </g>
+        <g id="Side-Bar" serif:id="Side Bar">
+            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
+            </g>
+            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
+            </g>
+            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
+            </g>
+        </g>
+    </g>
+</svg>      
+                        </div>
+                        <div class="web-appearance-choice-footer">
+                        <input type="radio" name="web-appearance" value="default" data-l10n-id="preferences-web-appearance-choice-input-light"
+                        /><span data-l10n-id="zen-dark-theme-styles-default" />
+                  </div>
+                  </label>
+                        <label class="web-appearance-choice">
+                        <div class="web-appearance-choice-image-container">
+<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
+        <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
+            <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:var(--zen-colors-secondary);"/>
+        </g>
+        <g id="Outline">
+            <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
+                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:7.21px;"/>
+            </g>
+            <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
+                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:8.78px;"/>
+            </g>
+        </g>
+        <g id="Top-Bar" serif:id="Top Bar">
+            <g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
+            </g>
+            <g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
+            </g>
+            <g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
+                <path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
+            </g>
+        </g>
+        <g id="Side-Bar" serif:id="Side Bar">
+            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
+            </g>
+            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
+            </g>
+            <g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
+                <circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
+            </g>
+        </g>
+    </g>
+</svg>      
+                        </div>
+                        <div class="web-appearance-choice-footer">
+                        <input type="radio" name="web-appearance" value="colorful" data-l10n-id="preferences-web-appearance-choice-input-dark"
+                        /><span data-l10n-id="zen-dark-theme-styles-colorful" />
+                  </div>
+                  </label>
+            </form>
+      </html:div>
 </groupbox>
 
 <hbox id="zenThemeCategory"
@@ -54,6 +183,24 @@
 
       <label><html:h2 data-l10n-id="zen-look-and-feel-urlbar-header"/></label>
       <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-urlbar-description" />
+
+      <label><html:h2 data-l10n-id="zen-look-and-feel-compact-view-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-compact-view-description" />
+
+      <checkbox id="zenLooksAndFeelShowCompactView"
+            data-l10n-id="zen-look-and-feel-compact-view-enabled"
+            preference="zen.view.compact"/>
+      <vbox class="indent">
+            <checkbox id="zenLooksAndFeelShowCompactViewToolbar"
+                  data-l10n-id="zen-look-and-feel-compact-view-top-toolbar"
+                  preference="zen.view.compact.hide-toolbar"/>
+            <checkbox id="zenLooksAndFeelEnableToolbarFlashPopup"
+                      data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"
+                      preference="zen.view.compact.toolbar-flash-popup"/>
+      </vbox>
+      <checkbox id="zenLooksAndFeelShowLegacyToolbar"
+            data-l10n-id="zen-look-and-feel-legacy-toolbar"
+            preference="zen.themes.tabs.legacy-location"/>
 </groupbox>
 
 <hbox id="zenSidePanelsCategory"

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

@@ -20,6 +20,14 @@
       <checkbox id="zenWorkspacesActivate"
             data-l10n-id="zen-settings-workspaces-enabled"
             preference="zen.workspaces.enabled"/>
+      <vbox class="indent">
+            <checkbox id="zenWorkspacesHideDefaultContainer"
+                  data-l10n-id="zen-settings-workspaces-hide-default-container-indicator"
+                  preference="zen.workspaces.hide-default-container-indicator"/>
+            <checkbox id="zenWorkspacesAllowPinnedTabsForDifferentWorkspaces"
+                  data-l10n-id="zen-settings-workspaces-allow-pinned-tabs-for-different-workspaces"
+                  preference="zen.workspaces.individual-pinned-tabs"/>
+      </vbox>
 </groupbox>
 
 </html:template>

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

@@ -1,12 +1,13 @@
 diff --git a/browser/components/sessionstore/TabState.sys.mjs b/browser/components/sessionstore/TabState.sys.mjs
-index 26f5671c849d9b0a126d79b07bc7d3d7870826ec..decc4c975507c9111df78dbc43434fa46d5f5e82 100644
+index 26f5671c849d9b0a126d79b07bc7d3d7870826ec..26f80d69a28f1196096e67a0e628a69b5b367727 100644
 --- a/browser/components/sessionstore/TabState.sys.mjs
 +++ b/browser/components/sessionstore/TabState.sys.mjs
-@@ -98,6 +98,8 @@ var TabStateInternal = {
+@@ -98,6 +98,9 @@ var TabStateInternal = {
        tabData.muteReason = tab.muteReason;
      }
  
 +    tabData.zenWorkspace = tab.getAttribute("zen-workspace-id");
++    tabData.zenDefaultUserContextId = tab.getAttribute("zenDefaultUserContextId");
 +
      tabData.searchMode = tab.ownerGlobal.gURLBar.getSearchMode(browser, true);
  

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

@@ -1,8 +1,45 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 6e7a8ca21a20626a0607d860c56e39991b4aa2b8..d998059907f2467b0648c94c54c502278e2b188d 100644
+index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b1050f0a750b 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
-@@ -3214,6 +3214,11 @@
+@@ -453,10 +453,12 @@
+     },
+ 
+     get _numPinnedTabs() {
+-      for (var i = 0; i < this.tabs.length; i++) {
+-        if (!this.tabs[i].pinned) {
++      let i = 0;
++      for (let tab of this.tabs) {
++        if (!tab.pinned) {
+           break;
+         }
++        i++;
+       }
+       return i;
+     },
+@@ -2704,6 +2706,11 @@
+         );
+       }
+ 
++      let hasZenDefaultUserContextId = false;
++      if (typeof ZenWorkspaces !== "undefined") {
++        [userContextId, hasZenDefaultUserContextId] = ZenWorkspaces.getContextIdIfNeeded(userContextId);
++      }
++
+       if (!UserInteraction.running("browser.tabs.opening", window)) {
+         UserInteraction.start("browser.tabs.opening", "initting", window);
+       }
+@@ -2771,6 +2778,9 @@
+           noInitialLabel,
+           skipBackgroundNotify,
+         });
++        if (hasZenDefaultUserContextId) {
++          t.setAttribute("zenDefaultUserContextId", "true");
++        }
+         if (insertTab) {
+           // insert the tab into the tab container in the correct position
+           this._insertTabAtIndex(t, {
+@@ -3248,6 +3258,14 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -10,22 +47,28 @@ index 6e7a8ca21a20626a0607d860c56e39991b4aa2b8..d998059907f2467b0648c94c54c50227
 +          if (tabData.zenWorkspace) {
 +            tab.setAttribute("zen-workspace-id", tabData.zenWorkspace);
 +          }
++          if (tabData.zenDefaultUserContextId) {
++            tab.setAttribute("zenDefaultUserContextId", "true");
++          }
 +
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3263,6 +3268,10 @@
+@@ -3297,6 +3315,13 @@
              preferredRemoteType,
            });
  
 +          if (tabData.zenWorkspace) {
 +            tab.setAttribute("zen-workspace-id", tabData.zenWorkspace);
 +          }
++          if (tabData.zenDefaultUserContextId) {
++            tab.setAttribute("zenDefaultUserContextId", "true");
++          }
 +
            if (select) {
              tabToSelect = tab;
            }
-@@ -4150,6 +4159,7 @@
+@@ -4184,6 +4209,7 @@
          isLastTab ||
          aTab.pinned ||
          aTab.hidden ||
@@ -33,3 +76,16 @@ index 6e7a8ca21a20626a0607d860c56e39991b4aa2b8..d998059907f2467b0648c94c54c50227
          this._removingTabs.size >
            3 /* don't want lots of concurrent animations */ ||
          !aTab.hasAttribute(
+@@ -5117,10 +5143,10 @@
+       SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
+     },
+ 
+-    hideTab(aTab, aSource) {
++    hideTab(aTab, aSource, forZenWorkspaces = false) {
+       if (
+         aTab.hidden ||
+-        aTab.pinned ||
++        (aTab.pinned && !forZenWorkspaces) ||
+         aTab.selected ||
+         aTab.closing ||
+         // Tabs that are sharing the screen, microphone or camera cannot be hidden.

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

@@ -0,0 +1,20 @@
+diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
+index 282e7f31fe158d929130c17628f7e30f690fd666..7225cb6bae5af213718a4e2df41f855631d6ce4e 100644
+--- a/browser/components/tabbrowser/content/tabs.js
++++ b/browser/components/tabbrowser/content/tabs.js
+@@ -1387,10 +1387,12 @@
+ 
+     _handleTabSelect(aInstant) {
+       let selectedTab = this.selectedItem;
+-      if (this.hasAttribute("overflow")) {
+-        this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
+-      }
++      this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
+ 
++      if (!aInstant && Services.prefs.getBoolPref('zen.view.compact')
++          && Services.prefs.getBoolPref('zen.view.compact.toolbar-flash-popup')) {
++        gZenCompactModeManager.flashSidebar();
++      }
+       selectedTab._notselectedsinceload = false;
+     }
+ 

src/browser/components/zen-welcome/IMPORTANT.md

@@ -1,4 +1,3 @@
-
 # Important notes!
 
 Inside browser.js, we hardcoded-ly detect the path name for `zen-welcome` so we can add special attributes to the welcom page. If this path name changes, the welcome page will not work properly.

src/browser/components/zen-welcome/welcome.css

@@ -14,7 +14,6 @@ html {
 }
 
 body {
-
   display: flex;
   position: relative;
   width: 100%;
@@ -30,10 +29,12 @@ body {
   --zen-gradient-background: var(--zen-colors-tertiary);
   --zen-gradient-border: #fbffbe;
 
-  &::before, &::after {
+  &::before,
-    content: "";
+  &::after {
+    content: '';
     position: absolute;
-    top: 0; left: 0;
+    top: 0;
+    left: 0;
     z-index: -1;
     display: block;
     width: 100%;
@@ -47,7 +48,13 @@ body {
 
   &::after {
     mask-image: var(--noise), linear-gradient(45deg, #000 0%, transparent 25%, transparent 75%, #000 100%);
-    background: linear-gradient(45deg, #6d6dff 10%, var(--zen-gradient-background) 25%, var(--zen-gradient-background) 75%, var(--zen-gradient-border) 90%);
+    background: linear-gradient(
+      45deg,
+      #6d6dff 10%,
+      var(--zen-gradient-background) 25%,
+      var(--zen-gradient-background) 75%,
+      var(--zen-gradient-border) 90%
+    );
   }
 }
 
@@ -112,7 +119,7 @@ h2 {
   line-height: 1;
 }
 
-.page-split:not([hidden="true"]) {
+.page-split:not([hidden='true']) {
   flex-direction: column;
   margin: auto;
   justify-content: start;
@@ -127,7 +134,7 @@ h2 {
   text-align: center;
 }
 
-#theme .card[disabled="true"] {
+#theme .card[disabled='true'] {
   opacity: 0.7;
   cursor: not-allowed;
 }
@@ -147,7 +154,7 @@ h2 {
   align-items: center;
   align-content: space-between;
   border: 2px solid var(--arrowpanel-border-color) !important;
-  transition: all .1s ease-in-out !important;
+  transition: all 0.1s ease-in-out !important;
   margin: 0 10px;
   border-radius: 7px;
   outline: none !important;
@@ -222,15 +229,15 @@ input[type='checkbox'] {
   margin-top: 20px;
 }
 
-.page[hidden="true"] {
+.page[hidden='true'] {
   display: none;
 }
 
-.page:not([hidden="true"]) {
+.page:not([hidden='true']) {
   display: flex;
 }
 
-.page:not([hidden="true"]) > * {
+.page:not([hidden='true']) > * {
   opacity: 0;
   animation: fadeInRight 0.3s ease-in-out forwards;
 }
@@ -250,10 +257,18 @@ input[type='checkbox'] {
 }
 
 /* There should be no more than 5 elements in a page */
-.page:not([hidden="true"]) > *:nth-child(2) { animation-delay: 0.1s; }
+.page:not([hidden='true']) > *:nth-child(2) {
-.page:not([hidden="true"]) > *:nth-child(3) { animation-delay: 0.2s; }
+  animation-delay: 0.1s;
-.page:not([hidden="true"]) > *:nth-child(4) { animation-delay: 0.3s; }
+}
-.page:not([hidden="true"]) > *:nth-child(5) { animation-delay: 0.4s; }
+.page:not([hidden='true']) > *:nth-child(3) {
+  animation-delay: 0.2s;
+}
+.page:not([hidden='true']) > *:nth-child(4) {
+  animation-delay: 0.3s;
+}
+.page:not([hidden='true']) > *:nth-child(5) {
+  animation-delay: 0.4s;
+}
 
 .card h3 {
   margin-top: 10px;

src/browser/components/zen-welcome/welcome.js

@@ -1,86 +1,76 @@
 // 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 { XPCOMUtils } = ChromeUtils.import(
+const { XPCOMUtils } = ChromeUtils.import('resource://gre/modules/XPCOMUtils.jsm');
-  'resource://gre/modules/XPCOMUtils.jsm'
-)
 
 XPCOMUtils.defineLazyModuleGetters(this, {
   AddonManager: 'resource://gre/modules/AddonManager.jsm',
   MigrationUtils: 'resource:///modules/MigrationUtils.jsm',
-})
+});
 
-ChromeUtils.defineModuleGetter(
+ChromeUtils.defineModuleGetter(this, 'ExtensionSettingsStore', 'resource://gre/modules/ExtensionSettingsStore.jsm');
-  this,
-  'ExtensionSettingsStore',
-  'resource://gre/modules/ExtensionSettingsStore.jsm'
-);
 
-Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs");
+Services.scriptloader.loadSubScript('chrome://browser/content/ZenUIManager.mjs');
 
-const kWelcomeSeenPref = 'zen.welcomeScreen.seen'
+const kWelcomeSeenPref = 'zen.welcomeScreen.seen';
 
 // =============================================================================
 // Util stuff copied from browser/components/preferences/search.js
 
 class EngineStore {
   constructor() {
-    this._engines = []
+    this._engines = [];
   }
 
   async init() {
-    const visibleEngines = await Services.search.getVisibleEngines()
+    const visibleEngines = await Services.search.getVisibleEngines();
-    this.initSpecificEngine(visibleEngines)
+    this.initSpecificEngine(visibleEngines);
   }
 
   getEngine() {
-    return this._engines
+    return this._engines;
   }
 
   initSpecificEngine(engines) {
     for (const engine of engines) {
       try {
-        this._engines.push(this._cloneEngine(engine))
+        this._engines.push(this._cloneEngine(engine));
       } catch (e) {
         // Ignore engines that throw an exception when cloning.
-        console.error(e)
+        console.error(e);
       }
     }
   }
 
   getEngineByName(name) {
-    return this._engines.find((engine) => engine.name == name)
+    return this._engines.find((engine) => engine.name == name);
   }
 
   _cloneEngine(aEngine) {
-    const clonedObj = {}
+    const clonedObj = {};
 
     for (const i of ['name', 'alias', '_iconURI', 'hidden']) {
-      clonedObj[i] = aEngine[i]
+      clonedObj[i] = aEngine[i];
     }
 
-    clonedObj.originalEngine = aEngine
+    clonedObj.originalEngine = aEngine;
 
-    return clonedObj
+    return clonedObj;
   }
 
   async getDefaultEngine() {
-    let engineName = await Services.search.getDefault()
+    let engineName = await Services.search.getDefault();
-    return this.getEngineByName(engineName._name)
+    return this.getEngineByName(engineName._name);
   }
 
   async setDefaultEngine(engine) {
-    await Services.search.setDefault(
+    await Services.search.setDefault(engine.originalEngine, Ci.nsISearchService.CHANGE_REASON_USER);
-      engine.originalEngine,
-      Ci.nsISearchService.CHANGE_REASON_USER
-    )
   }
 }
 
 // =============================================================================
 
-const sleep = (duration) =>
+const sleep = (duration) => new Promise((resolve) => setTimeout(resolve, duration));
-  new Promise((resolve) => setTimeout(resolve, duration))
 
 class Page {
   /**
@@ -88,7 +78,7 @@ class Page {
    * @param {string} id The id of the element that represents this page.
    */
   constructor(id) {
-    this.element = document.getElementById(id)
+    this.element = document.getElementById(id);
   }
 
   /**
@@ -96,78 +86,81 @@ class Page {
    * @param {Pages} pages The pages wrapper
    */
   setPages(pages) {
-    this.pages = pages
+    this.pages = pages;
   }
 
   hide() {
-    this.element.setAttribute('hidden', 'true')
+    this.element.setAttribute('hidden', 'true');
   }
 
   show() {
-    this.element.removeAttribute('hidden')
+    this.element.removeAttribute('hidden');
   }
 }
 
 class Themes extends Page {
   constructor(id) {
-    super(id)
+    super(id);
 
-    this.loadThemes()
+    this.loadThemes();
   }
 
   async loadThemes() {
     window.addEventListener('DOMContentLoaded', this.setColorBar);
-    await sleep(1000)
+    await sleep(1000);
 
-    const themes = (await AddonManager.getAddonsByTypes(['theme'])).filter(
+    const themes = (await AddonManager.getAddonsByTypes(['theme'])).filter((theme) => theme.id !== 'default-theme@mozilla.org');
-      (theme) => theme.id !== "default-theme@mozilla.org"
-    )
     const themeList = document.getElementById('themeList');
 
-    const themeElements = ["firefox-compact-light@mozilla.org", "firefox-compact-dark@mozilla.org"];
+    const themeElements = ['firefox-compact-light@mozilla.org', 'firefox-compact-dark@mozilla.org'];
 
     themeElements.forEach((theme, i) => {
       let container = themeList.children[i];
-      container.addEventListener('click', (() => {
+      container.addEventListener(
+        'click',
+        (() => {
           if (container.hasAttribute('disabled')) {
-          return
+            return;
           }
           for (const el of themeList.children) {
-          el.classList.remove('selected')
+            el.classList.remove('selected');
           }
-        container.classList.add('selected')
+          container.classList.add('selected');
-        themes.find((t) => t.id === theme).enable()
+          themes.find((t) => t.id === theme).enable();
-      }).bind(this, i, container, theme));
+        }).bind(this, i, container, theme)
+      );
       if (themes.find((t) => t.id === theme).isActive) {
-        container.classList.add('selected')
+        container.classList.add('selected');
       }
-    })
+    });
   }
 
   setColorBar() {
     const colorList = document.getElementById('colorListWrapper');
-    const colors = ['#aac7ff', '#74d7cb', '#a0d490', '#dec663', '#ffb787', 
+    const colors = ['#aac7ff', '#74d7cb', '#a0d490', '#dec663', '#ffb787', '#ffb1c0', '#ddbfc3', '#f6b0ea', '#d4bbff'];
-        '#ffb1c0', '#ddbfc3', '#f6b0ea', '#d4bbff']
 
     colors.forEach((color) => {
-      const container = document.createElement('div')
+      const container = document.createElement('div');
-      container.classList.add('color')
+      container.classList.add('color');
-      container.style.backgroundColor = color
+      container.style.backgroundColor = color;
-      container.setAttribute('data-color', color)
+      container.setAttribute('data-color', color);
-      container.addEventListener('click', (() => {
+      container.addEventListener(
+        'click',
+        (() => {
           Services.prefs.setStringPref('zen.theme.accent-color', color);
-        colorList.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'))
+          colorList.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'));
-        container.classList.add('selected')
+          container.classList.add('selected');
-      }).bind(this, color, container))
+        }).bind(this, color, container)
+      );
 
-      colorList.appendChild(container)
+      colorList.appendChild(container);
     });
   }
 }
 
 class Thanks extends Page {
   constructor(id) {
-    super(id)
+    super(id);
 
     // Thanks :)
   }
@@ -175,28 +168,28 @@ class Thanks extends Page {
 
 class Search extends Page {
   constructor(id) {
-    super(id)
+    super(id);
 
-    this.store = new EngineStore()
+    this.store = new EngineStore();
-    this.searchList = []
+    this.searchList = [];
 
-    this.loadSearch()
+    this.loadSearch();
   }
 
   async loadSearch() {
-    await sleep(1100)
+    await sleep(1100);
-    await this.store.init()
+    await this.store.init();
 
-    const defaultEngine = await Services.search.getDefault()
+    const defaultEngine = await Services.search.getDefault();
 
-    const searchElements = document.getElementById('searchList')
+    const searchElements = document.getElementById('searchList');
 
     this.store.getEngine().forEach(async (search) => {
-      const container = await this.loadSpecificSearch(search, defaultEngine)
+      const container = await this.loadSpecificSearch(search, defaultEngine);
 
-      searchElements.appendChild(container)
+      searchElements.appendChild(container);
-      this.searchList.push(container)
+      this.searchList.push(container);
-    })
+    });
   }
 
   /**
@@ -204,42 +197,42 @@ class Search extends Page {
    */
   async loadSpecificSearch(search, defaultSearch) {
     const container = document.createElement('div');
-    container.classList.add('card')
+    container.classList.add('card');
-    container.classList.add('card-no-hover')
+    container.classList.add('card-no-hover');
 
     if (search.name == defaultSearch._name) {
-      container.classList.add('selected')
+      container.classList.add('selected');
     }
 
     container.addEventListener('click', () => {
-      this.searchList.forEach((el) => el.classList.remove('selected'))
+      this.searchList.forEach((el) => el.classList.remove('selected'));
-      container.classList.add('selected')
+      container.classList.add('selected');
-      this.store.setDefaultEngine(search)
+      this.store.setDefaultEngine(search);
-    })
+    });
 
     const img = document.createElement('img');
     img.src = await search.originalEngine.getIconURL();
 
-    const name = document.createElement('h3')
+    const name = document.createElement('h3');
-    name.textContent = search.name
+    name.textContent = search.name;
 
-    container.appendChild(img)
+    container.appendChild(img);
-    container.appendChild(name)
+    container.appendChild(name);
 
-    return container
+    return container;
   }
 }
 
 class Import extends Page {
   constructor(id) {
-    super(id)
+    super(id);
 
-    const importButton = document.getElementById('importBrowser')
+    const importButton = document.getElementById('importBrowser');
     importButton.addEventListener('click', async () => {
       MigrationUtils.showMigrationWizard(window, {
         zenBlocking: true,
       });
-    })
+    });
   }
 }
 
@@ -249,62 +242,62 @@ class Pages {
    * @param {Page[]} pages The pages
    */
   constructor(pages) {
-    console.info("Initializing welcome pages...");
+    console.info('Initializing welcome pages...');
-    this.pages = pages
+    this.pages = pages;
     this.currentPage = 0;
 
     window.maximize();
 
-    this.pages.forEach((page) => page.setPages(this))
+    this.pages.forEach((page) => page.setPages(this));
 
     this._displayCurrentPage();
-    console.info("Welcome pages initialized.")
+    console.info('Welcome pages initialized.');
 
-    this.nextEl = document.getElementById(`next`)
+    this.nextEl = document.getElementById(`next`);
-    this.prevEl = document.getElementById(`back`)
+    this.prevEl = document.getElementById(`back`);
 
     this.nextEl.addEventListener('click', () => {
-      this.next()
+      this.next();
-      this.prevEl.removeAttribute('disabled')
+      this.prevEl.removeAttribute('disabled');
-    })
+    });
 
     this.prevEl.addEventListener('click', () => {
-      this.currentPage--
+      this.currentPage--;
-      this._displayCurrentPage()
+      this._displayCurrentPage();
       if (this.pages.currentPage === 1) {
-        this.prevEl.setAttribute('disabled', 'true')
+        this.prevEl.setAttribute('disabled', 'true');
       }
     });
   }
 
   next() {
-    this.currentPage++
+    this.currentPage++;
 
     if (this.currentPage >= this.pages.length) {
       // We can use internal js apis to close the window. We also want to set
       // the settings api for welcome seen to false to stop it showing again
 
-      Services.prefs.setBoolPref(kWelcomeSeenPref, true)
+      Services.prefs.setBoolPref(kWelcomeSeenPref, true);
 
       close();
-      return
+      return;
     }
 
-    this._displayCurrentPage()
+    this._displayCurrentPage();
   }
 
   _displayCurrentPage() {
     let progress = document.getElementById('circular-progress');
     progress.style.setProperty('--progress', ((this.currentPage + 1) / this.pages.length) * 100);
     for (const page of this.pages) {
-      page.hide()
+      page.hide();
     }
     if (this.currentPage >= 1) {
-      document.body.classList.remove('gradient-background')
+      document.body.classList.remove('gradient-background');
     } else {
-      document.body.classList.add('gradient-background')
+      document.body.classList.add('gradient-background');
     }
-    this.pages[this.currentPage].show()
+    this.pages[this.currentPage].show();
   }
 }
 
@@ -314,4 +307,4 @@ const pages = new Pages([
   new Import('import'),
   new Search('search'),
   new Thanks('thanks'),
-])
+]);

src/browser/themes/addons/dream/experiment.css

@@ -3,4 +3,4 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Proton Light theme */
-@import url("chrome://browser/skin/light-dark-overrides.css");
+@import url('chrome://browser/skin/light-dark-overrides.css');

src/browser/themes/addons/galaxy/experiment.css

@@ -3,4 +3,4 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Proton Dark theme */
-@import url("chrome://browser/skin/light-dark-overrides.css");
+@import url('chrome://browser/skin/light-dark-overrides.css');

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

@@ -0,0 +1,22 @@
+diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
+index 963a33af85521914ba0dad973ef94e6a8c2afdd0..f31bd5261631cb9e00ee6b723d6f9a85f0ae3119 100644
+--- a/browser/themes/linux/browser.css
++++ b/browser/themes/linux/browser.css
+@@ -72,7 +72,7 @@
+     -moz-default-appearance: -moz-window-decorations;
+     appearance: auto;
+ 
+-    #navigator-toolbox,
++    #zen-main-app-wrapper,
+     dialog::backdrop {
+       border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
+       border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
+@@ -80,7 +80,7 @@
+ 
+     /* stylelint-disable-next-line media-query-no-invalid */
+     @media (-moz-bool-pref: "widget.gtk.rounded-bottom-corners.enabled") {
+-      #navigator-toolbox {
++      #zen-main-app-wrapper {
+         /* The body clip below covers this. */
+         border-radius: 0;
+       }

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

@@ -4,8 +4,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+@namespace html 'http://www.w3.org/1999/xhtml';
+
 :root {
-  --zen-settings-secondary-background: light-dark(#F2F4F4, #171717);
+  --zen-settings-secondary-background: light-dark(#f2f4f4, color-mix(in srgb, var(--zen-colors-tertiary) 50%, #0f0f0f 50%));
 }
 
 .main-content {
@@ -21,6 +23,22 @@ description {
   margin-top: 0 !important;
 }
 
+@keyframes dialogPopin {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+html|dialog {
+  animation: dialogPopin 0.2s ease-out;
+}
+
 groupbox {
   background: light-dark(white, color-mix(in srgb, var(--zen-primary-color) 2%, #1b1b1b 98%));
   padding-inline: unset !important;
@@ -32,6 +50,22 @@ groupbox {
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 }
 
+@media (-moz-bool-pref: 'zen.theme.color-prefs.amoled') {
+  groupbox {
+    background: #141414;
+  }
+}
+
+@media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') {
+  groupbox {
+    background: light-dark(white, color-mix(in srgb, var(--zen-primary-color) 10%, #1b1b1b 90%));
+  }
+
+  :root {
+    --zen-settings-secondary-background: light-dark(#f2f4f4, color-mix(in srgb, var(--zen-colors-tertiary) 70%, #0f0f0f 30%));
+  }
+}
+
 .subcategory + groupbox,
 #noFxaAccount,
 #hasFxaAccount {
@@ -50,7 +84,7 @@ groupbox:has(+ .subcategory) {
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 }
 
-.sticky-inner-container{
+.sticky-inner-container {
   display: none !important;
 }
 
@@ -74,7 +108,7 @@ groupbox menulist {
 }
 
 groupbox h2 {
-  opacity: .7;
+  opacity: 0.7;
   font-size: 15px;
 }
 
@@ -87,11 +121,10 @@ groupbox h2 {
   min-height: 40px !important;
   position: relative;
   padding-inline: 20px !important;
-
 }
 
 #categories > .category[selected]::before {
-  content: "";
+  content: '';
   display: block;
   height: 70%;
   width: 5px;
@@ -102,7 +135,7 @@ groupbox h2 {
 }
 
 #languagesGroup::before {
-  content: "";
+  content: '';
   display: block;
   height: 1px;
   background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
@@ -141,6 +174,28 @@ groupbox h2 {
 
 /* Look and feel */
 
+#webAppearanceSettings,
+#zen-theme-builder-wrapper + box {
+  margin-bottom: 15px;
+}
+
+#zen-dark-theme-styles-form {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-large);
+  margin-top: 5px;
+
+  & .web-appearance-choice-image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: 20px 0;
+
+    background: color-mix(in srgb, var(--zen-colors-tertiary) 50%, transparent 50%);
+  }
+}
+
 #zen-expand-tabbar-strat {
   display: flex;
   flex-direction: column;
@@ -151,7 +206,7 @@ groupbox h2 {
 }
 
 #category-zen-looks > .category-icon {
-  list-style-image: url("chrome://browser/skin/customize.svg");
+  list-style-image: url('chrome://browser/skin/customize.svg');
 }
 
 #zenLooksAndFeelColorOptions {
@@ -175,7 +230,7 @@ groupbox h2 {
   border: 2px solid transparent;
 }
 
-.zenLooksAndFeelColorOptionParen[selected="true"] {
+.zenLooksAndFeelColorOptionParen[selected='true'] {
   border-color: var(--zen-primary-color);
 }
 
@@ -189,7 +244,7 @@ groupbox h2 {
 }
 
 .zenLooksAndFeelColorOption::before {
-  content: "";
+  content: '';
   display: block;
   width: 50%;
   height: 50%;
@@ -200,7 +255,7 @@ groupbox h2 {
 }
 
 .zenLooksAndFeelColorOption::after {
-  content: "";
+  content: '';
   display: block;
   width: 50%;
   height: 50%;
@@ -213,13 +268,13 @@ groupbox h2 {
 /* Workspace */
 
 #category-zen-workspaces > .category-icon {
-  list-style-image: url("chrome://browser/skin/window.svg");
+  list-style-image: url('chrome://browser/skin/window.svg');
 }
 
 /* CKS */
 
 #category-zen-CKS > .category-icon {
-  list-style-image: url("chrome://browser/skin/quickactions.svg");
+  list-style-image: url('chrome://browser/skin/quickactions.svg');
 }
 
 .zenCKSOption-input {
@@ -316,18 +371,40 @@ groupbox h2 {
   transform: translate(-50%, -50%);
 }
 
-
 /* THemes marketplace */
 
 #category-zen-marketplace > .category-icon {
-  list-style-image: url("chrome://mozapps/skin/extensions/category-themes.svg");
+  list-style-image: url('chrome://mozapps/skin/extensions/category-themes.svg');
 }
 
 .zenThemeMarketplaceItem {
-  width: 100%;
+  border: 1px solid var(--zen-colors-border);
+  border-radius: 5px;
+  padding: var(--space-medium);
+  position: relative;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
 
-  &:not(:first-of-type), .zenThemeMarketplaceItemPreferences {
+.zenThemeMarketplaceItemConfigureButton {
-    margin-top: 15px;
+  width: 30px;
+  min-width: 0;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 15px;
+    height: 15px;
+    background-image: url('chrome://global/skin/icons/settings.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
   }
 }
 
@@ -335,6 +412,10 @@ groupbox h2 {
   margin-right: 10px;
 }
 
+.zenThemeMarketplaceItemPreference:first-of-type {
+  margin-top: 10px;
+}
+
 .zenThemeMarketplaceItemPreference:not(:last-of-type) {
   margin-bottom: 10px;
 }
@@ -343,6 +424,32 @@ groupbox h2 {
   margin: 0;
 }
 
+.zenThemeMarketplaceItemContent {
+  max-width: 100%;
+  width: 100%;
+}
+
+.zenThemeMarketplaceItemTitle,
+.zenThemeMarketplaceItemDescription {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.zenThemeMarketplaceItemActions {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-top: var(--space-small);
+  justify-content: space-between;
+}
+
+#zenThemeMarketplaceList {
+  display: grid;
+  gap: var(--space-medium);
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
 #zenThemeMarketplaceList:has(> *) {
   margin: 15px 0;
 }
@@ -355,6 +462,35 @@ groupbox h2 {
   margin-left: auto;
 }
 
+.zenThemeMarketplaceItemPreferenceDialog {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  min-width: 650px;
+}
+
+.zenThemeMarketplaceItemPreferenceDialogTopBar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.zenThemeMarketplaceItemPreferenceDialogContent {
+  display: flex;
+  flex-direction: row;
+}
+
+#zenThemeMarketplaceItemContentHeader {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  & moz-toggle {
+    margin-left: 10px;
+  }
+}
+
 /* Disable mozilla's settings */
 
 #dataCollectionCategory,

src/toolkit/modules/AppConstants-sys-mjs.patch

@@ -0,0 +1,13 @@
+diff --git a/toolkit/modules/AppConstants.sys.mjs b/toolkit/modules/AppConstants.sys.mjs
+index a20e45c6135d24e42594700fe57184a560facd0f..7650dd88dc67d774c3af05704f2539ff92e21be2 100644
+--- a/toolkit/modules/AppConstants.sys.mjs
++++ b/toolkit/modules/AppConstants.sys.mjs
+@@ -338,6 +338,8 @@ export var AppConstants = Object.freeze({
+   MOZ_UPDATE_CHANNEL: "@MOZ_UPDATE_CHANNEL@",
+   MOZ_WIDGET_TOOLKIT: "@MOZ_WIDGET_TOOLKIT@",
+ 
++  ZEN_FIREFOX_VERSION: "@ZEN_FIREFOX_VERSION@",
++
+   DEBUG_JS_MODULES: "@DEBUG_JS_MODULES@",
+ 
+   MOZ_BING_API_CLIENTID: "@MOZ_BING_API_CLIENTID@",

src/toolkit/modules/UpdateUtils-sys-mjs.patch

@@ -0,0 +1,13 @@
+diff --git a/toolkit/modules/UpdateUtils.sys.mjs b/toolkit/modules/UpdateUtils.sys.mjs
+index be9ce9d5402c30bf4a9712f1ce9026503c191a53..230882363b3e1bbe7f0977567db61f72494a19ea 100644
+--- a/toolkit/modules/UpdateUtils.sys.mjs
++++ b/toolkit/modules/UpdateUtils.sys.mjs
+@@ -81,7 +81,7 @@ export var UpdateUtils = {
+           replacement = Services.appinfo.name;
+           break;
+         case "VERSION":
+-          replacement = Services.appinfo.version;
++          replacement = AppConstants.ZEN_FIREFOX_VERSION;
+           break;
+         case "BUILD_ID":
+           replacement = Services.appinfo.appBuildID;

src/toolkit/modules/moz-build.patch

@@ -0,0 +1,12 @@
+diff --git a/toolkit/modules/moz.build b/toolkit/modules/moz.build
+index 6ba1e92026f6f1618ce3a477f74bb6d0fa20f7c1..ccf3fa076771da7c9a5cb2bb732558cb73d810af 100644
+--- a/toolkit/modules/moz.build
++++ b/toolkit/modules/moz.build
+@@ -281,6 +281,7 @@ for var in (
+     "DLL_SUFFIX",
+     "DEBUG_JS_MODULES",
+     "OMNIJAR_NAME",
++    "ZEN_FIREFOX_VERSION"
+ ):
+     DEFINES[var] = CONFIG[var] or ""
+ 

src/toolkit/moz-configure.patch

@@ -1,8 +1,22 @@
 diff --git a/toolkit/moz.configure b/toolkit/moz.configure
-index dfef4ee7bd74a232f8f9eaa158303e59a2a32e62..77864261c8dbf2947738b97733553da67608c060 100644
+index 1f85d2831f2f71ebe4c7216bd604926d71e5189e..fb0d07554a592339f5a794151d953cb9269afd75 100644
 --- a/toolkit/moz.configure
 +++ b/toolkit/moz.configure
-@@ -905,9 +905,9 @@ set_define("MOZ_AV1", av1)
+@@ -81,6 +81,13 @@ option(
+ )
+ set_config("MOZ_INCLUDE_SOURCE_INFO", True, when="MOZ_INCLUDE_SOURCE_INFO")
+ 
++option(
++    env="ZEN_FIREFOX_VERSION",
++    default="130.0",
++    help="Set the version of the browser",
++)
++set_config("ZEN_FIREFOX_VERSION", "130.0", when="ZEN_FIREFOX_VERSION")
++
+ option(
+     "--with-distribution-id",
+     nargs=1,
+@@ -905,9 +912,9 @@ set_define("MOZ_AV1", av1)
  option("--disable-jxl", help="Disable jxl image support")