chore: Update CSS and build configurations for welcome page

configs/common/mozconfig

@@ -22,10 +22,11 @@ export MOZ_SOURCE_REPO=https://github.com/zen-browser/desktop
 export MOZ_SOURCE_CHANGESET=${changeset}
 export MOZ_INCLUDE_SOURCE_INFO=1
 
-ac_add_options --enable-bootstrap
 ac_add_options --enable-application=browser
 
 if test "$ZEN_RELEASE"; then
+  ac_add_options --enable-bootstrap
+  
   ac_add_options --enable-release
   ac_add_options --disable-debug
   ac_add_options --disable-debug-symbols

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

@@ -15,21 +15,35 @@ body {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  transition: .1s;
+  transition: 2s;
   -moz-transform: scale(1.1); /* zoom */
 }
 
+body.gradient-background {
+}
+
 #first-view {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
+  border-radius: 15px;
-  margin: 20px;
+  margin: 15px;
   background: var(--zen-dialog-background);
-  width: 100%;
+  width: 55%;
   position: relative;
+  padding: 5% 4%;
+  overflow: hidden;
+}
+
+#buttons-footer {
+  margin-top: auto;
+  padding: 10px;
+  width: -moz-available;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 #second-view {
@@ -39,28 +53,37 @@ body {
 }
 
 button {
-  padding: 10px 40px;
+  padding: 8px;
+}
+
+#footer-buttons button {
+  padding: 8px 0;
 }
 
 .page {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: start;
-  align-items: center;
+  width: -moz-available;
-  align-content: center;
+  height: 100%;
-  width: 100%;
-
   margin: 32px;
 }
 
-.page-split:not([hidden="true"]) {
+h2 {
-  flex-direction: row;
+  font-size: 17px;
-  margin: auto;
+  font-weight: 600;
-  justify-content: space-around;
+  margin: 35px 0 20px 0;
+  line-height: 1;
 }
 
-#enableFeatures .card {
+.page-split:not([hidden="true"]) {
-  width: auto;
+  flex-direction: column;
+  margin: auto;
+  justify-content: start;
+}
+
+.page-split > div:first-child {
+  margin-bottom: 20px;
 }
 
 :not(#theme) .card h3 {
@@ -127,6 +150,7 @@ p {
   display: inline-block;
   height: 82px;
   width: 82px;
+  margin-bottom: 20px;
 }
 
 .asset {
@@ -199,59 +223,88 @@ input[type='checkbox'] {
   margin-top: 10px;
 }
 
-#dots {
+#circular-progress {
+  --size: 220px;
+  --half-size: calc(var(--size) / 2);
+  --stroke-width: 20px;
+  --radius: calc((var(--size) - var(--stroke-width)) / 2);
+  --circumference: calc(var(--radius) * pi * 2);
+  --dash: calc((var(--progress) * var(--circumference)) / 100);
   position: absolute;
-  bottom: 100px;
+  top: 15px;
-  left: 50%;
+  right: 10px;
-  transform: translateX(-50%);
+  width: 55px;
-  display: flex;
+  height: 40px;
-  gap: 12px;
-  align-items: center;
 }
 
-.dot {
+#circular-progress circle {
-  width: 8px;
+  cx: var(--half-size);
-  height: 8px;
+  cy: var(--half-size);
-  border-radius: 50%;
+  r: var(--radius);
-  transition: all .1s;
+  stroke-width: var(--stroke-width);
-  background: light-dark(#000, #fff);
+  fill: none;
-  cursor: pointer;
+  stroke-linecap: round;
 }
 
-.dot.active {
+#circular-progress circle.bg {
-  background: var(--zen-primary-color);
+  stroke: var(--zen-dialog-background);
 }
 
-#colorList {
+#circular-progress circle.fg {
-  width: 500px;
+  transform: rotate(-90deg);
-  border-radius: 99px;
+  transform-origin: var(--half-size) var(--half-size);
-  height: 20px;
+  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
-  display: flex;
+  transition: stroke-dasharray 0.3s linear 0s;
-  border: 1px solid var(--zen-colors-primary) !important;
+  stroke: var(--zen-primary-color);
-}
-
-#dragBall {
-  width: 17px;
-  height: 17px;
-  border-radius: 50%;
-  background: #fff;
-  position: absolute;
-  top: calc(5px / 2);
 }
 
 #colorListWrapper {
-  position: relative;
+  display: flex;
-  width: 500px;
+  align-items: center;
-  height: 20px;
 }
 
-#colorPreview {
+#colorListWrapper > div {
-  margin-left: 10px;
+  border-radius: 999px;
-  border-radius: 5px;
+  height: 20px;
-  width: 25px;
+  width: 20px;
-  height: 25px;
+  border: 3px solid transparent;
-  position: absolute;
+  margin: 0 5px;
-  top: 50%;
+}
-  right: -60px;
+
-  transform: translateY(-50%);
+#colorListWrapper > div.selected {
+  border: 3px solid light-dark(#000, #fff);
+}
+
+#welcome {
+  justify-content: center;
+}
+
+#themeList {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+#themeList > svg {
+  border: 3px solid transparent;
+  border-radius: 15px;
+  height: -moz-available;
+}
+
+#themeList > svg:nth-child(1) {
+  margin-right: 10px;
+}
+
+#themeList > svg.selected {
+  border: 3px solid var(--zen-colors-primary);
+}
+
+#searchList.cardGroup {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+#searchList .card {
+  width: -moz-available !important;
+  margin: 20px;
+  padding: 80px 0 !important;
 }

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

@@ -26,19 +26,14 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
     <script src="chrome://browser/content/zenThemeModifier.js"></script>
   </head>
-  <body>
+  <body class="gradient-background">
     <div id="first-view">
       <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 page-split" id="import">
@@ -53,11 +48,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
               id="importBrowser"
               data-l10n-id="welcome-dialog-import-action"
             ></button>
-            <button
-              class="text-link ghost-button"
-              id="importNext"
-              data-l10n-id="welcome-dialog-skip"
-            ></button>
           </hbox>
         </div>
       </div>
@@ -68,19 +58,70 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
           <p data-l10n-id="welcome-dialog-theme-subtext"></p>
         </div>
         <div>
-          <h1 data-l10n-id="welcome-dialog-theme-header-1"></h1>
+          <h2 data-l10n-id="welcome-dialog-theme-header-1"></h2>
-          <div id="themeList" class="cardGroup"></div>
-          <h1 data-l10n-id="welcome-dialog-theme-header-2"></h1>
           <div id="colorListWrapper">
-            <canvas id="colorList" class="cardGroup"></canvas>
-            <div id="dragBall"></div>
-            <div id="colorPreview"></div>
           </div>
-          <button
+          <h2 data-l10n-id="welcome-dialog-theme-header-2"></h2>
-            id="themeNext"
+          <div id="themeList" class="cardGroup">
-            class="primary"
+            <svg width="700" height="700" viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
-            data-l10n-id="welcome-dialog-theme-action"
+              <g clip-path="url(#clip0_404_2706)">
-          ></button>
+              <rect width="700" height="700" fill="#F4F4F4"/>
+              <g filter="url(#filter0_d_404_2706)">
+              <path d="M107 130C107 103.49 128.49 82 155 82H700V738H107V130Z" fill="white"/>
+              <path d="M155 82.5H699.5V737.5H107.5V130C107.5 103.766 128.766 82.5 155 82.5Z" stroke="black" stroke-opacity="0.2"/>
+              </g>
+              <mask id="path-3-inside-1_404_2706" fill="white">
+              <path d="M257 83H700V701H257V83Z"/>
+              </mask>
+              <path d="M257 83H700V701H257V83Z" fill="#F1F1F1"/>
+              <path d="M258 701V83H256V701H258Z" fill="black" fill-opacity="0.1" mask="url(#path-3-inside-1_404_2706)"/>
+              </g>
+              <defs>
+              <filter id="filter0_d_404_2706" x="103" y="82" width="601" height="664" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+              <feOffset dy="4"/>
+              <feGaussianBlur stdDeviation="2"/>
+              <feComposite in2="hardAlpha" operator="out"/>
+              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_404_2706"/>
+              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_404_2706" result="shape"/>
+              </filter>
+              <clipPath id="clip0_404_2706">
+              <rect width="700" height="700" fill="white"/>
+              </clipPath>
+              </defs>
+            </svg>
+            <svg width="700" height="700" viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g clip-path="url(#clip0_404_2709)">
+              <rect width="700" height="700" fill="#515151"/>
+              <g filter="url(#filter0_d_404_2709)">
+              <path d="M107 130C107 103.49 128.49 82 155 82H700V727H107V130Z" fill="#717171"/>
+              <path d="M155 82.5H699.5V726.5H107.5V130C107.5 103.766 128.766 82.5 155 82.5Z" stroke="white" stroke-opacity="0.57"/>
+              </g>
+              <mask id="path-3-inside-1_404_2709" fill="white">
+              <path d="M257 83H700V701H257V83Z"/>
+              </mask>
+              <path d="M257 83H700V701H257V83Z" fill="#565656"/>
+              <path d="M258 701V83H256V701H258Z" fill="black" fill-opacity="0.1" mask="url(#path-3-inside-1_404_2709)"/>
+              </g>
+              <defs>
+              <filter id="filter0_d_404_2709" x="103" y="82" width="601" height="653" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+              <feOffset dy="4"/>
+              <feGaussianBlur stdDeviation="2"/>
+              <feComposite in2="hardAlpha" operator="out"/>
+              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_404_2709"/>
+              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_404_2709" result="shape"/>
+              </filter>
+              <clipPath id="clip0_404_2709">
+              <rect width="700" height="700" fill="white"/>
+              </clipPath>
+              </defs>
+            </svg>                
+          </div>
         </div>
       </div>
   
@@ -91,21 +132,23 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         </div>
         <div>
           <div id="searchList" class="cardGroup"></div>
-          <button
-            id="searchNext"
-            class="primary"
-            data-l10n-id="welcome-dialog-search-action"
-          ></button>
         </div>
       </div>
   
       <div class="page" id="thanks">
         <h1 data-l10n-id="welcome-dialog-thanks"></h1>
         <p data-l10n-id="welcome-dialog-thanks-subtext"></p>
+      </div>
+      <div id="buttons-footer">
         <button
-          id="thanksNext"
+          id="back"
+          data-l10n-id="welcome-dialog-back-action"
+          disabled
+        ></button>
+        <button
+          id="next"
           class="primary"
-          data-l10n-id="welcome-dialog-thanks-action"
+          data-l10n-id="welcome-dialog-next-action"
         ></button>
       </div>
     </div>
@@ -114,7 +157,13 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
     </div>
 
-    <div id="dots"></div>
+    <svg
+      width="250" height="250" viewBox="0 0 250 250"
+      id="circular-progress" style="--progress: 50"
+    >
+      <circle class="bg"></circle>
+      <circle class="fg"></circle>
+    </svg>
 
     <script src="./welcome.js"></script>
     <script src="chrome://browser/content/contentTheme.js"></script>

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

@@ -90,11 +90,6 @@ class Page {
    */
   constructor(id) {
     this.element = document.getElementById(id)
-    this.nextEl = document.getElementById(`${id}Next`)
-
-    this.nextEl.addEventListener('click', () => {
-      this.pages.next()
-    })
   }
 
   /**
@@ -117,7 +112,7 @@ class Page {
 class Themes extends Page {
   constructor(id) {
     super(id)
-
+  
     this.loadThemes()
   }
 
@@ -130,95 +125,40 @@ class Themes extends Page {
     )
     const themeList = document.getElementById('themeList');
 
-    const themeElements = []
+    const themeElements = ["firefox-compact-light@mozilla.org", "firefox-compact-dark@mozilla.org"];
 
-    themes.forEach((theme) => {
+    themeElements.forEach((theme, i) => {
-      const container = document.createElement('div')
+      let container = themeList.children[i];
-      container.classList.add('card');
+      container.addEventListener('click', (() => {
-      container.classList.add('card-no-hover');
-
-      //if (theme.id == "firefox-compact-dream@mozilla.org" || theme.id == "firefox-compact-galaxy@mozilla.org") {
-      //  container.setAttribute('disabled', 'true')
-      //}
-
-      if (theme.isActive) {
-        container.classList.add('selected')
-      }
-
-      container.addEventListener('click', () => {
         if (container.hasAttribute('disabled')) {
           return
         }
-        document.body.classList.add('normal-background');
+        for (const el of themeList.children) {
-        themeElements.forEach((el) => el.classList.remove('selected'))
+          el.classList.remove('selected')
+        }
         container.classList.add('selected')
-        theme.enable()
+        themes.find((t) => t.id === theme).enable()
-      })
+      }).bind(this, i, container, theme))
-
-      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)
     })
   }
 
   setColorBar() {
-    const colorList = document.getElementById('colorList');
+    const colorList = document.getElementById('colorListWrapper');
-    const ctx = colorList.getContext('2d');
+    const colors = ['#aac7ff', '#74d7cb', '#a0d490', '#dec663', '#ffb787', 
-    let gradient = ctx.createLinearGradient(0, 0, 500, 20);
+        '#ffb1c0', '#ddbfc3', '#f6b0ea', '#d4bbff']
-    colorList.width = 500;
-    colorList.height = 20; 
 
-    gradient.addColorStop(0.1, '#aac7ff');
+    colors.forEach((color) => {
-    gradient.addColorStop(0.2, '#74d7cb');
+      const container = document.createElement('div')
-    gradient.addColorStop(0.3, '#a0d490');
+      container.classList.add('color')
-    gradient.addColorStop(0.4, '#dec663');
+      container.style.backgroundColor = color
-    gradient.addColorStop(0.5, '#ffb787');
+      container.setAttribute('data-color', color)
-    gradient.addColorStop(0.6, '#ffb1c0');
+      container.addEventListener('click', (() => {
-    gradient.addColorStop(0.7, '#ddbfc3');
-    gradient.addColorStop(0.8, '#f6b0ea');
-    gradient.addColorStop(0.9, '#d4bbff');
-
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, 1000, 150);
-
-    const dragBall = document.getElementById('dragBall');
-    dragBall.style.left = `17px`;
-    dragBall.addEventListener('mousedown', (e) => {
-      const rect = colorList.getBoundingClientRect();
-      e.preventDefault();
-      
-      const onMouseMove = (ev) => {
-        var x = ev.clientX - rect.left;
-        dragBall.style.left = `${x - 17/2}px`;
-        if (x < 17) {
-          dragBall.style.left = `${17/2}px`;
-          x = 17;
-        } else if (x > rect.width - 17) {
-          dragBall.style.left = `${rect.width - 17 - (17/2)}px`;
-          x = rect.width - 17 - (17/2);
-        }  
-        const data = ctx.getImageData(x - 17, 1, 1, 1).data;
-        let color = `#${data[0].toString(16)}${data[1].toString(16)}${data[2].toString(16)}`;
-        document.getElementById("colorPreview").style.backgroundColor = color;
         Services.prefs.setStringPref('zen.theme.accent-color', color);
-      }
+        colorList.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'))
+        container.classList.add('selected')
+      }).bind(this, color, container))
 
-      const onMouseUp = () => {
+      colorList.appendChild(container)
-        document.removeEventListener('mousemove', onMouseMove);
-        document.removeEventListener('mouseup', onMouseUp);
-        document.getElementById("colorPreview").style.backgroundColor = '';
-      }
-      
-      document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
     });
   }
 }
@@ -297,7 +237,6 @@ class Import extends Page {
       MigrationUtils.showMigrationWizard(window, {
         zenBlocking: true,
       });
-      this.nextEl.click()
     })
   }
 }
@@ -316,19 +255,24 @@ class Pages {
 
     this.pages.forEach((page) => page.setPages(this))
 
-    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();
     console.log("Welcome pages initialized.")
+
+    this.nextEl = document.getElementById(`next`)
+    this.prevEl = document.getElementById(`back`)
+
+    this.nextEl.addEventListener('click', () => {
+      this.next()
+      this.prevEl.removeAttribute('disabled')
+    })
+
+    this.prevEl.addEventListener('click', () => {
+      this.currentPage--
+      this._displayCurrentPage()
+      if (this.pages.currentPage === 1) {
+        this.prevEl.setAttribute('disabled', 'true')
+      }
+    });
   }
 
   next() {
@@ -355,16 +299,16 @@ class Pages {
   }
 
   _displayCurrentPage() {
-    let dots = document.getElementsByClassName("dot");
+    let progress = document.getElementById('circular-progress');
-    for (let i = 0; i < dots.length; i++) {
+    progress.style.setProperty('--progress', ((this.currentPage + 1) / this.pages.length) * 100);
-      dots[i].classList.remove("active");
-    }
-    dots[this.currentPage].classList.add("active");
-
     for (const page of this.pages) {
       page.hide()
     }
-
+    if (this.currentPage >= 1) {
+      document.body.classList.remove('gradient-background')
+    } else {
+      document.body.classList.add('gradient-background')
+    }
     this.pages[this.currentPage].show()
   }
 }

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

@@ -6,29 +6,21 @@ 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-import-action = Import your data
 
-welcome-dialog-theme = 🎨 Choose a theme
+welcome-dialog-theme = Make yourself at home
 welcome-dialog-theme-subtext = Personalize your experience with your favorite look!
-welcome-dialog-theme-action = Continue
 
-welcome-dialog-theme-header-1 = 1. Choose a theme
+welcome-dialog-theme-header-1 = Choose your perfect color
-welcome-dialog-theme-header-2 = 2. Find your perfect color
+welcome-dialog-theme-header-2 = Choose your theme
 
 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-dialog-back-action = Back
-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-dialog-next-action = Next
-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/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css

@@ -24,5 +24,5 @@ html|button:not(:is(
 )) {
   transition: .2s;
   border-radius: 6px !important;
-  min-width: 100px !important;
+  min-width: 80px !important;
 }