From 1ceb5d6248c9a012fee237cbbda2918d741feea2 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Wed, 19 Mar 2025 22:58:38 +0100
Subject: [PATCH 1/3] feat: add settings window for Zen UI

---
 src/browser/base/content/ZenUIManager.mjs          |  8 ++++++++
 src/browser/base/content/zen-assets.jar.inc.mn     |  3 +++
 .../base/zen-components/windows/zen-settings.xhtml | 14 ++++++++++++++
 3 files changed, 25 insertions(+)
 create mode 100644 src/browser/base/zen-components/windows/zen-settings.xhtml

diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index 6b4226e7..f2a63426 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -265,6 +265,14 @@ var gZenUIManager = {
   get panelUIPosition() {
     return gZenVerticalTabsManager._hasSetSingleToolbar ? 'bottomleft topleft' : 'bottomright topright';
   },
+
+  openSettingsWindow() {
+    window.openDialog(
+      "chrome://browser/content/zen-components/windows/zen-settings.xhtml",
+      "",
+      "centerscreen,chrome,modal,titlebar",
+    );
+  }
 };
 
 var gZenVerticalTabsManager = {
diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn
index 3e5d5e1b..9a26817d 100644
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -81,3 +81,6 @@
         # JS Vendor
         content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (content/zen-vendor/tsparticles.confetti.bundle.min.js)
         content/browser/zen-vendor/motion.min.mjs                      (content/zen-vendor/motion.min.mjs)
+
+        # Windows
+        content/browser/zen-components/windows/zen-settings.xhtml (zen-components/windows/zen-settings.xhtml)
diff --git a/src/browser/base/zen-components/windows/zen-settings.xhtml b/src/browser/base/zen-components/windows/zen-settings.xhtml
new file mode 100644
index 00000000..3afa2541
--- /dev/null
+++ b/src/browser/base/zen-components/windows/zen-settings.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+
+<!-- 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/. -->
+
+<!DOCTYPE window>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        id="zenSettingsWindow"
+        style="min-width: 40em;">
+
+</window>

From 04f14c0d2f7e3d69ffbd8443689f191d73896f7e Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 20 Mar 2025 00:16:38 +0100
Subject: [PATCH 2/3] feat: implement settings window with styling and layout
 adjustments

---
 src/browser/base/content/ZenUIManager.mjs     |  8 ++--
 .../base/content/zen-assets.jar.inc.mn        |  2 +
 .../zen-styles/windows/zen-settings.css       | 48 +++++++++++++++++++
 .../zen-components/windows/zen-settings.xhtml | 41 +++++++++++++---
 4 files changed, 89 insertions(+), 10 deletions(-)
 create mode 100644 src/browser/base/content/zen-styles/windows/zen-settings.css

diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index f2a63426..c06e31ea 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -268,11 +268,11 @@ var gZenUIManager = {
 
   openSettingsWindow() {
     window.openDialog(
-      "chrome://browser/content/zen-components/windows/zen-settings.xhtml",
-      "",
-      "centerscreen,chrome,modal,titlebar",
+      'chrome://browser/content/zen-components/windows/zen-settings.xhtml',
+      '_blank',
+      'centerscreen,chrome,dialog=no,resizable=no,titlebar'
     );
-  }
+  },
 };
 
 var gZenVerticalTabsManager = {
diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn
index 9a26817d..ef734062 100644
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -52,6 +52,8 @@
         content/browser/zen-styles/zen-welcome.css              (content/zen-styles/zen-welcome.css)
         content/browser/zen-styles/zen-media-controls.css       (content/zen-styles/zen-media-controls.css)
 
+        content/browser/zen-styles/windows/zen-settings.css     (content/zen-styles/windows/zen-settings.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)
diff --git a/src/browser/base/content/zen-styles/windows/zen-settings.css b/src/browser/base/content/zen-styles/windows/zen-settings.css
new file mode 100644
index 00000000..ab4b0a29
--- /dev/null
+++ b/src/browser/base/content/zen-styles/windows/zen-settings.css
@@ -0,0 +1,48 @@
+@namespace html 'http://www.w3.org/1999/xhtml';
+@namespace xul 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
+
+* {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  font: message-box;
+}
+
+body {
+  width: 100%;
+}
+
+#main-content {
+  background: var(--zen-themed-toolbar-bg-transparent);
+  @supports (-moz-osx-font-smoothing: auto) {
+    appearance: -moz-window-titlebar;
+  }
+
+  user-select: none;
+  touch-action: none;
+  pointer-events: auto;
+
+  width: 100%;
+  height: 100%;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.section {
+  width: 100%;
+  position: relative;
+  gap: 0.6rem;
+
+  .section-content {
+    width: 100%;
+    background: var(--zen-toolbar-element-bg);
+    border-radius: var(--zen-native-content-radius);
+    padding: 1em;
+  }
+}
diff --git a/src/browser/base/zen-components/windows/zen-settings.xhtml b/src/browser/base/zen-components/windows/zen-settings.xhtml
index 3afa2541..be54dac1 100644
--- a/src/browser/base/zen-components/windows/zen-settings.xhtml
+++ b/src/browser/base/zen-components/windows/zen-settings.xhtml
@@ -4,11 +4,40 @@
    - 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/. -->
 
-<!DOCTYPE window>
+<html xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      id="zenSettingsWindow"
+      style="min-width: 35em; max-width: 35em; min-height: 40em;">
+  <head>
+    <linkset>
+      <html:link
+        rel="stylesheet"
+        href="chrome://browser/content/zen-styles/zen-theme.css"
+      />
+      <html:link
+        rel="stylesheet"
+        href="chrome://browser/content/zen-styles/windows/zen-settings.css"
+      />
 
-<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        xmlns:html="http://www.w3.org/1999/xhtml"
-        id="zenSettingsWindow"
-        style="min-width: 40em;">
+      <html:link rel="localization" href="browser/preferences/preferences.ftl" />
+      <html:link rel="localization" href="browser/preferences/zen-preferences.ftl" />
+    </linkset>
 
-</window>
+    <script src="chrome://browser/content/zenThemeModifier.js"></script>
+  </head>
+
+  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+    <vbox id="main-content">
+      <vbox class="section">
+        <html:h2 data-l10n-id="pane-general-title"/>
+        <div class="section-content">
+        </div>
+      </vbox>
+      <vbox class="section">
+        <html:h2 data-l10n-id="pane-general-title"/>
+        <div class="section-content">
+        </div>
+      </vbox>
+    </vbox>
+  </html:body>
+</html>

From d7c131b5cad904540740802a43fd8e415f422614 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Thu, 20 Mar 2025 12:33:17 +0100
Subject: [PATCH 3/3] style: adjust padding and border radius in settings
 window CSS; add test content in XHTML

---
 src/browser/base/content/zen-styles/windows/zen-settings.css | 5 +++--
 src/browser/base/zen-components/windows/zen-settings.xhtml   | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/browser/base/content/zen-styles/windows/zen-settings.css b/src/browser/base/content/zen-styles/windows/zen-settings.css
index ab4b0a29..442abb83 100644
--- a/src/browser/base/content/zen-styles/windows/zen-settings.css
+++ b/src/browser/base/content/zen-styles/windows/zen-settings.css
@@ -31,7 +31,7 @@ body {
   overflow-y: auto;
 
   gap: 2rem;
-  padding: 2rem;
+  padding: 1rem;
 }
 
 .section {
@@ -42,7 +42,8 @@ body {
   .section-content {
     width: 100%;
     background: var(--zen-toolbar-element-bg);
-    border-radius: var(--zen-native-content-radius);
+    border-radius: 6px;
     padding: 1em;
+    font-size: 1.1em;
   }
 }
diff --git a/src/browser/base/zen-components/windows/zen-settings.xhtml b/src/browser/base/zen-components/windows/zen-settings.xhtml
index be54dac1..07269e05 100644
--- a/src/browser/base/zen-components/windows/zen-settings.xhtml
+++ b/src/browser/base/zen-components/windows/zen-settings.xhtml
@@ -31,11 +31,13 @@
       <vbox class="section">
         <html:h2 data-l10n-id="pane-general-title"/>
         <div class="section-content">
+          test
         </div>
       </vbox>
       <vbox class="section">
         <html:h2 data-l10n-id="pane-general-title"/>
         <div class="section-content">
+          test
         </div>
       </vbox>
     </vbox>