add animation

2 files changed, 125 insertions, 22 deletions

diff --git a/lib/wallet/chromeBadge.ts b/lib/wallet/chromeBadge.ts
new file mode 100644
index 000000000..2443378b2
--- /dev/null
+++ b/lib/wallet/chromeBadge.ts
@@ -0,0 +1,118 @@
+/*
+ This file is part of TALER
+ (C) 2016 INRIA
+
+ TALER is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import {
+  Badge
+} from "./wallet";
+
+
+/**
+ * Polyfill for requestAnimationFrame, which
+ * doesn't work from a background page.
+ */
+function rAF(cb: (ts: number) => void) {
+  window.setTimeout(() => {
+    cb(performance.now());
+  }, 100);
+}
+
+
+export class ChromeBadge implements Badge {
+  canvas: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D;
+  talerLogo: HTMLImageElement;
+  isBusy: boolean = false;
+  rotationAngle: number = 0;
+  static rotationAngleMax = 50000;
+
+  constructor() {
+    let bg = chrome.extension.getBackgroundPage();
+    this.canvas = bg.document.createElement("canvas");
+    this.canvas.width = 32;
+    this.canvas.height = 32;
+    this.ctx = this.canvas.getContext("2d")!;
+
+    this.talerLogo = bg.document.getElementById("taler-logo") as HTMLImageElement;
+    if (!(this.talerLogo instanceof HTMLImageElement)) {
+      throw Error();
+    }
+
+    this.draw();
+  }
+
+  /**
+   * Draw the badge based on the current state.
+   */
+  private draw() {
+    // Reset to identity
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
+    this.ctx.rotate(this.rotationAngle / ChromeBadge.rotationAngleMax * Math.PI * 2);
+    this.ctx.translate(-this.canvas.width / 2, -this.canvas.height / 2);
+    this.ctx.drawImage(this.talerLogo,
+                       0,
+                       0,
+                       this.talerLogo.width,
+                       this.talerLogo.height,
+                       0, 0, this.canvas.width, this.canvas.height);
+
+    let imageData = this.ctx.getImageData(0,
+                                          0,
+                                          this.canvas.width,
+                                          this.canvas.height);
+    chrome.browserAction.setIcon({imageData});
+  }
+
+  private animate() {
+    let bg: Window = chrome.extension.getBackgroundPage();
+    let start: number|undefined = undefined;
+    let step = (timestamp: number) => {
+      if (!start) {
+        start = timestamp;
+      }
+      let delta = (timestamp - start);
+      if (!this.isBusy && this.rotationAngle + delta >= ChromeBadge.rotationAngleMax) {
+        // stop if we're close enough to origin
+        this.rotationAngle = 0;
+      } else {
+        this.rotationAngle = (this.rotationAngle + timestamp - start) % ChromeBadge.rotationAngleMax;
+      }
+      if (this.isBusy || this.rotationAngle != 0) {
+        rAF(step);
+      }
+      this.draw();
+    };
+    rAF(step);
+  }
+
+  setText(s: string) {
+    chrome.browserAction.setBadgeText({text: s});
+  }
+
+  setColor(c: string) {
+    chrome.browserAction.setBadgeBackgroundColor({color: c});
+  }
+
+  startBusy() {
+    this.isBusy = true;
+    this.animate();
+  }
+
+  stopBusy() {
+    this.isBusy = false;
+  }
+}
\ No newline at end of file
diff --git a/lib/wallet/wxMessaging.ts b/lib/wallet/wxMessaging.ts
index 514cdce13..2e3659429 100644
--- a/lib/wallet/wxMessaging.ts
+++ b/lib/wallet/wxMessaging.ts
@@ -30,6 +30,7 @@ import Port = chrome.runtime.Port;
 import {Notifier} from "./types";
 import {Contract} from "./types";
 import MessageSender = chrome.runtime.MessageSender;
+import {ChromeBadge} from "./chromeBadge";
 
 "use strict";
 
@@ -165,26 +166,6 @@ function makeHandlers(db: IDBDatabase,
 }
 
 
-class ChromeBadge implements Badge {
-  setText(s: string) {
-    chrome.browserAction.setBadgeText({text: s});
-  }
-
-  setColor(c: string) {
-    chrome.browserAction.setBadgeBackgroundColor({color: c});
-  }
-
-  startBusy() {
-    this.setColor("#00F");
-    this.setText("...");
-  }
-
-  stopBusy() {
-    this.setText("");
-  }
-}
-
-
 function dispatch(handlers: any, req: any, sender: any, sendResponse: any) {
   if (req.type in handlers) {
     Promise
@@ -302,6 +283,9 @@ function handleHttpPayment(headerList: chrome.webRequest.HttpHeader[],
   console.log("ignoring non-taler 402 response");
 }
 
+// Useful for debugging ...
+export let wallet: Wallet|undefined = undefined;
+export let badge: ChromeBadge|undefined = undefined;
 
 export function wxMain() {
   chrome.browserAction.setBadgeText({text: ""});
@@ -330,9 +314,10 @@ export function wxMain() {
          })
          .then((db: IDBDatabase) => {
            let http = new BrowserHttpLib();
-           let badge = new ChromeBadge();
+           badge = new ChromeBadge();
            let notifier = new ChromeNotifier();
-           let wallet = new Wallet(db, http, badge, notifier);
+           console.log("setting wallet");
+           wallet = new Wallet(db, http, badge, notifier);
 
            // Handlers for messages coming directly from the content
            // script on the page