New welcome page and logo

configs/branding/alpha/content/about-logo.svg

@@ -1 +1,12 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"><defs><style>.g{fill:#000;}.g,.h,.i{stroke-width:0px;}.h{fill:url(#e);}.i{fill:#fef9fe;}</style><linearGradient id="e" x1="40" y1="80" x2="40" y2="0" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#fff" stop-opacity=".02"/><stop offset=".9" stop-color="#fff" stop-opacity=".1"/></linearGradient></defs><g id="c"><rect class="g" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="d"><rect class="h" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="f"><path class="i" d="M63.4352,57.677c-.0536,3.2125-2.7416,5.7589-5.9546,5.7589h-22.0762c-1.1221,0-1.8295-1.2103-1.2751-2.1859,1.4628-2.5738,4.3202-6.7829,8.5529-9.1539.4406-.2468.9366-.3783,1.4416-.3783h13.4532c3.2692,0,5.9129,2.6774,5.8582,5.9591Z"/><path class="i" d="M45.8707,18.7498c-1.4628,2.5738-4.3202,6.7829-8.5529,9.1539-.4406.2468-.9366.3783-1.4416.3783h-13.3567c-3.213,0-5.901-2.5464-5.9546-5.7589-.0547-3.2817,2.589-5.9591,5.8582-5.9591h22.1726c1.1221,0,1.8295,1.2103,1.2751,2.1859Z"/><path class="i" d="M22.4207,63.4375c-.7473,0-1.5065-.1438-2.2398-.4475-2.9896-1.2383-4.4093-4.6657-3.171-7.6551,1.9045-4.5977,4.6342-8.7196,8.1136-12.2511,3.6044-3.6585,7.8551-6.5172,12.6343-8.4968,6.5691-2.7211,11.6853-7.8373,14.4061-14.4061,1.2383-2.9896,4.6658-4.409,7.6551-3.171,2.9896,1.2383,4.4093,4.6657,3.171,7.6551-1.9045,4.5977-4.6342,8.7196-8.1136,12.2511-3.6044,3.6585-7.8551,6.5172-12.6343,8.4968-6.5691,2.7211-11.6853,7.8373-14.4061,14.4061-.9345,2.2562-3.1164,3.6185-5.4153,3.6185Z"/></g></svg>
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_109_1042)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M512 627.385C575.725 627.385 627.385 575.725 627.385 512C627.385 448.275 575.725 396.615 512 396.615C448.275 396.615 396.615 448.275 396.615 512C396.615 575.725 448.275 627.385 512 627.385ZM604.308 512C604.308 562.98 562.98 604.308 512 604.308C461.02 604.308 419.692 562.98 419.692 512C419.692 461.02 461.02 419.692 512 419.692C562.98 419.692 604.308 461.02 604.308 512Z" fill="#F76F53"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M712 512C712 622.457 622.457 712 512 712C401.543 712 312 622.457 312 512C312 401.543 401.543 312 512 312C622.457 312 712 401.543 712 512ZM512 673.538C601.215 673.538 673.538 601.215 673.538 512C673.538 422.785 601.215 350.462 512 350.462C422.785 350.462 350.462 422.785 350.462 512C350.462 601.215 422.785 673.538 512 673.538Z" fill="#F76F53"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M812 512C812 677.685 677.685 812 512 812C346.315 812 212 677.685 212 512C212 346.315 346.315 212 512 212C677.685 212 812 346.315 812 512ZM512 758.154C647.947 758.154 758.154 647.947 758.154 512C758.154 376.053 647.947 265.846 512 265.846C376.053 265.846 265.846 376.053 265.846 512C265.846 647.947 376.053 758.154 512 758.154Z" fill="#F76F53"/>
+</g>
+<defs>
+<clipPath id="clip0_109_1042">
+<rect width="1024" height="1024" fill="white"/>
+</clipPath>
+</defs>
+</svg>

configs/branding/twilight/content/about-logo.svg

@@ -1 +1,12 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"><defs><style>.g{fill:url(#e);}.g,.h,.i{stroke-width:0px;}.h{fill:#a570ff;}.i{fill:#fef9fe;}</style><linearGradient id="e" x1="40" y1="80" x2="40" y2="0" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#fff" stop-opacity="0"/><stop offset=".9" stop-color="#fff" stop-opacity=".1"/></linearGradient></defs><g id="c"><rect class="h" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="d"><rect class="g" width="80" height="80" rx="18.25" ry="18.25"/></g><g id="f"><path class="i" d="M63.4352,57.677c-.0536,3.2125-2.7416,5.7589-5.9546,5.7589h-22.0762c-1.1221,0-1.8295-1.2103-1.2751-2.1859,1.4628-2.5738,4.3202-6.7829,8.5529-9.1539.4406-.2468.9366-.3783,1.4416-.3783h13.4532c3.2692,0,5.9129,2.6774,5.8582,5.9591Z"/><path class="i" d="M45.8707,18.7498c-1.4628,2.5738-4.3202,6.7829-8.5529,9.1539-.4406.2468-.9366.3783-1.4416.3783h-13.3567c-3.213,0-5.901-2.5464-5.9546-5.7589-.0547-3.2817,2.589-5.9591,5.8582-5.9591h22.1726c1.1221,0,1.8295,1.2103,1.2751,2.1859Z"/><path class="i" d="M22.4207,63.4375c-.7473,0-1.5065-.1438-2.2398-.4475-2.9896-1.2383-4.4093-4.6657-3.171-7.6551,1.9045-4.5977,4.6342-8.7196,8.1136-12.2511,3.6044-3.6585,7.8551-6.5172,12.6343-8.4968,6.5691-2.7211,11.6853-7.8373,14.4061-14.4061,1.2383-2.9896,4.6658-4.409,7.6551-3.171,2.9896,1.2383,4.4093,4.6657,3.171,7.6551-1.9045,4.5977-4.6342,8.7196-8.1136,12.2511-3.6044,3.6585-7.8551,6.5172-12.6343,8.4968-6.5691,2.7211-11.6853,7.8373-14.4061,14.4061-.9345,2.2562-3.1164,3.6185-5.4153,3.6185Z"/></g></svg>
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_109_1042)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M512 627.385C575.725 627.385 627.385 575.725 627.385 512C627.385 448.275 575.725 396.615 512 396.615C448.275 396.615 396.615 448.275 396.615 512C396.615 575.725 448.275 627.385 512 627.385ZM604.308 512C604.308 562.98 562.98 604.308 512 604.308C461.02 604.308 419.692 562.98 419.692 512C419.692 461.02 461.02 419.692 512 419.692C562.98 419.692 604.308 461.02 604.308 512Z" fill="#F76F53"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M712 512C712 622.457 622.457 712 512 712C401.543 712 312 622.457 312 512C312 401.543 401.543 312 512 312C622.457 312 712 401.543 712 512ZM512 673.538C601.215 673.538 673.538 601.215 673.538 512C673.538 422.785 601.215 350.462 512 350.462C422.785 350.462 350.462 422.785 350.462 512C350.462 601.215 422.785 673.538 512 673.538Z" fill="#F76F53"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M812 512C812 677.685 677.685 812 512 812C346.315 812 212 677.685 212 512C212 346.315 346.315 212 512 212C677.685 212 812 346.315 812 512ZM512 758.154C647.947 758.154 758.154 647.947 758.154 512C758.154 376.053 647.947 265.846 512 265.846C376.053 265.846 265.846 376.053 265.846 512C265.846 647.947 376.053 758.154 512 758.154Z" fill="#F76F53"/>
+</g>
+<defs>
+<clipPath id="clip0_109_1042">
+<rect width="1024" height="1024" fill="white"/>
+</clipPath>
+</defs>
+</svg>

l10n

@@ -1 +1 @@
-Subproject commit 19ba80d872e724fd564b80affd19b677df1e8799
+Subproject commit 2a9eb863f38184504f9a03b3251a6e106f864d92

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

@@ -71,8 +71,8 @@ pref("app.update.checkInstallTime.days", 6);
 
 // CUSTOM ZEN PREFS
 
-pref('zen.welcomeScreen.enabled', true, sticky);
-pref('zen.welcomeScreen.seen', false);
+pref('zen.welcome-screen.enabled', true, sticky);
+pref('zen.welcome-screen.seen', false);
 
 pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);

src/browser/base/content/ZenUIManager.mjs

@@ -295,13 +295,15 @@ var gZenVerticalTabsManager = {
       }
 
       const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
-      if ((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons)
+      let shouldHide = false;
+      if (((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons)
         || (
           isCompactMode && isSingleToolbar && !(
             (!this.isWindowsStyledButtons && !isRightSide)
           )
-        )) {
+        )) && isSingleToolbar) {
         appContentNavbarContaienr.setAttribute('should-hide', 'true');
+        shouldHide = true;
       } else {
         appContentNavbarContaienr.removeAttribute('should-hide');
       }
@@ -403,6 +405,10 @@ var gZenVerticalTabsManager = {
         }
       }
 
+      if (shouldHide) {
+        appContentNavbarContaienr.append(windowButtons);
+      }
+
       gZenCompactModeManager.updateCompactModeContext(isSingleToolbar);
 
       // Always move the splitter next to the sidebar

src/browser/base/content/zen-assets.jar.inc.mn

@@ -55,6 +55,9 @@
         # Images
         content/browser/zen-images/gradient.png                 (content/zen-images/gradient.png)
         content/browser/zen-images/gradient-display.png         (content/zen-images/gradient-display.png)
+        content/browser/zen-images/layouts/collapsed.png        (content/zen-images/layouts/collapsed.png)
+        content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png)
+        content/browser/zen-images/layouts/single-toolbar.png   (content/zen-images/layouts/single-toolbar.png)
 
         # Actors
         content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (zen-components/actors/ZenThemeMarketplaceParent.sys.mjs)

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

@@ -14,7 +14,7 @@
   line-height: 0.9;
   margin-bottom: 0.4rem;
   font-family: 'Zen-Junicode', serif;
-  font-weight: 600;
+  font-weight: 400;
   font-style: normal;
   font-feature-settings: 'swsh' 1;
 

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

@@ -237,11 +237,11 @@
     transition: scale 0.1s ease-in-out;
     &[fadein='true']:not([zen-essential='true']) {
       #tabbrowser-tabs[zen-workspace-animation='previous'] & {
-        animation: zen-slide-in-reverse 0.2s ease-in-out;
+        animation: zen-slide-in 0.2s ease-in-out;
       }
 
       #tabbrowser-tabs[zen-workspace-animation='next'] & {
-        animation: zen-slide-in 0.2s ease-in-out;
+        animation: zen-slide-in-reverse 0.2s ease-in-out;
       }
     }
 

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

@@ -1,8 +1,8 @@
 diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs
-index f4ea0c87a35a19c09f811576201a7adb865ed74c..89e44ab4d3b6f0ce0ecf89c4b8b484b7da5fa2ea 100644
+index 2de73e75bf98b21dde9ec05213a66f9e9039200f..04ab3ea4c47d674778e8965654867c4cf0f99161 100644
 --- a/browser/components/BrowserGlue.sys.mjs
 +++ b/browser/components/BrowserGlue.sys.mjs
-@@ -4436,6 +4436,7 @@ BrowserGlue.prototype = {
+@@ -4643,6 +4643,7 @@ BrowserGlue.prototype = {
    },
  
    async _maybeShowDefaultBrowserPrompt() {
@@ -10,14 +10,14 @@ index f4ea0c87a35a19c09f811576201a7adb865ed74c..89e44ab4d3b6f0ce0ecf89c4b8b484b7
      // 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.
-@@ -4894,6 +4895,16 @@ BrowserGlue.prototype = {
+@@ -5169,6 +5170,16 @@ BrowserGlue.prototype = {
      "nsIObserver",
      "nsISupportsWeakReference",
    ]),
 +
 +  _ZenMaybeShowWelcomeScreen() {
-+    const welcomeEnabled = Services.prefs.getBoolPref("zen.welcomeScreen.enabled", true)
-+    const welcomeSeen = Services.prefs.getBoolPref("zen.welcomeScreen.seen", false)
++    const welcomeEnabled = Services.prefs.getBoolPref("zen.welcome-screen.enabled", true)
++    const welcomeSeen = Services.prefs.getBoolPref("zen.welcome-screen.seen", false)
 +    if (welcomeEnabled && !welcomeSeen) {
 +      lazy.BrowserWindowTracker.getTopWindow().gDialogBox.open(
 +        "chrome://browser/content/zen-welcome/welcome.html"

src/browser/components/preferences/zen-settings.js

@@ -485,6 +485,9 @@ var gZenMarketplaceManager = {
   },
 };
 
+const kZenExtendedSidebar = 'zen.view.sidebar-expanded';
+const kZenSingleToolbar = 'zen.view.use-single-toolbar';
+
 var gZenLooksAndFeel = {
   init() {
     if (this.__hasInitialized) return;
@@ -495,12 +498,57 @@ var gZenLooksAndFeel = {
     gZenMarketplaceManager.init();
     var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this);
     window.matchMedia('(prefers-color-scheme: dark)').addListener(onPreferColorSchemeChange);
+    for (const pref of [kZenExtendedSidebar, kZenSingleToolbar]) {
+      Services.prefs.addObserver(pref, this);
+    }
     this.onPreferColorSchemeChange();
     window.addEventListener('unload', () => {
       window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange);
+      for (const pref of [kZenExtendedSidebar, kZenSingleToolbar]) {
+        Services.prefs.removeObserver(pref, this);
+      }
     });
     this.setDarkThemeListener();
     this.setCompactModeStyle();
+
+    this.applySidebarLayout();
+  },
+
+  observe(subject, topic, data) {
+    this.applySidebarLayout();
+  },
+
+  applySidebarLayout() {
+    const isSingleToolbar = Services.prefs.getBoolPref(kZenSingleToolbar);
+    const isExtendedSidebar = Services.prefs.getBoolPref(kZenExtendedSidebar);
+    for (const layout of document.getElementById('zenLayoutList').children) {
+      layout.classList.remove('selected');
+      if (layout.getAttribute('layout') == 'single' && isSingleToolbar) {
+        layout.classList.add('selected');
+      } else if (layout.getAttribute('layout') == 'multiple' && !isSingleToolbar && isExtendedSidebar) {
+        layout.classList.add('selected');
+      } else if (layout.getAttribute('layout') == 'collapsed' && !isExtendedSidebar) {
+        layout.classList.add('selected');
+      }
+    }
+    if (this.__hasInitializedLayout) return;
+    this.__hasInitializedLayout = true;
+    for (const layout of document.getElementById('zenLayoutList').children) {
+      layout.addEventListener('click', () => {
+        if (layout.hasAttribute('disabled')) {
+          return;
+        }
+
+        for (const el of document.getElementById('zenLayoutList').children) {
+          el.classList.remove('selected');
+        }
+
+        layout.classList.add('selected');
+
+        Services.prefs.setBoolPref(kZenExtendedSidebar, layout.getAttribute('layout') != 'collapsed');
+        Services.prefs.setBoolPref(kZenSingleToolbar, layout.getAttribute('layout') == 'single');
+      });
+    }
   },
 
   onPreferColorSchemeChange(event) {

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -1,6 +1,50 @@
 <script src="chrome://browser/content/zen-components/ZenThemeBuilder.mjs" defer=""/>
 <script src="chrome://browser/content/preferences/zen-settings.js"/>
 <html:template id="template-paneZenLooks">
+
+<hbox id="zenVerticalTabsCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneZenLooks">
+<html:h1 data-l10n-id="zen-vertical-tabs-title"/>
+</hbox>
+
+<groupbox id="zenVerticalTabsGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
+  <label><html:h2 data-l10n-id="zen-vertical-tabs-layout-header"/></label>
+    <description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-layout-description" />
+    <hbox id="zenLayoutList">
+      <hbox layout="single">
+        <html:img src="chrome://browser/content/zen-images/layouts/single-toolbar.png" />
+        <label data-l10n-id="zen-layout-single-toolbar"></label>
+      </hbox>
+      <hbox layout="multiple">
+        <html:img src="chrome://browser/content/zen-images/layouts/multiple-toolbar.png" />
+        <label data-l10n-id="zen-layout-multiple-toolbar"></label>
+      </hbox>
+      <hbox layout="collapsed">
+        <html:img src="chrome://browser/content/zen-images/layouts/collapsed.png" />
+        <label data-l10n-id="zen-layout-collapsed-toolbar"></label>
+      </hbox>
+    </hbox>
+  <label><html:h2 data-l10n-id="zen-vertical-tabs-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-description" />
+
+      <checkbox id="zenLooksAndFeelNewtabUnderLastTab"
+            data-l10n-id="zen-vertical-tabs-newtab-on-tab-list"
+            preference="zen.tabs.show-newtab-vertical"/>
+    <vbox class="indent">
+        <checkbox id="zenLooksAndFeelShowTopNewtabBorder"
+                data-l10n-id="zen-vertical-tabs-newtab-top-button-border"
+                preference="zen.view.show-newtab-button-border-top"/>
+        <checkbox id="zenLooksAndFeelMoveNewtabToTop"
+                data-l10n-id="zen-vertical-tabs-newtab-top-button-up"
+                preference="zen.view.show-newtab-button-top"/>
+        <checkbox id="zenLooksAndFeelShowBottomBorder"
+                data-l10n-id="zen-vertical-tabs-show-bottom-border"
+                preference="zen.view.show-bottom-border"/>
+    </vbox>
+</groupbox>
+
 <hbox id="zenLooksCategory"
       class="subcategory"
       hidden="true"
@@ -312,31 +356,4 @@
             preference="zen.splitView.change-on-hover"/>
 </groupbox>
 
-<hbox id="zenVerticalTabsCategory"
-      class="subcategory"
-      hidden="true"
-      data-category="paneZenLooks">
-<html:h1 data-l10n-id="zen-vertical-tabs-title"/>
-</hbox>
-
-<groupbox id="zenVerticalTabsGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
-      <label><html:h2 data-l10n-id="zen-vertical-tabs-header"/></label>
-      <description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-description" />
-
-      <checkbox id="zenLooksAndFeelNewtabUnderLastTab"
-            data-l10n-id="zen-vertical-tabs-newtab-on-tab-list"
-            preference="zen.tabs.show-newtab-vertical"/>
-    <vbox class="indent">
-        <checkbox id="zenLooksAndFeelShowTopNewtabBorder"
-                data-l10n-id="zen-vertical-tabs-newtab-top-button-border"
-                preference="zen.view.show-newtab-button-border-top"/>
-        <checkbox id="zenLooksAndFeelMoveNewtabToTop"
-                data-l10n-id="zen-vertical-tabs-newtab-top-button-up"
-                preference="zen.view.show-newtab-button-top"/>
-        <checkbox id="zenLooksAndFeelShowBottomBorder"
-                data-l10n-id="zen-vertical-tabs-show-bottom-border"
-                preference="zen.view.show-bottom-border"/>
-    </vbox>
-</groupbox>
-
 </html:template>

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

@@ -32,19 +32,19 @@ body {
   justify-content: center;
   align-items: center;
   position: relative;
-  overflow: hidden;
-  width: 50%;
+  width: fit-content;
   margin: auto;
 }
 
-#welcome .zen-branding-title {
+#welcome .zen-branding-title,
+#thanks .zen-branding-title {
   text-align: center;
   font-size: 11rem;
 }
 
 #buttons-footer {
   margin-top: auto;
-  padding: 10px;
+  padding: 20px 0;
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -52,24 +52,28 @@ body {
   z-index: 2;
 }
 
-body:has(#welcome:not([hidden='true'])) {
+body:has(:is(#welcome, #thanks):not([hidden='true'])) {
   background: var(--zen-branding-coral);
   color: var(--zen-branding-paper);
 
   & #buttons-footer {
     justify-content: center;
     position: fixed;
-    bottom: 22px;
+    bottom: 40px;
     margin: 0 auto;
 
     & button {
-      background: var(--zen-branding-paper);
-      color: var(--zen-branding-dark);
+      background: var(--zen-branding-paper) !important;
+      color: var(--zen-branding-dark) !important;
     }
   }
 }
 
-#main-view:has(#welcome:not([hidden='true'])) {
+:is(#theme, #search) > div:nth-child(2) {
+  width: 100%;
+}
+
+#main-view:has(:is(#welcome, #thanks):not([hidden='true'])) {
   width: 100%;
 
   & #back {
@@ -80,11 +84,17 @@ body:has(#welcome:not([hidden='true'])) {
 button {
   padding: 8px;
   border-radius: 999px;
+  font-size: 16px;
+  font-weight: 600;
 }
 
 button.primary {
   background: var(--zen-branding-bg-reverse);
   color: var(--zen-branding-bg);
+
+  &:hover {
+    background: var(--zen-branding-bg-reverse);
+  }
 }
 
 .page {
@@ -109,7 +119,7 @@ h2 {
   justify-content: start;
 }
 
-.page-split > div:first-child {
+.page-split:not(#import) > div:first-child {
   margin-bottom: 20px;
 }
 
@@ -178,7 +188,7 @@ p {
   height: 42px;
   width: 42px;
   position: absolute;
-  top: 22px;
+  top: 40px;
   left: 50%;
   transform: translateX(-50%);
 }
@@ -229,6 +239,46 @@ input[type='checkbox'] {
   animation: fadeInRight 0.3s ease-in-out forwards;
 }
 
+#importBrowser {
+  width: 100%;
+  background: transparent !important;
+  border: 1px solid var(--zen-branding-bg-reverse);
+  color: var(--zen-branding-bg-reverse);
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  justify-content: start;
+  display: flex;
+}
+
+#layoutList {
+  display: flex;
+  gap: 20px;
+
+  & > [layout] {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    font-weight: 600;
+    cursor: pointer;
+
+    &[disabled='true'] {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+
+    & img {
+      width: 250px;
+      border-radius: 10px;
+      border: 4px solid transparent;
+    }
+
+    &.selected img {
+      border: 4px solid var(--zen-colors-primary);
+    }
+  }
+}
+
 @keyframes fadeInRight {
   from {
     opacity: 0;
@@ -244,10 +294,12 @@ 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),
+#layoutList [layout]:nth-child(2) {
   animation-delay: 0.1s;
 }
-.page:not([hidden='true']) > *:nth-child(3) {
+.page:not([hidden='true']) > *:nth-child(3),
+#layoutList [layout]:nth-child(3) {
   animation-delay: 0.2s;
 }
 .page:not([hidden='true']) > *:nth-child(4) {
@@ -313,7 +365,7 @@ input[type='checkbox'] {
   border: 3px solid light-dark(#000, #fff);
 }
 
-#welcome {
+#welcome, #thanks {
   justify-content: center;
 }
 

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

@@ -45,15 +45,11 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
           <h1 data-l10n-id="welcome-dialog-import"></h1>
           <p data-l10n-id="welcome-dialog-import-subtext"></p>
         </div>
-        <div>
-          <hbox>
-            <button
-              class="primary"
-              id="importBrowser"
-              data-l10n-id="welcome-dialog-import-action"
-            ></button>
-          </hbox>
-        </div>
+        <button
+          class="primary"
+          id="importBrowser"
+          data-l10n-id="welcome-dialog-import-action"
+        ></button>
       </div>
 
       <div class="page page-split" id="theme">
@@ -129,6 +125,27 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         </div>
       </div>
 
+      <div class="page page-split" id="layout">
+        <div>
+          <h1 data-l10n-id="welcome-dialog-layout"></h1>
+          <p data-l10n-id="welcome-dialog-layout-subtext"></p>
+        </div>
+        <div id="layoutList" class="cardGroup">
+          <hbox layout="single" class="selected">
+            <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">
+            <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">
+            <img src="chrome://browser/content/zen-images/layouts/collapsed.png" />
+            <p data-l10n-id="welcome-dialog-layout-collapsed-toolbar"></p>
+          </hbox>
+        </div>
+      </div>
+
       <div class="page page-split" id="search">
         <div>
           <h1 data-l10n-id="welcome-dialog-search"></h1>
@@ -140,8 +157,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
       </div>
 
       <div class="page" id="thanks">
-        <h1 data-l10n-id="welcome-dialog-thanks"></h1>
-        <p data-l10n-id="welcome-dialog-thanks-subtext"></p>
+        <h1 class="zen-branding-title" data-l10n-id="welcome-dialog-thanks-title-part-1"></h1>
+        <h1 class="zen-branding-title" data-l10n-id="welcome-dialog-thanks-title-part-2"></h1>
       </div>
       <div id="buttons-footer">
         <button

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

@@ -12,7 +12,7 @@ ChromeUtils.defineModuleGetter(this, 'ExtensionSettingsStore', 'resource://gre/m
 
 Services.scriptloader.loadSubScript('chrome://browser/content/ZenUIManager.mjs');
 
-const kWelcomeSeenPref = 'zen.welcomeScreen.seen';
+const kWelcomeSeenPref = 'zen.welcome-screen.seen';
 
 // =============================================================================
 // Util stuff copied from browser/components/preferences/search.js
@@ -158,6 +158,36 @@ class Themes extends Page {
   }
 }
 
+class Layout extends Page {
+  constructor(id) {
+    super(id);
+
+    this.loadLayouts();
+  }
+
+  loadLayouts() {
+    const kExtendedSidebar = 'zen.view.sidebar-expanded';
+    const kSingleToolbar = 'zen.view.use-single-toolbar';
+
+    for (const layout of document.getElementById('layoutList').children) {
+      layout.addEventListener('click', () => {
+        if (layout.hasAttribute('disabled')) {
+          return;
+        }
+
+        for (const el of document.getElementById('layoutList').children) {
+          el.classList.remove('selected');
+        }
+
+        layout.classList.add('selected');
+
+        Services.prefs.setBoolPref(kExtendedSidebar, layout.getAttribute('layout') != 'collapsed');
+        Services.prefs.setBoolPref(kSingleToolbar, layout.getAttribute('layout') == 'single');
+      });
+    }
+  }
+}
+
 class Thanks extends Page {
   constructor(id) {
     super(id);
@@ -300,6 +330,7 @@ class Pages {
 const pages = new Pages([
   new Page('welcome'),
   new Themes('theme'),
+  new Layout('layout'),
   new Import('import'),
   new Search('search'),
   new Thanks('thanks'),

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

@@ -200,6 +200,12 @@ groupbox h2 {
   }
 }
 
+@media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
+  #zen-compact-mode-styles-form {
+    display: none;
+  }
+}
+
 #zen-expand-tabbar-strat {
   display: flex;
   flex-direction: column;
@@ -598,6 +604,35 @@ groupbox h2 {
   }
 }
 
+#zenLayoutList {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 10px;
+
+  & > [layout] {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    font-weight: 600;
+    cursor: pointer;
+
+    &[disabled='true'] {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+
+    & img {
+      width: 250px;
+      border-radius: 10px;
+      border: 4px solid transparent;
+    }
+
+    &.selected img {
+      border: 4px solid var(--zen-colors-primary);
+    }
+  }
+}
+
 /* Disable mozilla's settings */
 
 #dataCollectionCategory,