chore: Finished details for new downloads animation, b=(no-bug), c=no-component

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

@@ -58,7 +58,6 @@ pref('browser.newtabpage.activity-stream.feeds.section.topstories', false);
 pref("browser.topsites.contile.enabled", true);
 
 // Pdf
-pref('browser.download.open_pdf_attachments_inline', true);
 pref('pdfjs.enableHighlightEditor', true);
 pref('pdfjs.enableHighlightFloatingButton', true);
 
@@ -121,7 +120,7 @@ pref('zen.theme.color-prefs.use-workspace-colors', true);
 
 pref('zen.view.compact.hide-tabbar', true);
 pref('zen.view.compact.hide-toolbar', false);
-pref('zen.view.compact.toolbar-flash-popup', true);
+pref('zen.view.compact.toolbar-flash-popup', false);
 pref('zen.view.compact.toolbar-flash-popup.duration', 800);
 pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
 pref('zen.view.compact.color-toolbar', true);
@@ -196,7 +195,7 @@ pref('zen.splitView.rearrange-hover-size', 24);
 
 // Zen Download Animations
 pref('zen.downloads.download-animation', true);
-pref('zen.downloads.download-animation-duration', 1210); // ms
+pref('zen.downloads.download-animation-duration', 1000); // ms
 
 // Startup flags
 pref('zen.startup.smooth-scroll-in-tabs', true);
@@ -276,6 +275,8 @@ pref("extensions.postDownloadThirdPartyPrompt", false);
 
 // Downloads
 pref("browser.download.manager.addToRecentDocs", false);
+pref('browser.download.open_pdf_attachments_inline', true);
+pref('browser.download.alwaysOpenPanel', false);
 
 // Tracking protection
 pref("urlclassifier.trackingSkipURLs", "*.reddit.com, *.x.com, *.twimg.com, *.tiktok.com");

src/zen/downloads/ZenDownloadAnimation.mjs

@@ -145,11 +145,11 @@
 
     #createArcAnimationElement(startPosition) {
       const arcAnimationHTML = `
-            <div class="zen-download-arc-animation">
-              <div class="zen-download-arc-animation-inner-circle">
-                <div class="zen-download-arc-animation-icon"></div>
-              </div>
-            </div>
+            <box class="zen-download-arc-animation">
+              <box class="zen-download-arc-animation-inner-circle">
+                <html:div class="zen-download-arc-animation-icon"></html:div>
+              </box>
+            </box>
           `;
 
       const fragment = window.MozXULElement.parseXULToFragment(arcAnimationHTML);
@@ -200,13 +200,13 @@
           this.#startBoxAnimation(areTabsPositionedRight);
         }
 
-        const arcAnimation = await gZenUIManager.motion.animate(arcAnimationElement, sequence, {
+        await gZenUIManager.motion.animate(arcAnimationElement, sequence, {
           duration: Services.prefs.getIntPref('zen.downloads.download-animation-duration') / 1000,
           easing: 'cubic-bezier(0.37, 0, 0.63, 1)',
           fill: 'forwards',
         });
 
-        arcAnimation.onfinish = () => this.#cleanArcAnimation(arcAnimationElement);
+        this.#cleanArcAnimation(arcAnimationElement);
       } catch (error) {
         console.error('[ZenDownloadAnimationElement] Error in animation sequence:', error);
         this.#cleanArcAnimation(arcAnimationElement);
@@ -275,15 +275,14 @@
         sequence.transform.push(`translate(calc(${x}px - 50%), calc(${y}px - 50%)) rotate(${rotation}deg) scale(${scale})`);
       }
 
+      // Last opacity should be 0
+      sequence.opacity[steps] = 0;
+
       return sequence;
     }
 
     #cleanArcAnimation(element) {
-      if (element && element.parentNode) {
-        element.remove();
-      } else {
-        console.warn(`[${ZenDownloadAnimationElement.name}] Error cleaning download animation`);
-      }
+      element.remove();
     }
 
     async #startBoxAnimation(areTabsPositionedRight) {
@@ -312,9 +311,9 @@
 
       try {
         const boxAnimationHTML = `
-            <div class="zen-download-box-animation">
-              <div class="zen-download-box-animation-icon"></div>
-            </div>
+            <box class="zen-download-box-animation">
+              <html:div class="zen-download-box-animation-icon"></html:div>
+            </box>
           `;
 
         const sideProp = areTabsPositionedRight ? 'right' : 'left';

src/zen/downloads/zen-download-arc-animation.css

@@ -10,14 +10,14 @@
 
 .zen-download-arc-animation {
   position: absolute;
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 4px;
-  background-color: var(--zen-primary-color);
+  padding: 2px;
+  background-color: var(--zen-colors-hover-bg);
   box-shadow: var(--zen-big-shadow);
 }
 
@@ -36,8 +36,6 @@
   width: 100%;
   height: 100%;
   background-color: var(--zen-primary-color);
-  -webkit-mask: url('chrome://browser/content/zen-images/downloads/download.svg') no-repeat center;
-  -webkit-mask-size: 70%;
   mask: url('chrome://browser/content/zen-images/downloads/download.svg') no-repeat center;
   mask-size: 70%;
 }

src/zen/downloads/zen-download-box-animation.css

@@ -5,9 +5,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--zen-colors-secondary);
-  border-radius: var(--zen-border-radius);
+  background-color: var(--zen-colors-primary);
+  border-radius: var(--zen-native-content-radius);
   box-shadow: var(--zen-big-shadow);
+  pointer-events: none;
   z-index: 1100;
 }
 
@@ -15,8 +16,6 @@
   width: 50%;
   height: 50%;
   background-color: var(--zen-primary-color);
-  -webkit-mask: url('chrome://browser/content/zen-images/downloads/archive.svg') no-repeat center;
-  -webkit-mask-size: contain;
   mask: url('chrome://browser/content/zen-images/downloads/archive.svg') no-repeat center;
   mask-size: contain;
   display: block;