mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-08 19:06:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Worked more on zen rices

Browse Source
This commit is contained in:
mr. M
2024-12-27 13:05:19 +01:00
parent 70c0fff557
commit 3bd356019f
4 changed files with 280 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/browser/app/profile/zen-browser.js
View File

@@ -90,6 +90,12 @@ pref('zen.tabs.show-newtab-vertical', true);
pref('zen.view.show-newtab-button-border-top', true);
pref('zen.view.show-newtab-button-top', false);
#ifdef MOZILLA_OFFICIAL
pref('zen.rice.api.url', "https://share.zen-browser.app/");
#else
pref('zen.rice.api.url', "http://localhost:8000/");
#endif
#ifdef XP_MACOSX
pref('zen.theme.border-radius', 10); // In pixels
#else

61
src/browser/base/content/zen-styles/zen-animations.css
View File

@@ -349,3 +349,64 @@
transform: translateX(-100%) translateY(-50%);
}
}
@keyframes zen-rice-form-out {
0% {
transform: translateX(0);
max-height: 350px;
opacity: 1;
position: relative;
}
50% {
transform: translateX(-100%);
opacity: 0;
position: relative;
}
99% {
transform: translateX(-100%);
opacity: 0;
max-height: 50px;
position: relative;
}
100% {
transform: translateX(-100%);
opacity: 0;
pointer-events: none;
position: relative;
}
}
@keyframes zen-rice-form-in {
0% {
position: absolute;
transform: translateX(100%);
opacity: 0;
}
99% {
position: absolute;
transform: translateX(0);
opacity: 1;
}
100% {
position: relative;
}
}
@keyframes zen-rice-form-in-2 {
from {
opacity: 0;
transform: translateX(100%);
max-height: 50px;
}
to {
opacity: 1;
transform: translateX(0);
max-height: 450px;
}
}

98
src/browser/base/content/zen-styles/zen-rices.css
View File

@@ -24,12 +24,25 @@
max-width: 400px;
& .zen-rice-share-content {
padding: 10px;
padding-top: 20px;
padding: 10px 0;
border-top: var(--zen-appcontent-border);
background: var(--arrowpanel-background);
position: relative;
align-items: center;
& input[type="text"] {
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;
@@ -60,7 +73,7 @@
max-height: 30px;
overflow: hidden;
transition: max-height 0.3s ease;
transition: max-height 0.3s ease, height 0.3s ease;
&[zen-collapsed="false"] {
max-height: 350px;
}
@@ -105,4 +118,81 @@
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-panel-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.8s ease;
}
#zen-rice-share-second-form {
animation: zen-rice-form-in 0.8s 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;
}
& label {
margin: 0;
margin-top: 15px;
font-weight: 600;
margin-bottom: 5px;
}
}
}

145
src/browser/base/zen-components/ZenRices.mjs
View File

@@ -1,5 +1,7 @@
{
const ZEN_RICE_API = Services.prefs.getStringPref("zen.rice.api.url", '');
class ZenRiceCollector {
constructor() {}
@@ -104,8 +106,8 @@
this._workspaceThemes = workspaces.map(w => w.theme);
}
async packRice() {
await this.gatherAll();
async packRice(...args) {
await this.gatherAll(...args);
const rice = {
userChrome: this._userChrome,
userContent: this._userContent,
@@ -137,31 +139,48 @@
<vbox id="zen-rice-share-dialog-overlay" hidden="true">
<vbox id="zen-rice-share-dialog">
<html:img src="chrome://browser/content/zen-images/brand-header.svg" class="zen-rice-share-header" />
<vbox class="zen-rice-share-content">
<html:input type="text" data-l10n-id="zen-rice-share-name" id="zen-rice-share-name" oninput="gZenThemePicker.riceManager.validateShareDialog(this)" />
<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" />
</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 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(this)" />
<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" />
</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 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>
<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" />
<html:moz-button-group class="panel-footer">
<button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-rice-share-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>
<html:moz-button-group class="panel-footer">
<button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-rice-share-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" />
<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>
`);
@@ -191,13 +210,18 @@
this.validateShareDialog(document.getElementById("zen-rice-share-name"));
}
cancel() {
this.shareDialog.setAttribute("hidden", "true");
resetShareDialog() {
const dialog = this.shareDialog;
dialog.setAttribute("hidden", "true");
document.getElementById("zen-rice-share-name").value = "";
document.getElementById("zen-rice-share-author").value = "";
document.getElementById("zen-rice-share-save").disabled = true;
}
cancel() {
this.resetShareDialog();
}
getAllowedRice() {
return {
userChrome: document.getElementById("zen-rice-share-include-userchrome").checked,
@@ -209,6 +233,10 @@
};
}
get userAgent() {
return `ZenBrowser/${Services.appinfo.version} (${gZenOperatingSystemCommonUtils.currentOperatingSystem})`;
}
canShareRice() {
const allowedRice = this.getAllowedRice();
const modsPrefs = document.getElementById("zen-rice-share-include-mod-prefs");
@@ -227,6 +255,71 @@
}
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({id:"abawdawd"});
//}
}
async _sendRice({ name, author, rice }) {
// Encode the rice as base64 and send it as request body, change user agent to "ZenBrowser" and send author info in the headers
const base64 = btoa(JSON.stringify(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");
try {
const response = await fetch(`${ZEN_RICE_API}/api/create`, {
method: "POST",
headers,
body: base64,
});
} catch (e) {
this.showErrorMessage("An error occurred while sharing your rice. Please try again later.");
return null;
}
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);
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 { id } = riceInfo;
setTimeout(() => {
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}${id}`;
}, 2000);
}
}