Add ZenGradientGenerator to zen-assets.jar and zen-styles

This commit adds the ZenGradientGenerator module to the zen-assets.jar and zen-styles directories. The ZenGradientGenerator is responsible for generating gradients used in the Zen theme. This addition will enhance the visual appearance of the theme.

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

@@ -17,6 +17,7 @@
         content/browser/zen-components/ZenThemesImporter.mjs    (content/zen-components/src/ZenThemesImporter.mjs)
         content/browser/zen-components/ZenTabUnloader.mjs       (content/zen-components/src/ZenTabUnloader.mjs)
         content/browser/zen-components/ZenCommonUtils.mjs       (content/zen-components/src/ZenCommonUtils.mjs)
+        content/browser/zen-components/ZenGradientGenerator.mjs (content/zen-components/src/ZenGradientGenerator.mjs)
 
         content/browser/zen-styles/zen-theme.css                (content/zen-styles/zen-theme.css)
         content/browser/zen-styles/zen-buttons.css              (content/zen-styles/zen-buttons.css)
@@ -36,6 +37,7 @@
         content/browser/zen-styles/zen-urlbar.css               (content/zen-styles/zen-urlbar.css)
         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-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)

src/browser/base/content/zen-styles/zen-gradient-generator.css

@@ -0,0 +1,54 @@
+
+.zen-theme-picker-gradient {
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+  background: white;
+
+  & .zen-theme-picker-gradient-container {
+    --zen-gradient-picker-padding: 10px;
+    position: absolute;
+    top: var(--zen-gradient-picker-padding);
+    left: var(--zen-gradient-picker-padding);
+    height: calc(100% - 2 * var(--zen-gradient-picker-padding));
+    width: calc(100% - 2 * var(--zen-gradient-picker-padding));
+    display: flex;
+
+    background: color-mix(in srgb, var(--zen-colors-primary) 70%, transparent 30%);
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+
+    backdrop-filter: blur(20px);
+
+    border: 1px solid var(--zen-colors-border);
+
+    & .zen-theme-picker-gradient-color {
+      &[primary='true'] {
+        width: 30px;
+        height: 30px;
+        border-width: 6px;
+      }
+
+      &:not([primary='true']) {
+        width: 20px;
+        height: 20px;
+        border-width: 4px;
+      }
+
+      border-radius: 50%;
+      border-style: solid;
+      border-color: white;
+      background: var(--zen-chosen-color, black);
+
+      transform: translate(-50%, -50%);
+
+      cursor: move;
+      position: absolute;
+
+      transition: transform 0.2s;
+      &[dragging='true'] {
+        transform: scale(1.2) translate(-50%, -50%);
+      }
+    }
+  }
+}

src/browser/components/preferences/zen-preferences-links.xhtml

@@ -3,5 +3,9 @@
   rel="stylesheet"
   href="chrome://browser/skin/preferences/zen-preferences.css"
 />
+<link
+  rel="stylesheet"
+  href="chrome://browser/content/zen-styles/zen-gradient-generator.css"
+/>
 <script src="chrome://browser/content/zenThemeModifier.js"/>
 <link rel="localization" href="browser/preferences/zen-preferences.ftl"/>

src/browser/components/preferences/zen-settings.js

@@ -444,6 +444,7 @@ var gZenLooksAndFeel = {
     var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this);
     window.matchMedia('(prefers-color-scheme: dark)').addListener(onPreferColorSchemeChange);
     this.onPreferColorSchemeChange();
+    this.themePicker = new ZenThemePicker(document.getElementById('zenLooksAndFeelGradientPickerParent'));
     window.addEventListener('unload', () => {
       window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange);
     });

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -1,4 +1,5 @@
 <script src="chrome://browser/content/zen-components/ZenThemeBuilder.mjs" defer=""/>
+<script src="chrome://browser/content/zen-components/ZenGradientGenerator.mjs" defer=""/>
 <script src="chrome://browser/content/preferences/zen-settings.js"/>
 <html:template id="template-paneZenLooks">
 <hbox id="zenLooksCategory"
@@ -23,6 +24,8 @@
             preference="zen.theme.toolbar-themed"/>
       </box>
 
+      <hbox id="zenLooksAndFeelGradientPickerParent"></hbox>
+
       <html:div id="ZenDarkThemeStyles">
             <html:h2 data-l10n-id="zen-dark-theme-styles-header"/>
             <description class="description-deemphasized" data-l10n-id="zen-dark-theme-styles-description" />