Refactor ZenGradientGenerator.mjs to improve color handling and workspace integration

src/ZenGradientGenerator.mjs

@@ -21,6 +21,14 @@
       ChromeUtils.defineLazyGetter(this, 'customColorInput', () => document.getElementById('PanelUI-zen-gradient-generator-custom-input'));
       ChromeUtils.defineLazyGetter(this, 'customColorList', () => document.getElementById('PanelUI-zen-gradient-generator-custom-list'));    
 
+      XPCOMUtils.defineLazyPreferenceGetter(
+        this,
+        'allowWorkspaceColors',
+        'zen.theme.color-prefs.use-workspace-colors',
+        true,
+        this.onDarkModeChange.bind(this)
+      )
+
       this.initRotation();
       this.initCanvas();
 
@@ -375,6 +383,67 @@
       wrapper.style.setProperty('--zen-grainy-background-opacity', texture);
     }
 
+    hexToRgb(hex) {
+      if (hex.startsWith('#')) {
+        hex = hex.substring(1);
+      }
+      if (hex.length === 3) {
+        hex = hex.split('').map(char => char + char).join('');
+      }
+      return [
+        parseInt(hex.substring(0, 2), 16),
+        parseInt(hex.substring(2, 4), 16),
+        parseInt(hex.substring(4, 6), 16),
+      ];
+    }
+
+    pSBC=(p,c0,c1,l)=>{
+        let r,g,b,P,f,t,h,i=parseInt,m=Math.round,a=typeof(c1)=="string";
+        if(typeof(p)!="number"||p<-1||p>1||typeof(c0)!="string"||(c0[0]!='r'&&c0[0]!='#')||(c1&&!a))return null;
+        if(!this.pSBCr)this.pSBCr=(d)=>{
+          let n=d.length,x={};
+          if(n>9){
+            [r,g,b,a]=d=d.split(","),n=d.length;
+            if(n<3||n>4)return null;
+            x.r=i(r[3]=="a"?r.slice(5):r.slice(4)),x.g=i(g),x.b=i(b),x.a=a?parseFloat(a):-1
+          }else{
+            if(n==8||n==6||n<4)return null;
+            if(n<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(n>4?d[4]+d[4]:"");
+            d=i(d.slice(1),16);
+            if(n==9||n==5)x.r=d>>24&255,x.g=d>>16&255,x.b=d>>8&255,x.a=m((d&255)/0.255)/1000;
+            else x.r=d>>16,x.g=d>>8&255,x.b=d&255,x.a=-1
+          }return x};
+        h=c0.length>9,h=a?c1.length>9?true:c1=="c"?!h:false:h,f=this.pSBCr(c0),P=p<0,t=c1&&c1!="c"?this.pSBCr(c1):P?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},p=P?p*-1:p,P=1-p;
+        if(!f||!t)return null;
+        if(l)r=m(P*f.r+p*t.r),g=m(P*f.g+p*t.g),b=m(P*f.b+p*t.b);
+        else r=m((P*f.r**2+p*t.r**2)**0.5),g=m((P*f.g**2+p*t.g**2)**0.5),b=m((P*f.b**2+p*t.b**2)**0.5);
+        a=f.a,t=t.a,f=a>=0||t>=0,a=f?a<0?t:t<0?a:a*P+t*p:0;
+        if(h)return"rgb"+(f?"a(":"(")+r+","+g+","+b+(f?","+m(a*1000)/1000:"")+")";
+        else return"#"+(4294967296+r*16777216+g*65536+b*256+(f?m(a*255):0)).toString(16).slice(1,f?undefined:-2)
+    }
+
+    getMostDominantColor(allColors) {
+      const colors = this.themedColors(allColors);
+      const themedColors = colors.filter(color => !color.isCustom);
+      if (themedColors.length === 0 || !this.allowWorkspaceColors) {
+        return null;
+      }
+      // get the most dominant color in the gradient
+      let dominantColor = themedColors[0].c;
+      let dominantColorCount = 0;
+      for (const color of themedColors) {
+        const count = themedColors.filter(c => c.c[0] === color.c[0] && c.c[1] === color.c[1] && c.c[2] === color.c[2]).length;
+        if (count > dominantColorCount) {
+          dominantColorCount = count;
+          dominantColor = color.c;
+        }
+      }
+      const result = this.pSBC(
+        this.isDarkMode ? 0.7 : -0.7, 
+        `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`);
+      return result?.match(/\d+/g).map(Number);
+    }
+
     async onWorkspaceChange(workspace, skipUpdate = false, theme = null) {
       const uuid = workspace.uuid;
       // Use theme from workspace object or passed theme
@@ -438,7 +507,13 @@
           }
         }
 
-        browser.document.body.style.setProperty('--zen-main-browser-background', gradient);
+        browser.document.documentElement.style.setProperty('--zen-main-browser-background', gradient);
+
+        const dominantColor = this.getMostDominantColor(workspaceTheme.gradientColors);
+        if (dominantColor) {
+          browser.document.documentElement.style.setProperty('--zen-primary-color', `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`);
+        }
+
         if (!skipUpdate) {
           browser.gZenThemePicker.recalculateDots(workspaceTheme.gradientColors);
         }