lordwelch/downthemall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement a popup menu for the browserAction

Browse Source 
Closes #10
This commit is contained in:
Nils Maier 2019-08-24 06:28:18 +02:00
parent 0463471704
commit 545d78ad61
9 changed files with 149 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
TODO.md
View File

@ -8,7 +8,6 @@ P2
Planned for later. Planned for later.
* Investigate using an action popup for the browser action
* Soft errors and retry logic * 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. * 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) * Delete files (well, as far as the browser allows)

19
lib/background.ts
View File

@ -15,6 +15,7 @@ import {
tabs, tabs,
webNavigation as nav webNavigation as nav
} from "./browser"; } from "./browser";
import { Bus } from "./bus";
const menus = typeof (_menus) !== "undefined" && _menus || _cmenus; 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() { constructor() {
super(); super();
this.onClicked = this.onClicked.bind(this); this.onClicked = this.onClicked.bind(this);
@ -268,6 +269,16 @@ new class Menus extends Handler {
handler.call(this, info, tab).catch(console.error); 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( async onClickedDTARegularInternal(
selectionOnly: boolean, info: any, tab: any) { selectionOnly: boolean, info: any, tab: any) {
try { 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() { (async function init() {
await Prefs.set("last-run", new Date()); await Prefs.set("last-run", new Date());
await filters(); await filters();

3
manifest.json
View File

@ -40,7 +40,8 @@
}, },
"browser_action": { "browser_action": {
"browser_style": false, "browser_style": true,
"default_popup": "windows/popup.html",
"default_icon": { "default_icon": {
"16": "style/icon16.png", "16": "style/icon16.png",
"32": "style/icon32.png", "32": "style/icon32.png",

48
style/popup.css Normal file
View File

@ -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);
}

1
webpack.config.js
View File

@ -25,6 +25,7 @@ module.exports = {
"select": "./windows/select.ts", "select": "./windows/select.ts",
"single": "./windows/single.ts", "single": "./windows/single.ts",
"prefs": "./windows/prefs.ts", "prefs": "./windows/prefs.ts",
"content-popup": "./windows/popup.ts",
"content-gather": "./scripts/gather.ts", "content-gather": "./scripts/gather.ts",
}, },
externals(context, request, callback) { externals(context, request, callback) {

41
windows/popup.html Normal file
View File

@ -0,0 +1,41 @@
<!doctype html>
<head>
<meta charset="utf-8">
<style>
@import url(/style/popup.css);
</style>
<script defer src="/bundles/content-popup.js"></script>
</head>
<body>
<ul>
<li id="regular">
<img srcset="/style/button-regular.png, /style/button-regular@2x.png 2x">
<span data-i18n="dta.regular"></span>
</li>
<li id="turbo">
<img srcset="/style/button-turbo.png, /style/button-turbo@2x.png 2x">
<span data-i18n="dta.turbo">OneClick!</span>
</li>
<li class="sep">
<hr>
</li>
<li id="single">
<span class="icon icon-add"></span>
<span data-i18n="add-download"></span>
</li>
<li class="sep">
<hr>
</li>
<li id="manager">
<img srcset="/style/button-manager.png, /style/button-manager@2x.png 2x">
<span data-i18n="manager.short"></span>
</li>
<li id="prefs">
<span class="icon icon-settings"></span>
<span data-i18n="prefs.short">Preferences</span>
</li>
</ul>
</body>

37
windows/popup.ts Normal file
View File

@ -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();
});
});

2
windows/prefs.html
View File

@ -43,7 +43,7 @@
<article id="tab-general" class="tab"> <article id="tab-general" class="tab">
<fieldset> <fieldset>
<legend data-i18n="pref.ui">UI</legend> <legend data-i18n="pref.ui">UI</legend>
<label><input type="checkbox" id="pref-global-turbo"> <span data-i18n="pref-global-turbo">Global turbo</span></label> <!--<label><input type="checkbox" id="pref-global-turbo"> <span data-i18n="pref-global-turbo">Global turbo</span></label>-->
<label><input type="checkbox" id="pref-finish-notification"> <span data-i18n="pref-finish-notification"></span></label> <label><input type="checkbox" id="pref-finish-notification"> <span data-i18n="pref-finish-notification"></span></label>
<div style="margin-top: 1em;"> <div style="margin-top: 1em;">
<button id="reset-confirmations" data-i18n="reset-confirmations"></button> <button id="reset-confirmations" data-i18n="reset-confirmations"></button>

2
windows/prefs.ts
View File

@ -545,7 +545,7 @@ addEventListener("DOMContentLoaded", () => {
localize(document.documentElement); localize(document.documentElement);
// General // 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-queue-notification", "queue-notification");
new BoolPref("pref-finish-notification", "finish-notification"); new BoolPref("pref-finish-notification", "finish-notification");
new BoolPref("pref-tooltip", "tooltip"); new BoolPref("pref-tooltip", "tooltip");