Refactor zen gradient generator: update theme picker initialization and event handling, improve CSS styles, and clean up unused code.

src/browser/base/content/zen-popupset.inc.xhtml

@@ -82,7 +82,7 @@
 </panel>
 </html:template>
 
-<panel flip="side" type="arrow" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left" onpopuphidden="gZenThemePicker.handlePanelClose();">
+<panel flip="side" type="arrow" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left" onpopuphidden="gZenThemePicker.handlePanelClose();" onpopupshowing="gZenThemePicker.handlePanelOpen();">
   <panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
     <panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
       <hbox class="zen-theme-picker-gradient">
@@ -97,9 +97,7 @@
         </div>
       </hbox>
       <hbox id="PanelUI-zen-gradient-generator-controls">
-        <vbox id="PanelUI-zen-gradient-generator-options">
+        <hbox id="PanelUI-zen-gradient-colors-wrapper">
-        </vbox>
-        <vbox id="PanelUI-zen-gradient-colors-wrapper">
           <vbox>
             <label data-l10n-id="zen-panel-ui-gradient-generator-opacity-text"></label>
             <html:input type="range" min="0" max="1" value="0.5" step="0.05" oninput="gZenThemePicker.onOpacityChange(event);" id="PanelUI-zen-gradient-generator-opacity" />
@@ -108,7 +106,7 @@
             <label data-l10n-id="zen-panel-ui-gradient-generator-texture-text"></label>
             <html:input type="range" min="0" max="1" value="0.5" step="0.05" oninput="gZenThemePicker.onTextureChange(event);" id="PanelUI-zen-gradient-generator-texture" />
           </vbox>
-        </vbox>
+        </hbox>
       </hbox>
       <vbox id="PanelUI-zen-gradient-generator-custom-colors">
         <vbox id="zen-theme-picker-color">

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

@@ -62,13 +62,6 @@
   gap: 10px;
 }
 
-#PanelUI-zen-gradient-generator-options {
-  align-items: center;
-  margin: auto;
-  height: 100%;
-  justify-content: center;
-}
-
 #PanelUI-zen-gradient-generator-custom-list {
   margin-top: 15px;
 
@@ -180,26 +173,31 @@
     position: absolute;
     top: 0;
     left: 0;
-    margin: var(--panel-padding);
+    width: 100%;
-    width: calc(100% - var(--panel-padding) * 2);
+    height: 100%;
-    height: calc(100% - var(--panel-padding) * 2);
     opacity: 0.1;
   }
 
   & .zen-theme-picker-dot {
     position: absolute;
     z-index: 2;
-    width: 28px;
+    width: 22px;
-    height: 28px;
+    height: 22px;
     border-radius: 50%;
     background: var(--zen-theme-picker-dot-color);
     box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
     cursor: pointer;
-    border: 3px solid #fff;
+    border: 2px solid #fff;
     animation: zen-theme-picker-dot-animation 0.5s;
     transition: transform 0.2s;
     transform: translate(-50%, -50%);
 
+    &.primary {
+      width: 26px;
+      height: 26px;
+      border-width: 3px;
+    }
+
     &[dragging='true'] {
       transform: scale(1.2) translate(-50%, -50%) !important;
     }
@@ -207,7 +205,6 @@
 }
 
 #PanelUI-zen-gradient-generator-color-actions {
-  color-scheme: dark; /* Always use light colors */
   display: flex;
   position: absolute;
   bottom: 20px;

src/browser/base/zen-components/ZenGradientGenerator.mjs

@@ -90,7 +90,6 @@
 
       // Call the rest of the initialization
       this.initContextMenu();
-      this.initThemePicker();
 
       this._hasInitialized = true;
       this.onDarkModeChange(null);
@@ -110,11 +109,27 @@
 
     initThemePicker() {
       const themePicker = this.panel.querySelector('.zen-theme-picker-gradient');
+      this._onDotMouseMove = this.onDotMouseMove.bind(this);
+      this._onDotMouseUp = this.onDotMouseUp.bind(this);
+      this._onDotMouseDown = this.onDotMouseDown.bind(this);
+      this._onThemePickerClick = this.onThemePickerClick.bind(this);
       themePicker.style.setProperty('--zen-theme-picker-gradient-image', `url(${ZenThemePicker.GRADIENT_DISPLAY_URL})`);
-      themePicker.addEventListener('mousemove', this.onDotMouseMove.bind(this));
+      document.addEventListener('mousemove', this._onDotMouseMove);
-      themePicker.addEventListener('mouseup', this.onDotMouseUp.bind(this));
+      document.addEventListener('mouseup', this._onDotMouseUp);
-      themePicker.addEventListener('mousedown', this.onDotMouseDown.bind(this));
+      themePicker.addEventListener('mousedown', this._onDotMouseDown);
-      themePicker.addEventListener('click', this.onThemePickerClick.bind(this));
+      themePicker.addEventListener('click', this._onThemePickerClick);
+    }
+
+    uninitThemePicker() {
+      const themePicker = this.panel.querySelector('.zen-theme-picker-gradient');
+      document.removeEventListener('mousemove', this._onDotMouseMove);
+      document.removeEventListener('mouseup', this._onDotMouseUp);
+      themePicker.removeEventListener('mousedown', this._onDotMouseDown);
+      themePicker.removeEventListener('click', this._onThemePickerClick);
+      this._onDotMouseMove = null;
+      this._onDotMouseUp = null;
+      this._onDotMouseDown = null;
+      this._onThemePickerClick = null;
     }
 
     calculateInitialPosition(color) {
@@ -155,7 +170,9 @@
     createDot(color, fromWorkspace = false) {
       const [r, g, b] = color.c;
       const dot = document.createElement('div');
-      dot.classList.add('zen-theme-picker-dot');
+      if (color.isPrimary) {
+        dot.classList.add('primary');
+      }
       if (color.isCustom) {
         if (!color.c) {
           return;
@@ -167,7 +184,6 @@
         const { x, y } = this.calculateInitialPosition(color);
         const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
 
-        const dot = document.createElement('div');
         dot.classList.add('zen-theme-picker-dot');
 
         dot.style.left = `${x * 100}%`;
@@ -239,8 +255,9 @@
 
       let id = this.dots.length;
 
-      if (primary === true) {
+      if (primary) {
         id = 0;
+        dot.classList.add('primary');
 
         const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
         if (existingPrimaryDot) {
@@ -555,12 +572,12 @@
     }
 
     onDotMouseDown(event) {
-      event.preventDefault();
       if (event.button === 2) {
         return;
       }
       const draggedDot = this.dots.find((dot) => dot.Element === event.target);
       if (draggedDot) {
+        event.preventDefault();
         this.dragging = true;
         this.draggedDot = event.target;
         this.draggedDot.classList.add('dragging');
@@ -689,7 +706,7 @@
 
     getGradient(colors, forToolbar = false) {
       const themedColors = this.themedColors(colors);
-      this.useAlgo = themedColors[0].algorithm;
+      this.useAlgo = themedColors[0]?.algorithm ?? '';
 
       if (themedColors.length === 0) {
         return forToolbar ? 'var(--zen-themed-toolbar-bg)' : 'var(--zen-themed-toolbar-bg-transparent)';
@@ -889,7 +906,7 @@
 
     fixTheme(theme) {
       // add a primary color if there isn't one
-      if (!theme.gradientColors.find((color) => color.isPrimary)) {
+      if (!theme.gradientColors.find((color) => color.isPrimary) && theme.gradientColors.length > 0) {
         theme.gradientColors[(theme.gradientColors.length / 2) | 0].isPrimary = true;
       }
       return theme;
@@ -934,6 +951,9 @@
       if (primaryColor) {
         return primaryColor.c;
       }
+      if (colors.length === 0) {
+        return this.hexToRgb(this.getNativeAccentColor());
+      }
       // Get the middle color
       return colors[Math.floor(colors.length / 2)].c;
     }
@@ -975,6 +995,11 @@
       if (this.updated) {
         await this.updateCurrentWorkspace(false);
       }
+      this.uninitThemePicker();
+    }
+
+    handlePanelOpen() {
+      this.initThemePicker();
     }
   }