From 1471aae8927c20d646cc2aa5ab0e20c1a7f2c0ca Mon Sep 17 00:00:00 2001
From: Florian Dold <florian.dold@gmail.com>
Date: Tue, 7 Apr 2020 01:23:29 +0530
Subject: linter / simpler webextension pack

---
 .eslintrc.js                            |   6 ++
 Makefile                                |   8 +-
 src/operations/exchanges.ts             |  13 ++-
 src/operations/history.ts               |   8 +-
 src/util/query.ts                       |   4 +-
 src/util/timer.ts                       |  16 +--
 src/webex/pages/add-auditor.tsx         |   8 +-
 src/webex/pages/popup.tsx               |  11 +-
 src/webex/renderHtml.tsx                |   4 +-
 src/webex/wxBackend.ts                  |  12 +--
 webextension/manifest.json              |   4 +-
 webextension/pack.sh                    |  20 ++++
 webextension/static/add-auditor.html    |   4 +-
 webextension/static/auditors.html       |   2 +-
 webextension/static/background.html     |   2 +-
 webextension/static/benchmark.html      |   4 +-
 webextension/static/pay.html            |   8 +-
 webextension/static/payback.html        |   7 +-
 webextension/static/popup.css           | 185 --------------------------------
 webextension/static/popup.html          |  10 +-
 webextension/static/refund.html         |   7 +-
 webextension/static/reset-required.html |   7 +-
 webextension/static/return-coins.html   |   8 +-
 webextension/static/style/popup.css     | 185 ++++++++++++++++++++++++++++++++
 webextension/static/tip.html            |   7 +-
 webextension/static/welcome.html        |   7 +-
 webextension/static/withdraw.html       |   8 +-
 27 files changed, 285 insertions(+), 280 deletions(-)
 create mode 100755 webextension/pack.sh
 delete mode 100644 webextension/static/popup.css
 create mode 100644 webextension/static/style/popup.css

diff --git a/.eslintrc.js b/.eslintrc.js
index c3e588250..1cd05edd3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,6 +8,12 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
   ],
+  settings: {
+    "react": {
+      "version": "16.9.6",
+    },
+
+  },
   rules: {
     "no-constant-condition": ["error", { "checkLoops": false }],
     "prefer-const": ["warn", { destructuring: "all" }],
diff --git a/Makefile b/Makefile
index 873282ecb..46e7e0b2e 100644
--- a/Makefile
+++ b/Makefile
@@ -44,11 +44,7 @@ yarn-install:
 
 .PHONY: webextensions
 webextensions: rollup
-	rm -rf dist/wx
-	mkdir dist/wx
-	cp webextension/manifest.json dist/wx/
-	cp -r webextension/static/* dist/wx/
-	cp -r dist/webextension/* dist/wx/
+	./webextension/pack.sh
 
 .PHONY: i18n
 i18n: yarn-install
@@ -86,4 +82,4 @@ rollup: tsc
 
 .PHONY: lint
 lint:
-	./node_modules/.bin/eslint 'src/**/*'
+	./node_modules/.bin/eslint 'src/**/*' --ext '.js,.ts,.tsx'
diff --git a/src/operations/exchanges.ts b/src/operations/exchanges.ts
index 53b250a8e..27fed0b6c 100644
--- a/src/operations/exchanges.ts
+++ b/src/operations/exchanges.ts
@@ -31,7 +31,6 @@ import {
   WireFee,
   ExchangeUpdateReason,
   ExchangeUpdatedEventRecord,
-  CoinStatus,
 } from "../types/dbTypes";
 import { canonicalizeBaseUrl } from "../util/helpers";
 import * as Amounts from "../util/amounts";
@@ -81,7 +80,7 @@ async function setExchangeError(
   err: OperationError,
 ): Promise<void> {
   console.log(`last error for exchange ${baseUrl}:`, err);
-  const mut = (exchange: ExchangeRecord) => {
+  const mut = (exchange: ExchangeRecord): ExchangeRecord => {
     exchange.lastError = err;
     return exchange;
   };
@@ -284,7 +283,7 @@ async function updateExchangeWithKeys(
 async function updateExchangeFinalize(
   ws: InternalWalletState,
   exchangeBaseUrl: string,
-) {
+): Promise<void> {
   const exchange = await ws.db.get(Stores.exchanges, exchangeBaseUrl);
   if (!exchange) {
     return;
@@ -316,7 +315,7 @@ async function updateExchangeFinalize(
 async function updateExchangeWithTermsOfService(
   ws: InternalWalletState,
   exchangeBaseUrl: string,
-) {
+): Promise<void> {
   const exchange = await ws.db.get(Stores.exchanges, exchangeBaseUrl);
   if (!exchange) {
     return;
@@ -357,7 +356,7 @@ export async function acceptExchangeTermsOfService(
   ws: InternalWalletState,
   exchangeBaseUrl: string,
   etag: string | undefined,
-) {
+): Promise<void> {
   await ws.db.runWithWriteTransaction([Stores.exchanges], async (tx) => {
     const r = await tx.get(Stores.exchanges, exchangeBaseUrl);
     if (!r) {
@@ -377,7 +376,7 @@ export async function acceptExchangeTermsOfService(
 async function updateExchangeWithWireInfo(
   ws: InternalWalletState,
   exchangeBaseUrl: string,
-) {
+): Promise<void> {
   const exchange = await ws.db.get(Stores.exchanges, exchangeBaseUrl);
   if (!exchange) {
     return;
@@ -461,7 +460,7 @@ export async function updateExchangeFromUrl(
   baseUrl: string,
   forceNow = false,
 ): Promise<ExchangeRecord> {
-  const onOpErr = (e: OperationError) => setExchangeError(ws, baseUrl, e);
+  const onOpErr = (e: OperationError): Promise<void> => setExchangeError(ws, baseUrl, e);
   return await guardOperationException(
     () => updateExchangeFromUrlImpl(ws, baseUrl, forceNow),
     onOpErr,
diff --git a/src/operations/history.ts b/src/operations/history.ts
index b043e4a90..efbfbf377 100644
--- a/src/operations/history.ts
+++ b/src/operations/history.ts
@@ -20,11 +20,9 @@
 import { InternalWalletState } from "./state";
 import {
   Stores,
-  TipRecord,
   ProposalStatus,
   ProposalRecord,
   PlanchetRecord,
-  CoinRecord,
 } from "../types/dbTypes";
 import { Amounts } from "../util/amounts";
 import { AmountJson } from "../util/amounts";
@@ -40,14 +38,14 @@ import {
   VerboseRefreshDetails,
 } from "../types/history";
 import { assertUnreachable } from "../util/assertUnreachable";
-import { TransactionHandle, Store } from "../util/query";
+import { TransactionHandle } from "../util/query";
 import { timestampCmp } from "../util/time";
 import { summarizeReserveHistory } from "../util/reserveHistoryUtil";
 
 /**
  * Create an event ID from the type and the primary key for the event.
  */
-function makeEventId(type: HistoryEventType, ...args: string[]) {
+function makeEventId(type: HistoryEventType, ...args: string[]): string {
   return type + ";" + args.map((x) => encodeURIComponent(x)).join(";");
 }
 
@@ -72,7 +70,7 @@ async function collectProposalHistory(
   tx: TransactionHandle,
   history: HistoryEvent[],
   historyQuery?: HistoryQuery,
-) {
+): Promise<void> {
   tx.iter(Stores.proposals).forEachAsync(async (proposal) => {
     const status = proposal.proposalStatus;
     switch (status) {
diff --git a/src/util/query.ts b/src/util/query.ts
index d11b79a96..256395d42 100644
--- a/src/util/query.ts
+++ b/src/util/query.ts
@@ -292,7 +292,7 @@ export class TransactionHandle {
     return requestToPromise(req);
   }
 
-  mutate<T>(store: Store<T>, key: any, f: (x: T) => T | undefined) {
+  mutate<T>(store: Store<T>, key: any, f: (x: T) => T | undefined): Promise<void> {
     const req = this.tx.objectStore(store.name).openCursor(key);
     return applyMutation(req, f);
   }
@@ -438,7 +438,7 @@ export function openDatabase(
 export class Database {
   constructor(private db: IDBDatabase) {}
 
-  static deleteDatabase(idbFactory: IDBFactory, dbName: string) {
+  static deleteDatabase(idbFactory: IDBFactory, dbName: string): void {
     idbFactory.deleteDatabase(dbName);
   }
 
diff --git a/src/util/timer.ts b/src/util/timer.ts
index a1712b03f..18132a812 100644
--- a/src/util/timer.ts
+++ b/src/util/timer.ts
@@ -1,5 +1,3 @@
-import { Duration } from "./time";
-
 /*
  This file is part of GNU Taler
  (C) 2017-2019 Taler Systems S.A.
@@ -23,6 +21,12 @@ import { Duration } from "./time";
  * this abstracts over these differences.
  */
 
+/**
+ * Imports.
+ */
+import { Duration } from "./time";
+
+
 /**
  * Cancelable timer.
  */
@@ -33,7 +37,7 @@ export interface TimerHandle {
 class IntervalHandle {
   constructor(public h: any) {}
 
-  clear() {
+  clear(): void {
     clearInterval(this.h);
   }
 }
@@ -41,7 +45,7 @@ class IntervalHandle {
 class TimeoutHandle {
   constructor(public h: any) {}
 
-  clear() {
+  clear(): void {
     clearTimeout(this.h);
   }
 }
@@ -55,7 +59,7 @@ export const performanceNow: () => number = (() => {
       const t = process.hrtime();
       return t[0] * 1e9 + t[1];
     };
-  } else if (typeof "performance" !== "undefined") {
+  } else if (typeof performance !== "undefined") {
     return () => performance.now();
   } else {
     return () => 0;
@@ -93,7 +97,7 @@ export class TimerGroup {
 
   private idGen = 1;
 
-  stopCurrentAndFutureTimers() {
+  stopCurrentAndFutureTimers(): void {
     this.stopped = true;
     for (const x in this.timerMap) {
       if (!this.timerMap.hasOwnProperty(x)) {
diff --git a/src/webex/pages/add-auditor.tsx b/src/webex/pages/add-auditor.tsx
index 4e3f8615c..fc7de920f 100644
--- a/src/webex/pages/add-auditor.tsx
+++ b/src/webex/pages/add-auditor.tsx
@@ -78,7 +78,7 @@ function ConfirmAuditor(props: ConfirmAuditorProps): JSX.Element {
     setAddDone(true);
   };
 
-  const back = () => {
+  const back = (): void => {
     window.history.back();
   };
 
@@ -86,12 +86,12 @@ function ConfirmAuditor(props: ConfirmAuditorProps): JSX.Element {
     <div id="main">
       <p>
         Do you want to let <strong>{props.auditorPub}</strong> audit the
-        currency "{props.currency}"?
+        currency &quot;{props.currency}&quot;?
       </p>
       {addDone ? (
         <div>
           Auditor was added! You can also{" "}
-          <a href={chrome.extension.getURL("/src/webex/pages/auditors.html")}>
+          <a href={chrome.extension.getURL("/auditors.html")}>
             view and edit
           </a>{" "}
           auditors.
@@ -113,7 +113,7 @@ function ConfirmAuditor(props: ConfirmAuditorProps): JSX.Element {
   );
 }
 
-export function makeAddAuditorPage() {
+export function makeAddAuditorPage(): JSX.Element {
   const walletPageUrl = new URL(document.location.href);
   const url = walletPageUrl.searchParams.get("url");
   if (!url) {
diff --git a/src/webex/pages/popup.tsx b/src/webex/pages/popup.tsx
index c2f050e2a..f62f64b73 100644
--- a/src/webex/pages/popup.tsx
+++ b/src/webex/pages/popup.tsx
@@ -734,21 +734,18 @@ function WalletDebug(props: any): JSX.Element {
   return (
     <div>
       <p>Debug tools:</p>
-      <button onClick={openExtensionPage("/src/webex/pages/popup.html")}>
+      <button onClick={openExtensionPage("/popup.html")}>
         wallet tab
       </button>
-      <button onClick={openExtensionPage("/src/webex/pages/benchmark.html")}>
+      <button onClick={openExtensionPage("/benchmark.html")}>
         benchmark
       </button>
-      <button onClick={openExtensionPage("/src/webex/pages/show-db.html")}>
+      <button onClick={openExtensionPage("/show-db.html")}>
         show db
       </button>
-      <button onClick={openExtensionPage("/src/webex/pages/tree.html")}>
+      <button onClick={openExtensionPage("/tree.html")}>
         show tree
       </button>
-      <button onClick={openExtensionPage("/src/webex/pages/logs.html")}>
-        show logs
-      </button>
       <br />
       <button onClick={confirmReset}>reset</button>
       <button onClick={reload}>reload chrome extension</button>
diff --git a/src/webex/renderHtml.tsx b/src/webex/renderHtml.tsx
index 8fc6a6a63..f5a6a7e4d 100644
--- a/src/webex/renderHtml.tsx
+++ b/src/webex/renderHtml.tsx
@@ -335,9 +335,9 @@ export function ProgressButton(
 export function PageLink(
   props: React.PropsWithChildren<{ pageName: string }>,
 ): JSX.Element {
-  const url = chrome.extension.getURL(`/src/webex/pages/${props.pageName}`);
+  const url = chrome.extension.getURL(`/${props.pageName}`);
   return (
-    <a className="actionLink" href={url} target="_blank">
+    <a className="actionLink" href={url} target="_blank" rel="noopener noreferrer">
       {props.children}
     </a>
   );
diff --git a/src/webex/wxBackend.ts b/src/webex/wxBackend.ts
index f26c14d37..8fbb1431f 100644
--- a/src/webex/wxBackend.ts
+++ b/src/webex/wxBackend.ts
@@ -358,7 +358,7 @@ function makeSyncWalletRedirect(
   oldUrl: string,
   params?: { [name: string]: string | undefined },
 ): object {
-  const innerUrl = new URL(chrome.extension.getURL("/src/webex/pages/" + url));
+  const innerUrl = new URL(chrome.extension.getURL("/" + url));
   if (params) {
     for (const key in params) {
       const p = params[key];
@@ -367,10 +367,6 @@ function makeSyncWalletRedirect(
       }
     }
   }
-  const outerUrl = new URL(
-    chrome.extension.getURL("/src/webex/pages/redirect.html"),
-  );
-  outerUrl.searchParams.set("url", innerUrl.href);
   if (isFirefox()) {
     // Some platforms don't support the sync redirect (yet), so fall back to
     // async redirect after a timeout.
@@ -378,12 +374,12 @@ function makeSyncWalletRedirect(
       await waitMs(150);
       const tab = await getTab(tabId);
       if (tab.url === oldUrl) {
-        chrome.tabs.update(tabId, { url: outerUrl.href });
+        chrome.tabs.update(tabId, { url: innerUrl.href });
       }
     };
     doit();
   }
-  return { redirectUrl: outerUrl.href };
+  return { redirectUrl: innerUrl.href };
 }
 
 async function reinitWallet(): Promise<void> {
@@ -447,7 +443,7 @@ try {
   chrome.runtime.onInstalled.addListener((details) => {
     console.log("onInstalled with reason", details.reason);
     if (details.reason === "install") {
-      const url = chrome.extension.getURL("/src/webex/pages/welcome.html");
+      const url = chrome.extension.getURL("/welcome.html");
       chrome.tabs.create({ active: true, url: url });
     }
   });
diff --git a/webextension/manifest.json b/webextension/manifest.json
index 6a0101c4b..5bcb8c060 100644
--- a/webextension/manifest.json
+++ b/webextension/manifest.json
@@ -36,14 +36,14 @@
       "32": "img/icon.png"
     },
     "default_title": "Taler",
-    "default_popup": "pages/popup.html"
+    "default_popup": "popup.html"
   },
 
   "content_scripts": [
     {
       "matches": ["*://*/*"],
       "js": [
-        "js/contentScript.js"
+        "contentScript.js"
       ],
       "run_at": "document_start"
     }
diff --git a/webextension/pack.sh b/webextension/pack.sh
new file mode 100755
index 000000000..01abb01b4
--- /dev/null
+++ b/webextension/pack.sh
@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+
+set -eu
+
+if [[ ! -e package.json ]]; then
+  echo "Please run this from the root of the repo.">&2
+  exit 1
+fi
+
+vers_manifest=$(jq -r '.version' webextension/manifest.json)
+
+rm -rf dist/wx
+mkdir -p dist/wx
+cp webextension/manifest.json dist/wx/
+cp -r webextension/static/* dist/wx/
+cp -r dist/webextension/* dist/wx/
+
+cd dist
+
+zip -r "taler-wallet-${vers_manifest}.zip" wx
diff --git a/webextension/static/add-auditor.html b/webextension/static/add-auditor.html
index ab1638b8e..47a97c075 100644
--- a/webextension/static/add-auditor.html
+++ b/webextension/static/add-auditor.html
@@ -5,11 +5,11 @@
 
     <title>Taler Wallet: Add Auditor</title>
 
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
 
     <link rel="icon" href="/img/icon.png" />
 
-    <script src="/dist/webextension/pageEntryPoint.js"></script>
+    <script src="/pageEntryPoint.js"></script>
 
     <style>
       .tree-item {
diff --git a/webextension/static/auditors.html b/webextension/static/auditors.html
index 317e88ef9..15261290d 100644
--- a/webextension/static/auditors.html
+++ b/webextension/static/auditors.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <title>Taler Wallet: Auditors</title>
 
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
 
     <link rel="icon" href="/img/icon.png" />
 
diff --git a/webextension/static/background.html b/webextension/static/background.html
index 808505e6e..b89c05588 100644
--- a/webextension/static/background.html
+++ b/webextension/static/background.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <script src="/dist/webextension/background.js"></script>
+    <script src="/background.js"></script>
     <title>(wallet bg page)</title>
   </head>
   <body>
diff --git a/webextension/static/benchmark.html b/webextension/static/benchmark.html
index 2b922580a..a29fe0725 100644
--- a/webextension/static/benchmark.html
+++ b/webextension/static/benchmark.html
@@ -3,9 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <title>Taler Wallet: Benchmarks</title>
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
     <link rel="icon" href="/img/icon.png" />
-    <script src="/dist/webextension/pageEntryPoint.js"></script>
+    <script src="/pageEntryPoint.js"></script>
   </head>
   <body>
     <section id="main">
diff --git a/webextension/static/pay.html b/webextension/static/pay.html
index 4e2199b41..452c56df0 100644
--- a/webextension/static/pay.html
+++ b/webextension/static/pay.html
@@ -4,12 +4,10 @@
     <meta charset="UTF-8" />
     <title>Taler Wallet: Confirm Contract</title>
 
-    <link rel="stylesheet" type="text/css" href="../style/pure.css" />
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
-
+    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
     <link rel="icon" href="/img/icon.png" />
-
-    <script src="/dist/webextension/pageEntryPoint.js"></script>
+    <script src="/pageEntryPoint.js"></script>
 
     <style>
       button.accept {
diff --git a/webextension/static/payback.html b/webextension/static/payback.html
index 668fc7548..7ca9dc974 100644
--- a/webextension/static/payback.html
+++ b/webextension/static/payback.html
@@ -4,11 +4,10 @@
     <meta charset="UTF-8" />
     <title>Taler Wallet: Payback</title>
 
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
-
+    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
     <link rel="icon" href="/img/icon.png" />
-
-    <script src="/dist/webextension/pageEntryPoint.js"></script>
+    <script src="/pageEntryPoint.js"></script>
 
     <style>
       body {
diff --git a/webextension/static/popup.css b/webextension/static/popup.css
deleted file mode 100644
index cca002399..000000000
--- a/webextension/static/popup.css
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * @author Gabor X. Toth
- * @author Marcello Stanisci
- * @author Florian Dold
- */
-
-body {
-  min-height: 20em;
-  width: 30em;
-  margin: 0;
-  padding: 0;
-  max-height: 800px;
-  overflow: hidden;
-  background-color: #f8faf7;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.nav {
-  background-color: #033;
-  padding: 0.5em 0;
-}
-
-.nav a {
-  color: #f8faf7;
-  padding: 0.7em 1.4em;
-  text-decoration: none;
-}
-
-.nav a.active {
-  background-color: #f8faf7;
-  color: #000;
-  font-weight: bold;
-}
-
-.container {
-  overflow-y: scroll;
-  max-height: 400px;
-}
-
-.abbrev {
-  text-decoration-style: dotted;
-}
-
-#content {
-  padding: 1em;
-}
-
-#wallet-table .amount {
-  text-align: right;
-}
-
-.hidden {
-  display: none;
-}
-
-#transactions-table th,
-#transactions-table td {
-  padding: 0.2em 0.5em;
-}
-
-#reserve-create table {
-  width: 100%;
-}
-
-#reserve-create table td.label {
-  width: 5em;
-}
-
-#reserve-create table .input input[type="text"] {
-  width: 100%;
-}
-
-.historyItem {
-  min-width: 380px;
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid #d9dbd8;
-  padding: 0.5em;
-  align-items: center;
-}
-
-.historyItem .amount {
-  font-size: 110%;
-  font-weight: bold;
-  text-align: right;
-}
-
-.historyDate,
-.historyTitle,
-.historyText,
-.historySmall {
-  margin: 0.3em;
-}
-
-.historyDate {
-  font-size: 90%;
-  color: slategray;
-  text-align: right;
-}
-
-.historyLeft {
-  display: flex;
-  flex-direction: column;
-  text-align: right;
-}
-
-.historyContent {
-  flex: 1;
-}
-
-.historyTitle {
-  font-weight: 400;
-}
-
-.historyText {
-  font-size: 90%;
-}
-
-.historySmall {
-  font-size: 70%;
-  text-transform: uppercase;
-}
-
-.historyAmount {
-  flex-grow: 1;
-}
-
-.historyAmount .primary {
-  font-size: 100%;
-}
-
-.historyAmount .secondary {
-  font-size: 80%;
-}
-
-.historyAmount .positive {
-  color: #088;
-}
-
-.historyAmount .positive:before {
-  content: "+";
-}
-
-.historyAmount .negative {
-  color: #800;
-}
-
-.historyAmount .negative:before {
-  color: #800;
-  content: "-";
-}
-.icon {
-  margin: 0 10px;
-  text-align: center;
-  width: 35px;
-  font-size: 20px;
-  border-radius: 50%;
-  background: #ccc;
-  color: #fff;
-  padding-top: 4px;
-  height: 30px;
-}
-
-.option {
-  text-transform: uppercase;
-  text-align: right;
-  padding: 0.4em;
-  font-size: 0.9em;
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  vertical-align: middle;
-  position: relative;
-  bottom: 1px;
-}
-
-input[type="radio"] {
-  bottom: 2px;
-}
-
-.balance {
-  text-align: center;
-  padding-top: 2em;
-}
diff --git a/webextension/static/popup.html b/webextension/static/popup.html
index 5f7d49743..83f2f2861 100644
--- a/webextension/static/popup.html
+++ b/webextension/static/popup.html
@@ -2,11 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8" />
-
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
-    <link rel="stylesheet" type="text/css" href="popup.css" />
-
-    <script src="/dist/webextension/pageEntryPoint.js"></script>
+    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
+    <link rel="stylesheet" type="text/css" href="/style/popup.css" />
+    <link rel="icon" href="/img/icon.png" />
+    <script src="/pageEntryPoint.js"></script>
   </head>
 
   <body>
diff --git a/webextension/static/refund.html b/webextension/static/refund.html
index 06d083974..3c1d78a24 100644
--- a/webextension/static/refund.html
+++ b/webextension/static/refund.html
@@ -4,11 +4,10 @@
     <meta charset="UTF-8" />
     <title>Taler Wallet: Refund Status</title>
 
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
-
     <link rel="icon" href="/img/icon.png" />
-
-    <script src="/dist/webextension/pageEntryPoint.js"></script>
+    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
+    <script src="/pageEntryPoint.js"></script>
   </head>
 
   <body>
diff --git a/webextension/static/reset-required.html b/webextension/static/reset-required.html
index 999483ace..84943fbf1 100644
--- a/webextension/static/reset-required.html
+++ b/webextension/static/reset-required.html
@@ -5,10 +5,9 @@
     <title>Taler Wallet: Select Taler Provider</title>
 
     <link rel="icon" href="/img/icon.png" />
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
-    <link rel="stylesheet" type="text/css" href="../style/pure.css" />
-
-    <script src="/dist/webextension/pageEntryPoint.js"></script>
+    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
+    <script src="/pageEntryPoint.js"></script>
 
     <style>
       body {
diff --git a/webextension/static/return-coins.html b/webextension/static/return-coins.html
index 98f2c7c97..90703b447 100644
--- a/webextension/static/return-coins.html
+++ b/webextension/static/return-coins.html
@@ -4,12 +4,10 @@
     <meta charset="UTF-8" />
     <title>Taler Wallet: Return Coins to Bank Account</title>
 
-    <link rel="stylesheet" type="text/css" href="../style/pure.css" />
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
-
     <link rel="icon" href="/img/icon.png" />
-
-    <script src="/dist/webextension/pageEntryPoint.js"></script>
+    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
+    <script src="/pageEntryPoint.js"></script>
   </head>
 
   <body>
diff --git a/webextension/static/style/popup.css b/webextension/static/style/popup.css
new file mode 100644
index 000000000..cca002399
--- /dev/null
+++ b/webextension/static/style/popup.css
@@ -0,0 +1,185 @@
+/**
+ * @author Gabor X. Toth
+ * @author Marcello Stanisci
+ * @author Florian Dold
+ */
+
+body {
+  min-height: 20em;
+  width: 30em;
+  margin: 0;
+  padding: 0;
+  max-height: 800px;
+  overflow: hidden;
+  background-color: #f8faf7;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.nav {
+  background-color: #033;
+  padding: 0.5em 0;
+}
+
+.nav a {
+  color: #f8faf7;
+  padding: 0.7em 1.4em;
+  text-decoration: none;
+}
+
+.nav a.active {
+  background-color: #f8faf7;
+  color: #000;
+  font-weight: bold;
+}
+
+.container {
+  overflow-y: scroll;
+  max-height: 400px;
+}
+
+.abbrev {
+  text-decoration-style: dotted;
+}
+
+#content {
+  padding: 1em;
+}
+
+#wallet-table .amount {
+  text-align: right;
+}
+
+.hidden {
+  display: none;
+}
+
+#transactions-table th,
+#transactions-table td {
+  padding: 0.2em 0.5em;
+}
+
+#reserve-create table {
+  width: 100%;
+}
+
+#reserve-create table td.label {
+  width: 5em;
+}
+
+#reserve-create table .input input[type="text"] {
+  width: 100%;
+}
+
+.historyItem {
+  min-width: 380px;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #d9dbd8;
+  padding: 0.5em;
+  align-items: center;
+}
+
+.historyItem .amount {
+  font-size: 110%;
+  font-weight: bold;
+  text-align: right;
+}
+
+.historyDate,
+.historyTitle,
+.historyText,
+.historySmall {
+  margin: 0.3em;
+}
+
+.historyDate {
+  font-size: 90%;
+  color: slategray;
+  text-align: right;
+}
+
+.historyLeft {
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+}
+
+.historyContent {
+  flex: 1;
+}
+
+.historyTitle {
+  font-weight: 400;
+}
+
+.historyText {
+  font-size: 90%;
+}
+
+.historySmall {
+  font-size: 70%;
+  text-transform: uppercase;
+}
+
+.historyAmount {
+  flex-grow: 1;
+}
+
+.historyAmount .primary {
+  font-size: 100%;
+}
+
+.historyAmount .secondary {
+  font-size: 80%;
+}
+
+.historyAmount .positive {
+  color: #088;
+}
+
+.historyAmount .positive:before {
+  content: "+";
+}
+
+.historyAmount .negative {
+  color: #800;
+}
+
+.historyAmount .negative:before {
+  color: #800;
+  content: "-";
+}
+.icon {
+  margin: 0 10px;
+  text-align: center;
+  width: 35px;
+  font-size: 20px;
+  border-radius: 50%;
+  background: #ccc;
+  color: #fff;
+  padding-top: 4px;
+  height: 30px;
+}
+
+.option {
+  text-transform: uppercase;
+  text-align: right;
+  padding: 0.4em;
+  font-size: 0.9em;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  vertical-align: middle;
+  position: relative;
+  bottom: 1px;
+}
+
+input[type="radio"] {
+  bottom: 2px;
+}
+
+.balance {
+  text-align: center;
+  padding-top: 2em;
+}
diff --git a/webextension/static/tip.html b/webextension/static/tip.html
index f694253ad..00ed4d248 100644
--- a/webextension/static/tip.html
+++ b/webextension/static/tip.html
@@ -5,10 +5,9 @@
     <title>Taler Wallet: Received Tip</title>
 
     <link rel="icon" href="/img/icon.png" />
-    <link rel="stylesheet" type="text/css" href="../style/pure.css" />
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
-    
-    <script src="/dist/webextension/pageEntryPoint.js"></script>
+    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
+    <script src="/pageEntryPoint.js"></script>
   </head>
 
   <body>
diff --git a/webextension/static/welcome.html b/webextension/static/welcome.html
index 8c0acabfd..dc893211c 100644
--- a/webextension/static/welcome.html
+++ b/webextension/static/welcome.html
@@ -5,10 +5,9 @@
     <title>Taler Wallet: Withdraw</title>
 
     <link rel="icon" href="/img/icon.png" />
-    <link rel="stylesheet" type="text/css" href="../style/pure.css" />
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
-
-    <script src="/dist/webextension/pageEntryPoint.js"></script>
+    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
+    <script src="/pageEntryPoint.js"></script>
   </head>
 
   <body>
diff --git a/webextension/static/withdraw.html b/webextension/static/withdraw.html
index a27d0018a..d2aab1b64 100644
--- a/webextension/static/withdraw.html
+++ b/webextension/static/withdraw.html
@@ -3,12 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <title>Taler Wallet: Withdraw</title>
-
     <link rel="icon" href="/img/icon.png" />
-    <link rel="stylesheet" type="text/css" href="../style/pure.css" />
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css" />
-
-    <script src="/dist/webextension/pageEntryPoint.js"></script>
+    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
+    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
+    <script src="/pageEntryPoint.js"></script>
   </head>
 
   <body>
-- 
cgit v1.2.3