diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..4869031 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{ "editor.formatOnSave": false } diff --git a/dev/js/main.js b/dev/js/main.js index 2cd8e1b..1c889e4 100644 --- a/dev/js/main.js +++ b/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(` + + + + + + + + + + `, 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 {
- Download + Download
` @@ -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 = `` + 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) { ` - card.insertAdjacentHTML('afterend', template) - + createPopup(template) } (() => { // IIFE to avoid globals + // Setup browser select + // ==================== + setup() + /* SEARCH Parameter Handling * ====================== */ diff --git a/dev/pug/includes/header.pug b/dev/pug/includes/header.pug index 5e409cb..89af52b 100644 --- a/dev/pug/includes/header.pug +++ b/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='#') diff --git a/dev/scss/components/_buttons.scss b/dev/scss/components/_buttons.scss index 3d89c11..dcdd536 100644 --- a/dev/scss/components/_buttons.scss +++ b/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; diff --git a/dev/scss/components/_install.scss b/dev/scss/components/_install.scss new file mode 100644 index 0000000..fcc4d1a --- /dev/null +++ b/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%; + } +} \ No newline at end of file diff --git a/dev/scss/components/_lightbox.scss b/dev/scss/components/_lightbox.scss index 07364d7..257bb01 100644 --- a/dev/scss/components/_lightbox.scss +++ b/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; } + } + } } diff --git a/dev/scss/layout/_header.scss b/dev/scss/layout/_header.scss index aa51f83..3218b67 100644 --- a/dev/scss/layout/_header.scss +++ b/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; + +} diff --git a/dev/scss/main.scss b/dev/scss/main.scss index 62ab570..0d77889 100644 --- a/dev/scss/main.scss +++ b/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'; diff --git a/docs/assets/css/main.min.css b/docs/assets/css/main.min.css index cefa06c..1dcc9ad 100644 --- a/docs/assets/css/main.min.css +++ b/docs/assets/css/main.min.css @@ -1 +1 @@ -@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,600;1,400;1,600&display=swap");:root{--body-background: #FAFAFC;--body-background-lighter: #fff;--body-background-darker: #DADADC;--font-colour: #303035;--linkc: #3498DB;--linkc-hover: #2980B9;--focus-colour: #3498DB;--focus-thickness: 1px}@media (prefers-color-scheme: dark){:root{--body-background: #303035;--body-background-lighter: #404045;--body-background-darker: #202025;--font-colour: #FAFAFC}}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{-webkit-text-size-adjust:none}mark{background-color:transparent;color:inherit}input::-moz-focus-inner{border:0;padding:0}input,select,textarea{-moz-appearance:none;-webkit-appearance:none;appearance:none}body{margin:0 auto;max-width:1920px;background:var(--body-background)}html.nightmode{--body-background: #303035;--body-background-lighter: #404045;--body-background-darker: #202025;--font-colour: #FAFAFC}html.daymode{--body-background: #FAFAFC;--body-background-lighter: #fff;--body-background-darker: #DADADC;--font-colour: #303035}:root{font-size:62.5%}body{font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1.5rem;font-weight:400;line-height:1.6;color:var(--font-colour)}a{text-decoration:none;color:var(--linkc);transition:color 300ms ease-in-out}a:hover{color:var(--linkc-hover)}a:focus{outline:var(--focus-thickness) solid var(--focus-colour)}h1,h2,h3,h4,strong{font-weight:600}h1{margin:0 0 1.8rem 0;font-size:200%}h2{margin:3rem 0 1.8rem 0;font-size:150%}h3{margin:1.8rem 0 1.2rem 0;font-size:1.5rem}em{font-style:italic}ul,ol{margin-left:3rem}ul{list-style-type:'— '}ol{list-style-type:upper-roman}#main_header{display:flex;flex-direction:column;align-items:center;justify-content:space-between;margin:4.8rem 0;padding:0 3rem}@media (min-width: 792px){#main_header{flex-direction:row}}.header-branding{font-size:150%;font-weight:600}html{scrollbar-width:thin;scrollbar-color:var(--font-colour) var(--body-background)}#main_content{margin:0;padding:3rem}#themes_container{display:grid;gap:3rem;grid-template:auto/repeat(auto-fit, minmax(360px, 1fr))}#main_footer{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:4.8rem 0;padding:0 3rem}#main_footer .linklist a+a{margin-left:1.8rem}.social_links-icon{--linkc: var(--font-colour);margin-right:5px;font-size:150%}.btn{padding:1.2rem 1.8rem;border-radius:12px;border:none;background:var(--body-background);box-shadow:0 0.5rem 2rem 0 rgba(0,0,0,0.2);font-size:1.5rem;line-height:1.6;color:var(--font-colour)}.btn:hover,.btn:focus{background:var(--body-background-darker)}.btn:focus{outline:var(--focus-thickness) solid var(--focus-colour)}input,.btn-submit{padding:.6rem 1.2rem;border-radius:3px;border:1px solid var(--body-background-darker);background:var(--body-background-lighter);font-family:inherit;font-size:inherit;color:var(--font-colour)}input:focus,.btn-submit:focus{outline:var(--focus-thickness) solid var(--focus-colour)}.inputgroup{display:flex;height:100%}#main_nav{display:flex;gap:1.8rem;align-items:center;--linkc: var(--font-colour)}.searchinput{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.searchsubmit{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none;background:var(--body-background-darker)}.card{--linkc: var(--font-colour);--linkc-hover: var(--font-colour);position:relative;display:flex;flex-direction:column;border-radius:12px;background:var(--body-background-lighter);box-shadow:0 0.5rem 2rem 0 rgba(0,0,0,0.2);overflow:hidden}.card header{padding:0 1.2rem;display:flex;align-items:center;justify-content:space-between}.card header h3{margin:1.2rem 0;padding:0}.card .meta{position:relative;width:100%;padding-top:75%;border-radius:12px;background:var(--body-background-darker);overflow:hidden}.card .meta img{position:absolute;top:50%;left:50%;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transform:translate(-50%, -50%);transition:transform 300ms ease-in-out}.card:focus-within .meta img,.card:hover .meta img{transform:translate(-50%, -45%)}.card .meta .description{position:absolute;top:0;left:0;margin:0;padding:0 1.2rem 1.2rem 1.2rem;width:calc(100% - 2.4rem);border-radius:12px;background:var(--body-background-lighter);transform:translateY(-100%);transition:transform 300ms ease-in-out}.card:focus-within .meta .description,.card:hover .meta .description{transform:translateY(0)}.card .button-wrapper{position:absolute;right:0;bottom:0;padding:1.2rem;opacity:0;transition:opacity 300ms ease-in-out}.card:focus-within .button-wrapper,.card:hover .button-wrapper{opacity:1}#lightbox{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;top:0;left:0;z-index:1;width:100vw;height:100vh;background:var(--body-background)}#lightbox img{max-width:90vw;max-height:80vh;border-radius:12px;border:1px solid var(--body-background-darker);background:var(--body-background-darker)}#lightbox .btn-close-lightbox{position:absolute;top:1.8rem;right:1.8rem;display:block}.disclaimer{max-width:120ch} +@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,600;1,400;1,600&display=swap");:root{--body-background: #FAFAFC;--body-background-lighter: #fff;--body-background-darker: #DADADC;--font-colour: #303035;--linkc: #3498DB;--linkc-hover: #2980B9;--focus-colour: #3498DB;--focus-thickness: 1px}@media (prefers-color-scheme: dark){:root{--body-background: #303035;--body-background-lighter: #404045;--body-background-darker: #202025;--font-colour: #FAFAFC}}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{-webkit-text-size-adjust:none}mark{background-color:transparent;color:inherit}input::-moz-focus-inner{border:0;padding:0}input,select,textarea{-moz-appearance:none;-webkit-appearance:none;appearance:none}body{margin:0 auto;max-width:1920px;background:var(--body-background)}html.nightmode{--body-background: #303035;--body-background-lighter: #404045;--body-background-darker: #202025;--font-colour: #FAFAFC}html.daymode{--body-background: #FAFAFC;--body-background-lighter: #fff;--body-background-darker: #DADADC;--font-colour: #303035}:root{font-size:62.5%}body{font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1.5rem;font-weight:400;line-height:1.6;color:var(--font-colour)}a{text-decoration:none;color:var(--linkc);transition:color 300ms ease-in-out}a:hover{color:var(--linkc-hover)}a:focus{outline:var(--focus-thickness) solid var(--focus-colour)}h1,h2,h3,h4,strong{font-weight:600}h1{margin:0 0 1.8rem 0;font-size:200%}h2{margin:3rem 0 1.8rem 0;font-size:150%}h3{margin:1.8rem 0 1.2rem 0;font-size:1.5rem}em{font-style:italic}ul,ol{margin-left:3rem}ul{list-style-type:'— '}ol{list-style-type:upper-roman}#main_header{display:flex;flex-direction:column;align-items:center;justify-content:space-between;margin:4.8rem 0;padding:0 3rem}@media (min-width: 792px){#main_header{flex-direction:row}}.header-branding{font-size:150%;font-weight:600}select{background:var(--body-background);color:var(--font-color);border:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;padding:0;margin:0}select option{background:var(--body-background);color:var(--font-color);margin:0}html{scrollbar-width:thin;scrollbar-color:var(--font-colour) var(--body-background)}#main_content{margin:0;padding:3rem}#themes_container{display:grid;gap:3rem;grid-template:auto/repeat(auto-fit, minmax(360px, 1fr))}#main_footer{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:4.8rem 0;padding:0 3rem}#main_footer .linklist a+a{margin-left:1.8rem}.social_links-icon{--linkc: var(--font-colour);margin-right:5px;font-size:150%}.btn{padding:1.2rem 1.8rem;border-radius:12px;border:none;background:var(--body-background);box-shadow:0 0.5rem 2rem 0 rgba(0,0,0,0.2);cursor:pointer;font-size:1.5rem;line-height:1.6;color:var(--font-colour)}.btn:hover,.btn:focus{background:var(--body-background-darker)}.btn:focus{outline:var(--focus-thickness) solid var(--focus-colour)}input,.btn-submit{padding:.6rem 1.2rem;border-radius:3px;border:1px solid var(--body-background-darker);background:var(--body-background-lighter);font-family:inherit;font-size:inherit;color:var(--font-colour)}input:focus,.btn-submit:focus{outline:var(--focus-thickness) solid var(--focus-colour)}.inputgroup{display:flex;height:100%}.install-option{max-width:90vw;max-height:80vh}.install-option .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}.browser-card img{width:100%}#main_nav{display:flex;gap:1.8rem;align-items:center;--linkc: var(--font-colour)}.searchinput{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.searchsubmit{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none;background:var(--body-background-darker)}.card{--linkc: var(--font-colour);--linkc-hover: var(--font-colour);position:relative;display:flex;flex-direction:column;border-radius:12px;background:var(--body-background-lighter);box-shadow:0 0.5rem 2rem 0 rgba(0,0,0,0.2);overflow:hidden}.card header{padding:0 1.2rem;display:flex;align-items:center;justify-content:space-between}.card header h3{margin:1.2rem 0;padding:0}.card .meta{position:relative;width:100%;padding-top:75%;border-radius:12px;background:var(--body-background-darker);overflow:hidden}.card .meta img{position:absolute;top:50%;left:50%;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transform:translate(-50%, -50%);transition:transform 300ms ease-in-out}.card:focus-within .meta img,.card:hover .meta img{transform:translate(-50%, -45%)}.card .meta .description{position:absolute;top:0;left:0;margin:0;padding:0 1.2rem 1.2rem 1.2rem;width:calc(100% - 2.4rem);border-radius:12px;background:var(--body-background-lighter);transform:translateY(-100%);transition:transform 300ms ease-in-out}.card:focus-within .meta .description,.card:hover .meta .description{transform:translateY(0)}.card .button-wrapper{position:absolute;right:0;bottom:0;padding:1.2rem;opacity:0;transition:opacity 300ms ease-in-out}.card:focus-within .button-wrapper,.card:hover .button-wrapper{opacity:1}#lightbox{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;top:0;left:0;z-index:1;width:100vw;height:100vh;background:var(--body-background)}#lightbox img{max-width:90vw;max-height:80vh;border-radius:12px;border:1px solid var(--body-background-darker);background:var(--body-background-darker)}#lightbox .btn-close-lightbox{position:absolute;top:1.8rem;right:1.8rem;display:block}#lightbox.lightbox-card{background:#0008 !important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#lightbox.lightbox-card div{padding:16px;border-radius:4px;background:var(--body-background)}#lightbox.lightbox-card div ul{list-style-type:disc}#lightbox.lightbox-card div ol{list-style-type:decimal}.disclaimer{max-width:120ch} diff --git a/docs/assets/img/themes/always-fullscreen-firefox.webp b/docs/assets/img/themes/always-fullscreen-firefox.webp index 44d854b..020abe0 100644 Binary files a/docs/assets/img/themes/always-fullscreen-firefox.webp and b/docs/assets/img/themes/always-fullscreen-firefox.webp differ diff --git a/docs/assets/js/browser.js b/docs/assets/js/browser.js new file mode 100644 index 0000000..6b808ad --- /dev/null +++ b/docs/assets/js/browser.js @@ -0,0 +1,37 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.getCurrentBrowser = getCurrentBrowser; +exports.setCurrentBrowser = setCurrentBrowser; +exports.setup = setup; +// Handles keeping track of what browser is used and displaying it in the UI +//@ts-check +// @ts-ignore +var +/** @type {HTMLSelectElement} */ +choice = document.getElementById('browser'); + +function getCurrentBrowser() { + return localStorage.getItem('browser') || 'select'; +} + +function setCurrentBrowser(browser) { + var choiceTrigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + localStorage.setItem('browser', browser); + + if (!choiceTrigger) { + updateChoicePrompt(); + } +} + +function setup() { + choice.onchange = function () { + setCurrentBrowser(choice.value, true); + }; +} + +function updateChoicePrompt() { + choice.value = getCurrentBrowser(); +} \ No newline at end of file diff --git a/docs/assets/js/browser.min.js b/docs/assets/js/browser.min.js new file mode 100644 index 0000000..95f2677 --- /dev/null +++ b/docs/assets/js/browser.min.js @@ -0,0 +1 @@ +"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getCurrentBrowser=getCurrentBrowser,exports.setCurrentBrowser=setCurrentBrowser,exports.setup=setup;var choice=document.getElementById("browser");function getCurrentBrowser(){return localStorage.getItem("browser")||"select"}function setCurrentBrowser(e){var r=arguments.length>1&&void 0!==arguments[1]&&arguments[1];localStorage.setItem("browser",e),r||updateChoicePrompt()}function setup(){choice.onchange=function(){setCurrentBrowser(choice.value,!0)}}function updateChoicePrompt(){choice.value=getCurrentBrowser()} \ No newline at end of file diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js index f9815b9..5eada52 100644 --- a/docs/assets/js/main.js +++ b/docs/assets/js/main.js @@ -1,11 +1,65 @@ "use strict"; +function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; } + +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } + +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } +//@ts-check +// ============================================================================ +// Current browser selector +// @ts-ignore +var +/** @type {HTMLSelectElement} */ +choice = document.getElementById('browser'); + +function getCurrentBrowser() { + return localStorage.getItem('browser') || 'select'; +} + +function setCurrentBrowser(browser) { + var choiceTrigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + localStorage.setItem('browser', browser); + + if (!choiceTrigger) { + updateChoicePrompt(); + } +} + +function setup() { + choice.onchange = function () { + setCurrentBrowser(choice.value, true); + }; +} + +function updateChoicePrompt() { + choice.value = getCurrentBrowser(); // @ts-ignore + + var + /** @type {HTMLSelectElement} */ + prompt = document.getElementById('popup-browser'); + + if (prompt) { + prompt.value = getCurrentBrowser(); + } // @ts-ignore + + + var + /** @type {HTMLButtonElement} */ + prompt_next = document.getElementById('popup-browser-next'); + + if (prompt_next) { + prompt_next.disabled = choice.value === 'select'; + } +} + function sanatise(unsanatisedInput) { var tempEl = document.createElement('div'); tempEl.innerText = unsanatisedInput; @@ -13,6 +67,114 @@ function sanatise(unsanatisedInput) { return sanatisedOutput; } +var Popup = /*#__PURE__*/function () { + function Popup(data) { + _classCallCheck(this, Popup); + + this._title = sanatise(data.title); + this._description = sanatise(data.description); + this._link = sanatise(data.link); + this._image = sanatise(data.image); + this._data = data; + } + + _createClass(Popup, [{ + key: "render", + value: function render() { + var _this = this; + + var stableEnableOptions = ['toolkit.legacyUserProfileCustomizations.stylesheets', 'layers.acceleration.force-enabled', 'gfx.webrender.all', 'gfx.webrender.enabled', 'layout.css.backdrop-filter.enabled', 'svg.context-properties.content.enabled']; + var nightlyEnableOptions = ['extensions.experiments.enabled'].concat(stableEnableOptions); + removePopup(); + createPopup("\n
\n

Select a browser

\n\n
\n
\n \"Firefox\n

Firefox Stable or Beta

\n
\n
\n \"Firefox\n

Firefox Developer Edition and Nightly

\n
\n
\n \"Waterfox\n

Waterfox or Pulse browser

\n
\n
\n
\n\n
\n

Installing on Firefox Stable and Beta

\n\n
    \n
  1. Download the theme from the git repository. If it is a Github repo, you can download it by clicking the big green \"Code\" button and click \"Download.zip\"
    2. \n
  2. Open about:config
    3. \n
  3. A dialog will warn you, but ignore t, just doit. Press the \"I accept the risk!\" button.
    4. \n
  4. Search for these and enable each of them:\n
      \n ").concat(stableEnableOptions.map(function (option) { + return "
    • ".concat(option, "
      • "); + }).join(''), "\n
    \n
    5. \n
  5. Go to your Firefox profile:\n
      \n
    • Linux - $HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/.
      • \n
    • Windows 10 - C:Users<USERNAME>AppDataRoamingMozillaFirefoxProfilesXXXXXXX.default-XXXXXX.
      • \n
    • macOS - Users/<USERNAME>/Library/Application Support/Firefox/Profiles/XXXXXXX.default-XXXXXXX.
      • \n
    \n
    6. \n
  6. \n Create a folder and name it chrome, then assuming that \n you already have cloned this repo, just copy the theme to \n chrome folder.\n
    7. \n
  7. Restart Firefox
    8. \n
\n
\n\n
\n

Installing on Firefox Developer Edition and Nightly

\n\n
    \n
  1. Open about:config
    2. \n
  2. A dialog will warn you, but ignore t, just doit. Press the \"I accept the risk!\" button.
    3. \n
  3. Search for xpinstall.signatures.required and disable it.
    4. \n
  4. Search for these and enable each of them:\n
      \n ").concat(nightlyEnableOptions.map(function (option) { + return "
    • ".concat(option, "
      • "); + }).join(''), "\n
    \n
    5. \n
  5. \n You are now ready to install the theme. Simply clock the button below.\n
    6. \n
\n\n
\n
\n\n
\n

Installing on Waterfox and Pulse Browser

\n\n

You are now ready to install the theme. Simply clock the button below.

\n\n
\n
\n\n \n "), true); + document.getElementById('select-stable').addEventListener('click', function () { + return _this.changeBrowser('firefox-stable', true); + }); + document.getElementById('select-dev').addEventListener('click', function () { + return _this.changeBrowser('firefox-dev', true); + }); + document.getElementById('select-waterfox').addEventListener('click', function () { + return _this.changeBrowser('waterfox', true); + }); // Prevent the popup from closing when the user clicks on a UI element + + document.getElementById('select-browser').addEventListener('click', function (e) { + return e.preventDefault(); + }); + console.log(this._data); // If there is no experiment xpi support, we should send them straight to + // the stable instructions + + var 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; + var addonClick = document.getElementsByClassName('addon-install-options'); + + var _iterator = _createForOfIteratorHelper(addonClick), + _step; + + try { + for (_iterator.s(); !(_step = _iterator.n()).done;) { + var container = _step.value; + + var _loop = function _loop(style) { + var button = document.createElement('button'); + button.classList.add('btn'); + button.innerText = style; + button.addEventListener('click', function () { + return location.href = _this._data.experiment_xpi[style]; + }); + container.appendChild(button); + }; + + for (var style in this._data.experiment_xpi) { + _loop(style); + } + } + } catch (err) { + _iterator.e(err); + } finally { + _iterator.f(); + } + } + }, { + key: "changeBrowser", + value: function changeBrowser(selectedBrowser) { + var save = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + if (save) setCurrentBrowser(selectedBrowser); + var oldElements = ['stable-browser', 'select-browser', 'nightly-browser', 'forked-browser']; + oldElements.forEach(function (element) { + return 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: ".concat(selectedBrowser)); + } + } + }]); + + return Popup; +}(); // Global variable to store theme data +// TODO: Fix this gankness with something a bit better + + +var themeData = {}; + var Card = /*#__PURE__*/function () { function Card(data, id) { _classCallCheck(this, Card); @@ -22,12 +184,13 @@ var Card = /*#__PURE__*/function () { this._description = sanatise(data.description); this._link = sanatise(data.link); this._image = sanatise(data.image); + themeData[this._id] = data; } _createClass(Card, [{ key: "render", value: function render(outputContainer) { - var template = "\n
\n
\n

").concat(this._title, "

\n \n \n \n
\n
\n \n \n

").concat(this._description, "

\n \n
\n
\n \n Download\n
\n
\n "); + var template = "\n
\n
\n

").concat(this._title, "

\n \n \n \n
\n
\n \n \n

").concat(this._description, "

\n \n
\n
\n \n Download\n
\n
\n "); outputContainer.insertAdjacentHTML('beforeend', template); } }]); @@ -35,24 +198,38 @@ var Card = /*#__PURE__*/function () { return Card; }(); -var removeLightbox = function removeLightbox() { - return document.body.getElementsById('lightbox').remove(); +var removePopup = function removePopup() { + var _document$getElementB; + + return (_document$getElementB = document.getElementById('lightbox')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove(); }; +var removeLightbox = removePopup; + +function createPopup(content) { + var isCard = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + var container = document.getElementById('themes_container'); + var template = "
").concat(content, "
"); + container.innerHTML += template; +} + function createLightbox(id) { var card = document.getElementById("theme-".concat(id)); var themeTitle = card.querySelector('h3'); var img = card.querySelector('img'); var template = "\n
\n

".concat(themeTitle.innerText, "

\n \n \n
\n "); - card.insertAdjacentHTML('afterend', template); + createPopup(template); } (function () { // IIFE to avoid globals - + // Setup browser select + // ==================== + setup(); /* SEARCH Parameter Handling * ====================== */ + document.getElementById('searchInput').addEventListener('keydown', function (e) { if (e.key === "Enter") toggleSortType(false); }); diff --git a/docs/assets/js/main.min.js b/docs/assets/js/main.min.js index 224a61b..4c616d3 100644 --- a/docs/assets/js/main.min.js +++ b/docs/assets/js/main.min.js @@ -1 +1 @@ -"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var n=0;n\n
\n

').concat(this._title,'

\n \n \n \n
\n
\n \n \n

').concat(this._description,'

\n \n
\n
\n \n Download\n
\n \n ');e.insertAdjacentHTML("beforeend",t)}}]),e}(),removeLightbox=function(){return document.body.getElementsById("lightbox").remove()};function createLightbox(e){var t=document.getElementById("theme-".concat(e)),n=t.querySelector("h3"),a=t.querySelector("img"),o='\n \n ');t.insertAdjacentHTML("afterend",o)}!function(){document.getElementById("searchInput").addEventListener("keydown",function(e){"Enter"===e.key&&n(!1)}),document.getElementById("searchButton").addEventListener("click",function(){return n(!1)});var e=document.getElementById("js-sortSwitcher");function t(e){return localStorage.sort=e,n(!1)}function n(n){document.querySelectorAll(".card")&&document.querySelectorAll(".card").forEach(function(e){return e.remove()}),fetch("themes.json").then(function(e){return e.json()}).then(function(o){var c=document.getElementById("searchInput").value;if(c){return Object.entries(o).filter(function(e){return t="".concat(e[1].title,", ").concat(e[1].tags),n=c,t.toLowerCase().indexOf(n.toLowerCase())>-1;var t,n}).forEach(function(e){new Card(e[1],+e[0]).render(a)}),void(e.title='"'.concat(c,'"'))}switch(localStorage.sort){case"latest":if(n)return t("random");o.reverse();break;case"random":if(n)return t("oldest");for(var r=o.length-1;r>0;r--){var i=Math.floor(Math.random()*(r+1)),s=[o[i],o[r]];o[r]=s[0],o[i]=s[1]}break;default:if(n)return t("latest")}e.title=localStorage.sort,o.forEach(function(e,t){new Card(e,t).render(a)})})}e.addEventListener("click",function(){return n(!0)}),localStorage.sort||(localStorage.sort="latest");var a=document.getElementById("themes_container");a&&n(!1);var o=window.matchMedia("(prefers-color-scheme: dark)").matches?"night":"day",c=document.getElementById("js-themeSwitcher"),r=c.querySelector("i");localStorage.theme||(localStorage.theme="day"===o?"day":"night"),"night"===localStorage.theme?(r.classList.toggle("fa-sun"),r.classList.toggle("fa-moon"),document.documentElement.classList.add("nightmode")):document.documentElement.classList.add("daymode"),c.addEventListener("click",function(){return document.documentElement.classList.toggle("nightmode"),document.documentElement.classList.toggle("daymode"),r.classList.toggle("fa-sun"),r.classList.toggle("fa-moon"),void("night"===localStorage.theme?localStorage.theme="day":localStorage.theme="night")})}(); \ No newline at end of file +"use strict";function _createForOfIteratorHelper(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var o=0,r=function(){};return{s:r,n:function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}},e:function(e){throw e},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,l=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){l=!0,i=e},f:function(){try{a||null==n.return||n.return()}finally{if(l)throw i}}}}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n1&&void 0!==arguments[1]&&arguments[1];localStorage.setItem("browser",e),t||updateChoicePrompt()}function setup(){choice.onchange=function(){setCurrentBrowser(choice.value,!0)}}function updateChoicePrompt(){choice.value=getCurrentBrowser();var e=document.getElementById("popup-browser");e&&(e.value=getCurrentBrowser());var t=document.getElementById("popup-browser-next");t&&(t.disabled="select"===choice.value)}function sanatise(e){var t=document.createElement("div");return t.innerText=e,t.innerHTML}var Popup=function(){function e(t){_classCallCheck(this,e),this._title=sanatise(t.title),this._description=sanatise(t.description),this._link=sanatise(t.link),this._image=sanatise(t.image),this._data=t}return _createClass(e,[{key:"render",value:function(){var e=this,t=["toolkit.legacyUserProfileCustomizations.stylesheets","layers.acceleration.force-enabled","gfx.webrender.all","gfx.webrender.enabled","layout.css.backdrop-filter.enabled","svg.context-properties.content.enabled"],n=["extensions.experiments.enabled"].concat(t);removePopup(),createPopup('\n \n\n \n\n \n\n \n\n \n '),!0),document.getElementById("select-stable").addEventListener("click",function(){return e.changeBrowser("firefox-stable",!0)}),document.getElementById("select-dev").addEventListener("click",function(){return e.changeBrowser("firefox-dev",!0)}),document.getElementById("select-waterfox").addEventListener("click",function(){return e.changeBrowser("waterfox",!0)}),document.getElementById("select-browser").addEventListener("click",function(e){return e.preventDefault()}),console.log(this._data);var o=this._data.experiment_xpi?getCurrentBrowser():"firefox";if("select"===o?document.getElementById("select-browser").style.display="block":this.changeBrowser(o),this._data.experiment_xpi){var r,i=_createForOfIteratorHelper(document.getElementsByClassName("addon-install-options"));try{for(i.s();!(r=i.n()).done;){var a=r.value,l=function(t){var n=document.createElement("button");n.classList.add("btn"),n.innerText=t,n.addEventListener("click",function(){return location.href=e._data.experiment_xpi[t]}),a.appendChild(n)};for(var c in this._data.experiment_xpi)l(c)}}catch(e){i.e(e)}finally{i.f()}}}},{key:"changeBrowser",value:function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1]&&setCurrentBrowser(e);if(["stable-browser","select-browser","nightly-browser","forked-browser"].forEach(function(e){return document.getElementById(e).style.display="none"}),"firefox"===e||"firefox-beta"===e||"firefox-esr"===e)document.getElementById("stable-browser").style.display="block";else if("firefox-nightly"===e||"firefox-dev"===e)document.getElementById("nightly-browser").style.display="block";else{if("waterfox"!==e&&"pulse"!==e)throw new Error("Unknown browser: ".concat(e));document.getElementById("forked-browser").style.display="block"}}}]),e}(),themeData={},Card=function(){function e(t,n){_classCallCheck(this,e),this._id=n+1,this._title=sanatise(t.title),this._description=sanatise(t.description),this._link=sanatise(t.link),this._image=sanatise(t.image),themeData[this._id]=t}return _createClass(e,[{key:"render",value:function(e){var t='\n
\n
\n

').concat(this._title,'

\n \n \n \n
\n
\n \n \n

').concat(this._description,'

\n \n
\n
\n \n Download\n
\n
\n ');e.insertAdjacentHTML("beforeend",t)}}]),e}(),removePopup=function(){var e;return null===(e=document.getElementById("lightbox"))||void 0===e?void 0:e.remove()},removeLightbox=removePopup;function createPopup(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=document.getElementById("themes_container"),o='");n.innerHTML+=o}function createLightbox(e){var t=document.getElementById("theme-".concat(e)),n=t.querySelector("h3"),o=t.querySelector("img");createPopup('\n \n '))}!function(){setup(),document.getElementById("searchInput").addEventListener("keydown",function(e){"Enter"===e.key&&n(!1)}),document.getElementById("searchButton").addEventListener("click",function(){return n(!1)});var e=document.getElementById("js-sortSwitcher");function t(e){return localStorage.sort=e,n(!1)}function n(n){document.querySelectorAll(".card")&&document.querySelectorAll(".card").forEach(function(e){return e.remove()}),fetch("themes.json").then(function(e){return e.json()}).then(function(r){var i=document.getElementById("searchInput").value;if(i){return Object.entries(r).filter(function(e){return t="".concat(e[1].title,", ").concat(e[1].tags),n=i,t.toLowerCase().indexOf(n.toLowerCase())>-1;var t,n}).forEach(function(e){new Card(e[1],+e[0]).render(o)}),void(e.title='"'.concat(i,'"'))}switch(localStorage.sort){case"latest":if(n)return t("random");r.reverse();break;case"random":if(n)return t("oldest");for(var a=r.length-1;a>0;a--){var l=Math.floor(Math.random()*(a+1)),c=[r[l],r[a]];r[a]=c[0],r[l]=c[1]}break;default:if(n)return t("latest")}e.title=localStorage.sort,r.forEach(function(e,t){new Card(e,t).render(o)})})}e.addEventListener("click",function(){return n(!0)}),localStorage.sort||(localStorage.sort="latest");var o=document.getElementById("themes_container");o&&n(!1);var r=window.matchMedia("(prefers-color-scheme: dark)").matches?"night":"day",i=document.getElementById("js-themeSwitcher"),a=i.querySelector("i");localStorage.theme||(localStorage.theme="day"===r?"day":"night"),"night"===localStorage.theme?(a.classList.toggle("fa-sun"),a.classList.toggle("fa-moon"),document.documentElement.classList.add("nightmode")):document.documentElement.classList.add("daymode"),i.addEventListener("click",function(){return document.documentElement.classList.toggle("nightmode"),document.documentElement.classList.toggle("daymode"),a.classList.toggle("fa-sun"),a.classList.toggle("fa-moon"),void("night"===localStorage.theme?localStorage.theme="day":localStorage.theme="night")})}(); \ No newline at end of file diff --git a/docs/disclaimer.html b/docs/disclaimer.html index 96ae8f0..3c30660 100644 --- a/docs/disclaimer.html +++ b/docs/disclaimer.html @@ -12,7 +12,17 @@

FirefoxCSS Store

-