Added a welcome page!

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

@@ -92,7 +92,8 @@ pref("alerts.showFavicons", true);
 
 // CUSTOM ZEN PREFS
 
-// TODO: pref('zen.verticalTabs.enabled', false);
+pref('zen.welcomeScreen.enabled', true);
+pref('zen.welcomeScreen.seen', false);
 
 // From: https://github.com/yokoffing/Betterfox
 

src/browser/base/content/browser-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
-index 8a2a20280954eb9db144a723f477e7afc603fda3..bbcc1eaa85b8dc608a8d85c3709bcc7c5fc441e2 100644
+index 8a2a20280954eb9db144a723f477e7afc603fda3..35a3b6e9d8b7bab6bf6e6e3f6000b5c007163aa5 100644
 --- a/browser/base/content/browser.css
 +++ b/browser/base/content/browser.css
 @@ -2,6 +2,8 @@
@@ -28,7 +28,7 @@ index 8a2a20280954eb9db144a723f477e7afc603fda3..bbcc1eaa85b8dc608a8d85c3709bcc7c
    list-style-image: var(--webextension-menuitem-image, inherit);
    -moz-context-properties: fill;
    fill: currentColor;
-@@ -1526,3 +1528,19 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
+@@ -1526,3 +1528,42 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
  /**
   * End Dialogs
   */
@@ -44,7 +44,30 @@ index 8a2a20280954eb9db144a723f477e7afc603fda3..bbcc1eaa85b8dc608a8d85c3709bcc7c
 +
 +.dialogBox:not(.spotlightBox) {
 +  border: 1px solid var(--zen-dialog-border-color);
-+  border-radius: 5px;
++}
 +
++#window-modal-dialog:not([zen-dialog-welcome-element="true"]) .dialogBox:not(.spotlightBox) {
 +  transform: translateY(-9px);
 +}
++
++#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogBox:not(.spotlightBox) {
++  margin: 0 !important;
++}
++
++#window-modal-dialog[zen-dialog-welcome-element="true"], 
++#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogOverlay,
++#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogFrame,
++#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogBox {
++  width: 100% !important;
++  height: 100% !important;
++  max-height: none !important;
++  max-width: none !important;
++}
++
++#window-modal-dialog[zen-dialog-welcome-element="true"] {
++  --zen-welcome-dialog-space: 8px;
++  margin: 0 auto !important;
++  max-width: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important;
++  max-height: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important;
++  margin-top: var(--zen-welcome-dialog-space) !important;
++}

src/browser/base/content/browser-js.patch

@@ -1,11 +1,13 @@
 diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
-index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..040c455e3e06305b03f835d47fc7fb22f9448402 100644
+index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250ca26968a 100644
 --- a/browser/base/content/browser.js
 +++ b/browser/base/content/browser.js
-@@ -13,6 +13,13 @@ ChromeUtils.importESModule("resource://gre/modules/NotificationDB.sys.mjs");
+@@ -13,6 +13,15 @@ ChromeUtils.importESModule("resource://gre/modules/NotificationDB.sys.mjs");
  
  // lazy module getters
  
++const ZEN_WELCOME_PATH = "zen-welcome";
++const ZEN_WELCOME_ELEMENT_ATTR = "zen-dialog-welcome-element";
 +XPCOMUtils.defineLazyServiceGetter(
 +  this,
 +  "ProfileService",
@@ -16,7 +18,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..040c455e3e06305b03f835d47fc7fb22
  ChromeUtils.defineESModuleGetters(this, {
    AMTelemetry: "resource://gre/modules/AddonManager.sys.mjs",
    AboutNewTab: "resource:///modules/AboutNewTab.sys.mjs",
-@@ -1735,6 +1742,11 @@ var gBrowserInit = {
+@@ -1735,6 +1744,11 @@ var gBrowserInit = {
      }
  
      // Misc. inits.
@@ -28,7 +30,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..040c455e3e06305b03f835d47fc7fb22
      gUIDensity.init();
      TabletModeUpdater.init();
      CombinedStopReload.ensureInitialized();
-@@ -6660,7 +6672,7 @@ function setToolbarVisibility(
+@@ -6660,7 +6674,7 @@ function setToolbarVisibility(
        );
      }
  
@@ -37,7 +39,21 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..040c455e3e06305b03f835d47fc7fb22
      switch (isVisible) {
        case true:
        case "always":
-@@ -10157,3 +10169,15 @@ var FirefoxViewHandler = {
+@@ -9780,6 +9794,13 @@ var gDialogBox = {
+     parentElement.style.removeProperty("width");
+     parentElement.style.removeProperty("height");
+     document.documentElement.setAttribute("window-modal-open", true);
++
++    if (uri.includes(ZEN_WELCOME_PATH)) {
++      parentElement.setAttribute(ZEN_WELCOME_ELEMENT_ATTR, true);
++    } else if (parentElement.hasAttribute(ZEN_WELCOME_ELEMENT_ATTR)) {
++      parentElement.removeAttribute(ZEN_WELCOME_ELEMENT_ATTR);
++    }
++
+     // Call this first so the contents show up and get layout, which is
+     // required for SubDialog to work.
+     parentElement.showModal();
+@@ -10157,3 +10178,15 @@ var FirefoxViewHandler = {
      this.button?.toggleAttribute("attention", shouldShow);
    },
  };

src/browser/base/content/zen-browser-places.js

@@ -60,7 +60,7 @@ var ZenProfileDialogUI = {
 
   createProfileWizard() {
     // This should be rewritten in HTML eventually.
-    window.browsingContext.topChromeWindow.openDialog(
+    window.browsingContext.topChromeWindow.gDialogBox.open(
       "chrome://mozapps/content/profile/createProfileWizard.xhtml",
       "",
       "centerscreen,chrome,modal,titlebar",

src/browser/components/BrowserGlue-sys-mjs.patch

@@ -0,0 +1,29 @@
+diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs
+index 4ad6c5212b22e7dc0ee9495214b6531676490e95..d90dcfed5da60e19eb1fa7fb88cfb07f9cce5663 100644
+--- a/browser/components/BrowserGlue.sys.mjs
++++ b/browser/components/BrowserGlue.sys.mjs
+@@ -4475,6 +4475,7 @@ BrowserGlue.prototype = {
+   },
+ 
+   async _maybeShowDefaultBrowserPrompt() {
++    this._ZenMaybeShowWelcomeScreen();
+     // Highest priority is about:welcome window modal experiment
+     // Second highest priority is the upgrade dialog, which can include a "primary
+     // browser" request and is limited in various ways, e.g., major upgrades.
+@@ -4933,6 +4934,16 @@ BrowserGlue.prototype = {
+     "nsIObserver",
+     "nsISupportsWeakReference",
+   ]),
++
++  _ZenMaybeShowWelcomeScreen() {
++    const welcomeEnabled = Services.prefs.getBoolPref("zen.welcomeScreen.enabled", true)
++    const welcomeSeen = Services.prefs.getBoolPref("zen.welcomeScreen.seen", false)
++    if (welcomeEnabled && !welcomeSeen) {
++      lazy.BrowserWindowTracker.getTopWindow().gDialogBox.open(
++        "chrome://browser/content/zen-welcome/welcome.html"
++      );
++    }
++  },
+ };
+ 
+ var ContentBlockingCategoriesPrefs = {

src/browser/components/moz-build.patch

@@ -0,0 +1,14 @@
+diff --git a/browser/components/moz.build b/browser/components/moz.build
+index 6fd86955650e4589677007eb8aeee39c1839fedd..600ff91802e7357be3c55dac626ce2ca79544cd2 100644
+--- a/browser/components/moz.build
++++ b/browser/components/moz.build
+@@ -69,6 +69,9 @@ DIRS += [
+     "urlbar",
+ ]
+ 
++# Zen Components:
++DIRS += ["zen-welcome"]
++
+ DIRS += ["build"]
+ 
+ 

src/browser/components/zen-welcome/IMPORTANT.md

@@ -0,0 +1,8 @@
+
+# Important notes!
+
+Inside browser.js, we hardcoded-ly detect the path name for `zen-welcome` so we can add special attributes to the welcom page. If this path name changes, the welcome page will not work properly.
+
+Make sure to update the path name in browser.js if you change the path name of `zen-welcome`.
+
+The constant that contains this path name is `ZEN_WELCOME_PATH`.

src/browser/components/zen-welcome/jar.mn

@@ -0,0 +1,13 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+browser.jar:
+% content browser %content/browser/ contentaccessible=yes
+  content/browser/zen-welcome/welcome.html        (welcome.html)
+  content/browser/zen-welcome/welcome.css         (welcome.css)
+  content/browser/zen-welcome/welcome.js          (welcome.js)
+  content/browser/zen-welcome/migrate.light.svg   (migrate.light.svg)
+  content/browser/zen-welcome/migrate.dark.svg    (migrate.dark.svg)
+  content/browser/zen-welcome/sidebar.vis.svg     (sidebar.vis.svg)
+  content/browser/zen-welcome/vertical.vis.svg    (vertical.vis.svg)

src/browser/components/zen-welcome/migrate.dark.svg

@@ -0,0 +1,11 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg width="806" height="196" viewBox="0 0 806 196" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="348" height="196" rx="8" fill="#4D4950" />
+    <rect x="458" width="348" height="196" rx="8" fill="#6829A3" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M319.86 121.731C319.799 121.26 320.148 120.791 320.478 120.143C320.743 119.623 321.048 119.03 321.468 118.391C323.721 114.965 328.465 110.321 333.923 105.51C344.245 96.4135 357.14 86.8081 361.289 84.6683C380.823 74.4687 398.734 79.6824 417.41 86.6977C435.966 93.6674 455.28 102.675 477.166 101.848C486.854 101.482 496.976 99.0791 507.671 94.0144C508.339 93.7162 508.848 93.1937 509.084 92.5618C509.32 91.9299 509.266 91.2402 508.932 90.6443C508.596 90.0488 508.01 89.596 507.3 89.3854C506.591 89.1748 505.817 89.2235 505.148 89.5209C495.566 93.5219 486.594 95.1324 478.084 95.4383C471.681 95.6678 465.526 95.1579 459.539 94.0599C434.35 89.4386 412.107 75.7095 389.533 74.1515C379.418 73.4531 369.23 75.083 358.711 80.8408C353.914 83.5064 337.502 96.3881 327.055 107.245C322.971 111.489 319.627 115.374 318.495 118.302C317.864 119.937 317.86 121.258 318.35 122.155C318.382 122.243 318.432 122.325 318.499 122.396C318.566 122.467 318.647 122.526 318.739 122.569C318.832 122.611 318.932 122.638 319.036 122.646C319.139 122.654 319.244 122.644 319.343 122.616C319.442 122.588 319.534 122.543 319.614 122.484C319.693 122.424 319.759 122.352 319.807 122.269C319.855 122.187 319.885 122.098 319.894 122.005C319.903 121.913 319.891 121.82 319.86 121.732V121.731Z" fill="#F2F1F4" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M507.044 91.7045C507.811 91.9849 508.488 92.3135 509.043 92.6982C508.604 92.9777 508.15 93.9512 507.301 94.8187C504.039 98.1563 498.275 103.345 495.485 107.281C494.397 108.814 493.565 110.233 493.652 111.319C493.758 112.614 494.095 113.536 495.193 113.955C495.484 114.215 495.88 114.361 496.292 114.361C496.704 114.361 497.1 114.215 497.391 113.955C497.683 113.695 497.846 113.343 497.846 112.976C497.846 112.609 497.683 112.256 497.391 111.997C497.269 111.777 497.983 111.994 498.119 111.696C498.406 111.055 498.746 110.434 499.136 109.837C501.312 106.537 505.746 102.068 508.696 98.5191C509.54 97.5078 510.313 96.4514 511.012 95.3559C512.248 93.4018 512.186 91.9367 511.531 91.446C510.397 90.4708 508.713 89.7619 506.702 89.1976C501.036 87.6089 492.445 87.2961 488.033 85.272L483.928 84.1626L483.585 84.0636L483.583 84.0697L483.487 84.0435C483.288 84.0039 483.082 83.9998 482.88 84.0312C482.679 84.0626 482.487 84.129 482.315 84.2266C482.142 84.3242 481.993 84.4511 481.876 84.6C481.759 84.7489 481.676 84.917 481.631 85.0945C481.587 85.2721 481.582 85.4557 481.618 85.6348C481.653 85.814 481.727 85.9852 481.837 86.1387C481.947 86.2922 482.089 86.425 482.256 86.5295C482.423 86.6339 482.612 86.708 482.811 86.7476L486.056 87.736C488.886 88.9619 493.31 90.5006 497.602 91.3567C500.654 91.9656 503.612 92.2084 505.814 92.0813C506.383 92.0357 506.777 91.8885 507.043 91.7045H507.044Z" fill="#F2F1F4" />
+</svg>

src/browser/components/zen-welcome/migrate.light.svg

@@ -0,0 +1,11 @@
+<!--
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
+   -->
+<svg width="806" height="196" viewBox="0 0 806 196" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="348" height="196" rx="8" fill="#BFBCC2" />
+    <rect x="458" width="348" height="196" rx="8" fill="#C18CF2" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M319.86 121.731C319.799 121.26 320.148 120.791 320.478 120.143C320.743 119.623 321.048 119.03 321.468 118.391C323.721 114.965 328.465 110.321 333.923 105.51C344.245 96.4135 357.14 86.8081 361.289 84.6683C380.823 74.4687 398.734 79.6824 417.41 86.6977C435.966 93.6674 455.28 102.675 477.166 101.848C486.854 101.482 496.976 99.0791 507.671 94.0144C508.339 93.7162 508.848 93.1937 509.084 92.5618C509.32 91.9299 509.266 91.2402 508.932 90.6443C508.596 90.0488 508.01 89.596 507.3 89.3854C506.591 89.1748 505.817 89.2235 505.148 89.5209C495.566 93.5219 486.594 95.1324 478.084 95.4383C471.681 95.6678 465.526 95.1579 459.539 94.0599C434.35 89.4386 412.107 75.7095 389.533 74.1515C379.418 73.4531 369.23 75.083 358.711 80.8408C353.914 83.5064 337.502 96.3881 327.055 107.245C322.971 111.489 319.627 115.374 318.495 118.302C317.864 119.937 317.86 121.258 318.35 122.155C318.382 122.243 318.432 122.325 318.499 122.396C318.566 122.467 318.647 122.526 318.739 122.569C318.832 122.611 318.932 122.638 319.036 122.646C319.139 122.654 319.244 122.644 319.343 122.616C319.442 122.588 319.534 122.543 319.614 122.484C319.693 122.424 319.759 122.352 319.807 122.269C319.855 122.187 319.885 122.098 319.894 122.005C319.903 121.913 319.891 121.82 319.86 121.732V121.731Z" fill="black" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M507.044 91.7045C507.811 91.9849 508.488 92.3135 509.043 92.6982C508.604 92.9777 508.15 93.9512 507.301 94.8187C504.039 98.1563 498.275 103.345 495.485 107.281C494.397 108.814 493.565 110.233 493.652 111.319C493.758 112.614 494.095 113.536 495.193 113.955C495.484 114.215 495.88 114.361 496.292 114.361C496.704 114.361 497.1 114.215 497.391 113.955C497.683 113.695 497.846 113.343 497.846 112.976C497.846 112.609 497.683 112.256 497.391 111.997C497.269 111.777 497.983 111.994 498.119 111.696C498.406 111.055 498.746 110.434 499.136 109.837C501.312 106.537 505.746 102.068 508.696 98.5191C509.54 97.5078 510.313 96.4514 511.012 95.3559C512.248 93.4018 512.186 91.9367 511.531 91.446C510.397 90.4708 508.713 89.7619 506.702 89.1976C501.036 87.6089 492.445 87.2961 488.033 85.272L483.928 84.1626L483.585 84.0636L483.583 84.0697L483.487 84.0435C483.288 84.0039 483.082 83.9998 482.88 84.0312C482.679 84.0626 482.487 84.129 482.315 84.2266C482.142 84.3242 481.993 84.4511 481.876 84.6C481.759 84.7489 481.676 84.917 481.631 85.0945C481.587 85.2721 481.582 85.4557 481.618 85.6348C481.653 85.814 481.727 85.9852 481.837 86.1387C481.947 86.2922 482.089 86.425 482.256 86.5295C482.423 86.6339 482.612 86.708 482.811 86.7476L486.056 87.736C488.886 88.9619 493.31 90.5006 497.602 91.3567C500.654 91.9656 503.612 92.2084 505.814 92.0813C506.383 92.0357 506.777 91.8885 507.043 91.7045H507.044Z" fill="black" />
+</svg>

src/browser/components/zen-welcome/moz.build

@@ -0,0 +1,4 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+JAR_MANIFESTS += ["jar.mn"]

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

@@ -0,0 +1,173 @@
+/*
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+
+html {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  position: relative;
+  flex-flow: row nowrap;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--zen-characteristic-gradient);
+  transition: .1s;
+}
+
+body.normal-background {
+  background: var(--zen-main-browser-background) !important;
+}
+
+.page {
+  display: none;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  width: 100%;
+
+  margin: 32px;
+}
+
+#enableFeatures .card {
+  width: auto;
+}
+
+.card h3 {
+  margin: auto;
+  text-align: center;
+}
+
+.cardGroup {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: 8px;
+  margin-bottom: 8px;
+  justify-content: center;
+}
+
+.cardGroup .card {
+  width: 140px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-content: space-between;
+  border: 2px solid var(--arrowpanel-border-color) !important;
+  transition: all .1s ease-in-out !important;
+  margin: 0 10px;
+  border-radius: 7px;
+  outline: none !important;
+  cursor: auto;
+  user-select: none;
+}
+
+.cardGroup .card.selected {
+  border: 2px solid var(--in-content-primary-button-background-hover) !important;
+  transform: scale(1.1);
+}
+
+h1 {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 16px 0 5px 0;
+}
+
+p {
+  font-size: 16px;
+  opacity: 0.8;
+  margin: 0;
+  margin-bottom: 30px;
+}
+
+button {
+  transform: scale(1.3);
+}
+
+.icon {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  display: inline-block;
+  height: 82px;
+  width: 82px;
+}
+
+.asset {
+  width: 500px;
+  padding-bottom: 32px;
+}
+
+@media (prefers-color-scheme: light) {
+  .dark-only {
+    display: none;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .light-only {
+    display: none;
+  }
+}
+
+input[type='checkbox'] {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#importNext {
+  margin-left: 30px;
+  color: var(--in-content-primary-button-background);
+}
+
+#themeNext,
+#searchNext,
+#thanksNext {
+  margin-top: 20px;
+}
+
+#search h1,
+#theme h1 {
+  margin-bottom: 30px;
+}
+
+.page[hidden="true"] {
+  display: none;
+}
+
+.page:not([hidden="true"]) {
+  display: flex;
+}
+
+.page:not([hidden="true"]) > * {
+  opacity: 0;
+  animation: fadeInRight 0.3s ease-in-out forwards;
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translate3d(40px, 0, 0);
+    filter: blur(15px);
+  }
+
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+/* There should be no more than 5 elements in a page */
+.page:not([hidden="true"]) > *:nth-child(2) { animation-delay: 0.1s; }
+.page:not([hidden="true"]) > *:nth-child(3) { animation-delay: 0.2s; }
+.page:not([hidden="true"]) > *:nth-child(4) { animation-delay: 0.3s; }
+.page:not([hidden="true"]) > *:nth-child(5) { animation-delay: 0.4s; }
+

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

@@ -0,0 +1,109 @@
+<!--
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="color-scheme" content="light dark">
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src chrome:; object-src 'none'"
+    />
+    <meta name="referrer" content="no-referrer" />
+
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="chrome://global/skin/in-content/common.css"
+    />
+    <link rel="stylesheet" href="chrome://global/skin/global.css" />
+    <link
+      rel="stylesheet"
+      href="chrome://browser/content/zen-welcome/welcome.css"
+    />
+
+    <link rel="localization" href="branding/brand.ftl" />
+    <link rel="localization" href="browser/zen-welcome.ftl" />
+  </head>
+  <body>
+    <div class="page" id="welcome">
+      <img class="icon" src="chrome://branding/content/about-logo.png" />
+      <h1 data-l10n-id="welcome-dialog-welcome"></h1>
+
+      <p data-l10n-id="welcome-dialog-welcome-subtext"></p>
+
+      <button
+        id="welcomeNext"
+        class="primary"
+        data-l10n-id="welcome-dialog-get-started"
+      ></button>
+    </div>
+
+    <div class="page" id="import">
+      <img
+        class="asset light-only"
+        src="chrome://browser/content/zen-welcome/migrate.light.svg"
+      />
+      <img
+        class="asset dark-only"
+        src="chrome://browser/content/zen-welcome/migrate.dark.svg"
+      />
+
+      <h1 data-l10n-id="welcome-dialog-import"></h1>
+      <p data-l10n-id="welcome-dialog-import-subtext"></p>
+
+      <br />
+
+      <hbox>
+        <button
+          class="primary"
+          id="importBrowser"
+          data-l10n-id="welcome-dialog-import-action"
+        ></button>
+        <button
+          class="text-link"
+          id="importNext"
+          data-l10n-id="welcome-dialog-skip"
+        ></button>
+      </hbox>
+    </div>
+
+    <div class="page" id="theme">
+      <h1 data-l10n-id="welcome-dialog-theme"></h1>
+      <p data-l10n-id="welcome-dialog-theme-subtext"></p>
+      <div id="themeList" class="cardGroup"></div>
+      <button
+        id="themeNext"
+        class="primary"
+        data-l10n-id="welcome-dialog-theme-action"
+      ></button>
+    </div>
+
+    <div class="page" id="search">
+      <h1 data-l10n-id="welcome-dialog-search"></h1>
+      <p data-l10n-id="welcome-dialog-search-subtext"></p>
+      <div id="searchList" class="cardGroup"></div>
+      <button
+        id="searchNext"
+        class="primary"
+        data-l10n-id="welcome-dialog-search-action"
+      ></button>
+    </div>
+
+    <div class="page" id="thanks">
+      <h1 data-l10n-id="welcome-dialog-thanks"></h1>
+      <p data-l10n-id="welcome-dialog-thanks-subtext"></p>
+      <button
+        id="thanksNext"
+        class="primary"
+        data-l10n-id="welcome-dialog-thanks-action"
+      ></button>
+    </div>
+
+    <script src="./welcome.js"></script>
+    <script src="chrome://browser/content/contentTheme.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,287 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+const { XPCOMUtils } = ChromeUtils.import(
+  'resource://gre/modules/XPCOMUtils.jsm'
+)
+
+XPCOMUtils.defineLazyModuleGetters(this, {
+  AddonManager: 'resource://gre/modules/AddonManager.jsm',
+  MigrationUtils: 'resource:///modules/MigrationUtils.jsm',
+})
+
+ChromeUtils.defineModuleGetter(
+  this,
+  'ExtensionSettingsStore',
+  'resource://gre/modules/ExtensionSettingsStore.jsm'
+)
+
+const welcomeSeenPref = 'pulse.welcome.seen'
+
+// =============================================================================
+// Util stuff copied from browser/components/preferences/search.js
+
+class EngineStore {
+  constructor() {
+    this._engines = []
+  }
+
+  async init() {
+    const visibleEngines = await Services.search.getVisibleEngines()
+    this.initSpecificEngine(visibleEngines)
+  }
+
+  getEngine() {
+    return this._engines
+  }
+
+  initSpecificEngine(engines) {
+    for (const engine of engines) {
+      try {
+        this._engines.push(this._cloneEngine(engine))
+      } catch (e) {
+        // Ignore engines that throw an exception when cloning.
+        console.error(e)
+      }
+    }
+  }
+
+  getEngineByName(name) {
+    return this._engines.find((engine) => engine.name == name)
+  }
+
+  _cloneEngine(aEngine) {
+    const clonedObj = {}
+
+    for (const i of ['name', 'alias', '_iconURI', 'hidden']) {
+      clonedObj[i] = aEngine[i]
+    }
+
+    clonedObj.originalEngine = aEngine
+
+    return clonedObj
+  }
+
+  async getDefaultEngine() {
+    let engineName = await Services.search.getDefault()
+    return this.getEngineByName(engineName._name)
+  }
+
+  async setDefaultEngine(engine) {
+    await Services.search.setDefault(
+      engine.originalEngine,
+      Ci.nsISearchService.CHANGE_REASON_USER
+    )
+  }
+}
+
+// =============================================================================
+
+const sleep = (duration) =>
+  new Promise((resolve) => setTimeout(resolve, duration))
+
+class Page {
+  /**
+   * A basic controller for individual pages
+   * @param {string} id The id of the element that represents this page.
+   */
+  constructor(id) {
+    this.element = document.getElementById(id)
+    this.nextEl = document.getElementById(`${id}Next`)
+
+    this.nextEl.addEventListener('click', () => {
+      this.pages.next()
+    })
+  }
+
+  /**
+   *
+   * @param {Pages} pages The pages wrapper
+   */
+  setPages(pages) {
+    this.pages = pages
+  }
+
+  hide() {
+    this.element.setAttribute('hidden', 'true')
+  }
+
+  show() {
+    this.element.removeAttribute('hidden')
+  }
+}
+
+class Themes extends Page {
+  constructor(id) {
+    super(id)
+
+    this.loadThemes()
+  }
+
+  async loadThemes() {
+    await sleep(1000)
+
+    const themes = (await AddonManager.getAddonsByTypes(['theme'])).filter(
+      (theme) => !theme.id.includes('colorway')
+    )
+    const themeList = document.getElementById('themeList')
+
+    const themeElements = []
+
+    themes.forEach((theme) => {
+      const container = document.createElement('div')
+      container.classList.add('card');
+      container.classList.add('card-no-hover');
+
+      if (theme.isActive) {
+        container.classList.add('selected')
+      }
+
+      container.addEventListener('click', () => {
+        document.body.classList.add('normal-background');
+        themeElements.forEach((el) => el.classList.remove('selected'))
+        container.classList.add('selected')
+        theme.enable()
+      })
+
+      const img = document.createElement('img')
+      img.src = theme.icons['32']
+
+      const name = document.createElement('h3')
+      name.textContent = theme.name
+
+      container.appendChild(img)
+      container.appendChild(name)
+
+      themeList.appendChild(container)
+      themeElements.push(container)
+    })
+  }
+}
+
+class Thanks extends Page {
+  constructor(id) {
+    super(id)
+
+    // Thanks :)
+  }
+}
+
+class Search extends Page {
+  constructor(id) {
+    super(id)
+
+    this.store = new EngineStore()
+    this.searchList = []
+
+    this.loadSearch()
+  }
+
+  async loadSearch() {
+    await sleep(1100)
+    await this.store.init()
+
+    const defaultEngine = await Services.search.getDefault()
+
+    const searchElements = document.getElementById('searchList')
+
+    this.store.getEngine().forEach((search) => {
+      const container = this.loadSpecificSearch(search, defaultEngine)
+
+      searchElements.appendChild(container)
+      this.searchList.push(container)
+    })
+  }
+
+  /**
+   * @returns {HTMLDivElement}
+   */
+  loadSpecificSearch(search, defaultSearch) {
+    const container = document.createElement('div');
+    container.classList.add('card')
+    container.classList.add('card-no-hover')
+
+    if (search.name == defaultSearch._name) {
+      container.classList.add('selected')
+    }
+
+    container.addEventListener('click', () => {
+      this.searchList.forEach((el) => el.classList.remove('selected'))
+      container.classList.add('selected')
+      this.store.setDefaultEngine(search)
+    })
+
+    const img = document.createElement('img');
+    img.src = search.originalEngine._iconURI.spec;
+
+    const name = document.createElement('h3')
+    name.textContent = search.name
+
+    container.appendChild(img)
+    container.appendChild(name)
+
+    return container
+  }
+}
+
+class Import extends Page {
+  constructor(id) {
+    super(id)
+
+    const importButton = document.getElementById('importBrowser')
+    importButton.addEventListener('click', () => {
+      MigrationUtils.showMigrationWizard(window, [
+        MigrationUtils.MIGRATION_ENTRYPOINT_NEWTAB,
+        null,
+      ])
+      this.nextEl.click()
+    })
+  }
+}
+
+class Pages {
+  /**
+   * A wrapper around all pages
+   * @param {Page[]} pages The pages
+   */
+  constructor(pages) {
+    this.pages = pages
+    this.currentPage = 0
+
+    this.pages.forEach((page) => page.setPages(this))
+
+    this._displayCurrentPage()
+  }
+
+  next() {
+    this.currentPage++
+
+    if (this.currentPage >= this.pages.length) {
+      // We can use internal js apis to close the window. We also want to set
+      // the settings api for welcome seen to false to stop it showing again
+
+      Services.prefs.setBoolPref(welcomeSeenPref, true)
+
+      close()
+      return
+    }
+
+    this._displayCurrentPage()
+  }
+
+  _displayCurrentPage() {
+    for (const page of this.pages) {
+      page.hide()
+    }
+
+    this.pages[this.currentPage].show()
+  }
+}
+
+const pages = new Pages([
+  new Page('welcome'),
+  new Import('import'),
+  new Themes('theme'),
+  new Search('search'),
+  new Thanks('thanks'),
+])

src/browser/locales/en-US/browser/zen-welcome.ftl

@@ -0,0 +1,31 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+welcome-dialog-welcome = 👋 Welcome to { -brand-short-name }
+welcome-dialog-welcome-subtext = Fast. Beautiful. Private.
+welcome-dialog-get-started = Get started
+
+welcome-dialog-skip = Not now
+
+welcome-dialog-import = 😍 Bring your favourites to { -brand-short-name }
+welcome-dialog-import-subtext = Pick up where you left off in your last browser
+welcome-dialog-import-action = Import
+
+welcome-dialog-theme = 🎨 Choose a theme
+welcome-dialog-theme-subtext = Personalize your experience with your favorite look!
+welcome-dialog-theme-action = Continue
+
+welcome-dialog-search = 🔍 Choose a search engine
+welcome-dialog-search-subtext = Select your preferred search engine to tailor your browsing experience!
+welcome-dialog-search-action = Next
+
+welcome-dialog-thanks = Thanks You So Much! ❤️
+welcome-dialog-thanks-subtext = Your appreciation means the world to us!
+welcome-dialog-thanks-action = Start Browsing!
+
+# About Welcome Page
+welcome-page-description = An experimental Firefox fork that enhances focus and increases work productivity due to its hyper minimalistic UI and built-in tools
+welcome-page-version = You are using { -brand-full-name }
+welcome-page-build-id = Build { -build-id }
+welcome-page-other-downloads = If this is not the release you want, feel free to checkout other downloads at https://pulsebrowser.app/download

src/browser/themes/addons/alpenglow/manifest-json.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/addons/alpenglow/manifest.json b/browser/themes/addons/alpenglow/manifest.json
-index 05a25e13915edee3ba51ed1c1b5569faa70cd536..5a5bf6766e45d339b1b17e4b1e88b302a34025f6 100644
+index 05a25e13915edee3ba51ed1c1b5569faa70cd536..c41c3c51b507fd6fd123805231d79c947d755a2f 100644
 --- a/browser/themes/addons/alpenglow/manifest.json
 +++ b/browser/themes/addons/alpenglow/manifest.json
 @@ -7,133 +7,94 @@
@@ -170,7 +170,7 @@ index 05a25e13915edee3ba51ed1c1b5569faa70cd536..5a5bf6766e45d339b1b17e4b1e88b302
 +      "toolbar_field_icon_opacity": "0.72",
 +      "input_border_color": "rgba(0, 0, 0, .3)",
 +      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)",
-+      "zen_main_browser_background": "linear-gradient(135deg, #fac89a 0%, #e290ff 100%)"
++      "zen_main_browser_background": "var(--zen-characteristic-gradient)"
      }
    },
  

src/browser/themes/shared/zen-browser-shared.css

@@ -125,6 +125,10 @@ toolbar .toolbarbutton-1 {
   height: 100%;
 }
 
+#navigator-toolbox {
+  min-width: 55px;
+}
+
 #navigator-toolbox toolbar#TabsToolbar {
   margin: var(--zen-appcontent-separator-from-window);
   background: var(--sidebar-background-color);

src/toolkit/themes/shared/in-content/zen-common-shared.css

@@ -6,6 +6,7 @@
   --in-content-primary-button-border-color: transparent !important;
   --in-content-primary-button-border-hover: transparent !important;
   --in-content-primary-button-border-active: transparent !important;
+  --zen-characteristic-gradient: linear-gradient(135deg, #fac89a 0%, #e290ff 100%);
 
   --in-content-page-background: #F9F9FB !important;
   --zen-in-content-dialog-background: var(--in-content-page-background);

src/toolkit/themes/shared/zen-global-shared.css

@@ -1,4 +1,6 @@
 
+@import url("./in-content/zen-common-shared.css");
+
 :root {
   --zen-dialog-background: Field;
   --zen-dialog-border-color: rgba(0,0,0,.2);