Refactor app name assignment in release build workflow; update welcome screen fade animations and styles

src/browser/base/content/ZenStartup.mjs

@@ -122,7 +122,7 @@
 
     _checkForWelcomePage() {
       if (!Services.prefs.getBoolPref('zen.welcome-screen.seen', false)) {
-        Services.prefs.setBoolPref('zen.welcome-screen.seen', true);
+        //Services.prefs.setBoolPref('zen.welcome-screen.seen', true);
         Services.scriptloader.loadSubScript('chrome://browser/content/zen-components/ZenWelcome.mjs', window);
       }
     },

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

@@ -58,7 +58,7 @@
 
   @media (not (-moz-windows-mica)) and (-moz-bool-pref: 'zen.view.grey-out-inactive-windows') {
     transition: color var(--inactive-window-transition);
-    &:-moz-window-inactive {
+    :root:not([zen-welcome-stage]) &:-moz-window-inactive {
       color: var(--toolbox-textcolor-inactive);
       &::after {
         background-color: var(--toolbox-bgcolor-inactive);

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

@@ -145,6 +145,12 @@
       }
     }
 
+    #zen-welcome-workspace-colors-anchor {
+      width: 1px;
+      height: 1px;
+      margin: 10% auto auto 30%;
+    }
+
     #zen-welcome-initial-essentials-browser {
       width: 70%;
       height: 80%;
@@ -180,8 +186,8 @@
         }
 
         #zen-welcome-initial-essentials-browser-sidebar-essentials {
-          display: flex;
-          flex-wrap: wrap;
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
           gap: 0.8rem;
           visibility: visible;
 
@@ -195,6 +201,7 @@
             border-radius: 0.8rem;
             margin-top: 0.5rem;
             background: var(--zen-toolbar-element-bg);
+            grid-column: span 3;
           }
 
           & .tabbrowser-tab {

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

@@ -285,8 +285,23 @@
             },
           },
         ],
-        fadeIn() {},
-        fadeOut() {},
+        fadeIn() {
+          const anchor = document.createElement('div');
+          anchor.id = 'zen-welcome-workspace-colors-anchor';
+          document.getElementById('zen-welcome-page-content').appendChild(anchor);
+          gZenThemePicker.panel.setAttribute('noautohide', 'true');
+          gZenThemePicker.panel.setAttribute('consumeoutsideclicks', 'false');
+          PanelMultiView.openPopup(gZenThemePicker.panel, anchor, {
+            position: 'top',
+          });
+        },
+        async fadeOut() {
+          gZenThemePicker.panel.removeAttribute('noautohide');
+          gZenThemePicker.panel.removeAttribute('consumeoutsideclicks');
+          await animate(gZenThemePicker.panel, { opacity: [1, 0] });
+          gZenThemePicker.panel.hidePopup();
+          gZenThemePicker.panel.removeAttribute('style');
+        },
       },
       {
         text: [
@@ -381,7 +396,16 @@
               tab.toggleAttribute('visuallyselected');
             });
         },
-        fadeOut() {},
+        fadeOut() {
+          const selectedTabs = document.getElementById('zen-welcome-initial-essentials-browser-sidebar-essentials').querySelectorAll('.tabbrowser-tab[visuallyselected]');
+          for (const tab of selectedTabs) {
+            const url = tab.getAttribute('data-url');
+            const createdTab = window.gBrowser.addTrustedTab(url, {
+              inBackground: true,
+            });
+            gZenPinnedTabManager.addToEssentials(createdTab);
+          }
+        },
       },
       {
         text: [