Formatted the entire project

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -34,7 +34,7 @@ body:
       label: Reproducible?
       description: Is this issue reproducible on Firefox?
       options:
-        - label: I have checked that this issue cannot be reproduced on Mozilla Firefox.      
+        - label: I have checked that this issue cannot be reproduced on Mozilla Firefox.
   - type: input
     id: version
     attributes:

.github/ISSUE_TEMPLATE/config.yml

@@ -1 +1 @@
-blank_issues_enabled: false
+blank_issues_enabled: false

.github/workflows/alpha.yml

@@ -15,7 +15,6 @@ on:
         type: 'boolean'
 
 jobs:
-
   build-data:
     permissions:
       contents: write
@@ -34,7 +33,7 @@ jobs:
         with:
           submodules: recursive
           token: ${{ secrets.DEPLOY_KEY }}
-          
+
       - name: Install pnpm
         run: npm install -g pnpm
 
@@ -97,7 +96,7 @@ jobs:
 
       - name: Install pnpm
         run: npm install -g pnpm
-        
+
       - name: Get pnpm store directory
         id: pnpm-cache
         shell: bash
@@ -115,7 +114,7 @@ jobs:
         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 }}
-  
+
       - name: Check version
         run: |
           echo "$(pwd)"
@@ -128,7 +127,6 @@ jobs:
             exit 1
           fi
 
-
   source:
     permissions:
       contents: write
@@ -225,7 +223,7 @@ jobs:
     permissions:
       contents: write
     secrets: inherit
-    needs: [build-data] 
+    needs: [build-data]
     with:
       build-version: ${{ needs.build-data.outputs.version }}
 
@@ -344,7 +342,7 @@ jobs:
 
           cp -a ../windows_update_manifest_generic/.  updates/
           cp -a ../windows_update_manifest_specific/.  updates/
-          
+
           cp -a ../macos_update_manifest_aarch64/.  updates/
           cp -a ../macos_update_manifest_x64/.  updates/
 
@@ -430,7 +428,6 @@ jobs:
           # output the version to the file
           echo -n ${{ needs.build-data.outputs.version }} > ./flatpak/version
 
-
       - uses: stefanzweifel/git-auto-commit-action@v4
         with:
           commit_message: '[release]: Update flatpak manifest'
@@ -512,13 +509,13 @@ jobs:
           title: 🚀 Update to version ${{ needs.build-data.outputs.version }}
           body: |
             This PR updates the Zen Browser Flatpak package to version ${{ needs.build-data.outputs.version }}. 
-            
+
             @${{ github.actor }} please review and merge this PR.
           branch: update-to-${{ needs.build-data.outputs.version }}
           base: master
           git-token: ${{ secrets.DEPLOY_KEY }}
           delete-branch: true
-          
+
   release-homebrew:
     if: ${{ github.event.inputs.create_release == 'true' }}
     permissions: write-all
@@ -531,14 +528,14 @@ jobs:
         uses: actions/checkout@v4
         with:
           token: ${{ secrets.DEPLOY_KEY }}
-    
+
       - name: Setup git
         run: |
           git pull
           git config --global user.name "github-actions[bot]"
           git config --global user.email "github-actions[bot]@users.noreply.github.com"
 
-      - name: Download macOS ARM build 
+      - name: Download macOS ARM build
         uses: actions/download-artifact@v4
         with:
           name: zen.macos-aarch64.dmg
@@ -550,9 +547,9 @@ jobs:
 
       - name: Update zen-browser Cask
         run: sh .github/workflows/src/update-homebrew.sh ${{ needs.build-data.outputs.version }}
- 
+
-      - name: Clean up 
+      - name: Clean up
-        run: | 
+        run: |
           rm -rf zen.macos-x64.dmg
           rm -rf zen.macos-aarch64.dmg
 
@@ -562,4 +559,3 @@ jobs:
           commit_message: 🔖 Update version to ${{ steps.data.outputs.version }} for homebrew!
           commit_user_name: Zen Browser Robot
           commit_user_email: zen-browser-bot@users.noreply.github.com
-

.github/workflows/clear-cache.yml

@@ -27,4 +27,4 @@ jobs:
                 cache_id: cache.id,
               })
             }
-            console.log("Clear completed")
+            console.log("Clear completed")

.github/workflows/stale.yml

@@ -1,7 +1,7 @@
 name: Close inactive issues
 on:
   schedule:
-    - cron: "0 0 * * *"
+    - cron: '0 0 * * *'
   workflow_dispatch:
 
 jobs:
@@ -15,7 +15,7 @@ jobs:
         with:
           days-before-issue-stale: 30
           days-before-issue-close: 14
-          stale-issue-label: "stale"
+          stale-issue-label: 'stale'
           stale-issue-message: |
             This issue is stale because it has been open for 30 days with no activity.
 

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

@@ -2,7 +2,7 @@ name: Windows Alpha Build
 on:
   workflow_call:
     inputs:
-      generate-gpo: 
+      generate-gpo:
         required: true
         type: boolean
         default: false
@@ -59,7 +59,7 @@ jobs:
       - name: Download
         run: pnpm surfer download
 
-      - name: "win-cross Cache"
+      - name: 'win-cross Cache'
         env:
           SEGMENT_DOWNLOAD_TIMEOUT_MINS: 5
         id: cache-win-cross
@@ -81,16 +81,16 @@ jobs:
           set -x
           mkdir -p ~/win-cross
           cd engine/
-  
+
           echo Setup wine
           aria2c "https://firefox-ci-tc.services.mozilla.com/api/index/v1/task/gecko.cache.level-1.toolchains.v3.linux64-wine.latest/artifacts/public%2Fbuild%2Fwine.tar.zst" -o wine.tar.zst
           tar --zstd -xvf wine.tar.zst -C ~/win-cross
           rm wine.tar.zst
-  
+
           echo Setup Visual Studio
           sudo apt install -y msitools python3-pip
           ./mach python --virtualenv build taskcluster/scripts/misc/get_vs.py build/vs/vs2022.yaml ~/win-cross/vs2022
-          
+
       - name: Bootstrap
         run: |
           set -x
@@ -113,14 +113,14 @@ jobs:
 
           ls ~/win-cross/wine || true
           ls ~/win-cross/vs2022 || true
-  
+
-      - name: setup Rust 
+      - name: setup Rust
         run: |
           cd engine/
           # Install a rust version compatible with 17
           curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y --default-toolchain 1.79
           source $HOME/.cargo/env
-          
+
           rustup target add x86_64-pc-windows-msvc
           cargo install cargo-download
           cargo download -x windows=0.52.0
@@ -137,7 +137,7 @@ jobs:
 
       - name: Build language packs
         run: sh scripts/download-language-packs.sh
-      
+
       - uses: actions/download-artifact@v4
         name: Download artifact if use profdata
         if: ${{ !inputs.generate-gpo }}
@@ -210,7 +210,7 @@ jobs:
         with:
           name: ${{ matrix.generic == true && 'generic' || 'specific' }}-${{ inputs.profile-data-path-archive }}
           path: ./zen.win64-pgo-stage-1.zip
- 
+
       - name: Upload mar
         uses: actions/upload-artifact@v4
         if: ${{ !inputs.generate-gpo }}

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

@@ -40,18 +40,18 @@ jobs:
         run: |
           npm i -g @zen-browser/surfer
       - uses: actions/download-artifact@v4
-        name: Download artifact 
+        name: Download artifact
         with:
           path: C:\artifact
           name: ${{ matrix.generic == true && 'generic' || 'specific' }}-zen-windows-x86_64-profile-data-and-jarlog.zip
 
-      - name:  Unpack artifact
+      - name: Unpack artifact
         run: |
           cd C:\artifact
           ls
           Expand-Archive -Path .\${{ inputs.profile-data-path-archive }} -DestinationPath C:\artifact
           ls
-      - name: Setup 
+      - name: Setup
         run: |
           (New-Object System.Net.WebClient).DownloadFile("https://ftp.mozilla.org/pub/mozilla/libraries/win32/MozillaBuildSetup-Latest.exe","C:\MozillaBuildSetup-Latest.exe")
           C:\MozillaBuildSetup-Latest.exe /S | out-null
@@ -59,7 +59,7 @@ jobs:
         run: |
           git config --global core.safecrlf false  
           pnpm surfer download
-      - name: Generate 
+      - name: Generate
         run: |
           ls
           $Env:USE_MINTTY = "0"
@@ -72,7 +72,7 @@ jobs:
           echo 'ls /c/Users/runneradmin/.mozbuild/clang/bin' '' >> mozilla-build-run.sh
           echo 'LLVM_PROFDATA=/c/Users/runneradmin/.mozbuild/clang/bin/llvm-profdata.exe JARLOG_FILE=en-US.log ./mach python build/pgo/profileserver.py --binary /c/artifact/zen/zen.exe' '' >> mozilla-build-run.sh
           C:\mozilla-build\start-shell.bat $workspace_dir_current\mozilla-build-run.sh
-          
+
       - name: 🐛 Debug Session
         if: ${{ failure() }}
         uses: Warpbuilds/gha-debug@v1.3
@@ -91,4 +91,4 @@ jobs:
           path: |
             merged.profdata
             en-US.log
-          name: windows-profdata-${{ matrix.generic == true && 'generic' || 'specific' }}
+          name: windows-profdata-${{ matrix.generic == true && 'generic' || 'specific' }}

.vscode/settings.json

@@ -19,4 +19,4 @@
     "span": "cpp",
     "vector": "cpp"
   }
-}
+}

AppDir/distribution/policies.json

@@ -1,8 +1,8 @@
 {
   "policies": {
-   "DisableAppUpdate": true,
+    "DisableAppUpdate": true,
-   "AppAutoUpdate": false,
+    "AppAutoUpdate": false,
-   "ManualAppUpdateOnly": true,
+    "ManualAppUpdateOnly": true,
-   "BackgroundAppUpdate": false
+    "BackgroundAppUpdate": false
   }
- }
+}

docs/changes.md

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

docs/key-shortcuts.md

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

docs/requirements.md

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

docs/side-panels.md

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

docs/workspaces.md

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

l10n

@@ -1 +1 @@
-Subproject commit 7cd3067c878cbe7e6e8b91ac60189046fc3e0ef6
+Subproject commit 70a7e447b145c163f94728ca20a55ef4b0a50403

src/browser/base/content/ZenStartup.mjs

@@ -1,4 +1,3 @@
-
 var ZenStartup = {
   init() {
     this._changeSidebarLocation();
@@ -12,23 +11,21 @@ var ZenStartup = {
     if (this.__hasInitBrowserLayout) return;
     this.__hasInitBrowserLayout = true;
     this.openWatermark();
-    console.info("ZenThemeModifier: init browser layout");
+    console.info('ZenThemeModifier: init browser layout');
-    const kNavbarItems = [
+    const kNavbarItems = ['nav-bar', 'PersonalToolbar'];
-      "nav-bar",
+    const kNewContainerId = 'zen-appcontent-navbar-container';
-      "PersonalToolbar"
-    ];
-    const kNewContainerId = "zen-appcontent-navbar-container";
     let newContainer = document.getElementById(kNewContainerId);
     for (let id of kNavbarItems) {
       const node = document.getElementById(id);
-      console.assert(node, "Could not find node with id: " + id);
+      console.assert(node, 'Could not find node with id: ' + id);
       if (!node) continue;
       newContainer.appendChild(node);
     }
 
     // Fix notification deck
-    document.getElementById("zen-appcontent-navbar-container")
+    document
-      .appendChild(document.getElementById("tab-notification-deck-template"));
+      .getElementById('zen-appcontent-navbar-container')
+      .appendChild(document.getElementById('tab-notification-deck-template'));
 
     // Disable smooth scroll
     gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
@@ -39,39 +36,37 @@ var ZenStartup = {
 
     function throttle(f, delay) {
       let timer = 0;
-      return function(...args) {
+      return function (...args) {
-          clearTimeout(timer);
+        clearTimeout(timer);
-          timer = setTimeout(() => f.apply(this, args), delay);
+        timer = setTimeout(() => f.apply(this, args), delay);
-      }
+      };
     }
 
-    new ResizeObserver(throttle(
+    new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), 1000)).observe(document.getElementById('tabbrowser-tabs'));
-      this._updateTabsToolbar.bind(this), 1000
-    )).observe(document.getElementById("tabbrowser-tabs"));
 
     this.closeWatermark();
   },
 
   _updateTabsToolbar() {
     // Set tabs max-height to the "toolbar-items" height
-    const toolbarItems = document.getElementById("tabbrowser-tabs");
+    const toolbarItems = document.getElementById('tabbrowser-tabs');
-    const tabs = document.getElementById("tabbrowser-arrowscrollbox");
+    const tabs = document.getElementById('tabbrowser-arrowscrollbox');
     tabs.style.maxHeight = '0px'; // reset to 0
     const toolbarRect = toolbarItems.getBoundingClientRect();
     // -5 for the controls padding
     let totalHeight = toolbarRect.height - 15;
     // remove the height from other elements that aren't hidden
-    const otherElements = document.querySelectorAll("#tabbrowser-tabs > *:not([hidden=\"true\"])");
+    const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
     for (let tab of otherElements) {
       if (tabs === tab) continue;
       totalHeight -= tab.getBoundingClientRect().height;
     }
-    tabs.style.maxHeight = totalHeight + "px";
+    tabs.style.maxHeight = totalHeight + 'px';
-    console.info("ZenThemeModifier: set tabs max-height to", totalHeight + "px");
+    console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
   },
 
   openWatermark() {
-    if (!Services.prefs.getBoolPref("zen.watermark.enabled", false)) {
+    if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
       return;
     }
     const watermark = window.MozXULElement.parseXULToFragment(`
@@ -83,50 +78,47 @@ var ZenStartup = {
   },
 
   closeWatermark() {
-    const watermark = document.getElementById("zen-watermark");
+    const watermark = document.getElementById('zen-watermark');
     if (watermark) {
-      watermark.setAttribute("hidden", "true");
+      watermark.setAttribute('hidden', 'true');
     }
   },
 
   _changeSidebarLocation() {
-    const legacyLocation = Services.prefs.getBoolPref("zen.themes.tabs.legacy-location", false);
+    const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false);
-    const kElementsToAppend = [
+    const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
-      "sidebar-splitter",
-      "sidebar-box",
-    ];
     if (legacyLocation) {
-      kElementsToAppend.push("navigator-toolbox");
+      kElementsToAppend.push('navigator-toolbox');
-      window.document.documentElement.setAttribute("zen-sidebar-legacy", "true");
+      window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true');
     }
-    const wrapper = document.getElementById("zen-tabbox-wrapper");
+    const wrapper = document.getElementById('zen-tabbox-wrapper');
-    const appWrapepr = document.getElementById("zen-sidebar-box-container");
+    const appWrapepr = document.getElementById('zen-sidebar-box-container');
     for (let id of kElementsToAppend) {
       const elem = document.getElementById(id);
       if (elem) {
         wrapper.prepend(elem);
       }
     }
-    appWrapepr.setAttribute("hidden", "true");
+    appWrapepr.setAttribute('hidden', 'true');
 
-    const browser = document.getElementById("browser")
+    const browser = document.getElementById('browser');
-    const toolbox = document.getElementById("navigator-toolbox");
+    const toolbox = document.getElementById('navigator-toolbox');
     if (!legacyLocation) {
       browser.prepend(toolbox);
     }
 
     // remove all styles except for the width, since we are xulstoring the complet style list
     const width = toolbox.style.width;
-    toolbox.removeAttribute("style");
+    toolbox.removeAttribute('style');
     toolbox.style.width = width;
 
     // Set a splitter to navigator-toolbox
-    const splitter = document.createXULElement("splitter");
+    const splitter = document.createXULElement('splitter');
-    splitter.setAttribute("id", "zen-sidebar-splitter");
+    splitter.setAttribute('id', 'zen-sidebar-splitter');
-    splitter.setAttribute("orient", "horizontal");
+    splitter.setAttribute('orient', 'horizontal');
-    splitter.setAttribute("resizebefore", "sibling");
+    splitter.setAttribute('resizebefore', 'sibling');
-    splitter.setAttribute("resizeafter", "none");
+    splitter.setAttribute('resizeafter', 'none');
-    toolbox.insertAdjacentElement("afterend", splitter);
+    toolbox.insertAdjacentElement('afterend', splitter);
   },
 
   _focusSearchBar() {

src/browser/base/content/ZenUIManager.mjs

@@ -1,4 +1,3 @@
-
 var gZenUIManager = {
   openAndChangeToTab(url, options) {
     if (window.ownerGlobal.parent) {
@@ -12,11 +11,11 @@ var gZenUIManager = {
   },
 
   generateUuidv4() {
-    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
+    return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
-      (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+      (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16)
     );
   },
-  
+
   toogleBookmarksSidebar() {
     const button = document.getElementById('zen-bookmark-button');
     SidebarController.toggle('viewBookmarksSidebar', button);
@@ -24,7 +23,7 @@ var gZenUIManager = {
 
   createValidXULText(text) {
     return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-  }
+  },
 };
 
 var gZenVerticalTabsManager = {
@@ -55,7 +54,7 @@ var gZenVerticalTabsManager = {
                 ${Services.prefs.getBoolPref(kConfigKey) ? 'checked="true"' : ''}
                 data-lazy-l10n-id="zen-toolbar-context-tabs-right"/>
     `);
-    fragment.getElementById("zen-toolbar-context-tabs-right").addEventListener('click', () => {
+    fragment.getElementById('zen-toolbar-context-tabs-right').addEventListener('click', () => {
       let rightSide = Services.prefs.getBoolPref(kConfigKey);
       Services.prefs.setBoolPref(kConfigKey, !rightSide);
     });
@@ -156,21 +155,18 @@ var gZenCompactModeManager = {
     if (this._flashSidebarTimeout) {
       clearTimeout(this._flashSidebarTimeout);
     } else {
-      window.requestAnimationFrame(() =>
+      window.requestAnimationFrame(() => sidebar.setAttribute('flash-popup', ''));
-          sidebar.setAttribute('flash-popup', '')
-      );
     }
-    this._flashSidebarTimeout =
+    this._flashSidebarTimeout = setTimeout(() => {
-        setTimeout(() => {
+      window.requestAnimationFrame(() => {
-          window.requestAnimationFrame(() => {
+        sidebar.removeAttribute('flash-popup');
-            sidebar.removeAttribute('flash-popup')
+        this._flashSidebarTimeout = null;
-            this._flashSidebarTimeout = null;
+      });
-          });
+    }, this.flashSidebarDuration);
-        }, this.flashSidebarDuration);
   },
 
   toggleToolbar() {
     let toolbar = document.getElementById('zen-appcontent-navbar-container');
     toolbar.toggleAttribute('zen-user-show');
-  }
+  },
 };

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

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

src/browser/base/content/zen-components

@@ -1 +1 @@
-Subproject commit 1ae97170ea111ac86debedefbf7fce25a397bfb0
+Subproject commit bdcc6a8c9784a56912f354e0d0beb151664ee688

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

@@ -1,4 +1,3 @@
-
 @keyframes zen-jello-animation {
   0% {
     transform: scale3d(0.8, 0.8, 0.8);

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

@@ -1,5 +1,4 @@
-
+:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
-:root:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not([chromehidden~="toolbar"]) {
   & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
     width: -moz-available;
     box-shadow: 0 0 0 1px var(--zen-colors-border);

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

@@ -1,4 +1,3 @@
- 
 #browser,
 #appcontent,
 #tabbrowser-tabpanels {
@@ -20,11 +19,11 @@
   width: 100%;
 }
 
-:not([inDOMFullscreen="true"]) #appcontent {
+:not([inDOMFullscreen='true']) #appcontent {
   overflow: hidden;
 }
 
-:not([inDOMFullscreen="true"]) #appcontent,
+:not([inDOMFullscreen='true']) #appcontent,
 #sidebar-box {
   /** Sidebar is already hidden in full screen mode */
   border: none;

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

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

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

@@ -1,16 +1,17 @@
-
 /* All overrides for compact mode go here */
 
-@media not (-moz-bool-pref: "zen.view.compact") {
+@media not (-moz-bool-pref: 'zen.view.compact') {
   #sidebar-box {
     margin-top: 0 !important;
   }
 }
 
-@media (-moz-bool-pref: "zen.view.compact") {
+@media (-moz-bool-pref: 'zen.view.compact') {
-  :root[sizemode="fullscreen"],
+  :root[sizemode='fullscreen'],
-  #navigator-toolbox[inFullscreen]{ margin-top: 0 !important; }
+  #navigator-toolbox[inFullscreen] {
-  
+    margin-top: 0 !important;
+  }
+
   #navigator-toolbox {
     --zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2);
     --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single);
@@ -34,33 +35,34 @@
     }
 
     & > * {
-      pointer-events: none;  
+      pointer-events: none;
     }
 
-    &, & #titlebar {
+    &,
+    & #titlebar {
       min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 4) !important;
     }
   }
 
-  @media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
+  @media not (-moz-bool-pref: 'zen.view.sidebar-expanded') {
     #navigator-toolbox {
       width: fit-content !important;
     }
   }
 
-  @media (-moz-bool-pref: "zen.view.sidebar-expanded") {
+  @media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
     #navigator-toolbox {
       min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important;
     }
   }
 
-  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden="true"])),
+  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden='true'])),
-  #sidebar-box:not([positionend="true"]) {
+  #sidebar-box:not([positionend='true']) {
     margin-right: 0 !important;
     margin-left: var(--zen-sidebar-web-panel-spacing) !important;
   }
 
-  #sidebar-box[positionend="true"] {
+  #sidebar-box[positionend='true'] {
     margin-left: 0 !important;
     margin-right: var(--zen-sidebar-web-panel-spacing) !important;
   }
@@ -69,7 +71,7 @@
     margin: 0 !important;
   }
 
-  @media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
+  @media not (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
     #navigator-toolbox {
       /* Remove the top margin */
       /* The toolbox isn't relative to the webview anymore, meaning we can't just add a static value and call it a day... 
@@ -79,10 +81,17 @@
        *  3. Add element separation variable, to avoid overlaping with the toolbar
        *  4. Calculate toolbar height, taken from zen-urlbar.css
        */
-      --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) + .15rem + var(--zen-element-separation) + (18px + (var(--toolbarbutton-inner-padding) * 2))) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
+      --zen-compact-toolbox-margin: calc(
-    
+          var(--zen-compact-toolbox-margin-single) + 0.15rem + var(--zen-element-separation) +
-      :root[zen-sidebar-legacy="true"] & {
+            (18px + (var(--toolbarbutton-inner-padding) * 2))
-        --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);
+        )
+        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);
       }
     }
 
@@ -91,7 +100,7 @@
       margin-top: 0 !important;
     }
   }
-  
+
   #navigator-toolbox:hover,
   #navigator-toolbox:focus-within,
   #navigator-toolbox[zen-user-show],
@@ -99,46 +108,52 @@
   #navigator-toolbox[movingtab],
   #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
   #navigator-toolbox:has(.tabbrowser-tab:active),
-  #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
+  #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
     transform: none !important;
     opacity: 1;
 
     & > * {
-      pointer-events: all;  
+      pointer-events: all;
     }
   }
-  
+
-  #navigator-toolbox > *{ line-height: normal; }
+  #navigator-toolbox > * {
-  
+    line-height: normal;
+  }
+
   #navigator-toolbox,
-  #navigator-toolbox > *{
+  #navigator-toolbox > * {
     -moz-appearance: none !important;
   }
 
   #zen-sidebar-splitter {
     display: none !important;
   }
-  
+
   /* Don't apply transform before window has been fully created */
-  :root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }
+  :root:not([sessionrestored]) #navigator-toolbox {
-  
+    transform: none !important;
-  :root[customizing] #navigator-toolbox{
+  }
+
+  :root[customizing] #navigator-toolbox {
     position: relative !important;
     transform: none !important;
     opacity: 1 !important;
   }
-  
-  #navigator-toolbox[inFullscreen] > #PersonalToolbar,
-  #PersonalToolbar[collapsed="true"]{ display: none }
 
-  :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels {
+  #navigator-toolbox[inFullscreen] > #PersonalToolbar,
+  #PersonalToolbar[collapsed='true'] {
+    display: none;
+  }
+
+  :root:not([inDOMFullscreen='true']) #tabbrowser-tabbox #tabbrowser-tabpanels {
     padding-left: var(--zen-element-separation) !important;
   }
 
-  @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
+  @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
     #zen-appcontent-navbar-container {
       --urlbar-height: unset;
-      transition: .2s ease-in-out;
+      transition: 0.2s ease-in-out;
       transform: translateY(calc(-100% + var(--zen-element-separation)));
       opacity: 0;
       position: absolute;
@@ -149,7 +164,7 @@
       top: 0;
       background: var(--zen-colors-tertiary);
       z-index: 2;
-      transition: .2s ease-in-out;
+      transition: 0.2s ease-in-out;
     }
 
     #zen-appcontent-navbar-container:hover,
@@ -157,12 +172,12 @@
     #zen-appcontent-navbar-container:active,
     #zen-appcontent-navbar-container[zen-user-show],
     #mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container,
-    #zen-appcontent-navbar-container:has(*[open="true"]) {
+    #zen-appcontent-navbar-container:has(*[open='true']) {
       transform: translateY(0);
       opacity: 1;
     }
 
-    :root:not([inDOMFullscreen="true"]) #tabbrowser-tabpanels {
+    :root:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
       padding-top: var(--zen-element-separation) !important;
     }
 
@@ -175,10 +190,10 @@
     }
   }
 
-  @media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
+  @media (-moz-bool-pref: 'zen.tabs.vertical.right-side') {
     #navigator-toolbox {
       right: 0 !important;
-      transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;;
+      transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;
     }
 
     #navigator-toolbox > vbox {
@@ -192,12 +207,12 @@
     #navigator-toolbox[movingtab],
     #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
     #navigator-toolbox:has(.tabbrowser-tab:active),
-    #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
+    #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
       transform: none !important;
       opacity: 1;
-  
+
       & > * {
-        pointer-events: all;  
+        pointer-events: all;
       }
     }
   }

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

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

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

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

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

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

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

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

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

@@ -4,4 +4,4 @@
 
 .printSettingsBrowser {
   min-width: 350px;
-}
+}

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

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

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

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

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

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

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

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

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

@@ -5,39 +5,39 @@
  */
 
 :root {
-  --sidebar-background-color: var(--toolbar-bgcolor) !important; 
+  --sidebar-background-color: var(--toolbar-bgcolor) !important;
   --zen-sidebar-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
 #sidebar-box {
-  --zen-sidebar-box-border-radius: var(--zen-panel-radius);  
+  --zen-sidebar-box-border-radius: var(--zen-panel-radius);
   margin: var(--zen-element-separation);
   border-radius: var(--zen-sidebar-box-border-radius);
   overflow: hidden;
-  transition: .2s;
+  transition: 0.2s;
   margin-left: 0;
   border: var(--zen-appcontent-border);
   box-shadow: none;
   margin-top: 0;
-}   
+}
 
-#sidebar-box[hidden="true"] {
+#sidebar-box[hidden='true'] {
   width: 0;
   opacity: 0;
 }
 
-#sidebar-box:not([positionend="true"]) {
+#sidebar-box:not([positionend='true']) {
   margin-right: 0;
 }
 
-#zen-main-app-wrapper:has(#sidebar-box:not([hidden="true"], [positionend="true"])) #TabsToolbar {
+#zen-main-app-wrapper:has(#sidebar-box:not([hidden='true'], [positionend='true'])) #TabsToolbar {
   margin-right: 0 !important;
   box-shadow: none !important;
 }
 
 #sidebar-splitter {
   /* we can still use the splitter but we can't see it */
-  background: transparent !important;  
+  background: transparent !important;
   border-color: transparent !important;
   width: 1px !important;
   margin-right: 5px;
@@ -82,7 +82,7 @@
   background: transparent !important;
 }
 
-#sidebar-box[hidden="true"] .zen-sidebar-action-button,
+#sidebar-box[hidden='true'] .zen-sidebar-action-button,
 .zen-sidebar-panel-button[animate] {
   opacity: 0;
   transform: translateX(-110%);
@@ -103,11 +103,11 @@
 /* Icons */
 
 #zen-preferences-button {
-  list-style-image: url("chrome://global/skin/icons/settings.svg");
+  list-style-image: url('chrome://global/skin/icons/settings.svg');
 }
 
 #zen-history-button {
-  list-style-image: url("chrome://browser/skin/history.svg");
+  list-style-image: url('chrome://browser/skin/history.svg');
 }
 
 #zen-bookmark-button {
@@ -138,16 +138,46 @@
 
 /* Ugly code */
 
-#TabsToolbar .zen-sidebar-action-button:nth-child(1),  .zen-sidebar-panel-button:nth-child(1) { animation-delay: 0.1s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(1),
-#TabsToolbar .zen-sidebar-action-button:nth-child(2),  .zen-sidebar-panel-button:nth-child(2) { animation-delay: 0.2s; }
+.zen-sidebar-panel-button:nth-child(1) {
-#TabsToolbar .zen-sidebar-action-button:nth-child(3),  .zen-sidebar-panel-button:nth-child(3) { animation-delay: 0.3s; }
+  animation-delay: 0.1s;
-#TabsToolbar .zen-sidebar-action-button:nth-child(4),  .zen-sidebar-panel-button:nth-child(4) { animation-delay: 0.4s; }
+}
-#TabsToolbar .zen-sidebar-action-button:nth-child(5),  .zen-sidebar-panel-button:nth-child(5) { animation-delay: 0.5s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(2),
-#TabsToolbar .zen-sidebar-action-button:nth-child(6),  .zen-sidebar-panel-button:nth-child(6) { animation-delay: 0.6s; }
+.zen-sidebar-panel-button:nth-child(2) {
-#TabsToolbar .zen-sidebar-action-button:nth-child(7),  .zen-sidebar-panel-button:nth-child(7) { animation-delay: 0.7s; }
+  animation-delay: 0.2s;
-#TabsToolbar .zen-sidebar-action-button:nth-child(8),  .zen-sidebar-panel-button:nth-child(8) { animation-delay: 0.8s; }
+}
-#TabsToolbar .zen-sidebar-action-button:nth-child(9),  .zen-sidebar-panel-button:nth-child(9) { animation-delay: 0.9s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(3),
-#TabsToolbar .zen-sidebar-action-button:nth-child(10), .zen-sidebar-panel-button:nth-child(10) { animation-delay: 1s; }
+.zen-sidebar-panel-button:nth-child(3) {
+  animation-delay: 0.3s;
+}
+#TabsToolbar .zen-sidebar-action-button:nth-child(4),
+.zen-sidebar-panel-button:nth-child(4) {
+  animation-delay: 0.4s;
+}
+#TabsToolbar .zen-sidebar-action-button:nth-child(5),
+.zen-sidebar-panel-button:nth-child(5) {
+  animation-delay: 0.5s;
+}
+#TabsToolbar .zen-sidebar-action-button:nth-child(6),
+.zen-sidebar-panel-button:nth-child(6) {
+  animation-delay: 0.6s;
+}
+#TabsToolbar .zen-sidebar-action-button:nth-child(7),
+.zen-sidebar-panel-button:nth-child(7) {
+  animation-delay: 0.7s;
+}
+#TabsToolbar .zen-sidebar-action-button:nth-child(8),
+.zen-sidebar-panel-button:nth-child(8) {
+  animation-delay: 0.8s;
+}
+#TabsToolbar .zen-sidebar-action-button:nth-child(9),
+.zen-sidebar-panel-button:nth-child(9) {
+  animation-delay: 0.9s;
+}
+#TabsToolbar .zen-sidebar-action-button:nth-child(10),
+.zen-sidebar-panel-button:nth-child(10) {
+  animation-delay: 1s;
+}
 
 #zen-sidebar-icons-wrapper toolbarbutton {
   position: relative;
@@ -164,12 +194,12 @@
   min-height: fit-content;
   --zen-sidebar-action-content-separator: calc(10px + var(--zen-tabbrowser-padding));
   padding-top: var(--zen-sidebar-action-content-separator);
-  margin-top:  var(--zen-sidebar-action-content-separator);
+  margin-top: var(--zen-sidebar-action-content-separator);
   color-scheme: inherit !important;
 }
 
 #zen-sidebar-icons-wrapper::before {
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   left: 50%;
@@ -179,7 +209,7 @@
   background: var(--zen-colors-border);
 }
 
-#zen-sidepanel-button[hidden="true"] {
+#zen-sidepanel-button[hidden='true'] {
   display: none;
 }
 
@@ -187,17 +217,17 @@
   display: none;
 }
 
-:root:not([inDOMFullscreen="true"]) #zen-sidebar-splitter {
+:root:not([inDOMFullscreen='true']) #zen-sidebar-splitter {
   display: block;
   width: 1px;
   opacity: 0;
 }
 
-:root[inDOMFullscreen="true"] #zen-sidebar-splitter {
+:root[inDOMFullscreen='true'] #zen-sidebar-splitter {
   display: none;
 }
 
-@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
+@media not (-moz-bool-pref: 'zen.view.sidebar-expanded') {
   #navigator-toolbox {
     width: 0;
     padding-right: 2px;
@@ -208,12 +238,12 @@
   }
 }
 
-@media (-moz-bool-pref: "zen.view.sidebar-expanded.show-button") {
+@media (-moz-bool-pref: 'zen.view.sidebar-expanded.show-button') {
   #zen-expand-sidebar-button {
     display: flex;
   }
 }
- 
+
-:root:is([chromehidden~="location"], [chromehidden~="toolbar"]) #navigator-toolbox {
+:root:is([chromehidden~='location'], [chromehidden~='toolbar']) #navigator-toolbox {
   display: none !important;
 }

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

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

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

@@ -1,7 +1,6 @@
-
 /* Styles for both vertical and horizontal tabs */
-@import url("chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css");
+@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');
-@import url("chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css");
+@import url('chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css');
 
 #zen-tabbox-wrapper {
   position: relative;

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

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

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

@@ -1,5 +1,4 @@
-
+@media (-moz-bool-pref: 'zen.tabs.vertical') {
-@media (-moz-bool-pref: "zen.tabs.vertical") {
   #titlebar {
     height: 100%;
   }
@@ -27,7 +26,7 @@
     padding-top: 0 !important;
 
     --zen-sidebar-action-button-width: 35px;
-    :root[uidensity="compact"] & {
+    :root[uidensity='compact'] & {
       --zen-sidebar-action-button-width: 30px;
     }
 
@@ -57,7 +56,7 @@
       }
     }
   }
-  
+
   #navigator-toolbox {
     --zen-tabbrowser-padding: 5px;
     margin-top: 0; /* Issue #156 */
@@ -67,19 +66,19 @@
   #zen-sidebar-splitter {
     order: 0 !important;
   }
-  
+
   #navigator-toolbox {
     margin-top: 0 !important;
   }
-  
+
-  #zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state="dragging"])) #navigator-toolbox {
+  #zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state='dragging'])) #navigator-toolbox {
-    transition: .3s;
+    transition: 0.3s;
   }
-  
+
   #navigator-toolbox toolbar#TabsToolbar {
     margin: var(--zen-appcontent-separator-from-window);
     overflow: hidden;
-    transition: .2s;
+    transition: 0.2s;
     flex-direction: column;
     padding: 5px 0;
     margin-right: 0;
@@ -87,54 +86,54 @@
     --zen-sidebar-action-button-width: 38px;
     padding-bottom: calc(5px + 5px); /* Taking into consideration the padding of the sidebar without being inlined */
 
-    :root[zen-sidebar-legacy="true"] & {
+    :root[zen-sidebar-legacy='true'] & {
       padding-top: 0 !important;
     }
   }
-  
+
   #TabsToolbar-customization-target {
     flex-direction: column;
     max-width: 100%;
   }
-  
+
   :root[customizing] .customization-target:not(#widget-overflow-fixed-list) {
     min-width: 0;
   }
-  
+
   toolbarpaletteitem {
     justify-content: center;
   }
-  
+
   toolbarbutton#scrollbutton-down,
   toolbarbutton#scrollbutton-up {
     display: none;
   }
-  
+
   #toolbar-menubar {
     display: none;
   }
-  
+
   .tab-label-container {
     display: none;
   }
-  
+
   .tab-icon-stack > .tab-icon-image,
   .tab-icon-stack > .tab-throbber {
     width: var(--zen-browser-tab-icon-size);
     height: var(--zen-browser-tab-icon-size);
     margin-inline-end: 0;
   }
-  
+
   .tab-icon-stack .tab-icon-image {
     transform: scale(0.5);
     opacity: 0;
     animation: zen-zoom-in 0.12s ease-in-out 0.3s forwards;
   }
-  
+
   .tab-background {
     display: none;
   }
-  
+
   .tabbrowser-tab {
     --zen-browser-tab-icon-size: 16px;
     --tab-min-width: 36px;
@@ -149,32 +148,34 @@
     min-height: var(--tab-min-width); /* Make a box */
     animation: zen-slide-in 0.3s;
     width: calc(var(--zen-browser-tab-icon-size) + 2px);
-    transition: .1s background, .1s border-color;
+    transition:
+      0.1s background,
+      0.1s border-color;
     min-width: var(--tab-min-width);
     display: flex;
     justify-content: center;
     align-items: center;
   }
-  
+
-  @media (-moz-bool-pref: "zen.tabs.dim-pending") {
+  @media (-moz-bool-pref: 'zen.tabs.dim-pending') {
     .tabbrowser-tab[pending]:not(:hover) {
       opacity: 0.5;
     }
   }
-  
+
-  .tabbrowser-tab[hidden="true"] {
+  .tabbrowser-tab[hidden='true'] {
     display: none;
   }
-  
+
   .tabbrowser-tab:hover {
     background: var(--toolbarbutton-hover-background);
   }
-  
+
   .tabbrowser-tab:active,
   .zen-sidebar-panel-button:active {
     transform: scale(0.9);
   }
-  
+
   .tab-stack {
     width: 30px;
     height: 30px;
@@ -185,20 +186,21 @@
     align-items: center;
     justify-content: center;
   }
-  
+
   .tabbrowser-tab:not([fadein]) {
     display: none;
   }
-  
+
-  .tabbrowser-tab:is([multiselected="true"], [selected]) {
+  .tabbrowser-tab:is([multiselected='true'], [selected]) {
     background: var(--toolbarbutton-hover-background);
   }
-  
+
   #private-browsing-indicator-with-label {
     display: none;
   }
-  
+
-  .tabbrowser-tab::after {/* Containers */
+  .tabbrowser-tab::after {
+    /* Containers */
     background: var(--identity-tab-color, transparent);
     border-radius: 2px;
     height: 80%;
@@ -210,30 +212,30 @@
     content: '';
     pointer-events: none;
   }
-  
+
   .tabbrowser-tab {
     margin-inline-start: 0;
     margin: 0 auto;
     margin-bottom: 1.5px;
   }
-  
+
   .tabbrowser-tab[pinned] {
     position: relative;
     display: flex;
   }
-  
+
   .tab-close-button {
     position: absolute;
     display: none;
     left: 0;
     top: 50%;
   }
-  
+
-  .tabbrowser-tab[open="true"]:hover .tab-close-button {
+  .tabbrowser-tab[open='true']:hover .tab-close-button {
     /* TODO: fix this */
     /*display: block;*/
   }
-  
+
   .tab-content {
     padding: 0;
     width: fit-content;
@@ -242,20 +244,20 @@
       padding: 0 !important;
     }
   }
-  
+
   .toolbar-items > toolbartabstop:first-child {
     display: none;
   }
-  
+
   #nav-bar > *:not(.titlebar-buttonbox-container) {
     padding-top: 5px;
     padding-bottom: 5px;
   }
-  
+
   #TabsToolbar-customization-target {
     height: 100%;
   }
-  
+
   #tabbrowser-tabs {
     margin-inline-start: 0;
     padding-inline-start: 0;
@@ -272,15 +274,15 @@
 
     grid-gap: 0 !important;
   }
-  
+
   #tabbrowser-arrowscrollbox {
     margin-bottom: 3px !important;
   }
-  
+
   #alltabs-button stack {
     transform: rotate(-90deg);
   }
-  
+
   .tab-icon-overlay {
     margin-inline-end: 0 !important;
     display: none; /* TODO: fix this */
@@ -290,30 +292,31 @@
     margin-inline-end: 0 !important;
   }
 
-  @media (-moz-bool-pref: "zen.view.sidebar-collapsed.hide-mute-button") and (not (-moz-bool-pref: "zen.view.sidebar-expanded")) {
+  @media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') and (not (-moz-bool-pref: 'zen.view.sidebar-expanded')) {
     .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
       display: none;
     }
   }
 
-  @media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") {  
+  @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') {
-    :root:not([zen-sidebar-legacy="true"]) #navigator-toolbox:is([zen-user-hover="true"]:hover, :not([zen-user-hover="true"])) {
+    :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) {
       padding-right: 47px !important;
     }
   }
-  
+
-  @media (-moz-bool-pref: "zen.view.sidebar-expanded") {  
+  @media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
     #navigator-toolbox:is(
-        #navigator-toolbox[zen-user-hover="true"]:hover,
+        #navigator-toolbox[zen-user-hover='true']:hover,
-        #navigator-toolbox[zen-user-hover="true"]:focus-within,
+        #navigator-toolbox[zen-user-hover='true']:focus-within,
-        #mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox,
+        #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
-        #navigator-toolbox[zen-user-hover="true"]:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)), 
+        #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
-      :not([zen-user-hover="true"])) {
+        :not([zen-user-hover='true'])
+      ) {
       --zen-hover-animation: zen-sidebar-panel-animation-2;
       --zen-navigation-toolbar-min-width: 155px;
       min-width: var(--zen-navigation-toolbar-min-width) !important;
       align-items: start;
-      transition: .2s;
+      transition: 0.2s;
       width: 170px;
       border: none;
       padding-left: 2px;
@@ -322,7 +325,7 @@
       #vertical-pinned-tabs-container {
         margin-left: var(--zen-tabbrowser-padding);
       }
-    
+
       #newtab-button-container {
         margin: calc(var(--zen-tabbrowser-padding) - 2px);
         margin-bottom: 0;
@@ -339,33 +342,33 @@
           display: block;
         }
       }
-    
+
       & .tab-label-container {
         display: block;
       }
-    
+
       & #titlebar,
       & #TabsToolbar,
       & #TabsToolbar .toolbar-items {
         width: 100%;
         align-items: flex-start;
       }
-    
+
       & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) {
         width: 100% !important;
         border-radius: 8px;
       }
-    
+
       & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button):hover {
         background: var(--button-hover-bgcolor);
       }
-    
+
       & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-text,
       & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-icon,
       & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-badge-stack {
         background: transparent !important;
       }
-    
+
       & #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
         display: flex;
         justify-content: center;
@@ -378,27 +381,26 @@
 
       & .tabbrowser-tab {
         max-width: unset !important;
-    
+
         &:not([pinned]) {
           width: 100%;
-        
+
           &:hover .tab-close-button {
             display: block !important;
           }
-      
+
           & .tab-content {
             position: relative;
             width: 100%;
           }
-          
+
           & .tab-stack {
             justify-content: start;
             padding: 10px;
             width: 100% !important;
           }
-    
+
           & .tab-label-container {
-        
             #tabbrowser-tabs:not([secondarytext-unsupported]) & {
               display: flex;
               align-items: center;
@@ -406,12 +408,12 @@
             }
           }
         }
-    
+
         &:active,
         .zen-sidebar-panel-button:active {
           transform: scale(0.96) !important;
         }
-    
+
         &[pinned] {
           margin: 0 !important;
         }
@@ -425,42 +427,42 @@
         padding: calc(var(--zen-tabbrowser-padding) / 2);
         padding-right: 0;
       }
-    
+
       & .tabbrowser-tab:not([pinned]),
       & #tabbrowser-arrowscrollbox-periphery {
         grid-column: 1 / -1;
       }
-    
+
       & .tabbrowser-tab[pinned] {
         grid-column: span 1;
         min-width: 100%;
       }
-    
+
       & #zen-sidebar-icons-wrapper {
         width: -moz-available;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(37px, 1fr));
-        transition: .1s;
+        transition: 0.1s;
       }
-    
+
       & #zen-sidebar-icons-wrapper::before {
         width: 100%;
       }
     }
   }
 
-  @media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
+  @media not (-moz-bool-pref: 'zen.view.sidebar-expanded') {
     #navigator-toolbox {
       width: fit-content !important;
     }
   }
 
-  #navigator-toolbox[zen-user-hover="true"] {
+  #navigator-toolbox[zen-user-hover='true'] {
     width: fit-content !important;
-  } 
+  }
 
   /* Display the vertical tabs on the right side */
-  @media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) {
+  @media (-moz-bool-pref: 'zen.tabs.vertical.right-side') and (not (-moz-bool-pref: 'zen.view.compact')) {
     #navigator-toolbox {
       order: 8 !important;
       padding-left: 0 !important;
@@ -472,7 +474,7 @@
       padding-right: 0 !important;
     }
 
-    :root:not([zen-sidebar-legacy="true"]) {
+    :root:not([zen-sidebar-legacy='true']) {
       padding: calc(var(--zen-tabbrowser-padding) * 1.5);
     }
 
@@ -486,7 +488,7 @@
     }
   }
 
-  @media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") and (not (-moz-bool-pref: "zen.view.compact")) {
+  @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not (-moz-bool-pref: 'zen.view.compact')) {
     #zen-sidebar-splitter {
       display: none !important;
     }
@@ -495,7 +497,9 @@
       z-index: 1;
     }
 
-    #navigator-toolbox, #titlebar, #TabsToolbar {
+    #navigator-toolbox,
+    #titlebar,
+    #TabsToolbar {
       transition: 0s !important;
     }
 
@@ -521,7 +525,7 @@
     #navigator-toolbox[movingtab],
     #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
     #navigator-toolbox:has(.tabbrowser-tab:active),
-    #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
+    #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
       --zen-navigation-toolbar-min-width: 3.3rem !important;
 
       & #TabsToolbar {
@@ -530,11 +534,16 @@
         background-color: var(--zen-dialog-background);
         border-top-color: var(--zen-colors-border);
         border-right-color: var(--zen-colors-border);
-        padding-right: .1rem !important;
+        padding-right: 0.1rem !important;
         position: absolute;
       }
 
-      #navigator-toolbox:not(&) #TabsToolbar #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-content[class] > .tab-close-button[class] {
+      #navigator-toolbox:not(&)
+        #TabsToolbar
+        #tabbrowser-tabs[closebuttons='activetab']
+        .tabbrowser-tab
+        .tab-content[class]
+        > .tab-close-button[class] {
         display: none !important;
         visibility: hidden !important;
       }
@@ -563,7 +572,7 @@
       }
     }
 
-    @media (-moz-bool-pref: "zen.tabs.vertical.right-side") {      
+    @media (-moz-bool-pref: 'zen.tabs.vertical.right-side') {
       #TabsToolbar {
         border-right: 0 !important;
         border-left: 1px solid transparent;
@@ -578,7 +587,7 @@
       #navigator-toolbox[movingtab],
       #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
       #navigator-toolbox:has(.tabbrowser-tab:active),
-      #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
+      #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
         --zen-navigation-toolbar-min-width: 0 !important;
         position: relative;
         padding: 0 !important;
@@ -589,7 +598,7 @@
       }
     }
 
-    @media not (-moz-bool-pref: "zen.tabs.vertical.right-side") {
+    @media not (-moz-bool-pref: 'zen.tabs.vertical.right-side') {
       #tabbrowser-tabs {
         --zen-tabbrowser-tabs-on-hover-padding: 0 var(--zen-tabbrowser-padding) 0 0 !important;
       }

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

@@ -1,4 +1,3 @@
-
 /* Here, we contain all the theme related variables, for example theme
  * colors, border radius, etc.
  * We have `--zen-border-radius` and `--zen-primary-color` as variables.
@@ -7,7 +6,6 @@
 :host(:is(.anonymous-content-host, notification-message)),
 :root,
 .zenLooksAndFeelColorOption {
-
   /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
   * in the preferences page.
   */
@@ -30,12 +28,12 @@
   --zen-dialog-background: var(--zen-colors-tertiary);
   --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, #f7f7f7 92%);
 
-  --zen-secondary-btn-color: var(--zen-colors-primary-foreground);   
+  --zen-secondary-btn-color: var(--zen-colors-primary-foreground);
 
   --in-content-primary-button-background: light-dark(
     color-mix(in srgb, var(--zen-primary-color) 35%, black 65%),
     color-mix(in srgb, var(--zen-primary-color) 35%, white 65%)
-  ) !important;          
+  ) !important;
   --in-content-primary-button-background-hover: light-dark(
     color-mix(in srgb, var(--zen-primary-color) 40%, black 60%),
     color-mix(in srgb, var(--zen-primary-color) 40%, white 60%)
@@ -58,7 +56,7 @@
     color-mix(in srgb, var(--zen-primary-color) 15%, transparent 85%)
   ) !important;
   --button-bgcolor: var(--in-content-button-background) !important;
-  --button-hover-bgcolor: var(--in-content-button-background-hover) !important;   
+  --button-hover-bgcolor: var(--in-content-button-background-hover) !important;
   --focus-outline-color: var(--button-bgcolor) !important;
   --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
 
@@ -67,13 +65,13 @@
   --button-primary-bgcolor: var(--in-content-primary-button-background) !important;
   --button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
   --button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important;
-  --button-primary-color: var(--in-content-primary-button-text-color) !important;                    
+  --button-primary-color: var(--in-content-primary-button-text-color) !important;
 
   --in-content-page-background: var(--zen-colors-tertiary) !important;
   --zen-in-content-dialog-background: var(--zen-colors-tertiary);
 
   --zen-button-border-radius: 7px;
-  --zen-button-padding: .6rem 1.2rem;
+  --zen-button-padding: 0.6rem 1.2rem;
 
   /* Other colors */
   --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
@@ -120,13 +118,13 @@
     --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-dark-color-mix-base) 80%);
     --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
     --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
-  
+
     --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, var(--zen-dark-color-mix-base) 10%);
     --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
-  
+
     --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
     --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(43, 43, 43) 80%);
-  
+
     --zen-dialog-background: var(--zen-dark-color-mix-base);
     --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%);
 
@@ -134,7 +132,7 @@
   }
 }
 
-@media not (-moz-bool-pref: "zen.theme.toolbar-themed") {
+@media not (-moz-bool-pref: 'zen.theme.toolbar-themed') {
   :root {
     --toolbar-bgcolor: light-dark(white, #1b1b1b) !important;
     --zen-themed-toolbar-bg: var(--toolbar-bgcolor);

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

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

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

@@ -11,7 +11,7 @@
   padding: 1px;
 }
 
-#urlbar[focused="true"][breakout-extend="true"] {
+#urlbar[focused='true'][breakout-extend='true'] {
   overflow: visible;
 }
 
@@ -19,11 +19,11 @@
   border-color: transparent !important;
 }
 
-#urlbar[focused="true"] {
+#urlbar[focused='true'] {
   box-shadow: var(--panel-shadow) !important;
 }
 
-#urlbar[focused="true"]>#urlbar-background {
+#urlbar[focused='true'] > #urlbar-background {
   background: var(--zen-dialog-background) !important;
 }
 
@@ -31,7 +31,7 @@
   border: transparent !important;
 }
 
-#urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background,
+#urlbar[focused='true']:not([suppress-focus-border]) > #urlbar-background,
 #searchbar:focus-within {
   outline: none !important;
   outline-offset: none !important;
@@ -40,18 +40,18 @@
 
 #urlbar .urlbar-page-action,
 #urlbar #tracking-protection-icon-container,
-#urlbar:not([breakout-extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box {
+#urlbar:not([breakout-extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) #identity-icon-box {
   border-radius: 999px;
 }
 
-#urlbar[breakout-extend="true"] .urlbar-page-action,
+#urlbar[breakout-extend='true'] .urlbar-page-action,
-#urlbar[breakout-extend="true"] #tracking-protection-icon-container,
+#urlbar[breakout-extend='true'] #tracking-protection-icon-container,
-#urlbar[breakout-extend="true"] #identity-box #identity-icon-box,
+#urlbar[breakout-extend='true'] #identity-box #identity-icon-box,
 .searchbar-engine-one-off-item {
   border-radius: var(--toolbarbutton-border-radius) !important;
 }
 
-#urlbar[breakout-extend="true"] {
+#urlbar[breakout-extend='true'] {
   border-radius: 12px;
 }
 
@@ -65,7 +65,7 @@
   background: var(--zen-colors-border) !important;
 }
 
-#urlbar:is([focused], [open])>#urlbar-background,
+#urlbar:is([focused], [open]) > #urlbar-background,
 #searchbar:focus-within {
   background: var(--urlbar-box-bgcolor);
 }
@@ -74,23 +74,23 @@
   padding-inline-start: 8px !important;
 }
 
-#identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box {
+#identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
   margin-right: 0 !important;
 }
 
-#urlbar:not([breakout-extend="true"]) #identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box {
+#urlbar:not([breakout-extend='true']) #identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
   border-radius: 20px 10px 10px 20px !important;
 }
 
-#urlbar:not([extend="true"]) #identity-box #identity-icon-box {
+#urlbar:not([extend='true']) #identity-box #identity-icon-box {
   position: relative;
 }
 
-#urlbar:not([extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box {
+#urlbar:not([extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) #identity-icon-box {
   margin-right: 5px;
 }
 
-#urlbar:not([extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) {
+#urlbar:not([extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) {
   margin-inline-end: 0 !important;
 }
 
@@ -104,8 +104,8 @@
   margin: 0 0 0 2px !important;
 }
 
-#urlbar[breakout-extend="true"] .urlbar-page-action,
+#urlbar[breakout-extend='true'] .urlbar-page-action,
-#urlbar[breakout-extend="true"] #tracking-protection-icon-container {
+#urlbar[breakout-extend='true'] #tracking-protection-icon-container {
   width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
   height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
 }
@@ -115,12 +115,13 @@
   border-bottom-left-radius: 0 !important;
 }
 
-#identity-box:has(#notification-popup-box:not([hidden="true"])) #identity-icon-box,
+#identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-icon-box,
-#identity-box:has(#notification-popup-box:not([hidden="true"])) #identity-permission-box {
+#identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-permission-box {
   margin-right: 4px !important;
 }
 
-#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate="invalid"]) #identity-icon-box {
+#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate='invalid'])
+  #identity-icon-box {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
   margin-right: 0 !important;
@@ -141,12 +142,12 @@
   gap: 8px;
 }
 
-#urlbar[breakout-extend="true"] #notification-popup-box {
+#urlbar[breakout-extend='true'] #notification-popup-box {
   min-width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
   height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
 }
 
-#notification-popup-box>image {
+#notification-popup-box > image {
   margin: 0;
   padding: 0;
 }
@@ -156,7 +157,7 @@ button.popup-notification-dropmarker {
   border-bottom-left-radius: 0 !important;
 }
 
-.panel-footer:has(button.popup-notification-dropmarker:not([hidden="true"])) button.popup-notification-secondary-button {
+.panel-footer:has(button.popup-notification-dropmarker:not([hidden='true'])) button.popup-notification-secondary-button {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
@@ -169,10 +170,10 @@ button.popup-notification-dropmarker {
 }
 
 #downloadsHistory {
-  margin-top: 5px
+  margin-top: 5px;
 }
 
-:root:not([zen-sidebar-legacy="true"]) {
+:root:not([zen-sidebar-legacy='true']) {
   @media (max-width: 650px) {
     #urlbar-container {
       width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
@@ -197,7 +198,7 @@ button.popup-notification-dropmarker {
   }
 }
 
-:root[zen-sidebar-legacy="true"] {
+:root[zen-sidebar-legacy='true'] {
   @media (max-width: 550px) {
     #urlbar-container {
       width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
@@ -220,4 +221,4 @@ button.popup-notification-dropmarker {
       display: none;
     }
   }
-}
+}

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

@@ -1,4 +1,3 @@
-
 #zen-workspaces-button {
   --zen-workspaces-button-vmargin: 0.4rem;
   border: 1px solid var(--zen-colors-border);
@@ -11,13 +10,13 @@
   align-items: center;
   display: flex;
 
-  :root[zen-sidebar-legacy="true"] & {
+  :root[zen-sidebar-legacy='true'] & {
     margin-top: 0 !important;
   }
 }
 
 #zen-workspaces-button .zen-workspace-sidebar-name {
-  margin-left: .2rem;
+  margin-left: 0.2rem;
   display: none;
   overflow: hidden;
   white-space: nowrap;
@@ -25,23 +24,24 @@
   font-size: 12px;
 }
 
-@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
+@media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
   /** Keep these selectors in sync with the ones in vertical-tabs.css */
   #navigator-toolbox:is(
-    #navigator-toolbox[zen-user-hover="true"]:hover,
+      #navigator-toolbox[zen-user-hover='true']:hover,
-    #navigator-toolbox[zen-user-hover="true"]:focus-within,
+      #navigator-toolbox[zen-user-hover='true']:focus-within,
-    #mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox,
+      #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
-    #navigator-toolbox[zen-user-hover="true"]:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)), 
+      #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
-  :not([zen-user-hover="true"])) {
+      :not([zen-user-hover='true'])
+    ) {
     & #zen-workspaces-button .zen-workspace-sidebar-name {
       display: block;
     }
 
-    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] {
+    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] {
       display: none;
     }
 
-    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] + .zen-workspace-sidebar-name {
+    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
       margin-left: 0;
     }
 
@@ -93,8 +93,8 @@
   border-radius: 7px;
 }
 
-#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected="true"],
+#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected='true'],
-#PanelUI-zen-workspaces-edit-icons-container toolbarbutton[selected="true"] {
+#PanelUI-zen-workspaces-edit-icons-container toolbarbutton[selected='true'] {
   border-color: var(--zen-colors-secondary);
 }
 
@@ -126,7 +126,7 @@
   flex-shrink: 0;
 }
 
-#PanelUI-zen-workspaces-list[empty="true"] {
+#PanelUI-zen-workspaces-list[empty='true'] {
   font-weight: 600;
   padding: 10px;
   width: 100%;
@@ -139,7 +139,7 @@
 }
 
 #PanelUI-zen-workspaces-list toolbarbutton,
-#PanelUI-zen-workspaces-current-info toolbarbutton  {
+#PanelUI-zen-workspaces-current-info toolbarbutton {
   padding: 5px;
   border-radius: 7px;
 
@@ -180,7 +180,7 @@
   }
 
   &:hover .zen-workspace-actions,
-  & .zen-workspace-actions[active="true"] {
+  & .zen-workspace-actions[active='true'] {
     display: flex;
   }
 }
@@ -212,7 +212,7 @@
   width: 100%;
 }
 
-#PanelUI-zen-workspaces-create-footer button[default="true"],
+#PanelUI-zen-workspaces-create-footer button[default='true'],
-#PanelUI-zen-workspaces-edit-footer button[default="true"] {
+#PanelUI-zen-workspaces-edit-footer button[default='true'] {
   width: 100%;
 }

src/browser/base/content/zenThemeModifier.js

@@ -1,9 +1,8 @@
-
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
- "use strict";
+'use strict';
 
 /* INCLUDE THIS FILE AS:
  *   <script src="chrome://browser/content/zenThemeModifier.js"></script>
@@ -11,30 +10,26 @@
  * FOR ANY WEBSITE THAT WOULD NEED TO USE THE ACCENT COLOR, ETC
  */
 
-const kZenThemePrefsList = [
+const kZenThemePrefsList = ['zen.theme.accent-color', 'zen.theme.border-radius', 'zen.theme.content-element-separation'];
-  "zen.theme.accent-color",
-  "zen.theme.border-radius",
-  "zen.theme.content-element-separation",
-];
 
 /**
-* ZenThemeModifier controls the application of theme data to the browser,
+ * ZenThemeModifier controls the application of theme data to the browser,
-* for examplem, it injects the accent color to the document. This is used
+ * for examplem, it injects the accent color to the document. This is used
-* because we need a way to apply the accent color without having to worry about
+ * because we need a way to apply the accent color without having to worry about
-* shadow roots not inheriting the accent color.
+ * shadow roots not inheriting the accent color.
-* 
+ *
-* note: It must be a firefox builtin page with access to the browser's configuration
+ * note: It must be a firefox builtin page with access to the browser's configuration
-*  and services.
+ *  and services.
-*/
+ */
 var ZenThemeModifier = {
   _inMainBrowserWindow: false,
 
   /**
-  * Listen for theming updates from the LightweightThemeChild actor, and
+   * Listen for theming updates from the LightweightThemeChild actor, and
-  * begin listening to changes in preferred color scheme.
+   * begin listening to changes in preferred color scheme.
-  */
+   */
   init() {
-    this._inMainBrowserWindow = window.location.href == "chrome://browser/content/browser.xhtml";
+    this._inMainBrowserWindow = window.location.href == 'chrome://browser/content/browser.xhtml';
     this.listenForEvents();
     this.updateAllThemeBasics();
     this._onPrefersColorSchemeChange();
@@ -49,7 +44,7 @@ var ZenThemeModifier = {
       Services.prefs.addObserver(pref, handleEvent);
     }
 
-    window.addEventListener("unload", () => {
+    window.addEventListener('unload', () => {
       for (let pref of kZenThemePrefsList) {
         Services.prefs.removeObserver(pref, handleEvent);
       }
@@ -62,8 +57,8 @@ var ZenThemeModifier = {
   },
 
   /**
-    * Update all theme basics, like the accent color.
+   * Update all theme basics, like the accent color.
-    */
+   */
   async updateAllThemeBasics() {
     this.updateAccentColor();
     this.updateBorderRadius();
@@ -71,24 +66,24 @@ var ZenThemeModifier = {
   },
 
   updateBorderRadius() {
-    const borderRadius = Services.prefs.getIntPref("zen.theme.border-radius");
+    const borderRadius = Services.prefs.getIntPref('zen.theme.border-radius');
-    document.documentElement.style.setProperty("--zen-border-radius", borderRadius + "px");
+    document.documentElement.style.setProperty('--zen-border-radius', borderRadius + 'px');
   },
 
   updateElementSeparation() {
-    const separation = Services.prefs.getIntPref("zen.theme.content-element-separation");
+    const separation = Services.prefs.getIntPref('zen.theme.content-element-separation');
-    document.documentElement.style.setProperty("--zen-element-separation", separation + "px");
+    document.documentElement.style.setProperty('--zen-element-separation', separation + 'px');
   },
 
   /**
    * Update the accent color.
    */
   updateAccentColor() {
-    const accentColor = Services.prefs.getStringPref("zen.theme.accent-color");
+    const accentColor = Services.prefs.getStringPref('zen.theme.accent-color');
-    document.documentElement.style.setProperty("--zen-primary-color", accentColor);
+    document.documentElement.style.setProperty('--zen-primary-color', accentColor);
     // Notify the page that the accent color has changed, only if a function
     // handler is defined.
-    if (typeof window.zenPageAccentColorChanged === "function") {
+    if (typeof window.zenPageAccentColorChanged === 'function') {
       window.zenPageAccentColorChanged(accentColor);
     }
   },
@@ -98,35 +93,33 @@ var ZenThemeModifier = {
   },
 
   _updateZenAvatar() {
-    if (typeof ProfileService === "undefined") {
+    if (typeof ProfileService === 'undefined') {
       return;
     }
     const mainWindowEl = document.documentElement;
     // Dont override the sync avatar if it's already set
-    if (mainWindowEl.style.hasOwnProperty("--avatar-image-url")) {
+    if (mainWindowEl.style.hasOwnProperty('--avatar-image-url')) {
       return;
     }
     let profile = ProfileService.currentProfile;
-    if (!profile || profile.zenAvatarPath == "") return;
+    if (!profile || profile.zenAvatarPath == '') return;
     // TODO: actually use profile data to generate the avatar, instead of just using the name
     let avatarUrl = this._getThemedAvatar(profile.zenAvatarPath);
-    if (document.documentElement.hasAttribute("privatebrowsingmode")) {
+    if (document.documentElement.hasAttribute('privatebrowsingmode')) {
-      avatarUrl = "chrome://global/skin/icons/indicator-private-browsing.svg";
+      avatarUrl = 'chrome://global/skin/icons/indicator-private-browsing.svg';
     }
-    mainWindowEl.style.setProperty("--zen-avatar-image-url", `url(${avatarUrl})`);
+    mainWindowEl.style.setProperty('--zen-avatar-image-url', `url(${avatarUrl})`);
-    mainWindowEl.style.setProperty("--avatar-image-url", `var(--zen-avatar-image-url)`, "important");
+    mainWindowEl.style.setProperty('--avatar-image-url', `var(--zen-avatar-image-url)`, 'important');
   },
 
   _getThemedAvatar(avatarPath) {
-    if (!avatarPath.startsWith("chrome://browser/content/zen-avatars/avatar-")
+    if (!avatarPath.startsWith('chrome://browser/content/zen-avatars/avatar-') || !avatarPath.endsWith('.svg')) {
-      || !avatarPath.endsWith(".svg")) {
       return avatarPath;
     }
     let withoutExtension = avatarPath.slice(0, -4);
-    let scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
+    let scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     return `${withoutExtension}-${scheme}.svg`;
   },
 };
 
-if (typeof Services !== "undefined")
+if (typeof Services !== 'undefined') ZenThemeModifier.init();
-  ZenThemeModifier.init();

src/browser/components/newtab/README.md

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

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

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

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

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

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

@@ -3,43 +3,43 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 const kZenColors = [
-  "#aac7ff",
+  '#aac7ff',
-  "#74d7cb",
+  '#74d7cb',
-  "#a0d490",
+  '#a0d490',
-  "#dec663",
+  '#dec663',
-  "#ffb787",
+  '#ffb787',
-  "#dec1b1",
+  '#dec1b1',
-  "#ffb1c0",
+  '#ffb1c0',
-  "#ddbfc3",
+  '#ddbfc3',
-  "#f6b0ea",
+  '#f6b0ea',
-  "#d4bbff",
+  '#d4bbff',
 ];
 
 const kZenOSToSmallName = {
-  WINNT: "windows",
+  WINNT: 'windows',
-  Darwin: "macos",
+  Darwin: 'macos',
-  Linux: "linux",
+  Linux: 'linux',
 };
 
-var gZenMarketplaceManager = {  
+var gZenMarketplaceManager = {
   init() {
-    const checkForUpdates = document.getElementById("zenThemeMarketplaceCheckForUpdates");
+    const checkForUpdates = document.getElementById('zenThemeMarketplaceCheckForUpdates');
     if (!checkForUpdates) return; // We havent entered the settings page yet.
     if (this.__hasInitializedEvents) return;
     this._buildThemesList();
     this.__hasInitializedEvents = true;
     Services.prefs.addObserver(this.updatePref, this);
-    checkForUpdates.addEventListener("click", (event) => {
+    checkForUpdates.addEventListener('click', (event) => {
       if (event.target === checkForUpdates) {
         event.preventDefault();
         this._checkForThemeUpdates(event);
       }
     });
-    document.addEventListener("ZenThemeMarketplace:CheckForUpdatesFinished", (event) => {
+    document.addEventListener('ZenThemeMarketplace:CheckForUpdatesFinished', (event) => {
       checkForUpdates.disabled = false;
       const updates = event.detail.updates;
-      const success = document.getElementById("zenThemeMarketplaceUpdatesSuccess");
+      const success = document.getElementById('zenThemeMarketplaceUpdatesSuccess');
-      const error = document.getElementById("zenThemeMarketplaceUpdatesFailure");
+      const error = document.getElementById('zenThemeMarketplaceUpdatesFailure');
       if (updates) {
         success.hidden = false;
         error.hidden = true;
@@ -48,7 +48,7 @@ var gZenMarketplaceManager = {
         error.hidden = false;
       }
     });
-    window.addEventListener("unload", this.uninit.bind(this));
+    window.addEventListener('unload', this.uninit.bind(this));
   },
 
   uninit() {
@@ -64,11 +64,11 @@ var gZenMarketplaceManager = {
     // Send a message to the child to check for theme updates.
     event.target.disabled = true;
     // send an event that will be listened by the child process.
-    document.dispatchEvent(new CustomEvent("ZenCheckForThemeUpdates"));
+    document.dispatchEvent(new CustomEvent('ZenCheckForThemeUpdates'));
   },
 
   get updatePref() {
-    return "zen.themes.updated-value-observer";
+    return 'zen.themes.updated-value-observer';
   },
 
   triggerThemeUpdate() {
@@ -76,27 +76,20 @@ var gZenMarketplaceManager = {
   },
 
   get themesList() {
-    return document.getElementById("zenThemeMarketplaceList");
+    return document.getElementById('zenThemeMarketplaceList');
   },
 
   get themesDataFile() {
-    return PathUtils.join(
+    return PathUtils.join(PathUtils.profileDir, 'zen-themes.json');
-      PathUtils.profileDir,
-      "zen-themes.json"
-    );
   },
 
   get themesRootPath() {
-    return PathUtils.join(
+    return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes');
-      PathUtils.profileDir,
-      "chrome",
-      "zen-themes"
-    );
   },
 
   async removeTheme(themeId) {
     const themePath = PathUtils.join(this.themesRootPath, themeId);
-    console.info("ZenThemeMarketplaceParent(settings): Removing theme ", themePath);
+    console.info('ZenThemeMarketplaceParent(settings): Removing theme ', themePath);
     await IOUtils.remove(themePath, { recursive: true, ignoreAbsent: true });
 
     let themes = await this._getThemes();
@@ -126,13 +119,13 @@ var gZenMarketplaceManager = {
       // [!][os:]key
       let restOfPreferences = key;
       let isNegation = false;
-      if (key.startsWith("!")) {
+      if (key.startsWith('!')) {
         isNegation = true;
         restOfPreferences = key.slice(1);
       }
-      let os = "";
+      let os = '';
-      if (restOfPreferences.includes(":")) {
+      if (restOfPreferences.includes(':')) {
-        [os, restOfPreferences] = restOfPreferences.split(":");
+        [os, restOfPreferences] = restOfPreferences.split(':');
       }
       if (isNegation && os === this.currentOperatingSystem) {
         delete preferences[key];
@@ -150,7 +143,7 @@ var gZenMarketplaceManager = {
   },
 
   async _getThemePreferences(theme) {
-    const themePath = PathUtils.join(this.themesRootPath, theme.id, "preferences.json");
+    const themePath = PathUtils.join(this.themesRootPath, theme.id, 'preferences.json');
     if (!(await IOUtils.exists(themePath)) || !theme.preferences) {
       return {};
     }
@@ -159,9 +152,9 @@ var gZenMarketplaceManager = {
 
   async _buildThemesList() {
     if (!this.themesList) return;
-    console.log("ZenThemeMarketplaceParent(settings): Building themes list");
+    console.log('ZenThemeMarketplaceParent(settings): Building themes list');
     let themes = await this._getThemes();
-    this.themesList.innerHTML = "";
+    this.themesList.innerHTML = '';
     for (let theme of Object.values(themes)) {
       const fragment = window.MozXULElement.parseXULToFragment(`
         <hbox class="zenThemeMarketplaceItem" align="center">
@@ -172,22 +165,22 @@ var gZenMarketplaceManager = {
           <button class="zenThemeMarketplaceItemUninstallButton" data-l10n-id="zen-theme-marketplace-remove-button" zen-theme-id="${theme.id}"></button>
         </hbox>
       `);
-      fragment.querySelector(".zenThemeMarketplaceItemTitle").textContent = `${theme.name} (v${theme.version || "1.0.0"})`;
+      fragment.querySelector('.zenThemeMarketplaceItemTitle').textContent = `${theme.name} (v${theme.version || '1.0.0'})`;
-      fragment.querySelector(".zenThemeMarketplaceItemDescription").textContent = theme.description;
+      fragment.querySelector('.zenThemeMarketplaceItemDescription').textContent = theme.description;
-      fragment.querySelector(".zenThemeMarketplaceItemUninstallButton").addEventListener("click", async (event) => {
+      fragment.querySelector('.zenThemeMarketplaceItemUninstallButton').addEventListener('click', async (event) => {
-        if (!confirm("Are you sure you want to remove this theme?")) {
+        if (!confirm('Are you sure you want to remove this theme?')) {
           return;
         }
         const target = event.target;
-        const themeId = target.getAttribute("zen-theme-id");
+        const themeId = target.getAttribute('zen-theme-id');
         await this.removeTheme(themeId);
       });
       this.themesList.appendChild(fragment);
       const preferences = await this._getThemePreferences(theme);
       if (Object.keys(preferences).length > 0) {
-        let preferencesWrapper = document.createXULElement("vbox");
+        let preferencesWrapper = document.createXULElement('vbox');
-        preferencesWrapper.classList.add("indent");
+        preferencesWrapper.classList.add('indent');
-        preferencesWrapper.classList.add("zenThemeMarketplaceItemPreferences");
+        preferencesWrapper.classList.add('zenThemeMarketplaceItemPreferences');
         for (let [key, value] of Object.entries(preferences)) {
           const fragment = window.MozXULElement.parseXULToFragment(`
             <hbox class="zenThemeMarketplaceItemPreference">
@@ -200,16 +193,16 @@ var gZenMarketplaceManager = {
           `);
           // Checkbox only works with "true" and "false" values, it's not like HTML checkboxes.
           if (Services.prefs.getBoolPref(key, false)) {
-            fragment.querySelector(".zenThemeMarketplaceItemPreferenceCheckbox").setAttribute("checked", "true");
+            fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').setAttribute('checked', 'true');
           }
-          fragment.querySelector(".zenThemeMarketplaceItemPreferenceCheckbox").addEventListener("click", (event) => {
+          fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => {
-            let target = event.target.closest(".zenThemeMarketplaceItemPreferenceCheckbox");
+            let target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox');
-            let key = target.getAttribute("zen-pref");
+            let key = target.getAttribute('zen-pref');
-            let checked = target.hasAttribute("checked");
+            let checked = target.hasAttribute('checked');
             if (!checked) {
-              target.removeAttribute("checked");
+              target.removeAttribute('checked');
             } else {
-              target.setAttribute("checked", "true");
+              target.setAttribute('checked', 'true');
             }
             Services.prefs.setBoolPref(key, !checked);
           });
@@ -218,7 +211,7 @@ var gZenMarketplaceManager = {
         this.themesList.appendChild(preferencesWrapper);
       }
     }
-  }
+  },
 };
 
 var gZenLooksAndFeel = {
@@ -229,51 +222,44 @@ var gZenLooksAndFeel = {
     gZenThemeBuilder.init();
     gZenMarketplaceManager.init();
     var onLegacyToolbarChange = this.onLegacyToolbarChange.bind(this);
-    Services.prefs.addObserver("zen.themes.tabs.legacy-location", onLegacyToolbarChange);
+    Services.prefs.addObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
-    window.addEventListener("unload", () => {
+    window.addEventListener('unload', () => {
-      Services.prefs.removeObserver("zen.themes.tabs.legacy-location", onLegacyToolbarChange);
+      Services.prefs.removeObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
     });
   },
 
   async onLegacyToolbarChange(event) {
-    let buttonIndex = await confirmRestartPrompt(
+    let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
-      true,
-      1,
-      true,
-      false
-    );
     if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
-      Services.startup.quit(
+      Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
-        Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
-      );
       return;
     }
   },
 
   _initializeTabbarExpandForm() {
-    const form = document.getElementById("zen-expand-tabbar-strat");
+    const form = document.getElementById('zen-expand-tabbar-strat');
-    const radios = form.querySelectorAll("input[type=radio]");
+    const radios = form.querySelectorAll('input[type=radio]');
-    const onHoverPref = "zen.view.sidebar-expanded.on-hover";
+    const onHoverPref = 'zen.view.sidebar-expanded.on-hover';
-    const defaultExpandPref = "zen.view.sidebar-expanded";
+    const defaultExpandPref = 'zen.view.sidebar-expanded';
     if (Services.prefs.getBoolPref(onHoverPref)) {
-      form.querySelector("input[value=\"hover\"]").checked = true;
+      form.querySelector('input[value="hover"]').checked = true;
     } else if (Services.prefs.getBoolPref(defaultExpandPref)) {
-      form.querySelector("input[value=\"expand\"]").checked = true;
+      form.querySelector('input[value="expand"]').checked = true;
     } else {
-      form.querySelector("input[value=\"none\"]").checked = true;
+      form.querySelector('input[value="none"]').checked = true;
     }
     for (let radio of radios) {
-      radio.addEventListener("change", e => {
+      radio.addEventListener('change', (e) => {
         switch (e.target.value) {
-          case "expand":
+          case 'expand':
             Services.prefs.setBoolPref(onHoverPref, false);
             Services.prefs.setBoolPref(defaultExpandPref, true);
             break;
-          case "none":
+          case 'none':
             Services.prefs.setBoolPref(onHoverPref, false);
             Services.prefs.setBoolPref(defaultExpandPref, false);
             break;
-          case "hover":
+          case 'hover':
             Services.prefs.setBoolPref(onHoverPref, true);
             Services.prefs.setBoolPref(defaultExpandPref, true);
             break;
@@ -283,19 +269,19 @@ var gZenLooksAndFeel = {
   },
 
   _initializeColorPicker(accentColor) {
-    let elem = document.getElementById("zenLooksAndFeelColorOptions");
+    let elem = document.getElementById('zenLooksAndFeelColorOptions');
-    elem.innerHTML = "";
+    elem.innerHTML = '';
     for (let color of kZenColors) {
-      let colorElemParen = document.createElement("div");
+      let colorElemParen = document.createElement('div');
-      let colorElem = document.createElement("div");
+      let colorElem = document.createElement('div');
-      colorElemParen.classList.add("zenLooksAndFeelColorOptionParen");
+      colorElemParen.classList.add('zenLooksAndFeelColorOptionParen');
-      colorElem.classList.add("zenLooksAndFeelColorOption");
+      colorElem.classList.add('zenLooksAndFeelColorOption');
-      colorElem.style.setProperty("--zen-primary-color", color, "important");
+      colorElem.style.setProperty('--zen-primary-color', color, 'important');
       if (accentColor === color) {
-        colorElemParen.setAttribute("selected", "true");
+        colorElemParen.setAttribute('selected', 'true');
       }
-      colorElemParen.addEventListener("click", () => {
+      colorElemParen.addEventListener('click', () => {
-        Services.prefs.setStringPref("zen.theme.accent-color", color);
+        Services.prefs.setStringPref('zen.theme.accent-color', color);
       });
       colorElemParen.appendChild(colorElem);
       elem.appendChild(colorElemParen);
@@ -308,38 +294,31 @@ var gZenLooksAndFeel = {
   },
 
   _getInitialAccentColor() {
-    return Services.prefs.getStringPref("zen.theme.accent-color", kZenColors[0]);
+    return Services.prefs.getStringPref('zen.theme.accent-color', kZenColors[0]);
   },
 };
 
 var gZenWorkspacesSettings = {
   init() {
-    Services.prefs.addObserver("zen.workspaces.enabled", this);
+    Services.prefs.addObserver('zen.workspaces.enabled', this);
-    window.addEventListener("unload", () => {
+    window.addEventListener('unload', () => {
-      Services.prefs.removeObserver("zen.workspaces.enabled", this);
+      Services.prefs.removeObserver('zen.workspaces.enabled', this);
     });
   },
 
   async observe(subject, topic, data) {
-    await this.onWorkspaceChange(Services.prefs.getBoolPref("zen.workspaces.enabled"));
+    await this.onWorkspaceChange(Services.prefs.getBoolPref('zen.workspaces.enabled'));
   },
 
   async onWorkspaceChange(checked) {
     if (checked) {
-      let buttonIndex = await confirmRestartPrompt(
+      let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
-        true,
-        1,
-        true,
-        false
-      );
       if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
-        Services.startup.quit(
+        Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
-          Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
-        );
         return;
       }
     }
-  }
+  },
 };
 
 var gZenCKSSettings = {
@@ -348,13 +327,13 @@ var gZenCKSSettings = {
     this._initializeEvents();
     this._initializeCKS();
     this._addPrefObservers();
-    window.addEventListener("unload", () => {
+    window.addEventListener('unload', () => {
-      Services.prefs.removeObserver("zen.keyboard.shortcuts.disable-firefox", this);
+      Services.prefs.removeObserver('zen.keyboard.shortcuts.disable-firefox', this);
     });
   },
 
   _addPrefObservers() {
-    Services.prefs.addObserver("zen.keyboard.shortcuts.disable-firefox", this);
+    Services.prefs.addObserver('zen.keyboard.shortcuts.disable-firefox', this);
   },
 
   observe(subject, topic, data) {
@@ -362,32 +341,25 @@ var gZenCKSSettings = {
   },
 
   async onDisableFirefoxShortcutsChange(event) {
-    let checked = Services.prefs.getBoolPref("zen.keyboard.shortcuts.disable-firefox");
+    let checked = Services.prefs.getBoolPref('zen.keyboard.shortcuts.disable-firefox');
     if (checked) return;
-    let buttonIndex = await confirmRestartPrompt(
+    let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
-      true,
-      1,
-      true,
-      false
-    );
     if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
-      Services.startup.quit(
+      Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
-        Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
-      );
       return;
     }
   },
 
   _initializeCKS() {
-    let wrapepr = document.getElementById("zenCKSOptions-wrapper");
+    let wrapepr = document.getElementById('zenCKSOptions-wrapper');
 
     // Create the groups first.
     for (let key in kZKSActions) {
       const data = kZKSActions[key];
       const group = data[2];
       if (!wrapepr.querySelector(`[data-group="${group}"]`)) {
-        let groupElem = document.createElement("h2");
+        let groupElem = document.createElement('h2');
-        groupElem.setAttribute("data-group", group);
+        groupElem.setAttribute('data-group', group);
         document.l10n.setAttributes(groupElem, `zen-cks-group-${group}`);
         wrapepr.appendChild(groupElem);
       }
@@ -405,9 +377,9 @@ var gZenCKSSettings = {
           <html:input readonly="1" class="zenCKSOption-input" id="zenCKSOption-${key}" />
         </hbox>
       `);
-      document.l10n.setAttributes(fragment.querySelector(".zenCKSOption-label"), l10nId);
+      document.l10n.setAttributes(fragment.querySelector('.zenCKSOption-label'), l10nId);
 
-      let input = fragment.querySelector(".zenCKSOption-input");
+      let input = fragment.querySelector('.zenCKSOption-input');
       let shortcut = gZenKeyboardShortcuts.getShortcut(key);
       if (shortcut) {
         input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
@@ -415,16 +387,16 @@ var gZenCKSSettings = {
         this._resetCKS(input, key);
       }
 
-      input.setAttribute("data-key", key);
+      input.setAttribute('data-key', key);
-      input.addEventListener("focus", (event) => {
+      input.addEventListener('focus', (event) => {
-        const key = event.target.getAttribute("data-key");
+        const key = event.target.getAttribute('data-key');
         this._currentAction = key;
-        event.target.classList.add("zenCKSOption-input-editing");
+        event.target.classList.add('zenCKSOption-input-editing');
       });
 
-      input.addEventListener("blur", (event) => {
+      input.addEventListener('blur', (event) => {
         this._currentAction = null;
-        event.target.classList.remove("zenCKSOption-input-editing");
+        event.target.classList.remove('zenCKSOption-input-editing');
       });
 
       const groupElem = wrapepr.querySelector(`[data-group="${group}"]`);
@@ -433,14 +405,14 @@ var gZenCKSSettings = {
   },
 
   _resetCKS(input, key) {
-    input.value = "Not set";
+    input.value = 'Not set';
-    input.classList.add("zenCKSOption-input-not-set");
+    input.classList.add('zenCKSOption-input-not-set');
-    input.classList.remove("zenCKSOption-input-invalid");
+    input.classList.remove('zenCKSOption-input-invalid');
     gZenKeyboardShortcuts.setShortcut(key, null);
   },
 
   _initializeEvents() {
-    window.addEventListener("keydown", this._handleKeyDown.bind(this));
+    window.addEventListener('keydown', this._handleKeyDown.bind(this));
   },
 
   _handleKeyDown(event) {
@@ -453,18 +425,18 @@ var gZenCKSSettings = {
       ctrl: event.ctrlKey,
       alt: event.altKey,
       shift: event.shiftKey,
-      meta: event.metaKey
+      meta: event.metaKey,
     };
 
     const shortcutWithoutModifiers = !shortcut.ctrl && !shortcut.alt && !shortcut.shift && !shortcut.meta;
 
-    if (event.key === "Tab" && shortcutWithoutModifiers) {
+    if (event.key === 'Tab' && shortcutWithoutModifiers) {
       return;
-    } else if (event.key === "Escape" && shortcutWithoutModifiers) {
+    } else if (event.key === 'Escape' && shortcutWithoutModifiers) {
       this._currentAction = null;
       input.blur();
       return;
-    } else if (event.key === "Backspace" && shortcutWithoutModifiers) {
+    } else if (event.key === 'Backspace' && shortcutWithoutModifiers) {
       this._resetCKS(input, this._currentAction);
       return;
     }
@@ -474,7 +446,7 @@ var gZenCKSSettings = {
       return; // No modifiers, ignore.
     }
 
-    if (!(["Control", "Alt", "Meta", "Shift"].includes(event.key))) {
+    if (!['Control', 'Alt', 'Meta', 'Shift'].includes(event.key)) {
       if (event.keycode) {
         shortcut.keycode = event.keycode;
       } else {
@@ -486,75 +458,75 @@ var gZenCKSSettings = {
     gZenKeyboardShortcuts.setShortcut(this._currentAction, shortcut);
 
     input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
-    input.classList.remove("zenCKSOption-input-not-set");
+    input.classList.remove('zenCKSOption-input-not-set');
 
     if (gZenKeyboardShortcuts.isValidShortcut(shortcut)) {
-      input.classList.remove("zenCKSOption-input-invalid");
+      input.classList.remove('zenCKSOption-input-invalid');
     } else {
-      input.classList.add("zenCKSOption-input-invalid");
+      input.classList.add('zenCKSOption-input-invalid');
     }
   },
 };
 
 Preferences.addAll([
   {
-    id: "zen.theme.toolbar-themed",
+    id: 'zen.theme.toolbar-themed',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.sidebar.enabled",
+    id: 'zen.sidebar.enabled',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.sidebar.close-on-blur",
+    id: 'zen.sidebar.close-on-blur',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.view.compact",
+    id: 'zen.view.compact',
-    type: "bool",
+    type: 'bool',
     default: false,
   },
   {
-    id: "zen.view.compact.hide-toolbar",
+    id: 'zen.view.compact.hide-toolbar',
-    type: "bool",
+    type: 'bool',
     default: false,
   },
   {
-    id: "zen.view.compact.toolbar-flash-popup",
+    id: 'zen.view.compact.toolbar-flash-popup',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.workspaces.enabled",
+    id: 'zen.workspaces.enabled',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.view.sidebar-expanded.show-button",
+    id: 'zen.view.sidebar-expanded.show-button',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.view.sidebar-expanded",
+    id: 'zen.view.sidebar-expanded',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.theme.pill-button",
+    id: 'zen.theme.pill-button',
-    type: "bool",
+    type: 'bool',
     default: true,
   },
   {
-    id: "zen.keyboard.shortcuts.disable-firefox",
+    id: 'zen.keyboard.shortcuts.disable-firefox',
-    type: "bool",
+    type: 'bool',
     default: false,
   },
   {
-    id: "zen.themes.tabs.legacy-location",
+    id: 'zen.themes.tabs.legacy-location',
-    type: "bool",
+    type: 'bool',
     default: false,
-  }
+  },
 ]);

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

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

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

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

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@
  */
 
 :root {
-  --zen-settings-secondary-background: light-dark(#F2F4F4, #171717);
+  --zen-settings-secondary-background: light-dark(#f2f4f4, #171717);
 }
 
 .main-content {
@@ -50,11 +50,11 @@ groupbox:has(+ .subcategory) {
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 }
 
-.sticky-inner-container{
+.sticky-inner-container {
   display: none !important;
 }
 
-.subcategory  {
+.subcategory {
   border-top: none !important;
 }
 
@@ -74,7 +74,7 @@ groupbox menulist {
 }
 
 groupbox h2 {
-  opacity: .7;
+  opacity: 0.7;
   font-size: 15px;
 }
 
@@ -87,11 +87,10 @@ groupbox h2 {
   min-height: 40px !important;
   position: relative;
   padding-inline: 20px !important;
-
 }
 
 #categories > .category[selected]::before {
-  content: "";
+  content: '';
   display: block;
   height: 70%;
   width: 5px;
@@ -102,7 +101,7 @@ groupbox h2 {
 }
 
 #languagesGroup::before {
-  content: "";
+  content: '';
   display: block;
   height: 1px;
   background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
@@ -151,7 +150,7 @@ groupbox h2 {
 }
 
 #category-zen-looks > .category-icon {
-  list-style-image: url("chrome://browser/skin/customize.svg");
+  list-style-image: url('chrome://browser/skin/customize.svg');
 }
 
 #zenLooksAndFeelColorOptions {
@@ -175,7 +174,7 @@ groupbox h2 {
   border: 2px solid transparent;
 }
 
-.zenLooksAndFeelColorOptionParen[selected="true"] {
+.zenLooksAndFeelColorOptionParen[selected='true'] {
   border-color: var(--zen-primary-color);
 }
 
@@ -189,7 +188,7 @@ groupbox h2 {
 }
 
 .zenLooksAndFeelColorOption::before {
-  content: "";
+  content: '';
   display: block;
   width: 50%;
   height: 50%;
@@ -200,7 +199,7 @@ groupbox h2 {
 }
 
 .zenLooksAndFeelColorOption::after {
-  content: "";
+  content: '';
   display: block;
   width: 50%;
   height: 50%;
@@ -213,13 +212,13 @@ groupbox h2 {
 /* Workspace */
 
 #category-zen-workspaces > .category-icon {
-  list-style-image: url("chrome://browser/skin/window.svg");
+  list-style-image: url('chrome://browser/skin/window.svg');
 }
 
 /* CKS */
 
 #category-zen-CKS > .category-icon {
-  list-style-image: url("chrome://browser/skin/quickactions.svg");
+  list-style-image: url('chrome://browser/skin/quickactions.svg');
 }
 
 .zenCKSOption-input {
@@ -316,17 +315,17 @@ groupbox h2 {
   transform: translate(-50%, -50%);
 }
 
-
 /* THemes marketplace */
 
 #category-zen-marketplace > .category-icon {
-  list-style-image: url("chrome://mozapps/skin/extensions/category-themes.svg");
+  list-style-image: url('chrome://mozapps/skin/extensions/category-themes.svg');
 }
 
 .zenThemeMarketplaceItem {
   width: 100%;
 
-  &:not(:first-of-type), .zenThemeMarketplaceItemPreferences {
+  &:not(:first-of-type),
+  .zenThemeMarketplaceItemPreferences {
     margin-top: 15px;
   }
 }

surfer.json

@@ -34,10 +34,8 @@
     }
   },
   "license": {
-    "ignoredFiles": [
+    "ignoredFiles": [".*\\.json"],
-      ".*\\.json"
-    ],
     "licenseType": "MPL-2.0"
   },
   "updateHostname": "updates.zen-browser.app"
-}
+}