ZenBrowserMirrors/components
1
0
Fork 0
mirror of https://github.com/zen-browser/components.git synced 2025-07-07 22:39:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
Fix: Update gradient generator logic and add theme properties to sync engine
This commit is contained in:
mr. m 🤙 2024-10-26 20:34:34 +03:00 • committed by GitHub
commit 2657049e86
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 164 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/ZenGradientGenerator.mjs
View file

@ -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);
const appWrapepr = document.getElementById('zen-main-app-wrapper');
// Use theme from workspace object or passed theme
const workspaceTheme = theme || workspace.theme;
const appWrapper = document.getElementById('zen-main-app-wrapper');
if (!skipUpdate) {
appWrapepr.removeAttribute('animating');
appWrapepr.setAttribute('animating', 'true');
document.body.style.setProperty('--zen-main-browser-background-old', document.body.style.getPropertyValue('--zen-main-browser-background'));
appWrapper.removeAttribute('animating');
appWrapper.setAttribute('animating', 'true');
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.currentTexture = theme.texture || 0;
this.currentOpacity = workspaceTheme.opacity || 0.5;
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);
for (const dot of theme.gradientColors) {
const gradient = this.getGradient(workspaceTheme.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();
await ZenWorkspacesStorage.saveWorkspaceTheme(currentWorkspace.uuid, gradient);
this.onWorkspaceChange(currentWorkspace, true);
let currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
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);
}
}
}

21
src/ZenWorkspaces.mjs
View file

@ -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));
}

93
src/ZenWorkspacesStorage.mjs
View file

@ -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) {
await PlacesUtils.withConnectionWrapper('ZenWorkspacesStorage.saveWorkspaceTheme', async (db) => {
async saveWorkspaceTheme(uuid, theme, notifyObservers = true) {
const changedUUIDs = [uuid];
await PlacesUtils.withConnectionWrapper('saveWorkspaceTheme', async (db) => {
await db.execute(`
INSERT OR REPLACE INTO zen_workspace_themes (uuid, json)
VALUES (:uuid, :json)
`, { uuid, json: JSON.stringify(theme) });
});
},
UPDATE zen_workspaces
SET
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) {
const db = await PlacesUtils.promiseDBConnection();
const result = await db.executeCached(`
SELECT json FROM zen_workspace_themes WHERE uuid = :uuid
`, { uuid });
return result.length ? JSON.parse(result[0].getResultByName('json')) : null;
await this.markChanged(uuid);
await this.updateLastChangeTimestamp(db);
});
if (notifyObservers) {
this._notifyWorkspacesChanged("zen-workspace-updated", changedUUIDs);
}
},
async getChangedIDs() {

49
src/ZenWorkspacesSync.mjs
View file

@ -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;