[WIP] Add "theme_experiment" addon support

.vscode/settings.json

@@ -0,0 +1 @@
+{ "editor.formatOnSave": false }

dev/js/main.js

@@ -1,3 +1,45 @@
+//@ts-check
+// ============================================================================
+// Current browser selector
+
+// @ts-ignore
+const /** @type {HTMLSelectElement} */ choice = document.getElementById('browser')
+
+function getCurrentBrowser() {
+  return localStorage.getItem('browser') || 'select'
+}
+
+function setCurrentBrowser(browser, choiceTrigger = false) {
+  localStorage.setItem('browser', browser)
+
+  if (!choiceTrigger) {
+    updateChoicePrompt()
+  }
+}
+
+function setup() {
+  choice.onchange = () => {
+    setCurrentBrowser(choice.value, true)
+  }
+}
+
+function updateChoicePrompt() {
+  choice.value = getCurrentBrowser()
+
+  // @ts-ignore
+  const /** @type {HTMLSelectElement} */ prompt = document.getElementById('popup-browser')
+  if (prompt) {
+    prompt.value = getCurrentBrowser()
+  }
+
+  // @ts-ignore
+  const /** @type {HTMLButtonElement} */ prompt_next = document.getElementById('popup-browser-next')
+  if (prompt_next) {
+    prompt_next.disabled = choice.value === 'select'
+  }
+}
+
+
 function sanatise (unsanatisedInput) {
 
   const tempEl = document.createElement('div')
@@ -9,17 +51,176 @@ function sanatise (unsanatisedInput) {
 }
 
 
+class Popup {
+  constructor(data) {
+    this._title        = sanatise(data.title)
+    this._description  = sanatise(data.description)
+    this._link         = sanatise(data.link)
+    this._image        = sanatise(data.image)
+    this._data         = data
+  }
+
+  render() {
+    const stableEnableOptions = [
+      'toolkit.legacyUserProfileCustomizations.stylesheets',
+      'layers.acceleration.force-enabled',
+      'gfx.webrender.all',
+      'gfx.webrender.enabled',
+      'layout.css.backdrop-filter.enabled',
+      'svg.context-properties.content.enabled'
+    ]
+
+    const nightlyEnableOptions = [
+      'extensions.experiments.enabled',
+      ...stableEnableOptions
+    ]
+
+    removePopup()
+    createPopup(`
+      <div id="select-browser" style="display: none">
+          <h1>Select a browser</h1>
+
+          <div id="browser-grid" class="install-option">
+              <div class="browser-card" id="select-stable">
+                  <img src="https://www.mozilla.org/media/protocol/img/logos/firefox/browser/logo.eb1324e44442.svg" alt="Firefox stable icon" />
+                  <h2>Firefox Stable or Beta</h2>
+              </div>
+              <div class="browser-card" id="select-dev">
+                  <img src="https://www.mozilla.org/media/protocol/img/logos/firefox/browser/developer/logo.41d42822c8fb.svg" alt="Firefox developer edition icon" />
+                  <h2>Firefox Developer Edition and Nightly</h2>
+              </div>
+              <div class="browser-card" id="select-waterfox">
+                  <img src="https://www.waterfox.net/img/logo.svg" alt="Waterfox icon" />
+                  <h2>Waterfox or Pulse browser</h2>
+              </div>
+          </div>
+      </div>
+
+      <div id="stable-browser" style="display: none;" class="install-option">
+          <h1>Installing on Firefox Stable and Beta</h1>
+
+          <ol>
+              <li>Download the theme <a href="${this._link}">from the git repository</a>. If it is a Github repo, you can download it by clicking the big green "Code" button and click "Download.zip"</li>
+              <li>Open <code>about:config</code></li>
+              <li>A dialog will warn you, but ignore t, just doit. Press the "I accept the risk!" button.</li>
+              <li>Search for these and enable each of them:
+              <ul>
+                  ${stableEnableOptions.map(option => `<li><code>${option}</code></li>`).join('')}
+              </ul>
+              </li>
+              <li>Go to your Firefox profile:
+              <ul>
+                  <li>Linux - <code>$HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/</code>.</li>
+                  <li>Windows 10 - <code>C:\Users\&lt;USERNAME&gt;\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXXXX.default-XXXXXX</code>.</li>
+                  <li>macOS - <code>Users/&lt;USERNAME&gt;/Library/Application Support/Firefox/Profiles/XXXXXXX.default-XXXXXXX</code>.</li>
+              </ul>
+              </li>
+              <li>
+              Create a folder and name it <code>chrome</code>, then assuming that 
+              you already have cloned this repo, just copy the theme to 
+              <code>chrome</code> folder.
+              </li>
+              <li>Restart Firefox</li>
+          </ol>
+      </div>
+
+      <div id="nightly-browser" style="display: none;" class="install-option">
+          <h1>Installing on Firefox Developer Edition and Nightly</h1>
+
+          <ol>
+              <li>Open <code>about:config</code></li>
+              <li>A dialog will warn you, but ignore t, just doit. Press the "I accept the risk!" button.</li>
+              <li>Search for <code>xpinstall.signatures.required</code> and disable it.</li>
+              <li>Search for these and enable each of them:
+              <ul>
+                  ${nightlyEnableOptions.map(option => `<li><code>${option}</code></li>`).join('')}
+              </ul>
+              </li>
+              <li>
+              You are now ready to install the theme. Simply clock the button below.
+              </li>
+          </ol>
+
+          <div class="addon-install-options"></div>
+      </div>
+
+      <div id="forked-browser" style="display: none;" class="install-option">
+          <h1>Installing on Waterfox and Pulse Browser</h1>
+
+          <p>You are now ready to install the theme. Simply clock the button below.</p>
+
+          <div class="addon-install-options"></div>
+      </div>
+
+      <button type="button" class="btn btn-close-lightbox" onClick="removeLightbox()"><i class="fas fa-times-circle"></i> Close</button>
+    `, true)
+
+    document.getElementById('select-stable').addEventListener('click', () => this.changeBrowser('firefox-stable', true))
+    document.getElementById('select-dev').addEventListener('click', () => this.changeBrowser('firefox-dev', true))
+    document.getElementById('select-waterfox').addEventListener('click', () => this.changeBrowser('waterfox', true))
+
+    // Prevent the popup from closing when the user clicks on a UI element
+    document.getElementById('select-browser').addEventListener('click', e => e.preventDefault())
+
+    console.log(this._data)
+
+    // If there is no experiment xpi support, we should send them straight to
+    // the stable instructions
+    const selectedBrowser = this._data.experiment_xpi ? getCurrentBrowser() : 'firefox'
+
+    if (selectedBrowser === 'select') {
+      document.getElementById('select-browser').style.display = 'block'
+    } else {
+      this.changeBrowser(selectedBrowser)
+    }
+
+    // If there is no experiment attached, do not perform logic related to it
+    if (!this._data.experiment_xpi) return
+
+    const addonClick = document.getElementsByClassName('addon-install-options')
+    for (const container of addonClick) {
+      for (const style in this._data.experiment_xpi) {
+        const button = document.createElement('button')
+        button.classList.add('btn')
+        button.innerText = style
+        button.addEventListener('click', () => location.href = this._data.experiment_xpi[style])
+        container.appendChild(button) 
+      }
+    }
+  }
+
+  changeBrowser(selectedBrowser, save = false) {
+    if (save) setCurrentBrowser(selectedBrowser)
+
+    const oldElements = ['stable-browser', 'select-browser', 'nightly-browser', 'forked-browser']
+    oldElements.forEach(element => document.getElementById(element).style.display = 'none')
+
+    if (selectedBrowser === 'firefox' || selectedBrowser === 'firefox-beta' || selectedBrowser === 'firefox-esr') {
+      document.getElementById('stable-browser').style.display = 'block'
+    } else if (selectedBrowser === 'firefox-nightly' || selectedBrowser === 'firefox-dev') {
+      document.getElementById('nightly-browser').style.display = 'block'
+    } else if (selectedBrowser === 'waterfox' || selectedBrowser === 'pulse') {
+      document.getElementById('forked-browser').style.display = 'block'
+    } else {
+      throw new Error(`Unknown browser: ${selectedBrowser}`)
+    }
+  }
+}
+
+// Global variable to store theme data
+// TODO: Fix this gankness with something a bit better
+var themeData = {}
 
 class Card {
 
   constructor (data, id) {
-
     this._id           = id + 1
     this._title        = sanatise(data.title)
     this._description  = sanatise(data.description)
     this._link         = sanatise(data.link)
     this._image        = sanatise(data.image)
 
+    themeData[this._id] = data
   }
 
 
@@ -42,7 +243,7 @@ class Card {
       </div>
       <div class="button-wrapper">
         <button class="btn btn-lightbox" type="button" onClick="createLightbox(${this._id})"><i class="fas fa-search-plus"></i> Enlarge</button>
-        <a href="${this._link}" class="btn btn-download"><i class="fas fa-file-download"></i> Download</a>
+        <a class="btn btn-download" onclick="new Popup(themeData[${this._id}]).render()"><i class="fas fa-file-download"></i> Download</a>
       </div>
     </div>
     `
@@ -52,11 +253,20 @@ class Card {
   }
 }
 
+const removePopup = () => document.getElementById('lightbox')?.remove()
+const removeLightbox = removePopup
 
-const removeLightbox = () => document.body.getElementsById('lightbox').remove()
+function createPopup(content, isCard = false) {
+  const container = document.getElementById('themes_container')
 
-function createLightbox (id) {
+  const template = `<div id="lightbox" class="${isCard ? 'lightbox-card' : ''}" ${!isCard ? 'onclick="this.remove()"' : ''}>${content}</div>`
 
+  container.innerHTML += template
+}
+
+
+
+function createLightbox (id) {
   const card = document.getElementById(`theme-${id}`)
   const themeTitle = card.querySelector('h3')
   const img = card.querySelector('img')
@@ -69,14 +279,17 @@ function createLightbox (id) {
   </div>
   `
 
-  card.insertAdjacentHTML('afterend', template)
-
+  createPopup(template)
 }
 
 
 
 (() => { // IIFE to avoid globals
 
+  // Setup browser select
+  // ====================
+  setup()
+
   /*  SEARCH Parameter Handling
    *  ======================
    */

dev/pug/includes/header.pug

@@ -3,6 +3,15 @@ header#main_header
 
   nav#main_nav
       a(href='index.html') Theme List
+      select(id="browser")
+        option(value="select") Select a browser
+        option(value="firefox") Firefox
+        option(value="firefox-esr") Firefox ESR
+        option(value="firefox-beta") Firefox Beta
+        option(value="firefox-dev") Firefox Dev 
+        option(value="firefox-nightly") Firefox Nightly
+        option(value="waterfox") Waterfox
+        option(value="pulse") Pulse browser
       a#js-themeSwitcher(href='#')
         i.fas.fa-moon
       a#js-sortSwitcher(href='#')

dev/scss/components/_buttons.scss

@@ -6,6 +6,7 @@
   border: none;
   background: var(--body-background);
   box-shadow: 0 .5rem 2rem 0 $shadow;
+  cursor: pointer;
 
   font-size: $font-size;
   line-height: $line-height;

dev/scss/components/_install.scss

@@ -0,0 +1,27 @@
+.install-option {
+    max-width: 90vw; max-height: 80vh;
+
+    .btn {
+        width: 100%;
+    }
+}
+
+#browser-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 8px;
+}
+
+.browser-card {
+    display: flex;
+    flex-direction: column;
+
+    background: var(--body-background-darker) !important;
+    cursor: pointer;
+
+    padding: 8px;
+
+    img {
+        width: 100%;
+    }
+}

dev/scss/components/_lightbox.scss

@@ -32,4 +32,17 @@
 
   }
 
+  &.lightbox-card {
+    background: #0008 !important;
+    backdrop-filter: blur(4px);
+
+    div {
+      padding: 16px;
+      border-radius: 4px;
+      background: var(--body-background);
+
+      ul { list-style-type: disc; }
+      ol { list-style-type: decimal; }
+    }
+  }
 }

dev/scss/layout/_header.scss

@@ -18,3 +18,22 @@
   font-weight: $font-weight-bold;
 
 }
+
+select {
+
+  background: var(--body-background);
+  color: var(--font-color);
+  border: none;
+  appearance: button;
+  padding: 0;
+  margin: 0;
+
+}
+
+select option {
+
+    background: var(--body-background);
+    color: var(--font-color);
+    margin: 0;
+
+}

dev/scss/main.scss

@@ -12,6 +12,7 @@
 
 @import 'components/buttons';
 @import 'components/forms';
+@import 'components/install';
 @import 'components/main-nav';
 @import 'components/search';
 @import 'components/card';