Fixed on boarding search engine icons (closes https://github.com/zen-browser/desktop/issues/3575) and improved animation speed/delays as well (https://github.com/zen-browser/desktop/issues/4035)

src/browser/components/zen-welcome/welcome.css

@@ -50,6 +50,16 @@ body {
   justify-content: space-between;
   align-items: center;
   z-index: 2;
+
+  & button {
+    opacity: 0;
+    animation: fadeIn .5s ease-in-out forwards;
+    animation-delay: .8s;
+  }
+
+  & button:nth-child(2) {
+    animation-delay: 1s;
+  }
 }
 
 body:has(#welcome:not([hidden='true'])) {
@@ -236,9 +246,11 @@ input[type='checkbox'] {
   display: flex;
 }
 
-.page:not([hidden='true']) > * {
+.page:not([hidden='true']) > *:not(:has(.delay-animation)),
+.delay-animation,
+.delay-animation-2 {
   opacity: 0;
-  animation: fadeInRight 0.3s ease-in-out forwards;
+  animation: fadeIn .5s ease-in-out forwards;
 }
 
 #importBrowser {
@@ -281,7 +293,7 @@ input[type='checkbox'] {
   }
 }
 
-@keyframes fadeInRight {
+@keyframes fadeIn {
   from {
     opacity: 0;
     transform: translate3d(0, 40px, 0);
@@ -296,20 +308,34 @@ input[type='checkbox'] {
 }
 
 /* There should be no more than 5 elements in a page */
-.page:not([hidden='true']) > *:nth-child(2),
+.page:not([hidden='true']) > *:nth-child(2):not(:has(.delay-animation)) {
-#layoutList [layout]:nth-child(2) {
-  animation-delay: 0.1s;
-}
-.page:not([hidden='true']) > *:nth-child(3),
-#layoutList [layout]:nth-child(3) {
   animation-delay: 0.2s;
 }
-.page:not([hidden='true']) > *:nth-child(4) {
+.page:not([hidden='true']) > *:nth-child(3),
-  animation-delay: 0.3s;
+.delay-animation:nth-child(1) {
-}
-.page:not([hidden='true']) > *:nth-child(5) {
   animation-delay: 0.4s;
 }
+.page:not([hidden='true']) > *:nth-child(4),
+.delay-animation:nth-child(2) {
+  animation-delay: 0.6s;
+}
+.page:not([hidden='true']) > *:nth-child(5),
+.delay-animation:nth-child(3),
+.delay-animation-2:nth-child(1) {
+  animation-delay: 0.8s;
+}
+
+.page:not([hidden='true']) > *:nth-child(6),
+.delay-animation:nth-child(4),
+.delay-animation-2:nth-child(2) {
+  animation-delay: 1s;
+}
+
+#welcome {
+  & h1 {
+    animation-duration: .8s !important;
+  }
+}
 
 .card h3 {
   margin-top: 10px;
@@ -412,4 +438,10 @@ input[type='checkbox'] {
   &.selected {
     transform: scale(1.01);
   }
+
+  & img {
+    width: 30px;
+    height: 30px;
+    border-radius: 15px;
+  }
 }

src/browser/components/zen-welcome/welcome.html

@@ -58,12 +58,12 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
           <p data-l10n-id="welcome-dialog-theme-subtext"></p>
         </div>
         <div>
-          <h2 data-l10n-id="welcome-dialog-theme-header-1"></h2>
+          <h2 data-l10n-id="welcome-dialog-theme-header-1" class="delay-animation"></h2>
-          <div id="colorListWrapper">
+          <div id="colorListWrapper" class="delay-animation">
           </div>
-          <h2 data-l10n-id="welcome-dialog-theme-header-2"></h2>
+          <h2 data-l10n-id="welcome-dialog-theme-header-2" class="delay-animation"></h2>
           <div id="themeList" class="cardGroup">
-            <svg viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg" class="delay-animation-2">
               <g clip-path="url(#clip0_404_2706)">
               <rect width="700" height="700" fill="#F4F4F4"/>
               <g filter="url(#filter0_d_404_2706)">
@@ -92,7 +92,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
               </clipPath>
               </defs>
             </svg>
-            <svg viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg" class="delay-animation-2">
               <g clip-path="url(#clip0_404_2709)">
               <rect width="700" height="700" fill="#515151"/>
               <g filter="url(#filter0_d_404_2709)">
@@ -131,15 +131,15 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
           <p data-l10n-id="welcome-dialog-layout-subtext"></p>
         </div>
         <div id="layoutList" class="cardGroup">
-          <hbox layout="single" class="selected">
+          <hbox layout="single" class="selected delay-animation">
             <img src="chrome://browser/content/zen-images/layouts/single-toolbar.png" />
             <p data-l10n-id="welcome-dialog-layout-single-toolbar"></p>
           </hbox>
-          <hbox layout="multiple">
+          <hbox layout="multiple" class="delay-animation">
             <img src="chrome://browser/content/zen-images/layouts/multiple-toolbar.png" />
             <p data-l10n-id="welcome-dialog-layout-multiple-toolbar"></p>
           </hbox>
-          <hbox layout="collapsed">
+          <hbox layout="collapsed" class="delay-animation">
             <img src="chrome://browser/content/zen-images/layouts/collapsed.png" />
             <p data-l10n-id="welcome-dialog-layout-collapsed-toolbar"></p>
           </hbox>

src/browser/components/zen-welcome/welcome.js

@@ -293,11 +293,20 @@ class Pages {
       if (this.pages.currentPage === 1) {
         this.prevEl.setAttribute('disabled', 'true');
       }
+
+      for (const button of document.getElementById('buttons-footer').children) {
+        button.style.display = 'none';
+        // Re-animate the buttons
+        setTimeout(() => {
+          button.style.removeProperty('display');
+        });
+      }
     });
   }
 
   next() {
     this.currentPage++;
+    document.getElementById('main-view').setAttribute('data-page', this.currentPage);
 
     if (this.currentPage >= this.pages.length) {
       // We can use internal js apis to close the window. We also want to set
@@ -309,6 +318,14 @@ class Pages {
       return;
     }
 
+    for (const button of document.getElementById('buttons-footer').children) {
+      button.style.display = 'none';
+      // Re-animate the buttons
+      setTimeout(() => {
+        button.style.removeProperty('display');
+      });
+    }
+
     this._displayCurrentPage();
   }