Add Sidebar Settings to Welcome

Fixes #160

Author: PressJump

src/browser/components/welcome/welcome.css

@@ -84,3 +84,8 @@ p {
     display: none;
   }
 }
+
+input[type="checkbox"] {
+  display: inline-block;
+  vertical-align: middle;
+}

src/browser/components/welcome/welcome.html

@@ -88,6 +88,20 @@ <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>
+      <button
+        id="sidebarNext"
+        class="primary"
+        data-l10n-id="welcome-dialog-sidebar-action"
+      ></button>
+    </div>
+
     <script src="./welcome.js"></script>
   </body>
 </html>

src/browser/components/welcome/welcome.js

@@ -151,6 +151,32 @@ class Themes extends Page {
   }
 }
 
+class Sidebar extends Page {
+  constructor(id) {
+    super(id)
+
+    this.loadSidebar()
+  }
+
+  async loadSidebar() {
+    this.enabled = document.getElementById('sidebarEnabled')
+    this.keepTabsActive = document.getElementById('sidebarKeepTabsActive')
+
+    this.enabled.addEventListener('change', () => {
+      //change browser preference pulse.sidebar.enabled
+      Services.prefs.setBoolPref('pulse.sidebar.enabled', this.enabled.checked)
+    })
+
+    this.keepTabsActive.addEventListener('change', () => {
+      //change browser preference pulse.sidebar.keeptabsactive.enabled
+      Services.prefs.setBoolPref(
+        'pulse.sidebar.keeptabsactive.enabled',
+        this.keepTabsActive.checked
+      )
+    })
+  }
+}
+
 class Search extends Page {
   constructor(id) {
     super(id)
@@ -266,4 +292,5 @@ const pages = new Pages([
   new Import('import'),
   new Themes('theme'),
   new Search('search'),
+  new Sidebar('sidebar'),
 ])

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

@@ -16,7 +16,13 @@ welcome-dialog-theme = Choose a theme
 welcome-dialog-theme-action = Continue
 
 welcome-dialog-search = Chose a search engine
-welcome-dialog-search-action = Done
+welcome-dialog-search-action = Next
+
+welcome-dialog-sidebar = Choose your Sidebar Settigns
+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
 
 # 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