Worked more on zen rices

src/browser/app/profile/zen-browser.js

@@ -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

src/browser/base/content/zen-styles/zen-animations.css

@@ -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;
+  }
+}

src/browser/base/content/zen-styles/zen-rices.css

@@ -24,12 +24,25 @@
   max-width: 400px;
 
   & .zen-rice-share-content {
-    padding: 10px;
+    padding: 10px 0;
-    padding-top: 20px;
     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;
+    }
+  }
 }

src/browser/base/zen-components/ZenRices.mjs

@@ -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() {
+    async packRice(...args) {
-      await this.gatherAll();
+      await this.gatherAll(...args);
       const rice = {
         userChrome: this._userChrome,
         userContent: this._userContent,
@@ -137,7 +139,8 @@
         <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">
+            <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" />
@@ -162,6 +165,22 @@
                   <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() {
+    resetShareDialog() {
-      this.shareDialog.setAttribute("hidden", "true");
+      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);
     }
   }