💄 Better welcome & setup (#198)

* 💄 Correct font size in theme selector

Fixes #148

* 💄 Better feature selector

Fixes #188

* 🐛 Fix vertical tabs vis

* 💄 Match welcome screen with pulse theme

* 💄 Fix a few sizing thing

* 🐛 Specify default preference values

Author: trickypr

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

@@ -1,8 +1,8 @@
 diff --git a/browser/base/content/contentTheme.js b/browser/base/content/contentTheme.js
-index d634a17c2633dc2ead40082c71622fe1b7a491a2..042c8120729f6c35ad0b49b91443a88ec6ed4fe8 100644
+index d634a17c2633dc2ead40082c71622fe1b7a491a2..73b2dedad1ccd3db43aca773f2e8bdcaa2737bda 100644
 --- a/browser/base/content/contentTheme.js
 +++ b/browser/base/content/contentTheme.js
-@@ -135,6 +135,105 @@
+@@ -135,6 +135,119 @@
          lwtProperty: "sidebar_highlight_text",
        },
      ],
@@ -60,6 +60,13 @@ index d634a17c2633dc2ead40082c71622fe1b7a491a2..042c8120729f6c35ad0b49b91443a88e
 +        lwtProperty: "button_primary_color",
 +      }
 +    ],
++    [
++      "--in-content-link-color",
++      {
++        lwtProperty: "button_primary_color",
++      }
++    ],
++ 
 +
 +    [
 +      "--in-content-primary-button-text-color-hover",
@@ -79,6 +86,13 @@ index d634a17c2633dc2ead40082c71622fe1b7a491a2..042c8120729f6c35ad0b49b91443a88e
 +        lwtProperty: "button_primary_color",
 +      }
 +    ],
++    [
++      "--in-content-link-color-hover",
++      {
++        lwtProperty: "button_primary_color",
++      }
++    ],
++ 
 +
 +    [
 +      "--in-content-page-background",

src/browser/components/welcome/jar.mn

@@ -9,3 +9,5 @@ browser.jar:
   content/browser/welcome/welcome.js          (welcome.js)
   content/browser/welcome/migrate.light.svg   (migrate.light.svg)
   content/browser/welcome/migrate.dark.svg    (migrate.dark.svg)
+  content/browser/welcome/sidebar.vis.svg     (sidebar.vis.svg)
+  content/browser/welcome/vertical.vis.svg    (vertical.vis.svg)

src/browser/components/welcome/sidebar.vis.svg

@@ -3,6 +3,7 @@ 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/.
 */
+
 body {
   width: 670px;
   height: 504px;
@@ -25,34 +26,41 @@ body {
   align-content: center;
   width: 100%;
 
-  margin: 64px;
+  margin: 32px;
+}
+
+#enableFeatures .card {
+  width: auto;
 }
 
 .card h3 {
-  font-size: 0.75rem;
-  /* margin: 0; */
+  margin: auto;
+  text-align: center;
 }
 
 .cardGroup {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-start;
+  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 transparent;
   transition: all 250ms ease-in-out;
   margin: 0;
+  border-radius: 16px;
 }
 
 .cardGroup .card.selected {
-  border: 2px solid var(--in-content-item-selected);
+  border: 2px solid var(--in-content-primary-button-background-hover);
 }
 
 h2,
@@ -85,7 +93,7 @@ p {
   }
 }
 
-input[type="checkbox"] {
+input[type='checkbox'] {
   display: inline-block;
   vertical-align: middle;
-}
+}

src/browser/components/welcome/vertical.vis.svg

@@ -88,20 +88,19 @@ <h2 data-l10n-id="welcome-dialog-search"></h2>
       ></button>
     </div>
 
-    <div class="page" id="sidebar">
-      <h2 data-l10n-id="welcome-dialog-sidebar"></h2>
-      <p data-l10n-id="welcome-dialog-sidebar-subtext"></p>
-      <hbox>
-        <input type="checkbox" id="sidebarEnabled" checked><label data-l10n-id="welcome-dialog-sidebar-checkbox"></label></input><br>
-        <input type="checkbox" id="sidebarKeepTabsActive" checked><label data-l10n-id="welcome-dialog-sidebar-keeptabsenabled-checkbox"></label></input>
-      </hbox>
+    <div class="page" id="features">
+      <h2 data-l10n-id="welcome-dialog-features"></h2>
+
+      <div class="cardGroup" id="enableFeatures"></div>
+
       <button
-        id="sidebarNext"
+        id="featuresNext"
         class="primary"
-        data-l10n-id="welcome-dialog-sidebar-action"
+        data-l10n-id="welcome-dialog-features-action"
       ></button>
     </div>
 
     <script src="./welcome.js"></script>
+    <script src="chrome://browser/content/contentTheme.js"></script>
   </body>
 </html>

src/browser/components/welcome/welcome.css

@@ -65,7 +65,10 @@ class EngineStore {
   }
 
   async setDefaultEngine(engine) {
-    await Services.search.setDefault(engine.originalEngine, Ci.nsISearchService.CHANGE_REASON_USER)
+    await Services.search.setDefault(
+      engine.originalEngine,
+      Ci.nsISearchService.CHANGE_REASON_USER
+    )
   }
 }
 
@@ -151,29 +154,52 @@ class Themes extends Page {
   }
 }
 
-class Sidebar extends Page {
+class Features extends Page {
   constructor(id) {
     super(id)
 
-    this.loadSidebar()
-  }
+    /** @type {HTMLDivElement} */
+    this.enableFeatures = document.getElementById('enableFeatures')
+
+    /** @type {{ l10nId: string; image: string; pref: string; }[]} */
+    this.features = [
+      {
+        l10nId: 'welcome-dialog-feature-vertical-tabs',
+        image: 'vertical.vis.svg',
+        pref: 'pulse.tabs.vertical',
+      },
+      {
+        l10nId: 'welcome-dialog-feature-sidebar-tabs',
+        image: 'sidebar.vis.svg',
+        pref: 'pulse.sidebar.enabled',
+      },
+    ]
+
+    for (const feature of this.features) {
+      const container = document.createElement('div')
+      container.classList.add('card')
+      if (Services.prefs.getBoolPref(feature.pref, false))
+        container.classList.add('selected')
 
-  async loadSidebar() {
-    this.enabled = document.getElementById('sidebarEnabled')
-    this.keepTabsActive = document.getElementById('sidebarKeepTabsActive')
+      container.addEventListener('click', () => {
+        const newValue = !Services.prefs.getBoolPref(feature.pref, false)
+        Services.prefs.setBoolPref(feature.pref, newValue)
 
-    this.enabled.addEventListener('change', () => {
-      //change browser preference pulse.sidebar.enabled
-      Services.prefs.setBoolPref('pulse.sidebar.enabled', this.enabled.checked)
-    })
+        if (newValue) container.classList.add('selected')
+        else container.classList.remove('selected')
+      })
 
-    this.keepTabsActive.addEventListener('change', () => {
-      //change browser preference pulse.sidebar.keeptabsactive.enabled
-      Services.prefs.setBoolPref(
-        'pulse.sidebar.keeptabsactive.enabled',
-        this.keepTabsActive.checked
-      )
-    })
+      const img = document.createElement('img')
+      img.src = feature.image
+
+      const name = document.createElement('h3')
+      name.setAttribute('data-l10n-id', feature.l10nId)
+
+      container.appendChild(img)
+      container.appendChild(name)
+
+      this.enableFeatures.appendChild(container)
+    }
   }
 }
 
@@ -292,5 +318,5 @@ const pages = new Pages([
   new Import('import'),
   new Themes('theme'),
   new Search('search'),
-  new Sidebar('sidebar'),
+  new Features('features'),
 ])

src/browser/components/welcome/welcome.html

@@ -18,11 +18,10 @@ welcome-dialog-theme-action = Continue
 welcome-dialog-search = Choose a search engine
 welcome-dialog-search-action = Next
 
-welcome-dialog-sidebar = Choose your Sidebar Settings
-welcome-dialog-sidebar-subtext = Some users like to have a sidebar, others don't. It's all up to you.
-welcome-dialog-sidebar-checkbox = Enable Sidebar
-welcome-dialog-sidebar-keeptabsenabled-checkbox = Keep sidebar tabs active even when closed
-welcome-dialog-sidebar-action = Done
+welcome-dialog-features = Enable some features
+welcome-dialog-feature-vertical-tabs = Vertical Tabs
+welcome-dialog-feature-sidebar-tabs = Sidebar Tabs
+welcome-dialog-features-action = Finish
 
 # 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