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

refactor(common, compact-mode, folders, fonts, glance, images, kbs, media, mods, split-view, tabs, tests, workspaces, vendor, welcome): closes #7628 - Refactor zen components file structure for easier understanding

This commit is contained in:
Mr. M 2025-04-15 14:03:55 +02:00
parent c8d616e657
commit 1135744520
No known key found for this signature in database
GPG key ID: 6292C4C8F8652B18
95 changed files with 155 additions and 788 deletions

15
.formal-git/components Normal file
View file

@ -0,0 +1,15 @@
split-view
kbs
folders
workspaces
mods
tests
glance
media
images
vendor
tabs
compact-mode
common
fonts
welcome

1
.formal-git/template Normal file
View file

@ -0,0 +1 @@
{type}({components}): {bugId} - {message}

View file

@ -22,9 +22,8 @@ docs/issue-metrics/*.md
# Some CSS files are preprocessed and prettier doesn't handle them well
# We also dont want to format the CSS files that are generated by the build
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
src/browser/base/content/zen-styles/zen-compact-mode.css
src/browser/base/zen-components/ZenEmojies.mjs
build/codesign/codesign.bash
src/zen/tabs/zen-tabs/vertical-tabs.css
src/zen/compact-mode/zen-compact-mode.css
src/zen/common/ZenEmojies.mjs
*.inc

View file

@ -30,7 +30,7 @@
Zen is currently built using Firefox version `137.0.1`! 🚀
- [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `137.0.1`!
- [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 137.0.2`!
- Check out the latest [release notes](https://zen-browser.app/release-notes)!
- Part of our mission is to keep Zen up-to-date with the latest version of Firefox, so you can enjoy the latest features and security updates!

View file

@ -1 +1 @@
01c20afaa6fe914ff4f083689b8d234c1ba76961
0e33cbae168cda8af58ebf2fbe234e784201a962

12
package-lock.json generated
View file

@ -12,6 +12,7 @@
"@zen-browser/surfer": "^1.11.7"
},
"devDependencies": {
"formal-git": "^1.1.3",
"husky": "^9.1.7",
"lint-staged": "^15.3.0",
"prettier": "^3.4.2",
@ -1028,6 +1029,17 @@
}
}
},
"node_modules/formal-git": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/formal-git/-/formal-git-1.1.3.tgz",
"integrity": "sha512-0PCSlDDnslN4TfKuAGNdDB4FYs6gMSI3bOVNx1PpD0OxNhTrDSTZwZlpx04lQVx2DkiQaK7Hcgnn+sBBX2wqCQ==",
"dev": true,
"license": "ISC",
"bin": {
"fo": "lib/main.js",
"formal-git": "lib/main.js"
}
},
"node_modules/fs-constants": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",

View file

@ -43,6 +43,7 @@
"@zen-browser/surfer": "^1.11.7"
},
"devDependencies": {
"formal-git": "^1.1.3",
"husky": "^9.1.7",
"lint-staged": "^15.3.0",
"prettier": "^3.4.2",

View file

@ -0,0 +1,17 @@
#!/bin/bash
set -e
COMPONENT_ROOT=$(pwd)/src/zen
echo "" > .formal-git/components
# iterate top directories and adding the base name to .formal-git/components
for dir in $(find $COMPONENT_ROOT -maxdepth 1 -type d | grep -v '\.git' | grep -v 'node_modules' | grep -v 'engine'); do
if [ "$dir" != "$COMPONENT_ROOT" ]; then
echo "$(basename $dir)" >> .formal-git/components
fi
done
# remove all empty lines
sed -i '/^$/d' .formal-git/components

View file

@ -43,7 +43,4 @@ Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/Zen
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenViewSplitter.mjs", this);
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenGlanceManager.mjs", this);
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenMediaController.mjs", this);
// Unimportant scripts
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenRices.mjs", this);
</script>

View file

@ -1,82 +1,87 @@
content/browser/zenThemeModifier.js (content/zenThemeModifier.js)
content/browser/ZenStartup.mjs (content/ZenStartup.mjs)
content/browser/zen-sets.js (content/zen-sets.js)
content/browser/ZenUIManager.mjs (content/ZenUIManager.mjs)
content/browser/ZenCustomizableUI.sys.mjs (content/ZenCustomizableUI.sys.mjs)
content/browser/zen-components/ZenUIMigration.mjs (zen-components/ZenUIMigration.mjs)
content/browser/zen-components/ZenCompactMode.mjs (zen-components/ZenCompactMode.mjs)
content/browser/zen-components/ZenViewSplitter.mjs (zen-components/ZenViewSplitter.mjs)
content/browser/zen-components/ZenThemesCommon.mjs (zen-components/ZenThemesCommon.mjs)
content/browser/zen-components/ZenWorkspaces.mjs (zen-components/ZenWorkspaces.mjs)
content/browser/zen-components/ZenWorkspacesStorage.mjs (zen-components/ZenWorkspacesStorage.mjs)
content/browser/zen-components/ZenWorkspacesSync.mjs (zen-components/ZenWorkspacesSync.mjs)
content/browser/zen-components/ZenKeyboardShortcuts.mjs (zen-components/ZenKeyboardShortcuts.mjs)
content/browser/zen-components/ZenThemesImporter.mjs (zen-components/ZenThemesImporter.mjs)
content/browser/zen-components/ZenTabUnloader.mjs (zen-components/ZenTabUnloader.mjs)
content/browser/zen-components/ZenPinnedTabsStorage.mjs (zen-components/ZenPinnedTabsStorage.mjs)
content/browser/zen-components/ZenPinnedTabManager.mjs (zen-components/ZenPinnedTabManager.mjs)
content/browser/zen-components/ZenCommonUtils.mjs (zen-components/ZenCommonUtils.mjs)
content/browser/zen-components/ZenGradientGenerator.mjs (zen-components/ZenGradientGenerator.mjs)
content/browser/zen-components/ZenGlanceManager.mjs (zen-components/ZenGlanceManager.mjs)
content/browser/zen-components/ZenFolders.mjs (zen-components/ZenFolders.mjs)
content/browser/zen-components/ZenActorsManager.mjs (zen-components/ZenActorsManager.mjs)
content/browser/zen-components/ZenRices.mjs (zen-components/ZenRices.mjs)
content/browser/zen-components/ZenEmojies.mjs (zen-components/ZenEmojies.mjs)
content/browser/zen-components/ZenWelcome.mjs (zen-components/ZenWelcome.mjs)
content/browser/zen-components/ZenMediaController.mjs (zen-components/ZenMediaController.mjs)
content/browser/zenThemeModifier.js (../../zen/common/zenThemeModifier.js)
content/browser/ZenStartup.mjs (../../zen/common/ZenStartup.mjs)
content/browser/zen-sets.js (../../zen/common/zen-sets.js)
content/browser/ZenUIManager.mjs (../../zen/common/ZenUIManager.mjs)
content/browser/zen-components/ZenActorsManager.mjs (../../zen/common/ZenActorsManager.mjs)
content/browser/zen-components/ZenEmojies.mjs (../../zen/common/ZenEmojies.mjs)
content/browser/ZenCustomizableUI.sys.mjs (../../zen/common/ZenCustomizableUI.sys.mjs)
content/browser/zen-components/ZenUIMigration.mjs (../../zen/common/ZenUIMigration.mjs)
content/browser/zen-components/ZenCommonUtils.mjs (../../zen/common/ZenCommonUtils.mjs)
content/browser/zen-styles/zen-theme.css (content/zen-styles/zen-theme.css)
content/browser/zen-styles/zen-buttons.css (content/zen-styles/zen-buttons.css)
content/browser/zen-styles/zen-tabs.css (content/zen-styles/zen-tabs.css)
* content/browser/zen-styles/zen-tabs/vertical-tabs.css (content/zen-styles/zen-tabs/vertical-tabs.css)
content/browser/zen-styles/zen-tabs/horizontal-tabs.css (content/zen-styles/zen-tabs/horizontal-tabs.css)
content/browser/zen-styles/zen-browser-ui.css (content/zen-styles/zen-browser-ui.css)
content/browser/zen-styles/zen-animations.css (content/zen-styles/zen-animations.css)
content/browser/zen-styles/zen-panel-ui.css (content/zen-styles/zen-panel-ui.css)
content/browser/zen-styles/zen-single-components.css (content/zen-styles/zen-single-components.css)
content/browser/zen-styles/zen-sidebar.css (content/zen-styles/zen-sidebar.css)
content/browser/zen-styles/zen-toolbar.css (content/zen-styles/zen-toolbar.css)
content/browser/zen-styles/zen-decks.css (content/zen-styles/zen-decks.css)
content/browser/zen-styles/zen-folders.css (content/zen-styles/zen-folders.css)
content/browser/zen-styles/zen-glance.css (content/zen-styles/zen-glance.css)
content/browser/zen-styles/zen-browser-container.css (content/zen-styles/zen-browser-container.css)
content/browser/zen-styles/zen-workspaces.css (content/zen-styles/zen-workspaces.css)
content/browser/zen-styles/zen-urlbar.css (content/zen-styles/zen-urlbar.css)
content/browser/zen-styles/zen-popup.css (content/zen-styles/zen-popup.css)
content/browser/zen-styles/zen-gradient-generator.css (content/zen-styles/zen-gradient-generator.css)
content/browser/zen-styles/zen-rices.css (content/zen-styles/zen-rices.css)
content/browser/zen-styles/zen-branding.css (content/zen-styles/zen-branding.css)
content/browser/zen-styles/zen-welcome.css (content/zen-styles/zen-welcome.css)
content/browser/zen-styles/zen-media-controls.css (content/zen-styles/zen-media-controls.css)
content/browser/zen-styles/zen-theme.css (../../zen/common/styles/zen-theme.css)
content/browser/zen-styles/zen-buttons.css (../../zen/common/styles/zen-buttons.css)
content/browser/zen-styles/zen-browser-ui.css (../../zen/common/styles/zen-browser-ui.css)
content/browser/zen-styles/zen-animations.css (../../zen/common/styles/zen-animations.css)
content/browser/zen-styles/zen-panel-ui.css (../../zen/common/styles/zen-panel-ui.css)
content/browser/zen-styles/zen-single-components.css (../../zen/common/styles/zen-single-components.css)
content/browser/zen-styles/zen-sidebar.css (../../zen/common/styles/zen-sidebar.css)
content/browser/zen-styles/zen-toolbar.css (../../zen/common/styles/zen-toolbar.css)
content/browser/zen-styles/zen-browser-container.css (../../zen/common/styles/zen-browser-container.css)
content/browser/zen-styles/zen-urlbar.css (../../zen/common/styles/zen-urlbar.css)
content/browser/zen-styles/zen-popup.css (../../zen/common/styles/zen-popup.css)
content/browser/zen-styles/zen-branding.css (../../zen/common/styles/zen-branding.css)
content/browser/zen-styles/zen-panels/bookmarks.css (content/zen-styles/zen-panels/bookmarks.css)
content/browser/zen-styles/zen-panels/extensions.css (content/zen-styles/zen-panels/extensions.css)
content/browser/zen-styles/zen-panels/print.css (content/zen-styles/zen-panels/print.css)
content/browser/zen-styles/zen-panels/dialog.css (content/zen-styles/zen-panels/dialog.css)
content/browser/zen-styles/zen-panels/bookmarks.css (../../zen/common/styles/zen-panels/bookmarks.css)
content/browser/zen-styles/zen-panels/extensions.css (../../zen/common/styles/zen-panels/extensions.css)
content/browser/zen-styles/zen-panels/print.css (../../zen/common/styles/zen-panels/print.css)
content/browser/zen-styles/zen-panels/dialog.css (../../zen/common/styles/zen-panels/dialog.css)
* content/browser/zen-styles/zen-compact-mode.css (content/zen-styles/zen-compact-mode.css)
content/browser/zen-components/ZenCompactMode.mjs (../../zen/compact-mode/ZenCompactMode.mjs)
* content/browser/zen-styles/zen-compact-mode.css (../../zen/compact-mode/zen-compact-mode.css)
content/browser/zen-components/ZenViewSplitter.mjs (../../zen/split-view/ZenViewSplitter.mjs)
content/browser/zen-styles/zen-decks.css (../../zen/split-view/zen-decks.css)
content/browser/zen-components/ZenThemesCommon.mjs (../../zen/mods/ZenThemesCommon.mjs)
content/browser/zen-components/ZenThemesImporter.mjs (../../zen/mods/ZenThemesImporter.mjs)
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (../../zen/mods/actors/ZenThemeMarketplaceParent.sys.mjs)
content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs (../../zen/mods/actors/ZenThemeMarketplaceChild.sys.mjs)
content/browser/zen-components/ZenWorkspaces.mjs (../../zen/workspaces/ZenWorkspaces.mjs)
content/browser/zen-components/ZenWorkspacesStorage.mjs (../../zen/workspaces/ZenWorkspacesStorage.mjs)
content/browser/zen-components/ZenWorkspacesSync.mjs (../../zen/workspaces/ZenWorkspacesSync.mjs)
content/browser/zen-components/ZenGradientGenerator.mjs (../../zen/workspaces/ZenGradientGenerator.mjs)
content/browser/zen-styles/zen-workspaces.css (../../zen/workspaces/zen-workspaces.css)
content/browser/zen-styles/zen-gradient-generator.css (../../zen/workspaces/zen-gradient-generator.css)
content/browser/zen-components/ZenKeyboardShortcuts.mjs (../../zen/kbs/ZenKeyboardShortcuts.mjs)
content/browser/zen-components/ZenTabUnloader.mjs (../../zen/tabs/ZenTabUnloader.mjs)
content/browser/zen-components/ZenPinnedTabsStorage.mjs (../../zen/tabs/ZenPinnedTabsStorage.mjs)
content/browser/zen-components/ZenPinnedTabManager.mjs (../../zen/tabs/ZenPinnedTabManager.mjs)
content/browser/zen-styles/zen-tabs.css (../../zen/tabs/zen-tabs.css)
* content/browser/zen-styles/zen-tabs/vertical-tabs.css (../../zen/tabs/zen-tabs/vertical-tabs.css)
content/browser/zen-styles/zen-tabs/horizontal-tabs.css (../../zen/tabs/zen-tabs/horizontal-tabs.css)
content/browser/zen-components/ZenGlanceManager.mjs (../../zen/glance/ZenGlanceManager.mjs)
content/browser/zen-styles/zen-glance.css (../../zen/glance/zen-glance.css)
content/browser/zen-components/actors/ZenGlanceChild.sys.mjs (../../zen/glance/actors/ZenGlanceChild.sys.mjs)
content/browser/zen-components/actors/ZenGlanceParent.sys.mjs (../../zen/glance/actors/ZenGlanceParent.sys.mjs)
content/browser/zen-components/ZenFolders.mjs (../../zen/folders/ZenFolders.mjs)
content/browser/zen-styles/zen-folders.css (../../zen/folders/zen-folders.css)
content/browser/zen-components/ZenWelcome.mjs (../../zen/welcome/ZenWelcome.mjs)
content/browser/zen-styles/zen-welcome.css (../../zen/welcome/zen-welcome.css)
content/browser/zen-components/ZenMediaController.mjs (../../zen/media/ZenMediaController.mjs)
content/browser/zen-styles/zen-media-controls.css (../../zen/media/zen-media-controls.css)
# Images
content/browser/zen-images/gradient.png (content/zen-images/gradient.png)
content/browser/zen-images/brand-header.svg (content/zen-images/brand-header.svg)
content/browser/zen-images/layouts/collapsed.png (content/zen-images/layouts/collapsed.png)
content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png)
content/browser/zen-images/layouts/single-toolbar.png (content/zen-images/layouts/single-toolbar.png)
content/browser/zen-images/grain-bg.png (content/zen-images/grain-bg.png)
content/browser/zen-images/note-indicator.svg (content/zen-images/note-indicator.svg)
# Actors
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (zen-components/actors/ZenThemeMarketplaceParent.sys.mjs)
content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs (zen-components/actors/ZenThemeMarketplaceChild.sys.mjs)
content/browser/zen-components/actors/ZenGlanceChild.sys.mjs (zen-components/actors/ZenGlanceChild.sys.mjs)
content/browser/zen-components/actors/ZenGlanceParent.sys.mjs (zen-components/actors/ZenGlanceParent.sys.mjs)
content/browser/zen-images/gradient.png (../../zen/images/gradient.png)
content/browser/zen-images/brand-header.svg (../../zen/images/brand-header.svg)
content/browser/zen-images/layouts/collapsed.png (../../zen/images/layouts/collapsed.png)
content/browser/zen-images/layouts/multiple-toolbar.png (../../zen/images/layouts/multiple-toolbar.png)
content/browser/zen-images/layouts/single-toolbar.png (../../zen/images/layouts/single-toolbar.png)
content/browser/zen-images/grain-bg.png (../../zen/images/grain-bg.png)
content/browser/zen-images/note-indicator.svg (../../zen/images/note-indicator.svg)
# Fonts
content/browser/zen-fonts/JunicodeVF-Italic.woff2 (content/zen-fonts/JunicodeVF-Italic.woff2)
content/browser/zen-fonts/JunicodeVF-Roman.woff2 (content/zen-fonts/JunicodeVF-Roman.woff2)
content/browser/zen-fonts/JunicodeVF-Italic.woff2 (../../zen/fonts/JunicodeVF-Italic.woff2)
content/browser/zen-fonts/JunicodeVF-Roman.woff2 (../../zen/fonts/JunicodeVF-Roman.woff2)
# JS Vendor
content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (content/zen-vendor/tsparticles.confetti.bundle.min.js)
content/browser/zen-vendor/motion.min.mjs (content/zen-vendor/motion.min.mjs)
content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (../../zen/vendor/tsparticles.confetti.bundle.min.js)
content/browser/zen-vendor/motion.min.mjs (../../zen/vendor/motion.min.mjs)

View file

@ -1,4 +1,4 @@
#include zen-media-controls.inc.xhtml
#include ../../../zen/media/zen-media-controls.inc.xhtml
<toolbar brighttext="true"
id="zen-sidebar-bottom-buttons"
fullscreentoolbar="true"

View file

@ -1,226 +0,0 @@
#zen-rice-share-dialog-overlay:not([hidden]) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
}
#zen-rice-share-dialog,
#zen-rice-share-dialog-notice {
color: var(--panel-color);
background: var(--arrowpanel-background);
border-radius: var(--zen-native-inner-radius);
box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, 0.2);
border: var(--zen-appcontent-border);
overflow: hidden;
animation: zen-jello-animation-large 0.4s ease;
max-width: 400px;
&[animate='true'] {
animation: zen-rice-submit-animation 1s cubic-bezier(0.77, 0, 0.18, 1);
}
& .zen-rice-share-content {
padding: 10px 0;
border-top: var(--zen-appcontent-border);
background: var(--arrowpanel-background);
position: relative;
align-items: center;
min-height: 50px;
&:has(#zen-rice-share-first-form:not([fade-out])),
&:has(#zen-rice-share-success) {
padding-top: 20px;
}
& > vbox {
width: 100%;
padding: 0 10px;
}
& #zen-rice-share-first-form input[type='text'] {
width: 100%;
padding: 1px 2px;
border: 0;
border-bottom: 1px solid var(--zen-appcontent-border);
background: transparent;
font-style: italic;
font-weight: 600;
}
& #zen-rice-share-name {
font-style: normal !important;
font-size: 24px;
margin-left: 1px;
}
& .indent {
margin-left: 30px;
}
}
& .zen-rice-share-header {
height: 200px;
margin-bottom: -20px;
}
& #zen-rice-share-options {
padding: 10px 0;
max-height: 30px;
overflow: hidden;
transition:
max-height 0.3s ease,
height 0.3s ease;
&[zen-collapsed='false'] {
max-height: 350px;
}
& > .options-header {
font-weight: 600;
margin-bottom: 5px;
position: relative;
cursor: pointer;
align-items: center;
color: inherit;
-moz-context-properties: fill, fill-opacity;
fill: var(--toolbarbutton-icon-fill);
& label {
width: fit-content;
cursor: pointer;
}
}
& > .options-header image {
transition: transform 0.3s ease;
width: 15px;
height: 15px;
}
&[zen-collapsed='false'] > .options-header image {
transform: rotate(90deg);
}
& > checkbox {
margin-left: 15px;
}
}
& .panel-footer {
margin: 0;
margin-top: 10px;
& button {
justify-content: center;
}
}
#zen-rice-share-error {
border: 1px solid rgba(255, 0, 0, 0.5);
background: rgba(255, 0, 0, 0.1);
padding: 5px;
transition: opacity 0.3s ease;
border-radius: var(--zen-native-inner-radius);
@starting-style {
opacity: 0;
}
& button {
margin-left: auto;
margin-top: 2px;
}
}
/* Animations */
#zen-rice-share-first-form[fade-out] {
position: absolute;
transform: translateX(-100%);
pointer-events: none;
animation: zen-rice-form-out 0.5s ease;
}
#zen-rice-share-second-form {
animation: zen-rice-form-in 0.5s ease forwards;
justify-content: center;
& > hbox {
width: 100%;
height: 5px;
border-radius: 100px;
border: 1px solid var(--zen-colors-border);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--zen-primary-color);
transition: width 4s cubic-bezier(1, 0, 0, 1);
@starting-style {
width: 0;
}
}
}
&[fade-out] {
position: absolute !important;
animation: zen-rice-form-out 0.5s ease forwards;
}
}
#zen-rice-share-success {
overflow-y: hidden;
max-height: 0px;
animation: zen-rice-form-in-2 0.5s ease forwards;
& > h1 {
margin: 0;
font-size: 20px;
}
& > p {
color: var(--text-color-deemphasized);
}
& label {
margin: 0;
margin-top: 15px;
font-weight: 600;
margin-bottom: 5px;
}
}
}
#zen-rice-share-dialog-notice {
padding: 15px;
& br {
margin-bottom: 10px;
}
& > p {
color: var(--text-color-deemphasized);
margin-top: 10px;
}
.panel-footer {
margin-top: 10px;
align-items: center;
}
}

View file

@ -1,2 +1,2 @@
#include zen-splitview-overlay.inc.xhtml
#include zen-glance.inc.xhtml
#include ../../../zen/split-view/zen-splitview-overlay.inc.xhtml
#include ../../../zen/glance/zen-glance.inc.xhtml

View file

@ -1,5 +1,5 @@
diff --git a/browser/base/moz.build b/browser/base/moz.build
index 636e0841786735a63ddea00e819c0b6f0b8a5d4d..6685d857180944d68bf4f049919f81361084c481 100644
index 636e0841786735a63ddea00e819c0b6f0b8a5d4d..62e4531bd19caf098fd76c69b213fa32d62546a6 100644
--- a/browser/base/moz.build
+++ b/browser/base/moz.build
@@ -87,3 +87,5 @@ if CONFIG["MOZ_WIDGET_TOOLKIT"] in ("windows", "gtk"):
@ -7,4 +7,4 @@ index 636e0841786735a63ddea00e819c0b6f0b8a5d4d..6685d857180944d68bf4f049919f8136
JAR_MANIFESTS += ["jar.mn"]
+
+DIRS += ["zen-components"]
+DIRS += ["../../zen"]

View file

@ -1,428 +0,0 @@
{
const ZEN_RICE_API = Services.prefs.getStringPref('zen.rice.api.url', '');
class ZenRiceCollector {
constructor() {}
clear() {
this._userChrome = null;
this._userContent = null;
this._enabledMods = null;
this._preferences = null;
this._workspaceThemes = null;
}
async gatherAll({
userUserChrome = true,
userContent = true,
enabledMods = true,
preferences = true,
modPrefs = true,
workspaceThemes = true,
} = {}) {
this.clear();
// Get the mods first, as they may be needed for the preferences
if (enabledMods) {
await this.gatherEnabledMods();
}
await Promise.all([
userUserChrome && this.gatherUserChrome(),
userContent && this.gatherUserContent(),
preferences && this.gatherPreferences({ modPrefs }),
workspaceThemes && this.gatherWorkspaceThemes(),
]);
}
get profileDir() {
return PathUtils.profileDir;
}
async gatherUserChrome() {
try {
const path = PathUtils.join(this.profileDir, 'chrome', 'userChrome.css');
this._userChrome = await IOUtils.readUTF8(path);
} catch (e) {
console.warn('[ZenRiceCollector]: Error reading userChrome.css: ', e);
return null;
}
}
async gatherUserContent() {
try {
const path = PathUtils.join(this.profileDir, 'chrome', 'userContent.css');
this._userContent = await IOUtils.readUTF8(path);
} catch (e) {
console.warn('[ZenRiceCollector]: Error reading userContent.css: ', e);
return null;
}
}
async gatherEnabledMods() {
const activeThemes = await gZenThemesImporter.getEnabledThemes();
if (activeThemes.length === 0) {
return;
}
this._enabledMods = activeThemes;
}
_getThemePrefValue(theme, pref) {
if (pref.type === 'checkbox') {
return Services.prefs.getBoolPref(pref.property);
}
return Services.prefs.getStringPref(pref.property);
}
async gatherPreferences({ modPrefs = true } = {}) {
this._preferences = {};
if (modPrefs && this._enabledMods) {
for (const theme of this._enabledMods) {
const prefs = await ZenThemesCommon.getThemePreferences(theme);
for (const pref of prefs) {
this._preferences[pref.property] = this._getThemePrefValue(theme, pref);
}
}
}
const boolPrefsToCollect = [
'zen.view.use-single-toolbar',
'zen.view.sidebar-expanded',
'zen.tabs.vertical.right-side',
'zen.view.experimental-no-window-controls',
'zen.view.hide-window-controls',
...(gZenOperatingSystemCommonUtils.currentOperatingSystem === 'windows' ? ['widget.windows.mica'] : []),
...(gZenOperatingSystemCommonUtils.currentOperatingSystem === 'macos'
? ['widget.macos.titlebar-blend-mode.behind-window']
: []),
];
const stringPrefsToCollect = ['browser.uiCustomization.state'];
for (const pref of boolPrefsToCollect) {
this._preferences[pref] = Services.prefs.getBoolPref(pref);
}
for (const pref of stringPrefsToCollect) {
this._preferences[pref] = Services.prefs.getStringPref(pref);
}
}
async gatherWorkspaceThemes() {
const workspaces = (await ZenWorkspaces._workspaces()).workspaces;
this._workspaceThemes = workspaces.map((w) => w.theme);
}
async packRice(...args) {
await this.gatherAll(...args);
const rice = {
userChrome: this._userChrome,
userContent: this._userContent,
enabledMods: this._enabledMods?.map((t) => t.id),
preferences: this._preferences,
workspaceThemes: this._workspaceThemes,
};
return rice;
}
}
class ZenRiceManager {
constructor() {
this._collector = new ZenRiceCollector();
}
init() {}
get conffettiWrapper() {
if (!this.confetti) {
Services.scriptloader.loadSubScript('chrome://browser/content/zen-vendor/tsparticles.confetti.bundle.min.js', this);
}
return this.confetti;
}
async packRice() {
return await this._collector.packRice();
}
get shareDialog() {
if (this._shareDialog) {
return this._shareDialog;
}
this._shareDialog = window.MozXULElement.parseXULToFragment(`
<vbox id="zen-rice-share-dialog-overlay" hidden="true">
<vbox id="zen-rice-share-dialog-notice">
<h1 data-l10n-id="zen-rice-share-notice" />
<p data-l10n-id="zen-rice-share-notice-description" />
<html:moz-button-group class="panel-footer">
<html:a href="https://docs.zen-browser.app/guides/" target="_blank" data-l10n-id="zen-learn-more-text" onclick="gZenThemePicker.riceManager.openLink(event)" />
<button onclick="gZenThemePicker.riceManager.acceptNotice()" class="footer-button" data-l10n-id="zen-rice-share-accept" slot="primary" default="true" />
</html:moz-button-group>
</vbox>
<vbox id="zen-rice-share-dialog" hidden="true">
<html:img src="chrome://browser/content/zen-images/brand-header.svg" class="zen-rice-share-header" />
<hbox class="zen-rice-share-content">
<vbox id="zen-rice-share-first-form">
<html:input type="text" data-l10n-id="zen-rice-share-name" id="zen-rice-share-name" oninput="gZenThemePicker.riceManager.validateShareDialog()" />
<hbox class="zen-rice-share-author">
<label data-l10n-id="zen-rice-share-author" />
<html:input type="text" data-l10n-id="zen-rice-share-author-input" id="zen-rice-share-author" oninput="gZenThemePicker.riceManager.validateShareDialog();" />
</hbox>
<vbox zen-collapsed="true" id="zen-rice-share-options" onclick="gZenThemePicker.riceManager.toggleOptions(event)">
<hbox class="options-header">
<label data-l10n-id="zen-rice-share-include" />
<image></image>
</hbox>
<checkbox data-l10n-id="zen-rice-share-include-userchrome" id="zen-rice-share-include-userchrome" />
<checkbox data-l10n-id="zen-rice-share-include-usercontent" id="zen-rice-share-include-usercontent" />
<checkbox data-l10n-id="zen-rice-share-include-mods" id="zen-rice-share-include-mods" />
<vbox class="indent">
<checkbox data-l10n-id="zen-rice-share-include-mod-prefs" id="zen-rice-share-include-mod-prefs" />
</vbox>
<checkbox data-l10n-id="zen-rice-share-include-preferences" id="zen-rice-share-include-preferences" />
<checkbox data-l10n-id="zen-rice-share-include-workspace-themes" id="zen-rice-share-include-workspace-themes" />
</vbox>
<html:moz-button-group class="panel-footer">
<button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-general-cancel" />
<button onclick="gZenThemePicker.riceManager.submit()" class="footer-button" data-l10n-id="zen-rice-share-save" default="true" slot="primary" id="zen-rice-share-save" disabled="true" />
</html:moz-button-group>
</vbox>
<vbox id="zen-rice-share-second-form" hidden="true">
<hbox></hbox>
<vbox id="zen-rice-share-error" hidden="true">
<label data-l10n-id="zen-rice-share-error" />
<button onclick="gZenThemePicker.riceManager.resetShareDialog()" data-l10n-id="zen-close-label" class="footer-button" />
</vbox>
</vbox>
<vbox id="zen-rice-share-success" hidden="true">
<h1 data-l10n-id="zen-rice-share-success" />
<p data-l10n-id="zen-rice-share-succes-details" />
<label data-l10n-id="zen-rice-share-success-link" />
<html:input type="text" readonly="true" id="zen-rice-share-success-link" onclick="this.select()" />
<html:moz-button-group class="panel-footer">
<button onclick="gZenThemePicker.riceManager.resetShareDialog()" data-l10n-id="zen-close-label" class="footer-button" slot="primary" default="true" />
</html:moz-button-group>
</vbox>
</hbox>
</vbox>
</vbox>
`);
document.getElementById('zen-main-app-wrapper').appendChild(this._shareDialog);
this._shareDialog = document.getElementById('zen-rice-share-dialog-overlay');
return this._shareDialog;
}
get hasAcceptedNotice() {
return Services.prefs.getBoolPref('zen.rice.share.notice.accepted', false);
}
set hasAcceptedNotice(value) {
Services.prefs.setBoolPref('zen.rice.share.notice.accepted', value);
}
openLink(event) {
event.stopPropagation();
this.cancel();
gZenUIManager.openAndChangeToTab('https://docs.zen-browser.app/guides/');
}
acceptNotice() {
this.hasAcceptedNotice = true;
const notice = document.getElementById('zen-rice-share-dialog-notice');
notice.setAttribute('hidden', 'true');
this.openShareDialog();
}
toggleOptions(event) {
if (event.originalTarget.closest('.options-header')) {
const options = document.getElementById('zen-rice-share-options');
options.setAttribute('zen-collapsed', options.getAttribute('zen-collapsed') === 'true' ? 'false' : 'true');
}
this.validateShareDialog();
}
openShareDialog() {
window.docShell.treeOwner.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIAppWindow).rollupAllPopups();
const dialog = this.shareDialog;
dialog.removeAttribute('hidden');
if (!this.hasAcceptedNotice) {
const notice = document.getElementById('zen-rice-share-dialog-notice');
notice.removeAttribute('hidden');
return;
}
document.getElementById('zen-rice-share-dialog').removeAttribute('hidden');
document.getElementById('zen-rice-share-dialog-notice').setAttribute('hidden', 'true');
document.getElementById('zen-rice-share-name').focus();
// Initialize the dialog with the current values
this.validateShareDialog();
}
resetShareDialog() {
const dialog = this.shareDialog;
dialog.setAttribute('hidden', 'true');
document.getElementById('zen-rice-share-dialog').removeAttribute('animate');
document.getElementById('zen-rice-share-name').value = '';
document.getElementById('zen-rice-share-author').value = '';
document.getElementById('zen-rice-share-save').disabled = true;
document.getElementById('zen-rice-share-first-form').removeAttribute('fade-out');
document.getElementById('zen-rice-share-second-form').setAttribute('hidden', 'true');
document.getElementById('zen-rice-share-second-form').removeAttribute('fade-out');
document.getElementById('zen-rice-share-error').setAttribute('hidden', 'true');
document.getElementById('zen-rice-share-success').setAttribute('hidden', 'true');
document.getElementById('zen-rice-share-options').setAttribute('zen-collapsed', 'true');
// Remove confetti module from memory
this.confetti = null;
}
cancel() {
this.resetShareDialog();
}
getAllowedRice() {
return {
userChrome: document.getElementById('zen-rice-share-include-userchrome').checked,
userContent: document.getElementById('zen-rice-share-include-usercontent').checked,
mods: document.getElementById('zen-rice-share-include-mods').checked,
modPrefs: document.getElementById('zen-rice-share-include-mod-prefs').checked,
preferences: document.getElementById('zen-rice-share-include-preferences').checked,
workspaceThemes: document.getElementById('zen-rice-share-include-workspace-themes').checked,
};
}
get userAgent() {
return `ZenBrowser/${Services.appinfo.version} (${gZenOperatingSystemCommonUtils.currentOperatingSystem})`;
}
canShareRice() {
const allowedRice = this.getAllowedRice();
const modsPrefs = document.getElementById('zen-rice-share-include-mod-prefs');
// remove "share mod prefs" if mods are not included
if (!allowedRice.mods) {
allowedRice.modPrefs = false;
modsPrefs.disabled = true;
}
modsPrefs.disabled = !allowedRice.mods;
return Object.values(allowedRice).some((v) => v);
}
validateShareDialog() {
const saveButton = document.getElementById('zen-rice-share-save');
const authorInput = document.getElementById('zen-rice-share-author');
const input = document.getElementById('zen-rice-share-name');
saveButton.disabled =
!this.canShareRice() ||
input.value.trim().length < 3 ||
input.value.trim().length > 30 ||
authorInput.value.trim().length < 3 ||
authorInput.value.trim().length > 15;
}
async submit() {
const firstForm = document.getElementById('zen-rice-share-first-form');
const secondForm = document.getElementById('zen-rice-share-second-form');
firstForm.setAttribute('fade-out', 'true');
secondForm.removeAttribute('hidden');
await this._submit();
}
async _submit() {
const allowedRice = this.getAllowedRice();
const rice = await this._collector.packRice(allowedRice);
const name = document.getElementById('zen-rice-share-name').value;
const author = document.getElementById('zen-rice-share-author').value;
const response = await this._sendRice({ name, author, rice });
if (response) {
this.showSuccessDialog(response);
}
}
async _sendRice({ name, author, rice }) {
const headers = new Headers();
headers.append('X-Zen-Rice-Name', name);
headers.append('X-Zen-Rice-Author', author);
headers.append('User-Agent', this.userAgent);
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
let response;
try {
response = await fetch(`${ZEN_RICE_API}/rices`, {
method: 'POST',
headers,
body: JSON.stringify(rice),
});
} catch (e) {
this.showErrorMessage('An error occurred while sharing your rice. Please try again later.');
console.error(e);
return null;
}
// Here, response will never be a null object
return await this._verifyResponse(response);
}
async _verifyResponse(response) {
const json = await response.json();
if (!response.ok) {
const message = json.message || 'An error occurred while sharing your rice.';
this.showErrorMessage(message);
console.error(json);
return null;
}
return json;
}
showErrorMessage(message) {
const errorBox = document.getElementById('zen-rice-share-error');
errorBox.removeAttribute('hidden');
errorBox.querySelector('label').textContent = message;
}
showSuccessDialog(riceInfo) {
const { slug, token } = riceInfo;
// 'token' is like some sort of password to edit the rice, do NOT expose it
setTimeout(() => {
document.getElementById('zen-rice-share-dialog').setAttribute('animate', 'true');
const successBox = document.getElementById('zen-rice-share-success');
document.getElementById('zen-rice-share-second-form').setAttribute('fade-out', 'true');
successBox.removeAttribute('hidden');
const link = document.getElementById('zen-rice-share-success-link');
link.value = `${ZEN_RICE_API}/rices/${slug}`;
this.showConffetti();
}, 2000);
}
showConffetti() {
const end = Date.now() + 2500;
function frame() {
this.conffettiWrapper({
angle: 135,
spread: 55,
particleCount: 5,
startVelocity: 55,
origin: { y: 0.6 },
});
this.conffettiWrapper({
angle: 45,
spread: 55,
particleCount: 5,
startVelocity: 55,
origin: { y: 0.6 },
});
this.conffettiWrapper({
angle: 90,
spread: 55,
particleCount: 5,
startVelocity: 55,
origin: { y: 0.6 },
});
if (Date.now() < end) {
requestAnimationFrame(frame.bind(this));
}
}
frame.call(this);
}
openRicePage({ name, id, author }) {
console.log('Opening rice page: ', name, id, author);
gBrowser.removeTab(gBrowser.selectedTab);
}
}
window.ZenRiceManager = ZenRiceManager;
}

View file

@ -1,11 +0,0 @@
BROWSER_CHROME_MANIFESTS += [
"tests/browser.toml",
]
FINAL_TARGET_FILES.actors += [
"actors/ZenGlanceChild.sys.mjs",
"actors/ZenGlanceParent.sys.mjs",
"actors/ZenThemeMarketplaceChild.sys.mjs",
"actors/ZenThemeMarketplaceParent.sys.mjs",
]

View file

@ -4,40 +4,6 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
#zen-profile-button {
& stack {
padding: 0;
}
& .toolbarbutton-badge {
display: none !important;
}
& stack {
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
display: flex;
justify-content: center;
align-items: center;
& > image {
width: 0;
}
}
& #zen-profile-button-icon {
width: 20px;
height: 20px;
list-style-image: var(--avatar-image-url);
border-radius: 50%;
pointer-events: none;
list-style-image: var(--avatar-image-url);
-moz-context-properties: fill;
fill: currentColor;
border: 1px solid var(--zen-colors-border);
}
}
/* Bookmarks sidebar */
#zen-tabbox-wrapper {
& #sidebar-splitter {

View file

@ -6,7 +6,7 @@
/* All overrides for compact mode go here */
:root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
%include zen-tabs/vertical-tabs-topbuttons-fix.css
%include ../tabs/zen-tabs/vertical-tabs-topbuttons-fix.css
@media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') {
&:not([zen-compact-animating]) {
& #zen-sidebar-splitter {

5
src/zen/glance/moz.build Normal file
View file

@ -0,0 +1,5 @@
FINAL_TARGET_FILES.actors += [
"actors/ZenGlanceChild.sys.mjs",
"actors/ZenGlanceParent.sys.mjs",
]

View file

Before

Width:  |  Height:  |  Size: 803 B

After

Width:  |  Height:  |  Size: 803 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 67 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 513 KiB

After

Width:  |  Height:  |  Size: 513 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 522 KiB

After

Width:  |  Height:  |  Size: 522 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 525 KiB

After

Width:  |  Height:  |  Size: 525 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

Before After
Before After

5
src/zen/mods/moz.build Normal file
View file

@ -0,0 +1,5 @@
FINAL_TARGET_FILES.actors += [
"actors/ZenThemeMarketplaceChild.sys.mjs",
"actors/ZenThemeMarketplaceParent.sys.mjs",
]

9
src/zen/moz.build Normal file
View file

@ -0,0 +1,9 @@
BROWSER_CHROME_MANIFESTS += [
"tests/browser.toml",
]
DIRS += [
"glance",
"mods"
]

View file

@ -6,7 +6,7 @@
"version": {
"product": "firefox",
"version": "137.0.1",
"candidate": "137.0.1"
"candidate": "137.0.2"
},
"buildOptions": {
"generateBranding": true