Refactor CSS styles for ZenWelcome and vertical tabs, improving layout and animations

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -955,7 +955,8 @@
   padding: 0;
 }
 
-#zen-essentials-container > .tabbrowser-tab {
+#zen-essentials-container > .tabbrowser-tab,
+#zen-welcome-initial-essentials-browser-sidebar-essentials .tabbrowser-tab {
   --toolbarbutton-inner-padding: 0;
   max-width: unset;
   width: 100% !important;
@@ -1010,11 +1011,12 @@
       background: transparent;
       overflow: hidden;
       position: relative;
+      --zen-essential-bg-margin: 2px;
 
       &::before {
         background: light-dark(rgba(255, 255, 255, 0.85), rgba(68, 64, 64, 0.85));
-        margin: 2px;
+        margin: var(--zen-essential-bg-margin);
-        border-radius: calc(var(--border-radius-medium) - 2px);
+        border-radius: calc(var(--border-radius-medium) - var(--zen-essential-bg-margin));
         position: absolute;
         inset: 0;
         z-index: 0;

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

@@ -163,7 +163,7 @@
     background: transparent;
     --zen-themed-toolbar-bg-transparent: transparent;
     @media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
-      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 85%, transparent 15%);
+      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 80%, transparent 20%);
     }
   }
 

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

@@ -97,14 +97,14 @@
     }
 
     & > * {
-      opacity: 0;
+      transform: translate(300%);
     }
   }
 
   & button {
     justify-content: center;
     align-items: center;
-    opacity: 0;
+    transform: translate(300%);
   }
 
   #zen-welcome-page-content {
@@ -121,25 +121,116 @@
 
     & label {
       opacity: 0;
-      transition: scale 0.1s;
+      transition: scale 0.1s, box-shadow 0.1s;
       padding: 1.5rem 1.1rem;
       border-radius: 0.6rem;
       width: 50%;
       gap: 0.8rem;
       display: flex;
       border: 2px solid var(--zen-colors-border);
-      box-shadow: var(--zen-big-shadow);
+      background: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.4));
-      background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
       align-items: center;
 
       &:hover {
-        scale: 1.015;
+        box-shadow: var(--zen-big-shadow);
       }
 
       &:has(:checked) {
+        box-shadow: var(--zen-big-shadow);
         border: 2px solid var(--zen-primary-color);
         scale: 1.03;
       }
     }
+
+    #zen-welcome-initial-essentials-browser {
+      width: 70%;
+      height: 80%;
+      display: flex;
+      margin-left: auto;
+      margin-top: auto;
+      border-top-left-radius: 1.2em;
+      box-shadow: var(--zen-big-shadow);
+      background: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.2));
+      padding-right: 20%;
+      overflow: hidden;
+      opacity: 0;
+      border: 1px solid var(--zen-colors-border);
+      border-bottom-width: 0;
+      border-right-width: 0;
+
+      #zen-welcome-initial-essentials-browser-sidebar {
+        width: 100%;
+        padding: 1.4rem;
+        gap: 1.2rem;
+        background: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.4));
+
+        #zen-welcome-initial-essentials-browser-sidebar-win-buttons {
+          gap: 0.5rem;
+          align-items: center;
+
+          & > div {
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            background: var(--zen-toolbar-element-bg);
+          }
+        }
+
+        #zen-welcome-initial-essentials-browser-sidebar-essentials {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.8rem;
+          visibility: visible;
+
+          & * {
+            visibility: visible;
+          }
+
+          & .extra-tab {
+            width: 100%;
+            height: 3rem;
+            border-radius: 0.8rem;
+            margin-top: 0.5rem;
+            background: var(--zen-toolbar-element-bg)
+          }
+
+          & .tabbrowser-tab {
+            --tab-min-height: 5rem !important;
+            min-width: 5rem !important;
+            transition: transform 0.1s;
+            position: relative;
+
+            &::after {
+              position: absolute;
+              content: "";
+              width: 1.6rem;
+              height: 1.6rem;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              background: var(--zen-tab-icon);
+              background-position: center;
+              background-size: cover;
+              background-repeat: no-repeat;
+            }
+
+            --border-radius-medium: 1rem;
+
+            &[visuallyselected] {
+              transform: scale(1.04);
+
+              & .tab-background {
+                --zen-essential-bg-margin: 3px;
+                box-shadow: var(--zen-big-shadow);
+              }
+            }
+
+            & .tab-background::after {
+              filter: blur(30px) !important;
+            }
+          }
+        }
+      }
+    }
   }
 }

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

@@ -62,9 +62,9 @@
         (description2 ? `<html:p>${description2}</html:p>` : '');
       await animate(
         '#zen-welcome-page-sidebar-content > *',
-        { x: ['150%', 0], filter: ['blur(2px)', 'blur(0px)'], opacity: [0, 1] },
+        { x: ['150%', 0] },
         {
-          delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
+          delay: getMotion().stagger(0.05),
           type: 'spring',
           bounce: 0.2,
         }
@@ -91,7 +91,7 @@
       }
       await animate(
         '#zen-welcome-page-sidebar-buttons button',
-        { x: ['150%', 0], filter: ['blur(2px)', 'blur(0px)'], opacity: [0, 1] },
+        { x: ['150%', 0] },
         {
           delay: getMotion().stagger(0.1, { startDelay: 0.4 }),
           type: 'spring',
@@ -103,7 +103,7 @@
     async fadeInContent() {
       await animate(
         '#zen-welcome-page-content > *',
-        { opacity: [0, 1], scale: [0.9, 1], filter: ['blur(2px)', 'blur(0px)'] },
+        { opacity: [0, 1] },
         {
           delay: getMotion().stagger(0.1),
           type: 'spring',
@@ -115,7 +115,7 @@
     async fadeOutButtons() {
       await animate(
         '#zen-welcome-page-sidebar-buttons button',
-        { x: [0, '-150%'], filter: ['blur(0px)', 'blur(2px)'], opacity: [1, 0] },
+        { x: [0, '-150%'] },
         {
           type: 'spring',
           bounce: 0,
@@ -129,7 +129,7 @@
     async fadeOutTitles() {
       await animate(
         '#zen-welcome-page-sidebar-content > *',
-        { x: [0, '-150%'], filter: ['blur(0px)', 'blur(2px)'], opacity: [1, 0] },
+        { x: [0, '-150%'] },
         {
           delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
           type: 'spring',
@@ -141,7 +141,7 @@
     async fadeOutContent() {
       await animate(
         '#zen-welcome-page-content > *',
-        { opacity: [1, 0], scale: [1, 0.9], filter: ['blur(0px)', 'blur(2px)'] },
+        { opacity: [1, 0] },
         {
           delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
           type: 'spring',
@@ -268,6 +268,26 @@
           }
         },
       },
+      {
+        text: [
+          {
+            id: 'zen-welcome-workspace-colors-title',
+          },
+          {
+            id: 'zen-welcome-workspace-colors-description',
+          },
+        ],
+        buttons: [
+          {
+            l10n: 'zen-welcome-next-action',
+            onclick: async () => {
+              return true;
+            },
+          },
+        ],
+        fadeIn() {},
+        fadeOut() {},
+      },
       {
         text: [
           {
@@ -288,27 +308,77 @@
             },
           },
         ],
-        fadeIn() {},
+        fadeIn() {
-        fadeOut() {},
+          const xul = `
-      },
+            <hbox id="zen-welcome-initial-essentials-browser">
-      {
+              <vbox id="zen-welcome-initial-essentials-browser-sidebar">
-        text: [
+                <hbox id="zen-welcome-initial-essentials-browser-sidebar-win-buttons">
-          {
+                  <html:div></html:div>
-            id: 'zen-welcome-workspace-colors-title',
+                  <html:div></html:div>
-          },
+                  <html:div></html:div>
-          {
+                </hbox>
-            id: 'zen-welcome-workspace-colors-description',
+                <html:div id="zen-welcome-initial-essentials-browser-sidebar-essentials">
-          },
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://web.whatsapp.com" style="--zen-tab-icon: url('https://web.whatsapp.com/favicon.ico');">
-        ],
+                    <stack class="tab-stack">
-        buttons: [
+                      <html:div class="tab-background"></html:div>
-          {
+                    </stack>
-            l10n: 'zen-welcome-next-action',
+                  </html:div>
-            onclick: async () => {
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://discord.com" style="--zen-tab-icon: url('http://www.google.com/s2/favicons?domain=discord.com');">
-              return true;
+                    <stack class="tab-stack">
-            },
+                      <html:div class="tab-background"></html:div>
-          },
+                    </stack>
-        ],
+                  </html:div>
-        fadeIn() {},
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://reddit.com" style="--zen-tab-icon: url('https://www.redditstatic.com/desktop2x/img/favicon/favicon-96x96.png');">
+                    <stack class="tab-stack">
+                      <html:div class="tab-background"></html:div>
+                    </stack>
+                  </html:div>
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://slack.com/" style="--zen-tab-icon: url('https://a.slack-edge.com/80588/marketing/img/meta/favicon-32.png');">
+                    <stack class="tab-stack">
+                      <html:div class="tab-background"></html:div>
+                    </stack>
+                  </html:div>
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://google.com" style="--zen-tab-icon: url('https://www.google.com/s2/favicons?domain=google.com');">
+                    <stack class="tab-stack">
+                      <html:div class="tab-background"></html:div>
+                    </stack>
+                  </html:div>
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://twitter.com" style="--zen-tab-icon: url('https://abs.twimg.com/favicons/twitter.ico');">
+                    <stack class="tab-stack">
+                      <html:div class="tab-background"></html:div>
+                    </stack>
+                  </html:div>
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://notion.com" style="--zen-tab-icon: url('https://www.notion.so/front-static/favicon.ico');">
+                    <stack class="tab-stack">
+                      <html:div class="tab-background"></html:div>
+                    </stack>
+                  </html:div>
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://instagram.com" style="--zen-tab-icon: url('https://www.instagram.com/static/images/ico/favicon-192.png/68d99ba29cc8.png');">
+                    <stack class="tab-stack">
+                      <html:div class="tab-background"></html:div>
+                    </stack>
+                  </html:div>
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://element.io" style="--zen-tab-icon: url('http://www.google.com/s2/favicons?domain=element.io');">
+                    <stack class="tab-stack">
+                      <html:div class="tab-background"></html:div>
+                    </stack>
+                  </html:div>
+                  <html:div class="extra-tab"></html:div>
+                  <html:div class="extra-tab"></html:div>
+                </html:div>
+              </vbox>
+            </hbox>
+          `;
+          const fragment = window.MozXULElement.parseXULToFragment(xul);
+          document.getElementById('zen-welcome-page-content').appendChild(fragment);
+          document.getElementById('zen-welcome-initial-essentials-browser-sidebar-essentials').addEventListener('click', async (event) => {
+            const tab = event.target.closest('.tabbrowser-tab');
+            if (!tab) {
+              return;
+            }
+            tab.toggleAttribute('visuallyselected');
+          });
+        },
         fadeOut() {},
       },
       {
@@ -385,7 +455,6 @@
       function () {
         window.resizeTo(875, 560);
         window.focus();
-        appWin.center(null, true, false);
         const appWin = window.docShell.treeOwner.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIAppWindow);
         appWin.rollupAllPopups();
       },