Skip to content

Commit

Permalink
Worked more on zen rices
Browse files Browse the repository at this point in the history
  • Loading branch information
@mauro-balades
mauro-balades committed Dec 27, 2024
1 parent 70c0fff commit 3bd3560
Show file tree
Hide file tree
Showing 4 changed files with 280 additions and 30 deletions.
6 changes: 6 additions & 0 deletions src/browser/app/profile/zen-browser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
61 changes: 61 additions & 0 deletions src/browser/base/content/zen-styles/zen-animations.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 94 additions & 4 deletions src/browser/base/content/zen-styles/zen-rices.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

min-height: 50px;

& input[type="text"] {
&: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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 changes: 119 additions & 26 deletions src/browser/base/zen-components/ZenRices.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@

{
const ZEN_RICE_API = Services.prefs.getStringPref("zen.rice.api.url", '');

class ZenRiceCollector {
constructor() {}

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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>
<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>
<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-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-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>
`);
Expand Down Expand Up @@ -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,
Expand All @@ -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");
Expand All @@ -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);
}
}

Expand Down

0 comments on commit 3bd3560

Please sign in to comment.