Merge pull request #66 from kristijanribaric/fix/update-gradient-generator-logic

Fix: Update gradient generator logic and add theme properties to sync engine

src/ZenGradientGenerator.mjs

@@ -333,7 +333,7 @@
       }
       return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, var(--zen-themed-toolbar-bg) ${(1 - this.currentOpacity) * 100}%)`;
     }
-      
+
 
     getGradient(colors) {
       const themedColors = this.themedColors(colors);
@@ -350,7 +350,7 @@
         opacity,
         rotation,
         texture,
-      }
+      };
     }
 
     updateNoise(texture) {
@@ -358,22 +358,27 @@
       wrapper.style.setProperty('--zen-grainy-background-opacity', texture);
     }
 
-    async onWorkspaceChange(workspace, skipUpdate = false) {
+    async onWorkspaceChange(workspace, skipUpdate = false, theme = null) {
       const uuid = workspace.uuid;
-      const theme = await ZenWorkspacesStorage.getWorkspaceTheme(uuid);
+      // Use theme from workspace object or passed theme
-      const appWrapepr = document.getElementById('zen-main-app-wrapper');
+      const workspaceTheme = theme || workspace.theme;
+
+      const appWrapper = document.getElementById('zen-main-app-wrapper');
       if (!skipUpdate) {
-        appWrapepr.removeAttribute('animating');
+        appWrapper.removeAttribute('animating');
-        appWrapepr.setAttribute('animating', 'true');
+        appWrapper.setAttribute('animating', 'true');
-        document.body.style.setProperty('--zen-main-browser-background-old', document.body.style.getPropertyValue('--zen-main-browser-background'));
+        document.body.style.setProperty('--zen-main-browser-background-old',
+            document.body.style.getPropertyValue('--zen-main-browser-background')
+        );
         window.requestAnimationFrame(() => {
           setTimeout(() => {
-            appWrapepr.removeAttribute('animating');
+            appWrapper.removeAttribute('animating');
           }, 600);
         });
       }
+
       this.customColorList.innerHTML = '';
-      if (!theme || theme.type !== 'gradient') {
+      if (!workspaceTheme || workspaceTheme.type !== 'gradient') {
         document.body.style.removeProperty('--zen-main-browser-background');
         this.updateNoise(0);
         if (!skipUpdate) {
@@ -383,22 +388,27 @@
         }
         return;
       }
-      this.currentOpacity = theme.opacity || 0.5;
+
-      this.currentRotation = theme.rotation || 45;
+      this.currentOpacity = workspaceTheme.opacity || 0.5;
-      this.currentTexture = theme.texture || 0;
+      this.currentRotation = workspaceTheme.rotation || 45;
+      this.currentTexture = workspaceTheme.texture || 0;
+
       document.getElementById('PanelUI-zen-gradient-generator-opacity').value = this.currentOpacity;
       document.getElementById('PanelUI-zen-gradient-generator-texture').value = this.currentTexture;
       this.setRotationInput(this.currentRotation);
-      const gradient = this.getGradient(theme.gradientColors);
+
-      this.updateNoise(theme.texture);
+      const gradient = this.getGradient(workspaceTheme.gradientColors);
-      for (const dot of theme.gradientColors) {
+      this.updateNoise(workspaceTheme.texture);
+
+      for (const dot of workspaceTheme.gradientColors) {
         if (dot.isCustom) {
           this.addColorToCustomList(dot.c);
         }
       }
+
       document.body.style.setProperty('--zen-main-browser-background', gradient);
       if (!skipUpdate) {
-        this.recalculateDots(theme.gradientColors);
+        this.recalculateDots(workspaceTheme.gradientColors);
       }
     }
 
@@ -426,7 +436,8 @@
       }
     }
 
-    async updateCurrentWorkspace() {
+    async updateCurrentWorkspace(skipSave = true) {
+      this.updated = skipSave;
       const dots = this.panel.querySelectorAll('.zen-theme-picker-dot');
       const colors = Array.from(dots).map(dot => {
         const color = dot.style.getPropertyValue('--zen-theme-picker-dot-color');
@@ -437,9 +448,22 @@
         return {c: isCustom ? color : color.match(/\d+/g).map(Number), isCustom};
       });
       const gradient = this.getTheme(colors, this.currentOpacity, this.currentRotation, this.currentTexture);
-      const currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
+      let currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
-      await ZenWorkspacesStorage.saveWorkspaceTheme(currentWorkspace.uuid, gradient);
+
-      this.onWorkspaceChange(currentWorkspace, true);
+      if(!skipSave) {
+        await ZenWorkspacesStorage.saveWorkspaceTheme(currentWorkspace.uuid, gradient);
+        await ZenWorkspaces._propagateWorkspaceData();
+        currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
+      }
+
+      await this.onWorkspaceChange(currentWorkspace, true, skipSave ? gradient : null);
+    }
+
+    async handlePanelClose() {
+      if(this.updated) {
+        await this.updateCurrentWorkspace(false);
+      }
+
     }
   }
 

src/ZenWorkspaces.mjs

@@ -64,7 +64,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
           !this._workspaceCache.lastChangeTimestamp ||
           lastChangeTimestamp > this._workspaceCache.lastChangeTimestamp
         ) {
-          this._workspaceCache = null;
           await this._propagateWorkspaceData();
         }
       } catch (error) {
@@ -236,7 +235,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   async saveWorkspace(workspaceData) {
     await ZenWorkspacesStorage.saveWorkspace(workspaceData);
-    this._workspaceCache = null;
     await this._propagateWorkspaceData();
     await this._updateWorkspacesChangeContextMenu();
   }
@@ -248,7 +246,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this._deleteAllTabsInWorkspace(windowID);
     delete this._lastSelectedWorkspaceTabs[windowID];
     await ZenWorkspacesStorage.removeWorkspace(windowID);
-    this._workspaceCache = null;
     await this._propagateWorkspaceData();
     await this._updateWorkspacesChangeContextMenu();
   }
@@ -332,7 +329,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
   }
 
-  async _propagateWorkspaceData({ ignoreStrip = false } = {}) {
+  async _propagateWorkspaceData({ ignoreStrip = false, clearCache = true } = {}) {
     await this.foreachWindowAsActive(async (browser) => {
       let workspaceList = browser.document.getElementById('PanelUI-zen-workspaces-list');
       const createWorkspaceElement = (workspace) => {
@@ -407,7 +404,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
               const targetWorkspaceId = element.getAttribute('zen-workspace-id');
               if (draggedWorkspaceId !== targetWorkspaceId) {
                 await this.moveWorkspace(draggedWorkspaceId, targetWorkspaceId);
-                await this._propagateWorkspaceData();
               }
               if (this.draggedElement) {
                 this.draggedElement.classList.remove('dragging');
@@ -522,7 +518,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
               if (this.isReorderModeOn(browser)) {
                 const draggedWorkspaceId = event.dataTransfer.getData('text/plain');
                 await this.moveWorkspaceToEnd(draggedWorkspaceId);
-                await this._propagateWorkspaceData();
 
                 if (this.draggedElement) {
                   this.draggedElement.classList.remove('dragging');
@@ -535,7 +530,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         return element;
       };
 
-      browser.ZenWorkspaces._workspaceCache = null;
+      if(clearCache) {
+        browser.ZenWorkspaces._workspaceCache = null;
+      }
       let workspaces = await browser.ZenWorkspaces._workspaces();
       workspaceList.innerHTML = '';
       workspaceList.parentNode.style.display = 'flex';
@@ -574,6 +571,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     workspaces.push(draggedWorkspace);
 
     await ZenWorkspacesStorage.updateWorkspacePositions(workspaces);
+    await this._propagateWorkspaceData();
   }
 
   isReorderModeOn(browser) {
@@ -611,6 +609,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     workspaces.splice(targetIndex, 0, draggedWorkspace);
 
     await ZenWorkspacesStorage.updateWorkspacePositions(workspaces);
+    await this._propagateWorkspaceData();
   }
 
   async openWorkspacesDialog(event) {
@@ -621,6 +620,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     let panel = document.getElementById('PanelUI-zen-workspaces');
     await this._propagateWorkspaceData({
       ignoreStrip: true,
+      clearCache: false
     });
     PanelMultiView.openPopup(panel, target, {
       position: 'bottomright topright',
@@ -814,7 +814,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     let icon = document.querySelector('#PanelUI-zen-workspaces-icon-picker-wrapper [selected]');
     icon?.removeAttribute('selected');
     await this.createAndSaveWorkspace(workspaceName, false, icon?.label);
-    await this._propagateWorkspaceData();
     this.goToPreviousSubView();
   }
 
@@ -832,7 +831,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     workspaceData.name = workspaceName;
     workspaceData.icon = icon?.label;
     await this.saveWorkspace(workspaceData);
-    await this._propagateWorkspaceData();
     this.goToPreviousSubView();
   }
 
@@ -916,7 +914,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     document.getElementById('tabbrowser-tabs')._positionPinnedTabs();
 
-    await this._propagateWorkspaceData();
+    await this._propagateWorkspaceData({clearCache: false});
     this._inChangingWorkspace = false;
 
     for (let listener of this._changeListeners ?? []) {
@@ -1045,7 +1043,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     let userContextId = parseInt(event.target.getAttribute('data-usercontextid'));
     workspace.containerTabId = userContextId;
     await this.saveWorkspace(workspace);
-    await this._propagateWorkspaceData();
   }
 
   onContextMenuClose() {
@@ -1060,7 +1057,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   async setDefaultWorkspace() {
     await ZenWorkspacesStorage.setDefaultWorkspace(this._contextMenuId);
-    this._workspaceCache = null;
     await this._propagateWorkspaceData();
   }
 
@@ -1118,7 +1114,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         delete this._lastSelectedWorkspaceTabs[previousWorkspaceID];
       }
     }
-    this._workspaceCache = null;
     const workspaces = await this._workspaces();
     await this.changeWorkspace(workspaces.workspaces.find((workspace) => workspace.uuid === workspaceID));
   }

src/ZenWorkspacesStorage.mjs

@@ -21,6 +21,26 @@ var ZenWorkspacesStorage = {
         )
       `);
 
+      // Add new columns if they don't exist
+      // SQLite doesn't have a direct "ADD COLUMN IF NOT EXISTS" syntax,
+      // so we need to check if the columns exist first
+      const columns = await db.execute(`PRAGMA table_info(zen_workspaces)`);
+      const columnNames = columns.map(row => row.getResultByName('name'));
+
+      // Helper function to add column if it doesn't exist
+      const addColumnIfNotExists = async (columnName, definition) => {
+        if (!columnNames.includes(columnName)) {
+          await db.execute(`ALTER TABLE zen_workspaces ADD COLUMN ${columnName} ${definition}`);
+        }
+      };
+
+      // Add each new column if it doesn't exist
+      await addColumnIfNotExists('theme_type', 'TEXT');
+      await addColumnIfNotExists('theme_colors', 'TEXT');
+      await addColumnIfNotExists('theme_opacity', 'REAL');
+      await addColumnIfNotExists('theme_rotation', 'INTEGER');
+      await addColumnIfNotExists('theme_texture', 'REAL');
+
       // Create an index on the uuid column
       await db.execute(`
         CREATE INDEX IF NOT EXISTS idx_zen_workspaces_uuid ON zen_workspaces(uuid)
@@ -38,14 +58,6 @@ var ZenWorkspacesStorage = {
       await db.execute(`
         CREATE INDEX IF NOT EXISTS idx_zen_workspaces_changes_uuid ON zen_workspaces_changes(uuid)
       `);
-
-      // Create a workspace theme table if it doesn't exist, theme can be null
-      await db.execute(`
-        CREATE TABLE IF NOT EXISTS zen_workspace_themes (
-          uuid TEXT PRIMARY KEY,
-          json TEXT
-        )
-      `);
     });
   },
 
@@ -106,12 +118,14 @@ var ZenWorkspacesStorage = {
         // Insert or replace the workspace
         await db.executeCached(`
           INSERT OR REPLACE INTO zen_workspaces (
-          uuid, name, icon, is_default, container_id, created_at, updated_at, "position"
+          uuid, name, icon, is_default, container_id, created_at, updated_at, "position",
+          theme_type, theme_colors, theme_opacity, theme_rotation, theme_texture
         ) VALUES (
           :uuid, :name, :icon, :is_default, :container_id, 
           COALESCE((SELECT created_at FROM zen_workspaces WHERE uuid = :uuid), :now),
           :now,
-          :position
+          :position,
+          :theme_type, :theme_colors, :theme_opacity, :theme_rotation, :theme_texture
         )
         `, {
           uuid: workspace.uuid,
@@ -120,7 +134,12 @@ var ZenWorkspacesStorage = {
           is_default: workspace.default ? 1 : 0,
           container_id: workspace.containerTabId || null,
           now,
-          position: newPosition
+          position: newPosition,
+          theme_type: workspace.theme?.type || null,
+          theme_colors: workspace.theme ? JSON.stringify(workspace.theme.gradientColors) : null,
+          theme_opacity: workspace.theme?.opacity || null,
+          theme_rotation: workspace.theme?.rotation || null,
+          theme_texture: workspace.theme?.texture || null
         });
 
         // Record the change
@@ -155,6 +174,13 @@ var ZenWorkspacesStorage = {
       default: !!row.getResultByName('is_default'),
       containerTabId: row.getResultByName('container_id'),
       position: row.getResultByName('position'),
+      theme: row.getResultByName('theme_type') ? {
+        type: row.getResultByName('theme_type'),
+        gradientColors: JSON.parse(row.getResultByName('theme_colors')),
+        opacity: row.getResultByName('theme_opacity'),
+        rotation: row.getResultByName('theme_rotation'),
+        texture: row.getResultByName('theme_texture')
+      } : null
     }));
   },
 
@@ -179,10 +205,6 @@ var ZenWorkspacesStorage = {
         timestamp: Math.floor(now / 1000)
       });
 
-      await db.execute(`
-        DELETE FROM zen_workspace_themes WHERE uuid = :uuid
-      `, { uuid });
-
       await this.updateLastChangeTimestamp(db);
     });
 
@@ -251,21 +273,36 @@ var ZenWorkspacesStorage = {
     });
   },
 
-  async saveWorkspaceTheme(uuid, theme) {
+  async saveWorkspaceTheme(uuid, theme, notifyObservers = true) {
-    await PlacesUtils.withConnectionWrapper('ZenWorkspacesStorage.saveWorkspaceTheme', async (db) => {
+    const changedUUIDs = [uuid];
+    await PlacesUtils.withConnectionWrapper('saveWorkspaceTheme', async (db) => {
       await db.execute(`
-        INSERT OR REPLACE INTO zen_workspace_themes (uuid, json)
+        UPDATE zen_workspaces
-        VALUES (:uuid, :json)
+        SET
-      `, { uuid, json: JSON.stringify(theme) });
+          theme_type = :type,
-    });
+          theme_colors = :colors,
-  },
+          theme_opacity = :opacity,
+          theme_rotation = :rotation,
+          theme_texture = :texture,
+          updated_at = :now
+        WHERE uuid = :uuid
+      `, {
+        type: theme.type,
+        colors: JSON.stringify(theme.gradientColors),
+        opacity: theme.opacity,
+        rotation: theme.rotation,
+        texture: theme.texture,
+        now: Date.now(),
+        uuid
+      });
 
-  async getWorkspaceTheme(uuid) {
+      await this.markChanged(uuid);
-    const db = await PlacesUtils.promiseDBConnection();
+      await this.updateLastChangeTimestamp(db);
-    const result = await db.executeCached(`
+    });
-      SELECT json FROM zen_workspace_themes WHERE uuid = :uuid
+
-    `, { uuid });
+    if (notifyObservers) {
-    return result.length ? JSON.parse(result[0].getResultByName('json')) : null;
+      this._notifyWorkspacesChanged("zen-workspace-updated", changedUUIDs);
+    }
   },
 
   async getChangedIDs() {

src/ZenWorkspacesSync.mjs

@@ -20,7 +20,12 @@ Utils.deferGetSet(ZenWorkspaceRecord, "cleartext", [
     "icon",
     "default",
     "containerTabId",
-    "position"
+    "position",
+    "theme_type",
+    "theme_colors",
+    "theme_opacity",
+    "theme_rotation",
+    "theme_texture"
 ]);
 
 // Define ZenWorkspacesStore
@@ -111,6 +116,13 @@ ZenWorkspacesStore.prototype.createRecord = async function (id, collection) {
             record.default = workspace.default;
             record.containerTabId = workspace.containerTabId;
             record.position = workspace.position;
+            if (workspace.theme) {
+                record.theme_type = workspace.theme.type;
+                record.theme_colors = JSON.stringify(workspace.theme.gradientColors);
+                record.theme_opacity = workspace.theme.opacity;
+                record.theme_rotation = workspace.theme.rotation;
+                record.theme_texture = workspace.theme.texture;
+            }
             record.deleted = false;
         } else {
             record.deleted = true;
@@ -136,7 +148,14 @@ ZenWorkspacesStore.prototype.create = async function (record) {
             icon: record.icon,
             default: record.default,
             containerTabId: record.containerTabId,
-            position: record.position
+            position: record.position,
+            theme: record.theme_type ? {
+                type: record.theme_type,
+                gradientColors: JSON.parse(record.theme_colors),
+                opacity: record.theme_opacity,
+                rotation: record.theme_rotation,
+                texture: record.theme_texture
+            } : null
         };
         await ZenWorkspacesStorage.saveWorkspace(workspace,false);
     } catch (error) {
@@ -207,6 +226,30 @@ ZenWorkspacesStore.prototype._validateRecord = function (record) {
     if(record.position != null && typeof record.position !== "number") {
         throw new Error(`Invalid position for workspace ID ${record.id}`);
     }
+
+    // Validate theme properties if they exist
+    if (record.theme_type) {
+        if (typeof record.theme_type !== "string") {
+            throw new Error(`Invalid theme_type for workspace ID ${record.id}`);
+        }
+        if (!record.theme_colors || typeof record.theme_colors !== "string") {
+            throw new Error(`Invalid theme_colors for workspace ID ${record.id}`);
+        }
+        try {
+            JSON.parse(record.theme_colors);
+        } catch (e) {
+            throw new Error(`Invalid theme_colors JSON for workspace ID ${record.id}`);
+        }
+        if (record.theme_opacity != null && typeof record.theme_opacity !== "number") {
+            throw new Error(`Invalid theme_opacity for workspace ID ${record.id}`);
+        }
+        if (record.theme_rotation != null && typeof record.theme_rotation !== "number") {
+            throw new Error(`Invalid theme_rotation for workspace ID ${record.id}`);
+        }
+        if (record.theme_texture != null && typeof record.theme_texture !== "number") {
+            throw new Error(`Invalid theme_texture for workspace ID ${record.id}`);
+        }
+    }
 };
 
 /**
@@ -399,7 +442,7 @@ ZenWorkspacesEngine.prototype.constructor = ZenWorkspacesEngine;
 ZenWorkspacesEngine.prototype._storeObj = ZenWorkspacesStore;
 ZenWorkspacesEngine.prototype._trackerObj = ZenWorkspacesTracker;
 ZenWorkspacesEngine.prototype._recordObj = ZenWorkspaceRecord;
-ZenWorkspacesEngine.prototype.version = 1;
+ZenWorkspacesEngine.prototype.version = 2;
 
 ZenWorkspacesEngine.prototype.syncPriority = 10;
 ZenWorkspacesEngine.prototype.allowSkippedRecord = false;