Refactor zen-settings.js and zen-preferences.css to update the marketplace item layout and add configuration button

src/browser/components/preferences/zen-settings.js

@@ -157,13 +157,16 @@ var gZenMarketplaceManager = {
     this.themesList.innerHTML = '';
     for (let theme of Object.values(themes)) {
       const fragment = window.MozXULElement.parseXULToFragment(`
-        <hbox class="zenThemeMarketplaceItem" align="center">
+        <vbox class="zenThemeMarketplaceItem" align="center">
           <vbox class="zenThemeMarketplaceItemContent" flex="1">
             <label><h3 class="zenThemeMarketplaceItemTitle"></h3></label>
             <description class="description-deemphasized zenThemeMarketplaceItemDescription"></description>
           </vbox>
-          <button class="zenThemeMarketplaceItemUninstallButton" data-l10n-id="zen-theme-marketplace-remove-button" zen-theme-id="${theme.id}"></button>
-        </hbox>
+          <hbox class="zenThemeMarketplaceItemActions">
+            <button class="zenThemeMarketplaceItemConfigureButton" hidden="true"></button>
+            <button class="zenThemeMarketplaceItemUninstallButton" data-l10n-id="zen-theme-marketplace-remove-button" zen-theme-id="${theme.id}"></button>
+          </hbox>
+        </vbox>
       `);
       fragment.querySelector('.zenThemeMarketplaceItemTitle').textContent = `${theme.name} (v${theme.version || '1.0.0'})`;
       fragment.querySelector('.zenThemeMarketplaceItemDescription').textContent = theme.description;
@@ -175,12 +178,26 @@ var gZenMarketplaceManager = {
         const themeId = target.getAttribute('zen-theme-id');
         await this.removeTheme(themeId);
       });
-      this.themesList.appendChild(fragment);
+      if (theme.preferences) {
+        fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').removeAttribute('hidden');
+      }
+      fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').addEventListener('click', async (event) => {
+        const target = event.target;
+        // Unhide the preferences for this theme.
+        const preferencesWrapper = target.closest('.zenThemeMarketplaceItem').querySelector('.zenThemeMarketplaceItemPreferences');
+        if (preferencesWrapper.hasAttribute('hidden')) {
+          preferencesWrapper.removeAttribute('hidden');
+        } else {
+          preferencesWrapper.setAttribute('hidden', 'true');
+        }
+      });
+
       const preferences = await this._getThemePreferences(theme);
       if (Object.keys(preferences).length > 0) {
         let preferencesWrapper = document.createXULElement('vbox');
         preferencesWrapper.classList.add('indent');
         preferencesWrapper.classList.add('zenThemeMarketplaceItemPreferences');
+        preferencesWrapper.setAttribute('hidden', 'true');
         for (let [key, value] of Object.entries(preferences)) {
           const fragment = window.MozXULElement.parseXULToFragment(`
             <hbox class="zenThemeMarketplaceItemPreference">
@@ -208,8 +225,9 @@ var gZenMarketplaceManager = {
           });
           preferencesWrapper.appendChild(fragment);
         }
-        this.themesList.appendChild(preferencesWrapper);
+        fragment.querySelector('.zenThemeMarketplaceItemContent').appendChild(preferencesWrapper);
       }
+      this.themesList.appendChild(fragment);
     }
   },
 };

src/browser/themes/shared/preferences/zen-preferences.css

@@ -334,11 +334,29 @@ groupbox h2 {
 }
 
 .zenThemeMarketplaceItem {
-  width: 100%;
+  border: 1px solid var(--zen-colors-border);
+  border-radius: 5px;
+  padding: var(--space-medium);
+  position: relative;
+  overflow-x: hidden;
+}
 
-  &:not(:first-of-type),
-  .zenThemeMarketplaceItemPreferences {
-    margin-top: 15px;
+.zenThemeMarketplaceItemConfigureButton {
+  width: 30px;
+  min-width: 0;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 15px;
+    height: 15px;
+    background-image: url('chrome://global/skin/icons/settings.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
   }
 }
 
@@ -354,6 +372,31 @@ groupbox h2 {
   margin: 0;
 }
 
+.zenThemeMarketplaceItemContent {
+  max-width: 100%;
+}
+
+.zenThemeMarketplaceItemTitle,
+.zenThemeMarketplaceItemDescription {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.zenThemeMarketplaceItemActions {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-top: var(--space-small);
+  justify-content: space-between;
+}
+
+#zenThemeMarketplaceList {
+  display: grid;
+  gap: var(--space-medium);
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
 #zenThemeMarketplaceList:has(> *) {
   margin: 15px 0;
 }