From 19ccd0760af2fa92b9129f51118ee3aacf05a022 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Tue, 13 Aug 2024 18:19:30 +0200
Subject: [PATCH] Remove unused CSS files related to Zen theme

---
 src/browser/app/profile/zen-browser.js        |   1 +
 src/browser/base/content/browser-xhtml.patch  |   2 +-
 ...scripts.inc.xhtml => zen-assets.inc.xhtml} |   5 +
 ...ripts.jar.inc.mn => zen-assets.jar.inc.mn} |   8 +-
 .../base/content/zen-styles/zen-tabs.css      |   4 +
 .../zen-styles/zen-tabs/horizontal-tabs.css   |   2 +
 .../zen-styles/zen-tabs/vertical-tabs.css     |   0
 .../base/content/zen-styles/zen-theme.css     | 102 ++++++++++++++++++
 src/browser/base/content/zenThemeModifier.js  |   8 ++
 src/browser/base/jar-mn.patch                 |   2 +-
 src/browser/themes/shared/zen-sources.inc.mn  |   7 --
 11 files changed, 131 insertions(+), 10 deletions(-)
 rename src/browser/base/content/{zen-scripts.inc.xhtml => zen-assets.inc.xhtml} (71%)
 rename src/browser/base/content/{zen-scripts.jar.inc.mn => zen-assets.jar.inc.mn} (67%)
 create mode 100644 src/browser/base/content/zen-styles/zen-tabs.css
 create mode 100644 src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
 create mode 100644 src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
 create mode 100644 src/browser/base/content/zen-styles/zen-theme.css

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 017cc5f78..b9dd02ba9 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -63,6 +63,7 @@ pref('zen.welcomeScreen.seen', false);
 pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
 pref('zen.theme.accent-color', "#aac7ff");
+pref('zen.theme.border-radius', 10); // In pixels
 pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
 pref('zen.theme.floating-urlbar', false);
diff --git a/src/browser/base/content/browser-xhtml.patch b/src/browser/base/content/browser-xhtml.patch
index 1c6aa3fb6..9cca1cc95 100644
--- a/src/browser/base/content/browser-xhtml.patch
+++ b/src/browser/base/content/browser-xhtml.patch
@@ -7,7 +7,7 @@ index 3063370347db9e2812ad30205e585c849e44c91e..be74d9e624b8220cb9bd009bae31fb51
      gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true });
  </script>
 +#include zen-locales.inc.xhtml
-+#include zen-scripts.inc.xhtml
++#include zen-assets.inc.xhtml
  </head>
  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  # All sets except for popupsets (commands, keys, and stringbundles)
diff --git a/src/browser/base/content/zen-scripts.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml
similarity index 71%
rename from src/browser/base/content/zen-scripts.inc.xhtml
rename to src/browser/base/content/zen-assets.inc.xhtml
index c8dd76038..faa258ac5 100644
--- a/src/browser/base/content/zen-scripts.inc.xhtml
+++ b/src/browser/base/content/zen-assets.inc.xhtml
@@ -1,3 +1,8 @@
+<!-- Styles used all over the browser -->
+<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-theme.css" />
+<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-tabs.css" />
+
+<!-- Scripts used all over the browser -->
 <script type="text/javascript">
 window.addEventListener("DOMContentLoaded", async () => {
   Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs");
diff --git a/src/browser/base/content/zen-scripts.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn
similarity index 67%
rename from src/browser/base/content/zen-scripts.jar.inc.mn
rename to src/browser/base/content/zen-assets.jar.inc.mn
index c3a56e835..499d070eb 100644
--- a/src/browser/base/content/zen-scripts.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -1,3 +1,5 @@
+
+
         content/browser/zenThemeModifier.js                     (content/zenThemeModifier.js)
         content/browser/ZenUIManager.mjs                        (content/ZenUIManager.mjs)
         content/browser/zen-components/ZenViewSplitter.mjs      (content/zen-components/src/ZenViewSplitter.mjs)
@@ -6,4 +8,8 @@
         content/browser/zen-components/ZenProfileDialogUI.mjs   (content/zen-components/src/ZenProfileDialogUI.mjs)
         content/browser/zen-components/ZenKeyboardShortcuts.mjs (content/zen-components/src/ZenKeyboardShortcuts.mjs)
         content/browser/zen-components/ZenThemeBuilder.mjs      (content/zen-components/src/ZenThemeBuilder.mjs)
-        
\ No newline at end of file
+        
+        content/browser/zen-styles/zen-theme.css                (content/zen-styles/zen-theme.css)
+        content/browser/zen-styles/zen-tabs.css                 (content/zen-styles/zen-tabs.css)
+        content/browser/zen-styles/zen-tabs/horizontal.css      (content/zen-styles/zen-tabs/horizontal.css)
+        content/browser/zen-styles/zen-tabs/vertical.css        (content/zen-styles/zen-tabs/vertical.css)
\ No newline at end of file
diff --git a/src/browser/base/content/zen-styles/zen-tabs.css b/src/browser/base/content/zen-styles/zen-tabs.css
new file mode 100644
index 000000000..5906e8130
--- /dev/null
+++ b/src/browser/base/content/zen-styles/zen-tabs.css
@@ -0,0 +1,4 @@
+
+/* Styles for both vertical and horizontal tabs */
+@import url("chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css");
+@import url("chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css");
diff --git a/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
new file mode 100644
index 000000000..a51a102b5
--- /dev/null
+++ b/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
@@ -0,0 +1,2 @@
+
+/* TODO: */
\ No newline at end of file
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
new file mode 100644
index 000000000..b10d8a880
--- /dev/null
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -0,0 +1,102 @@
+
+/* Here, we contain all the theme related variables, for example theme
+ * colors, border radius, etc.
+ * We have `--zen-border-radius` and `--zen-primary-color` as variables.
+ */
+
+:host(:is(.anonymous-content-host, notification-message)),
+:root,
+.zenLooksAndFeelColorOption {
+
+  /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
+  * in the preferences page.
+  */
+
+  /** Zen colors are generated automatically from the primary color */
+  --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
+  --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, white 60%);
+  --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 7%, white 93%);
+
+  --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
+  --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
+  --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 90%, black 10%);
+
+  --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, white 80%);
+
+  --zen-dialog-background: var(--zen-colors-tertiary);
+  --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, #f1f1f1 92%);
+
+  --in-content-primary-button-background: light-dark(
+    color-mix(in srgb, var(--zen-primary-color) 35%, black 65%),
+    color-mix(in srgb, var(--zen-primary-color) 35%, white 65%)
+  );          
+  --in-content-primary-button-background-hover: light-dark(
+    color-mix(in srgb, var(--zen-primary-color) 40%, black 60%),
+    color-mix(in srgb, var(--zen-primary-color) 40%, white 60%)
+  );
+  --in-content-primary-button-background-active: var(--zen-colors-hover-bg);
+  --in-content-primary-button-text-color: light-dark(white, black);
+  --in-content-primary-button-border-color: transparent;
+  --in-content-primary-button-border-hover: transparent;
+  --in-content-primary-button-border-active: var(--zen-colors-border);
+  --zen-characteristic-gradient: linear-gradient(135deg, #fac89a 0%, #e290ff 100%);
+
+  --in-content-accent-color: var(--zen-colors-primary);
+
+  /* This is like the secondary button */
+  --in-content-button-background: light-dark(
+    color-mix(in srgb, var(--zen-primary-color) 20%, transparent 80%),
+    color-mix(in srgb, var(--zen-primary-color) 10%, transparent 90%)
+  );
+  --in-content-button-background-hover: light-dark(
+    color-mix(in srgb, var(--zen-primary-color) 25%, transparent 75%),
+    color-mix(in srgb, var(--zen-primary-color) 15%, transparent 85%)
+  );
+  --button-bgcolor: var(--in-content-button-background);
+  --button-hover-bgcolor: var(--in-content-button-background-hover);   
+  --zen-secondary-btn-color: var(--zen-colors-primary-foreground);
+  --focus-outline-color: var(--button-bgcolor);
+  --in-content-button-text-color: var(--zen-secondary-btn-color);
+
+  --toolbarbutton-icon-fill-attention: var(--zen-primary-color);
+
+  --button-primary-bgcolor: var(--in-content-primary-button-background);
+  --button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover);
+  --button-primary-active-bgcolor: var(--in-content-primary-button-background-active);
+  --button-primary-color: var(--in-content-primary-button-text-color);
+
+  --in-content-page-background: var(--zen-colors-tertiary);
+  --zen-in-content-dialog-background: var(--zen-colors-tertiary);
+
+  --zen-button-border-radius: 7px;
+  --zen-button-padding: .6rem 1.2rem;
+
+  /* Other colors */
+  --urlbar-box-bgcolor: var(--zen-urlbar-background);
+  --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor);
+  --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
+
+  /* Constants */
+  --zen-element-separation: 1rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :host(:is(.anonymous-content-host, notification-message)),
+  :root,
+  .zenLooksAndFeelColorOption {
+    --zen-in-content-dialog-background: rgb(28, 28, 32);
+
+    --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
+    --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, black 60%);
+    --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 15%, black 85%);
+  
+    --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, black 10%);
+    --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
+  
+    --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, black 80%);
+    --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%);
+  
+    --zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 10%, black 90%);
+    --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, black 92%); 
+  }
+}
\ No newline at end of file
diff --git a/src/browser/base/content/zenThemeModifier.js b/src/browser/base/content/zenThemeModifier.js
index 7acf89b3c..f09c89fd6 100644
--- a/src/browser/base/content/zenThemeModifier.js
+++ b/src/browser/base/content/zenThemeModifier.js
@@ -12,6 +12,7 @@
  */
 
 const kZenThemeAccentColorPref = "zen.theme.accent-color";
+const kZenThemeBorderRadiusPref = "zen.theme.border-radius";
 
 /**
 * ZenThemeModifier controls the application of theme data to the browser,
@@ -39,6 +40,7 @@ var ZenThemeModifier = {
 
   listenForEvents() {
     Services.prefs.addObserver(kZenThemeAccentColorPref, this.handleEvent.bind(this));
+    Services.prefs.addObserver(kZenThemeBorderRadiusPref, this.handleEvent.bind(this));
   },
 
   handleEvent(event) {
@@ -51,6 +53,12 @@ var ZenThemeModifier = {
     */
   updateAllThemeBasics() {
     this.updateAccentColor();
+    this.updateBorderRadius();
+  },
+
+  updateBorderRadius() {
+    const borderRadius = Services.prefs.getIntPref(kZenThemeBorderRadiusPref, 4);
+    document.documentElement.style.setProperty("--zen-border-radius", borderRadius + "px");
   },
 
   /**
diff --git a/src/browser/base/jar-mn.patch b/src/browser/base/jar-mn.patch
index 64c789b58..c2e577e9c 100644
--- a/src/browser/base/jar-mn.patch
+++ b/src/browser/base/jar-mn.patch
@@ -8,5 +8,5 @@ index e3eb0e6e5f30152905456a07cfe532fe173375fb..9d356d62421d779f9e16f6761cce9782
  % override chrome://global/locale/appstrings.properties chrome://browser/locale/appstrings.properties
 +
 +#include content/zen-avatars/jar.inc.mn
-+#include content/zen-scripts.jar.inc.mn
++#include content/zen-assets.jar.inc.mn
 \ No newline at end of file
diff --git a/src/browser/themes/shared/zen-sources.inc.mn b/src/browser/themes/shared/zen-sources.inc.mn
index 70fceb57a..bfead430e 100644
--- a/src/browser/themes/shared/zen-sources.inc.mn
+++ b/src/browser/themes/shared/zen-sources.inc.mn
@@ -1,8 +1 @@
-  skin/classic/browser/zen-browser-shared.css                      (../shared/zen-browser-shared.css)
-  skin/classic/browser/zen-sidebar.css                             (../shared/zen-sidebar.css)
-  skin/classic/browser/zen-panel-ui.css                            (../shared/zen-panel-ui.css)
-  skin/classic/browser/zen-sidebar-panels.css                      (../shared/zen-sidebar-panels.css)
-  skin/classic/browser/preferences/zen-preferences.css             (../shared/preferences/zen-preferences.css)
-  skin/classic/browser/zen-decks.css                               (../shared/zen-decks.css)
-
 #include zen-icons/jar.inc.mn
\ No newline at end of file