Changed the new welcome panel to be theme independant (closes #17)

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

@@ -96,6 +96,7 @@ pref('gfx.webrender.all', true);
 pref('layout.css.backdrop-filter.enabled', true);
 
 pref("alerts.showFavicons", true);
+pref('browser.toolbars.bookmarks.visibility', 'never');
 
 // CUSTOM ZEN PREFS
 
@@ -103,7 +104,7 @@ pref('zen.welcomeScreen.enabled', true);
 pref('zen.welcomeScreen.seen', false);
 pref('zen.tabs.vertical', true);
 pref('zen.theme.accent-color', "#aac7ff");
-pref('zen.theme.panel-separation', 7);
+pref('zen.theme.panel-separation', /*7*/0);
 pref('zen.theme.toolbar-themed', true);
 
 // From: https://github.com/yokoffing/Betterfox

src/browser/base/content/zenThemeModifier.js

@@ -116,7 +116,7 @@
         for (let i = kElementsToAppend.length - 1; i >= 0; i--) {
           const elem = document.getElementById(kElementsToAppend[i]);
           if (elem) {
-            wrapper.appendChild(elem);
+            appWrapepr.appendChild(elem);
           }
         }
         appWrapepr.removeAttribute("hidden");

src/browser/components/customizableui/CustomizableUI-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
-index d748b93a92455f6349b8199d2f27381f53fee01d..10aea4cb79f77341c1a125bb1b3750a81794679c 100644
+index 5b09402dc1e19e89dcdfc8b5b45a2004c8cec0e6..678eceea71a7b0ada429fbbd521c20cfda97a329 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -25,7 +25,7 @@ ChromeUtils.defineLazyGetter(lazy, "gWidgetsBundle", function () {
@@ -27,3 +27,12 @@ index d748b93a92455f6349b8199d2f27381f53fee01d..10aea4cb79f77341c1a125bb1b3750a8
      ].filter(name => name);
  
      this.registerArea(
+@@ -287,7 +285,7 @@ var CustomizableUIInternal = {
+       {
+         type: CustomizableUI.TYPE_TOOLBAR,
+         defaultPlacements: [
+-          "firefox-view-button",
++//          "firefox-view-button",
+           "tabbrowser-tabs",
+           "new-tab-button",
+           "alltabs-button",

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

@@ -16,13 +16,23 @@ body {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: var(--zen-characteristic-gradient);
+  background: var(--zen-characteristic-gradient) !important;
   transition: .1s;
   -moz-transform: scale(1.1); /* zoom */
 }
 
-body.normal-background {
-  background: var(--zen-main-browser-background) !important;
+button {
+  background: #000 !important;
+  color: #fff !important;
+  font-size: 17px !important;
+  padding: 10px 25px !important;
+  font-weight: 600;
+  border-radius: 100px !important;
+  cursor: pointer !important;
+}
+
+* {
+  color: white;
 }
 
 .page {
@@ -69,6 +79,7 @@ body.normal-background {
   outline: none !important;
   cursor: auto;
   user-select: none;
+  background: var(--color-gray-80) !important;
 }
 
 .cardGroup .card.selected {
@@ -171,3 +182,26 @@ input[type='checkbox'] {
 .card h3 {
   margin-top: 10px;
 }
+
+#dots {
+  position: absolute;
+  bottom: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: white;
+  transition: all .1s;
+  cursor: pointer;
+}
+
+.dot.active {
+  background: #000;
+}

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

@@ -37,7 +37,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
       <button
         id="welcomeNext"
-        class="primary"
+        class="primary ghost-button"
         data-l10n-id="welcome-dialog-get-started"
       ></button>
     </div>
@@ -50,12 +50,12 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
       <hbox>
         <button
-          class="primary"
+          class="primary ghost-button"
           id="importBrowser"
           data-l10n-id="welcome-dialog-import-action"
         ></button>
         <button
-          class="text-link"
+          class="text-link ghost-button"
           id="importNext"
           data-l10n-id="welcome-dialog-skip"
         ></button>
@@ -68,7 +68,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
       <div id="themeList" class="cardGroup"></div>
       <button
         id="themeNext"
-        class="primary"
+        class="primary ghost-button"
         data-l10n-id="welcome-dialog-theme-action"
       ></button>
     </div>
@@ -79,7 +79,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
       <div id="searchList" class="cardGroup"></div>
       <button
         id="searchNext"
-        class="primary"
+        class="primary ghost-button"
         data-l10n-id="welcome-dialog-search-action"
       ></button>
     </div>
@@ -89,11 +89,13 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
       <p data-l10n-id="welcome-dialog-thanks-subtext"></p>
       <button
         id="thanksNext"
-        class="primary"
+        class="primary ghost-button"
         data-l10n-id="welcome-dialog-thanks-action"
       ></button>
     </div>
 
+    <div id="dots"></div>
+
     <script src="./welcome.js"></script>
     <script src="chrome://browser/content/contentTheme.js"></script>
   </body>

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

@@ -122,9 +122,9 @@ class Themes extends Page {
     await sleep(1000)
 
     const themes = (await AddonManager.getAddonsByTypes(['theme'])).filter(
-      (theme) => !theme.id.includes('colorway')
+      (theme) => theme.id !== "default-theme@mozilla.org"
     )
-    const themeList = document.getElementById('themeList')
+    const themeList = document.getElementById('themeList');
 
     const themeElements = []
 
@@ -249,7 +249,18 @@ class Pages {
 
     this.pages.forEach((page) => page.setPages(this))
 
-    this._displayCurrentPage()
+    const dots = document.getElementById("dots");
+    for (let i = 0; i < this.pages.length; i++) {
+      let dot = document.createElement("span");
+      dot.classList.add("dot");
+      dot.setAttribute("data-index", i);
+      dot.onclick = (e) => {
+        this.currentPage = parseInt(e.target.getAttribute("data-index"));
+        this._displayCurrentPage();
+      }
+      dots.appendChild(dot);
+    }
+    this._displayCurrentPage();
   }
 
   next() {
@@ -269,6 +280,12 @@ class Pages {
   }
 
   _displayCurrentPage() {
+    let dots = document.getElementsByClassName("dot");
+    for (let i = 0; i < dots.length; i++) {
+      dots[i].classList.remove("active");
+    }
+    dots[this.currentPage].classList.add("active");
+
     for (const page of this.pages) {
       page.hide()
     }