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

Refactor ZenThemePicker class to extend ZenMultiWindowFeature

Browse source
This commit is contained in:
mr. M 2024-10-26 21:23:54 +02:00
parent 2657049e86
commit 9e7b399089
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
2 changed files with 59 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

103
src/ZenGradientGenerator.mjs
View file

@ -1,6 +1,6 @@
{ {
class ZenThemePicker extends ZenDOMOperatedFeature { class ZenThemePicker extends ZenMultiWindowFeature {
static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png'; static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png';
static GRADIENT_DISPLAY_URL = 'chrome://browser/content/zen-images/gradient-display.png'; static GRADIENT_DISPLAY_URL = 'chrome://browser/content/zen-images/gradient-display.png';
static MAX_DOTS = 5; static MAX_DOTS = 5;
@ -8,6 +8,8 @@
currentOpacity = 0.5; currentOpacity = 0.5;
currentRotation = 45; currentRotation = 45;
numberOfDots = 0;
init() { init() {
if (!Services.prefs.getBoolPref('zen.theme.gradient', true) || !ZenWorkspaces.shouldHaveWorkspaces) { if (!Services.prefs.getBoolPref('zen.theme.gradient', true) || !ZenWorkspaces.shouldHaveWorkspaces) {
return; return;
@ -54,6 +56,10 @@
this.image = new Image(); this.image = new Image();
this.image.src = ZenThemePicker.GRADIENT_IMAGE_URL; this.image.src = ZenThemePicker.GRADIENT_IMAGE_URL;
this.canvas = document.createElement('canvas');
this.panel.appendChild(this.canvas);
this.canvasCtx = this.canvas.getContext('2d');
// wait for the image to load // wait for the image to load
this.image.onload = this.onImageLoad.bind(this); this.image.onload = this.onImageLoad.bind(this);
} }
@ -65,11 +71,8 @@
this.image.width *= scale; this.image.width *= scale;
this.image.height *= scale; this.image.height *= scale;
this.canvas = document.createElement('canvas');
this.canvas.width = this.image.width; this.canvas.width = this.image.width;
this.canvas.height = this.image.height; this.canvas.height = this.image.height;
this.panel.appendChild(this.canvas);
this.canvasCtx = this.canvas.getContext('2d');
this.canvasCtx.drawImage(this.image, 0, 0); this.canvasCtx.drawImage(this.image, 0, 0);
this.canvas.setAttribute('hidden', 'true'); this.canvas.setAttribute('hidden', 'true');
@ -363,53 +366,63 @@
// Use theme from workspace object or passed theme // Use theme from workspace object or passed theme
const workspaceTheme = theme || workspace.theme; const workspaceTheme = theme || workspace.theme;
const appWrapper = document.getElementById('zen-main-app-wrapper'); await this.foreachWindowAsActive(async (browser) => {
if (!skipUpdate) { // Do not rebuild if the workspace is not the same as the current one
appWrapper.removeAttribute('animating'); const windowWorkspace = await browser.ZenWorkspaces.getActiveWorkspace();
appWrapper.setAttribute('animating', 'true'); if (windowWorkspace.uuid !== uuid) {
document.body.style.setProperty('--zen-main-browser-background-old', return;
document.body.style.getPropertyValue('--zen-main-browser-background') }
);
window.requestAnimationFrame(() => {
setTimeout(() => {
appWrapper.removeAttribute('animating');
}, 600);
});
}
this.customColorList.innerHTML = ''; const appWrapper = browser.document.getElementById('zen-main-app-wrapper');
if (!workspaceTheme || workspaceTheme.type !== 'gradient') {
document.body.style.removeProperty('--zen-main-browser-background');
this.updateNoise(0);
if (!skipUpdate) { if (!skipUpdate) {
for (const dot of this.panel.querySelectorAll('.zen-theme-picker-dot')) { appWrapper.removeAttribute('animating');
dot.remove(); appWrapper.setAttribute('animating', 'true');
browser.document.body.style.setProperty('--zen-main-browser-background-old',
browser.document.body.style.getPropertyValue('--zen-main-browser-background')
);
browser.window.requestAnimationFrame(() => {
setTimeout(() => {
appWrapper.removeAttribute('animating');
}, 600);
});
}
browser.gZenThemePicker.customColorList.innerHTML = '';
if (!workspaceTheme || workspaceTheme.type !== 'gradient') {
browser.document.body.style.removeProperty('--zen-main-browser-background');
browser.gZenThemePicker.updateNoise(0);
if (!skipUpdate) {
for (const dot of browser.gZenThemePicker.panel.querySelectorAll('.zen-theme-picker-dot')) {
dot.remove();
}
}
return;
}
browser.gZenThemePicker.currentOpacity = workspaceTheme.opacity || 0.5;
browser.gZenThemePicker.currentRotation = workspaceTheme.rotation || 45;
browser.gZenThemePicker.currentTexture = workspaceTheme.texture || 0;
browser.gZenThemePicker.numberOfDots = workspaceTheme.gradientColors.length;
browser.document.getElementById('PanelUI-zen-gradient-generator-opacity').value = browser.gZenThemePicker.currentOpacity;
browser.document.getElementById('PanelUI-zen-gradient-generator-texture').value = browser.gZenThemePicker.currentTexture;
browser.gZenThemePicker.setRotationInput(browser.gZenThemePicker.currentRotation);
const gradient = browser.gZenThemePicker.getGradient(workspaceTheme.gradientColors);
browser.gZenThemePicker.updateNoise(workspaceTheme.texture);
for (const dot of workspaceTheme.gradientColors) {
if (dot.isCustom) {
browser.gZenThemePicker.addColorToCustomList(dot.c);
} }
} }
return;
}
this.currentOpacity = workspaceTheme.opacity || 0.5; browser.document.body.style.setProperty('--zen-main-browser-background', gradient);
this.currentRotation = workspaceTheme.rotation || 45; if (!skipUpdate) {
this.currentTexture = workspaceTheme.texture || 0; browser.gZenThemePicker.recalculateDots(workspaceTheme.gradientColors);
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(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(workspaceTheme.gradientColors);
}
} }
removeCustomColor(event) { removeCustomColor(event) {

1
src/ZenWorkspaces.mjs
View file

@ -152,6 +152,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
this._initializeWorkspaceTabContextMenus(); this._initializeWorkspaceTabContextMenus();
window.addEventListener('TabBrowserInserted', this.onTabBrowserInserted.bind(this)); window.addEventListener('TabBrowserInserted', this.onTabBrowserInserted.bind(this));
let workspaces = await this._workspaces(); let workspaces = await this._workspaces();
gZenThemePicker.init();
if (workspaces.workspaces.length === 0) { if (workspaces.workspaces.length === 0) {
await this.createAndSaveWorkspace('Default Workspace', true); await this.createAndSaveWorkspace('Default Workspace', true);
} else { } else {