mirror of
https://github.com/zen-browser/components.git
synced 2025-07-07 21:59:59 +02:00
Merge branch 'main' of https://github.com/zen-browser/components
This commit is contained in:
commit
a4ffded16b
2 changed files with 183 additions and 65 deletions
|
@ -0,0 +1,97 @@
|
|||
var ZenThemesCommon = {
|
||||
kZenOSToSmallName: {
|
||||
WINNT: 'windows',
|
||||
Darwin: 'macos',
|
||||
Linux: 'linux',
|
||||
},
|
||||
|
||||
kZenColors: ['#aac7ff', '#74d7cb', '#a0d490', '#dec663', '#ffb787', '#dec1b1', '#ffb1c0', '#ddbfc3', '#f6b0ea', '#d4bbff'],
|
||||
|
||||
get currentOperatingSystem() {
|
||||
let os = Services.appinfo.OS;
|
||||
return this.kZenOSToSmallName[os];
|
||||
},
|
||||
|
||||
get themesRootPath() {
|
||||
return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes');
|
||||
},
|
||||
|
||||
get themesDataFile() {
|
||||
return PathUtils.join(PathUtils.profileDir, 'zen-themes.json');
|
||||
},
|
||||
|
||||
getThemeFolder(themeId) {
|
||||
return PathUtils.join(this.themesRootPath, themeId);
|
||||
},
|
||||
|
||||
getBrowser() {
|
||||
if (!this.__browser) {
|
||||
this.__browser = Services.wm.getMostRecentWindow('navigator:browser');
|
||||
}
|
||||
|
||||
return this.__browser;
|
||||
},
|
||||
|
||||
async getThemes() {
|
||||
if (!this._themes) {
|
||||
if (!(await IOUtils.exists(this.themesDataFile))) {
|
||||
await IOUtils.writeJSON(this.themesDataFile, {});
|
||||
}
|
||||
this._themes = await IOUtils.readJSON(this.themesDataFile);
|
||||
}
|
||||
return this._themes;
|
||||
},
|
||||
|
||||
async getThemePreferences(theme) {
|
||||
const themePath = PathUtils.join(this.themesRootPath, theme.id, 'preferences.json');
|
||||
if (!(await IOUtils.exists(themePath)) || !theme.preferences) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const preferences = await IOUtils.readJSON(themePath);
|
||||
|
||||
// compat mode for old preferences, all of them can only be checkboxes
|
||||
if (typeof preferences === 'object' && !Array.isArray(preferences)) {
|
||||
console.warn(
|
||||
`[ZenThemes]: Warning, ${theme.name} uses legacy preferences, please migrate them to the new preferences style, as legacy preferences might be removed at a future release. More information at: https://docs.zen-browser.app/themes-store/themes-marketplace-preferences`
|
||||
);
|
||||
const newThemePreferences = [];
|
||||
|
||||
for (let [entry, label] of Object.entries(preferences)) {
|
||||
const [_, negation = '', os = '', property] = /(!?)(?:(macos|windows|linux):)?([A-z0-9-_.]+)/g.exec(entry);
|
||||
const isNegation = negation === '!';
|
||||
|
||||
if (
|
||||
(isNegation && os === this.currentOperatingSystem) ||
|
||||
(os !== '' && os !== this.currentOperatingSystem && !isNegation)
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
newThemePreferences.push({
|
||||
property,
|
||||
label,
|
||||
type: 'checkbox',
|
||||
disabledOn: os !== '' ? [os] : [],
|
||||
});
|
||||
}
|
||||
|
||||
return newThemePreferences;
|
||||
}
|
||||
|
||||
return preferences.filter(({ disabledOn = [] }) => !disabledOn.includes(this.currentOperatingSystem));
|
||||
},
|
||||
|
||||
throttle(mainFunction, delay) {
|
||||
let timerFlag = null;
|
||||
|
||||
return (...args) => {
|
||||
if (timerFlag === null) {
|
||||
mainFunction(...args);
|
||||
timerFlag = setTimeout(() => {
|
||||
timerFlag = null;
|
||||
}, delay);
|
||||
}
|
||||
};
|
||||
},
|
||||
};
|
|
@ -8,11 +8,12 @@ const kZenStylesheetThemeHeader = `
|
|||
const kenStylesheetFooter = `
|
||||
/* End of Zen Themes */
|
||||
`;
|
||||
|
||||
var gZenStylesheetManager = {
|
||||
async writeStylesheet(path, themes) {
|
||||
let content = kZenStylesheetThemeHeader;
|
||||
for (let theme of themes) {
|
||||
if (!theme.enabled) {
|
||||
if (theme.enabled !== undefined && !theme.enabled) {
|
||||
continue;
|
||||
}
|
||||
content += this.getThemeCSS(theme);
|
||||
|
@ -41,7 +42,20 @@ var gZenThemeImporter = new (class {
|
|||
try {
|
||||
window.SessionStore.promiseInitialized.then(async () => {
|
||||
this.insertStylesheet();
|
||||
await this.writeToDom();
|
||||
|
||||
const themesWithPreferences = await Promise.all(
|
||||
Object.values(await ZenThemesCommon.getThemes()).map(async (theme) => {
|
||||
const preferences = await ZenThemesCommon.getThemePreferences(theme);
|
||||
|
||||
return {
|
||||
name: theme.name,
|
||||
enabled: theme.enabled,
|
||||
preferences,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
this.writeToDom(themesWithPreferences);
|
||||
});
|
||||
console.info('ZenThemeImporter: Zen theme imported');
|
||||
} catch (e) {
|
||||
|
@ -61,28 +75,6 @@ var gZenThemeImporter = new (class {
|
|||
return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes.css');
|
||||
}
|
||||
|
||||
get themesRootPath() {
|
||||
return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes');
|
||||
}
|
||||
|
||||
get themesDataFile() {
|
||||
return PathUtils.join(PathUtils.profileDir, 'zen-themes.json');
|
||||
}
|
||||
|
||||
getThemeFolder(theme) {
|
||||
return PathUtils.join(this.themesRootPath, theme.id);
|
||||
}
|
||||
|
||||
async getThemes() {
|
||||
if (!this._themes) {
|
||||
if (!(await IOUtils.exists(this.themesDataFile))) {
|
||||
await IOUtils.writeJSON(this.themesDataFile, {});
|
||||
}
|
||||
this._themes = await IOUtils.readJSON(this.themesDataFile);
|
||||
}
|
||||
return this._themes;
|
||||
}
|
||||
|
||||
async rebuildThemeStylesheet() {
|
||||
this._themes = null;
|
||||
await this.updateStylesheet();
|
||||
|
@ -96,7 +88,7 @@ var gZenThemeImporter = new (class {
|
|||
}
|
||||
|
||||
getStylesheetURIForTheme(theme) {
|
||||
return Services.io.newFileURI(new FileUtils.File(PathUtils.join(this.getThemeFolder(theme), 'chrome.css')));
|
||||
return Services.io.newFileURI(new FileUtils.File(PathUtils.join(ZenThemesCommon.getThemeFolder(theme.id), 'chrome.css')));
|
||||
}
|
||||
|
||||
async insertStylesheet() {
|
||||
|
@ -111,57 +103,84 @@ var gZenThemeImporter = new (class {
|
|||
|
||||
async updateStylesheet() {
|
||||
await this.removeStylesheet();
|
||||
await this.writeStylesheet();
|
||||
await this.writeToDom();
|
||||
|
||||
const themes = Object.values(await ZenThemesCommon.getThemes());
|
||||
await this.writeStylesheet(themes);
|
||||
|
||||
const themesWithPreferences = await Promise.all(
|
||||
themes.map(async (theme) => {
|
||||
const preferences = await ZenThemesCommon.getThemePreferences(theme);
|
||||
|
||||
return {
|
||||
name: theme.name,
|
||||
enabled: theme.enabled,
|
||||
preferences,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
this.setDefaults(themesWithPreferences);
|
||||
this.writeToDom(themesWithPreferences);
|
||||
|
||||
await this.insertStylesheet();
|
||||
}
|
||||
|
||||
_getBrowser() {
|
||||
if (!this.__browser) {
|
||||
this.__browser = Services.wm.getMostRecentWindow('navigator:browser');
|
||||
}
|
||||
|
||||
return this.__browser;
|
||||
}
|
||||
|
||||
async _getThemePreferences(theme) {
|
||||
const themePath = PathUtils.join(this.getThemeFolder(theme), 'preferences.json');
|
||||
|
||||
if (!(await IOUtils.exists(themePath)) || !theme.preferences) {
|
||||
return { preferences: [], isLegacyMode: false };
|
||||
}
|
||||
|
||||
let preferences = await IOUtils.readJSON(themePath);
|
||||
|
||||
// skip transformation, we won't be writing old preferences to dom, all of them can only be checkboxes
|
||||
if (typeof preferences === 'object' && !Array.isArray(preferences)) {
|
||||
return { preferences: [], areOldPreferences: true };
|
||||
}
|
||||
|
||||
return { preferences, areOldPreferences: false };
|
||||
}
|
||||
|
||||
async writeToDom() {
|
||||
const browser = this._getBrowser();
|
||||
|
||||
for (const theme of Object.values(await this.getThemes())) {
|
||||
const { preferences, areOldPreferences } = await this._getThemePreferences(theme);
|
||||
|
||||
if (areOldPreferences) {
|
||||
setDefaults(themesWithPreferences) {
|
||||
for (const { preferences, enabled } of themesWithPreferences) {
|
||||
if (enabled !== undefined && !enabled) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const filteredPreferences = preferences.filter(({ type }) => type !== 'checkbox');
|
||||
const sanitizedName = `theme-${theme.name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`;
|
||||
for (const { type, property, defaultValue } of preferences) {
|
||||
if (defaultValue === undefined) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!theme.enabled) {
|
||||
switch (type) {
|
||||
case 'checkbox': {
|
||||
const value = Services.prefs.getBoolPref(property, false);
|
||||
if (typeof defaultValue !== 'boolean') {
|
||||
console.log(`[ZenThemesImporter]: Warning, invalid data type received for expected type boolean, skipping.`);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
Services.prefs.setBoolPref(property, defaultValue);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
default: {
|
||||
const value = Services.prefs.getStringPref(property, 'zen-property-no-saved');
|
||||
|
||||
if (typeof defaultValue !== 'string' && typeof defaultValue !== 'number') {
|
||||
console.log(`[ZenThemesImporter]: Warning, invalid data type received (${typeof defaultValue}), skipping.`);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (value === 'zen-property-no-saved') {
|
||||
Services.prefs.setStringPref(property, defaultValue.toString());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
writeToDom(themesWithPreferences) {
|
||||
const browser = ZenThemesCommon.getBrowser();
|
||||
|
||||
for (const { enabled, preferences, name } of themesWithPreferences) {
|
||||
const sanitizedName = `theme-${name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`;
|
||||
|
||||
if (enabled !== undefined && !enabled) {
|
||||
const element = browser.document.getElementById(sanitizedName);
|
||||
|
||||
if (element) {
|
||||
element.remove();
|
||||
}
|
||||
|
||||
for (const { property } of filteredPreferences) {
|
||||
for (const { property } of preferences.filter(({ type }) => type !== 'checkbox')) {
|
||||
const sanitizedProperty = property?.replaceAll(/\./g, '-');
|
||||
|
||||
if (document.querySelector(':root').style.hasProperty(`--${sanitizedProperty}`)) {
|
||||
|
@ -211,13 +230,15 @@ var gZenThemeImporter = new (class {
|
|||
}
|
||||
}
|
||||
|
||||
async writeStylesheet() {
|
||||
async writeStylesheet(themeList) {
|
||||
const themes = [];
|
||||
this._themes = null;
|
||||
for (let theme of Object.values(await this.getThemes())) {
|
||||
|
||||
for (let theme of themeList) {
|
||||
theme._chromeURL = this.getStylesheetURIForTheme(theme).spec;
|
||||
themes.push(theme);
|
||||
}
|
||||
|
||||
await gZenStylesheetManager.writeStylesheet(this.styleSheetPath, themes);
|
||||
}
|
||||
})();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue