mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1467 from JosueGalRe/main

Browse Source 
feature: add string type theme property
This commit is contained in:
mauro 🤙
2024-09-16 22:51:27 +02:00
committed by GitHub
parent dcd9e0b94f fbc088225c
commit 9f3a14a673
1 changed files with 67 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/browser/components/preferences/zen-settings.js
View File

@@ -198,6 +198,19 @@ var gZenMarketplaceManager = {
return this.__browser;
},
__throttle(mainFunction, delay) {
let timerFlag = null;
return (...args) => {
if (timerFlag === null) {
mainFunction(...args);
timerFlag = setTimeout(() => {
timerFlag = null;
}, delay);
}
};
},
async _buildThemesList() {
if (!this.themesList) return;
if (this._doNotRebuildThemesList) {
@@ -214,6 +227,8 @@ var gZenMarketplaceManager = {
const themeList = document.createElement('div');
for (let theme of Object.values(themes)) {
const sanitizedName = `theme-${theme.name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`;
const fragment = window.MozXULElement.parseXULToFragment(`
<vbox class="zenThemeMarketplaceItem">
<vbox class="zenThemeMarketplaceItemContent">
@@ -223,14 +238,13 @@ var gZenMarketplaceManager = {
<description class="description-deemphasized zenThemeMarketplaceItemDescription"></description>
</vbox>
<hbox class="zenThemeMarketplaceItemActions">
<button class="zenThemeMarketplaceItemConfigureButton" hidden="true"></button>
<button id="zenThemeMarketplaceItemConfigureButton-${sanitizedName}" class="zenThemeMarketplaceItemConfigureButton" hidden="true"></button>
<button class="zenThemeMarketplaceItemUninstallButton" data-l10n-id="zen-theme-marketplace-remove-button" zen-theme-id="${theme.id}"></button>
</hbox>
</vbox>
`);
const themeName = `${theme.name} (v${theme.version || '1.0.0'})`;
const sanitizedName = `theme-${theme.name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`;
const base = fragment.querySelector('.zenThemeMarketplaceItem');
const baseHeader = fragment.querySelector('#zenThemeMarketplaceItemContentHeader');
@@ -279,8 +293,10 @@ var gZenMarketplaceManager = {
if (!event.target.hasAttribute('pressed')) {
await this.disableTheme(themeId);
document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).setAttribute('hidden', true);
} else {
await this.enableTheme(themeId);
document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).removeAttribute('hidden');
}
});
@@ -307,7 +323,7 @@ var gZenMarketplaceManager = {
if (preferences.length > 0) {
const preferencesWrapper = document.createXULElement('vbox');
preferencesWrapper.classList.add('zenThemeMarketplaceItemPreferences');
preferencesWrapper.setAttribute('flex', '1');
for (let entry of preferences) {
const { property, label, type } = entry;
@@ -395,7 +411,7 @@ var gZenMarketplaceManager = {
}
case 'checkbox': {
const fragment = window.MozXULElement.parseXULToFragment(`
const checkbox = window.MozXULElement.parseXULToFragment(`
<hbox class="zenThemeMarketplaceItemPreference">
<checkbox class="zenThemeMarketplaceItemPreferenceCheckbox" label="${label}" tooltiptext="${property}" zen-pref="${property}"></checkbox>
</hbox>
@@ -403,10 +419,10 @@ var gZenMarketplaceManager = {
// Checkbox only works with "true" and "false" values, it's not like HTML checkboxes.
if (Services.prefs.getBoolPref(property, false)) {
fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').setAttribute('checked', 'true');
checkbox.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').setAttribute('checked', 'true');
}
fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => {
checkbox.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => {
let target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox');
let key = target.getAttribute('zen-pref');
let checked = target.hasAttribute('checked');
@@ -420,7 +436,51 @@ var gZenMarketplaceManager = {
Services.prefs.setBoolPref(key, !checked);
});
preferencesWrapper.appendChild(fragment);
preferencesWrapper.appendChild(checkbox);
break;
}
case 'string': {
const container = document.createXULElement('hbox');
container.classList.add('zenThemeMarketplaceItemPreference');
container.setAttribute('align', 'center');
container.setAttribute('role', 'group');
const savedValue = Services.prefs.getStringPref(property, '');
const sanitizedProperty = property?.replaceAll(/\./g, '-');
const input = document.createElement('input');
input.setAttribute('flex', '1');
input.setAttribute('type', 'text');
input.id = `${sanitizedProperty}-input`;
input.value = savedValue;
input.addEventListener(
'input',
this.__throttle((event) => {
const value = event.target.value;
Services.prefs.setStringPref(property, value);
if (value === '') {
browser.document.querySelector(':root').style.removeProperty(`--${sanitizedProperty}`);
} else {
browser.document.querySelector(':root').style.setProperty(`--${sanitizedProperty}`, value);
}
}, 500)
);
const nameLabel = document.createXULElement('label');
nameLabel.setAttribute('flex', '1');
nameLabel.setAttribute('class', 'zenThemeMarketplaceItemPreferenceLabel');
nameLabel.setAttribute('value', label);
nameLabel.setAttribute('tooltiptext', property);
container.appendChild(nameLabel);
container.appendChild(input);
container.setAttribute('aria-labelledby', label);
preferencesWrapper.appendChild(container);
break;
}