Update subproject commit in l10n

Sign and package windows artifacts

.gitattributes

@@ -1,2 +1 @@
 *.patch linguist-language=C++
-.github/workflows/object/*.tar.gz filter=lfs diff=lfs merge=lfs -text

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: Zen Alpha builds
+name: Zen Release builds
 
 on:
   workflow_dispatch:
@@ -13,16 +13,87 @@ on:
         required: false
         default: false
         type: 'boolean'
+      update_branch:
+        description: 'Update branch with new version'
+        required: true
+        default: 'alpha'
+        type: 'choice'
+        options:
+          - 'alpha'
+          - 'twilight'
+  workflow_call:
+    inputs:
+      create_release:
+        description: 'Create a new release for this build'
+        required: false
+        default: false
+        type: 'boolean'
+      update_version:
+        description: 'Update the version number'
+        required: false
+        default: false
+        type: 'boolean'
+      update_branch:
+        description: 'Update branch with new version'
+        required: true
+        default: 'alpha'
+        type: 'string'
 
 jobs:
+  debug-inputs:
+    name: Debug inputs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Debug
+        run: |
+          echo "create_release: ${{ inputs.create_release }}"
+          echo "update_version: ${{ inputs.update_version }}"
+          echo "update_branch: ${{ inputs.update_branch }}"
+          echo "GITHUB_REPOSITORY: ${{ github.repository }}"
+          echo "GITHUB_REPOSITORY_OWNER: ${{ github.repository_owner }}"
+          echo "GITHUB_REPOSITORY_OWNER: ${{ github.repository_owner }}"
+          echo "GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}"
+
+  check-build-is-correct:
+    runs-on: ubuntu-latest
+    needs: [debug-inputs]
+    steps:
+
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ secrets.DEPLOY_KEY }}
+          fetch-depth: 0
+
+      - name: Check if correct branch
+        run: |
+          echo "Checking if we are on the correct branch"
+          git branch
+          git status
+          git branch --show-current
+          branch="${{ inputs.update_branch }}"
+          if [[ $branch == "alpha" ]]; then
+            branch="stable"
+          elif [[ $branch == "twilight" ]]; then
+            branch="dev"
+          fi
+          if [[ $(git branch --show-current) != $branch ]]; then
+            echo ">>> Branch mismatch"
+            exit 1
+          else
+            echo ">>> Branch matches"
+          fi
+
   build-data:
     permissions:
       contents: write
     name: Generate build data
     runs-on: ubuntu-latest
+    needs: check-build-is-correct
     outputs:
       build_date: ${{ steps.data.outputs.builddate }}
       version: ${{ steps.data.outputs.version }}
+      build_time: ${{ steps.data.outputs.buildtime }}
     steps:
       - name: Install Node.js
         uses: actions/setup-node@v3
@@ -51,14 +122,14 @@ jobs:
           npm i -g @zen-browser/surfer
 
       - name: Bump version
-        if: ${{ github.event.inputs.update_version == 'true' }}
+        if: ${{ inputs.update_version && inputs.update_branch == 'alpha' }}
         run: |
-          pnpm surfer ci --brand alpha --bump prepatch
+          pnpm surfer ci --brand ${{ inputs.update_branch }} --bump prerelease
 
       - name: Bump version without new version
-        if: ${{ github.event.inputs.update_version == 'false' }}
+        if: ${{ !inputs.update_version || inputs.update_branch == 'twilight' }}
         run: |
-          pnpm surfer ci --brand alpha
+          pnpm surfer ci --brand ${{ inputs.update_branch }}
 
       - name: Debug
         run: |
@@ -72,9 +143,10 @@ jobs:
         run: |
           echo "builddate=$(date +"%Y-%m-%d")" >> $GITHUB_OUTPUT
           echo "version=$(surfer get version | xargs)" >> $GITHUB_OUTPUT
+          echo "buildtime=$(date +"%H:%M:%S")" >> $GITHUB_OUTPUT
 
       - uses: stefanzweifel/git-auto-commit-action@v4
-        if: ${{ github.event.inputs.update_version == 'true' }}
+        if: ${{ inputs.update_version }}
         with:
           commit_message: 🔖 Update version to ${{ steps.data.outputs.version }}
           commit_user_name: Zen Browser Robot
@@ -113,7 +185,7 @@ jobs:
       - name: Activate surfer CLI
         run: |
           echo "There's a bug in the surfer CLI, we run this so that surfer sets everything up correctly"
-          pnpm surfer ci --brand alpha --display-version ${{ needs.build-data.outputs.version }}
+          pnpm surfer ci --brand ${{ inputs.update_branch }} --display-version ${{ needs.build-data.outputs.version }}
 
       - name: Check version
         run: |
@@ -132,7 +204,7 @@ jobs:
       contents: write
     runs-on: ubuntu-latest
     needs: [build-data, check-release]
-    environment: production
+    
     steps:
       - name: Install Node.js
         uses: actions/setup-node@v3
@@ -162,7 +234,7 @@ jobs:
         run: pnpm install
 
       - name: Load surfer CI setup
-        run: pnpm surfer ci --brand alpha --display-version ${{ needs.build-data.outputs.version }}
+        run: pnpm surfer ci --brand ${{ inputs.update_branch }} --display-version ${{ needs.build-data.outputs.version }}
 
       - name: Download firefox source and dependancies
         run: pnpm surfer download --verbose
@@ -185,7 +257,7 @@ jobs:
 
   windows-step-1:
     name: Windows build step 1 (PGO build)
-    uses: ./.github/workflows/windows-alpha-build.yml
+    uses: ./.github/workflows/windows-release-build.yml
     needs: [build-data]
     permissions:
       contents: write
@@ -194,6 +266,7 @@ jobs:
       build-version: ${{ needs.build-data.outputs.version }}
       generate-gpo: true
       profile-data-path-archive: zen-windows-x86_64-profile-data-and-jarlog.zip
+      release-branch: ${{ inputs.update_branch }}
 
   windows-step-2:
     name: Windows build step 2 (Generate profile data)
@@ -205,10 +278,11 @@ jobs:
     with:
       build-version: ${{ needs.build-data.outputs.version }}
       profile-data-path-archive: zen.win64-pgo-stage-1.zip
+      release-branch: ${{ inputs.update_branch }}
 
   windows-step-3:
     name: Windows build step 3 (build with profile data)
-    uses: ./.github/workflows/windows-alpha-build.yml
+    uses: ./.github/workflows/windows-release-build.yml
     permissions:
       contents: write
     secrets: inherit
@@ -216,26 +290,29 @@ jobs:
     with:
       build-version: ${{ needs.build-data.outputs.version }}
       generate-gpo: false
+      release-branch: ${{ inputs.update_branch }}
 
   linux:
     name: Linux build
-    uses: ./.github/workflows/linux-alpha-build.yml
+    uses: ./.github/workflows/linux-release-build.yml
     permissions:
       contents: write
     secrets: inherit
     needs: [build-data]
     with:
       build-version: ${{ needs.build-data.outputs.version }}
+      release-branch: ${{ inputs.update_branch }}
 
   mac:
     name: macOS build
-    uses: ./.github/workflows/macos-alpha-build.yml
+    uses: ./.github/workflows/macos-release-build.yml
     permissions:
       contents: write
     secrets: inherit
     needs: [build-data]
     with:
       build-version: ${{ needs.build-data.outputs.version }}
+      release-branch: ${{ inputs.update_branch }}
 
   appimage:
     name: AppImage build - Linux ${{ matrix.generic == true && 'generic' || 'specific' }}
@@ -261,7 +338,7 @@ jobs:
         run: |
           npm install -g pnpm
           sudo apt-get update
-          sudo apt-get -y install libfuse2 desktop-file-utils
+          sudo apt-get -y install libfuse2 desktop-file-utils appstream 
 
       - name: Download linux build
         uses: actions/download-artifact@v4
@@ -272,8 +349,13 @@ jobs:
         run: |
           set -eux
           rm AppDir/.DirIcon || true
-          cp configs/branding/alpha/logo128.png AppDir/usr/share/icons/hicolor/128x128/apps/zen.png
-          cp configs/branding/alpha/logo128.png AppDir/zen.png && ln -s zen.png AppDir/.DirIcon
+          cp configs/branding/${{ inputs.update_branch }}/logo128.png AppDir/usr/share/icons/hicolor/128x128/apps/zen.png
+          cp configs/branding/${{ inputs.update_branch }}/logo128.png AppDir/zen.png && ln -s zen.png AppDir/.DirIcon
+
+          if [ "${{ inputs.update_branch }}" = "twilight" ]; then
+            sed -i -e 's/Name=Zen Browser/Name=Zen Twilight/g' AppDir/zen.desktop
+            sed -i -e 's/StartupWMClass=zen-alpha/StartupWMClass=zen-twilight/g' AppDir/zen.desktop
+          fi
 
           APPDIR=AppDir
           tar -xvf *.tar.* && rm -rf *.tar.*
@@ -304,36 +386,29 @@ jobs:
           path: ./dist/zen-${{ matrix.generic == true && 'generic' || 'specific' }}.AppImage.zsync
 
   release:
-    if: ${{ github.event.inputs.create_release == 'true' }}
+    if: ${{ inputs.create_release || inputs.update_branch == 'twilight' }}
     permissions: write-all
     name: Release
     needs: [build-data, linux, windows-step-3, check-release, mac, appimage, source]
     runs-on: ubuntu-latest
     environment:
-      name: Deploy-Release
+      name: ${{ inputs.update_branch == 'alpha' && 'Deploy-Release' || 'Deploy-Twilight' }}
 
     steps:
       - uses: actions/checkout@v4
         with:
           submodules: recursive
           token: ${{ secrets.DEPLOY_KEY }}
-          lfs: true
 
       - name: Git Pull
         run: |
           git pull
-          git lfs pull
 
       - uses: actions/download-artifact@v4
 
       - name: List
         run: find .
 
-      - name: Unpack windows build (.tar.gz)
-        run: |
-          tar -xvf .github/workflows/object/windows-x64-signed-generic.tar.gz -C .
-          tar -xvf .github/workflows/object/windows-x64-signed-specific.tar.gz -C .
-
       - name: Clone updates repo
         uses: actions/checkout@v4
         with:
@@ -341,15 +416,26 @@ jobs:
           path: updates-server
           token: ${{ secrets.DEPLOY_KEY }}
 
+      - name: Download object files
+        run: |
+          git clone https://github.com/zen-browser/windows-binaries.git .github/workflows/object
+
       - name: Copy update manifests
+        env:
+          RELEASE_BRANCH: ${{ inputs.update_branch }}
         run: |
           cd updates-server
           mkdir -p updates
           cp -a ../linux_update_manifest_generic/.  updates/
           cp -a ../linux_update_manifest_specific/.  updates/
 
-          cp -a ../windows-x64-signed-generic/update_manifest/.  updates/
-          cp -a ../windows-x64-signed-specific/update_manifest/.  updates/
+          if [[ $RELEASE_BRANCH == 'alpha' ]]; then
+            cp -a ../.github/workflows/object/windows-x64-signed-generic/update_manifest/.  updates/
+            cp -a ../.github/workflows/object/windows-x64-signed-specific/update_manifest/.  updates/
+          else
+            cp -a ../windows_update_manifest_generic/.  updates/
+            cp -a ../windows_update_manifest_specific/.  updates/
+          fi
 
           cp -a ../macos_update_manifest_aarch64/.  updates/
           cp -a ../macos_update_manifest_x64/.  updates/
@@ -361,8 +447,42 @@ jobs:
           commit_user_email: zen-browser-bot@users.noreply.github.com
           repository: ./updates-server
 
+        # If we are on twilight, we want to just update the twilight tag's release
+      - name: Update twilight tag
+        if: ${{ inputs.update_branch == 'twilight' }}
+        uses: 'marvinpinto/action-automatic-releases@latest'
+        with:
+          files: |
+            zen.source.tar.gz
+            zen.linux-generic.tar.bz2
+            zen.linux-specific.tar.bz2
+            zen-generic.AppImage
+            zen-generic.AppImage.zsync
+            zen-specific.AppImage
+            zen-specific.AppImage.zsync
+            zen.win-generic.zip
+            zen.win-specific.zip
+            linux.mar
+            linux-generic.mar
+            windows-generic.mar
+            windows.mar
+            macos-x64.mar
+            macos-aarch64.mar
+            zen.installer.exe
+            zen.installer-generic.exe
+            zen.macos-x64.dmg
+            zen.macos-aarch64.dmg
+          automatic_release_tag: 'twilight'
+          title: 'Twilight build - ${{ needs.build-data.outputs.version }} (${{ needs.build-data.outputs.build_date }} at ${{ needs.build-data.outputs.build_time }})'
+          draft: false
+          prerelease: true
+          repo_token: ${{ github.token }}
+        env:
+          GITHUB_REPOSITORY: ${{ github.repository }}
+
       - name: release-github
         uses: 'marvinpinto/action-automatic-releases@latest'
+        if: ${{ inputs.update_branch == 'alpha' }}
         with:
           repo_token: '${{ secrets.DEPLOY_KEY }}'
           automatic_release_tag: ${{ needs.build-data.outputs.version }}
@@ -376,21 +496,21 @@ jobs:
             zen-generic.AppImage.zsync
             zen-specific.AppImage
             zen-specific.AppImage.zsync
-            windows-x64-signed-generic/zen.win-generic.zip
-            windows-x64-signed-specific/zen.win-specific.zip
+            .github/workflows/object/windows-x64-signed-generic/zen.win-generic.zip
+            .github/workflows/object/windows-x64-signed-specific/zen.win-specific.zip
             linux.mar
             linux-generic.mar
-            windows-x64-signed-generic/windows-generic.mar
-            windows-x64-signed-specific/windows.mar
+            .github/workflows/object/windows-x64-signed-generic/windows-generic.mar
+            .github/workflows/object/windows-x64-signed-specific/windows.mar
             macos-x64.mar
             macos-aarch64.mar
-            windows-x64-signed-specific/zen.installer.exe
-            windows-x64-signed-generic/zen.installer-generic.exe
+            .github/workflows/object/windows-x64-signed-specific/zen.installer.exe
+            .github/workflows/object/windows-x64-signed-generic/zen.installer-generic.exe
             zen.macos-x64.dmg
             zen.macos-aarch64.dmg
 
   prepare-flatpak:
-    if: ${{ github.event.inputs.create_release == 'true' }}
+    if: ${{ inputs.create_release && inputs.update_branch == 'alpha' }}
     permissions: write-all
     name: Prepare Flatpak
     needs: [release, linux, build-data]
@@ -447,7 +567,7 @@ jobs:
         run: sleep 240
 
   release-flatpak:
-    if: ${{ github.event.inputs.create_release == 'true' }}
+    if: ${{ inputs.create_release && inputs.update_branch == 'alpha' }}
     permissions: write-all
     name: Release Flatpak
     needs: [prepare-flatpak, build-data]
@@ -525,7 +645,7 @@ jobs:
           delete-branch: true
 
   release-homebrew:
-    if: ${{ github.event.inputs.create_release == 'true' }}
+    if: ${{ inputs.create_release && inputs.update_branch == 'alpha' }}
     permissions: write-all
     name: Homebrew release
     needs: [release, mac, build-data]

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

@@ -1,4 +1,4 @@
-name: Linux Alpha Build
+name: Linux Release Build
 on:
   workflow_call:
     inputs:
@@ -6,10 +6,14 @@ on:
         description: 'The version to build'
         required: true
         type: string
+      release-branch:
+        description: 'The branch to build'
+        required: true
+        type: string
 
 jobs:
   build-linux:
-    environment: production
+    
     permissions:
       contents: write
     runs-on: ubuntu-latest
@@ -87,7 +91,7 @@ jobs:
         run: pnpm install
 
       - name: Load surfer CI setup
-        run: pnpm surfer ci --brand alpha --display-version ${{ inputs.build-version }}
+        run: pnpm surfer ci --brand ${{ inputs.release-branch }} --display-version ${{ inputs.build-version }}
 
       - name: Download firefox source and dependencies
         run: pnpm surfer download
@@ -110,13 +114,13 @@ jobs:
         env:
           SURFER_COMPAT: ${{ matrix.generic == true }}
         continue-on-error: true
-        run: sh .github/workflows/src/alpha-build.sh
+        run: sh .github/workflows/src/release-build.sh
 
       - name: Build again if it failed
         if: failure()
         env:
           SURFER_COMPAT: ${{ matrix.generic == true }}
-        run: sh .github/workflows/src/alpha-build.sh
+        run: sh .github/workflows/src/release-build.sh
 
       - name: Package
         env:

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

@@ -1,4 +1,4 @@
-name: macOS Alpha Build
+name: macOS Release Build
 on:
   workflow_call:
     inputs:
@@ -6,10 +6,15 @@ on:
         description: 'The version to build'
         required: true
         type: string
+      release-branch:
+        description: 'The branch to build'
+        required: true
+        type: string
+
 jobs:
   mac-build:
     name: Build macOS - ${{ matrix.arch }}
-    environment: production
+    
     runs-on: ${{ matrix.os }}
     strategy:
       fail-fast: false
@@ -87,7 +92,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Load surfer CI setup
-        run: pnpm surfer ci --brand alpha --display-version ${{ inputs.build-version }}
+        run: pnpm surfer ci --brand ${{ inputs.release-branch }} --display-version ${{ inputs.build-version }}
 
       - name: Download firefox source and dependancies
         run: pnpm surfer download
@@ -115,11 +120,11 @@ jobs:
           if test "${{ matrix.arch }}" = "x64"; then
             export ZEN_DISABLE_LTO=1
           fi
-          sh .github/workflows/src/alpha-build.sh
+          sh .github/workflows/src/release-build.sh
 
       - name: Rebuild Zen if failed
         if: failure()
-        run: sh .github/workflows/src/alpha-build.sh
+        run: sh .github/workflows/src/release-build.sh
 
       - name: import APPLE DEVELOPER ID CERTIFICATE for .app
         uses: apple-actions/import-codesign-certs@v3

.github/workflows/object/windows-x64-signed-generic.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:805f5d9f727596007dc64057d456e87a2648dff596230ca12af6cf48860843fa
-size 237797081

.github/workflows/object/windows-x64-signed-specific.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:51d3bb5508804e438755658157f0f18331675b418bdb11db485f938a4fc5fd8a
-size 237484305

.github/workflows/twilight-release-schedule.yml

@@ -0,0 +1,31 @@
+name: Zen Twilight Scheduled Releases
+on:
+  schedule:
+    - cron: '0 0 * * *'
+  workflow_dispatch:
+
+jobs:
+  twilight-release-schedule:
+    name: Twilight Release Schedule
+    permissions: write-all
+    secrets: inherit
+    uses: ./.github/workflows/build.yml
+    with:
+      create_release: true
+      update_branch: twilight
+      update_version: false
+
+  post-build:
+    name: Post Build
+    runs-on: ubuntu-latest
+    needs: twilight-release-schedule
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Node.js and pnpm
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      # TODO:

.github/workflows/update-submodules.yml

@@ -0,0 +1,33 @@
+
+name: Update Components Submodules
+
+on:
+  push:
+    branches:
+      - dev
+  pull_request:
+    branches:
+      - dev
+  workflow_dispatch:
+  workflow_call: # This is a custom event that we will trigger manually
+
+jobs:
+  update-submodules:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, '[skip ci]')"
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          submodules: 'recursive'
+          token: ${{ secrets.DEPLOY_KEY }}
+
+      - name: Update submodules
+        run: |
+          git submodule update --remote --merge
+
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: "[skip ci] 📦 Update Submodules!"
+          commit_user_name: Zen Browser Robot
+          commit_user_email: zen-browser-bot@users.noreply.github.com

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

@@ -10,6 +10,10 @@ on:
         description: 'The path to the zip archive containing the profile data'
         required: false
         type: string
+      release-branch:
+        description: 'The branch to build'
+        required: true
+        type: string
 
 jobs:
   windows-profile-build:

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

@@ -1,4 +1,4 @@
-name: Windows Alpha Build
+name: Windows Release Build
 on:
   workflow_call:
     inputs:
@@ -13,6 +13,10 @@ on:
       profile-data-path-archive:
         description: 'The path to the zip archive containing the profile data'
         type: string
+      release-branch:
+        description: 'The branch to build'
+        required: true
+        type: string
 
 jobs:
   windows-build:
@@ -22,7 +26,7 @@ jobs:
       fail-fast: false
       matrix:
         generic: [true, false]
-    environment: production
+    
     steps:
       - name: Free Disk Space (Ubuntu)
         uses: jlumbroso/free-disk-space@main
@@ -54,7 +58,7 @@ jobs:
           pnpm i
 
       - name: Load surfer CI setup
-        run: pnpm surfer ci --brand alpha --display-version ${{ inputs.build-version }}
+        run: pnpm surfer ci --brand ${{ inputs.release-branch }} --display-version ${{ inputs.build-version }}
 
       - name: Download
         run: pnpm surfer download
@@ -123,12 +127,12 @@ jobs:
 
           rustup target add x86_64-pc-windows-msvc
           cargo install cargo-download
-          cargo download -x windows=0.52.0
+          cargo download -x windows=0.58.0
           #? https://github.com/mozilla/sccache#known-caveats
           export CARGO_INCREMENTAL=0
 
           echo "" >> ../configs/common/mozconfig
-          echo "export MOZ_WINDOWS_RS_DIR=$(pwd)/windows-0.52.0" >> ../configs/common/mozconfig
+          echo "export MOZ_WINDOWS_RS_DIR=$(pwd)/windows-0.58.0" >> ../configs/common/mozconfig
 
       - name: Import
         env:
@@ -166,7 +170,7 @@ jobs:
           if test ${{ inputs.generate-gpo }} = true; then
             export ZEN_GA_GENERATE_PROFILE=1
           fi
-          sh .github/workflows/src/alpha-build.sh
+          sh .github/workflows/src/release-build.sh
 
       - name: Package
         env:
@@ -204,16 +208,44 @@ jobs:
           name: ${{ matrix.generic == true && 'generic' || 'specific' }}-${{ inputs.profile-data-path-archive }}
           path: ./zen.win64-pgo-stage-1.zip
 
-      - name: Remove symlinks from obj folder
+      - name: Remove unnecessary files from obj
         if: ${{ !inputs.generate-gpo }}
         run: |
           set -x
-          find engine/obj-x86_64-pc-windows-msvc/ -type l -delete
-
+          find engine/obj-x86_64-pc-windows-msvc/ -mindepth 1 -maxdepth 1 -type d -not -name 'dist' -exec rm -rf {} \;
+          find engine/obj-x86_64-pc-windows-msvc/ -mindepth 1 -maxdepth 1 -type f -not -name 'dist' -exec rm -f {} \;
+          
       - name: Upload dist object
         if: ${{ !inputs.generate-gpo }}
         uses: actions/upload-artifact@v4
         with:
           name: windows-x64-obj-${{ matrix.generic == true && 'generic' || 'specific' }}
           path: engine/obj-x86_64-pc-windows-msvc/
-          
+
+      - name: Upload zip file if twilight branch
+        if: ${{ inputs.release-branch == 'twilight' && !inputs.generate-gpo }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: zen.win-${{ matrix.generic == true && 'generic' || 'specific' }}.zip
+          path: ./zen.win-${{ matrix.generic == true && 'generic' || 'specific' }}.zip
+
+      - name: Upload installer if twilight branch
+        if: ${{ inputs.release-branch == 'twilight' && !inputs.generate-gpo }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: zen.installer${{ matrix.generic == true && '-generic' || '' }}.exe
+          path: ./zen.installer${{ matrix.generic == true && '-generic' || '' }}.exe
+
+      - name: Upload mar if twilight branch
+        if: ${{ inputs.release-branch == 'twilight' && !inputs.generate-gpo }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: windows${{ matrix.generic == true && '-generic' || '' }}.mar
+          path: ./windows${{ matrix.generic == true && '-generic' || '' }}.mar
+
+      - name: Upload update manifests if twilight branch
+        if: ${{ inputs.release-branch == 'twilight' && !inputs.generate-gpo }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: windows_update_manifest_${{ matrix.generic == true && 'generic' || 'specific' }}
+          path: ./dist/update

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+hello@zen-browser.app.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

README.md

@@ -1,46 +1,67 @@
-<div align="center">
-<picture>
-    <img src="./docs/assets/zen-black.svg" width="128px">
-</picture>
-</div>
-<h1 align="center">
-Zen Browser
-</h1>
+<img src="./docs/assets/zen-black.svg" width="100px" align="left">
 
-Experience tranquillity while browsing the web without people tracking you!
-
-- [Website](https://zen-browser.app)
-- [Download](https://zen-browser.app/download)
-- [Release Notes](https://zen-browser.app/release-notes/latest)
+### `Zen Browser`
 
 [![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)
 
-[![Flathub](https://flathub.org/api/badge?locale=en)](https://flathub.org/apps/io.github.zen_browser.zen)
 
-[![Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/zen_browser)
+✨ Experience tranquillity while browsing the web without people tracking you! Zen is a privacy-focused browser that blocks trackers, ads, and other unwanted content while offering the best browsing experience!
 
-[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/zen_browser)
+<div flex="true">
+  <a href="https://zen-browser.app/download">
+    Download
+  </a>
+  •
+  <a href="https://zen-browser.app">
+    Website
+  </a>
+  •
+  <a href="https://docs.zen-browser.app">
+    Documentation
+  </a>
+  • 
+  <a href="https//zen-browser.app/release-notes/latest">
+    Release Notes
+  </a>
+</div>
 
-# Compatibility
+## 🖥️ Compatibility
 
-Zen is currently built using firefox version `130.0`!
+Zen is currently built using firefox version `131.0.3`! 🚀
 
 - Check out the latest [release notes](https://zen-browser.app/release-notes)!
+- Part of our mission is to keep Zen up-to-date with the latest version of Firefox, so you can enjoy the latest features and security updates!
 
-# Performance
+## 🤝 Contribution
 
-Zen is built with performance in mind, and we have optimized the browser to be as fast as possible!
+Zen is an open-source project, and we welcome contributions from the community! Please take a look at the [contribution guidelines](./docs/contribute.md) before getting started!
 
-- Checkout the latest [performance benchmarks](https://docs.zen-browser.app/benchmarks)!
+## ⚡ Performance
 
-# Installation
+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)!
 
-## Supported Operating Systems
+## 📥 Installation
+
+### Supported Operating Systems
 
 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.
 
-### macOS
+If you dont see your OS listed below, that's because we already have it in our [downloads page](https://zen-browser.app/download)! Make sure to check it out!
+
+#### Windows
+
+##### Winget
+
+```ps
+# Generic version
+winget install --id Zen-Team.Zen-Browser
+
+# Optimized version
+winget install --id Zen-Team.Zen-Browser.Optimized
+```
+
+#### macOS
 
 - Requires macOS 10.15 or later
 - Available for ARM and Intel architectures
@@ -51,83 +72,51 @@ You can also install Zen using Homebrew:
 brew install --cask zen-browser
 ```
 
-### Linux
+##### Arch-based distributions
 
-#### AppImage
+```sh
+# For generic version
+yay -S zen-browser-bin
 
-- `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
+# For optimized version
+yay -S zen-browser-avx2-bin
 ```
 
 To upgrade the browser to a newer version, use the embedded update functionality in `About Zen`.
 
-# Core Components
+* Again, if you don't see your OS listed above, that's because we already have it in our [downloads page](https://zen-browser.app/download)! 🔄
+ 
+## 👨‍💻 Development and Contributing
 
-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).
+Some components used by @zen-browser as an attempt to make firefox forks a better place, and for other to enjoy the beauty of OSS. You can find them [here](https://github.com/zen-browser/components).
 
-## 🚀 Run Locally
+#### `Run Locally`
 
-Clone the project
+In order to download and run zen locally, please follow [these instructions](https://docs.zen-browser.app/contribute/desktop).
 
-```bash
-git clone https://github.com/zen-browser/desktop.git --recurse-submodules
-cd desktop
-```
+#### `Special Thanks`
 
-Install dependencies
+Special thanks to... EVERYONE 🎉! Checkout the team and contributors page [here](https://zen-browser.app/about)
 
-```bash
-npm i
-```
+#### `Third Party Code`
 
-Download and bootstrap the browser
-
-```
-npm run init
-```
-
-Start building the browser
-
-```
-npm run build
-```
-
-Finally, run the browser!
-
-```
-npm start
-```
-
-## Special Thanks
-
-- [IAmJafeth](https://github.com/IAmJafeth) (For sponsoring the domain)
-- [Donno 🐒](https://www.onnno.nl/) (For making the logo)
-- [ptr1337](https://github.com/ptr1337) (AUR Packages and optimization flags)
-- [nitro](https://github.com/n7itro) (For the amazing work on the browser)
-
-## Third Party Code
-
-Zen couldn't be in its current state without the help of these amazing projects!
+Zen couldn't be in its current state without the help of these amazing projects! 🙏
 
 - Zen's default preferences are based on [BetterFox](https://github.com/yokoffing/Betterfox)
+- Icon Pack provided by [Microsoft's FluentUI System Icons](https://github.com/microsoft/fluentui-system-icons)
 
-## License
+### 🖥️ Comparison with other browsers
 
-[MPL LICENSE](./LICENSE)
-
-## Star History
+As you can see, chromium based browsers are the most popular browsers, help us change that by starring the project and spreading the word! 🌟
 
 <a href="https://star-history.com/#zen-browser/desktop&Date">
  <picture>
-   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=zen-browser/desktop&type=Date&theme=dark" />
-   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=zen-browser/desktop&type=Date" />
-   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=zen-browser/desktop&type=Date" />
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=zen-browser/desktop,chromium/chromium,brave/brave-browser&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=zen-browser/desktop,chromium/chromium,brave/brave-browser&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=chromium/chromium,zen-browser/desktop,brave/brave-browser&type=Date" />
  </picture>
 </a>
+
+## 📄 License
+
+Zen browser is under the [MPL LICENSE](./LICENSE). All the code is open-source and free to use! Attributions are appreciated but not required.

build/codesign/codesign.bash

@@ -50,11 +50,11 @@ if [ ! -x ${SWVERS} ]; then
 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
+#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

build/winsign/sign.ps1

@@ -1,19 +1,28 @@
 param(
-    [string][Parameter(Mandatory=$true)]$SignIdentity
+    [string][Parameter(Mandatory=$true)]$SignIdentity,
+    [string][Parameter(Mandatory=$true)]$GithubRunId
 )
 
 $ErrorActionPreference = "Stop"
 
 echo "Preparing environment"
+git pull --recurse-submodules
 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"
+# Download in parallel
+
+Start-Job -Name "DownloadGitObjectsRepo" -ScriptBlock {
+    git clone https://github.com/zen-browser/windows-binaries.git windsign-temp\windows-binaries
+}
+
+gh run download $GithubRunId --name windows-x64-obj-specific -D windsign-temp\windows-x64-obj-specific
+echo "Downloaded specific artifacts"
+gh run download $GithubRunId --name windows-x64-obj-generic -D windsign-temp\windows-x64-obj-generic
+echo "Downloaded generic artifacts"
+
+Wait-Job -Name "DownloadGitObjectsRepo"
+
 mkdir engine\obj-x86_64-pc-windows-msvc\ -ErrorAction SilentlyContinue
-mkdir .\.github\workflows\object\ -ErrorAction SilentlyContinue
 
 pnpm surfer ci --brand alpha
 
@@ -28,14 +37,17 @@ function SignAndPackage($name) {
     $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
+    signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha256 /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:
@@ -67,13 +79,22 @@ function SignAndPackage($name) {
     # 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 sha256 /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
-    foreach ($file in Get-ChildItem .\dist\update\) {
-        mv ".\\dist\\update\\$file" windsign-temp\windows-x64-signed-$name\update_manifest
-    }
+    mv .\dist\update\. windsign-temp\windows-x64-signed-$name\update_manifest
 
     echo "Invoking tar for $name"
-    tar -czvf .\.github\workflows\object\windows-x64-signed-$name.tar.gz -C .\windsign-temp\windows-x64-signed-$name .
+    # note: We need to sign it into a parent folder, called windows-x64-signed-$name
+    rmdir .\windsign-temp\windows-binaries\windows-x64-signed-$name -Recurse -ErrorAction SilentlyContinue
+    mv windsign-temp\windows-x64-signed-$name .\windsign-temp\windows-binaries -Force
 
     echo "Finished $name"
 }
@@ -81,6 +102,13 @@ function SignAndPackage($name) {
 SignAndPackage specific
 SignAndPackage generic
 
+echo "All artifacts signed and packaged, ready for release!"
+echo "Commiting the changes to the repository"
+cd windsign-temp\windows-binaries
+git add .
+git commit -m "Sign and package windows artifacts"
+git push
+
 # Cleaning up
 
 echo "All done!"
@@ -89,3 +117,6 @@ Read-Host "Press Enter to continue"
 
 echo "Cleaning up" 
 rmdir windsign-temp -Recurse -ErrorAction SilentlyContinue
+
+echo "Opening visual studio code"
+code .

configs/branding/alpha/content/about-logo.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="d" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256"><defs><style>.f{fill:#000;}.f,.g,.h{stroke-width:0px;}.g{fill:url(#e);}.h{fill:#fff;}</style><linearGradient id="e" x1="128" y1="256" x2="128" y2="0" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#fff" stop-opacity=".02"/><stop offset=".9" stop-color="#fff" stop-opacity=".1"/></linearGradient></defs><rect class="f" width="256" height="256" rx="58.4" ry="58.4"/><rect class="g" width="256" height="256" rx="58.4" ry="58.4"/><path class="h" d="M202.9973,184.5702c-.1715,10.2808-8.7737,18.4298-19.0559,18.4298h-77.2885c-3.0056,0-5.0458-3.0553-3.894-5.8314l.0262-.0632c5.0822-12.2707,13.3289-22.6249,23.8591-30.1785,1.3098-.9395,2.8903-1.4269,4.5023-1.4269h53.1034c10.462,0,18.9225,8.5681,18.7473,19.0702Z"/><path class="h" d="M149.3471,53c3.0056,0,5.0458,3.0553,3.894,5.8314l-.0262.0631c-5.0822,12.2708-13.3289,22.6249-23.8591,30.1785-1.3098.9396-2.8903,1.427-4.5023,1.427h-52.7949c-10.2822,0-18.8844-8.149-19.0559-18.4298-.1752-10.5021,8.2853-19.0702,18.7473-19.0702h77.5971Z"/><path class="h" d="M71.7465,203c-2.3913,0-4.8207-.46-7.1673-1.4319-9.5666-3.9624-14.1096-14.9301-10.1472-24.4964,6.0943-14.7127,14.8294-27.9027,25.9634-39.2034,11.5341-11.7073,25.1364-20.8551,40.4297-27.1898,21.021-8.7076,37.393-25.0792,46.0995-46.0995,3.9624-9.567,14.9305-14.1093,24.4964-10.1472,9.5666,3.9624,14.1096,14.9301,10.1472,24.4964-6.0943,14.7127-14.8294,27.9027-25.9634,39.2034-11.5341,11.7073-25.1364,20.8551-40.4297,27.1898-21.021,8.7076-37.393,25.0792-46.0995,46.0995-2.9905,7.22-9.9725,11.5791-17.329,11.5791Z"/></svg>
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"><defs><style>.g{fill:#000;}.g,.h,.i{stroke-width:0px;}.h{fill:url(#e);}.i{fill:#fef9fe;}</style><linearGradient id="e" x1="40" y1="80" x2="40" y2="0" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#fff" stop-opacity=".02"/><stop offset=".9" stop-color="#fff" stop-opacity=".1"/></linearGradient></defs><g id="c"><rect class="g" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="d"><rect class="h" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="f"><path class="i" d="M63.4352,57.677c-.0536,3.2125-2.7416,5.7589-5.9546,5.7589h-22.0762c-1.1221,0-1.8295-1.2103-1.2751-2.1859,1.4628-2.5738,4.3202-6.7829,8.5529-9.1539.4406-.2468.9366-.3783,1.4416-.3783h13.4532c3.2692,0,5.9129,2.6774,5.8582,5.9591Z"/><path class="i" d="M45.8707,18.7498c-1.4628,2.5738-4.3202,6.7829-8.5529,9.1539-.4406.2468-.9366.3783-1.4416.3783h-13.3567c-3.213,0-5.901-2.5464-5.9546-5.7589-.0547-3.2817,2.589-5.9591,5.8582-5.9591h22.1726c1.1221,0,1.8295,1.2103,1.2751,2.1859Z"/><path class="i" d="M22.4207,63.4375c-.7473,0-1.5065-.1438-2.2398-.4475-2.9896-1.2383-4.4093-4.6657-3.171-7.6551,1.9045-4.5977,4.6342-8.7196,8.1136-12.2511,3.6044-3.6585,7.8551-6.5172,12.6343-8.4968,6.5691-2.7211,11.6853-7.8373,14.4061-14.4061,1.2383-2.9896,4.6658-4.409,7.6551-3.171,2.9896,1.2383,4.4093,4.6657,3.171,7.6551-1.9045,4.5977-4.6342,8.7196-8.1136,12.2511-3.6044,3.6585-7.8551,6.5172-12.6343,8.4968-6.5691,2.7211-11.6853,7.8373-14.4061,14.4061-.9345,2.2562-3.1164,3.6185-5.4153,3.6185Z"/></g></svg>

configs/branding/twilight/MacOSInstaller.svg

@@ -0,0 +1 @@
+<svg width="320" height="130" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" x="10" y="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:red" />Sorry, your browser does not support inline SVG.</svg> 

configs/branding/twilight/content/about-logo-private.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256"><defs><style>.g{fill:#000;}.g,.h,.i{stroke-width:0px;}.h{fill:url(#e);}.i{fill:#fff;}</style><linearGradient id="e" x1="128" y1="256" x2="128" y2="0" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#fff" stop-opacity=".02"/><stop offset=".9" stop-color="#fff" stop-opacity=".1"/></linearGradient></defs><g id="c"><rect class="g" y="0" width="256" height="256" rx="58.4" ry="58.4"/></g><g id="d"><rect class="h" y="0" width="256" height="256" rx="58.4" ry="58.4"/></g><g id="f"><path class="i" d="M165.9156,146.3156c-15.6016,0-28.6656,11.0055-31.8813,25.6562h-12.0687c-3.2156-14.6508-16.2797-25.6562-31.8813-25.6562-18.0063,0-32.6562,14.65-32.6562,32.6562s14.65,32.6562,32.6562,32.6562c15.6016,0,28.6656-11.0055,31.8813-25.6562h12.0687c3.2156,14.6508,16.2797,25.6562,31.8813,25.6562,18.0063,0,32.6562-14.65,32.6562-32.6562s-14.65-32.6562-32.6562-32.6562ZM90.0844,197.6281c-10.2875,0-18.6562-8.3687-18.6562-18.6562s8.3687-18.6562,18.6562-18.6562,18.6562,8.3688,18.6562,18.6562-8.3687,18.6562-18.6562,18.6562ZM165.9156,197.6281c-10.2875,0-18.6562-8.3687-18.6562-18.6562s8.3687-18.6562,18.6562-18.6562,18.6562,8.3688,18.6562,18.6562-8.3687,18.6562-18.6562,18.6562Z"/><path class="i" d="M214.4,115.6812h-21.8391l-9.2422-65.2906c-.3031-2.1406-1.5813-4.0219-3.4594-5.0969-1.8781-1.0719-4.1469-1.2188-6.1469-.3906l-45.7125,18.8906-45.7125-18.8906c-2-.8281-4.2688-.6813-6.1469.3906-1.8781,1.075-3.1562,2.9562-3.4594,5.0969l-9.2422,65.2906h-21.8391c-3.8656,0-7,3.1344-7,7s3.1344,7,7,7h172.8c3.8656,0,7-3.1344,7-7s-3.1344-7-7-7ZM85.2781,61.2875l40.0469,16.55c1.7125.7063,3.6375.7063,5.35,0l40.0469-16.55,7.6984,54.3937h-100.8406l7.6984-54.3937Z"/></g></svg>

configs/branding/twilight/content/about-logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"><defs><style>.g{fill:url(#e);}.g,.h,.i{stroke-width:0px;}.h{fill:#a570ff;}.i{fill:#fef9fe;}</style><linearGradient id="e" x1="40" y1="80" x2="40" y2="0" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#fff" stop-opacity="0"/><stop offset=".9" stop-color="#fff" stop-opacity=".1"/></linearGradient></defs><g id="c"><rect class="h" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="d"><rect class="g" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="f"><path class="i" d="M63.4352,57.677c-.0536,3.2125-2.7416,5.7589-5.9546,5.7589h-22.0762c-1.1221,0-1.8295-1.2103-1.2751-2.1859,1.4628-2.5738,4.3202-6.7829,8.5529-9.1539.4406-.2468.9366-.3783,1.4416-.3783h13.4532c3.2692,0,5.9129,2.6774,5.8582,5.9591Z"/><path class="i" d="M45.8707,18.7498c-1.4628,2.5738-4.3202,6.7829-8.5529,9.1539-.4406.2468-.9366.3783-1.4416.3783h-13.3567c-3.213,0-5.901-2.5464-5.9546-5.7589-.0547-3.2817,2.589-5.9591,5.8582-5.9591h22.1726c1.1221,0,1.8295,1.2103,1.2751,2.1859Z"/><path class="i" d="M22.4207,63.4375c-.7473,0-1.5065-.1438-2.2398-.4475-2.9896-1.2383-4.4093-4.6657-3.171-7.6551,1.9045-4.5977,4.6342-8.7196,8.1136-12.2511,3.6044-3.6585,7.8551-6.5172,12.6343-8.4968,6.5691-2.7211,11.6853-7.8373,14.4061-14.4061,1.2383-2.9896,4.6658-4.409,7.6551-3.171,2.9896,1.2383,4.4093,4.6657,3.171,7.6551-1.9045,4.5977-4.6342,8.7196-8.1136,12.2511-3.6044,3.6585-7.8551,6.5172-12.6343,8.4968-6.5691,2.7211-11.6853,7.8373-14.4061,14.4061-.9345,2.2562-3.1164,3.6185-5.4153,3.6185Z"/></g></svg>

configs/branding/twilight/content/firefox-wordmark.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 56"><defs><style>.b{fill:context-fill #20123a;}</style></defs><path class="b" d="M11.2896,37.6632h15.1928v5.2919H3.2415v-3.8076l15.1487-21.2557H3.2126v-5.2919h23.2393v3.811l-15.1622,21.2523ZM50.8649,26.3765c.5434,1.4469.8151,3.1418.8151,5.0778v1.7322h-15.5019v.017c0,1.1243.2089,2.0991.6301,2.9176.4195.822,1.0139,1.4537,1.7849,1.8987s1.6847.6657,2.7427.6657c.7014,0,1.3433-.0984,1.9258-.2955.5842-.197,1.0818-.4925,1.4979-.8899.4144-.394.7303-.8797.9476-1.4503l5.8404.3838c-.2972,1.4028-.9018,2.6255-1.8154,3.6683-.9137,1.0428-2.0906,1.8511-3.5273,2.4319-1.4385.5774-3.0959.8661-4.9726.8661-2.3419,0-4.3561-.4755-6.0408-1.43-1.6847-.9544-2.9805-2.3063-3.8907-4.0623-.9086-1.7526-1.362-3.8314-1.362-6.2327,0-2.3402.4534-4.3951,1.362-6.1647.9103-1.7696,2.1925-3.1486,3.8466-4.1336,1.6558-.9884,3.5986-1.4843,5.8318-1.4843,1.503,0,2.9024.2411,4.2032.7201,1.2992.4789,2.4354,1.199,3.4084,2.1568.9731.9578,1.7306,2.1602,2.274,3.6072ZM45.7378,29.2737c0-.9069-.1987-1.7119-.5927-2.4149-.3957-.6997-.9409-1.2534-1.6388-1.6508-.6964-.4008-1.503-.6012-2.4235-.6012-.9578,0-1.8053.2208-2.5406.6589-.7371.4382-1.3127,1.0292-1.7271,1.7628-.3818.679-.5853,1.4304-.6228,2.2451h9.5455ZM73.0682,20.9318c-1.1769-.6929-2.5543-1.0394-4.1353-1.0394-1.6898,0-3.1265.3872-4.3137,1.165-1.1854.7744-2.0294,1.824-2.5338,3.1486h-.2667v-4.0181h-6.017v22.7672h6.3125v-13.1617c.0102-.9782.1953-1.8138.557-2.5135.36-.6963.8644-1.2261,1.5115-1.593.647-.3635,1.396-.5469,2.2451-.5469,1.2653,0,2.257.394,2.9788,1.1786.7217.7846,1.0767,1.8749,1.0682,3.2675v13.3689h6.3125v-14.4965c0-1.7662-.326-3.2913-.9782-4.5718-.6521-1.2805-1.5658-2.2655-2.741-2.955Z"/></svg>

configs/linux/mozconfig

@@ -13,7 +13,6 @@ if test "$ZEN_RELEASE"; then
     ac_add_options --enable-linker=lld
     ac_add_options --disable-elf-hack
 
-    ac_add_options --disable-gpsd
     ac_add_options --disable-necko-wifi
 
     ac_add_options --enable-install-strip

docs/assets/zen-black.svg

@@ -1,2 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"><defs><style>.g{fill:#000;}.g,.h,.i{stroke-width:0px;}.h{fill:url(#e);}.i{fill:#fff;}</style><linearGradient id="e" x1="40" y1="80" x2="40" y2="0" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#fff" stop-opacity=".02"/><stop offset=".9" stop-color="#fff" stop-opacity=".1"/></linearGradient></defs><g id="c"><rect class="g" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="d"><rect class="h" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="f"><path class="i" d="M63.4367,57.6782c-.0536,3.2127-2.7418,5.7593-5.955,5.7593h-24.1527c-.9392,0-1.5768-.9548-1.2169-1.8223l.0082-.0197c1.5882-3.8346,4.1653-7.0703,7.456-9.4308.4093-.2936.9032-.4459,1.407-.4459h16.5948c3.2694,0,5.9133,2.6775,5.8585,5.9594Z"/><path class="i" d="M46.671,16.5625c.9392,0,1.5768.9548,1.2169,1.8223l-.0082.0197c-1.5882,3.8346-4.1653,7.0703-7.456,9.4308-.4093.2936-.9032.4459-1.407.4459h-16.4984c-3.2132,0-5.9014-2.5466-5.955-5.7593-.0547-3.2819,2.5892-5.9594,5.8585-5.9594h24.2491Z"/><path class="i" d="M22.4208,63.4375c-.7473,0-1.5065-.1438-2.2398-.4475-2.9896-1.2383-4.4093-4.6657-3.171-7.6551,1.9045-4.5977,4.6342-8.7196,8.1136-12.251,3.6044-3.6585,7.8551-6.5172,12.6343-8.4968,6.5691-2.7211,11.6853-7.8373,14.4061-14.4061,1.2383-2.9897,4.6658-4.4091,7.6551-3.171,2.9896,1.2383,4.4093,4.6657,3.171,7.6551-1.9045,4.5977-4.6342,8.7196-8.1136,12.251-3.6044,3.6585-7.8551,6.5172-12.6343,8.4968-6.5691,2.7211-11.6853,7.8373-14.4061,14.4061-.9345,2.2562-3.1164,3.6185-5.4153,3.6185Z"/></g></svg>
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"><defs><style>.g{fill:#000;}.g,.h,.i{stroke-width:0px;}.h{fill:url(#e);}.i{fill:#fef9fe;}</style><linearGradient id="e" x1="40" y1="80" x2="40" y2="0" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#fff" stop-opacity=".02"/><stop offset=".9" stop-color="#fff" stop-opacity=".1"/></linearGradient></defs><g id="c"><rect class="g" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="d"><rect class="h" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="f"><path class="i" d="M63.4352,57.677c-.0536,3.2125-2.7416,5.7589-5.9546,5.7589h-22.0762c-1.1221,0-1.8295-1.2103-1.2751-2.1859,1.4628-2.5738,4.3202-6.7829,8.5529-9.1539.4406-.2468.9366-.3783,1.4416-.3783h13.4532c3.2692,0,5.9129,2.6774,5.8582,5.9591Z"/><path class="i" d="M45.8707,18.7498c-1.4628,2.5738-4.3202,6.7829-8.5529,9.1539-.4406.2468-.9366.3783-1.4416.3783h-13.3567c-3.213,0-5.901-2.5464-5.9546-5.7589-.0547-3.2817,2.589-5.9591,5.8582-5.9591h22.1726c1.1221,0,1.8295,1.2103,1.2751,2.1859Z"/><path class="i" d="M22.4207,63.4375c-.7473,0-1.5065-.1438-2.2398-.4475-2.9896-1.2383-4.4093-4.6657-3.171-7.6551,1.9045-4.5977,4.6342-8.7196,8.1136-12.2511,3.6044-3.6585,7.8551-6.5172,12.6343-8.4968,6.5691-2.7211,11.6853-7.8373,14.4061-14.4061,1.2383-2.9896,4.6658-4.409,7.6551-3.171,2.9896,1.2383,4.4093,4.6657,3.171,7.6551-1.9045,4.5977-4.6342,8.7196-8.1136,12.2511-3.6044,3.6585-7.8551,6.5172-12.6343,8.4968-6.5691,2.7211-11.6853,7.8373-14.4061,14.4061-.9345,2.2562-3.1164,3.6185-5.4153,3.6185Z"/></g></svg>

docs/contribute.md

@@ -0,0 +1,37 @@
+
+# Branch Structure
+
+The repository is structured as follows:
+
+```
+dev (main branch)
+ | |
+ | \--->-- stable (release branch)
+ |   ^ 
+ ^   |
+ |   \-<- Hotfix (hotfixes directly from stable)
+ |
+ \-<- (features branches)
+```
+
+The `central` branch is the main branch of the repository, and it is the default branch for the repository. The `twilight` branch is the feature branch, and it is branched off from the `central` branch. The `stable` branch is the release branch, and it is branched off from the `central` branch. 
+
+The `stable` branch may have hotfixes directly from the `stable` branch, and the `twilight` branch may have feature branches branched off from the `twilight` branch. This is done so that we can apply hotfixes like security patches directly to the `stable` branch without having to merge the changes from the `twilight` branch.
+
+# Code Of Conduct
+
+Please read our [Code of Conduct](../CODE_OF_CONDUCT.md) before contributing.
+
+# Releasing/Merging branches
+
+To merge zen twilight branch from the central branch, you can use the following command:
+
+```bash
+sh ./scripts/merge-to-branch.sh twilight
+```
+
+To merge zen stable branch from the twilight branch, you can use the following command:
+
+```bash
+sh ./scripts/merge-to-branch.sh stable
+```

package.json

@@ -33,7 +33,7 @@
   },
   "homepage": "https://github.com/zen-browser/core#readme",
   "dependencies": {
-    "@zen-browser/surfer": "^1.4.18"
+    "@zen-browser/surfer": "^1.5.1"
   },
   "devDependencies": {
     "husky": "^9.1.5",

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@zen-browser/surfer':
-        specifier: ^1.4.18
-        version: 1.4.18
+        specifier: ^1.5.1
+        version: 1.5.1
     devDependencies:
       husky:
         specifier: ^9.1.5
@@ -119,8 +119,8 @@ packages:
   '@types/node@17.0.45':
     resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
 
-  '@zen-browser/surfer@1.4.18':
-    resolution: {integrity: sha512-NFqF5amqa4TuGFk+uVQNY4FngIvyhXvtZdpHUbU8Oeq3nfKE+bsLUHbFz8j9I5sFLQkuHmCsfTtR5gKA5el4YA==}
+  '@zen-browser/surfer@1.5.1':
+    resolution: {integrity: sha512-klVZTNbjGvdgpr+9nNLltV8evNEjfrMIg7ln7Sake63LyM043Wk55F0HFJ1FMv6RioE6qwe3PuZl/JSW1cxxvQ==}
     hasBin: true
 
   ansi-escapes@7.0.0:
@@ -1003,7 +1003,7 @@ snapshots:
 
   '@types/node@17.0.45': {}
 
-  '@zen-browser/surfer@1.4.18':
+  '@zen-browser/surfer@1.5.1':
     dependencies:
       '@resvg/resvg-js': 1.4.0
       async-icns: 1.0.2

scripts/prepare-flatpak-release.py

@@ -1,13 +1,11 @@
-
-import os
-import sys
-
 import hashlib
 import argparse
+import sys
 
 FLATID = "io.github.zen_browser.zen"
 
 def get_sha256sum(filename):  
+    """Calculate the SHA256 checksum of a file."""
     sha256 = hashlib.sha256()
     with open(filename, "rb") as f:
         for byte_block in iter(lambda: f.read(4096), b""):
@@ -25,10 +23,12 @@ def build_template(template, linux_sha256, flatpak_sha256, version):
 def get_template(template_root):
     file = f"{template_root}/{FLATID}.yml.template"
     print(f"Reading template {file}")
-    with open(file, "r") as f:
-        return f.read()
-    print(f"Template {template_root}/flatpak.yml not found")
-    sys.exit(1)
+    try:
+        with open(file, "r") as f:
+            return f.read()
+    except FileNotFoundError:
+        print(f"Template {file} not found")
+        sys.exit(1)
 
 def main():
     parser = argparse.ArgumentParser(description='Prepare flatpak release')
@@ -39,20 +39,14 @@ def main():
     parser.add_argument('--template-root', help='Template root', default="flatpak")
     args = parser.parse_args()
 
-    version = args.version
-    linux_archive = args.linux_archive
-    flatpak_archive = args.flatpak_archive
-    output = args.output
-    template_root = args.template_root
+    linux_sha256 = get_sha256sum(args.linux_archive)
+    flatpak_sha256 = get_sha256sum(args.flatpak_archive)
+    template = build_template(get_template(args.template_root), linux_sha256, flatpak_sha256, args.version)
 
-    linux_sha256 = get_sha256sum(linux_archive)
-    flatpak_sha256 = get_sha256sum(flatpak_archive)
-
-    template = build_template(get_template(template_root), linux_sha256, flatpak_sha256, version)
-
-    print(f"Writing output to {output}")
-    with open(output, "w") as f:
+    print(f"Writing output to {args.output}")
+    with open(args.output, "w") as f:
         f.write(template)
 
 if __name__ == "__main__":
     main()
+

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

@@ -13,7 +13,7 @@
 /****************************************************************************
  * Betterfox                                                                *
  * "Ad meliora"                                                             *
- * version: 128                                                             *
+ * version: 130                                                             *
  * url: https://github.com/yokoffing/Betterfox                              *
 ****************************************************************************/
 
@@ -21,7 +21,7 @@
  * SECTION: FASTFOX                                                         *
 ****************************************************************************/
 /** GENERAL ***/
-pref("content.notify.interval", 100000); // (.10s); alt=500000 (.50s)
+//pref("content.notify.interval", 100000); // (.10s); alt=500000 (.50s)
 
 /** GFX ***/
 pref("gfx.canvas.accelerated.cache-items", 32768);
@@ -37,8 +37,6 @@ 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);
 
@@ -65,7 +63,6 @@ pref("dom.security.sanitizer.enabled", true);
  * SECTION: SECUREFOX                                                       *
 ****************************************************************************/
 /** TRACKING PROTECTION ***/
-pref("browser.contentblocking.category", "strict");
 pref("urlclassifier.trackingSkipURLs", "*.reddit.com, *.twitter.com, *.twimg.com, *.tiktok.com");
 pref("urlclassifier.features.socialtracking.skipURLs", "*.instagram.com, *.twitter.com, *.twimg.com");
 pref("network.cookie.sameSite.noneRequiresSecure", true);
@@ -161,7 +158,6 @@ pref("browser.shell.checkDefaultBrowser", false);
 pref("browser.newtabpage.activity-stream.asrouter.userprefs.cfr.addons", false);
 pref("browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features", false);
 pref("browser.preferences.moreFromMozilla", false);
-pref("browser.tabs.tabmanager.enabled", false);
 pref("browser.aboutConfig.showWarning", false);
 pref("browser.aboutwelcome.enabled", false);
 
@@ -220,4 +216,4 @@ pref("layout.word_select.eat_space_to_next_word", false);
 
 /****************************************************************************
  * END: BETTERFOX                                                           *
-****************************************************************************/
+****************************************************************************/

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

@@ -0,0 +1,113 @@
+export var ZenCustomizableUI = new (class {
+  constructor() {}
+
+  TYPE_TOOLBAR = 'toolbar';
+  defaultSidebarIcons = ['zen-sidepanel-button', 'zen-workspaces-button', 'new-tab-button'];
+
+  startup(CustomizableUIInternal) {
+    CustomizableUIInternal.registerArea(
+      'zen-sidebar-top-buttons',
+      {
+        type: this.TYPE_TOOLBAR,
+        defaultPlacements: ['preferences-button', 'zen-expand-sidebar-button', 'zen-profile-button'],
+        defaultCollapsed: null,
+      },
+      true
+    );
+    CustomizableUIInternal.registerArea(
+      'zen-sidebar-icons-wrapper',
+      {
+        type: this.TYPE_TOOLBAR,
+        defaultPlacements: this.defaultSidebarIcons,
+        defaultCollapsed: null,
+      },
+      true
+    );
+  }
+
+  // We do not have access to the window object here
+  init(window) {
+    this._addSidebarButtons(window);
+    this._hideToolbarButtons(window);
+  }
+
+  _addSidebarButtons(window) {
+    const sidebarBox = window.MozXULElement.parseXULToFragment(`
+      <toolbar id="zen-sidebar-top-buttons"
+        fullscreentoolbar="true" 
+        class="browser-toolbar customization-target zen-dont-hide-on-fullscreen"
+        brighttext="true"
+        data-l10n-id="tabs-toolbar"
+        customizable="true"
+        context="toolbar-context-menu"
+        flex="1"
+        skipintoolbarset="true"
+        customizationtarget="zen-sidebar-top-buttons-customization-target"
+        mode="icons">
+        <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
+          <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
+          <toolbarbutton id="zen-profile-button" 
+            class="zen-sidebar-action-button toolbarbutton-1 chromeclass-toolbar-additional"
+            delegatesanchor="true"
+            onmousedown="ZenProfileDialogUI.showSubView(this, event)"
+            onkeypress="ZenProfileDialogUI.showSubView(this, event)"
+            consumeanchor="zen-profile-button"
+            closemenu="none"
+            data-l10n-id="toolbar-button-account"
+            cui-areatype="toolbar"
+            badged="true"
+            removable="true">
+            <vbox>
+              <image id="zen-profile-button-icon" />
+            </vbox>
+          </toolbarbutton>
+        </hbox>
+      </toolbar>
+    `);
+    window.document.getElementById('navigator-toolbox').prepend(sidebarBox);
+
+    const newTab = window.document.getElementById('vertical-tabs-newtab-button');
+    newTab.classList.add('zen-sidebar-action-button');
+
+    const wrapper = window.document.createXULElement('toolbarbutton');
+    wrapper.id = 'zen-workspaces-button';
+    window.document.getElementById('zen-sidebar-icons-wrapper').prepend(wrapper);
+
+    for (let id of this.defaultSidebarIcons) {
+      const elem = window.document.getElementById(id);
+      if (!elem) continue;
+      elem.setAttribute('removable', 'true');
+    }
+
+    this._moveWindowButtons(window);
+  }
+
+  _moveWindowButtons(window) {
+    const windowControls = window.document.getElementsByClassName('titlebar-buttonbox-container');
+    const toolboxIcons = window.document.getElementById('zen-sidebar-top-buttons-customization-target');
+    if (window.AppConstants.platform === 'macosx') {
+      for (let i = 0; i < windowControls.length; i++) {
+        if (i === 0) {
+          toolboxIcons.prepend(windowControls[i]);
+          continue;
+        }
+        windowControls[i].remove();
+      }
+    }
+  }
+
+  _hideToolbarButtons(window) {
+    const elementsToHide = ['alltabs-button'];
+    for (let id of elementsToHide) {
+      const elem = window.document.getElementById(id);
+      if (elem) {
+        elem.setAttribute('hidden', 'true');
+      }
+    }
+  }
+
+  registerToolbarNodes(window) {
+    window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-top-buttons'));
+    window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-icons-wrapper'));
+  }
+})();

src/browser/base/content/ZenStartup.mjs

@@ -1,19 +1,14 @@
-
 {
   const lazy = {};
-  XPCOMUtils.defineLazyPreferenceGetter(
-    lazy,
-    "sidebarHeightThrottle",
-    "zen.view.sidebar-height-throttle",
-    500
-  );
+  XPCOMUtils.defineLazyPreferenceGetter(lazy, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
   var ZenStartup = {
     init() {
+      this.logHeader();
       this.openWatermark();
       window.SessionStore.promiseInitialized.then(async () => {
         this._changeSidebarLocation();
         this._zenInitBrowserLayout();
-        this._focusSearchBar();
+        this._initSearchBar();
       });
     },
 
@@ -40,9 +35,17 @@
         // Disable smooth scroll
         gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
 
+        ZenWorkspaces.init();
+        gZenUIManager.init();
         gZenVerticalTabsManager.init();
         gZenCompactModeManager.init();
-        gZenKeyboardShortcuts.init();
+
+        XPCOMUtils.defineLazyPreferenceGetter(
+          this,
+          'contentElementSeparation',
+          'zen.theme.content-element-separation',
+          0
+        );
 
         function throttle(f, delay) {
           let timer = 0;
@@ -52,7 +55,9 @@
           };
         }
 
-        new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), lazy.sidebarHeightThrottle)).observe(document.getElementById('tabbrowser-tabs'));
+        new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), lazy.sidebarHeightThrottle)).observe(
+          document.getElementById('tabbrowser-tabs')
+        );
       } catch (e) {
         console.error('ZenThemeModifier: Error initializing browser layout', e);
       }
@@ -66,7 +71,7 @@
       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 - (this.contentElementSeparation * 2) - 5;
       // remove the height from other elements that aren't hidden
       const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
       for (let tab of otherElements) {
@@ -75,14 +80,6 @@
       }
       tabs.style.maxHeight = 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() {
@@ -105,26 +102,20 @@
     },
 
     _changeSidebarLocation() {
-      const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false);
       const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
-      if (legacyLocation) {
-        kElementsToAppend.push('navigator-toolbox');
-        window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true');
-      }
-      const wrapper = document.getElementById('zen-tabbox-wrapper');
       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');
 
       const browser = document.getElementById('browser');
       const toolbox = document.getElementById('navigator-toolbox');
-      if (!legacyLocation) {
-        browser.prepend(toolbox);
+      browser.prepend(toolbox);
+
+      const sidebarPanelWrapper = document.getElementById('tabbrowser-tabbox');
+      for (let id of kElementsToAppend) {
+        const elem = document.getElementById(id);
+        if (elem) {
+          sidebarPanelWrapper.prepend(elem);
+        }
       }
 
       // remove all styles except for the width, since we are xulstoring the complet style list
@@ -141,8 +132,28 @@
       toolbox.insertAdjacentElement('afterend', splitter);
     },
 
-    _focusSearchBar() {
+    _initSearchBar() {
+      // Only focus the url bar
       gURLBar.focus();
+
+      gURLBar._initCopyCutController();
+      gURLBar._initPasteAndGo();
+      gURLBar._initStripOnShare();
+    },
+
+    logHeader() {
+      console.info(`
+
+    Welcome to Zen Browser!
+
+  If you are seeing this message, it means that you have successfully opened Zen's developer console.
+  Here you can see all the logs and errors that Zen is generating.
+
+  If you have any questions or need help, please contact us in any media in https://zen-browser.app/
+
+  Note: This developer console is not the same as the browser console, it has access to Zen's internal functions and variables, including your passwords and other sensitive information. Please do not paste any code here unless you know what you are doing.
+
+  `);
     },
   };
 

src/browser/base/content/ZenUIManager.mjs

@@ -1,4 +1,11 @@
 var gZenUIManager = {
+  _popupTrackingElements: [],
+
+  init() {
+    document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
+    document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
+  },
+
   openAndChangeToTab(url, options) {
     if (window.ownerGlobal.parent) {
       let tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options);
@@ -24,6 +31,46 @@ var gZenUIManager = {
   createValidXULText(text) {
     return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   },
+
+  /**
+   * Adds the 'has-popup-menu' attribute to the element when popup is opened on it.
+   * @param element element to track
+   */
+  addPopupTrackingAttribute(element) {
+    this._popupTrackingElements.push(element);
+  },
+
+  removePopupTrackingAttribute(element) {
+    this._popupTrackingElements.remove(element);
+  },
+
+  onPopupShowing(showEvent) {
+    for (const el of this._popupTrackingElements) {
+      if (!el.contains(event.explicitOriginalTarget)) {
+        continue;
+      }
+      document.removeEventListener('mousemove', this.__removeHasPopupAttribute);
+      el.setAttribute('has-popup-menu', '');
+      this.__currentPopup = showEvent.target;
+      this.__currentPopupTrackElement = el;
+      break;
+    }
+  },
+
+  onPopupHidden(hideEvent) {
+    if (!this.__currentPopup || this.__currentPopup !== hideEvent.target) {
+      return;
+    }
+    const element = this.__currentPopupTrackElement;
+    if (document.getElementById('main-window').matches(':hover')) {
+      element.removeAttribute('has-popup-menu');
+    } else {
+      this.__removeHasPopupAttribute = () => element.removeAttribute('has-popup-menu');
+      document.addEventListener('mousemove', this.__removeHasPopupAttribute, { once: true });
+    }
+    this.__currentPopup = null;
+    this.__currentPopupTrackElement = null;
+  },
 };
 
 var gZenVerticalTabsManager = {
@@ -33,8 +80,26 @@ var gZenVerticalTabsManager = {
     Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
     Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
     Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', updateEvent);
+
+    gZenCompactModeManager.addEventListener(updateEvent);
     this._updateEvent();
     this.initRightSideOrderContextMenu();
+
+    let tabs = document.getElementById('tabbrowser-tabs');
+
+    XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true);
+
+    if (tabs) {
+      tabs.addEventListener('mouseup', this.openNewTabOnTabsMiddleClick.bind(this));
+    }
+  },
+
+  openNewTabOnTabsMiddleClick(event) {
+    if (event.button === 1 && event.target.id === 'tabbrowser-tabs' && this.canOpenTabOnMiddleClick) {
+      document.getElementById('cmd_newNavigatorTabNoEvent').doCommand();
+      event.stopPropagation();
+      event.preventDefault();
+    }
   },
 
   get navigatorToolbox() {
@@ -61,27 +126,46 @@ var gZenVerticalTabsManager = {
       <menuitem id="zen-toolbar-context-tabs-right"
                 type="checkbox"
                 ${Services.prefs.getBoolPref(kConfigKey) ? 'checked="true"' : ''}
-                data-lazy-l10n-id="zen-toolbar-context-tabs-right"/>
+                data-lazy-l10n-id="zen-toolbar-context-tabs-right"
+				oncommand="gZenVerticalTabsManager.toggleTabsOnRight();"
+		/>
     `);
-    fragment.getElementById('zen-toolbar-context-tabs-right').addEventListener('click', () => {
-      let rightSide = Services.prefs.getBoolPref(kConfigKey);
-      Services.prefs.setBoolPref(kConfigKey, !rightSide);
-    });
     document.getElementById('viewToolbarsMenuSeparator').before(fragment);
   },
 
   _updateEvent() {
     this._updateMaxWidth();
-    if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) {
-      this.navigatorToolbox.setAttribute('zen-expanded', 'true');
-    } else {
-      this.navigatorToolbox.removeAttribute('zen-expanded');
-    }
+    const topButtons = document.getElementById('zen-sidebar-top-buttons');
+    const customizationTarget = document.getElementById('nav-bar-customization-target');
+    const tabboxWrapper = document.getElementById('zen-tabbox-wrapper');
+    const browser = document.getElementById('browser');
     if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
       this.navigatorToolbox.setAttribute('zen-right-side', 'true');
     } else {
       this.navigatorToolbox.removeAttribute('zen-right-side');
     }
+    if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) {
+      this.navigatorToolbox.setAttribute('zen-expanded', 'true');
+    } else {
+      this.navigatorToolbox.removeAttribute('zen-expanded');
+    }
+
+    if (
+      this.navigatorToolbox.hasAttribute('zen-expanded') &&
+      !this.navigatorToolbox.hasAttribute('zen-right-side') &&
+      !Services.prefs.getBoolPref('zen.view.compact') &&
+      !Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')
+    ) {
+      this.navigatorToolbox.prepend(topButtons);
+      browser.prepend(this.navigatorToolbox);
+    } else {
+      customizationTarget.prepend(topButtons);
+      tabboxWrapper.prepend(this.navigatorToolbox);
+    }
+
+    // Always move the splitter next to the sidebar
+    this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
+
     this._updateOnHoverVerticalTabs();
   },
 
@@ -125,69 +209,9 @@ var gZenVerticalTabsManager = {
     Services.prefs.setBoolPref('zen.view.sidebar-expanded', expanded);
     Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
   },
-};
 
-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() {
-    return Services.prefs.getBoolPref('zen.view.compact');
-  },
-
-  set preference(value) {
-    Services.prefs.setBoolPref('zen.view.compact', value);
-  },
-
-  _updateEvent() {
-    Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
-  },
-
-  toggle() {
-    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');
+  toggleTabsOnRight() {
+    const newVal = !Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
+    Services.prefs.setBoolPref('zen.tabs.vertical.right-side', newVal);
   },
 };

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

@@ -0,0 +1,22 @@
+diff --git a/browser/base/content/aboutDialog.js b/browser/base/content/aboutDialog.js
+index 8c5c7768e0e716c196063b4c986dea2631185972..d31f57a176fffc9725b1c31b165fb5cdc55e186e 100644
+--- a/browser/base/content/aboutDialog.js
++++ b/browser/base/content/aboutDialog.js
+@@ -51,7 +51,7 @@ function init() {
+   ]);
+   let versionIdKey = "base";
+   let versionAttributes = {
+-    version: AppConstants.MOZ_APP_VERSION_DISPLAY,
++    version: `${AppConstants.MOZ_APP_VERSION_DISPLAY} (Firefox ${AppConstants.ZEN_FIREFOX_VERSION})`,
+   };
+ 
+   let arch = Services.sysinfo.get("arch");
+@@ -63,7 +63,7 @@ function init() {
+   }
+ 
+   let version = Services.appinfo.version;
+-  if (/a\d+$/.test(version)) {
++  if (version.includes("t")) {
+     versionIdKey += "-nightly";
+     let buildID = Services.appinfo.appBuildID;
+     let year = buildID.slice(0, 4);

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

@@ -1,8 +1,8 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index 16559b2c0e3aef391b43e09281aee24007feb0bd..2579cea92a55fabb73fdd130c3706af08c3fd849 100644
+index 108160d9469d44f47c93a3808402e4b27ff59777..39a7b691302bf13e1b5990f46428cff6807a8e56 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -21,11 +21,15 @@
+@@ -23,11 +23,16 @@
    </vbox>
    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
    <vbox id="appcontent" flex="1">
@@ -12,6 +12,7 @@ index 16559b2c0e3aef391b43e09281aee24007feb0bd..2579cea92a55fabb73fdd130c3706af0
      <tabbox id="tabbrowser-tabbox"
              flex="1" tabcontainer="tabbrowser-tabs">
 +#include zen-sidebar-panel.inc.xhtml
++#include zen-splitview-overlay.inc.xhtml
        <tabpanels id="tabbrowser-tabpanels"
                    flex="1" selectedIndex="0"/>
      </tabbox>

src/browser/base/content/browser-development-helpers-js.patch

@@ -0,0 +1,13 @@
+diff --git a/browser/base/content/browser-development-helpers.js b/browser/base/content/browser-development-helpers.js
+index 5155b280b8ff1dec8c53b12861ed4401f5499659..2184440335bbbf397f14d7c5e4b099f57022d03a 100644
+--- a/browser/base/content/browser-development-helpers.js
++++ b/browser/base/content/browser-development-helpers.js
+@@ -33,7 +33,7 @@ var DevelopmentHelpers = {
+     key.setAttribute("key", "r");
+     key.setAttribute("modifiers", "accel,alt");
+     key.setAttribute("command", "cmd_quickRestart");
+-    document.getElementById("mainKeyset").prepend(key);
++    document.getElementById(ZEN_KEYSET_ID).prepend(key);
+ 
+     let menuitem = document.createXULElement("menuitem");
+     menuitem.setAttribute("id", "menu_FileRestartItem");

src/browser/base/content/browser-init-js.patch

@@ -1,8 +1,25 @@
 diff --git a/browser/base/content/browser-init.js b/browser/base/content/browser-init.js
-index f8d49ac2a3a62f389ea44b07a26fcb102abc0b24..c29415e10c776ebc435f33e55f8afb71f0dcf22a 100644
+index bee5309c04775adff8652bfe6c54b2d466e821ac..cfeaf7cf2e98c35e76bdd5451f90b004a04d4474 100644
 --- a/browser/base/content/browser-init.js
 +++ b/browser/base/content/browser-init.js
-@@ -237,6 +237,10 @@ var gBrowserInit = {
+@@ -143,13 +143,15 @@ var gBrowserInit = {
+     gNavToolbox.palette = document.getElementById(
+       "BrowserToolbarPalette"
+     ).content;
++    ZenCustomizableUI.init(window);
+     for (let area of CustomizableUI.areas) {
+       let type = CustomizableUI.getAreaType(area);
+-      if (type == CustomizableUI.TYPE_TOOLBAR) {
++      if (type == CustomizableUI.TYPE_TOOLBAR && !area.startsWith("zen-")) {
+         let node = document.getElementById(area);
+         CustomizableUI.registerToolbarNode(node);
+       }
+     }
++    ZenCustomizableUI.registerToolbarNodes(window);
+     BrowserSearch.initPlaceHolder();
+ 
+     // Hack to ensure that the various initial pages favicon is loaded
+@@ -239,6 +241,10 @@ var gBrowserInit = {
      gPrivateBrowsingUI.init();
      BrowserSearch.init();
      BrowserPageActions.init();

src/browser/base/content/browser-js.patch

@@ -1,8 +1,16 @@
 diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
-index b18f371a47fec53882c3dfb68e34d1a474eaf446..2c183d7e7fc65e00403f5e40e7859b915a3ea700 100644
+index a29d7a84e84651ea0bdc9be8e4ac650bde2e048a..bc22e55a66686fbae95047686f845f71a0c3aae9 100644
 --- a/browser/base/content/browser.js
 +++ b/browser/base/content/browser.js
-@@ -630,6 +630,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
+@@ -32,6 +32,7 @@ ChromeUtils.defineESModuleGetters(this, {
+   ContextualIdentityService:
+     "resource://gre/modules/ContextualIdentityService.sys.mjs",
+   CustomizableUI: "resource:///modules/CustomizableUI.sys.mjs",
++  ZenCustomizableUI: "chrome://browser/content/ZenCustomizableUI.sys.mjs",
+   DevToolsSocketStatus:
+     "resource://devtools/shared/security/DevToolsSocketStatus.sys.mjs",
+   DownloadUtils: "resource://gre/modules/DownloadUtils.sys.mjs",
+@@ -629,6 +630,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
    false
  );
  
@@ -18,17 +26,18 @@ index b18f371a47fec53882c3dfb68e34d1a474eaf446..2c183d7e7fc65e00403f5e40e7859b91
  customElements.setElementCreationCallback("screenshots-buttons", () => {
    Services.scriptloader.loadSubScript(
      "chrome://browser/content/screenshots/screenshots-buttons.js",
-@@ -3679,6 +3688,9 @@ var XULBrowserWindow = {
+@@ -3435,6 +3445,10 @@ var XULBrowserWindow = {
      AboutReaderParent.updateReaderButton(gBrowser.selectedBrowser);
      TranslationsParent.onLocationChange(gBrowser.selectedBrowser);
  
 +    gZenViewSplitter.onLocationChange(gBrowser.selectedBrowser);
 +    ZenWorkspaces.onLocationChange(gBrowser.selectedBrowser);
++    gZenTabUnloader.onLocationChange(gBrowser.selectedBrowser);
 +
      PictureInPicture.updateUrlbarToggle(gBrowser.selectedBrowser);
  
      if (!gMultiProcessBrowser) {
-@@ -5001,7 +5013,7 @@ function setToolbarVisibility(
+@@ -4769,7 +4783,7 @@ function setToolbarVisibility(
        );
      }
  
@@ -37,7 +46,7 @@ index b18f371a47fec53882c3dfb68e34d1a474eaf446..2c183d7e7fc65e00403f5e40e7859b91
      switch (isVisible) {
        case true:
        case "always":
-@@ -7832,6 +7844,12 @@ var gDialogBox = {
+@@ -7609,6 +7623,12 @@ var gDialogBox = {
      parentElement.showModal();
      this._didOpenHTMLDialog = true;
  

src/browser/base/content/browser-sets-js.patch

@@ -0,0 +1,13 @@
+diff --git a/browser/base/content/browser-sets.js b/browser/base/content/browser-sets.js
+index 50da6424691ca230aa1a3a419cb69e66cf47b2c4..1f63f4bb7b75c940d5482dd4f13cebf452dddb74 100644
+--- a/browser/base/content/browser-sets.js
++++ b/browser/base/content/browser-sets.js
+@@ -245,7 +245,7 @@ document.addEventListener(
+         }
+       });
+ 
+-    document.getElementById("mainKeyset").addEventListener("command", event => {
++    document.getElementById(ZEN_KEYSET_ID).addEventListener("command", event => {
+       switch (event.target.id) {
+         case "goHome":
+           BrowserCommands.home();

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

@@ -1,17 +1,25 @@
 diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
-index 481ebbee437250c71e9bd10c4fb6fc0c31314925..3bb046a4635fad831cc447e29516ee5ed407a3f2 100644
+index 5dd337a2ffc9f9107d735f4dc96a50d57b12d213..58ecaf7136e13885ac38d74d40b5ef0f52cd7684 100644
 --- a/browser/base/content/browser.xhtml
 +++ b/browser/base/content/browser.xhtml
-@@ -138,6 +138,8 @@
+@@ -98,6 +98,8 @@
+ 
+   <title data-l10n-id="browser-main-window-title"></title>
+ 
++#include zen-preloaded.inc.xhtml
++
+ # All JS files which are needed by browser.xhtml and other top level windows to
+ # support MacOS specific features *must* go into the global-scripts.inc file so
+ # that they can be shared with macWindow.inc.xhtml.
+@@ -141,6 +143,7 @@
    window.addEventListener("DOMContentLoaded",
      gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true });
  </script>
-+#include zen-locales.inc.xhtml
 +#include zen-assets.inc.xhtml
  </head>
  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  # All sets except for popupsets (commands, keys, and stringbundles)
-@@ -159,9 +161,12 @@
+@@ -162,9 +165,12 @@
      </vbox>
    </html:template>
  

src/browser/base/content/navigator-toolbox-inc-xhtml.patch

@@ -37,8 +37,8 @@ index 18b91c95b88d11ddb257de03f12bc3e4cc75a96a..f117cfa7c9d1f9eb537cebbef42a9d2d
                                    tooltip="dynamic-shortcut-tooltip"
                                    data-l10n-id="tabs-toolbar-new-tab"/>
              </html:div>
--            <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" style="min-width: 1px;" clicktoscroll="true" scrolledtostart="true" scrolledtoend="true">
-+            <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="vertical" style="min-width: 1px;" clicktoscroll="true" scrolledtostart="true" scrolledtoend="true">
+-            <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" style="min-width: 1px;" clicktoscroll="" scrolledtostart="" scrolledtoend="">
++            <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="vertical" style="min-width: 1px;" clicktoscroll="" scrolledtostart="" scrolledtoend="">
                <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
                <hbox id="tabbrowser-arrowscrollbox-periphery">
                  <toolbartabstop/>

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

@@ -1,3 +1,5 @@
+#include zen-locales.inc.xhtml
+
 <!-- Styles used all over the browser -->
 <linkset>
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-theme.css" />
@@ -23,15 +25,14 @@
 </linkset>
 
 <!-- Scripts used all over the browser -->
-<script type="text/javascript">
-window.addEventListener("DOMContentLoaded", async () => {
-  // Theme importer always needs to be loaded first
-  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenThemesImporter.mjs");
-  Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs");
-  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenSidebarManager.mjs");
-  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspaces.mjs");
-  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenViewSplitter.mjs");
-  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenProfileDialogUI.mjs");
-  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs");
-}, { once: true });
-</script>
+<script src="chrome://browser/content/zen-components/ZenThemesCommon.mjs" />
+<script src="chrome://browser/content/zen-components/ZenThemesImporter.mjs" />
+<script src="chrome://browser/content/zen-components/ZenCompactMode.mjs" />
+<script src="chrome://browser/content/ZenUIManager.mjs" />
+<script src="chrome://browser/content/zen-components/ZenSidebarManager.mjs"/>
+<script src="chrome://browser/content/zen-components/ZenTabUnloader.mjs" />
+<script src="chrome://browser/content/zen-components/ZenWorkspaces.mjs" />
+<script src="chrome://browser/content/zen-components/ZenWorkspacesStorage.mjs" />
+<script src="chrome://browser/content/zen-components/ZenWorkspacesSync.mjs" />
+<script src="chrome://browser/content/zen-components/ZenViewSplitter.mjs"/>
+<script src="chrome://browser/content/zen-components/ZenProfileDialogUI.mjs" />

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

@@ -3,13 +3,22 @@
         content/browser/zenThemeModifier.js                     (content/zenThemeModifier.js)
         content/browser/ZenStartup.mjs                          (content/ZenStartup.mjs)
         content/browser/ZenUIManager.mjs                        (content/ZenUIManager.mjs)
+        content/browser/ZenCustomizableUI.sys.mjs               (content/ZenCustomizableUI.sys.mjs)
+        content/browser/zen-components/ZenCompactMode.mjs       (content/zen-components/src/ZenCompactMode.mjs)
         content/browser/zen-components/ZenViewSplitter.mjs      (content/zen-components/src/ZenViewSplitter.mjs)
+        content/browser/zen-components/ZenThemesCommon.mjs      (content/zen-components/src/ZenThemesCommon.mjs)
         content/browser/zen-components/ZenWorkspaces.mjs        (content/zen-components/src/ZenWorkspaces.mjs)
+        content/browser/zen-components/ZenWorkspacesStorage.mjs (content/zen-components/src/ZenWorkspacesStorage.mjs)
+        content/browser/zen-components/ZenWorkspacesSync.mjs    (content/zen-components/src/ZenWorkspacesSync.mjs)
         content/browser/zen-components/ZenSidebarManager.mjs    (content/zen-components/src/ZenSidebarManager.mjs)
         content/browser/zen-components/ZenProfileDialogUI.mjs   (content/zen-components/src/ZenProfileDialogUI.mjs)
         content/browser/zen-components/ZenKeyboardShortcuts.mjs (content/zen-components/src/ZenKeyboardShortcuts.mjs)
         content/browser/zen-components/ZenThemeBuilder.mjs      (content/zen-components/src/ZenThemeBuilder.mjs)
         content/browser/zen-components/ZenThemesImporter.mjs    (content/zen-components/src/ZenThemesImporter.mjs)
+        content/browser/zen-components/ZenTabUnloader.mjs       (content/zen-components/src/ZenTabUnloader.mjs)
+        content/browser/zen-components/ZenPinnedTabManager.mjs  (content/zen-components/src/ZenPinnedTabManager.mjs)
+        content/browser/zen-components/ZenCommonUtils.mjs       (content/zen-components/src/ZenCommonUtils.mjs)
+        content/browser/zen-components/ZenGradientGenerator.mjs (content/zen-components/src/ZenGradientGenerator.mjs)
 
         content/browser/zen-styles/zen-theme.css                (content/zen-styles/zen-theme.css)
         content/browser/zen-styles/zen-buttons.css              (content/zen-styles/zen-buttons.css)
@@ -29,6 +38,7 @@
         content/browser/zen-styles/zen-urlbar.css               (content/zen-styles/zen-urlbar.css)
         content/browser/zen-styles/zen-popup.css                (content/zen-styles/zen-popup.css)
         content/browser/zen-styles/zen-sidebar-panels.css       (content/zen-styles/zen-sidebar-panels.css)
+        content/browser/zen-styles/zen-gradient-generator.css   (content/zen-styles/zen-gradient-generator.css)
         
         content/browser/zen-styles/zen-panels/bookmarks.css     (content/zen-styles/zen-panels/bookmarks.css)
         content/browser/zen-styles/zen-panels/extensions.css    (content/zen-styles/zen-panels/extensions.css)

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

@@ -3,9 +3,19 @@
             onpopuphidden="if (event.target == this) gZenBrowserManagerSidebar.contextTab = null;">
   <menuitem id="context_zenUnloadWebPanel" oncommand="gZenBrowserManagerSidebar.contextUnload();" data-l10n-id="zen-web-side-panel-context-unload"/>
   <menuitem id="context_zenToggleMuteWebPanel" oncommand="gZenBrowserManagerSidebar.contextToggleMuteAudio();"/>
-  <menuitem id="context_zenToogleUAWebPanel" oncommand="gZenBrowserManagerSidebar.contextToggleUserAgent();"/>
   <menuitem id="context_zenOpenNewTabWebPanel" oncommand="gZenBrowserManagerSidebar.contextOpenNewTab();" data-l10n-id="zen-web-side-panel-open-in-new-tab"/>
   <menuseparator/>
+  <menu id="context_zenWebPanelContextInContainer"
+    data-l10n-id="zen-web-side-panel-context-open-in-container-tab"
+    selection-type="single"
+    node-type="link"
+    hide-if-private-browsing="true"
+    hide-if-usercontext-disabled="true">
+    <menupopup oncommand="gZenBrowserManagerSidebar.contextChangeContainerTab(event);"
+          onpopupshowing="return gZenBrowserManagerSidebar.createContainerTabMenu(event);" />
+  </menu>
+  <menuitem id="context_zenToogleUAWebPanel" oncommand="gZenBrowserManagerSidebar.contextToggleUserAgent();"/>
+  <menuseparator/>
   <menuitem id="context_zenDeleteWebPanel" oncommand="gZenBrowserManagerSidebar.contextDelete();" data-l10n-id="zen-web-side-panel-context-delete"/>
 </menupopup>
 
@@ -15,6 +25,7 @@
   orient="vertical"
   role="alertdialog"
   type="arrow"
+  onpopupshowing="gZenViewSplitter.disableTabRearrangeView();"
   aria-labelledby="zen-split-view-modifier-header"
   tabspecific="true">
   <panelmultiview id="zenSplitViewModifierMultiview"
@@ -24,34 +35,48 @@
       role="document"
       mainview-with-header="true"
       has-custom-header="true">
-      <vbox>
-        <box class="zen-split-view-modifier-preview grid">
-          <box></box>
-          <box></box>
-          <box></box>
-        </box>
-        <p>Grid Layout</p>
-      </vbox>
-      <vbox>
-        <box class="zen-split-view-modifier-preview hsep">
-          <box></box>
-          <box></box>
-        </box>
-        <p>Horizontal</p>
-      </vbox>
-      <vbox>
-        <box class="zen-split-view-modifier-preview vsep">
-          <box></box>
-          <box></box>
-        </box>
-        <p>Vertical</p>
-      </vbox>
-      <vbox>
-        <box class="zen-split-view-modifier-preview unsplit">
-          <box></box>
-        </box>
-        <p>Unsplit</p>
-      </vbox>
+      <box id="zenSplitViewModifierHeader"        
+        class="panel-header panel-header-with-additional-element panel-header-with-info-button">
+        <html:h1>
+          <html:span data-l10n-id="zen-split-view-modifier-header"></html:span>
+        </html:h1>
+        <toolbarbutton id="zenSplitViewModifierActivateReallocation"
+                        class="panel-info-button"
+                        oncommand="gZenViewSplitter.enableTabRearrangeView();"
+                        data-l10n-id="zen-split-view-modifier-activate-reallocation">
+          <image/>
+        </toolbarbutton>
+      </box>
+      <hbox id="zenSplitViewModifierContent">
+        <vbox>
+          <box class="zen-split-view-modifier-preview grid">
+            <box></box>
+            <box></box>
+            <box></box>
+          </box>
+          <p>Grid Layout</p>
+        </vbox>
+        <vbox>
+          <box class="zen-split-view-modifier-preview vsep">
+            <box></box>
+            <box></box>
+          </box>
+          <p>Vertical</p>
+        </vbox>
+        <vbox>
+          <box class="zen-split-view-modifier-preview hsep">
+            <box></box>
+            <box></box>
+          </box>
+          <p>Horizontal</p>
+        </vbox>
+        <vbox>
+          <box class="zen-split-view-modifier-preview unsplit">
+            <box></box>
+          </box>
+          <p>Unsplit</p>
+        </vbox>
+      </hbox>
     </panelview>
   </panelmultiview>
 </panel>
@@ -78,31 +103,30 @@
 
 <panel flip="slide" type="arrow" orient="vertical" id="PanelUI-zen-workspaces" position="bottomright topright" mainview="true" side="left">
   <panelmultiview id="PanelUI-zen-workspaces-multiview" mainViewId="PanelUI-zen-workspaces-view">
-    <panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
+    <panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true" closemenu="none">
       <vbox>
         <hbox>
-          <h3 data-l10n-id="zen-panel-ui-current-window-text"></h3>
+          <h3 data-l10n-id="zen-panel-ui-workspaces-text"></h3>
           <hbox class="translations-panel-beta" role="image" aria-label="Beta">
             <image class="translations-panel-beta-icon"></image>
           </hbox>
+          <toolbarbutton id="PanelUI-zen-workspaces-reorder-mode" oncommand="ZenWorkspaces.toggleReorderMode();" class="subviewbutton">
+            <image></image>
+          </toolbarbutton>
           <toolbarbutton id="PanelUI-zen-workspaces-new" oncommand="ZenWorkspaces.openSaveDialog();" class="subviewbutton">
             <image></image>
           </toolbarbutton>
         </hbox>
-        <html:div id="PanelUI-zen-workspaces-current-info">
-        </html:div>
-      </vbox>
-      <vbox>
-        <h3 data-l10n-id="zen-panel-ui-workspaces-text"></h3>
-        <html:div id="PanelUI-zen-workspaces-list">
-        </html:div>
       </vbox>
+      <html:div id="PanelUI-zen-workspaces-list">
+      </html:div>
     </panelview>
     <panelview id="PanelUI-zen-workspaces-create" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox>
+      <vbox class="PanelUI-zen-workspaces-user-create">
         <h1 data-l10n-id="zen-panel-ui-workspaces-create-text"></h1>
-        <html:input autofocus="true" id="PanelUI-zen-workspaces-create-input" type="text" placeholder="Enter workspace name" oninput="ZenWorkspaces.onWorkspaceCreationNameChange(this);" />
-        <hbox id="PanelUI-zen-workspaces-create-icons-container">
+        <hbox class="PanelUI-zen-workspaces-creation-wraper">
+          <hbox class="PanelUI-zen-workspaces-icons-container create" onclick="ZenWorkspaces.onWorkspaceIconContainerClick(event);"></hbox>
+          <html:input autofocus="true" id="PanelUI-zen-workspaces-create-input" type="text" placeholder="Enter workspace name" oninput="ZenWorkspaces.onWorkspaceCreationNameChange(this);" />
         </hbox>
       </vbox>
       <html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-create-footer">
@@ -113,10 +137,11 @@
       </html:moz-button-group>
     </panelview>
     <panelview id="PanelUI-zen-workspaces-edit" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox>
+      <vbox class="PanelUI-zen-workspaces-user-create">
         <h1 data-l10n-id="zen-panel-ui-workspaces-edit-text"></h1>
-        <html:input autofocus="true" id="PanelUI-zen-workspaces-edit-input" type="text" placeholder="Enter workspace name" oninput="ZenWorkspaces.onWorkspaceEditChange();" />
-        <hbox id="PanelUI-zen-workspaces-edit-icons-container">
+        <hbox class="PanelUI-zen-workspaces-creation-wraper">
+          <hbox class="PanelUI-zen-workspaces-icons-container edit" onclick="ZenWorkspaces.onWorkspaceIconContainerClick(event);"></hbox>
+          <html:input autofocus="true" id="PanelUI-zen-workspaces-edit-input" type="text" placeholder="Enter workspace name" oninput="ZenWorkspaces.onWorkspaceEditChange();" />
         </hbox>
       </vbox>
       <html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-edit-footer">
@@ -126,12 +151,16 @@
         </button>
       </html:moz-button-group>
     </panelview>
+    <panelview id="PanelUI-zen-workspaces-icon-picker" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
+      <vbox id="PanelUI-zen-workspaces-icon-picker-wrapper">
+      </vbox>
+    </panelview>
   </panelmultiview>
 </panel>
 
 <menupopup id="zenWorkspaceActionsMenu"
             onpopupshowing="ZenWorkspaces.updateContextMenu(this);"
-            onpopuphidden="ZenWorkspaces.onContextMenuClose();">
+            onpopuphidden="if (event.target == this) ZenWorkspaces.onContextMenuClose();">
   <menuitem id="context_zenOpenWorkspace" oncommand="ZenWorkspaces.openWorkspace();" data-l10n-id="zen-workspaces-panel-context-open"/>
   <menuseparator/>
   <menuitem id="context_zenSetAsDefaultWorkspace" oncommand="ZenWorkspaces.setDefaultWorkspace();" data-l10n-id="zen-workspaces-panel-context-set-default"/>
@@ -147,4 +176,4 @@
   </menu>
   <menuseparator/>
   <menuitem id="context_zenDeleteWorkspace" oncommand="ZenWorkspaces.contextDelete(event);" data-l10n-id="zen-workspaces-panel-context-delete"/>
-</menupopup>
+</menupopup>

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

@@ -0,0 +1,8 @@
+# This needs to be here, before all the other scripts, because it's used before
+# the window is fully loaded.
+# Make sure they are loaded before the global-scripts.inc file.
+<script type="text/javascript">
+  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenCommonUtils.mjs", this);
+  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs", this);
+  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenPinnedTabManager.mjs", this);
+</script>

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

@@ -1,9 +1,11 @@
-<toolbar brighttext="true" id="zen-sidebar-icons-wrapper" class="zen-dont-hide-on-fullscreen">
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button chromeclass-toolbar-additional subviewbutton-nav" badge="true" closemenu="none" removable="true" delegatesanchor="true" cui-areatype="toolbar" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="ZenProfileDialogUI.showSubView(this, event)">
-  </toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-bookmark-button" data-l10n-id="sidebar-menu-bookmarks" onclick="gZenUIManager.toogleBookmarksSidebar();"></toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-history-button" data-l10n-id="sidebar-menu-history" oncommand="PanelUI.showSubView('PanelUI-history', this);"></toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-preferences-button" data-l10n-id="toolbar-settings-button" onclick="event.target.ownerGlobal.openPreferences(undefined);"></toolbarbutton>
+<toolbar brighttext="true" 
+  id="zen-sidebar-icons-wrapper" 
+  fullscreentoolbar="true" 
+  class="browser-toolbar customization-target zen-dont-hide-on-fullscreen"
+  data-l10n-id="tabs-toolbar"
+  customizable="true"
+  skipintoolbarset="true"
+  context="toolbar-context-menu"
+  mode="icons">
+  <toolbarbutton removeable="true" class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
 </toolbar>

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

@@ -1,6 +1,6 @@
-<box id="zen-sidebar-web-panel-wrapper">
+<hbox id="zen-sidebar-web-panel-wrapper">
   <box id="zen-sidebar-web-panel" class="chromeclass-extrachrome" hidden="true" persist="pinned style hidden">
-    <toolbar mode="icons" flex="1" id="zen-sidebar-web-header">
+    <toolbar mode="icons" flex="1" id="zen-sidebar-web-header" fullscreentoolbar="true">
       <hbox>
         <toolbarbutton id="zen-sidebar-web-panel-back" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.back();"/>
         <toolbarbutton id="zen-sidebar-web-panel-forward" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.forward();"/>
@@ -20,13 +20,15 @@
         <html:p data-l10n-id="zen-sidebar-introduction-description"/>
       </vbox>
     </vbox>
-    <toolbar mode="icons" flex="1" id="zen-sidebar-panels-wrapper" class="zen-dont-hide-on-fullscreen">
-      <toolbar mode="icons" flex="1" id="zen-sidebar-panels-sites" class="zen-dont-hide-on-fullscreen">
+    <toolbar mode="icons" flex="1" id="zen-sidebar-panels-wrapper" fullscreentoolbar="true">
+      <toolbar mode="icons" flex="1" id="zen-sidebar-panels-sites" fullscreentoolbar="true">
         
       </toolbar>
       <toolbarbutton id="zen-sidebar-add-panel-button" class="zen-sidebar-panel-button toolbarbutton-1 chromeclass-toolbar-additional" onclick="gZenBrowserManagerSidebar._openAddPanelDialog();"/>
     </toolbar>
-    <html:span id="zen-sidebar-web-panel-splitter"></html:span>
-    <html:span id="zen-sidebar-web-panel-hsplitter"></html:span>
+    <html:span class="zen-sidebar-web-panel-splitter" side="left"></html:span>
+    <html:span class="zen-sidebar-web-panel-splitter" side="right"></html:span>
+    <html:span class="zen-sidebar-web-panel-splitter" orient="horizontal" side="top"></html:span>
+    <html:span class="zen-sidebar-web-panel-splitter" orient="horizontal" side="bottom"></html:span>
   </box>
-</box>
+</hbox>

src/browser/base/content/zen-splitview-overlay.inc.xhtml

@@ -0,0 +1,5 @@
+<hbox id="zen-splitview-overlay-wrapper" hidden="true">
+  <hbox id="zen-splitview-overlay">
+    <hbox id ="zen-splitview-dropzone"></hbox>
+  </hbox>
+</hbox>

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

@@ -35,7 +35,7 @@
 
 @keyframes zen-slide-in {
   from {
-    transform: translateX(-10px);
+    transform: translateX(-30px);
     opacity: 0;
   }
   to {
@@ -44,17 +44,6 @@
   }
 }
 
-@keyframes zen-zoom-in {
-  from {
-    transform: scale(0.5);
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes zen-deck-fadeIn {
   0% {
     transform: scale(0.9);
@@ -81,20 +70,20 @@
 
 @keyframes zen-sidebar-panel-animation-2 {
   0% {
-    opacity: 0;
-    transform: translateX(-50px) scale3d(0.95, 0.95, 0.95);
+    opacity: 1;
+    transform: translateX(-50px);
   }
 
   100% {
+    transform: translateX(0);
     opacity: 1;
-    transform: translateX(0) scale3d(1, 1, 1);
   }
 }
 
 @keyframes zen-vtabs-animation {
   0% {
     opacity: 0;
-    transform: translateX(-5px);
+    transform: translateX(-10px);
   }
 
   20% {
@@ -109,9 +98,9 @@
 @keyframes zen-sidebar-panel-animation-right {
   0% {
     opacity: 0;
-    transform: translateX(5px);
+    transform: translateX(10px);
   }
-  
+
   20% {
     opacity: 1;
   }
@@ -136,3 +125,33 @@
     display: none !important;
   }
 }
+
+@keyframes zen-workspaces-button-active {
+  from {
+    bottom: -20px;
+  }
+
+  to {
+    bottom: -2px;
+  }
+}
+
+@keyframes zen-workspaces-button-active-collapsed-left {
+  from {
+    left: -20px;
+  }
+
+  to {
+    left: -2px;
+  }
+}
+
+@keyframes zen-workspaces-button-active-collapsed-right {
+  from {
+    right: -20px;
+  }
+
+  to {
+    right: -2px;
+  }
+}

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

@@ -5,26 +5,16 @@
     transform: translate3d(0, 0, 0);
     position: relative;
 
-    /* This fixes an issue with the left border */
-    --zen-webview-correction-margin: 2px;
-    margin-left: 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 1px 1px var(--uc-tweak-rounded-corners-shadow-color);
+    --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: "";
+      content: '';
       position: absolute;
       inset: 0;
       border-radius: inherit;
@@ -32,7 +22,7 @@
        * 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-themed-toolbar-bg) !important;
+        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

@@ -15,7 +15,7 @@
     padding-right: var(--zen-element-separation);
     padding-bottom: var(--zen-element-separation);
 
-    #browser:has(#navigator-toolbox[zen-right-side="true"]) & {
+    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
       padding-right: 0;
       padding-left: var(--zen-element-separation);
     }
@@ -33,11 +33,7 @@
   width: 100%;
 }
 
-:not([inDOMFullscreen='true']) #appcontent {
-  overflow: hidden;
-}
-
-:not([inDOMFullscreen='true']) #appcontent,
+:root:not([inDOMFullscreen='true']) #appcontent,
 #sidebar-box {
   /** Sidebar is already hidden in full screen mode */
   border: none;
@@ -50,4 +46,13 @@
 #tabbrowser-tabbox {
   display: flex;
   flex-direction: row;
-}
+  position: relative;
+}
+
+.titlebar-buttonbox-container {
+  height: 100%;
+}
+
+:root:not([inDOMFullscreen='true']) #tabbrowser-tabbox {
+  padding: 2px; /* To allow the web view's shadow to be visible */
+}

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

@@ -1,220 +1,144 @@
 /* All overrides for compact mode go here */
 
-@media not (-moz-bool-pref: 'zen.view.compact') {
-  #sidebar-box {
-    margin-top: 0 !important;
-  }
-}
-
 @media (-moz-bool-pref: 'zen.view.compact') {
-  :root[sizemode='fullscreen'],
-  #navigator-toolbox[inFullscreen] {
-    margin-top: 0 !important;
-  }
+  :root:not([customizing]):not([inDOMFullscreen='true']) {
+    @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
+      #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
+        margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
+      }
 
-  #nav-bar {
-    padding-left: 5px !important;
-  }
+      #zen-sidebar-top-buttons-customization-target {
+        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
+      }
 
-  #navigator-toolbox {
-    --zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2);
-    --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single);
-    position: absolute;
-    display: block;
-    transition: 200ms ease-in-out !important;
-    transform: translateX(calc(-100% + (var(--zen-compact-toolbox-margin-single) / 2)));
-    opacity: 0;
-    line-height: 0;
-    z-index: 2;
-    height: 100%;
-    margin: 0;
-    padding: var(--zen-compact-toolbox-margin) !important;
+      /* Set the extra paddings */
+      #tabbrowser-tabpanels {
+        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          padding-right: var(--zen-element-separation) !important;
+        }
 
-    & #titlebar {
-      border: 1px solid var(--zen-colors-border);
-      transition-delay: 200ms;
-      background: var(--zen-colors-tertiary) !important;
-      padding: var(--zen-toolbox-padding);
-      border-radius: var(--zen-panel-radius);
-    }
+        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
+          padding-left: var(--zen-element-separation) !important;
+        }
+      }
 
-    & > * {
-      pointer-events: none;
-    }
+      #zen-sidebar-splitter {
+        display: none !important;
+      }
 
-    &,
-    & #titlebar {
-      min-width: var(--zen-toolbox-min-width) !important;
-    }
-  }
+      #navigator-toolbox {
+        --zen-toolbox-max-width: 54px !important;
+        --zen-compact-float: calc(var(--zen-element-separation) + 1px);
+        position: absolute;
+        z-index: 9;
+        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+        right: calc(100% - var(--zen-element-separation));
+        top: 0;
+        bottom: var(--zen-element-separation);
+        opacity: 0;
+        padding-left: var(--zen-compact-float) !important;
+        padding-bottom: 0 !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;
-    }
-  }
+        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          padding-left: unset !important;
+          padding-right: var(--zen-compact-float) !important;
+          left: calc(100% - var(--zen-element-separation));
+          right: unset;
+        }
+      }
 
-  @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;
-    }
-  }
+      #titlebar {
+        background: var(--zen-themed-toolbar-bg) !important;
+        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+        border-radius: calc(var(--zen-border-radius) + 2px);
+        border: 1px solid var(--zen-colors-border);
+        padding: var(--zen-toolbox-padding) !important;
+        position: relative;
+      }
+      /* Mark: toolbox as collapsed */
+      #zen-tabbox-wrapper > #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-expanded='true'])) {
+        max-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important;
+        min-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important;
+      }
 
-  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden='true'])),
-  #sidebar-box:not([positionend='true']) {
-    margin-right: 0 !important;
-    margin-left: var(--zen-sidebar-web-panel-spacing) !important;
-  }
+      @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
+        #navigator-toolbox {
+          top: var(--zen-element-separation);
+        }
+      }
 
-  #sidebar-box[positionend='true'] {
-    margin-left: 0 !important;
-    margin-right: var(--zen-sidebar-web-panel-spacing) !important;
-  }
+      #navigator-toolbox:hover,
+      #navigator-toolbox[zen-has-hover],
+      #navigator-toolbox:focus-within,
+      #navigator-toolbox[zen-user-show],
+      #navigator-toolbox[flash-popup],
+      #navigator-toolbox[has-popup-menu],
+      #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)) {
+        opacity: 1;
 
-  #sidebar-splitter {
-    margin: 0 !important;
-  }
-
-  @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... 
-       * The top margin is calculated by taking the following factors into account:
-       *  1. Element separation
-       *  2. Extra margin to separate from the webview
-       *  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) + 0.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);
-
-      :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);
+        transform: translateX(calc(100% - var(--zen-element-separation)));
+        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          transform: translateX(calc(-100% + var(--zen-element-separation)));
+        }
       }
     }
 
-    #zen-sidebar-web-panel-wrapper,
-    #sidebar-box {
-      margin-top: 0 !important;
-    }
-  }
+    @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
+      #navigator-toolbox {
+        --zen-toolbox-top-align: var(--zen-element-separation);
+      }
 
-  #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)) {
-    transform: none !important;
-    opacity: 1;
+      &:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
+        padding-top: var(--zen-element-separation) !important;
+      }
 
-    & > * {
-      pointer-events: all;
-    }
-  }
+      #sidebar-box,
+      #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
+        margin-top: var(--zen-element-separation) !important;
+      }
 
-  #navigator-toolbox > * {
-    line-height: normal;
-  }
+      #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
+        margin-top: calc(var(--zen-element-separation) * 2) !important;
+      }
 
-  #navigator-toolbox,
-  #navigator-toolbox > * {
-    -moz-appearance: none !important;
-  }
+      #zen-appcontent-navbar-container {
+        position: absolute;
+        top: 0;
+        transform: translateY(calc(-100% + var(--zen-element-separation) + 1px));
+        left: 0;
+        z-index: 10;
+        background: var(--zen-themed-toolbar-bg);
+        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1) !important;
+        border-bottom-left-radius: var(--zen-border-radius);
+        border-bottom-right-radius: var(--zen-border-radius);
+        border: 1px solid var(--zen-colors-border);
+        border-top-width: 0px;
+        transition: all 0.1s ease-in-out;
+        width: 100%;
+        opacity: 0;
 
-  #zen-sidebar-splitter {
-    display: none !important;
-  }
+        :root[tabsintitlebar][sizemode='normal']:not([gtktiledwindow='true']) & {
+          border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
+          border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
+          border-left-width: 0;
+          border-right-width: 0;
+        }
+      }
 
-  /* Don't apply transform before window has been fully created */
-  :root:not([sessionrestored]) #navigator-toolbox {
-    transform: none !important;
-  }
+      #zen-appcontent-navbar-container:hover,
+      #zen-appcontent-navbar-container[zen-has-hover],
+      #zen-appcontent-navbar-container:focus-within,
+      #zen-appcontent-navbar-container[zen-user-show],
+      #zen-appcontent-navbar-container[has-popup-menu],
+      #zen-appcontent-navbar-container:has(*[open='true']) {
+        opacity: 1;
+        border-top-width: 1px;
 
-  :root[customizing] #navigator-toolbox {
-    position: relative !important;
-    transform: none !important;
-    opacity: 1 !important;
-  }
-
-  #navigator-toolbox[inFullscreen] > #PersonalToolbar,
-  #PersonalToolbar[collapsed='true'] {
-    display: none;
-  }
-
-  :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: 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);
-      transition: 0.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']) {
-      transform: translateY(0);
-      opacity: 1;
-    }
-
-    :root:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
-      padding-top: var(--zen-element-separation) !important;
-    }
-
-    #zen-sidebar-web-panel-wrapper {
-      margin-top: 10px !important;
-    }
-  }
-
-  #navigator-toolbox[zen-right-side='true'] {
-    & {
-      right: 0 !important;
-      transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;
-    }
-
-    &:hover,
-    &:focus-within,
-    &[zen-user-show],
-    &[flash-popup],
-    &[movingtab],
-    &:has(.tabbrowser-tab:active),
-    & #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
-    &:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
-      transform: none !important;
-      opacity: 1;
-
-      & > * {
-        pointer-events: all;
+        transform: translateY(-1px);
       }
     }
   }

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

@@ -15,24 +15,105 @@
   flex: 0;
   margin: 0;
 }
+#zen-splitview-dropzone {
+  border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
+  transition: inset ease-out .08s;
+  display: none;
+  background-color: color-mix(in srgb, var(--zen-colors-secondary) 30%, transparent 70%);
+}
+#zen-splitview-dropzone[enabled='true'] {
+  display: initial;
+}
 
-#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'] {
+#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'], #zen-splitview-dropzone {
   flex: 1;
-  margin-right: 5px;
+  margin: calc(var(--zen-split-column-gap) / 2) calc(var(--zen-split-row-gap) / 2);
+  position: absolute !important;
+  overflow: hidden;
 }
 
 #tabbrowser-tabpanels[zen-split-view='true'] > [zen-split-anim='true'] {
-  animation: zen-deck-fadeIn 0.2s forwards;
+  animation: zen-deck-fadeIn 0.2s forwards ease-in-out;
 }
 
-#tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer[zen-split-active='true'] {
+#tabbrowser-tabpanels[zen-split-view='true']:not([zen-split-resizing]) > [zen-split-anim='true'] {
+  transition: inset 0.08s ease-out;
+  & browser {
+    transition: opacity 0.2s ease-out;
+  }
+}
+
+#tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer.deck-selected {
   --uc-tweak-rounded-corners-shadow-color: var(--zen-primary-color) !important;
 }
 
-#tabbrowser-tabpanels:has(> [zen-split='true']) {
-  display: grid;
-  row-gap: var(--zen-element-separation);
-  column-gap: calc(var(--zen-element-separation) / 2);
+#tabbrowser-tabbox {
+  --zen-split-row-gap: calc(var(--zen-element-separation) + 2px);
+  --zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
+}
+
+#tabbrowser-tabpanels:has(> [zen-split='true']), #zen-splitview-overlay {
+  margin-right: calc(var(--zen-element-separation) - var(--zen-split-row-gap)/2);
+  margin-bottom: calc(var(--zen-element-separation) - var(--zen-split-column-gap)/2);
+
+  margin-left: calc(var(--zen-split-row-gap)/-2);
+  margin-top: calc(var(--zen-split-column-gap)/-2);
+
+  @media (-moz-bool-pref: 'zen.view.compact') {
+    :root:not([customizing]) & {
+      @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
+        & {
+          margin-left: 0;
+        }
+      }
+
+      @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
+        & {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+}
+
+#tabbrowser-tabpanels[zen-split-view] {
+  .zen-split-view-splitter {
+    display: inherit;
+  }
+}
+
+#zen-splitview-overlay-wrapper {
+  position: absolute;
+  pointer-events: none;
+  padding: inherit;
+  inset: 0;
+}
+
+#zen-splitview-overlay {
+  position: relative;
+  flex: 1;
+  padding-right: var(--zen-element-separation);
+  padding-bottom: var(--zen-element-separation);
+  z-index: 2;
+}
+
+.zen-split-view-splitter {
+  visibility: inherit;
+  cursor: ew-resize;
+  -moz-subtree-hidden-only-visually: 0;
+  position: absolute;
+  pointer-events: all;
+}
+
+.zen-split-view-splitter[orient='vertical'] {
+  width: var(--zen-split-row-gap);
+  margin-left: calc(var(--zen-split-row-gap) / -2);
+}
+
+.zen-split-view-splitter[orient='horizontal'] {
+  height: var(--zen-split-column-gap);
+  margin-top: calc(var(--zen-split-column-gap) / -2);
+  cursor: n-resize;
 }
 
 #zen-split-views-box:not([hidden='true']) {
@@ -45,22 +126,26 @@
   min-width: 180px;
   min-height: 180px;
 
+  padding: 15px;
+  padding-top: 12px;
+}
+
+#zenSplitViewModifierContent {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
 
-  gap: 10px;
-  padding: 15px;
+  gap: 15px;
 }
 
-#zenSplitViewModifierViewDefault > vbox {
+#zenSplitViewModifierContent > vbox {
   display: flex;
   align-items: center;
   flex-direction: column;
   cursor: pointer;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview {
+#zenSplitViewModifierContent .zen-split-view-modifier-preview {
   border-radius: 5px;
   border: 1px solid var(--zen-colors-border);
   width: 100px;
@@ -71,51 +156,73 @@
   font-weight: 500;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.active {
+#zenSplitViewModifierContent .zen-split-view-modifier-preview.active {
   box-shadow: 0 0 0 2px var(--zen-primary-color);
   border-width: 0px;
 }
 
-#zenSplitViewModifierViewDefault p {
+#zenSplitViewModifierContent p {
   margin-top: 5px;
   margin-bottom: 0;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview box {
-  background-color: var(--zen-colors-secondary);
-  border-radius: 3px;
-  width: 100%;
-  height: 100%;
+#zenSplitViewModifierContent .zen-split-view-modifier-preview {
+  & box {
+    background-color: var(--zen-colors-secondary);
+    border-radius: 3px;
+    width: 100%;
+    height: 100%;
+    transition: .1s;
+  }
+
+  &:hover box {
+    background-color: var(--zen-primary-color);
+  }
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep {
+#zenSplitViewModifierContent .zen-split-view-modifier-preview.hsep {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep box:last-child {
+#zenSplitViewModifierContent .zen-split-view-modifier-preview.hsep box:last-child {
   margin-top: 5px;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.vsep box:last-child {
+#zenSplitViewModifierContent .zen-split-view-modifier-preview.vsep box:last-child {
   margin-left: 5px;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid {
+#zenSplitViewModifierContent .zen-split-view-modifier-preview.grid {
   display: grid;
   grid-template-areas: 'a b' 'c b';
   gap: 5px;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(1) {
+#zenSplitViewModifierContent .zen-split-view-modifier-preview.grid box:nth-child(1) {
   grid-area: a;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(2) {
+#zenSplitViewModifierContent .zen-split-view-modifier-preview.grid box:nth-child(2) {
   grid-area: b;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(3) {
+#zenSplitViewModifierContent .zen-split-view-modifier-preview.grid box:nth-child(3) {
   grid-area: c;
 }
+
+#zenSplitViewModifierHeader {
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 12px;
+}
+
+#zenSplitViewModifierEnabledToast {
+  display: none;
+}
+
+#zenSplitViewModifier:not([has-enabled-realloc])[toast] #zenSplitViewModifierEnabledToast {
+  display: revert;
+}

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

@@ -0,0 +1,54 @@
+
+.zen-theme-picker-gradient {
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+  background: white;
+
+  & .zen-theme-picker-gradient-container {
+    --zen-gradient-picker-padding: 10px;
+    position: absolute;
+    top: var(--zen-gradient-picker-padding);
+    left: var(--zen-gradient-picker-padding);
+    height: calc(100% - 2 * var(--zen-gradient-picker-padding));
+    width: calc(100% - 2 * var(--zen-gradient-picker-padding));
+    display: flex;
+
+    background: color-mix(in srgb, var(--zen-colors-primary) 70%, transparent 30%);
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+
+    backdrop-filter: blur(20px);
+
+    border: 1px solid var(--zen-colors-border);
+
+    & .zen-theme-picker-gradient-color {
+      &[primary='true'] {
+        width: 30px;
+        height: 30px;
+        border-width: 6px;
+      }
+
+      &:not([primary='true']) {
+        width: 20px;
+        height: 20px;
+        border-width: 4px;
+      }
+
+      border-radius: 50%;
+      border-style: solid;
+      border-color: white;
+      background: var(--zen-chosen-color, black);
+
+      transform: translate(-50%, -50%);
+
+      cursor: move;
+      position: absolute;
+
+      transition: transform 0.2s;
+      &[dragging='true'] {
+        transform: scale(1.2) translate(-50%, -50%);
+      }
+    }
+  }
+}

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

@@ -2,6 +2,6 @@ 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]:not([animate='open']) {
   animation: zen-jello-out-animation 0.2s ease-in-out;
 }