diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js
index 7daef8e68..fcce3fc11 100644
--- a/src/browser/components/preferences/zen-settings.js
+++ b/src/browser/components/preferences/zen-settings.js
@@ -213,8 +213,9 @@ var gZenMarketplaceManager = {
const themeList = document.createElement('div');
- for (let theme of Object.values(themes)) {
+ for (const theme of Object.values(themes)) {
const sanitizedName = `theme-${theme.name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`;
+ const isThemeEnabled = theme.enabled === undefined || theme.enabled;
const fragment = window.MozXULElement.parseXULToFragment(`
@@ -225,7 +226,7 @@ var gZenMarketplaceManager = {
-
+ ${theme.preferences ? `` : ''}
@@ -255,8 +256,8 @@ var gZenMarketplaceManager = {
contentDiv.className = 'zenThemeMarketplaceItemPreferenceDialogContent';
mozToggle.className = 'zenThemeMarketplaceItemPreferenceToggle';
- mozToggle.pressed = theme.enabled;
- mozToggle.title = theme.enabled ? 'Disable theme' : 'Enable theme';
+ mozToggle.pressed = isThemeEnabled;
+ mozToggle.title = isThemeEnabled ? 'Disable theme' : 'Enable theme';
baseHeader.appendChild(mozToggle);
@@ -280,10 +281,20 @@ var gZenMarketplaceManager = {
if (!event.target.hasAttribute('pressed')) {
await this.disableTheme(themeId);
- document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).setAttribute('hidden', true);
+
+ mozToggle.title = 'Enable theme';
+
+ if (theme.preferences) {
+ document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).setAttribute('hidden', true);
+ }
} else {
await this.enableTheme(themeId);
- document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).removeAttribute('hidden');
+
+ mozToggle.title = 'Disable theme';
+
+ if (theme.preferences) {
+ document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).removeAttribute('hidden');
+ }
}
});
@@ -296,12 +307,15 @@ var gZenMarketplaceManager = {
await this.removeTheme(event.target.getAttribute('zen-theme-id'));
});
- fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').addEventListener('click', () => {
- dialog.showModal();
- });
- if (theme.enabled && theme.preferences) {
- fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').removeAttribute('hidden');
+ if (theme.preferences) {
+ fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').addEventListener('click', () => {
+ dialog.showModal();
+ });
+
+ if (isThemeEnabled) {
+ fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').removeAttribute('hidden');
+ }
}
const preferences = await this._getThemePreferences(theme);
@@ -311,7 +325,7 @@ var gZenMarketplaceManager = {
preferencesWrapper.setAttribute('flex', '1');
- for (let entry of preferences) {
+ for (const entry of preferences) {
const { property, label, type } = entry;
switch (type) {
@@ -341,7 +355,7 @@ var gZenMarketplaceManager = {
menupopup.appendChild(defaultItem);
- for (let option of options) {
+ for (const option of options) {
const { label, value } = option;
const valueType = typeof value;
@@ -409,9 +423,9 @@ var gZenMarketplaceManager = {
}
checkbox.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => {
- let target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox');
- let key = target.getAttribute('zen-pref');
- let checked = target.hasAttribute('checked');
+ const target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox');
+ const key = target.getAttribute('zen-pref');
+ const checked = target.hasAttribute('checked');
if (!checked) {
target.removeAttribute('checked');
diff --git a/src/browser/themes/shared/preferences/zen-preferences.css b/src/browser/themes/shared/preferences/zen-preferences.css
index ad37698d0..ba7614262 100644
--- a/src/browser/themes/shared/preferences/zen-preferences.css
+++ b/src/browser/themes/shared/preferences/zen-preferences.css
@@ -480,6 +480,10 @@ groupbox h2 {
flex-direction: row;
}
+.zenThemeMarketplaceItemPreferenceToggle {
+ align-self: start;
+}
+
#zenThemeMarketplaceItemContentHeader {
display: flex;
flex-direction: row;