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

Reduce load size of popup

Browse Source
This commit is contained in:
Nils Maier 2019-08-25 14:27:26 +02:00
parent 33bde621f9
commit 112d37deb0
4 changed files with 66 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lib/i18n.ts
View File

@ -3,12 +3,20 @@
import {memoize} from "./memoize"; import {memoize} from "./memoize";
declare let browser: any;
declare let chrome: any;
function load() { function load() {
try { try {
// eslint-disable-next-line @typescript-eslint/no-var-requires // eslint-disable-next-line @typescript-eslint/no-var-requires
const {i18n} = require("webextension-polyfill"); if (typeof browser !== "undefined" && browser.i18n) {
return browser.i18n;
return i18n; }
if (typeof chrome !== "undefined" && chrome.i18n) {
return chrome.i18n;
}
throw new Error("not in a webext");
} }
catch (ex) { catch (ex) {
// We might be running under node for tests // We might be running under node for tests

48
style/popup.css
View File

@ -1,48 +0,0 @@
@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);
}

52
windows/popup.html
View File

@ -3,8 +3,56 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
@import url(/style/popup.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);
}
</style>
<style>
@import url(/style/common.css);
</style> </style>
<script defer src="/bundles/content-popup.js"></script> <script defer src="/bundles/content-popup.js"></script>
</head> </head>
@ -49,4 +97,4 @@
<span data-i18n="prefs.short">Preferences</span> <span data-i18n="prefs.short">Preferences</span>
</li> </li>
</ul> </ul>
</body> </body>

6
windows/popup.ts
View File

@ -2,7 +2,11 @@
// License: MIT // License: MIT
import { localize } from "../lib/i18n"; import { localize } from "../lib/i18n";
import { runtime } from "../lib/browser";
declare let browser: any;
declare let chrome: any;
const runtime = browser !== "undefined" ? browser.runtime : chrome.runtime;
addEventListener("DOMContentLoaded", () => { addEventListener("DOMContentLoaded", () => {
localize(document.documentElement); localize(document.documentElement);