1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-07 21:49:58 +02:00

Formatted the entire project

This commit is contained in:
mauro-balades 2024-09-09 19:36:14 +02:00
parent b0e7e8cb0d
commit 80136189b1
56 changed files with 1246 additions and 1230 deletions

1
.github/FUNDING.yml vendored
View file

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

View file

@ -34,7 +34,7 @@ body:
label: Reproducible? label: Reproducible?
description: Is this issue reproducible on Firefox? description: Is this issue reproducible on Firefox?
options: 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 - type: input
id: version id: version
attributes: attributes:

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,15 +1,14 @@
## Changed things that should be tested each release ## 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

View file

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

View file

@ -1,31 +1,30 @@
# Supported CPUs for optimized builds (Windows and Linux) # Supported CPUs for optimized builds (Windows and Linux)
> If you CPU is not listed, you should use the "Generic" build. > 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)

View file

@ -4,14 +4,12 @@ The `zen.sidepanels.data` configuration will be a JSON string that follows the f
```json ```json
{ {
data: { "data": {
"p1": { "p1": {
"url": "https://google.com", "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"
]
} }
``` ```

View file

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

2
l10n

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

View file

@ -1,4 +1,3 @@
var ZenStartup = { var ZenStartup = {
init() { init() {
this._changeSidebarLocation(); this._changeSidebarLocation();
@ -12,23 +11,21 @@ var ZenStartup = {
if (this.__hasInitBrowserLayout) return; if (this.__hasInitBrowserLayout) return;
this.__hasInitBrowserLayout = true; this.__hasInitBrowserLayout = true;
this.openWatermark(); 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); let newContainer = document.getElementById(kNewContainerId);
for (let id of kNavbarItems) { for (let id of kNavbarItems) {
const node = document.getElementById(id); 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; if (!node) continue;
newContainer.appendChild(node); newContainer.appendChild(node);
} }
// Fix notification deck // 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 // Disable smooth scroll
gBrowser.tabContainer.arrowScrollbox.smoothScroll = false; gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
@ -39,39 +36,37 @@ var ZenStartup = {
function throttle(f, delay) { function throttle(f, delay) {
let timer = 0; 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(); this.closeWatermark();
}, },
_updateTabsToolbar() { _updateTabsToolbar() {
// Set tabs max-height to the "toolbar-items" height // 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 tabs.style.maxHeight = '0px'; // reset to 0
const toolbarRect = toolbarItems.getBoundingClientRect(); const toolbarRect = toolbarItems.getBoundingClientRect();
// -5 for the controls padding // -5 for the controls padding
let totalHeight = toolbarRect.height - 15; let totalHeight = toolbarRect.height - 15;
// remove the height from other elements that aren't hidden // 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) { for (let tab of otherElements) {
if (tabs === tab) continue; if (tabs === tab) continue;
totalHeight -= tab.getBoundingClientRect().height; 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() { openWatermark() {
if (!Services.prefs.getBoolPref("zen.watermark.enabled", false)) { if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
return; return;
} }
const watermark = window.MozXULElement.parseXULToFragment(` const watermark = window.MozXULElement.parseXULToFragment(`
@ -83,50 +78,47 @@ var ZenStartup = {
}, },
closeWatermark() { closeWatermark() {
const watermark = document.getElementById("zen-watermark"); const watermark = document.getElementById('zen-watermark');
if (watermark) { if (watermark) {
watermark.setAttribute("hidden", "true"); watermark.setAttribute('hidden', 'true');
} }
}, },
_changeSidebarLocation() { _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) { 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) { for (let id of kElementsToAppend) {
const elem = document.getElementById(id); const elem = document.getElementById(id);
if (elem) { if (elem) {
wrapper.prepend(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) { if (!legacyLocation) {
browser.prepend(toolbox); browser.prepend(toolbox);
} }
// remove all styles except for the width, since we are xulstoring the complet style list // remove all styles except for the width, since we are xulstoring the complet style list
const width = toolbox.style.width; const width = toolbox.style.width;
toolbox.removeAttribute("style"); toolbox.removeAttribute('style');
toolbox.style.width = width; toolbox.style.width = width;
// Set a splitter to navigator-toolbox // 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() { _focusSearchBar() {

View file

@ -1,4 +1,3 @@
var gZenUIManager = { var gZenUIManager = {
openAndChangeToTab(url, options) { openAndChangeToTab(url, options) {
if (window.ownerGlobal.parent) { if (window.ownerGlobal.parent) {
@ -12,11 +11,11 @@ var gZenUIManager = {
}, },
generateUuidv4() { 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() { toogleBookmarksSidebar() {
const button = document.getElementById('zen-bookmark-button'); const button = document.getElementById('zen-bookmark-button');
SidebarController.toggle('viewBookmarksSidebar', button); SidebarController.toggle('viewBookmarksSidebar', button);
@ -24,7 +23,7 @@ var gZenUIManager = {
createValidXULText(text) { createValidXULText(text) {
return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
} },
}; };
var gZenVerticalTabsManager = { var gZenVerticalTabsManager = {
@ -55,7 +54,7 @@ var gZenVerticalTabsManager = {
${Services.prefs.getBoolPref(kConfigKey) ? 'checked="true"' : ''} ${Services.prefs.getBoolPref(kConfigKey) ? 'checked="true"' : ''}
data-lazy-l10n-id="zen-toolbar-context-tabs-right"/> 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); let rightSide = Services.prefs.getBoolPref(kConfigKey);
Services.prefs.setBoolPref(kConfigKey, !rightSide); Services.prefs.setBoolPref(kConfigKey, !rightSide);
}); });
@ -156,21 +155,18 @@ var gZenCompactModeManager = {
if (this._flashSidebarTimeout) { if (this._flashSidebarTimeout) {
clearTimeout(this._flashSidebarTimeout); clearTimeout(this._flashSidebarTimeout);
} else { } 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() { toggleToolbar() {
let toolbar = document.getElementById('zen-appcontent-navbar-container'); let toolbar = document.getElementById('zen-appcontent-navbar-container');
toolbar.toggleAttribute('zen-user-show'); toolbar.toggleAttribute('zen-user-show');
} },
}; };

View file

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

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

View file

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

View file

@ -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 { & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
width: -moz-available; width: -moz-available;
box-shadow: 0 0 0 1px var(--zen-colors-border); box-shadow: 0 0 0 1px var(--zen-colors-border);

View file

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

View file

@ -4,8 +4,8 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. * 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" */ /** This file is used to override UI inside "common-shared.css" */
@ -13,7 +13,7 @@
xul|button { xul|button {
border-radius: var(--zen-button-border-radius) !important; border-radius: var(--zen-button-border-radius) !important;
padding: var(--zen-button-padding) !important; padding: var(--zen-button-padding) !important;
transition: .1s; transition: 0.1s;
min-width: 100px !important; min-width: 100px !important;
font-weight: 500 !important; font-weight: 500 !important;
} }
@ -22,20 +22,14 @@ button:active {
transform: scale(0.95); 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; min-width: unset !important;
border-radius: 6px !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)), :host(:is(.anonymous-content-host, notification-message)),
:root { :root {
--zen-button-border-radius: 20px; --zen-button-border-radius: 20px;

View file

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

View file

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

View file

@ -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; 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; animation: zen-jello-out-animation 0.2s ease-in-out;
} }

View file

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

View file

@ -33,7 +33,7 @@ panelview .unified-extensions-item-action-button {
} }
> .unified-extensions-item-menu-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; padding: 0;
> .toolbarbutton-icon { > .toolbarbutton-icon {
@ -43,7 +43,6 @@ panelview .unified-extensions-item-action-button {
} }
&:hover { &:hover {
> .toolbarbutton-icon { > .toolbarbutton-icon {
background-color: initial; background-color: initial;
} }
@ -66,4 +65,4 @@ panelview .unified-extensions-item-action-button {
background-color: var(--panel-item-active-bgcolor); background-color: var(--panel-item-active-bgcolor);
} }
} }
} }

View file

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

View file

@ -3,28 +3,28 @@
border: 1px solid var(--zen-dialog-border-color); 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); 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; 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; width: 100% !important;
height: 100% !important; height: 100% !important;
max-height: none !important; max-height: none !important;
max-width: 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; --zen-welcome-dialog-space: 7px;
margin: 0 auto !important; margin: 0 auto !important;
max-width: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !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; max-height: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important;
margin-top: var(--zen-welcome-dialog-space) !important; margin-top: var(--zen-welcome-dialog-space) !important;
} }

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,7 +1,6 @@
/* Styles for both vertical and horizontal tabs */ /* 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 { #zen-tabbox-wrapper {
position: relative; position: relative;

View file

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

View file

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

View file

@ -1,4 +1,3 @@
/* Here, we contain all the theme related variables, for example theme /* Here, we contain all the theme related variables, for example theme
* colors, border radius, etc. * colors, border radius, etc.
* We have `--zen-border-radius` and `--zen-primary-color` as variables. * We have `--zen-border-radius` and `--zen-primary-color` as variables.
@ -7,7 +6,6 @@
:host(:is(.anonymous-content-host, notification-message)), :host(:is(.anonymous-content-host, notification-message)),
:root, :root,
.zenLooksAndFeelColorOption { .zenLooksAndFeelColorOption {
/** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
* in the preferences page. * in the preferences page.
*/ */
@ -30,12 +28,12 @@
--zen-dialog-background: var(--zen-colors-tertiary); --zen-dialog-background: var(--zen-colors-tertiary);
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, #f7f7f7 92%); --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( --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%, black 65%),
color-mix(in srgb, var(--zen-primary-color) 35%, white 65%) color-mix(in srgb, var(--zen-primary-color) 35%, white 65%)
) !important; ) !important;
--in-content-primary-button-background-hover: light-dark( --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%, black 60%),
color-mix(in srgb, var(--zen-primary-color) 40%, white 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%) color-mix(in srgb, var(--zen-primary-color) 15%, transparent 85%)
) !important; ) !important;
--button-bgcolor: var(--in-content-button-background) !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; --focus-outline-color: var(--button-bgcolor) !important;
--in-content-button-text-color: var(--zen-secondary-btn-color) !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-bgcolor: var(--in-content-primary-button-background) !important;
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !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-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; --in-content-page-background: var(--zen-colors-tertiary) !important;
--zen-in-content-dialog-background: var(--zen-colors-tertiary); --zen-in-content-dialog-background: var(--zen-colors-tertiary);
--zen-button-border-radius: 7px; --zen-button-border-radius: 7px;
--zen-button-padding: .6rem 1.2rem; --zen-button-padding: 0.6rem 1.2rem;
/* Other colors */ /* Other colors */
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important; --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-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-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-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-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-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-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-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-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%); --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 { :root {
--toolbar-bgcolor: light-dark(white, #1b1b1b) !important; --toolbar-bgcolor: light-dark(white, #1b1b1b) !important;
--zen-themed-toolbar-bg: var(--toolbar-bgcolor); --zen-themed-toolbar-bg: var(--toolbar-bgcolor);

View file

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

View file

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

View file

@ -1,4 +1,3 @@
#zen-workspaces-button { #zen-workspaces-button {
--zen-workspaces-button-vmargin: 0.4rem; --zen-workspaces-button-vmargin: 0.4rem;
border: 1px solid var(--zen-colors-border); border: 1px solid var(--zen-colors-border);
@ -11,13 +10,13 @@
align-items: center; align-items: center;
display: flex; display: flex;
:root[zen-sidebar-legacy="true"] & { :root[zen-sidebar-legacy='true'] & {
margin-top: 0 !important; margin-top: 0 !important;
} }
} }
#zen-workspaces-button .zen-workspace-sidebar-name { #zen-workspaces-button .zen-workspace-sidebar-name {
margin-left: .2rem; margin-left: 0.2rem;
display: none; display: none;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -25,23 +24,24 @@
font-size: 12px; 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 */ /** Keep these selectors in sync with the ones in vertical-tabs.css */
#navigator-toolbox:is( #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 { & #zen-workspaces-button .zen-workspace-sidebar-name {
display: block; display: block;
} }
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] { & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] {
display: none; 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; margin-left: 0;
} }
@ -93,8 +93,8 @@
border-radius: 7px; 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); border-color: var(--zen-colors-secondary);
} }
@ -126,7 +126,7 @@
flex-shrink: 0; flex-shrink: 0;
} }
#PanelUI-zen-workspaces-list[empty="true"] { #PanelUI-zen-workspaces-list[empty='true'] {
font-weight: 600; font-weight: 600;
padding: 10px; padding: 10px;
width: 100%; width: 100%;
@ -139,7 +139,7 @@
} }
#PanelUI-zen-workspaces-list toolbarbutton, #PanelUI-zen-workspaces-list toolbarbutton,
#PanelUI-zen-workspaces-current-info toolbarbutton { #PanelUI-zen-workspaces-current-info toolbarbutton {
padding: 5px; padding: 5px;
border-radius: 7px; border-radius: 7px;
@ -180,7 +180,7 @@
} }
&:hover .zen-workspace-actions, &:hover .zen-workspace-actions,
& .zen-workspace-actions[active="true"] { & .zen-workspace-actions[active='true'] {
display: flex; display: flex;
} }
} }
@ -212,7 +212,7 @@
width: 100%; 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%; width: 100%;
} }

View file

@ -1,9 +1,8 @@
/* This Source Code Form is subject to the terms of the Mozilla Public /* 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, * 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/. */ * You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict"; 'use strict';
/* INCLUDE THIS FILE AS: /* INCLUDE THIS FILE AS:
* <script src="chrome://browser/content/zenThemeModifier.js"></script> * <script src="chrome://browser/content/zenThemeModifier.js"></script>
@ -11,30 +10,26 @@
* FOR ANY WEBSITE THAT WOULD NEED TO USE THE ACCENT COLOR, ETC * 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 = { var ZenThemeModifier = {
_inMainBrowserWindow: false, _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() { init() {
this._inMainBrowserWindow = window.location.href == "chrome://browser/content/browser.xhtml"; this._inMainBrowserWindow = window.location.href == 'chrome://browser/content/browser.xhtml';
this.listenForEvents(); this.listenForEvents();
this.updateAllThemeBasics(); this.updateAllThemeBasics();
this._onPrefersColorSchemeChange(); this._onPrefersColorSchemeChange();
@ -49,7 +44,7 @@ var ZenThemeModifier = {
Services.prefs.addObserver(pref, handleEvent); Services.prefs.addObserver(pref, handleEvent);
} }
window.addEventListener("unload", () => { window.addEventListener('unload', () => {
for (let pref of kZenThemePrefsList) { for (let pref of kZenThemePrefsList) {
Services.prefs.removeObserver(pref, handleEvent); 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() { async updateAllThemeBasics() {
this.updateAccentColor(); this.updateAccentColor();
this.updateBorderRadius(); this.updateBorderRadius();
@ -71,24 +66,24 @@ var ZenThemeModifier = {
}, },
updateBorderRadius() { 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() { 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. * Update the accent color.
*/ */
updateAccentColor() { 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 // Notify the page that the accent color has changed, only if a function
// handler is defined. // handler is defined.
if (typeof window.zenPageAccentColorChanged === "function") { if (typeof window.zenPageAccentColorChanged === 'function') {
window.zenPageAccentColorChanged(accentColor); window.zenPageAccentColorChanged(accentColor);
} }
}, },
@ -98,35 +93,33 @@ var ZenThemeModifier = {
}, },
_updateZenAvatar() { _updateZenAvatar() {
if (typeof ProfileService === "undefined") { if (typeof ProfileService === 'undefined') {
return; return;
} }
const mainWindowEl = document.documentElement; const mainWindowEl = document.documentElement;
// Dont override the sync avatar if it's already set // 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; return;
} }
let profile = ProfileService.currentProfile; 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 // TODO: actually use profile data to generate the avatar, instead of just using the name
let avatarUrl = this._getThemedAvatar(profile.zenAvatarPath); 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) { _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; return avatarPath;
} }
let withoutExtension = avatarPath.slice(0, -4); 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`; return `${withoutExtension}-${scheme}.svg`;
}, },
}; };
if (typeof Services !== "undefined") if (typeof Services !== 'undefined') ZenThemeModifier.init();
ZenThemeModifier.init();

View file

@ -1,9 +1,8 @@
# Checkout this documentation to build new tab assets # 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 ./mach npm run bundle --prefix=browser/components/newtab

View file

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

View file

@ -3,11 +3,11 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/. // file, You can obtain one at http://mozilla.org/MPL/2.0/.
var gZenNewWebPanel = { 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 { try {
let url = new URL(aURL.value); let url = new URL(aURL.value);
} catch (_) { } catch (_) {
@ -31,10 +31,10 @@ var gZenNewWebPanel = {
return url; return url;
}, },
handleDialogAccept: async function(aEvent) { handleDialogAccept: async function (aEvent) {
document.commandDispatcher.focusedElement?.blur(); 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) { if (!url || !ua) {
return; return;
} }
@ -51,12 +51,12 @@ var gZenNewWebPanel = {
url: urlValue, url: urlValue,
ua: ua.value, 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.index.push(newName);
currentData.data[newName] = newSite; 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();

View file

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

View file

@ -1,4 +1,3 @@
# Important notes! # 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. 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.

View file

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

View file

@ -1,86 +1,76 @@
// This Source Code Form is subject to the terms of the Mozilla Public // 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 // 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/. // 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, { XPCOMUtils.defineLazyModuleGetters(this, {
AddonManager: 'resource://gre/modules/AddonManager.jsm', AddonManager: 'resource://gre/modules/AddonManager.jsm',
MigrationUtils: 'resource:///modules/MigrationUtils.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 // Util stuff copied from browser/components/preferences/search.js
class EngineStore { class EngineStore {
constructor() { constructor() {
this._engines = [] this._engines = [];
} }
async init() { async init() {
const visibleEngines = await Services.search.getVisibleEngines() const visibleEngines = await Services.search.getVisibleEngines();
this.initSpecificEngine(visibleEngines) this.initSpecificEngine(visibleEngines);
} }
getEngine() { getEngine() {
return this._engines return this._engines;
} }
initSpecificEngine(engines) { initSpecificEngine(engines) {
for (const engine of engines) { for (const engine of engines) {
try { try {
this._engines.push(this._cloneEngine(engine)) this._engines.push(this._cloneEngine(engine));
} catch (e) { } catch (e) {
// Ignore engines that throw an exception when cloning. // Ignore engines that throw an exception when cloning.
console.error(e) console.error(e);
} }
} }
} }
getEngineByName(name) { getEngineByName(name) {
return this._engines.find((engine) => engine.name == name) return this._engines.find((engine) => engine.name == name);
} }
_cloneEngine(aEngine) { _cloneEngine(aEngine) {
const clonedObj = {} const clonedObj = {};
for (const i of ['name', 'alias', '_iconURI', 'hidden']) { 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() { 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) { 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 { class Page {
/** /**
@ -88,7 +78,7 @@ class Page {
* @param {string} id The id of the element that represents this page. * @param {string} id The id of the element that represents this page.
*/ */
constructor(id) { constructor(id) {
this.element = document.getElementById(id) this.element = document.getElementById(id);
} }
/** /**
@ -96,78 +86,81 @@ class Page {
* @param {Pages} pages The pages wrapper * @param {Pages} pages The pages wrapper
*/ */
setPages(pages) { setPages(pages) {
this.pages = pages this.pages = pages;
} }
hide() { hide() {
this.element.setAttribute('hidden', 'true') this.element.setAttribute('hidden', 'true');
} }
show() { show() {
this.element.removeAttribute('hidden') this.element.removeAttribute('hidden');
} }
} }
class Themes extends Page { class Themes extends Page {
constructor(id) { constructor(id) {
super(id) super(id);
this.loadThemes() this.loadThemes();
} }
async loadThemes() { async loadThemes() {
window.addEventListener('DOMContentLoaded', this.setColorBar); 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 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) => { themeElements.forEach((theme, i) => {
let container = themeList.children[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) { if (themes.find((t) => t.id === theme).isActive) {
container.classList.add('selected') container.classList.add('selected');
} }
}) });
} }
setColorBar() { setColorBar() {
const colorList = document.getElementById('colorListWrapper'); 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) => { 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 { class Thanks extends Page {
constructor(id) { constructor(id) {
super(id) super(id);
// Thanks :) // Thanks :)
} }
@ -175,28 +168,28 @@ class Thanks extends Page {
class Search extends Page { class Search extends Page {
constructor(id) { constructor(id) {
super(id) super(id);
this.store = new EngineStore() this.store = new EngineStore();
this.searchList = [] this.searchList = [];
this.loadSearch() this.loadSearch();
} }
async 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) => { 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) { async loadSpecificSearch(search, defaultSearch) {
const container = document.createElement('div'); 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) { if (search.name == defaultSearch._name) {
container.classList.add('selected') container.classList.add('selected');
} }
container.addEventListener('click', () => { 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'); const img = document.createElement('img');
img.src = await search.originalEngine.getIconURL(); 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 { class Import extends Page {
constructor(id) { constructor(id) {
super(id) super(id);
const importButton = document.getElementById('importBrowser') const importButton = document.getElementById('importBrowser');
importButton.addEventListener('click', async () => { importButton.addEventListener('click', async () => {
MigrationUtils.showMigrationWizard(window, { MigrationUtils.showMigrationWizard(window, {
zenBlocking: true, zenBlocking: true,
}); });
}) });
} }
} }
@ -249,62 +242,62 @@ class Pages {
* @param {Page[]} pages The pages * @param {Page[]} pages The pages
*/ */
constructor(pages) { constructor(pages) {
console.info("Initializing welcome pages..."); console.info('Initializing welcome pages...');
this.pages = pages this.pages = pages;
this.currentPage = 0; this.currentPage = 0;
window.maximize(); window.maximize();
this.pages.forEach((page) => page.setPages(this)) this.pages.forEach((page) => page.setPages(this));
this._displayCurrentPage(); 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.nextEl.addEventListener('click', () => {
this.next() this.next();
this.prevEl.removeAttribute('disabled') this.prevEl.removeAttribute('disabled');
}) });
this.prevEl.addEventListener('click', () => { this.prevEl.addEventListener('click', () => {
this.currentPage-- this.currentPage--;
this._displayCurrentPage() this._displayCurrentPage();
if (this.pages.currentPage === 1) { if (this.pages.currentPage === 1) {
this.prevEl.setAttribute('disabled', 'true') this.prevEl.setAttribute('disabled', 'true');
} }
}); });
} }
next() { next() {
this.currentPage++ this.currentPage++;
if (this.currentPage >= this.pages.length) { if (this.currentPage >= this.pages.length) {
// We can use internal js apis to close the window. We also want to set // 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 // the settings api for welcome seen to false to stop it showing again
Services.prefs.setBoolPref(kWelcomeSeenPref, true) Services.prefs.setBoolPref(kWelcomeSeenPref, true);
close(); close();
return return;
} }
this._displayCurrentPage() this._displayCurrentPage();
} }
_displayCurrentPage() { _displayCurrentPage() {
let progress = document.getElementById('circular-progress'); let progress = document.getElementById('circular-progress');
progress.style.setProperty('--progress', ((this.currentPage + 1) / this.pages.length) * 100); progress.style.setProperty('--progress', ((this.currentPage + 1) / this.pages.length) * 100);
for (const page of this.pages) { for (const page of this.pages) {
page.hide() page.hide();
} }
if (this.currentPage >= 1) { if (this.currentPage >= 1) {
document.body.classList.remove('gradient-background') document.body.classList.remove('gradient-background');
} else { } 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 Import('import'),
new Search('search'), new Search('search'),
new Thanks('thanks'), new Thanks('thanks'),
]) ]);

View file

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

View file

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

View file

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

File diff suppressed because it is too large Load diff

View file

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