diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js index 004002dc8..1618bd022 100644 --- a/src/browser/components/preferences/zen-settings.js +++ b/src/browser/components/preferences/zen-settings.js @@ -100,18 +100,24 @@ var gZenMarketplaceManager = { }, async disableTheme(themeId) { - let themes = await this._getThemes(); - let theme = themes[themeId]; - theme.disabled = true; + const themes = await this._getThemes(); + const theme = themes[themeId]; + + theme.enabled = false; + await IOUtils.writeJSON(this.themesDataFile, themes); + this.triggerThemeUpdate(); }, async enableTheme(themeId) { - let themes = await this._getThemes(); - let theme = themes[themeId]; - theme.disabled = false; + const themes = await this._getThemes(); + const theme = themes[themeId]; + + theme.enabled = true; + await IOUtils.writeJSON(this.themesDataFile, themes); + this.triggerThemeUpdate(); }, @@ -199,15 +205,17 @@ var gZenMarketplaceManager = { let themes = await this._getThemes(); - this.themesList.innerHTML = ''; - const browser = this._getBrowser(); + const themeList = document.createElement("div"); + for (let theme of Object.values(themes)) { const fragment = window.MozXULElement.parseXULToFragment(` - - - + + + + + @@ -220,6 +228,7 @@ var gZenMarketplaceManager = { const themeName = `${theme.name} (v${theme.version || '1.0.0'})`; const base = fragment.querySelector('.zenThemeMarketplaceItem'); + const baseHeader = fragment.querySelector('#zenThemeMarketplaceItemContentHeader'); const dialog = document.createElement('dialog'); const mainDialogDiv = document.createElement('div'); @@ -227,6 +236,7 @@ var gZenMarketplaceManager = { const headerTitle = document.createElement('h3'); const closeButton = document.createElement('button'); const contentDiv = document.createElement('div'); + const mozToggle = document.createElement('moz-toggle'); mainDialogDiv.className = 'zenThemeMarketplaceItemPreferenceDialog'; headerDiv.className = 'zenThemeMarketplaceItemPreferenceDialogTopBar'; @@ -236,6 +246,12 @@ var gZenMarketplaceManager = { closeButton.textContent = 'Close'; contentDiv.id = `${theme.name}-preferences-content`; contentDiv.className = 'zenThemeMarketplaceItemPreferenceDialogContent'; + mozToggle.className = 'zenThemeMarketplaceItemPreferenceToggle'; + + mozToggle.pressed = theme.enabled; + mozToggle.title = theme.enabled ? 'Disable theme': 'Enable theme'; + + baseHeader.appendChild(mozToggle); headerDiv.appendChild(headerTitle); headerDiv.appendChild(closeButton); @@ -249,6 +265,16 @@ var gZenMarketplaceManager = { dialog.close(); }); + mozToggle.addEventListener('toggle', (event) => { + const themeId = theme.id; + + if (event.explicitOriginalTarget.getAttribute('aria-pressed') === "false") { + this.disableTheme(themeId); + } else { + this.enableTheme(themeId); + } + }); + fragment.querySelector('.zenThemeMarketplaceItemTitle').textContent = themeName; fragment.querySelector('.zenThemeMarketplaceItemDescription').textContent = theme.description; fragment.querySelector('.zenThemeMarketplaceItemUninstallButton').addEventListener('click', async (event) => { @@ -263,7 +289,7 @@ var gZenMarketplaceManager = { dialog.showModal(); }); - if (theme.preferences) { + if (theme.enabled && theme.preferences) { fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').removeAttribute('hidden'); } @@ -398,8 +424,11 @@ var gZenMarketplaceManager = { } contentDiv.appendChild(preferencesWrapper); } - this.themesList.appendChild(fragment); + themeList.appendChild(fragment); } + + this.themesList.replaceChildren(...themeList.children); + themeList.remove(); }, }; diff --git a/src/browser/themes/shared/preferences/zen-preferences.css b/src/browser/themes/shared/preferences/zen-preferences.css index 98a67a452..cefa74ea6 100644 --- a/src/browser/themes/shared/preferences/zen-preferences.css +++ b/src/browser/themes/shared/preferences/zen-preferences.css @@ -4,7 +4,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@namespace html "http://www.w3.org/1999/xhtml"; +@namespace html 'http://www.w3.org/1999/xhtml'; :root { --zen-settings-secondary-background: light-dark(#f2f4f4, color-mix(in srgb, var(--zen-colors-tertiary) 50%, #0f0f0f 50%)); @@ -383,6 +383,10 @@ groupbox h2 { padding: var(--space-medium); position: relative; overflow-x: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; } .zenThemeMarketplaceItemConfigureButton { @@ -475,6 +479,12 @@ groupbox h2 { flex-direction: row; } +#zenThemeMarketplaceItemContentHeader { + display: flex; + flex-direction: row; + justify-content: space-between; +} + /* Disable mozilla's settings */ #dataCollectionCategory,