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
parent
b0e7e8cb0d
commit
80136189b1
56 changed files with 1246 additions and 1230 deletions
1
.github/FUNDING.yml
vendored
1
.github/FUNDING.yml
vendored
|
|
@ -1,3 +1,2 @@
|
|||
|
||||
patreon: zen_browser
|
||||
ko_fi: zen_browser
|
||||
|
|
|
|||
2
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
2
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
|
|
@ -34,7 +34,7 @@ body:
|
|||
label: Reproducible?
|
||||
description: Is this issue reproducible on Firefox?
|
||||
options:
|
||||
- label: I have checked that this issue cannot be reproduced on Mozilla Firefox.
|
||||
- label: I have checked that this issue cannot be reproduced on Mozilla Firefox.
|
||||
- type: input
|
||||
id: version
|
||||
attributes:
|
||||
|
|
|
|||
2
.github/ISSUE_TEMPLATE/config.yml
vendored
2
.github/ISSUE_TEMPLATE/config.yml
vendored
|
|
@ -1 +1 @@
|
|||
blank_issues_enabled: false
|
||||
blank_issues_enabled: false
|
||||
|
|
|
|||
28
.github/workflows/alpha.yml
vendored
28
.github/workflows/alpha.yml
vendored
|
|
@ -15,7 +15,6 @@ on:
|
|||
type: 'boolean'
|
||||
|
||||
jobs:
|
||||
|
||||
build-data:
|
||||
permissions:
|
||||
contents: write
|
||||
|
|
@ -34,7 +33,7 @@ jobs:
|
|||
with:
|
||||
submodules: recursive
|
||||
token: ${{ secrets.DEPLOY_KEY }}
|
||||
|
||||
|
||||
- name: Install pnpm
|
||||
run: npm install -g pnpm
|
||||
|
||||
|
|
@ -97,7 +96,7 @@ jobs:
|
|||
|
||||
- name: Install pnpm
|
||||
run: npm install -g pnpm
|
||||
|
||||
|
||||
- name: Get pnpm store directory
|
||||
id: pnpm-cache
|
||||
shell: bash
|
||||
|
|
@ -115,7 +114,7 @@ jobs:
|
|||
run: |
|
||||
echo "There's a bug in the surfer CLI, we run this so that surfer sets everything up correctly"
|
||||
pnpm surfer ci --brand alpha --display-version ${{ needs.build-data.outputs.version }}
|
||||
|
||||
|
||||
- name: Check version
|
||||
run: |
|
||||
echo "$(pwd)"
|
||||
|
|
@ -128,7 +127,6 @@ jobs:
|
|||
exit 1
|
||||
fi
|
||||
|
||||
|
||||
source:
|
||||
permissions:
|
||||
contents: write
|
||||
|
|
@ -225,7 +223,7 @@ jobs:
|
|||
permissions:
|
||||
contents: write
|
||||
secrets: inherit
|
||||
needs: [build-data]
|
||||
needs: [build-data]
|
||||
with:
|
||||
build-version: ${{ needs.build-data.outputs.version }}
|
||||
|
||||
|
|
@ -344,7 +342,7 @@ jobs:
|
|||
|
||||
cp -a ../windows_update_manifest_generic/. updates/
|
||||
cp -a ../windows_update_manifest_specific/. updates/
|
||||
|
||||
|
||||
cp -a ../macos_update_manifest_aarch64/. updates/
|
||||
cp -a ../macos_update_manifest_x64/. updates/
|
||||
|
||||
|
|
@ -430,7 +428,6 @@ jobs:
|
|||
# output the version to the file
|
||||
echo -n ${{ needs.build-data.outputs.version }} > ./flatpak/version
|
||||
|
||||
|
||||
- uses: stefanzweifel/git-auto-commit-action@v4
|
||||
with:
|
||||
commit_message: '[release]: Update flatpak manifest'
|
||||
|
|
@ -512,13 +509,13 @@ jobs:
|
|||
title: 🚀 Update to version ${{ needs.build-data.outputs.version }}
|
||||
body: |
|
||||
This PR updates the Zen Browser Flatpak package to version ${{ needs.build-data.outputs.version }}.
|
||||
|
||||
|
||||
@${{ github.actor }} please review and merge this PR.
|
||||
branch: update-to-${{ needs.build-data.outputs.version }}
|
||||
base: master
|
||||
git-token: ${{ secrets.DEPLOY_KEY }}
|
||||
delete-branch: true
|
||||
|
||||
|
||||
release-homebrew:
|
||||
if: ${{ github.event.inputs.create_release == 'true' }}
|
||||
permissions: write-all
|
||||
|
|
@ -531,14 +528,14 @@ jobs:
|
|||
uses: actions/checkout@v4
|
||||
with:
|
||||
token: ${{ secrets.DEPLOY_KEY }}
|
||||
|
||||
|
||||
- name: Setup git
|
||||
run: |
|
||||
git pull
|
||||
git config --global user.name "github-actions[bot]"
|
||||
git config --global user.email "github-actions[bot]@users.noreply.github.com"
|
||||
|
||||
- name: Download macOS ARM build
|
||||
- name: Download macOS ARM build
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
name: zen.macos-aarch64.dmg
|
||||
|
|
@ -550,9 +547,9 @@ jobs:
|
|||
|
||||
- name: Update zen-browser Cask
|
||||
run: sh .github/workflows/src/update-homebrew.sh ${{ needs.build-data.outputs.version }}
|
||||
|
||||
- name: Clean up
|
||||
run: |
|
||||
|
||||
- name: Clean up
|
||||
run: |
|
||||
rm -rf zen.macos-x64.dmg
|
||||
rm -rf zen.macos-aarch64.dmg
|
||||
|
||||
|
|
@ -562,4 +559,3 @@ jobs:
|
|||
commit_message: 🔖 Update version to ${{ steps.data.outputs.version }} for homebrew!
|
||||
commit_user_name: Zen Browser Robot
|
||||
commit_user_email: zen-browser-bot@users.noreply.github.com
|
||||
|
||||
|
|
|
|||
2
.github/workflows/clear-cache.yml
vendored
2
.github/workflows/clear-cache.yml
vendored
|
|
@ -27,4 +27,4 @@ jobs:
|
|||
cache_id: cache.id,
|
||||
})
|
||||
}
|
||||
console.log("Clear completed")
|
||||
console.log("Clear completed")
|
||||
|
|
|
|||
4
.github/workflows/stale.yml
vendored
4
.github/workflows/stale.yml
vendored
|
|
@ -1,7 +1,7 @@
|
|||
name: Close inactive issues
|
||||
on:
|
||||
schedule:
|
||||
- cron: "0 0 * * *"
|
||||
- cron: '0 0 * * *'
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
|
|
@ -15,7 +15,7 @@ jobs:
|
|||
with:
|
||||
days-before-issue-stale: 30
|
||||
days-before-issue-close: 14
|
||||
stale-issue-label: "stale"
|
||||
stale-issue-label: 'stale'
|
||||
stale-issue-message: |
|
||||
This issue is stale because it has been open for 30 days with no activity.
|
||||
|
||||
|
|
|
|||
20
.github/workflows/windows-alpha-build.yml
vendored
20
.github/workflows/windows-alpha-build.yml
vendored
|
|
@ -2,7 +2,7 @@ name: Windows Alpha Build
|
|||
on:
|
||||
workflow_call:
|
||||
inputs:
|
||||
generate-gpo:
|
||||
generate-gpo:
|
||||
required: true
|
||||
type: boolean
|
||||
default: false
|
||||
|
|
@ -59,7 +59,7 @@ jobs:
|
|||
- name: Download
|
||||
run: pnpm surfer download
|
||||
|
||||
- name: "win-cross Cache"
|
||||
- name: 'win-cross Cache'
|
||||
env:
|
||||
SEGMENT_DOWNLOAD_TIMEOUT_MINS: 5
|
||||
id: cache-win-cross
|
||||
|
|
@ -81,16 +81,16 @@ jobs:
|
|||
set -x
|
||||
mkdir -p ~/win-cross
|
||||
cd engine/
|
||||
|
||||
|
||||
echo Setup wine
|
||||
aria2c "https://firefox-ci-tc.services.mozilla.com/api/index/v1/task/gecko.cache.level-1.toolchains.v3.linux64-wine.latest/artifacts/public%2Fbuild%2Fwine.tar.zst" -o wine.tar.zst
|
||||
tar --zstd -xvf wine.tar.zst -C ~/win-cross
|
||||
rm wine.tar.zst
|
||||
|
||||
|
||||
echo Setup Visual Studio
|
||||
sudo apt install -y msitools python3-pip
|
||||
./mach python --virtualenv build taskcluster/scripts/misc/get_vs.py build/vs/vs2022.yaml ~/win-cross/vs2022
|
||||
|
||||
|
||||
- name: Bootstrap
|
||||
run: |
|
||||
set -x
|
||||
|
|
@ -113,14 +113,14 @@ jobs:
|
|||
|
||||
ls ~/win-cross/wine || true
|
||||
ls ~/win-cross/vs2022 || true
|
||||
|
||||
- name: setup Rust
|
||||
|
||||
- name: setup Rust
|
||||
run: |
|
||||
cd engine/
|
||||
# Install a rust version compatible with 17
|
||||
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y --default-toolchain 1.79
|
||||
source $HOME/.cargo/env
|
||||
|
||||
|
||||
rustup target add x86_64-pc-windows-msvc
|
||||
cargo install cargo-download
|
||||
cargo download -x windows=0.52.0
|
||||
|
|
@ -137,7 +137,7 @@ jobs:
|
|||
|
||||
- name: Build language packs
|
||||
run: sh scripts/download-language-packs.sh
|
||||
|
||||
|
||||
- uses: actions/download-artifact@v4
|
||||
name: Download artifact if use profdata
|
||||
if: ${{ !inputs.generate-gpo }}
|
||||
|
|
@ -210,7 +210,7 @@ jobs:
|
|||
with:
|
||||
name: ${{ matrix.generic == true && 'generic' || 'specific' }}-${{ inputs.profile-data-path-archive }}
|
||||
path: ./zen.win64-pgo-stage-1.zip
|
||||
|
||||
|
||||
- name: Upload mar
|
||||
uses: actions/upload-artifact@v4
|
||||
if: ${{ !inputs.generate-gpo }}
|
||||
|
|
|
|||
12
.github/workflows/windows-profile-build.yml
vendored
12
.github/workflows/windows-profile-build.yml
vendored
|
|
@ -40,18 +40,18 @@ jobs:
|
|||
run: |
|
||||
npm i -g @zen-browser/surfer
|
||||
- uses: actions/download-artifact@v4
|
||||
name: Download artifact
|
||||
name: Download artifact
|
||||
with:
|
||||
path: C:\artifact
|
||||
name: ${{ matrix.generic == true && 'generic' || 'specific' }}-zen-windows-x86_64-profile-data-and-jarlog.zip
|
||||
|
||||
- name: Unpack artifact
|
||||
- name: Unpack artifact
|
||||
run: |
|
||||
cd C:\artifact
|
||||
ls
|
||||
Expand-Archive -Path .\${{ inputs.profile-data-path-archive }} -DestinationPath C:\artifact
|
||||
ls
|
||||
- name: Setup
|
||||
- name: Setup
|
||||
run: |
|
||||
(New-Object System.Net.WebClient).DownloadFile("https://ftp.mozilla.org/pub/mozilla/libraries/win32/MozillaBuildSetup-Latest.exe","C:\MozillaBuildSetup-Latest.exe")
|
||||
C:\MozillaBuildSetup-Latest.exe /S | out-null
|
||||
|
|
@ -59,7 +59,7 @@ jobs:
|
|||
run: |
|
||||
git config --global core.safecrlf false
|
||||
pnpm surfer download
|
||||
- name: Generate
|
||||
- name: Generate
|
||||
run: |
|
||||
ls
|
||||
$Env:USE_MINTTY = "0"
|
||||
|
|
@ -72,7 +72,7 @@ jobs:
|
|||
echo 'ls /c/Users/runneradmin/.mozbuild/clang/bin' '' >> mozilla-build-run.sh
|
||||
echo 'LLVM_PROFDATA=/c/Users/runneradmin/.mozbuild/clang/bin/llvm-profdata.exe JARLOG_FILE=en-US.log ./mach python build/pgo/profileserver.py --binary /c/artifact/zen/zen.exe' '' >> mozilla-build-run.sh
|
||||
C:\mozilla-build\start-shell.bat $workspace_dir_current\mozilla-build-run.sh
|
||||
|
||||
|
||||
- name: 🐛 Debug Session
|
||||
if: ${{ failure() }}
|
||||
uses: Warpbuilds/gha-debug@v1.3
|
||||
|
|
@ -91,4 +91,4 @@ jobs:
|
|||
path: |
|
||||
merged.profdata
|
||||
en-US.log
|
||||
name: windows-profdata-${{ matrix.generic == true && 'generic' || 'specific' }}
|
||||
name: windows-profdata-${{ matrix.generic == true && 'generic' || 'specific' }}
|
||||
|
|
|
|||
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
|
@ -19,4 +19,4 @@
|
|||
"span": "cpp",
|
||||
"vector": "cpp"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"policies": {
|
||||
"DisableAppUpdate": true,
|
||||
"AppAutoUpdate": false,
|
||||
"ManualAppUpdateOnly": true,
|
||||
"BackgroundAppUpdate": false
|
||||
"DisableAppUpdate": true,
|
||||
"AppAutoUpdate": false,
|
||||
"ManualAppUpdateOnly": true,
|
||||
"BackgroundAppUpdate": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
|
||||
## Changed things that should be tested each release
|
||||
|
||||
* Workspaces
|
||||
* Sidebar
|
||||
* Split views
|
||||
* Vertical tabs (expanded and not expanded)
|
||||
* Tab groups
|
||||
* Welcome Page
|
||||
* Overall performance
|
||||
* Overall stability
|
||||
* Pinning tabs (Grid layout)
|
||||
* Overall UX
|
||||
* Themes Page
|
||||
* Settings Page
|
||||
- Workspaces
|
||||
- Sidebar
|
||||
- Split views
|
||||
- Vertical tabs (expanded and not expanded)
|
||||
- Tab groups
|
||||
- Welcome Page
|
||||
- Overall performance
|
||||
- Overall stability
|
||||
- Pinning tabs (Grid layout)
|
||||
- Overall UX
|
||||
- Themes Page
|
||||
- Settings Page
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
# Custom Keyboard Shortcuts
|
||||
|
||||
```json
|
||||
|
|
|
|||
|
|
@ -1,31 +1,30 @@
|
|||
|
||||
# Supported CPUs for optimized builds (Windows and Linux)
|
||||
|
||||
> If you CPU is not listed, you should use the "Generic" build.
|
||||
|
||||
* AMD Family 15h (Excavator)
|
||||
* AMD Family 17h (Zen)
|
||||
* AMD Family 17h (Zen+)
|
||||
* AMD Family 17h (Zen 2)
|
||||
* AMD Family 19h (Zen 3)
|
||||
* Intel 4th Gen Core (Haswell)
|
||||
* Intel 5th Gen Core (Broadwell)
|
||||
* Intel 6th Gen Core (Skylake)
|
||||
* Intel 7th Gen Core (Kaby Lake)
|
||||
* Intel 8/9th Gen Core (Coffee Lake)
|
||||
* Intel 10th Gen Core (Comet Lake)
|
||||
* Intel 12th Gen (Alder Lake)
|
||||
* Intel 13th Gen (Raptor Lake)
|
||||
* Intel 14th Gen (Raptor Lake Refresh)
|
||||
* Intel 15th Gen (Lunar / Arrow Lake)
|
||||
* AMD Family 19h (Zen 4 / Zen 4c)
|
||||
* AMD Family 1Ah (Zen 5 / Zen 5c)
|
||||
* Intel 6th Gen Core (Skylake X)
|
||||
* Intel 8th Gen Core i3 (Cannon Lake)
|
||||
* Intel Xeon / 10th Gen Core (Ice Lake)
|
||||
* Intel Xeon (Cascade Lake)
|
||||
* Intel Xeon (Cooper Lake)
|
||||
* Intel 3rd Gen 10nm++ (Tiger Lake)
|
||||
* Intel 4th Gen 10nm++ (Sapphire Rapids)
|
||||
* Intel 5th Gen 10nm++ (Emerald Rapids)
|
||||
* Intel 11th Gen (Rocket Lake)
|
||||
- AMD Family 15h (Excavator)
|
||||
- AMD Family 17h (Zen)
|
||||
- AMD Family 17h (Zen+)
|
||||
- AMD Family 17h (Zen 2)
|
||||
- AMD Family 19h (Zen 3)
|
||||
- Intel 4th Gen Core (Haswell)
|
||||
- Intel 5th Gen Core (Broadwell)
|
||||
- Intel 6th Gen Core (Skylake)
|
||||
- Intel 7th Gen Core (Kaby Lake)
|
||||
- Intel 8/9th Gen Core (Coffee Lake)
|
||||
- Intel 10th Gen Core (Comet Lake)
|
||||
- Intel 12th Gen (Alder Lake)
|
||||
- Intel 13th Gen (Raptor Lake)
|
||||
- Intel 14th Gen (Raptor Lake Refresh)
|
||||
- Intel 15th Gen (Lunar / Arrow Lake)
|
||||
- AMD Family 19h (Zen 4 / Zen 4c)
|
||||
- AMD Family 1Ah (Zen 5 / Zen 5c)
|
||||
- Intel 6th Gen Core (Skylake X)
|
||||
- Intel 8th Gen Core i3 (Cannon Lake)
|
||||
- Intel Xeon / 10th Gen Core (Ice Lake)
|
||||
- Intel Xeon (Cascade Lake)
|
||||
- Intel Xeon (Cooper Lake)
|
||||
- Intel 3rd Gen 10nm++ (Tiger Lake)
|
||||
- Intel 4th Gen 10nm++ (Sapphire Rapids)
|
||||
- Intel 5th Gen 10nm++ (Emerald Rapids)
|
||||
- Intel 11th Gen (Rocket Lake)
|
||||
|
|
|
|||
|
|
@ -4,14 +4,12 @@ The `zen.sidepanels.data` configuration will be a JSON string that follows the f
|
|||
|
||||
```json
|
||||
{
|
||||
data: {
|
||||
"data": {
|
||||
"p1": {
|
||||
"url": "https://google.com",
|
||||
"ua": false, // "ua" may not be declared! (default: false)
|
||||
"ua": false // "ua" may not be declared! (default: false)
|
||||
}
|
||||
},
|
||||
"index": [
|
||||
"p1"
|
||||
]
|
||||
"index": ["p1"]
|
||||
}
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
# Workspaces Layout
|
||||
|
||||
```json
|
||||
|
|
@ -14,6 +13,7 @@
|
|||
]
|
||||
}
|
||||
```
|
||||
|
||||
To save the tabs and identity them, they will contain a `zen-workspace-uuid` attribute with the workspace uuid.
|
||||
|
||||
We will make use of firefox's builtin session restore feature to save the tabs and windows after the user closes the browser.
|
||||
|
|
|
|||
2
l10n
2
l10n
|
|
@ -1 +1 @@
|
|||
Subproject commit 7cd3067c878cbe7e6e8b91ac60189046fc3e0ef6
|
||||
Subproject commit 70a7e447b145c163f94728ca20a55ef4b0a50403
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
var ZenStartup = {
|
||||
init() {
|
||||
this._changeSidebarLocation();
|
||||
|
|
@ -12,23 +11,21 @@ var ZenStartup = {
|
|||
if (this.__hasInitBrowserLayout) return;
|
||||
this.__hasInitBrowserLayout = true;
|
||||
this.openWatermark();
|
||||
console.info("ZenThemeModifier: init browser layout");
|
||||
const kNavbarItems = [
|
||||
"nav-bar",
|
||||
"PersonalToolbar"
|
||||
];
|
||||
const kNewContainerId = "zen-appcontent-navbar-container";
|
||||
console.info('ZenThemeModifier: init browser layout');
|
||||
const kNavbarItems = ['nav-bar', 'PersonalToolbar'];
|
||||
const kNewContainerId = 'zen-appcontent-navbar-container';
|
||||
let newContainer = document.getElementById(kNewContainerId);
|
||||
for (let id of kNavbarItems) {
|
||||
const node = document.getElementById(id);
|
||||
console.assert(node, "Could not find node with id: " + id);
|
||||
console.assert(node, 'Could not find node with id: ' + id);
|
||||
if (!node) continue;
|
||||
newContainer.appendChild(node);
|
||||
}
|
||||
|
||||
// Fix notification deck
|
||||
document.getElementById("zen-appcontent-navbar-container")
|
||||
.appendChild(document.getElementById("tab-notification-deck-template"));
|
||||
document
|
||||
.getElementById('zen-appcontent-navbar-container')
|
||||
.appendChild(document.getElementById('tab-notification-deck-template'));
|
||||
|
||||
// Disable smooth scroll
|
||||
gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
|
||||
|
|
@ -39,39 +36,37 @@ var ZenStartup = {
|
|||
|
||||
function throttle(f, delay) {
|
||||
let timer = 0;
|
||||
return function(...args) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => f.apply(this, args), delay);
|
||||
}
|
||||
return function (...args) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => f.apply(this, args), delay);
|
||||
};
|
||||
}
|
||||
|
||||
new ResizeObserver(throttle(
|
||||
this._updateTabsToolbar.bind(this), 1000
|
||||
)).observe(document.getElementById("tabbrowser-tabs"));
|
||||
new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), 1000)).observe(document.getElementById('tabbrowser-tabs'));
|
||||
|
||||
this.closeWatermark();
|
||||
},
|
||||
|
||||
_updateTabsToolbar() {
|
||||
// Set tabs max-height to the "toolbar-items" height
|
||||
const toolbarItems = document.getElementById("tabbrowser-tabs");
|
||||
const tabs = document.getElementById("tabbrowser-arrowscrollbox");
|
||||
const toolbarItems = document.getElementById('tabbrowser-tabs');
|
||||
const tabs = document.getElementById('tabbrowser-arrowscrollbox');
|
||||
tabs.style.maxHeight = '0px'; // reset to 0
|
||||
const toolbarRect = toolbarItems.getBoundingClientRect();
|
||||
// -5 for the controls padding
|
||||
let totalHeight = toolbarRect.height - 15;
|
||||
// remove the height from other elements that aren't hidden
|
||||
const otherElements = document.querySelectorAll("#tabbrowser-tabs > *:not([hidden=\"true\"])");
|
||||
const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
|
||||
for (let tab of otherElements) {
|
||||
if (tabs === tab) continue;
|
||||
totalHeight -= tab.getBoundingClientRect().height;
|
||||
}
|
||||
tabs.style.maxHeight = totalHeight + "px";
|
||||
console.info("ZenThemeModifier: set tabs max-height to", totalHeight + "px");
|
||||
tabs.style.maxHeight = totalHeight + 'px';
|
||||
console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
|
||||
},
|
||||
|
||||
openWatermark() {
|
||||
if (!Services.prefs.getBoolPref("zen.watermark.enabled", false)) {
|
||||
if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
|
||||
return;
|
||||
}
|
||||
const watermark = window.MozXULElement.parseXULToFragment(`
|
||||
|
|
@ -83,50 +78,47 @@ var ZenStartup = {
|
|||
},
|
||||
|
||||
closeWatermark() {
|
||||
const watermark = document.getElementById("zen-watermark");
|
||||
const watermark = document.getElementById('zen-watermark');
|
||||
if (watermark) {
|
||||
watermark.setAttribute("hidden", "true");
|
||||
watermark.setAttribute('hidden', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
_changeSidebarLocation() {
|
||||
const legacyLocation = Services.prefs.getBoolPref("zen.themes.tabs.legacy-location", false);
|
||||
const kElementsToAppend = [
|
||||
"sidebar-splitter",
|
||||
"sidebar-box",
|
||||
];
|
||||
const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false);
|
||||
const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
|
||||
if (legacyLocation) {
|
||||
kElementsToAppend.push("navigator-toolbox");
|
||||
window.document.documentElement.setAttribute("zen-sidebar-legacy", "true");
|
||||
kElementsToAppend.push('navigator-toolbox');
|
||||
window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true');
|
||||
}
|
||||
const wrapper = document.getElementById("zen-tabbox-wrapper");
|
||||
const appWrapepr = document.getElementById("zen-sidebar-box-container");
|
||||
const wrapper = document.getElementById('zen-tabbox-wrapper');
|
||||
const appWrapepr = document.getElementById('zen-sidebar-box-container');
|
||||
for (let id of kElementsToAppend) {
|
||||
const elem = document.getElementById(id);
|
||||
if (elem) {
|
||||
wrapper.prepend(elem);
|
||||
}
|
||||
}
|
||||
appWrapepr.setAttribute("hidden", "true");
|
||||
appWrapepr.setAttribute('hidden', 'true');
|
||||
|
||||
const browser = document.getElementById("browser")
|
||||
const toolbox = document.getElementById("navigator-toolbox");
|
||||
const browser = document.getElementById('browser');
|
||||
const toolbox = document.getElementById('navigator-toolbox');
|
||||
if (!legacyLocation) {
|
||||
browser.prepend(toolbox);
|
||||
}
|
||||
|
||||
// remove all styles except for the width, since we are xulstoring the complet style list
|
||||
const width = toolbox.style.width;
|
||||
toolbox.removeAttribute("style");
|
||||
toolbox.removeAttribute('style');
|
||||
toolbox.style.width = width;
|
||||
|
||||
// Set a splitter to navigator-toolbox
|
||||
const splitter = document.createXULElement("splitter");
|
||||
splitter.setAttribute("id", "zen-sidebar-splitter");
|
||||
splitter.setAttribute("orient", "horizontal");
|
||||
splitter.setAttribute("resizebefore", "sibling");
|
||||
splitter.setAttribute("resizeafter", "none");
|
||||
toolbox.insertAdjacentElement("afterend", splitter);
|
||||
const splitter = document.createXULElement('splitter');
|
||||
splitter.setAttribute('id', 'zen-sidebar-splitter');
|
||||
splitter.setAttribute('orient', 'horizontal');
|
||||
splitter.setAttribute('resizebefore', 'sibling');
|
||||
splitter.setAttribute('resizeafter', 'none');
|
||||
toolbox.insertAdjacentElement('afterend', splitter);
|
||||
},
|
||||
|
||||
_focusSearchBar() {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
var gZenUIManager = {
|
||||
openAndChangeToTab(url, options) {
|
||||
if (window.ownerGlobal.parent) {
|
||||
|
|
@ -12,11 +11,11 @@ var gZenUIManager = {
|
|||
},
|
||||
|
||||
generateUuidv4() {
|
||||
return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
|
||||
(+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
|
||||
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
|
||||
(+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16)
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
toogleBookmarksSidebar() {
|
||||
const button = document.getElementById('zen-bookmark-button');
|
||||
SidebarController.toggle('viewBookmarksSidebar', button);
|
||||
|
|
@ -24,7 +23,7 @@ var gZenUIManager = {
|
|||
|
||||
createValidXULText(text) {
|
||||
return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var gZenVerticalTabsManager = {
|
||||
|
|
@ -55,7 +54,7 @@ var gZenVerticalTabsManager = {
|
|||
${Services.prefs.getBoolPref(kConfigKey) ? 'checked="true"' : ''}
|
||||
data-lazy-l10n-id="zen-toolbar-context-tabs-right"/>
|
||||
`);
|
||||
fragment.getElementById("zen-toolbar-context-tabs-right").addEventListener('click', () => {
|
||||
fragment.getElementById('zen-toolbar-context-tabs-right').addEventListener('click', () => {
|
||||
let rightSide = Services.prefs.getBoolPref(kConfigKey);
|
||||
Services.prefs.setBoolPref(kConfigKey, !rightSide);
|
||||
});
|
||||
|
|
@ -156,21 +155,18 @@ var gZenCompactModeManager = {
|
|||
if (this._flashSidebarTimeout) {
|
||||
clearTimeout(this._flashSidebarTimeout);
|
||||
} else {
|
||||
window.requestAnimationFrame(() =>
|
||||
sidebar.setAttribute('flash-popup', '')
|
||||
);
|
||||
window.requestAnimationFrame(() => sidebar.setAttribute('flash-popup', ''));
|
||||
}
|
||||
this._flashSidebarTimeout =
|
||||
setTimeout(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
sidebar.removeAttribute('flash-popup')
|
||||
this._flashSidebarTimeout = null;
|
||||
});
|
||||
}, this.flashSidebarDuration);
|
||||
this._flashSidebarTimeout = setTimeout(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
sidebar.removeAttribute('flash-popup');
|
||||
this._flashSidebarTimeout = null;
|
||||
});
|
||||
}, this.flashSidebarDuration);
|
||||
},
|
||||
|
||||
toggleToolbar() {
|
||||
let toolbar = document.getElementById('zen-appcontent-navbar-container');
|
||||
toolbar.toggleAttribute('zen-user-show');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
# Zen's Avatars
|
||||
|
||||
All avatars are fetched from [boring avatars](https://boringavatars.com/). Thanks a lot! <3
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 1ae97170ea111ac86debedefbf7fce25a397bfb0
|
||||
Subproject commit bdcc6a8c9784a56912f354e0d0beb151664ee688
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
@keyframes zen-jello-animation {
|
||||
0% {
|
||||
transform: scale3d(0.8, 0.8, 0.8);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
|
||||
:root:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not([chromehidden~="toolbar"]) {
|
||||
:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
|
||||
& #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
|
||||
width: -moz-available;
|
||||
box-shadow: 0 0 0 1px var(--zen-colors-border);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
#browser,
|
||||
#appcontent,
|
||||
#tabbrowser-tabpanels {
|
||||
|
|
@ -20,11 +19,11 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
:not([inDOMFullscreen="true"]) #appcontent {
|
||||
:not([inDOMFullscreen='true']) #appcontent {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:not([inDOMFullscreen="true"]) #appcontent,
|
||||
:not([inDOMFullscreen='true']) #appcontent,
|
||||
#sidebar-box {
|
||||
/** Sidebar is already hidden in full screen mode */
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
@namespace html "http://www.w3.org/1999/xhtml";
|
||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
@namespace html 'http://www.w3.org/1999/xhtml';
|
||||
@namespace xul 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
|
||||
|
||||
/** This file is used to override UI inside "common-shared.css" */
|
||||
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
xul|button {
|
||||
border-radius: var(--zen-button-border-radius) !important;
|
||||
padding: var(--zen-button-padding) !important;
|
||||
transition: .1s;
|
||||
transition: 0.1s;
|
||||
min-width: 100px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
|
@ -22,20 +22,14 @@ button:active {
|
|||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
html|button:not(:is(
|
||||
.tab-button, .ghost-button,
|
||||
.button-toggle, .button-edit,
|
||||
.button-add,
|
||||
)),
|
||||
xul|button:is(
|
||||
.expander-down
|
||||
) {
|
||||
transition: .2s;
|
||||
html|button:not(:is(.tab-button, .ghost-button, .button-toggle, .button-edit, .button-add, )),
|
||||
xul|button:is(.expander-down) {
|
||||
transition: 0.2s;
|
||||
min-width: unset !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.theme.pill-button") {
|
||||
@media (-moz-bool-pref: 'zen.theme.pill-button') {
|
||||
:host(:is(.anonymous-content-host, notification-message)),
|
||||
:root {
|
||||
--zen-button-border-radius: 20px;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
|
||||
/* All overrides for compact mode go here */
|
||||
|
||||
@media not (-moz-bool-pref: "zen.view.compact") {
|
||||
@media not (-moz-bool-pref: 'zen.view.compact') {
|
||||
#sidebar-box {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.compact") {
|
||||
:root[sizemode="fullscreen"],
|
||||
#navigator-toolbox[inFullscreen]{ margin-top: 0 !important; }
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact') {
|
||||
:root[sizemode='fullscreen'],
|
||||
#navigator-toolbox[inFullscreen] {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
--zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2);
|
||||
--zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single);
|
||||
|
|
@ -34,33 +35,34 @@
|
|||
}
|
||||
|
||||
& > * {
|
||||
pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&, & #titlebar {
|
||||
&,
|
||||
& #titlebar {
|
||||
min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 4) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
||||
@media not (-moz-bool-pref: 'zen.view.sidebar-expanded') {
|
||||
#navigator-toolbox {
|
||||
width: fit-content !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
||||
@media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
|
||||
#navigator-toolbox {
|
||||
min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden="true"])),
|
||||
#sidebar-box:not([positionend="true"]) {
|
||||
#zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden='true'])),
|
||||
#sidebar-box:not([positionend='true']) {
|
||||
margin-right: 0 !important;
|
||||
margin-left: var(--zen-sidebar-web-panel-spacing) !important;
|
||||
}
|
||||
|
||||
#sidebar-box[positionend="true"] {
|
||||
#sidebar-box[positionend='true'] {
|
||||
margin-left: 0 !important;
|
||||
margin-right: var(--zen-sidebar-web-panel-spacing) !important;
|
||||
}
|
||||
|
|
@ -69,7 +71,7 @@
|
|||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
|
||||
@media not (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
#navigator-toolbox {
|
||||
/* Remove the top margin */
|
||||
/* The toolbox isn't relative to the webview anymore, meaning we can't just add a static value and call it a day...
|
||||
|
|
@ -79,10 +81,17 @@
|
|||
* 3. Add element separation variable, to avoid overlaping with the toolbar
|
||||
* 4. Calculate toolbar height, taken from zen-urlbar.css
|
||||
*/
|
||||
--zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) + .15rem + var(--zen-element-separation) + (18px + (var(--toolbarbutton-inner-padding) * 2))) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
|
||||
|
||||
: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);
|
||||
--zen-compact-toolbox-margin: calc(
|
||||
var(--zen-compact-toolbox-margin-single) + 0.15rem + var(--zen-element-separation) +
|
||||
(18px + (var(--toolbarbutton-inner-padding) * 2))
|
||||
)
|
||||
var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single)
|
||||
var(--zen-compact-toolbox-margin-single);
|
||||
|
||||
:root[zen-sidebar-legacy='true'] & {
|
||||
--zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2)
|
||||
var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single)
|
||||
var(--zen-compact-toolbox-margin-single);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -91,7 +100,7 @@
|
|||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#navigator-toolbox:hover,
|
||||
#navigator-toolbox:focus-within,
|
||||
#navigator-toolbox[zen-user-show],
|
||||
|
|
@ -99,46 +108,52 @@
|
|||
#navigator-toolbox[movingtab],
|
||||
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
|
||||
#navigator-toolbox:has(.tabbrowser-tab:active),
|
||||
#navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
|
||||
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
|
||||
transform: none !important;
|
||||
opacity: 1;
|
||||
|
||||
& > * {
|
||||
pointer-events: all;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox > *{ line-height: normal; }
|
||||
|
||||
|
||||
#navigator-toolbox > * {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#navigator-toolbox,
|
||||
#navigator-toolbox > *{
|
||||
#navigator-toolbox > * {
|
||||
-moz-appearance: none !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* Don't apply transform before window has been fully created */
|
||||
:root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }
|
||||
|
||||
:root[customizing] #navigator-toolbox{
|
||||
:root:not([sessionrestored]) #navigator-toolbox {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
:root[customizing] #navigator-toolbox {
|
||||
position: relative !important;
|
||||
transform: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox[inFullscreen] > #PersonalToolbar,
|
||||
#PersonalToolbar[collapsed="true"]{ display: none }
|
||||
|
||||
:root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels {
|
||||
#navigator-toolbox[inFullscreen] > #PersonalToolbar,
|
||||
#PersonalToolbar[collapsed='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:root:not([inDOMFullscreen='true']) #tabbrowser-tabbox #tabbrowser-tabpanels {
|
||||
padding-left: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
#zen-appcontent-navbar-container {
|
||||
--urlbar-height: unset;
|
||||
transition: .2s ease-in-out;
|
||||
transition: 0.2s ease-in-out;
|
||||
transform: translateY(calc(-100% + var(--zen-element-separation)));
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
|
|
@ -149,7 +164,7 @@
|
|||
top: 0;
|
||||
background: var(--zen-colors-tertiary);
|
||||
z-index: 2;
|
||||
transition: .2s ease-in-out;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
#zen-appcontent-navbar-container:hover,
|
||||
|
|
@ -157,12 +172,12 @@
|
|||
#zen-appcontent-navbar-container:active,
|
||||
#zen-appcontent-navbar-container[zen-user-show],
|
||||
#mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container,
|
||||
#zen-appcontent-navbar-container:has(*[open="true"]) {
|
||||
#zen-appcontent-navbar-container:has(*[open='true']) {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:root:not([inDOMFullscreen="true"]) #tabbrowser-tabpanels {
|
||||
:root:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
|
||||
padding-top: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
|
|
@ -175,10 +190,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
|
||||
@media (-moz-bool-pref: 'zen.tabs.vertical.right-side') {
|
||||
#navigator-toolbox {
|
||||
right: 0 !important;
|
||||
transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;;
|
||||
transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox > vbox {
|
||||
|
|
@ -192,12 +207,12 @@
|
|||
#navigator-toolbox[movingtab],
|
||||
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
|
||||
#navigator-toolbox:has(.tabbrowser-tab:active),
|
||||
#navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
|
||||
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
|
||||
transform: none !important;
|
||||
opacity: 1;
|
||||
|
||||
|
||||
& > * {
|
||||
pointer-events: all;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,36 +6,36 @@
|
|||
|
||||
/** Zen Decks - ONLY USED FOR SPLIT VIEWS, DO NOT USE THIS CLASS FOR ANY OTHER PURPOSE **/
|
||||
|
||||
#tabbrowser-tabpanels[zen-split-view="true"] {
|
||||
#tabbrowser-tabpanels[zen-split-view='true'] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels[zen-split-view="true"] > *:not([zen-split="true"]) {
|
||||
#tabbrowser-tabpanels[zen-split-view='true'] > *:not([zen-split='true']) {
|
||||
flex: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split="true"] {
|
||||
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'] {
|
||||
flex: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split-anim="true"] {
|
||||
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split-anim='true'] {
|
||||
animation: zen-deck-fadeIn 0.2s forwards;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer[zen-split-active="true"] {
|
||||
#tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer[zen-split-active='true'] {
|
||||
box-shadow: 0 0 0 2px var(--zen-primary-color) !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels:has(> [zen-split="true"]) {
|
||||
#tabbrowser-tabpanels:has(> [zen-split='true']) {
|
||||
display: grid;
|
||||
row-gap: var(--zen-element-separation);
|
||||
column-gap: calc(var(--zen-element-separation) / 2);
|
||||
}
|
||||
|
||||
#zen-split-views-box:not([hidden="true"]) {
|
||||
#zen-split-views-box:not([hidden='true']) {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
#zenSplitViewModifierViewDefault {
|
||||
min-width: 180px;
|
||||
min-height: 180px;
|
||||
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid {
|
||||
display: grid;
|
||||
grid-template-areas: "a b" "c b";
|
||||
grid-template-areas: 'a b' 'c b';
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -118,4 +118,4 @@
|
|||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(3) {
|
||||
grid-area: c;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
|
||||
panel[type="arrow"][animate][animate="open"] {
|
||||
panel[type='arrow'][animate][animate='open'] {
|
||||
animation: zen-jello-animation 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
panel[type="arrow"][animate][animate="cancel"] {
|
||||
panel[type='arrow'][animate][animate='cancel'] {
|
||||
animation: zen-jello-out-animation 0.2s ease-in-out;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 16px;
|
||||
background: light-dark(#fff, rgba(255,255,255,.1));
|
||||
background: light-dark(#fff, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
#editBookmarkPanel::part(content) {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ panelview .unified-extensions-item-action-button {
|
|||
}
|
||||
|
||||
> .unified-extensions-item-menu-button {
|
||||
list-style-image: url("chrome://global/skin/icons/more.svg");
|
||||
list-style-image: url('chrome://global/skin/icons/more.svg');
|
||||
padding: 0;
|
||||
|
||||
> .toolbarbutton-icon {
|
||||
|
|
@ -43,7 +43,6 @@ panelview .unified-extensions-item-action-button {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
> .toolbarbutton-icon {
|
||||
background-color: initial;
|
||||
}
|
||||
|
|
@ -66,4 +65,4 @@ panelview .unified-extensions-item-action-button {
|
|||
background-color: var(--panel-item-active-bgcolor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@
|
|||
|
||||
.printSettingsBrowser {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,28 +3,28 @@
|
|||
border: 1px solid var(--zen-dialog-border-color);
|
||||
}
|
||||
|
||||
#window-modal-dialog:not([zen-dialog-welcome-element="true"]) .dialogBox:not(.spotlightBox) {
|
||||
#window-modal-dialog:not([zen-dialog-welcome-element='true']) .dialogBox:not(.spotlightBox) {
|
||||
transform: translateY(-9px);
|
||||
}
|
||||
|
||||
#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogBox:not(.spotlightBox) {
|
||||
#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogBox:not(.spotlightBox) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#window-modal-dialog[zen-dialog-welcome-element="true"],
|
||||
#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogOverlay,
|
||||
#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'],
|
||||
#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'] .dialogBox {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
max-height: none !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
#window-modal-dialog[zen-dialog-welcome-element="true"] {
|
||||
#window-modal-dialog[zen-dialog-welcome-element='true'] {
|
||||
--zen-welcome-dialog-space: 7px;
|
||||
margin: 0 auto !important;
|
||||
max-width: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important;
|
||||
max-height: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important;
|
||||
margin-top: var(--zen-welcome-dialog-space) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
|
||||
@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/print.css");
|
||||
@import url("chrome://browser/content/zen-styles/zen-panels/welcome.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/print.css');
|
||||
@import url('chrome://browser/content/zen-styles/zen-panels/welcome.css');
|
||||
|
||||
:root {
|
||||
--panel-subview-body-padding: 2px 0;
|
||||
|
|
@ -46,7 +45,8 @@
|
|||
--zen-panel-separator-width: 1px;
|
||||
}
|
||||
|
||||
menupopup, panel {
|
||||
menupopup,
|
||||
panel {
|
||||
--panel-background: var(--arrowpanel-background);
|
||||
--panel-border-radius: var(--zen-panel-radius);
|
||||
}
|
||||
|
|
@ -65,26 +65,26 @@ menupopup, panel {
|
|||
margin-block: 0;
|
||||
}
|
||||
|
||||
.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined)>.toolbarbutton-text,
|
||||
.subviewbutton:not(#appMenu-zoom-controls > .subviewbutton)>.toolbarbutton-icon+.toolbarbutton-text,
|
||||
#appMenu-fxa-label2>vbox {
|
||||
.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
|
||||
.subviewbutton:not(#appMenu-zoom-controls > .subviewbutton) > .toolbarbutton-icon + .toolbarbutton-text,
|
||||
#appMenu-fxa-label2 > vbox {
|
||||
padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
|
||||
}
|
||||
|
||||
/* special case menuitems with no icons */
|
||||
#appMenu-zoom-controls>.toolbarbutton-text,
|
||||
#fxa-manage-account-button>vbox,
|
||||
#PanelUI-fxa-menu-syncnow-button>hbox {
|
||||
#appMenu-zoom-controls > .toolbarbutton-text,
|
||||
#fxa-manage-account-button > vbox,
|
||||
#PanelUI-fxa-menu-syncnow-button > hbox {
|
||||
padding-inline-start: calc(16px + var(--uc-arrowpanel-menuicon-margin-inline));
|
||||
}
|
||||
|
||||
.subviewbutton>.toolbarbutton-icon {
|
||||
.subviewbutton > .toolbarbutton-icon {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
/* firefox profile avatar in appmenu */
|
||||
#appMenu-fxa-label2::before {
|
||||
content: "";
|
||||
content: '';
|
||||
display: -moz-box;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
|
@ -102,40 +102,46 @@ menupopup, panel {
|
|||
padding-block: 0;
|
||||
}
|
||||
|
||||
#appMenu-fxa-status2:not([fxastatus])>#appMenu-fxa-label2 {
|
||||
#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
|
||||
margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1);
|
||||
}
|
||||
|
||||
/* zoom controls */
|
||||
#appMenu-zoom-controls {
|
||||
border-top: 1px solid var(--panel-separator-color);
|
||||
padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline);
|
||||
padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline))
|
||||
var(--uc-arrowpanel-menuitem-margin-inline);
|
||||
padding-block: var(--uc-panel-zoom-padding-block);
|
||||
margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1);
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls>.subviewbutton {
|
||||
#appMenu-zoom-controls > .subviewbutton {
|
||||
padding: var(--uc-panel-zoom-button-padding) var(--uc-panel-zoom-button-inline-padding);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls>#appMenu-zoomReset-button2 {
|
||||
#appMenu-zoom-controls > #appMenu-zoomReset-button2 {
|
||||
padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2);
|
||||
}
|
||||
|
||||
/* #appMenu-zoomReduce-button2, */
|
||||
#appMenu-zoom-controls>#appMenu-fullscreen-button2 {
|
||||
#appMenu-zoom-controls > #appMenu-fullscreen-button2 {
|
||||
margin-left: calc((var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px);
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls>#appMenu-fullscreen-button2::before {
|
||||
content: "";
|
||||
#appMenu-zoom-controls > #appMenu-fullscreen-button2::before {
|
||||
content: '';
|
||||
border-inline-start: 1px solid var(--panel-separator-color);
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
margin-block: calc(var(--uc-panel-zoom-button-padding) * -1);
|
||||
transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px));
|
||||
transform: translateX(
|
||||
calc(
|
||||
var(--uc-panel-zoom-button-inline-padding) * -1 -
|
||||
(var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
#appMenu-zoomReset-button2 {
|
||||
|
|
@ -157,8 +163,8 @@ menupopup, panel {
|
|||
background-color: var(--panel-item-active-bgcolor);
|
||||
}
|
||||
|
||||
#appMenu-zoomReset-button2>.toolbarbutton-text,
|
||||
#appMenu-fullscreen-button2>.toolbarbutton-icon {
|
||||
#appMenu-zoomReset-button2 > .toolbarbutton-text,
|
||||
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -171,11 +177,11 @@ menupopup, panel {
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.PanelUI-subView>.panel-header+toolbarseparator {
|
||||
.PanelUI-subView > .panel-header + toolbarseparator {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.PanelUI-subView>.panel-header+toolbarseparator+.panel-subview-body {
|
||||
.PanelUI-subView > .panel-header + toolbarseparator + .panel-subview-body {
|
||||
padding-top: var(--panel-separator-margin-vertical);
|
||||
}
|
||||
|
||||
|
|
@ -192,7 +198,7 @@ menupopup, panel {
|
|||
|
||||
/* URL bar popup */
|
||||
|
||||
.identity-popup-security-connection>hbox>description {
|
||||
.identity-popup-security-connection > hbox > description {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
|
|
@ -226,8 +232,8 @@ menupopup, panel {
|
|||
margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
|
||||
}
|
||||
|
||||
#editBookmarkPanel>#editBookmarkHeaderSeparator,
|
||||
#editBookmarkPanel>.panel-subview-body>#editBookmarkSeparator {
|
||||
#editBookmarkPanel > #editBookmarkHeaderSeparator,
|
||||
#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
|
|
@ -237,13 +243,12 @@ menupopup, panel {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
menupopup::part(content),
|
||||
panel::part(content) {
|
||||
border: var(--zen-appcontent-border);
|
||||
}
|
||||
|
||||
menupopup,
|
||||
menupopup,
|
||||
panel {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -254,7 +259,7 @@ panel {
|
|||
}
|
||||
|
||||
#identity-popup-clear-sitedata-footer {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -263,7 +268,8 @@ panel {
|
|||
--arrowpanel-menuitem-padding-inline: 15px;
|
||||
}
|
||||
|
||||
toolbarseparator, menuseparator {
|
||||
toolbarseparator,
|
||||
menuseparator {
|
||||
border-width: var(--zen-panel-separator-width);
|
||||
}
|
||||
|
||||
|
|
@ -277,8 +283,9 @@ toolbarseparator, menuseparator {
|
|||
}
|
||||
|
||||
/* Context menu */
|
||||
menu, menuitem {
|
||||
&:where([_moz-menuactive]:not([disabled="true"])) {
|
||||
menu,
|
||||
menuitem {
|
||||
&:where([_moz-menuactive]:not([disabled='true'])) {
|
||||
background-color: var(--button-hover-bgcolor);
|
||||
color: var(--button-hover-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
.PanelUI-zen-profiles-item::after {
|
||||
content: '';
|
||||
background-image: url("chrome://global/skin/icons/arrow-right.svg");
|
||||
background-image: url('chrome://global/skin/icons/arrow-right.svg');
|
||||
background-size: 1em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
|
@ -97,7 +97,6 @@
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
#PanelUI-zen-profiles toolbarbutton::after {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -107,7 +106,6 @@
|
|||
padding-right: 16px;
|
||||
}
|
||||
|
||||
|
||||
#PanelUI-zen-profiles toolbarbutton:last-child {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
|
@ -120,7 +118,6 @@
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
#PanelUI-zen-profiles-actions {
|
||||
color-scheme: dark;
|
||||
position: absolute;
|
||||
|
|
@ -128,7 +125,7 @@
|
|||
right: 10px;
|
||||
border-radius: 10px !important;
|
||||
padding: 1px 10px !important;
|
||||
transition: .1s;
|
||||
transition: 0.1s;
|
||||
color: light-dark(white, black);
|
||||
background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
#zen-sidebar-panels-wrapper {
|
||||
#zen-sidebar-panels-wrapper {
|
||||
/*min-height: 500px;*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
#zen-sidebar-add-panel-button:not(:hover) image,
|
||||
.zen-sidebar-panel-button:not([selected="true"], #zen-sidebar-add-panel-button) image {
|
||||
.zen-sidebar-panel-button:not([selected='true'], #zen-sidebar-add-panel-button) image {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
background: color-mix(in srgb, var(--toolbarbutton-hover-background) 12%, transparent);
|
||||
}
|
||||
|
||||
.zen-sidebar-panel-button[selected="true"] image {
|
||||
.zen-sidebar-panel-button[selected='true'] image {
|
||||
border-color: var(--zen-primary-color);
|
||||
}
|
||||
|
||||
|
|
@ -61,13 +61,13 @@
|
|||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden="true"]) {
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden='true']) {
|
||||
max-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned="true"]) {
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
|
||||
margin: var(--zen-appcontent-separator-from-window);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([pinned="true"]) {
|
||||
#zen-sidebar-web-panel:not([pinned='true']) {
|
||||
/* We need to always override the height */
|
||||
height: unset !important;
|
||||
}
|
||||
|
|
@ -119,37 +119,37 @@
|
|||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[hidden="true"] #zen-sidebar-web-panel-hsplitter,
|
||||
#zen-sidebar-web-panel-wrapper[hidden="true"] + #zen-sidebar-web-panel-splitter,
|
||||
#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[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-hsplitter,
|
||||
#zen-sidebar-web-panel:not([pinned='true']) #zen-sidebar-web-panel-hsplitter {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([pinned="true"]) {
|
||||
#zen-sidebar-web-panel:not([pinned='true']) {
|
||||
animation: zen-sidebar-panel-animation 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
#main-window[customizing="true"] #zen-sidebar-web-panel-wrapper {
|
||||
#main-window[customizing='true'] #zen-sidebar-web-panel-wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([hidden="true"]) {
|
||||
display: flex;
|
||||
#zen-sidebar-web-panel:not([hidden='true']) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper {
|
||||
margin: 0 var(--zen-element-separation) var(--zen-element-separation) 1px;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[pinned="true"] {
|
||||
#zen-sidebar-web-panel[pinned='true'] {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
animation: zen-sidebar-panel-animation-2 0.2s ease-in-out forwards;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[hidden="true"][pinned="true"] {
|
||||
#zen-sidebar-web-panel[hidden='true'][pinned='true'] {
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
animation: zen-sidebar-panel-animation-reverse 0.2s ease-in-out forwards;
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
width: 70%;
|
||||
}
|
||||
|
||||
#zen-sidebar-introduction-panel[hidden="true"] {
|
||||
#zen-sidebar-introduction-panel[hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -231,4 +231,4 @@
|
|||
width: -moz-available;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,39 +5,39 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
--sidebar-background-color: var(--toolbar-bgcolor) !important;
|
||||
--sidebar-background-color: var(--toolbar-bgcolor) !important;
|
||||
--zen-sidebar-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
#sidebar-box {
|
||||
--zen-sidebar-box-border-radius: var(--zen-panel-radius);
|
||||
--zen-sidebar-box-border-radius: var(--zen-panel-radius);
|
||||
margin: var(--zen-element-separation);
|
||||
border-radius: var(--zen-sidebar-box-border-radius);
|
||||
overflow: hidden;
|
||||
transition: .2s;
|
||||
transition: 0.2s;
|
||||
margin-left: 0;
|
||||
border: var(--zen-appcontent-border);
|
||||
box-shadow: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-box[hidden="true"] {
|
||||
#sidebar-box[hidden='true'] {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#sidebar-box:not([positionend="true"]) {
|
||||
#sidebar-box:not([positionend='true']) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#zen-main-app-wrapper:has(#sidebar-box:not([hidden="true"], [positionend="true"])) #TabsToolbar {
|
||||
#zen-main-app-wrapper:has(#sidebar-box:not([hidden='true'], [positionend='true'])) #TabsToolbar {
|
||||
margin-right: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#sidebar-splitter {
|
||||
/* we can still use the splitter but we can't see it */
|
||||
background: transparent !important;
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
width: 1px !important;
|
||||
margin-right: 5px;
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
background: transparent !important;
|
||||
}
|
||||
|
||||
#sidebar-box[hidden="true"] .zen-sidebar-action-button,
|
||||
#sidebar-box[hidden='true'] .zen-sidebar-action-button,
|
||||
.zen-sidebar-panel-button[animate] {
|
||||
opacity: 0;
|
||||
transform: translateX(-110%);
|
||||
|
|
@ -103,11 +103,11 @@
|
|||
/* Icons */
|
||||
|
||||
#zen-preferences-button {
|
||||
list-style-image: url("chrome://global/skin/icons/settings.svg");
|
||||
list-style-image: url('chrome://global/skin/icons/settings.svg');
|
||||
}
|
||||
|
||||
#zen-history-button {
|
||||
list-style-image: url("chrome://browser/skin/history.svg");
|
||||
list-style-image: url('chrome://browser/skin/history.svg');
|
||||
}
|
||||
|
||||
#zen-bookmark-button {
|
||||
|
|
@ -138,16 +138,46 @@
|
|||
|
||||
/* Ugly code */
|
||||
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(1), .zen-sidebar-panel-button:nth-child(1) { animation-delay: 0.1s; }
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(2), .zen-sidebar-panel-button:nth-child(2) { animation-delay: 0.2s; }
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(3), .zen-sidebar-panel-button:nth-child(3) { animation-delay: 0.3s; }
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(4), .zen-sidebar-panel-button:nth-child(4) { animation-delay: 0.4s; }
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(5), .zen-sidebar-panel-button:nth-child(5) { animation-delay: 0.5s; }
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(6), .zen-sidebar-panel-button:nth-child(6) { animation-delay: 0.6s; }
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(7), .zen-sidebar-panel-button:nth-child(7) { animation-delay: 0.7s; }
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(8), .zen-sidebar-panel-button:nth-child(8) { animation-delay: 0.8s; }
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(9), .zen-sidebar-panel-button:nth-child(9) { animation-delay: 0.9s; }
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(10), .zen-sidebar-panel-button:nth-child(10) { animation-delay: 1s; }
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(1),
|
||||
.zen-sidebar-panel-button:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(2),
|
||||
.zen-sidebar-panel-button:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(3),
|
||||
.zen-sidebar-panel-button:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(4),
|
||||
.zen-sidebar-panel-button:nth-child(4) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(5),
|
||||
.zen-sidebar-panel-button:nth-child(5) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(6),
|
||||
.zen-sidebar-panel-button:nth-child(6) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(7),
|
||||
.zen-sidebar-panel-button:nth-child(7) {
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(8),
|
||||
.zen-sidebar-panel-button:nth-child(8) {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(9),
|
||||
.zen-sidebar-panel-button:nth-child(9) {
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(10),
|
||||
.zen-sidebar-panel-button:nth-child(10) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
#zen-sidebar-icons-wrapper toolbarbutton {
|
||||
position: relative;
|
||||
|
|
@ -164,12 +194,12 @@
|
|||
min-height: fit-content;
|
||||
--zen-sidebar-action-content-separator: calc(10px + var(--zen-tabbrowser-padding));
|
||||
padding-top: var(--zen-sidebar-action-content-separator);
|
||||
margin-top: var(--zen-sidebar-action-content-separator);
|
||||
margin-top: var(--zen-sidebar-action-content-separator);
|
||||
color-scheme: inherit !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-icons-wrapper::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
|
|
@ -179,7 +209,7 @@
|
|||
background: var(--zen-colors-border);
|
||||
}
|
||||
|
||||
#zen-sidepanel-button[hidden="true"] {
|
||||
#zen-sidepanel-button[hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -187,17 +217,17 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
:root:not([inDOMFullscreen="true"]) #zen-sidebar-splitter {
|
||||
:root:not([inDOMFullscreen='true']) #zen-sidebar-splitter {
|
||||
display: block;
|
||||
width: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:root[inDOMFullscreen="true"] #zen-sidebar-splitter {
|
||||
:root[inDOMFullscreen='true'] #zen-sidebar-splitter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
||||
@media not (-moz-bool-pref: 'zen.view.sidebar-expanded') {
|
||||
#navigator-toolbox {
|
||||
width: 0;
|
||||
padding-right: 2px;
|
||||
|
|
@ -208,12 +238,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.sidebar-expanded.show-button") {
|
||||
@media (-moz-bool-pref: 'zen.view.sidebar-expanded.show-button') {
|
||||
#zen-expand-sidebar-button {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
:root:is([chromehidden~="location"], [chromehidden~="toolbar"]) #navigator-toolbox {
|
||||
|
||||
:root:is([chromehidden~='location'], [chromehidden~='toolbar']) #navigator-toolbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,15 +22,15 @@
|
|||
}
|
||||
|
||||
#zen-watermark image {
|
||||
opacity: .2;
|
||||
opacity: 0.2;
|
||||
filter: grayscale(100%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#zen-watermark[hidden="true"] {
|
||||
#zen-watermark[hidden='true'] {
|
||||
transition: 0.6s;
|
||||
transition-delay: .5s;
|
||||
transition-delay: 0.5s;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "zen.watermark.enabled") {
|
||||
@media not (-moz-bool-pref: 'zen.watermark.enabled') {
|
||||
#zen-watermark {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
|
||||
/* Styles for both vertical and horizontal tabs */
|
||||
@import url("chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css");
|
||||
@import url("chrome://browser/content/zen-styles/zen-tabs/vertical-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');
|
||||
|
||||
#zen-tabbox-wrapper {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,2 @@
|
|||
@media not (-moz-bool-pref: "zen.tabs.vertical") {
|
||||
|
||||
}
|
||||
@media not (-moz-bool-pref: 'zen.tabs.vertical') {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
|
||||
@media (-moz-bool-pref: "zen.tabs.vertical") {
|
||||
@media (-moz-bool-pref: 'zen.tabs.vertical') {
|
||||
#titlebar {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -27,7 +26,7 @@
|
|||
padding-top: 0 !important;
|
||||
|
||||
--zen-sidebar-action-button-width: 35px;
|
||||
:root[uidensity="compact"] & {
|
||||
:root[uidensity='compact'] & {
|
||||
--zen-sidebar-action-button-width: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -57,7 +56,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#navigator-toolbox {
|
||||
--zen-tabbrowser-padding: 5px;
|
||||
margin-top: 0; /* Issue #156 */
|
||||
|
|
@ -67,19 +66,19 @@
|
|||
#zen-sidebar-splitter {
|
||||
order: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
#navigator-toolbox {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
#zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state="dragging"])) #navigator-toolbox {
|
||||
transition: .3s;
|
||||
|
||||
#zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state='dragging'])) #navigator-toolbox {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
|
||||
#navigator-toolbox toolbar#TabsToolbar {
|
||||
margin: var(--zen-appcontent-separator-from-window);
|
||||
overflow: hidden;
|
||||
transition: .2s;
|
||||
transition: 0.2s;
|
||||
flex-direction: column;
|
||||
padding: 5px 0;
|
||||
margin-right: 0;
|
||||
|
|
@ -87,54 +86,54 @@
|
|||
--zen-sidebar-action-button-width: 38px;
|
||||
padding-bottom: calc(5px + 5px); /* Taking into consideration the padding of the sidebar without being inlined */
|
||||
|
||||
:root[zen-sidebar-legacy="true"] & {
|
||||
:root[zen-sidebar-legacy='true'] & {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#TabsToolbar-customization-target {
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
:root[customizing] .customization-target:not(#widget-overflow-fixed-list) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
toolbarpaletteitem {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
toolbarbutton#scrollbutton-down,
|
||||
toolbarbutton#scrollbutton-up {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#toolbar-menubar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.tab-label-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.tab-icon-stack > .tab-icon-image,
|
||||
.tab-icon-stack > .tab-throbber {
|
||||
width: var(--zen-browser-tab-icon-size);
|
||||
height: var(--zen-browser-tab-icon-size);
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
|
||||
.tab-icon-stack .tab-icon-image {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
animation: zen-zoom-in 0.12s ease-in-out 0.3s forwards;
|
||||
}
|
||||
|
||||
|
||||
.tab-background {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.tabbrowser-tab {
|
||||
--zen-browser-tab-icon-size: 16px;
|
||||
--tab-min-width: 36px;
|
||||
|
|
@ -149,32 +148,34 @@
|
|||
min-height: var(--tab-min-width); /* Make a box */
|
||||
animation: zen-slide-in 0.3s;
|
||||
width: calc(var(--zen-browser-tab-icon-size) + 2px);
|
||||
transition: .1s background, .1s border-color;
|
||||
transition:
|
||||
0.1s background,
|
||||
0.1s border-color;
|
||||
min-width: var(--tab-min-width);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.tabs.dim-pending") {
|
||||
|
||||
@media (-moz-bool-pref: 'zen.tabs.dim-pending') {
|
||||
.tabbrowser-tab[pending]:not(:hover) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.tabbrowser-tab[hidden="true"] {
|
||||
|
||||
.tabbrowser-tab[hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.tabbrowser-tab:hover {
|
||||
background: var(--toolbarbutton-hover-background);
|
||||
}
|
||||
|
||||
|
||||
.tabbrowser-tab:active,
|
||||
.zen-sidebar-panel-button:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
|
||||
.tab-stack {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
|
@ -185,20 +186,21 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.tabbrowser-tab:not([fadein]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:is([multiselected="true"], [selected]) {
|
||||
|
||||
.tabbrowser-tab:is([multiselected='true'], [selected]) {
|
||||
background: var(--toolbarbutton-hover-background);
|
||||
}
|
||||
|
||||
|
||||
#private-browsing-indicator-with-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabbrowser-tab::after {/* Containers */
|
||||
|
||||
.tabbrowser-tab::after {
|
||||
/* Containers */
|
||||
background: var(--identity-tab-color, transparent);
|
||||
border-radius: 2px;
|
||||
height: 80%;
|
||||
|
|
@ -210,30 +212,30 @@
|
|||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.tabbrowser-tab {
|
||||
margin-inline-start: 0;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1.5px;
|
||||
}
|
||||
|
||||
|
||||
.tabbrowser-tab[pinned] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.tab-close-button {
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[open="true"]:hover .tab-close-button {
|
||||
|
||||
.tabbrowser-tab[open='true']:hover .tab-close-button {
|
||||
/* TODO: fix this */
|
||||
/*display: block;*/
|
||||
}
|
||||
|
||||
|
||||
.tab-content {
|
||||
padding: 0;
|
||||
width: fit-content;
|
||||
|
|
@ -242,20 +244,20 @@
|
|||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.toolbar-items > toolbartabstop:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#nav-bar > *:not(.titlebar-buttonbox-container) {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
#TabsToolbar-customization-target {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
#tabbrowser-tabs {
|
||||
margin-inline-start: 0;
|
||||
padding-inline-start: 0;
|
||||
|
|
@ -272,15 +274,15 @@
|
|||
|
||||
grid-gap: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
#tabbrowser-arrowscrollbox {
|
||||
margin-bottom: 3px !important;
|
||||
}
|
||||
|
||||
|
||||
#alltabs-button stack {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
|
||||
.tab-icon-overlay {
|
||||
margin-inline-end: 0 !important;
|
||||
display: none; /* TODO: fix this */
|
||||
|
|
@ -290,30 +292,31 @@
|
|||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.sidebar-collapsed.hide-mute-button") and (not (-moz-bool-pref: "zen.view.sidebar-expanded")) {
|
||||
@media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') and (not (-moz-bool-pref: 'zen.view.sidebar-expanded')) {
|
||||
.tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") {
|
||||
:root:not([zen-sidebar-legacy="true"]) #navigator-toolbox:is([zen-user-hover="true"]:hover, :not([zen-user-hover="true"])) {
|
||||
@media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') {
|
||||
:root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) {
|
||||
padding-right: 47px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
|
||||
#navigator-toolbox:is(
|
||||
#navigator-toolbox[zen-user-hover="true"]:hover,
|
||||
#navigator-toolbox[zen-user-hover="true"]:focus-within,
|
||||
#mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox,
|
||||
#navigator-toolbox[zen-user-hover="true"]:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)),
|
||||
:not([zen-user-hover="true"])) {
|
||||
#navigator-toolbox[zen-user-hover='true']:hover,
|
||||
#navigator-toolbox[zen-user-hover='true']:focus-within,
|
||||
#mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
|
||||
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
|
||||
:not([zen-user-hover='true'])
|
||||
) {
|
||||
--zen-hover-animation: zen-sidebar-panel-animation-2;
|
||||
--zen-navigation-toolbar-min-width: 155px;
|
||||
min-width: var(--zen-navigation-toolbar-min-width) !important;
|
||||
align-items: start;
|
||||
transition: .2s;
|
||||
transition: 0.2s;
|
||||
width: 170px;
|
||||
border: none;
|
||||
padding-left: 2px;
|
||||
|
|
@ -322,7 +325,7 @@
|
|||
#vertical-pinned-tabs-container {
|
||||
margin-left: var(--zen-tabbrowser-padding);
|
||||
}
|
||||
|
||||
|
||||
#newtab-button-container {
|
||||
margin: calc(var(--zen-tabbrowser-padding) - 2px);
|
||||
margin-bottom: 0;
|
||||
|
|
@ -339,33 +342,33 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
& .tab-label-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
& #titlebar,
|
||||
& #TabsToolbar,
|
||||
& #TabsToolbar .toolbar-items {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
|
||||
& #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) {
|
||||
width: 100% !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
& #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button):hover {
|
||||
background: var(--button-hover-bgcolor);
|
||||
}
|
||||
|
||||
|
||||
& #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-text,
|
||||
& #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-icon,
|
||||
& #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-badge-stack {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
& #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -378,27 +381,26 @@
|
|||
|
||||
& .tabbrowser-tab {
|
||||
max-width: unset !important;
|
||||
|
||||
|
||||
&:not([pinned]) {
|
||||
width: 100%;
|
||||
|
||||
|
||||
&:hover .tab-close-button {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
& .tab-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
& .tab-stack {
|
||||
justify-content: start;
|
||||
padding: 10px;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
& .tab-label-container {
|
||||
|
||||
#tabbrowser-tabs:not([secondarytext-unsupported]) & {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -406,12 +408,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:active,
|
||||
.zen-sidebar-panel-button:active {
|
||||
transform: scale(0.96) !important;
|
||||
}
|
||||
|
||||
|
||||
&[pinned] {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
@ -425,42 +427,42 @@
|
|||
padding: calc(var(--zen-tabbrowser-padding) / 2);
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
& .tabbrowser-tab:not([pinned]),
|
||||
& #tabbrowser-arrowscrollbox-periphery {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
|
||||
& .tabbrowser-tab[pinned] {
|
||||
grid-column: span 1;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
& #zen-sidebar-icons-wrapper {
|
||||
width: -moz-available;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(37px, 1fr));
|
||||
transition: .1s;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
|
||||
& #zen-sidebar-icons-wrapper::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
||||
@media not (-moz-bool-pref: 'zen.view.sidebar-expanded') {
|
||||
#navigator-toolbox {
|
||||
width: fit-content !important;
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox[zen-user-hover="true"] {
|
||||
#navigator-toolbox[zen-user-hover='true'] {
|
||||
width: fit-content !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Display the vertical tabs on the right side */
|
||||
@media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) {
|
||||
@media (-moz-bool-pref: 'zen.tabs.vertical.right-side') and (not (-moz-bool-pref: 'zen.view.compact')) {
|
||||
#navigator-toolbox {
|
||||
order: 8 !important;
|
||||
padding-left: 0 !important;
|
||||
|
|
@ -472,7 +474,7 @@
|
|||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
:root:not([zen-sidebar-legacy="true"]) {
|
||||
:root:not([zen-sidebar-legacy='true']) {
|
||||
padding: calc(var(--zen-tabbrowser-padding) * 1.5);
|
||||
}
|
||||
|
||||
|
|
@ -486,7 +488,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") and (not (-moz-bool-pref: "zen.view.compact")) {
|
||||
@media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not (-moz-bool-pref: 'zen.view.compact')) {
|
||||
#zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -495,7 +497,9 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
#navigator-toolbox, #titlebar, #TabsToolbar {
|
||||
#navigator-toolbox,
|
||||
#titlebar,
|
||||
#TabsToolbar {
|
||||
transition: 0s !important;
|
||||
}
|
||||
|
||||
|
|
@ -521,7 +525,7 @@
|
|||
#navigator-toolbox[movingtab],
|
||||
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
|
||||
#navigator-toolbox:has(.tabbrowser-tab:active),
|
||||
#navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
|
||||
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
|
||||
--zen-navigation-toolbar-min-width: 3.3rem !important;
|
||||
|
||||
& #TabsToolbar {
|
||||
|
|
@ -530,11 +534,16 @@
|
|||
background-color: var(--zen-dialog-background);
|
||||
border-top-color: var(--zen-colors-border);
|
||||
border-right-color: var(--zen-colors-border);
|
||||
padding-right: .1rem !important;
|
||||
padding-right: 0.1rem !important;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#navigator-toolbox:not(&) #TabsToolbar #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-content[class] > .tab-close-button[class] {
|
||||
#navigator-toolbox:not(&)
|
||||
#TabsToolbar
|
||||
#tabbrowser-tabs[closebuttons='activetab']
|
||||
.tabbrowser-tab
|
||||
.tab-content[class]
|
||||
> .tab-close-button[class] {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
|
@ -563,7 +572,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
|
||||
@media (-moz-bool-pref: 'zen.tabs.vertical.right-side') {
|
||||
#TabsToolbar {
|
||||
border-right: 0 !important;
|
||||
border-left: 1px solid transparent;
|
||||
|
|
@ -578,7 +587,7 @@
|
|||
#navigator-toolbox[movingtab],
|
||||
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
|
||||
#navigator-toolbox:has(.tabbrowser-tab:active),
|
||||
#navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
|
||||
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
|
||||
--zen-navigation-toolbar-min-width: 0 !important;
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
|
|
@ -589,7 +598,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "zen.tabs.vertical.right-side") {
|
||||
@media not (-moz-bool-pref: 'zen.tabs.vertical.right-side') {
|
||||
#tabbrowser-tabs {
|
||||
--zen-tabbrowser-tabs-on-hover-padding: 0 var(--zen-tabbrowser-padding) 0 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/* Here, we contain all the theme related variables, for example theme
|
||||
* colors, border radius, etc.
|
||||
* We have `--zen-border-radius` and `--zen-primary-color` as variables.
|
||||
|
|
@ -7,7 +6,6 @@
|
|||
:host(:is(.anonymous-content-host, notification-message)),
|
||||
:root,
|
||||
.zenLooksAndFeelColorOption {
|
||||
|
||||
/** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
|
||||
* in the preferences page.
|
||||
*/
|
||||
|
|
@ -30,12 +28,12 @@
|
|||
--zen-dialog-background: var(--zen-colors-tertiary);
|
||||
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, #f7f7f7 92%);
|
||||
|
||||
--zen-secondary-btn-color: var(--zen-colors-primary-foreground);
|
||||
--zen-secondary-btn-color: var(--zen-colors-primary-foreground);
|
||||
|
||||
--in-content-primary-button-background: light-dark(
|
||||
color-mix(in srgb, var(--zen-primary-color) 35%, black 65%),
|
||||
color-mix(in srgb, var(--zen-primary-color) 35%, white 65%)
|
||||
) !important;
|
||||
) !important;
|
||||
--in-content-primary-button-background-hover: light-dark(
|
||||
color-mix(in srgb, var(--zen-primary-color) 40%, black 60%),
|
||||
color-mix(in srgb, var(--zen-primary-color) 40%, white 60%)
|
||||
|
|
@ -58,7 +56,7 @@
|
|||
color-mix(in srgb, var(--zen-primary-color) 15%, transparent 85%)
|
||||
) !important;
|
||||
--button-bgcolor: var(--in-content-button-background) !important;
|
||||
--button-hover-bgcolor: var(--in-content-button-background-hover) !important;
|
||||
--button-hover-bgcolor: var(--in-content-button-background-hover) !important;
|
||||
--focus-outline-color: var(--button-bgcolor) !important;
|
||||
--in-content-button-text-color: var(--zen-secondary-btn-color) !important;
|
||||
|
||||
|
|
@ -67,13 +65,13 @@
|
|||
--button-primary-bgcolor: var(--in-content-primary-button-background) !important;
|
||||
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
|
||||
--button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important;
|
||||
--button-primary-color: var(--in-content-primary-button-text-color) !important;
|
||||
--button-primary-color: var(--in-content-primary-button-text-color) !important;
|
||||
|
||||
--in-content-page-background: var(--zen-colors-tertiary) !important;
|
||||
--zen-in-content-dialog-background: var(--zen-colors-tertiary);
|
||||
|
||||
--zen-button-border-radius: 7px;
|
||||
--zen-button-padding: .6rem 1.2rem;
|
||||
--zen-button-padding: 0.6rem 1.2rem;
|
||||
|
||||
/* Other colors */
|
||||
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
|
||||
|
|
@ -120,13 +118,13 @@
|
|||
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-dark-color-mix-base) 80%);
|
||||
--zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
|
||||
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
|
||||
|
||||
|
||||
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, var(--zen-dark-color-mix-base) 10%);
|
||||
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
|
||||
|
||||
|
||||
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
|
||||
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(43, 43, 43) 80%);
|
||||
|
||||
|
||||
--zen-dialog-background: var(--zen-dark-color-mix-base);
|
||||
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%);
|
||||
|
||||
|
|
@ -134,7 +132,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "zen.theme.toolbar-themed") {
|
||||
@media not (-moz-bool-pref: 'zen.theme.toolbar-themed') {
|
||||
:root {
|
||||
--toolbar-bgcolor: light-dark(white, #1b1b1b) !important;
|
||||
--zen-themed-toolbar-bg: var(--toolbar-bgcolor);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
|
||||
#nav-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:root[inDOMFullscreen="true"] #zen-appcontent-navbar-container {
|
||||
:root[inDOMFullscreen='true'] #zen-appcontent-navbar-container {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
padding: 1px;
|
||||
}
|
||||
|
||||
#urlbar[focused="true"][breakout-extend="true"] {
|
||||
#urlbar[focused='true'][breakout-extend='true'] {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -19,11 +19,11 @@
|
|||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
#urlbar[focused="true"] {
|
||||
#urlbar[focused='true'] {
|
||||
box-shadow: var(--panel-shadow) !important;
|
||||
}
|
||||
|
||||
#urlbar[focused="true"]>#urlbar-background {
|
||||
#urlbar[focused='true'] > #urlbar-background {
|
||||
background: var(--zen-dialog-background) !important;
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
border: transparent !important;
|
||||
}
|
||||
|
||||
#urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background,
|
||||
#urlbar[focused='true']:not([suppress-focus-border]) > #urlbar-background,
|
||||
#searchbar:focus-within {
|
||||
outline: none !important;
|
||||
outline-offset: none !important;
|
||||
|
|
@ -40,18 +40,18 @@
|
|||
|
||||
#urlbar .urlbar-page-action,
|
||||
#urlbar #tracking-protection-icon-container,
|
||||
#urlbar:not([breakout-extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box {
|
||||
#urlbar:not([breakout-extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) #identity-icon-box {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
#urlbar[breakout-extend="true"] .urlbar-page-action,
|
||||
#urlbar[breakout-extend="true"] #tracking-protection-icon-container,
|
||||
#urlbar[breakout-extend="true"] #identity-box #identity-icon-box,
|
||||
#urlbar[breakout-extend='true'] .urlbar-page-action,
|
||||
#urlbar[breakout-extend='true'] #tracking-protection-icon-container,
|
||||
#urlbar[breakout-extend='true'] #identity-box #identity-icon-box,
|
||||
.searchbar-engine-one-off-item {
|
||||
border-radius: var(--toolbarbutton-border-radius) !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout-extend="true"] {
|
||||
#urlbar[breakout-extend='true'] {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
background: var(--zen-colors-border) !important;
|
||||
}
|
||||
|
||||
#urlbar:is([focused], [open])>#urlbar-background,
|
||||
#urlbar:is([focused], [open]) > #urlbar-background,
|
||||
#searchbar:focus-within {
|
||||
background: var(--urlbar-box-bgcolor);
|
||||
}
|
||||
|
|
@ -74,23 +74,23 @@
|
|||
padding-inline-start: 8px !important;
|
||||
}
|
||||
|
||||
#identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box {
|
||||
#identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
#urlbar:not([breakout-extend="true"]) #identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box {
|
||||
#urlbar:not([breakout-extend='true']) #identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
|
||||
border-radius: 20px 10px 10px 20px !important;
|
||||
}
|
||||
|
||||
#urlbar:not([extend="true"]) #identity-box #identity-icon-box {
|
||||
#urlbar:not([extend='true']) #identity-box #identity-icon-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#urlbar:not([extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box {
|
||||
#urlbar:not([extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) #identity-icon-box {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#urlbar:not([extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) {
|
||||
#urlbar:not([extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
|
|
@ -104,8 +104,8 @@
|
|||
margin: 0 0 0 2px !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout-extend="true"] .urlbar-page-action,
|
||||
#urlbar[breakout-extend="true"] #tracking-protection-icon-container {
|
||||
#urlbar[breakout-extend='true'] .urlbar-page-action,
|
||||
#urlbar[breakout-extend='true'] #tracking-protection-icon-container {
|
||||
width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
|
||||
height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
|
||||
}
|
||||
|
|
@ -115,12 +115,13 @@
|
|||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
|
||||
#identity-box:has(#notification-popup-box:not([hidden="true"])) #identity-icon-box,
|
||||
#identity-box:has(#notification-popup-box:not([hidden="true"])) #identity-permission-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 {
|
||||
margin-right: 4px !important;
|
||||
}
|
||||
|
||||
#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate="invalid"]) #identity-icon-box {
|
||||
#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate='invalid'])
|
||||
#identity-icon-box {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
|
|
@ -141,12 +142,12 @@
|
|||
gap: 8px;
|
||||
}
|
||||
|
||||
#urlbar[breakout-extend="true"] #notification-popup-box {
|
||||
#urlbar[breakout-extend='true'] #notification-popup-box {
|
||||
min-width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
|
||||
height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
|
||||
}
|
||||
|
||||
#notification-popup-box>image {
|
||||
#notification-popup-box > image {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -156,7 +157,7 @@ button.popup-notification-dropmarker {
|
|||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
|
||||
.panel-footer:has(button.popup-notification-dropmarker:not([hidden="true"])) button.popup-notification-secondary-button {
|
||||
.panel-footer:has(button.popup-notification-dropmarker:not([hidden='true'])) button.popup-notification-secondary-button {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
|
@ -169,10 +170,10 @@ button.popup-notification-dropmarker {
|
|||
}
|
||||
|
||||
#downloadsHistory {
|
||||
margin-top: 5px
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
:root:not([zen-sidebar-legacy="true"]) {
|
||||
:root:not([zen-sidebar-legacy='true']) {
|
||||
@media (max-width: 650px) {
|
||||
#urlbar-container {
|
||||
width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
|
||||
|
|
@ -197,7 +198,7 @@ button.popup-notification-dropmarker {
|
|||
}
|
||||
}
|
||||
|
||||
:root[zen-sidebar-legacy="true"] {
|
||||
:root[zen-sidebar-legacy='true'] {
|
||||
@media (max-width: 550px) {
|
||||
#urlbar-container {
|
||||
width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
|
||||
|
|
@ -220,4 +221,4 @@ button.popup-notification-dropmarker {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
#zen-workspaces-button {
|
||||
--zen-workspaces-button-vmargin: 0.4rem;
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
|
|
@ -11,13 +10,13 @@
|
|||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
:root[zen-sidebar-legacy="true"] & {
|
||||
:root[zen-sidebar-legacy='true'] & {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-workspaces-button .zen-workspace-sidebar-name {
|
||||
margin-left: .2rem;
|
||||
margin-left: 0.2rem;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
@ -25,23 +24,24 @@
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
||||
@media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
|
||||
/** Keep these selectors in sync with the ones in vertical-tabs.css */
|
||||
#navigator-toolbox:is(
|
||||
#navigator-toolbox[zen-user-hover="true"]:hover,
|
||||
#navigator-toolbox[zen-user-hover="true"]:focus-within,
|
||||
#mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox,
|
||||
#navigator-toolbox[zen-user-hover="true"]:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)),
|
||||
:not([zen-user-hover="true"])) {
|
||||
#navigator-toolbox[zen-user-hover='true']:hover,
|
||||
#navigator-toolbox[zen-user-hover='true']:focus-within,
|
||||
#mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
|
||||
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
|
||||
:not([zen-user-hover='true'])
|
||||
) {
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] {
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] + .zen-workspace-sidebar-name {
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
|
@ -93,8 +93,8 @@
|
|||
border-radius: 7px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected="true"],
|
||||
#PanelUI-zen-workspaces-edit-icons-container toolbarbutton[selected="true"] {
|
||||
#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected='true'],
|
||||
#PanelUI-zen-workspaces-edit-icons-container toolbarbutton[selected='true'] {
|
||||
border-color: var(--zen-colors-secondary);
|
||||
}
|
||||
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-list[empty="true"] {
|
||||
#PanelUI-zen-workspaces-list[empty='true'] {
|
||||
font-weight: 600;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
}
|
||||
|
||||
#PanelUI-zen-workspaces-list toolbarbutton,
|
||||
#PanelUI-zen-workspaces-current-info toolbarbutton {
|
||||
#PanelUI-zen-workspaces-current-info toolbarbutton {
|
||||
padding: 5px;
|
||||
border-radius: 7px;
|
||||
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
}
|
||||
|
||||
&:hover .zen-workspace-actions,
|
||||
& .zen-workspace-actions[active="true"] {
|
||||
& .zen-workspace-actions[active='true'] {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
@ -212,7 +212,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-create-footer button[default="true"],
|
||||
#PanelUI-zen-workspaces-edit-footer button[default="true"] {
|
||||
#PanelUI-zen-workspaces-create-footer button[default='true'],
|
||||
#PanelUI-zen-workspaces-edit-footer button[default='true'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use strict";
|
||||
'use strict';
|
||||
|
||||
/* INCLUDE THIS FILE AS:
|
||||
* <script src="chrome://browser/content/zenThemeModifier.js"></script>
|
||||
|
|
@ -11,30 +10,26 @@
|
|||
* FOR ANY WEBSITE THAT WOULD NEED TO USE THE ACCENT COLOR, ETC
|
||||
*/
|
||||
|
||||
const kZenThemePrefsList = [
|
||||
"zen.theme.accent-color",
|
||||
"zen.theme.border-radius",
|
||||
"zen.theme.content-element-separation",
|
||||
];
|
||||
const kZenThemePrefsList = ['zen.theme.accent-color', 'zen.theme.border-radius', 'zen.theme.content-element-separation'];
|
||||
|
||||
/**
|
||||
* ZenThemeModifier controls the application of theme data to the browser,
|
||||
* 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
|
||||
* shadow roots not inheriting the accent color.
|
||||
*
|
||||
* note: It must be a firefox builtin page with access to the browser's configuration
|
||||
* and services.
|
||||
*/
|
||||
* ZenThemeModifier controls the application of theme data to the browser,
|
||||
* 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
|
||||
* shadow roots not inheriting the accent color.
|
||||
*
|
||||
* note: It must be a firefox builtin page with access to the browser's configuration
|
||||
* and services.
|
||||
*/
|
||||
var ZenThemeModifier = {
|
||||
_inMainBrowserWindow: false,
|
||||
|
||||
/**
|
||||
* Listen for theming updates from the LightweightThemeChild actor, and
|
||||
* begin listening to changes in preferred color scheme.
|
||||
*/
|
||||
* Listen for theming updates from the LightweightThemeChild actor, and
|
||||
* begin listening to changes in preferred color scheme.
|
||||
*/
|
||||
init() {
|
||||
this._inMainBrowserWindow = window.location.href == "chrome://browser/content/browser.xhtml";
|
||||
this._inMainBrowserWindow = window.location.href == 'chrome://browser/content/browser.xhtml';
|
||||
this.listenForEvents();
|
||||
this.updateAllThemeBasics();
|
||||
this._onPrefersColorSchemeChange();
|
||||
|
|
@ -49,7 +44,7 @@ var ZenThemeModifier = {
|
|||
Services.prefs.addObserver(pref, handleEvent);
|
||||
}
|
||||
|
||||
window.addEventListener("unload", () => {
|
||||
window.addEventListener('unload', () => {
|
||||
for (let pref of kZenThemePrefsList) {
|
||||
Services.prefs.removeObserver(pref, handleEvent);
|
||||
}
|
||||
|
|
@ -62,8 +57,8 @@ var ZenThemeModifier = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Update all theme basics, like the accent color.
|
||||
*/
|
||||
* Update all theme basics, like the accent color.
|
||||
*/
|
||||
async updateAllThemeBasics() {
|
||||
this.updateAccentColor();
|
||||
this.updateBorderRadius();
|
||||
|
|
@ -71,24 +66,24 @@ var ZenThemeModifier = {
|
|||
},
|
||||
|
||||
updateBorderRadius() {
|
||||
const borderRadius = Services.prefs.getIntPref("zen.theme.border-radius");
|
||||
document.documentElement.style.setProperty("--zen-border-radius", borderRadius + "px");
|
||||
const borderRadius = Services.prefs.getIntPref('zen.theme.border-radius');
|
||||
document.documentElement.style.setProperty('--zen-border-radius', borderRadius + 'px');
|
||||
},
|
||||
|
||||
updateElementSeparation() {
|
||||
const separation = Services.prefs.getIntPref("zen.theme.content-element-separation");
|
||||
document.documentElement.style.setProperty("--zen-element-separation", separation + "px");
|
||||
const separation = Services.prefs.getIntPref('zen.theme.content-element-separation');
|
||||
document.documentElement.style.setProperty('--zen-element-separation', separation + 'px');
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the accent color.
|
||||
*/
|
||||
updateAccentColor() {
|
||||
const accentColor = Services.prefs.getStringPref("zen.theme.accent-color");
|
||||
document.documentElement.style.setProperty("--zen-primary-color", accentColor);
|
||||
const accentColor = Services.prefs.getStringPref('zen.theme.accent-color');
|
||||
document.documentElement.style.setProperty('--zen-primary-color', accentColor);
|
||||
// Notify the page that the accent color has changed, only if a function
|
||||
// handler is defined.
|
||||
if (typeof window.zenPageAccentColorChanged === "function") {
|
||||
if (typeof window.zenPageAccentColorChanged === 'function') {
|
||||
window.zenPageAccentColorChanged(accentColor);
|
||||
}
|
||||
},
|
||||
|
|
@ -98,35 +93,33 @@ var ZenThemeModifier = {
|
|||
},
|
||||
|
||||
_updateZenAvatar() {
|
||||
if (typeof ProfileService === "undefined") {
|
||||
if (typeof ProfileService === 'undefined') {
|
||||
return;
|
||||
}
|
||||
const mainWindowEl = document.documentElement;
|
||||
// Dont override the sync avatar if it's already set
|
||||
if (mainWindowEl.style.hasOwnProperty("--avatar-image-url")) {
|
||||
if (mainWindowEl.style.hasOwnProperty('--avatar-image-url')) {
|
||||
return;
|
||||
}
|
||||
let profile = ProfileService.currentProfile;
|
||||
if (!profile || profile.zenAvatarPath == "") return;
|
||||
if (!profile || profile.zenAvatarPath == '') return;
|
||||
// TODO: actually use profile data to generate the avatar, instead of just using the name
|
||||
let avatarUrl = this._getThemedAvatar(profile.zenAvatarPath);
|
||||
if (document.documentElement.hasAttribute("privatebrowsingmode")) {
|
||||
avatarUrl = "chrome://global/skin/icons/indicator-private-browsing.svg";
|
||||
if (document.documentElement.hasAttribute('privatebrowsingmode')) {
|
||||
avatarUrl = 'chrome://global/skin/icons/indicator-private-browsing.svg';
|
||||
}
|
||||
mainWindowEl.style.setProperty("--zen-avatar-image-url", `url(${avatarUrl})`);
|
||||
mainWindowEl.style.setProperty("--avatar-image-url", `var(--zen-avatar-image-url)`, "important");
|
||||
mainWindowEl.style.setProperty('--zen-avatar-image-url', `url(${avatarUrl})`);
|
||||
mainWindowEl.style.setProperty('--avatar-image-url', `var(--zen-avatar-image-url)`, 'important');
|
||||
},
|
||||
|
||||
_getThemedAvatar(avatarPath) {
|
||||
if (!avatarPath.startsWith("chrome://browser/content/zen-avatars/avatar-")
|
||||
|| !avatarPath.endsWith(".svg")) {
|
||||
if (!avatarPath.startsWith('chrome://browser/content/zen-avatars/avatar-') || !avatarPath.endsWith('.svg')) {
|
||||
return avatarPath;
|
||||
}
|
||||
let withoutExtension = avatarPath.slice(0, -4);
|
||||
let scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
|
||||
let scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
return `${withoutExtension}-${scheme}.svg`;
|
||||
},
|
||||
};
|
||||
|
||||
if (typeof Services !== "undefined")
|
||||
ZenThemeModifier.init();
|
||||
if (typeof Services !== 'undefined') ZenThemeModifier.init();
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
|
||||
# Checkout this documentation to build new tab assets
|
||||
|
||||
* [New Tab Documentation](https://firefox-source-docs.mozilla.org/browser/components/newtab/docs/index.html)
|
||||
* 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:
|
||||
- [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.
|
||||
- To bundle the new tab, execute the following:
|
||||
|
||||
```
|
||||
./mach npm run bundle --prefix=browser/components/newtab
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
|
||||
.customize-menu[role="dialog"] {
|
||||
.customize-menu[role='dialog'] {
|
||||
margin: 10px;
|
||||
border-radius: 7px;
|
||||
height: -moz-fit-content;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
var gZenNewWebPanel = {
|
||||
init: function() {
|
||||
document.addEventListener("dialogaccept", this.handleDialogAccept.bind(this));
|
||||
init: function () {
|
||||
document.addEventListener('dialogaccept', this.handleDialogAccept.bind(this));
|
||||
},
|
||||
|
||||
handleURLChange: async function(aURL) {
|
||||
handleURLChange: async function (aURL) {
|
||||
try {
|
||||
let url = new URL(aURL.value);
|
||||
} catch (_) {
|
||||
|
|
@ -31,10 +31,10 @@ var gZenNewWebPanel = {
|
|||
return url;
|
||||
},
|
||||
|
||||
handleDialogAccept: async function(aEvent) {
|
||||
handleDialogAccept: async function (aEvent) {
|
||||
document.commandDispatcher.focusedElement?.blur();
|
||||
let url = document.getElementById("zenNWP_url");
|
||||
let ua = document.getElementById("zenNWP_userAgent");
|
||||
let url = document.getElementById('zenNWP_url');
|
||||
let ua = document.getElementById('zenNWP_userAgent');
|
||||
if (!url || !ua) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -51,12 +51,12 @@ var gZenNewWebPanel = {
|
|||
url: urlValue,
|
||||
ua: ua.value,
|
||||
};
|
||||
let currentData = JSON.parse(Services.prefs.getStringPref("zen.sidebar.data"));
|
||||
let newName = "p" + new Date().getTime();
|
||||
let currentData = JSON.parse(Services.prefs.getStringPref('zen.sidebar.data'));
|
||||
let newName = 'p' + new Date().getTime();
|
||||
currentData.index.push(newName);
|
||||
currentData.data[newName] = newSite;
|
||||
Services.prefs.setStringPref("zen.sidebar.data", JSON.stringify(currentData));
|
||||
Services.prefs.setStringPref('zen.sidebar.data', JSON.stringify(currentData));
|
||||
},
|
||||
};
|
||||
|
||||
gZenNewWebPanel.init();
|
||||
gZenNewWebPanel.init();
|
||||
|
|
|
|||
|
|
@ -3,43 +3,43 @@
|
|||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
const kZenColors = [
|
||||
"#aac7ff",
|
||||
"#74d7cb",
|
||||
"#a0d490",
|
||||
"#dec663",
|
||||
"#ffb787",
|
||||
"#dec1b1",
|
||||
"#ffb1c0",
|
||||
"#ddbfc3",
|
||||
"#f6b0ea",
|
||||
"#d4bbff",
|
||||
'#aac7ff',
|
||||
'#74d7cb',
|
||||
'#a0d490',
|
||||
'#dec663',
|
||||
'#ffb787',
|
||||
'#dec1b1',
|
||||
'#ffb1c0',
|
||||
'#ddbfc3',
|
||||
'#f6b0ea',
|
||||
'#d4bbff',
|
||||
];
|
||||
|
||||
const kZenOSToSmallName = {
|
||||
WINNT: "windows",
|
||||
Darwin: "macos",
|
||||
Linux: "linux",
|
||||
WINNT: 'windows',
|
||||
Darwin: 'macos',
|
||||
Linux: 'linux',
|
||||
};
|
||||
|
||||
var gZenMarketplaceManager = {
|
||||
var gZenMarketplaceManager = {
|
||||
init() {
|
||||
const checkForUpdates = document.getElementById("zenThemeMarketplaceCheckForUpdates");
|
||||
const checkForUpdates = document.getElementById('zenThemeMarketplaceCheckForUpdates');
|
||||
if (!checkForUpdates) return; // We havent entered the settings page yet.
|
||||
if (this.__hasInitializedEvents) return;
|
||||
this._buildThemesList();
|
||||
this.__hasInitializedEvents = true;
|
||||
Services.prefs.addObserver(this.updatePref, this);
|
||||
checkForUpdates.addEventListener("click", (event) => {
|
||||
checkForUpdates.addEventListener('click', (event) => {
|
||||
if (event.target === checkForUpdates) {
|
||||
event.preventDefault();
|
||||
this._checkForThemeUpdates(event);
|
||||
}
|
||||
});
|
||||
document.addEventListener("ZenThemeMarketplace:CheckForUpdatesFinished", (event) => {
|
||||
document.addEventListener('ZenThemeMarketplace:CheckForUpdatesFinished', (event) => {
|
||||
checkForUpdates.disabled = false;
|
||||
const updates = event.detail.updates;
|
||||
const success = document.getElementById("zenThemeMarketplaceUpdatesSuccess");
|
||||
const error = document.getElementById("zenThemeMarketplaceUpdatesFailure");
|
||||
const success = document.getElementById('zenThemeMarketplaceUpdatesSuccess');
|
||||
const error = document.getElementById('zenThemeMarketplaceUpdatesFailure');
|
||||
if (updates) {
|
||||
success.hidden = false;
|
||||
error.hidden = true;
|
||||
|
|
@ -48,7 +48,7 @@ var gZenMarketplaceManager = {
|
|||
error.hidden = false;
|
||||
}
|
||||
});
|
||||
window.addEventListener("unload", this.uninit.bind(this));
|
||||
window.addEventListener('unload', this.uninit.bind(this));
|
||||
},
|
||||
|
||||
uninit() {
|
||||
|
|
@ -64,11 +64,11 @@ var gZenMarketplaceManager = {
|
|||
// Send a message to the child to check for theme updates.
|
||||
event.target.disabled = true;
|
||||
// send an event that will be listened by the child process.
|
||||
document.dispatchEvent(new CustomEvent("ZenCheckForThemeUpdates"));
|
||||
document.dispatchEvent(new CustomEvent('ZenCheckForThemeUpdates'));
|
||||
},
|
||||
|
||||
get updatePref() {
|
||||
return "zen.themes.updated-value-observer";
|
||||
return 'zen.themes.updated-value-observer';
|
||||
},
|
||||
|
||||
triggerThemeUpdate() {
|
||||
|
|
@ -76,27 +76,20 @@ var gZenMarketplaceManager = {
|
|||
},
|
||||
|
||||
get themesList() {
|
||||
return document.getElementById("zenThemeMarketplaceList");
|
||||
return document.getElementById('zenThemeMarketplaceList');
|
||||
},
|
||||
|
||||
get themesDataFile() {
|
||||
return PathUtils.join(
|
||||
PathUtils.profileDir,
|
||||
"zen-themes.json"
|
||||
);
|
||||
return PathUtils.join(PathUtils.profileDir, 'zen-themes.json');
|
||||
},
|
||||
|
||||
get themesRootPath() {
|
||||
return PathUtils.join(
|
||||
PathUtils.profileDir,
|
||||
"chrome",
|
||||
"zen-themes"
|
||||
);
|
||||
return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes');
|
||||
},
|
||||
|
||||
async removeTheme(themeId) {
|
||||
const themePath = PathUtils.join(this.themesRootPath, themeId);
|
||||
console.info("ZenThemeMarketplaceParent(settings): Removing theme ", themePath);
|
||||
console.info('ZenThemeMarketplaceParent(settings): Removing theme ', themePath);
|
||||
await IOUtils.remove(themePath, { recursive: true, ignoreAbsent: true });
|
||||
|
||||
let themes = await this._getThemes();
|
||||
|
|
@ -126,13 +119,13 @@ var gZenMarketplaceManager = {
|
|||
// [!][os:]key
|
||||
let restOfPreferences = key;
|
||||
let isNegation = false;
|
||||
if (key.startsWith("!")) {
|
||||
if (key.startsWith('!')) {
|
||||
isNegation = true;
|
||||
restOfPreferences = key.slice(1);
|
||||
}
|
||||
let os = "";
|
||||
if (restOfPreferences.includes(":")) {
|
||||
[os, restOfPreferences] = restOfPreferences.split(":");
|
||||
let os = '';
|
||||
if (restOfPreferences.includes(':')) {
|
||||
[os, restOfPreferences] = restOfPreferences.split(':');
|
||||
}
|
||||
if (isNegation && os === this.currentOperatingSystem) {
|
||||
delete preferences[key];
|
||||
|
|
@ -150,7 +143,7 @@ var gZenMarketplaceManager = {
|
|||
},
|
||||
|
||||
async _getThemePreferences(theme) {
|
||||
const themePath = PathUtils.join(this.themesRootPath, theme.id, "preferences.json");
|
||||
const themePath = PathUtils.join(this.themesRootPath, theme.id, 'preferences.json');
|
||||
if (!(await IOUtils.exists(themePath)) || !theme.preferences) {
|
||||
return {};
|
||||
}
|
||||
|
|
@ -159,9 +152,9 @@ var gZenMarketplaceManager = {
|
|||
|
||||
async _buildThemesList() {
|
||||
if (!this.themesList) return;
|
||||
console.log("ZenThemeMarketplaceParent(settings): Building themes list");
|
||||
console.log('ZenThemeMarketplaceParent(settings): Building themes list');
|
||||
let themes = await this._getThemes();
|
||||
this.themesList.innerHTML = "";
|
||||
this.themesList.innerHTML = '';
|
||||
for (let theme of Object.values(themes)) {
|
||||
const fragment = window.MozXULElement.parseXULToFragment(`
|
||||
<hbox class="zenThemeMarketplaceItem" align="center">
|
||||
|
|
@ -172,22 +165,22 @@ var gZenMarketplaceManager = {
|
|||
<button class="zenThemeMarketplaceItemUninstallButton" data-l10n-id="zen-theme-marketplace-remove-button" zen-theme-id="${theme.id}"></button>
|
||||
</hbox>
|
||||
`);
|
||||
fragment.querySelector(".zenThemeMarketplaceItemTitle").textContent = `${theme.name} (v${theme.version || "1.0.0"})`;
|
||||
fragment.querySelector(".zenThemeMarketplaceItemDescription").textContent = theme.description;
|
||||
fragment.querySelector(".zenThemeMarketplaceItemUninstallButton").addEventListener("click", async (event) => {
|
||||
if (!confirm("Are you sure you want to remove this theme?")) {
|
||||
fragment.querySelector('.zenThemeMarketplaceItemTitle').textContent = `${theme.name} (v${theme.version || '1.0.0'})`;
|
||||
fragment.querySelector('.zenThemeMarketplaceItemDescription').textContent = theme.description;
|
||||
fragment.querySelector('.zenThemeMarketplaceItemUninstallButton').addEventListener('click', async (event) => {
|
||||
if (!confirm('Are you sure you want to remove this theme?')) {
|
||||
return;
|
||||
}
|
||||
const target = event.target;
|
||||
const themeId = target.getAttribute("zen-theme-id");
|
||||
const themeId = target.getAttribute('zen-theme-id');
|
||||
await this.removeTheme(themeId);
|
||||
});
|
||||
this.themesList.appendChild(fragment);
|
||||
const preferences = await this._getThemePreferences(theme);
|
||||
if (Object.keys(preferences).length > 0) {
|
||||
let preferencesWrapper = document.createXULElement("vbox");
|
||||
preferencesWrapper.classList.add("indent");
|
||||
preferencesWrapper.classList.add("zenThemeMarketplaceItemPreferences");
|
||||
let preferencesWrapper = document.createXULElement('vbox');
|
||||
preferencesWrapper.classList.add('indent');
|
||||
preferencesWrapper.classList.add('zenThemeMarketplaceItemPreferences');
|
||||
for (let [key, value] of Object.entries(preferences)) {
|
||||
const fragment = window.MozXULElement.parseXULToFragment(`
|
||||
<hbox class="zenThemeMarketplaceItemPreference">
|
||||
|
|
@ -200,16 +193,16 @@ var gZenMarketplaceManager = {
|
|||
`);
|
||||
// Checkbox only works with "true" and "false" values, it's not like HTML checkboxes.
|
||||
if (Services.prefs.getBoolPref(key, false)) {
|
||||
fragment.querySelector(".zenThemeMarketplaceItemPreferenceCheckbox").setAttribute("checked", "true");
|
||||
fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').setAttribute('checked', 'true');
|
||||
}
|
||||
fragment.querySelector(".zenThemeMarketplaceItemPreferenceCheckbox").addEventListener("click", (event) => {
|
||||
let target = event.target.closest(".zenThemeMarketplaceItemPreferenceCheckbox");
|
||||
let key = target.getAttribute("zen-pref");
|
||||
let checked = target.hasAttribute("checked");
|
||||
fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => {
|
||||
let target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox');
|
||||
let key = target.getAttribute('zen-pref');
|
||||
let checked = target.hasAttribute('checked');
|
||||
if (!checked) {
|
||||
target.removeAttribute("checked");
|
||||
target.removeAttribute('checked');
|
||||
} else {
|
||||
target.setAttribute("checked", "true");
|
||||
target.setAttribute('checked', 'true');
|
||||
}
|
||||
Services.prefs.setBoolPref(key, !checked);
|
||||
});
|
||||
|
|
@ -218,7 +211,7 @@ var gZenMarketplaceManager = {
|
|||
this.themesList.appendChild(preferencesWrapper);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var gZenLooksAndFeel = {
|
||||
|
|
@ -229,51 +222,44 @@ var gZenLooksAndFeel = {
|
|||
gZenThemeBuilder.init();
|
||||
gZenMarketplaceManager.init();
|
||||
var onLegacyToolbarChange = this.onLegacyToolbarChange.bind(this);
|
||||
Services.prefs.addObserver("zen.themes.tabs.legacy-location", onLegacyToolbarChange);
|
||||
window.addEventListener("unload", () => {
|
||||
Services.prefs.removeObserver("zen.themes.tabs.legacy-location", onLegacyToolbarChange);
|
||||
Services.prefs.addObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
|
||||
window.addEventListener('unload', () => {
|
||||
Services.prefs.removeObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
|
||||
});
|
||||
},
|
||||
|
||||
async onLegacyToolbarChange(event) {
|
||||
let buttonIndex = await confirmRestartPrompt(
|
||||
true,
|
||||
1,
|
||||
true,
|
||||
false
|
||||
);
|
||||
let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
|
||||
if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
|
||||
Services.startup.quit(
|
||||
Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
|
||||
);
|
||||
Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
_initializeTabbarExpandForm() {
|
||||
const form = document.getElementById("zen-expand-tabbar-strat");
|
||||
const radios = form.querySelectorAll("input[type=radio]");
|
||||
const onHoverPref = "zen.view.sidebar-expanded.on-hover";
|
||||
const defaultExpandPref = "zen.view.sidebar-expanded";
|
||||
const form = document.getElementById('zen-expand-tabbar-strat');
|
||||
const radios = form.querySelectorAll('input[type=radio]');
|
||||
const onHoverPref = 'zen.view.sidebar-expanded.on-hover';
|
||||
const defaultExpandPref = 'zen.view.sidebar-expanded';
|
||||
if (Services.prefs.getBoolPref(onHoverPref)) {
|
||||
form.querySelector("input[value=\"hover\"]").checked = true;
|
||||
form.querySelector('input[value="hover"]').checked = true;
|
||||
} else if (Services.prefs.getBoolPref(defaultExpandPref)) {
|
||||
form.querySelector("input[value=\"expand\"]").checked = true;
|
||||
form.querySelector('input[value="expand"]').checked = true;
|
||||
} else {
|
||||
form.querySelector("input[value=\"none\"]").checked = true;
|
||||
form.querySelector('input[value="none"]').checked = true;
|
||||
}
|
||||
for (let radio of radios) {
|
||||
radio.addEventListener("change", e => {
|
||||
radio.addEventListener('change', (e) => {
|
||||
switch (e.target.value) {
|
||||
case "expand":
|
||||
case 'expand':
|
||||
Services.prefs.setBoolPref(onHoverPref, false);
|
||||
Services.prefs.setBoolPref(defaultExpandPref, true);
|
||||
break;
|
||||
case "none":
|
||||
case 'none':
|
||||
Services.prefs.setBoolPref(onHoverPref, false);
|
||||
Services.prefs.setBoolPref(defaultExpandPref, false);
|
||||
break;
|
||||
case "hover":
|
||||
case 'hover':
|
||||
Services.prefs.setBoolPref(onHoverPref, true);
|
||||
Services.prefs.setBoolPref(defaultExpandPref, true);
|
||||
break;
|
||||
|
|
@ -283,19 +269,19 @@ var gZenLooksAndFeel = {
|
|||
},
|
||||
|
||||
_initializeColorPicker(accentColor) {
|
||||
let elem = document.getElementById("zenLooksAndFeelColorOptions");
|
||||
elem.innerHTML = "";
|
||||
let elem = document.getElementById('zenLooksAndFeelColorOptions');
|
||||
elem.innerHTML = '';
|
||||
for (let color of kZenColors) {
|
||||
let colorElemParen = document.createElement("div");
|
||||
let colorElem = document.createElement("div");
|
||||
colorElemParen.classList.add("zenLooksAndFeelColorOptionParen");
|
||||
colorElem.classList.add("zenLooksAndFeelColorOption");
|
||||
colorElem.style.setProperty("--zen-primary-color", color, "important");
|
||||
let colorElemParen = document.createElement('div');
|
||||
let colorElem = document.createElement('div');
|
||||
colorElemParen.classList.add('zenLooksAndFeelColorOptionParen');
|
||||
colorElem.classList.add('zenLooksAndFeelColorOption');
|
||||
colorElem.style.setProperty('--zen-primary-color', color, 'important');
|
||||
if (accentColor === color) {
|
||||
colorElemParen.setAttribute("selected", "true");
|
||||
colorElemParen.setAttribute('selected', 'true');
|
||||
}
|
||||
colorElemParen.addEventListener("click", () => {
|
||||
Services.prefs.setStringPref("zen.theme.accent-color", color);
|
||||
colorElemParen.addEventListener('click', () => {
|
||||
Services.prefs.setStringPref('zen.theme.accent-color', color);
|
||||
});
|
||||
colorElemParen.appendChild(colorElem);
|
||||
elem.appendChild(colorElemParen);
|
||||
|
|
@ -308,38 +294,31 @@ var gZenLooksAndFeel = {
|
|||
},
|
||||
|
||||
_getInitialAccentColor() {
|
||||
return Services.prefs.getStringPref("zen.theme.accent-color", kZenColors[0]);
|
||||
return Services.prefs.getStringPref('zen.theme.accent-color', kZenColors[0]);
|
||||
},
|
||||
};
|
||||
|
||||
var gZenWorkspacesSettings = {
|
||||
init() {
|
||||
Services.prefs.addObserver("zen.workspaces.enabled", this);
|
||||
window.addEventListener("unload", () => {
|
||||
Services.prefs.removeObserver("zen.workspaces.enabled", this);
|
||||
Services.prefs.addObserver('zen.workspaces.enabled', this);
|
||||
window.addEventListener('unload', () => {
|
||||
Services.prefs.removeObserver('zen.workspaces.enabled', this);
|
||||
});
|
||||
},
|
||||
|
||||
async observe(subject, topic, data) {
|
||||
await this.onWorkspaceChange(Services.prefs.getBoolPref("zen.workspaces.enabled"));
|
||||
await this.onWorkspaceChange(Services.prefs.getBoolPref('zen.workspaces.enabled'));
|
||||
},
|
||||
|
||||
async onWorkspaceChange(checked) {
|
||||
if (checked) {
|
||||
let buttonIndex = await confirmRestartPrompt(
|
||||
true,
|
||||
1,
|
||||
true,
|
||||
false
|
||||
);
|
||||
let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
|
||||
if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
|
||||
Services.startup.quit(
|
||||
Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
|
||||
);
|
||||
Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var gZenCKSSettings = {
|
||||
|
|
@ -348,13 +327,13 @@ var gZenCKSSettings = {
|
|||
this._initializeEvents();
|
||||
this._initializeCKS();
|
||||
this._addPrefObservers();
|
||||
window.addEventListener("unload", () => {
|
||||
Services.prefs.removeObserver("zen.keyboard.shortcuts.disable-firefox", this);
|
||||
window.addEventListener('unload', () => {
|
||||
Services.prefs.removeObserver('zen.keyboard.shortcuts.disable-firefox', this);
|
||||
});
|
||||
},
|
||||
|
||||
_addPrefObservers() {
|
||||
Services.prefs.addObserver("zen.keyboard.shortcuts.disable-firefox", this);
|
||||
Services.prefs.addObserver('zen.keyboard.shortcuts.disable-firefox', this);
|
||||
},
|
||||
|
||||
observe(subject, topic, data) {
|
||||
|
|
@ -362,32 +341,25 @@ var gZenCKSSettings = {
|
|||
},
|
||||
|
||||
async onDisableFirefoxShortcutsChange(event) {
|
||||
let checked = Services.prefs.getBoolPref("zen.keyboard.shortcuts.disable-firefox");
|
||||
let checked = Services.prefs.getBoolPref('zen.keyboard.shortcuts.disable-firefox');
|
||||
if (checked) return;
|
||||
let buttonIndex = await confirmRestartPrompt(
|
||||
true,
|
||||
1,
|
||||
true,
|
||||
false
|
||||
);
|
||||
let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
|
||||
if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
|
||||
Services.startup.quit(
|
||||
Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
|
||||
);
|
||||
Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
_initializeCKS() {
|
||||
let wrapepr = document.getElementById("zenCKSOptions-wrapper");
|
||||
let wrapepr = document.getElementById('zenCKSOptions-wrapper');
|
||||
|
||||
// Create the groups first.
|
||||
for (let key in kZKSActions) {
|
||||
const data = kZKSActions[key];
|
||||
const group = data[2];
|
||||
if (!wrapepr.querySelector(`[data-group="${group}"]`)) {
|
||||
let groupElem = document.createElement("h2");
|
||||
groupElem.setAttribute("data-group", group);
|
||||
let groupElem = document.createElement('h2');
|
||||
groupElem.setAttribute('data-group', group);
|
||||
document.l10n.setAttributes(groupElem, `zen-cks-group-${group}`);
|
||||
wrapepr.appendChild(groupElem);
|
||||
}
|
||||
|
|
@ -405,9 +377,9 @@ var gZenCKSSettings = {
|
|||
<html:input readonly="1" class="zenCKSOption-input" id="zenCKSOption-${key}" />
|
||||
</hbox>
|
||||
`);
|
||||
document.l10n.setAttributes(fragment.querySelector(".zenCKSOption-label"), l10nId);
|
||||
document.l10n.setAttributes(fragment.querySelector('.zenCKSOption-label'), l10nId);
|
||||
|
||||
let input = fragment.querySelector(".zenCKSOption-input");
|
||||
let input = fragment.querySelector('.zenCKSOption-input');
|
||||
let shortcut = gZenKeyboardShortcuts.getShortcut(key);
|
||||
if (shortcut) {
|
||||
input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
|
||||
|
|
@ -415,16 +387,16 @@ var gZenCKSSettings = {
|
|||
this._resetCKS(input, key);
|
||||
}
|
||||
|
||||
input.setAttribute("data-key", key);
|
||||
input.addEventListener("focus", (event) => {
|
||||
const key = event.target.getAttribute("data-key");
|
||||
input.setAttribute('data-key', key);
|
||||
input.addEventListener('focus', (event) => {
|
||||
const key = event.target.getAttribute('data-key');
|
||||
this._currentAction = key;
|
||||
event.target.classList.add("zenCKSOption-input-editing");
|
||||
event.target.classList.add('zenCKSOption-input-editing');
|
||||
});
|
||||
|
||||
input.addEventListener("blur", (event) => {
|
||||
input.addEventListener('blur', (event) => {
|
||||
this._currentAction = null;
|
||||
event.target.classList.remove("zenCKSOption-input-editing");
|
||||
event.target.classList.remove('zenCKSOption-input-editing');
|
||||
});
|
||||
|
||||
const groupElem = wrapepr.querySelector(`[data-group="${group}"]`);
|
||||
|
|
@ -433,14 +405,14 @@ var gZenCKSSettings = {
|
|||
},
|
||||
|
||||
_resetCKS(input, key) {
|
||||
input.value = "Not set";
|
||||
input.classList.add("zenCKSOption-input-not-set");
|
||||
input.classList.remove("zenCKSOption-input-invalid");
|
||||
input.value = 'Not set';
|
||||
input.classList.add('zenCKSOption-input-not-set');
|
||||
input.classList.remove('zenCKSOption-input-invalid');
|
||||
gZenKeyboardShortcuts.setShortcut(key, null);
|
||||
},
|
||||
|
||||
_initializeEvents() {
|
||||
window.addEventListener("keydown", this._handleKeyDown.bind(this));
|
||||
window.addEventListener('keydown', this._handleKeyDown.bind(this));
|
||||
},
|
||||
|
||||
_handleKeyDown(event) {
|
||||
|
|
@ -453,18 +425,18 @@ var gZenCKSSettings = {
|
|||
ctrl: event.ctrlKey,
|
||||
alt: event.altKey,
|
||||
shift: event.shiftKey,
|
||||
meta: event.metaKey
|
||||
meta: event.metaKey,
|
||||
};
|
||||
|
||||
const shortcutWithoutModifiers = !shortcut.ctrl && !shortcut.alt && !shortcut.shift && !shortcut.meta;
|
||||
|
||||
if (event.key === "Tab" && shortcutWithoutModifiers) {
|
||||
if (event.key === 'Tab' && shortcutWithoutModifiers) {
|
||||
return;
|
||||
} else if (event.key === "Escape" && shortcutWithoutModifiers) {
|
||||
} else if (event.key === 'Escape' && shortcutWithoutModifiers) {
|
||||
this._currentAction = null;
|
||||
input.blur();
|
||||
return;
|
||||
} else if (event.key === "Backspace" && shortcutWithoutModifiers) {
|
||||
} else if (event.key === 'Backspace' && shortcutWithoutModifiers) {
|
||||
this._resetCKS(input, this._currentAction);
|
||||
return;
|
||||
}
|
||||
|
|
@ -474,7 +446,7 @@ var gZenCKSSettings = {
|
|||
return; // No modifiers, ignore.
|
||||
}
|
||||
|
||||
if (!(["Control", "Alt", "Meta", "Shift"].includes(event.key))) {
|
||||
if (!['Control', 'Alt', 'Meta', 'Shift'].includes(event.key)) {
|
||||
if (event.keycode) {
|
||||
shortcut.keycode = event.keycode;
|
||||
} else {
|
||||
|
|
@ -486,75 +458,75 @@ var gZenCKSSettings = {
|
|||
gZenKeyboardShortcuts.setShortcut(this._currentAction, shortcut);
|
||||
|
||||
input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
|
||||
input.classList.remove("zenCKSOption-input-not-set");
|
||||
input.classList.remove('zenCKSOption-input-not-set');
|
||||
|
||||
if (gZenKeyboardShortcuts.isValidShortcut(shortcut)) {
|
||||
input.classList.remove("zenCKSOption-input-invalid");
|
||||
input.classList.remove('zenCKSOption-input-invalid');
|
||||
} else {
|
||||
input.classList.add("zenCKSOption-input-invalid");
|
||||
input.classList.add('zenCKSOption-input-invalid');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Preferences.addAll([
|
||||
{
|
||||
id: "zen.theme.toolbar-themed",
|
||||
type: "bool",
|
||||
id: 'zen.theme.toolbar-themed',
|
||||
type: 'bool',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "zen.sidebar.enabled",
|
||||
type: "bool",
|
||||
id: 'zen.sidebar.enabled',
|
||||
type: 'bool',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "zen.sidebar.close-on-blur",
|
||||
type: "bool",
|
||||
id: 'zen.sidebar.close-on-blur',
|
||||
type: 'bool',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "zen.view.compact",
|
||||
type: "bool",
|
||||
id: 'zen.view.compact',
|
||||
type: 'bool',
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "zen.view.compact.hide-toolbar",
|
||||
type: "bool",
|
||||
id: 'zen.view.compact.hide-toolbar',
|
||||
type: 'bool',
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "zen.view.compact.toolbar-flash-popup",
|
||||
type: "bool",
|
||||
id: 'zen.view.compact.toolbar-flash-popup',
|
||||
type: 'bool',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "zen.workspaces.enabled",
|
||||
type: "bool",
|
||||
id: 'zen.workspaces.enabled',
|
||||
type: 'bool',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "zen.view.sidebar-expanded.show-button",
|
||||
type: "bool",
|
||||
id: 'zen.view.sidebar-expanded.show-button',
|
||||
type: 'bool',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "zen.view.sidebar-expanded",
|
||||
type: "bool",
|
||||
id: 'zen.view.sidebar-expanded',
|
||||
type: 'bool',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "zen.theme.pill-button",
|
||||
type: "bool",
|
||||
id: 'zen.theme.pill-button',
|
||||
type: 'bool',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "zen.keyboard.shortcuts.disable-firefox",
|
||||
type: "bool",
|
||||
id: 'zen.keyboard.shortcuts.disable-firefox',
|
||||
type: 'bool',
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "zen.themes.tabs.legacy-location",
|
||||
type: "bool",
|
||||
id: 'zen.themes.tabs.legacy-location',
|
||||
type: 'bool',
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
# Important notes!
|
||||
|
||||
Inside browser.js, we hardcoded-ly detect the path name for `zen-welcome` so we can add special attributes to the welcom page. If this path name changes, the welcome page will not work properly.
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
@ -30,24 +29,32 @@ body {
|
|||
--zen-gradient-background: var(--zen-colors-tertiary);
|
||||
--zen-gradient-border: #fbffbe;
|
||||
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
&::before {
|
||||
background: radial-gradient(circle at 50%, var(--zen-gradient-background) 20%, var(--zen-gradient-color) 60%);
|
||||
mask: var(--noise), radial-gradient(circle at 50%, transparent 20%, light-dark(#000, #fff) (60% + 10%));
|
||||
}
|
||||
|
||||
|
||||
&::after {
|
||||
mask-image: var(--noise), linear-gradient(45deg, #000 0%, transparent 25%, transparent 75%, #000 100%);
|
||||
background: linear-gradient(45deg, #6d6dff 10%, var(--zen-gradient-background) 25%, var(--zen-gradient-background) 75%, var(--zen-gradient-border) 90%);
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#6d6dff 10%,
|
||||
var(--zen-gradient-background) 25%,
|
||||
var(--zen-gradient-background) 75%,
|
||||
var(--zen-gradient-border) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +119,7 @@ h2 {
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
.page-split:not([hidden="true"]) {
|
||||
.page-split:not([hidden='true']) {
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
justify-content: start;
|
||||
|
|
@ -127,7 +134,7 @@ h2 {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#theme .card[disabled="true"] {
|
||||
#theme .card[disabled='true'] {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -147,7 +154,7 @@ h2 {
|
|||
align-items: center;
|
||||
align-content: space-between;
|
||||
border: 2px solid var(--arrowpanel-border-color) !important;
|
||||
transition: all .1s ease-in-out !important;
|
||||
transition: all 0.1s ease-in-out !important;
|
||||
margin: 0 10px;
|
||||
border-radius: 7px;
|
||||
outline: none !important;
|
||||
|
|
@ -222,15 +229,15 @@ input[type='checkbox'] {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.page[hidden="true"] {
|
||||
.page[hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page:not([hidden="true"]) {
|
||||
.page:not([hidden='true']) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page:not([hidden="true"]) > * {
|
||||
.page:not([hidden='true']) > * {
|
||||
opacity: 0;
|
||||
animation: fadeInRight 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
|
@ -250,10 +257,18 @@ input[type='checkbox'] {
|
|||
}
|
||||
|
||||
/* There should be no more than 5 elements in a page */
|
||||
.page:not([hidden="true"]) > *:nth-child(2) { animation-delay: 0.1s; }
|
||||
.page:not([hidden="true"]) > *:nth-child(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; }
|
||||
.page:not([hidden='true']) > *:nth-child(2) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.page:not([hidden='true']) > *:nth-child(3) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.page:not([hidden='true']) > *:nth-child(4) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.page:not([hidden='true']) > *:nth-child(5) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -1,86 +1,76 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
const { XPCOMUtils } = ChromeUtils.import(
|
||||
'resource://gre/modules/XPCOMUtils.jsm'
|
||||
)
|
||||
const { XPCOMUtils } = ChromeUtils.import('resource://gre/modules/XPCOMUtils.jsm');
|
||||
|
||||
XPCOMUtils.defineLazyModuleGetters(this, {
|
||||
AddonManager: 'resource://gre/modules/AddonManager.jsm',
|
||||
MigrationUtils: 'resource:///modules/MigrationUtils.jsm',
|
||||
})
|
||||
});
|
||||
|
||||
ChromeUtils.defineModuleGetter(
|
||||
this,
|
||||
'ExtensionSettingsStore',
|
||||
'resource://gre/modules/ExtensionSettingsStore.jsm'
|
||||
);
|
||||
ChromeUtils.defineModuleGetter(this, 'ExtensionSettingsStore', 'resource://gre/modules/ExtensionSettingsStore.jsm');
|
||||
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs");
|
||||
Services.scriptloader.loadSubScript('chrome://browser/content/ZenUIManager.mjs');
|
||||
|
||||
const kWelcomeSeenPref = 'zen.welcomeScreen.seen'
|
||||
const kWelcomeSeenPref = 'zen.welcomeScreen.seen';
|
||||
|
||||
// =============================================================================
|
||||
// Util stuff copied from browser/components/preferences/search.js
|
||||
|
||||
class EngineStore {
|
||||
constructor() {
|
||||
this._engines = []
|
||||
this._engines = [];
|
||||
}
|
||||
|
||||
async init() {
|
||||
const visibleEngines = await Services.search.getVisibleEngines()
|
||||
this.initSpecificEngine(visibleEngines)
|
||||
const visibleEngines = await Services.search.getVisibleEngines();
|
||||
this.initSpecificEngine(visibleEngines);
|
||||
}
|
||||
|
||||
getEngine() {
|
||||
return this._engines
|
||||
return this._engines;
|
||||
}
|
||||
|
||||
initSpecificEngine(engines) {
|
||||
for (const engine of engines) {
|
||||
try {
|
||||
this._engines.push(this._cloneEngine(engine))
|
||||
this._engines.push(this._cloneEngine(engine));
|
||||
} catch (e) {
|
||||
// Ignore engines that throw an exception when cloning.
|
||||
console.error(e)
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getEngineByName(name) {
|
||||
return this._engines.find((engine) => engine.name == name)
|
||||
return this._engines.find((engine) => engine.name == name);
|
||||
}
|
||||
|
||||
_cloneEngine(aEngine) {
|
||||
const clonedObj = {}
|
||||
const clonedObj = {};
|
||||
|
||||
for (const i of ['name', 'alias', '_iconURI', 'hidden']) {
|
||||
clonedObj[i] = aEngine[i]
|
||||
clonedObj[i] = aEngine[i];
|
||||
}
|
||||
|
||||
clonedObj.originalEngine = aEngine
|
||||
clonedObj.originalEngine = aEngine;
|
||||
|
||||
return clonedObj
|
||||
return clonedObj;
|
||||
}
|
||||
|
||||
async getDefaultEngine() {
|
||||
let engineName = await Services.search.getDefault()
|
||||
return this.getEngineByName(engineName._name)
|
||||
let engineName = await Services.search.getDefault();
|
||||
return this.getEngineByName(engineName._name);
|
||||
}
|
||||
|
||||
async setDefaultEngine(engine) {
|
||||
await Services.search.setDefault(
|
||||
engine.originalEngine,
|
||||
Ci.nsISearchService.CHANGE_REASON_USER
|
||||
)
|
||||
await Services.search.setDefault(engine.originalEngine, Ci.nsISearchService.CHANGE_REASON_USER);
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
|
||||
const sleep = (duration) =>
|
||||
new Promise((resolve) => setTimeout(resolve, duration))
|
||||
const sleep = (duration) => new Promise((resolve) => setTimeout(resolve, duration));
|
||||
|
||||
class Page {
|
||||
/**
|
||||
|
|
@ -88,7 +78,7 @@ class Page {
|
|||
* @param {string} id The id of the element that represents this page.
|
||||
*/
|
||||
constructor(id) {
|
||||
this.element = document.getElementById(id)
|
||||
this.element = document.getElementById(id);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -96,78 +86,81 @@ class Page {
|
|||
* @param {Pages} pages The pages wrapper
|
||||
*/
|
||||
setPages(pages) {
|
||||
this.pages = pages
|
||||
this.pages = pages;
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.element.setAttribute('hidden', 'true')
|
||||
this.element.setAttribute('hidden', 'true');
|
||||
}
|
||||
|
||||
show() {
|
||||
this.element.removeAttribute('hidden')
|
||||
this.element.removeAttribute('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
class Themes extends Page {
|
||||
constructor(id) {
|
||||
super(id)
|
||||
|
||||
this.loadThemes()
|
||||
super(id);
|
||||
|
||||
this.loadThemes();
|
||||
}
|
||||
|
||||
async loadThemes() {
|
||||
window.addEventListener('DOMContentLoaded', this.setColorBar);
|
||||
await sleep(1000)
|
||||
await sleep(1000);
|
||||
|
||||
const themes = (await AddonManager.getAddonsByTypes(['theme'])).filter(
|
||||
(theme) => theme.id !== "default-theme@mozilla.org"
|
||||
)
|
||||
const themes = (await AddonManager.getAddonsByTypes(['theme'])).filter((theme) => theme.id !== 'default-theme@mozilla.org');
|
||||
const themeList = document.getElementById('themeList');
|
||||
|
||||
const themeElements = ["firefox-compact-light@mozilla.org", "firefox-compact-dark@mozilla.org"];
|
||||
const themeElements = ['firefox-compact-light@mozilla.org', 'firefox-compact-dark@mozilla.org'];
|
||||
|
||||
themeElements.forEach((theme, i) => {
|
||||
let container = themeList.children[i];
|
||||
container.addEventListener('click', (() => {
|
||||
if (container.hasAttribute('disabled')) {
|
||||
return
|
||||
}
|
||||
for (const el of themeList.children) {
|
||||
el.classList.remove('selected')
|
||||
}
|
||||
container.classList.add('selected')
|
||||
themes.find((t) => t.id === theme).enable()
|
||||
}).bind(this, i, container, theme));
|
||||
container.addEventListener(
|
||||
'click',
|
||||
(() => {
|
||||
if (container.hasAttribute('disabled')) {
|
||||
return;
|
||||
}
|
||||
for (const el of themeList.children) {
|
||||
el.classList.remove('selected');
|
||||
}
|
||||
container.classList.add('selected');
|
||||
themes.find((t) => t.id === theme).enable();
|
||||
}).bind(this, i, container, theme)
|
||||
);
|
||||
if (themes.find((t) => t.id === theme).isActive) {
|
||||
container.classList.add('selected')
|
||||
container.classList.add('selected');
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
setColorBar() {
|
||||
const colorList = document.getElementById('colorListWrapper');
|
||||
const colors = ['#aac7ff', '#74d7cb', '#a0d490', '#dec663', '#ffb787',
|
||||
'#ffb1c0', '#ddbfc3', '#f6b0ea', '#d4bbff']
|
||||
const colors = ['#aac7ff', '#74d7cb', '#a0d490', '#dec663', '#ffb787', '#ffb1c0', '#ddbfc3', '#f6b0ea', '#d4bbff'];
|
||||
|
||||
colors.forEach((color) => {
|
||||
const container = document.createElement('div')
|
||||
container.classList.add('color')
|
||||
container.style.backgroundColor = color
|
||||
container.setAttribute('data-color', color)
|
||||
container.addEventListener('click', (() => {
|
||||
Services.prefs.setStringPref('zen.theme.accent-color', color);
|
||||
colorList.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'))
|
||||
container.classList.add('selected')
|
||||
}).bind(this, color, container))
|
||||
const container = document.createElement('div');
|
||||
container.classList.add('color');
|
||||
container.style.backgroundColor = color;
|
||||
container.setAttribute('data-color', color);
|
||||
container.addEventListener(
|
||||
'click',
|
||||
(() => {
|
||||
Services.prefs.setStringPref('zen.theme.accent-color', color);
|
||||
colorList.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'));
|
||||
container.classList.add('selected');
|
||||
}).bind(this, color, container)
|
||||
);
|
||||
|
||||
colorList.appendChild(container)
|
||||
colorList.appendChild(container);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class Thanks extends Page {
|
||||
constructor(id) {
|
||||
super(id)
|
||||
super(id);
|
||||
|
||||
// Thanks :)
|
||||
}
|
||||
|
|
@ -175,28 +168,28 @@ class Thanks extends Page {
|
|||
|
||||
class Search extends Page {
|
||||
constructor(id) {
|
||||
super(id)
|
||||
super(id);
|
||||
|
||||
this.store = new EngineStore()
|
||||
this.searchList = []
|
||||
this.store = new EngineStore();
|
||||
this.searchList = [];
|
||||
|
||||
this.loadSearch()
|
||||
this.loadSearch();
|
||||
}
|
||||
|
||||
async loadSearch() {
|
||||
await sleep(1100)
|
||||
await this.store.init()
|
||||
await sleep(1100);
|
||||
await this.store.init();
|
||||
|
||||
const defaultEngine = await Services.search.getDefault()
|
||||
const defaultEngine = await Services.search.getDefault();
|
||||
|
||||
const searchElements = document.getElementById('searchList')
|
||||
const searchElements = document.getElementById('searchList');
|
||||
|
||||
this.store.getEngine().forEach(async (search) => {
|
||||
const container = await this.loadSpecificSearch(search, defaultEngine)
|
||||
const container = await this.loadSpecificSearch(search, defaultEngine);
|
||||
|
||||
searchElements.appendChild(container)
|
||||
this.searchList.push(container)
|
||||
})
|
||||
searchElements.appendChild(container);
|
||||
this.searchList.push(container);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -204,42 +197,42 @@ class Search extends Page {
|
|||
*/
|
||||
async loadSpecificSearch(search, defaultSearch) {
|
||||
const container = document.createElement('div');
|
||||
container.classList.add('card')
|
||||
container.classList.add('card-no-hover')
|
||||
container.classList.add('card');
|
||||
container.classList.add('card-no-hover');
|
||||
|
||||
if (search.name == defaultSearch._name) {
|
||||
container.classList.add('selected')
|
||||
container.classList.add('selected');
|
||||
}
|
||||
|
||||
container.addEventListener('click', () => {
|
||||
this.searchList.forEach((el) => el.classList.remove('selected'))
|
||||
container.classList.add('selected')
|
||||
this.store.setDefaultEngine(search)
|
||||
})
|
||||
this.searchList.forEach((el) => el.classList.remove('selected'));
|
||||
container.classList.add('selected');
|
||||
this.store.setDefaultEngine(search);
|
||||
});
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = await search.originalEngine.getIconURL();
|
||||
|
||||
const name = document.createElement('h3')
|
||||
name.textContent = search.name
|
||||
const name = document.createElement('h3');
|
||||
name.textContent = search.name;
|
||||
|
||||
container.appendChild(img)
|
||||
container.appendChild(name)
|
||||
container.appendChild(img);
|
||||
container.appendChild(name);
|
||||
|
||||
return container
|
||||
return container;
|
||||
}
|
||||
}
|
||||
|
||||
class Import extends Page {
|
||||
constructor(id) {
|
||||
super(id)
|
||||
super(id);
|
||||
|
||||
const importButton = document.getElementById('importBrowser')
|
||||
const importButton = document.getElementById('importBrowser');
|
||||
importButton.addEventListener('click', async () => {
|
||||
MigrationUtils.showMigrationWizard(window, {
|
||||
zenBlocking: true,
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -249,62 +242,62 @@ class Pages {
|
|||
* @param {Page[]} pages The pages
|
||||
*/
|
||||
constructor(pages) {
|
||||
console.info("Initializing welcome pages...");
|
||||
this.pages = pages
|
||||
console.info('Initializing welcome pages...');
|
||||
this.pages = pages;
|
||||
this.currentPage = 0;
|
||||
|
||||
window.maximize();
|
||||
window.maximize();
|
||||
|
||||
this.pages.forEach((page) => page.setPages(this))
|
||||
this.pages.forEach((page) => page.setPages(this));
|
||||
|
||||
this._displayCurrentPage();
|
||||
console.info("Welcome pages initialized.")
|
||||
console.info('Welcome pages initialized.');
|
||||
|
||||
this.nextEl = document.getElementById(`next`)
|
||||
this.prevEl = document.getElementById(`back`)
|
||||
this.nextEl = document.getElementById(`next`);
|
||||
this.prevEl = document.getElementById(`back`);
|
||||
|
||||
this.nextEl.addEventListener('click', () => {
|
||||
this.next()
|
||||
this.prevEl.removeAttribute('disabled')
|
||||
})
|
||||
this.next();
|
||||
this.prevEl.removeAttribute('disabled');
|
||||
});
|
||||
|
||||
this.prevEl.addEventListener('click', () => {
|
||||
this.currentPage--
|
||||
this._displayCurrentPage()
|
||||
this.currentPage--;
|
||||
this._displayCurrentPage();
|
||||
if (this.pages.currentPage === 1) {
|
||||
this.prevEl.setAttribute('disabled', 'true')
|
||||
this.prevEl.setAttribute('disabled', 'true');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
next() {
|
||||
this.currentPage++
|
||||
this.currentPage++;
|
||||
|
||||
if (this.currentPage >= this.pages.length) {
|
||||
// We can use internal js apis to close the window. We also want to set
|
||||
// the settings api for welcome seen to false to stop it showing again
|
||||
|
||||
Services.prefs.setBoolPref(kWelcomeSeenPref, true)
|
||||
Services.prefs.setBoolPref(kWelcomeSeenPref, true);
|
||||
|
||||
close();
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
this._displayCurrentPage()
|
||||
this._displayCurrentPage();
|
||||
}
|
||||
|
||||
_displayCurrentPage() {
|
||||
let progress = document.getElementById('circular-progress');
|
||||
progress.style.setProperty('--progress', ((this.currentPage + 1) / this.pages.length) * 100);
|
||||
for (const page of this.pages) {
|
||||
page.hide()
|
||||
page.hide();
|
||||
}
|
||||
if (this.currentPage >= 1) {
|
||||
document.body.classList.remove('gradient-background')
|
||||
document.body.classList.remove('gradient-background');
|
||||
} else {
|
||||
document.body.classList.add('gradient-background')
|
||||
document.body.classList.add('gradient-background');
|
||||
}
|
||||
this.pages[this.currentPage].show()
|
||||
this.pages[this.currentPage].show();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -314,4 +307,4 @@ const pages = new Pages([
|
|||
new Import('import'),
|
||||
new Search('search'),
|
||||
new Thanks('thanks'),
|
||||
])
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
/* Proton Light theme */
|
||||
@import url("chrome://browser/skin/light-dark-overrides.css");
|
||||
@import url('chrome://browser/skin/light-dark-overrides.css');
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
/* Proton Dark theme */
|
||||
@import url("chrome://browser/skin/light-dark-overrides.css");
|
||||
@import url('chrome://browser/skin/light-dark-overrides.css');
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
--zen-settings-secondary-background: light-dark(#F2F4F4, #171717);
|
||||
--zen-settings-secondary-background: light-dark(#f2f4f4, #171717);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
|
|
@ -50,11 +50,11 @@ groupbox:has(+ .subcategory) {
|
|||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.sticky-inner-container{
|
||||
.sticky-inner-container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.subcategory {
|
||||
.subcategory {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ groupbox menulist {
|
|||
}
|
||||
|
||||
groupbox h2 {
|
||||
opacity: .7;
|
||||
opacity: 0.7;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -87,11 +87,10 @@ groupbox h2 {
|
|||
min-height: 40px !important;
|
||||
position: relative;
|
||||
padding-inline: 20px !important;
|
||||
|
||||
}
|
||||
|
||||
#categories > .category[selected]::before {
|
||||
content: "";
|
||||
content: '';
|
||||
display: block;
|
||||
height: 70%;
|
||||
width: 5px;
|
||||
|
|
@ -102,7 +101,7 @@ groupbox h2 {
|
|||
}
|
||||
|
||||
#languagesGroup::before {
|
||||
content: "";
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
|
||||
|
|
@ -151,7 +150,7 @@ groupbox h2 {
|
|||
}
|
||||
|
||||
#category-zen-looks > .category-icon {
|
||||
list-style-image: url("chrome://browser/skin/customize.svg");
|
||||
list-style-image: url('chrome://browser/skin/customize.svg');
|
||||
}
|
||||
|
||||
#zenLooksAndFeelColorOptions {
|
||||
|
|
@ -175,7 +174,7 @@ groupbox h2 {
|
|||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.zenLooksAndFeelColorOptionParen[selected="true"] {
|
||||
.zenLooksAndFeelColorOptionParen[selected='true'] {
|
||||
border-color: var(--zen-primary-color);
|
||||
}
|
||||
|
||||
|
|
@ -189,7 +188,7 @@ groupbox h2 {
|
|||
}
|
||||
|
||||
.zenLooksAndFeelColorOption::before {
|
||||
content: "";
|
||||
content: '';
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
|
@ -200,7 +199,7 @@ groupbox h2 {
|
|||
}
|
||||
|
||||
.zenLooksAndFeelColorOption::after {
|
||||
content: "";
|
||||
content: '';
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
|
@ -213,13 +212,13 @@ groupbox h2 {
|
|||
/* Workspace */
|
||||
|
||||
#category-zen-workspaces > .category-icon {
|
||||
list-style-image: url("chrome://browser/skin/window.svg");
|
||||
list-style-image: url('chrome://browser/skin/window.svg');
|
||||
}
|
||||
|
||||
/* CKS */
|
||||
|
||||
#category-zen-CKS > .category-icon {
|
||||
list-style-image: url("chrome://browser/skin/quickactions.svg");
|
||||
list-style-image: url('chrome://browser/skin/quickactions.svg');
|
||||
}
|
||||
|
||||
.zenCKSOption-input {
|
||||
|
|
@ -316,17 +315,17 @@ groupbox h2 {
|
|||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
|
||||
/* THemes marketplace */
|
||||
|
||||
#category-zen-marketplace > .category-icon {
|
||||
list-style-image: url("chrome://mozapps/skin/extensions/category-themes.svg");
|
||||
list-style-image: url('chrome://mozapps/skin/extensions/category-themes.svg');
|
||||
}
|
||||
|
||||
.zenThemeMarketplaceItem {
|
||||
width: 100%;
|
||||
|
||||
&:not(:first-of-type), .zenThemeMarketplaceItemPreferences {
|
||||
&:not(:first-of-type),
|
||||
.zenThemeMarketplaceItemPreferences {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -34,10 +34,8 @@
|
|||
}
|
||||
},
|
||||
"license": {
|
||||
"ignoredFiles": [
|
||||
".*\\.json"
|
||||
],
|
||||
"ignoredFiles": [".*\\.json"],
|
||||
"licenseType": "MPL-2.0"
|
||||
},
|
||||
"updateHostname": "updates.zen-browser.app"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue