feat: add Zen branding styles and update welcome page layout

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

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

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

@@ -43,7 +43,8 @@
         content/browser/zen-styles/zen-popup.css                (content/zen-styles/zen-popup.css)
         content/browser/zen-styles/zen-sidebar-panels.css       (content/zen-styles/zen-sidebar-panels.css)
         content/browser/zen-styles/zen-gradient-generator.css   (content/zen-styles/zen-gradient-generator.css)
-        
+        content/browser/zen-styles/zen-branding.css             (content/zen-styles/zen-branding.css)
+
         content/browser/zen-styles/zen-panels/bookmarks.css     (content/zen-styles/zen-panels/bookmarks.css)
         content/browser/zen-styles/zen-panels/extensions.css    (content/zen-styles/zen-panels/extensions.css)
         content/browser/zen-styles/zen-panels/print.css         (content/zen-styles/zen-panels/print.css)
@@ -60,3 +61,7 @@
         content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs  (zen-components/actors/ZenThemeMarketplaceChild.sys.mjs)
         content/browser/zen-components/actors/ZenGlanceChild.sys.mjs            (zen-components/actors/ZenGlanceChild.sys.mjs)
         content/browser/zen-components/actors/ZenGlanceParent.sys.mjs           (zen-components/actors/ZenGlanceParent.sys.mjs)
+
+        # Fonts
+        content/browser/zen-fonts/JunicodeVF-Italic.woff2       (content/zen-fonts/JunicodeVF-Italic.woff2)
+        content/browser/zen-fonts/JunicodeVF-Roman.woff2        (content/zen-fonts/JunicodeVF-Roman.woff2)

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

@@ -0,0 +1,24 @@
+
+@font-face {
+  font-family: 'Zen-Junicode';
+  src: url('chrome://browser/content/zen-fonts/JunicodeVF-Roman.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Zen-Junicode-Italic';
+  src: url('chrome://browser/content/zen-fonts/JunicodeVF-Italic.woff2') format('woff2');
+}
+
+.zen-branding-title {
+  font-size: 6rem;
+  line-height: 0.9;
+  margin-bottom: 0.4rem;
+  font-family: 'Zen-Junicode', serif;
+  font-weight: 600;
+  font-style: normal;
+  font-feature-settings: 'swsh' 1;
+
+  & .zen-branding-title-italic {
+    font-family: "Zen-Junicode-Italic", serif;
+  }
+}

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

@@ -14,9 +14,13 @@
   --zen-border-radius: 7px;
   --zen-primary-color: #ffb787;
 
-  --zen-branding-bg-dark: #202020;
+  /* Branding */
-  --zen-branding-bg: light-dark(#F2F0E3, var(--zen-branding-bg-dark));
+  --zen-branding-dark: #202020;
-  --zen-branding-bg-reverse: light-dark(var(--zen-branding-bg-dark), #F2F0E3);
+  --zen-branding-coral: #F76F53;
+  --zen-branding-paper: #F2F0E3;
+
+  --zen-branding-bg: light-dark(var(--zen-branding-paper), var(--zen-branding-dark));
+  --zen-branding-bg-reverse: light-dark(var(--zen-branding-dark), var(--zen-branding-paper));
 
   /** Zen colors are generated automatically from the primary color */
   --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);

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

@@ -19,96 +19,80 @@ body {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  transition: 2s;
-  -moz-transform: scale(1.1); /* zoom */
   user-select: none;
 }
 
 body {
-  --zen-gradient-color: var(--zen-colors-secondary);
+  background: var(--zen-branding-bg);
-  --zen-gradient-background: var(--zen-colors-tertiary);
-  --zen-gradient-border: #fbffbe;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  &::before {
-    background: radial-gradient(circle at 50%, var(--zen-gradient-background) 20%, var(--zen-gradient-color) 60%);
-    mask: var(--noise), radial-gradient(circle at 50%, transparent 20%, light-dark(#000, #fff) (60% + 10%));
-  }
-
-  &::after {
-    mask-image: var(--noise), linear-gradient(45deg, #000 0%, transparent 25%, transparent 75%, #000 100%);
-    background: linear-gradient(
-      45deg,
-      #6d6dff 10%,
-      var(--zen-gradient-background) 25%,
-      var(--zen-gradient-background) 75%,
-      var(--zen-gradient-border) 90%
-    );
-  }
 }
 
-@media (prefers-color-scheme: dark) {
+#main-view {
-  body {
-    --zen-gradient-border: rgb(32, 32, 28);
-    --zen-gradient-color: transparent;
-  }
-}
-
-#first-view {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-  background: var(--zen-dialog-background);
-  width: 55%;
   position: relative;
-  padding: 5% 4%;
   overflow: hidden;
-  border-right: 1px solid var(--zen-colors-border);
+  width: 50%;
+  margin: auto;
+}
+
+#welcome .zen-branding-title {
+  text-align: center;
+  font-size: 11rem;
 }
 
 #buttons-footer {
   margin-top: auto;
   padding: 10px;
-  width: -moz-available;
+  width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 2;
 }
 
-#second-view {
+body:has(#welcome:not([hidden='true'])) {
+  background: var(--zen-branding-coral);
+  color: var(--zen-branding-paper);
+
+  & #buttons-footer {
+    justify-content: center;
+    position: fixed;
+    bottom: 22px;
+    margin: 0 auto;
+
+    & button {
+      background: var(--zen-branding-paper);
+      color: var(--zen-branding-dark);
+    }
+  }
+}
+
+#main-view:has(#welcome:not([hidden='true'])) {
   width: 100%;
-  height: 100%;
+
-  position: relative;
+  & #back {
+    display: none;
+  }
 }
 
 button {
   padding: 8px;
+  border-radius: 999px;
 }
 
-#footer-buttons button {
+button.primary {
-  padding: 8px 0;
+  background: var(--zen-branding-bg-reverse);
+  color: var(--zen-branding-bg);
 }
 
 .page {
   display: flex;
   flex-direction: column;
-  justify-content: start;
+  justify-content: center;
   width: -moz-available;
-  height: 100%;
+  align-items: center;
   margin: 32px;
 }
 
@@ -187,13 +171,16 @@ p {
   margin-bottom: 30px;
 }
 
-.icon {
+#zen-logo {
   -moz-context-properties: fill;
   fill: currentColor;
   display: inline-block;
-  height: 82px;
+  height: 42px;
-  width: 82px;
+  width: 42px;
-  margin-bottom: 20px;
+  position: absolute;
+  top: 22px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .asset {
@@ -245,7 +232,7 @@ input[type='checkbox'] {
 @keyframes fadeInRight {
   from {
     opacity: 0;
-    transform: translate3d(40px, 0, 0);
+    transform: translate3d(0, 40px, 0);
     filter: blur(15px);
   }
 
@@ -298,7 +285,7 @@ input[type='checkbox'] {
 }
 
 #circular-progress circle.bg {
-  stroke: light-dark(#3f3f3f, #4d4d4d);
+  stroke: transparent;
 }
 
 #circular-progress circle.fg {
@@ -306,7 +293,7 @@ input[type='checkbox'] {
   transform-origin: var(--half-size) var(--half-size);
   stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
   transition: stroke-dasharray 0.3s linear 0s;
-  stroke: var(--zen-primary-color);
+  stroke: var(--zen-branding-coral);
 }
 
 #colorListWrapper {

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

@@ -10,30 +10,34 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     <meta name="color-scheme" content="light dark">
     <meta name="referrer" content="no-referrer" />
 
-    <link
+    <linkset>
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="chrome://global/skin/in-content/common.css"
+      />
+      <link rel="stylesheet" href="chrome://global/skin/global.css" />
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/zen-welcome/welcome.css"
+      />
+      <link
       rel="stylesheet"
-      type="text/css"
+      href="chrome://browser/content/zen-styles/zen-branding.css"
-      href="chrome://global/skin/in-content/common.css"
-    />
-    <link rel="stylesheet" href="chrome://global/skin/global.css" />
-    <link
-      rel="stylesheet"
-      href="chrome://browser/content/zen-welcome/welcome.css"
     />
 
-    <link rel="localization" href="branding/brand.ftl" />
+      <link rel="localization" href="branding/brand.ftl" />
-    <link rel="localization" href="browser/zen-welcome.ftl" />
+      <link rel="localization" href="browser/zen-welcome.ftl" />
+    </linkset>
 
     <script src="chrome://browser/content/zenThemeModifier.js"></script>
   </head>
   <body class="gradient-background">
-    <div id="first-view">
+    <img id="zen-logo" src="chrome://branding/content/about-logo.png" />
+    <div id="main-view">
       <div class="page" id="welcome">
-        <img class="icon" src="chrome://branding/content/about-logo.png" />
+        <h1 class="zen-branding-title" data-l10n-id="welcome-dialog-welcome-title-part-1"></h1>
-        <h1 data-l10n-id="welcome-dialog-welcome"></h1>
+        <h1 class="zen-branding-title" data-l10n-id="welcome-dialog-welcome-title-part-2"></h1>
-
-        <p data-l10n-id="welcome-dialog-welcome-subtext"></p>
-
       </div>
 
       <div class="page page-split" id="import">
@@ -152,11 +156,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         ></button>
       </div>
     </div>
-
-    <div id="second-view">
-
-    </div>
-
     <svg
       width="250" height="250" viewBox="0 0 250 250"
       id="circular-progress" style="--progress: 50"

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

@@ -242,16 +242,12 @@ class Pages {
    * @param {Page[]} pages The pages
    */
   constructor(pages) {
-    console.info('Initializing welcome pages...');
     this.pages = pages;
     this.currentPage = 0;
 
-    window.maximize();
-
     this.pages.forEach((page) => page.setPages(this));
 
     this._displayCurrentPage();
-    console.info('Welcome pages initialized.');
 
     this.nextEl = document.getElementById(`next`);
     this.prevEl = document.getElementById(`back`);

src/widget/windows/nsWindow-cpp.patch

@@ -1,5 +1,5 @@
 diff --git a/widget/windows/nsWindow.cpp b/widget/windows/nsWindow.cpp
-index 00681c216c838efedbbcded9d6b843dbd8b5b0b6..76ef1b343908b13e2e1c7c85ddebaf0ccea112cd 100644
+index 00681c216c838efedbbcded9d6b843dbd8b5b0b6..eca12711fa5093992817ff1075c3559b03e935d3 100644
 --- a/widget/windows/nsWindow.cpp
 +++ b/widget/windows/nsWindow.cpp
 @@ -1078,6 +1078,16 @@ nsresult nsWindow::Create(nsIWidget* aParent, const LayoutDeviceIntRect& aRect,
@@ -11,7 +11,7 @@ index 00681c216c838efedbbcded9d6b843dbd8b5b0b6..76ef1b343908b13e2e1c7c85ddebaf0c
 +    // Windows creates some sort of control buttons under the titlebar, which is
 +    // annoying for us because it wont allow us to have those hiding animations.
 +    // Let's just... remove them... and hope for the best.
-+    if (mWindowType == WindowType::TopLevel) {
++    if (sFirstTopLevelWindowCreated) {
 +      LONG_PTR style = ::GetWindowLongPtr(mWnd, GWL_STYLE);
 +      style &= ~(WS_SYSMENU | WS_MINIMIZEBOX | WS_MAXIMIZEBOX);
 +      ::SetWindowLongPtr(mWnd, GWL_STYLE, style);