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

Formatted the entire project

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

1
.github/FUNDING.yml vendored
View file

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

View file

@ -15,7 +15,6 @@ on:
type: 'boolean' type: 'boolean'
jobs: jobs:
build-data: build-data:
permissions: permissions:
contents: write contents: write
@ -128,7 +127,6 @@ jobs:
exit 1 exit 1
fi fi
source: source:
permissions: permissions:
contents: write contents: write
@ -430,7 +428,6 @@ jobs:
# output the version to the file # output the version to the file
echo -n ${{ needs.build-data.outputs.version }} > ./flatpak/version echo -n ${{ needs.build-data.outputs.version }} > ./flatpak/version
- uses: stefanzweifel/git-auto-commit-action@v4 - uses: stefanzweifel/git-auto-commit-action@v4
with: with:
commit_message: '[release]: Update flatpak manifest' commit_message: '[release]: Update flatpak manifest'
@ -562,4 +559,3 @@ jobs:
commit_message: 🔖 Update version to ${{ steps.data.outputs.version }} for homebrew! commit_message: 🔖 Update version to ${{ steps.data.outputs.version }} for homebrew!
commit_user_name: Zen Browser Robot commit_user_name: Zen Browser Robot
commit_user_email: zen-browser-bot@users.noreply.github.com commit_user_email: zen-browser-bot@users.noreply.github.com

View file

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

View file

@ -59,7 +59,7 @@ jobs:
- name: Download - name: Download
run: pnpm surfer download run: pnpm surfer download
- name: "win-cross Cache" - name: 'win-cross Cache'
env: env:
SEGMENT_DOWNLOAD_TIMEOUT_MINS: 5 SEGMENT_DOWNLOAD_TIMEOUT_MINS: 5
id: cache-win-cross id: cache-win-cross

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

2
l10n

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

View file

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

View file

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

View file

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

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,4 @@
@media (-moz-bool-pref: 'zen.tabs.vertical') {
@media (-moz-bool-pref: "zen.tabs.vertical") {
#titlebar { #titlebar {
height: 100%; height: 100%;
} }
@ -27,7 +26,7 @@
padding-top: 0 !important; padding-top: 0 !important;
--zen-sidebar-action-button-width: 35px; --zen-sidebar-action-button-width: 35px;
:root[uidensity="compact"] & { :root[uidensity='compact'] & {
--zen-sidebar-action-button-width: 30px; --zen-sidebar-action-button-width: 30px;
} }
@ -72,14 +71,14 @@
margin-top: 0 !important; margin-top: 0 !important;
} }
#zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state="dragging"])) #navigator-toolbox { #zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state='dragging'])) #navigator-toolbox {
transition: .3s; transition: 0.3s;
} }
#navigator-toolbox toolbar#TabsToolbar { #navigator-toolbox toolbar#TabsToolbar {
margin: var(--zen-appcontent-separator-from-window); margin: var(--zen-appcontent-separator-from-window);
overflow: hidden; overflow: hidden;
transition: .2s; transition: 0.2s;
flex-direction: column; flex-direction: column;
padding: 5px 0; padding: 5px 0;
margin-right: 0; margin-right: 0;
@ -87,7 +86,7 @@
--zen-sidebar-action-button-width: 38px; --zen-sidebar-action-button-width: 38px;
padding-bottom: calc(5px + 5px); /* Taking into consideration the padding of the sidebar without being inlined */ padding-bottom: calc(5px + 5px); /* Taking into consideration the padding of the sidebar without being inlined */
:root[zen-sidebar-legacy="true"] & { :root[zen-sidebar-legacy='true'] & {
padding-top: 0 !important; padding-top: 0 !important;
} }
} }
@ -149,20 +148,22 @@
min-height: var(--tab-min-width); /* Make a box */ min-height: var(--tab-min-width); /* Make a box */
animation: zen-slide-in 0.3s; animation: zen-slide-in 0.3s;
width: calc(var(--zen-browser-tab-icon-size) + 2px); width: calc(var(--zen-browser-tab-icon-size) + 2px);
transition: .1s background, .1s border-color; transition:
0.1s background,
0.1s border-color;
min-width: var(--tab-min-width); min-width: var(--tab-min-width);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@media (-moz-bool-pref: "zen.tabs.dim-pending") { @media (-moz-bool-pref: 'zen.tabs.dim-pending') {
.tabbrowser-tab[pending]:not(:hover) { .tabbrowser-tab[pending]:not(:hover) {
opacity: 0.5; opacity: 0.5;
} }
} }
.tabbrowser-tab[hidden="true"] { .tabbrowser-tab[hidden='true'] {
display: none; display: none;
} }
@ -190,7 +191,7 @@
display: none; display: none;
} }
.tabbrowser-tab:is([multiselected="true"], [selected]) { .tabbrowser-tab:is([multiselected='true'], [selected]) {
background: var(--toolbarbutton-hover-background); background: var(--toolbarbutton-hover-background);
} }
@ -198,7 +199,8 @@
display: none; display: none;
} }
.tabbrowser-tab::after {/* Containers */ .tabbrowser-tab::after {
/* Containers */
background: var(--identity-tab-color, transparent); background: var(--identity-tab-color, transparent);
border-radius: 2px; border-radius: 2px;
height: 80%; height: 80%;
@ -229,7 +231,7 @@
top: 50%; top: 50%;
} }
.tabbrowser-tab[open="true"]:hover .tab-close-button { .tabbrowser-tab[open='true']:hover .tab-close-button {
/* TODO: fix this */ /* TODO: fix this */
/*display: block;*/ /*display: block;*/
} }
@ -290,30 +292,31 @@
margin-inline-end: 0 !important; margin-inline-end: 0 !important;
} }
@media (-moz-bool-pref: "zen.view.sidebar-collapsed.hide-mute-button") and (not (-moz-bool-pref: "zen.view.sidebar-expanded")) { @media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') and (not (-moz-bool-pref: 'zen.view.sidebar-expanded')) {
.tab-icon-overlay:is([soundplaying], [muted]):not([selected]) { .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
display: none; display: none;
} }
} }
@media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") { @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') {
:root:not([zen-sidebar-legacy="true"]) #navigator-toolbox:is([zen-user-hover="true"]:hover, :not([zen-user-hover="true"])) { :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) {
padding-right: 47px !important; padding-right: 47px !important;
} }
} }
@media (-moz-bool-pref: "zen.view.sidebar-expanded") { @media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
#navigator-toolbox:is( #navigator-toolbox:is(
#navigator-toolbox[zen-user-hover="true"]:hover, #navigator-toolbox[zen-user-hover='true']:hover,
#navigator-toolbox[zen-user-hover="true"]:focus-within, #navigator-toolbox[zen-user-hover='true']:focus-within,
#mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox, #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox[zen-user-hover="true"]:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)), #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
:not([zen-user-hover="true"])) { :not([zen-user-hover='true'])
) {
--zen-hover-animation: zen-sidebar-panel-animation-2; --zen-hover-animation: zen-sidebar-panel-animation-2;
--zen-navigation-toolbar-min-width: 155px; --zen-navigation-toolbar-min-width: 155px;
min-width: var(--zen-navigation-toolbar-min-width) !important; min-width: var(--zen-navigation-toolbar-min-width) !important;
align-items: start; align-items: start;
transition: .2s; transition: 0.2s;
width: 170px; width: 170px;
border: none; border: none;
padding-left: 2px; padding-left: 2px;
@ -398,7 +401,6 @@
} }
& .tab-label-container { & .tab-label-container {
#tabbrowser-tabs:not([secondarytext-unsupported]) & { #tabbrowser-tabs:not([secondarytext-unsupported]) & {
display: flex; display: flex;
align-items: center; align-items: center;
@ -440,7 +442,7 @@
width: -moz-available; width: -moz-available;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(37px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(37px, 1fr));
transition: .1s; transition: 0.1s;
} }
& #zen-sidebar-icons-wrapper::before { & #zen-sidebar-icons-wrapper::before {
@ -449,18 +451,18 @@
} }
} }
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") { @media not (-moz-bool-pref: 'zen.view.sidebar-expanded') {
#navigator-toolbox { #navigator-toolbox {
width: fit-content !important; width: fit-content !important;
} }
} }
#navigator-toolbox[zen-user-hover="true"] { #navigator-toolbox[zen-user-hover='true'] {
width: fit-content !important; width: fit-content !important;
} }
/* Display the vertical tabs on the right side */ /* Display the vertical tabs on the right side */
@media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) { @media (-moz-bool-pref: 'zen.tabs.vertical.right-side') and (not (-moz-bool-pref: 'zen.view.compact')) {
#navigator-toolbox { #navigator-toolbox {
order: 8 !important; order: 8 !important;
padding-left: 0 !important; padding-left: 0 !important;
@ -472,7 +474,7 @@
padding-right: 0 !important; padding-right: 0 !important;
} }
:root:not([zen-sidebar-legacy="true"]) { :root:not([zen-sidebar-legacy='true']) {
padding: calc(var(--zen-tabbrowser-padding) * 1.5); padding: calc(var(--zen-tabbrowser-padding) * 1.5);
} }
@ -486,7 +488,7 @@
} }
} }
@media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") and (not (-moz-bool-pref: "zen.view.compact")) { @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not (-moz-bool-pref: 'zen.view.compact')) {
#zen-sidebar-splitter { #zen-sidebar-splitter {
display: none !important; display: none !important;
} }
@ -495,7 +497,9 @@
z-index: 1; z-index: 1;
} }
#navigator-toolbox, #titlebar, #TabsToolbar { #navigator-toolbox,
#titlebar,
#TabsToolbar {
transition: 0s !important; transition: 0s !important;
} }
@ -521,7 +525,7 @@
#navigator-toolbox[movingtab], #navigator-toolbox[movingtab],
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox:has(.tabbrowser-tab:active), #navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) { #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
--zen-navigation-toolbar-min-width: 3.3rem !important; --zen-navigation-toolbar-min-width: 3.3rem !important;
& #TabsToolbar { & #TabsToolbar {
@ -530,11 +534,16 @@
background-color: var(--zen-dialog-background); background-color: var(--zen-dialog-background);
border-top-color: var(--zen-colors-border); border-top-color: var(--zen-colors-border);
border-right-color: var(--zen-colors-border); border-right-color: var(--zen-colors-border);
padding-right: .1rem !important; padding-right: 0.1rem !important;
position: absolute; position: absolute;
} }
#navigator-toolbox:not(&) #TabsToolbar #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-content[class] > .tab-close-button[class] { #navigator-toolbox:not(&)
#TabsToolbar
#tabbrowser-tabs[closebuttons='activetab']
.tabbrowser-tab
.tab-content[class]
> .tab-close-button[class] {
display: none !important; display: none !important;
visibility: hidden !important; visibility: hidden !important;
} }
@ -563,7 +572,7 @@
} }
} }
@media (-moz-bool-pref: "zen.tabs.vertical.right-side") { @media (-moz-bool-pref: 'zen.tabs.vertical.right-side') {
#TabsToolbar { #TabsToolbar {
border-right: 0 !important; border-right: 0 !important;
border-left: 1px solid transparent; border-left: 1px solid transparent;
@ -578,7 +587,7 @@
#navigator-toolbox[movingtab], #navigator-toolbox[movingtab],
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox:has(.tabbrowser-tab:active), #navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) { #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
--zen-navigation-toolbar-min-width: 0 !important; --zen-navigation-toolbar-min-width: 0 !important;
position: relative; position: relative;
padding: 0 !important; padding: 0 !important;
@ -589,7 +598,7 @@
} }
} }
@media not (-moz-bool-pref: "zen.tabs.vertical.right-side") { @media not (-moz-bool-pref: 'zen.tabs.vertical.right-side') {
#tabbrowser-tabs { #tabbrowser-tabs {
--zen-tabbrowser-tabs-on-hover-padding: 0 var(--zen-tabbrowser-padding) 0 0 !important; --zen-tabbrowser-tabs-on-hover-padding: 0 var(--zen-tabbrowser-padding) 0 0 !important;
} }

View file

@ -1,4 +1,3 @@
/* Here, we contain all the theme related variables, for example theme /* Here, we contain all the theme related variables, for example theme
* colors, border radius, etc. * colors, border radius, etc.
* We have `--zen-border-radius` and `--zen-primary-color` as variables. * We have `--zen-border-radius` and `--zen-primary-color` as variables.
@ -7,7 +6,6 @@
:host(:is(.anonymous-content-host, notification-message)), :host(:is(.anonymous-content-host, notification-message)),
:root, :root,
.zenLooksAndFeelColorOption { .zenLooksAndFeelColorOption {
/** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
* in the preferences page. * in the preferences page.
*/ */
@ -73,7 +71,7 @@
--zen-in-content-dialog-background: var(--zen-colors-tertiary); --zen-in-content-dialog-background: var(--zen-colors-tertiary);
--zen-button-border-radius: 7px; --zen-button-border-radius: 7px;
--zen-button-padding: .6rem 1.2rem; --zen-button-padding: 0.6rem 1.2rem;
/* Other colors */ /* Other colors */
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important; --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
@ -134,7 +132,7 @@
} }
} }
@media not (-moz-bool-pref: "zen.theme.toolbar-themed") { @media not (-moz-bool-pref: 'zen.theme.toolbar-themed') {
:root { :root {
--toolbar-bgcolor: light-dark(white, #1b1b1b) !important; --toolbar-bgcolor: light-dark(white, #1b1b1b) !important;
--zen-themed-toolbar-bg: var(--toolbar-bgcolor); --zen-themed-toolbar-bg: var(--toolbar-bgcolor);

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

File diff suppressed because it is too large Load diff

View file

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