style: Add homepage button to theme marketplace with click functionality

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

@@ -170,7 +170,6 @@ var gZenMarketplaceManager = {
     for (const theme of Object.values(themes).sort((a, b) => a.name.localeCompare(b.name))) {
       const sanitizedName = `theme-${theme.name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`;
       const isThemeEnabled = theme.enabled === undefined || theme.enabled;
-
       const fragment = window.MozXULElement.parseXULToFragment(`
         <vbox class="zenThemeMarketplaceItem">
           <vbox class="zenThemeMarketplaceItemContent">
@@ -181,6 +180,7 @@ var gZenMarketplaceManager = {
           </vbox>
           <hbox class="zenThemeMarketplaceItemActions">
             ${theme.preferences ? `<button id="zenThemeMarketplaceItemConfigureButton-${sanitizedName}" class="zenThemeMarketplaceItemConfigureButton" hidden="true"></button>` : ''}
+            ${theme.homepage ? `<button id="zenThemeMarketplaceItemHomePageLink-${sanitizedName}" class="zenThemeMarketplaceItemHomepageButton" zen-theme-id="${theme.id}"></button>` : ''}
             <button class="zenThemeMarketplaceItemUninstallButton" data-l10n-id="zen-theme-marketplace-remove-button" zen-theme-id="${theme.id}"></button>
           </hbox>
         </vbox>
@@ -274,6 +274,16 @@ var gZenMarketplaceManager = {
         await this.removeTheme(event.target.getAttribute('zen-theme-id'));
       });
 
+      if (theme.homepage) {
+        const homepageButton = fragment.querySelector('.zenThemeMarketplaceItemHomepageButton');
+        homepageButton.addEventListener('click', () => {
+          // open the homepage url in a new tab
+          const url = theme.homepage;
+
+          window.open(url, '_blank');
+        });
+      }
+
       if (theme.preferences) {
         fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').addEventListener('click', () => {
           dialog.showModal();

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

@@ -470,6 +470,28 @@ groupbox h2 {
   align-items: center;
 }
 
+.zenThemeMarketplaceItemHomepageButton {
+  width: 30px;
+  min-width: 0;
+  position: relative;
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 18px;
+    height: 18px;
+    background-image: url('chrome://browser/skin/home.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    fill: currentColor;
+    -moz-context-properties: fill, fill-opacity;
+  }
+}
+
 .zenThemeMarketplaceItemConfigureButton {
   width: 30px;
   min-width: 0;