Implement confetti animation and update Zen Rices component styles and logic

src/browser/base/content/zen-assets.jar.inc.mn

@@ -71,3 +71,6 @@
         # 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)
+
+        # JS Vendor
+        content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (content/zen-vendor/tsparticles.confetti.bundle.min.js)

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

@@ -410,3 +410,18 @@
     max-height: 450px;
   }
 }
+
+@keyframes zen-rice-submit-animation {
+  /* Scale and shake the dialog */
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

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

@@ -6,7 +6,7 @@
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 1;
+  z-index: 3;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -24,6 +24,10 @@
   animation: zen-jello-animation 0.3s ease;
   max-width: 400px;
 
+  &[animate="true"] {
+    animation: zen-rice-submit-animation 1s cubic-bezier(.77,0,.18,1);
+  }
+
   & .zen-rice-share-content {
     padding: 10px 0;
     border-top: var(--zen-appcontent-border);
@@ -54,7 +58,7 @@
     }
 
     & #zen-rice-share-name {
-      font-style: normal;
+      font-style: normal !important;
       font-size: 24px;
       margin-left: 1px;
     }
@@ -205,9 +209,13 @@
 #zen-rice-share-dialog-notice {
   padding: 15px;
 
+  & br {
+    margin-bottom: 10px;
+  }
+
   & > p {
     color: var(--text-color-deemphasized);
-    margin-top: 5px;
+    margin-top: 10px;
   }
 
   .panel-footer {

src/browser/base/content/zen-styles/zen-single-components.css

@@ -65,3 +65,8 @@
 .private-browsing-indicator-with-label {
   display: none !important;
 }
+
+
+body > #confetti {
+  z-index: 1;
+}

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

@@ -127,6 +127,13 @@
     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();
     }
@@ -139,7 +146,7 @@
         <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-details" />
+            <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" />
@@ -242,6 +249,7 @@
       }
 
       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
@@ -251,6 +259,7 @@
     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;
@@ -364,13 +373,37 @@
       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}/${slug}`;
+        this.showConffetti();
       }, 2000);
     }
+
+    showConffetti() {
+      const end = Date.now() + 2500;
+      function frame() {
+        this.conffettiWrapper({
+          angle: 125,
+          spread: 60,
+          particleCount: 3,
+          origin: { y: 0.6 },
+        });
+        this.conffettiWrapper({
+          angle: 55,
+          spread: 60,
+          particleCount: 3,
+          origin: { y: 0.6 },
+        });
+        if (Date.now() < end) {
+          requestAnimationFrame(frame.bind(this));
+        }
+      }
+      frame.call(this);
+    }
   }
 
   window.ZenRiceManager = ZenRiceManager;

surfer.json

@@ -18,7 +18,7 @@
       "brandShortName": "Zen Browser",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.2b.5",
+        "displayVersion": "1.2-b.5",
         "github": {
           "repo": "zen-browser/desktop"
         },
@@ -38,7 +38,7 @@
       "brandShortName": "Zen Twilight",
       "brandFullName": "Zen Twilight",
       "release": {
-        "displayVersion": "1.2t.6",
+        "displayVersion": "1.2-t.6",
         "github": {
           "repo": "zen-browser/desktop"
         }