From 545d78ad615ce39392be59b9194b54fb9f40d6bb Mon Sep 17 00:00:00 2001 From: Nils Maier Date: Sat, 24 Aug 2019 06:28:18 +0200 Subject: [PATCH] Implement a popup menu for the browserAction Closes #10 --- TODO.md | 1 - lib/background.ts | 19 +++++++++++++++++- manifest.json | 3 ++- style/popup.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++ webpack.config.js | 1 + windows/popup.html | 41 +++++++++++++++++++++++++++++++++++++++ windows/popup.ts | 37 +++++++++++++++++++++++++++++++++++ windows/prefs.html | 2 +- windows/prefs.ts | 2 +- 9 files changed, 149 insertions(+), 5 deletions(-) create mode 100644 style/popup.css create mode 100644 windows/popup.html create mode 100644 windows/popup.ts diff --git a/TODO.md b/TODO.md index 78f6727..88d6344 100644 --- a/TODO.md +++ b/TODO.md @@ -8,7 +8,6 @@ P2 Planned for later. -* Investigate using an action popup for the browser action * Soft errors and retry logic * Big caveat: When the server still responds, like 50x errors which would be recoverable, we actually have no way of knowing it did in respond in such a way. See P4 - Handle Errors remarks. * Delete files (well, as far as the browser allows) diff --git a/lib/background.ts b/lib/background.ts index 37d589f..1e4b0ec 100644 --- a/lib/background.ts +++ b/lib/background.ts @@ -15,6 +15,7 @@ import { tabs, webNavigation as nav } from "./browser"; +import { Bus } from "./bus"; const menus = typeof (_menus) !== "undefined" && _menus || _cmenus; @@ -95,7 +96,7 @@ new class Action extends Handler { } }(); -new class Menus extends Handler { +const menuHandler = new class Menus extends Handler { constructor() { super(); this.onClicked = this.onClicked.bind(this); @@ -268,6 +269,16 @@ new class Menus extends Handler { handler.call(this, info, tab).catch(console.error); } + async enumulate(action: string) { + const tab = await tabs.query({active: true}); + if (!tab || !tab.length) { + return; + } + this.onClicked({ + menuItemId: action + }, tab[0]); + } + async onClickedDTARegularInternal( selectionOnly: boolean, info: any, tab: any) { try { @@ -354,6 +365,12 @@ new class Menus extends Handler { } }(); +Bus.on("do-regular", () => menuHandler.enumulate("DTARegular")); +Bus.on("do-turbo", () => menuHandler.enumulate("DTATurbo")); +Bus.on("do-single", () => API.singleRegular(null)); +Bus.on("open-manager", () => openManager(true)); +Bus.on("open-prefs", () => openPrefs()); + (async function init() { await Prefs.set("last-run", new Date()); await filters(); diff --git a/manifest.json b/manifest.json index 744fc3b..547e441 100644 --- a/manifest.json +++ b/manifest.json @@ -40,7 +40,8 @@ }, "browser_action": { - "browser_style": false, + "browser_style": true, + "default_popup": "windows/popup.html", "default_icon": { "16": "style/icon16.png", "32": "style/icon32.png", diff --git a/style/popup.css b/style/popup.css new file mode 100644 index 0000000..9e59a83 --- /dev/null +++ b/style/popup.css @@ -0,0 +1,48 @@ +@import url(common.css); + +html { + box-sizing: content-box !important; +} + +ul { + margin: 1.5ex; + margin-right: 2ex; + padding: 0; + display: grid; + grid-template-columns: auto; + list-style-type: none; + min-width: 14em; +} + +li { + display: flex; + margin: 0; + padding: 1ex; + font-size: 110%; + vertical-align: center; + align-items: center; + border-radius: 4px; +} +li.sep { + display: inline-block; + padding: 0; +} + +li:not(.sep):hover { + background: Highlight; + color: HighlightText; +} + +li > .icon, +li > img { + font-size: 16px; + line-height: 16px; + margin-right: 1ex; + width: 16px; + height: 16px; + object-fit: contain; +} + +#single:not(:hover) > .icon-add { + color: var(--add-color); +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 709c76a..0bdca0f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,6 +25,7 @@ module.exports = { "select": "./windows/select.ts", "single": "./windows/single.ts", "prefs": "./windows/prefs.ts", + "content-popup": "./windows/popup.ts", "content-gather": "./scripts/gather.ts", }, externals(context, request, callback) { diff --git a/windows/popup.html b/windows/popup.html new file mode 100644 index 0000000..15f21d5 --- /dev/null +++ b/windows/popup.html @@ -0,0 +1,41 @@ + + + + + + + + + + + diff --git a/windows/popup.ts b/windows/popup.ts new file mode 100644 index 0000000..664fa4c --- /dev/null +++ b/windows/popup.ts @@ -0,0 +1,37 @@ +"use strict"; +// License: MIT + +import { localize } from "../lib/i18n"; +import { runtime } from "../lib/browser"; + +const $ = document.querySelector.bind(document); + + +addEventListener("DOMContentLoaded", () => { + localize(document.documentElement); + + $("#regular"). addEventListener("click", () => { + runtime.sendMessage("do-regular"); + close(); + }); + + $("#turbo"). addEventListener("click", () => { + runtime.sendMessage("do-turbo"); + close(); + }); + + $("#single"). addEventListener("click", () => { + runtime.sendMessage("do-single"); + close(); + }); + + $("#manager"). addEventListener("click", () => { + runtime.sendMessage("open-manager"); + close(); + }); + + $("#prefs"). addEventListener("click", () => { + runtime.sendMessage("open-prefs"); + close(); + }); +}); diff --git a/windows/prefs.html b/windows/prefs.html index a6f4977..a977425 100644 --- a/windows/prefs.html +++ b/windows/prefs.html @@ -43,7 +43,7 @@
UI - +
diff --git a/windows/prefs.ts b/windows/prefs.ts index 027e586..9db80ca 100644 --- a/windows/prefs.ts +++ b/windows/prefs.ts @@ -545,7 +545,7 @@ addEventListener("DOMContentLoaded", () => { localize(document.documentElement); // General - new BoolPref("pref-global-turbo", "global-turbo"); + //new BoolPref("pref-global-turbo", "global-turbo"); new BoolPref("pref-queue-notification", "queue-notification"); new BoolPref("pref-finish-notification", "finish-notification"); new BoolPref("pref-tooltip", "tooltip");