From c92ef9c02f1e878b56885f69e046a00c196f5baf Mon Sep 17 00:00:00 2001 From: ExE Boss Date: Thu, 13 Apr 2017 22:51:09 +0200 Subject: [PATCH] Implement options --- src/background.js | 13 +++++++----- src/manifest.json | 12 +++++++---- src/options/options.html | 2 +- src/options/options.js | 45 +++++++++++++++++++++++++++++++++++----- src/popup/popup.css | 27 +++++++++++++++++++++++- src/popup/popup.html | 7 +++++-- src/popup/popup.js | 42 +++++++++++++++++++++++++------------ 7 files changed, 117 insertions(+), 31 deletions(-) diff --git a/src/background.js b/src/background.js index 0779bb5..cfca20b 100644 --- a/src/background.js +++ b/src/background.js @@ -76,6 +76,11 @@ function registerPage(message, resolve, privileged) { numeric: true }) }); + browser.runtime.sendMessage({ + type: "pagesChanged" + }).catch((error) => { + console.error(error); + }) } resolve(isNew); return; @@ -86,13 +91,11 @@ browser.runtime.onMessage.addListener((message, sender, resolve) => { switch (messageType) { case "registerPage": { registerPage(message, resolve, true); - break; + return; } case "getPages": { resolve({pages: ABOUT_PAGES.slice()}); return; - } default: { - throw new Error("Invalid message type: " + messageType); - } + } default: {} } }); @@ -103,7 +106,7 @@ browser.runtime.onMessageExternal.addListener((message, sender, resolve) => { registerPage(message, resolve, false); break; } default: { - throw new Error("Invalid message type: " + messageType); + throw "Invalid message type: " + messageType; } } }); diff --git a/src/manifest.json b/src/manifest.json index a8aa4fa..5683275 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -8,7 +8,7 @@ "manifest_version": 2, "name": "Firefox about:about Button", - "version": "0.1.0b1", + "version": "0.1.1", "author": "ExE Boss", "description": "A Firefox exclusive WebExtension to quickly open about:* pages", @@ -30,8 +30,14 @@ "background": { "scripts": ["background.js"] }, + "options_ui": { + "page": "options/options.html", + "chrome_style": true + }, "browser_action": { "browser_style": true, + "default_title": "about:about", + "default_popup": "popup/popup.html", "default_icon": { "16": "icons/16/cog.png", "24": "icons/24/cog.png", @@ -42,8 +48,6 @@ "96": "icons/96/cog.png", "128":"icons/128/cog.png", "256":"icons/256/cog.png" - }, - "default_title": "about:about", - "default_popup": "popup/popup.html" + } } } diff --git a/src/options/options.html b/src/options/options.html index 9813a03..f257af3 100644 --- a/src/options/options.html +++ b/src/options/options.html @@ -8,7 +8,7 @@
- Show disabled buttons + Show greyed-out buttons
diff --git a/src/options/options.js b/src/options/options.js index a6f6da6..61a14e6 100644 --- a/src/options/options.js +++ b/src/options/options.js @@ -1,13 +1,48 @@ /* global browser */ -function restore_options() { +/** @type HTMLInputElement */ +let element_showDisabledButtons; + +function reload() { browser.storage.local.get({ - showDisabledButtons: true + showDisabledButtons: false }).then((settings) => { - document.getElementById("showDisabledButtons").checked = settings.showDisabledButtons; + element_showDisabledButtons.checked = settings.showDisabledButtons; + }).catch((error) => { + element_showDisabledButtons.checked = false; + }); +} + +function saveOptions() { + browser.storage.local.set({ + showDisabledButtons: element_showDisabledButtons.checked }).catch((error) => { - document.getElementById("showDisabledButtons").checked = true; + console.error("Could not save options"); + console.error(error); }); } -document.addEventListener('DOMContentLoaded', () => {restore_options()}); +document.addEventListener("DOMContentLoaded", function () { + element_showDisabledButtons = document.getElementById("showDisabledButtons"); + for(let inputElement of document.getElementsByTagName("input")) { + let save = inputElement.hasAttribute("data-save") ? Boolean(inputElement.getAttribute("data-save")) : true; + if (!save) continue; + inputElement.addEventListener("input", () => {saveOptions();}); + } + for(let inputElement of document.getElementsByTagName("button")) { + let save = inputElement.hasAttribute("data-save") ? Boolean(inputElement.getAttribute("data-save")) : true; + if (!save) continue; + inputElement.addEventListener("click", () => {saveOptions();}); + } + browser.storage.onChanged.addListener((changes, areaName) => { + switch (areaName) { + case "local": { + if (changes.showDisabledButtons !== undefined) { + reload(); + } + break; + } + } + }); + reload(); +}); diff --git a/src/popup/popup.css b/src/popup/popup.css index c4c7daa..0171707 100644 --- a/src/popup/popup.css +++ b/src/popup/popup.css @@ -10,7 +10,14 @@ body { button { width: 100% !important; text-align: left !important; - white-space: nowrap; + white-space: nowrap !important; +} + +#showDisabledButtons { + text-align: center !important; + height: calc(100% + 8px) !important; + overflow-x: visible !important; + white-space: pre-line !important; } button:disabled { @@ -39,3 +46,21 @@ a { .icon.missing { margin-right: 24px !important; } + +#header { + margin: 4px !important; + padding-bottom: 4px !important; +} + +#footer { + margin-top: 0px !important; + margin-left: 4px !important; + margin-right: 4px !important; + margin-bottom: 4px !important; +} + +#status { + margin: 2px !important; + margin-bottom: 4px !important; + white-space: normal !important; +} diff --git a/src/popup/popup.html b/src/popup/popup.html index 522dbe2..84cf071 100644 --- a/src/popup/popup.html +++ b/src/popup/popup.html @@ -8,10 +8,13 @@ - +
- + diff --git a/src/popup/popup.js b/src/popup/popup.js index 32a8bbd..847d2d7 100644 --- a/src/popup/popup.js +++ b/src/popup/popup.js @@ -11,25 +11,38 @@ document.addEventListener('DOMContentLoaded', () => { } } }); + browser.runtime.onMessage.addListener((message, sender, resolve) => { + let messageType = String(message.type); + switch (messageType) { + case "pagesChanged": { + reload(); + } + } + }); + document.getElementById("open-options").addEventListener("click", () => { + browser.runtime.openOptionsPage(); + }); reload(); }); +let use_addons_shim = true; + async function reload() { - let footer = document.getElementById("footer"); + let status = document.getElementById("status"); let table = document.getElementById("main-table"); - table.innerHTML = ""; - footer.innerHTML = ""; + table.textContent = ""; + status.textContent = ""; browser.runtime.sendMessage({ type: "getPages" }).then(async (response) => { response.showDisabledButtons = await browser.storage.local.get({ - showDisabledButtons: true + showDisabledButtons: false }).then((settings) => { return settings.showDisabledButtons; }).catch((error) => { - console.error(error); + console.warn(error); return true; }); return response; @@ -40,35 +53,38 @@ async function reload() { if (showDisabledButtons === undefined) showDisabledButtons = true; if (!showDisabledButtons) { - footer.appendChild(document.createTextNode("Disabled buttons have been hidden")); + status.appendChild(document.createTextNode("Greyed-out buttons have been hidden")); } pages.forEach((page) => { + if (!page[2] && (page[0] !== "about:addons" || (page[0] === "about:addons" && !use_addons_shim)) && !showDisabledButtons) return; + let tr = document.createElement("tr"); let td = document.createElement("td"); let button = document.createElement("button"); let img = generateImg(page[1]); button.setAttribute("type", button); - if (!page[2]) + if (!page[2] && (page[0] !== "about:addons" || (page[0] === "about:addons" && !use_addons_shim))) button.setAttribute("disabled", true); button.appendChild(img); button.appendChild(document.createTextNode(page[0])); button.addEventListener("click", (evt) => { if (page[2]) { browser.tabs.create({url: page[0]}); + } else if (page[0] === "about:addons" && use_addons_shim) { + browser.runtime.openOptionsPage(); } else { browser.tabs.create({url: "/redirect/redirect.html?dest=" + page[0]}); } }); - if (page[2] || (!page[2] && showDisabledButtons)) { - td.appendChild(button); - tr.appendChild(td); - table.appendChild(tr); - } + td.appendChild(button); + tr.appendChild(td); + table.appendChild(tr); }); }).catch(async (error) => { - console.error(error); + console.warn(error); + status.appendChild(document.createTextNode(error)); }); }