289 lines
7.8 KiB
TypeScript
289 lines
7.8 KiB
TypeScript
/*
|
|
This file is part of GNU Taler
|
|
(C) 2022 Taler Systems S.A.
|
|
|
|
GNU 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.
|
|
|
|
GNU 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
|
|
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
|
|
*/
|
|
|
|
import { platform } from "./platform/background.js";
|
|
|
|
/**
|
|
* Polyfill for requestAnimationFrame, which
|
|
* doesn't work from a background page.
|
|
*/
|
|
function rAF(cb: (ts: number) => void): void {
|
|
window.setTimeout(() => {
|
|
cb(performance.now());
|
|
}, 100 /* 100 ms delay between frames */);
|
|
}
|
|
|
|
/**
|
|
* Badge for Chrome that renders a Taler logo with a rotating ring if some
|
|
* background activity is happening.
|
|
*/
|
|
export class ChromeBadge {
|
|
private canvas: HTMLCanvasElement;
|
|
private ctx: CanvasRenderingContext2D;
|
|
/**
|
|
* True if animation running. The animation
|
|
* might still be running even if we're not busy anymore,
|
|
* just to transition to the "normal" state in a animated way.
|
|
*/
|
|
private animationRunning = false;
|
|
|
|
/**
|
|
* Is the wallet still busy? Note that we do not stop the
|
|
* animation immediately when the wallet goes idle, but
|
|
* instead slowly close the gap.
|
|
*/
|
|
private isBusy = false;
|
|
|
|
/**
|
|
* Current rotation angle, ranges from 0 to rotationAngleMax.
|
|
*/
|
|
private rotationAngle = 0;
|
|
|
|
/**
|
|
* While animating, how wide is the current gap in the circle?
|
|
* Ranges from 0 to openMax.
|
|
*/
|
|
private gapWidth = 0;
|
|
|
|
/**
|
|
* Should we show the notification dot?
|
|
*/
|
|
private hasNotification = false;
|
|
|
|
/**
|
|
* Maximum value for our rotationAngle, corresponds to 2 Pi.
|
|
*/
|
|
static rotationAngleMax = 1000;
|
|
|
|
/**
|
|
* How fast do we rotate? Given in rotation angle (relative to rotationAngleMax) per millisecond.
|
|
*/
|
|
static rotationSpeed = 0.5;
|
|
|
|
/**
|
|
* How fast to we open? Given in rotation angle (relative to rotationAngleMax) per millisecond.
|
|
*/
|
|
static openSpeed = 0.15;
|
|
|
|
/**
|
|
* How fast to we close? Given as a multiplication factor per frame update.
|
|
*/
|
|
static closeSpeed = 0.7;
|
|
|
|
/**
|
|
* How far do we open? Given relative to rotationAngleMax.
|
|
*/
|
|
static openMax = 100;
|
|
|
|
constructor(window?: Window) {
|
|
// Allow injecting another window for testing
|
|
const bg = window || chrome.extension.getBackgroundPage();
|
|
if (!bg) {
|
|
throw Error("no window available");
|
|
}
|
|
this.canvas = bg.document.createElement("canvas");
|
|
// Note: changing the width here means changing the font
|
|
// size in draw() as well!
|
|
this.canvas.width = 32;
|
|
this.canvas.height = 32;
|
|
const ctx = this.canvas.getContext("2d");
|
|
if (!ctx) {
|
|
throw Error("unable to get canvas context");
|
|
}
|
|
this.ctx = ctx;
|
|
this.draw();
|
|
}
|
|
|
|
/**
|
|
* Draw the badge based on the current state.
|
|
*/
|
|
private draw(): void {
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(0, 0, this.canvas.width / 2 - 2, 0, 2 * Math.PI);
|
|
this.ctx.fillStyle = "white";
|
|
this.ctx.fill();
|
|
|
|
// move into the center, off by 2 for aligning the "T" with the bottom
|
|
// of the circle.
|
|
this.ctx.translate(0, 2);
|
|
|
|
// pick sans-serif font; note: 14px is based on the 32px width above!
|
|
this.ctx.font = "bold 24px sans-serif";
|
|
// draw the "T" perfectly centered (x and y) to the current position
|
|
this.ctx.textAlign = "center";
|
|
this.ctx.textBaseline = "middle";
|
|
this.ctx.fillStyle = "black";
|
|
this.ctx.fillText("T", 0, 0);
|
|
// now move really into the center
|
|
this.ctx.translate(0, -2);
|
|
// start drawing the (possibly open) circle
|
|
this.ctx.beginPath();
|
|
this.ctx.lineWidth = 2.5;
|
|
if (this.animationRunning) {
|
|
/* Draw circle around the "T" with an opening of this.gapWidth */
|
|
const aMax = ChromeBadge.rotationAngleMax;
|
|
const startAngle = (this.rotationAngle / aMax) * Math.PI * 2;
|
|
const stopAngle =
|
|
((this.rotationAngle + aMax - this.gapWidth) / aMax) * Math.PI * 2;
|
|
this.ctx.arc(
|
|
0,
|
|
0,
|
|
this.canvas.width / 2 - 2,
|
|
/* radius */ startAngle,
|
|
stopAngle,
|
|
false,
|
|
);
|
|
} else {
|
|
/* Draw full circle */
|
|
this.ctx.arc(
|
|
0,
|
|
0,
|
|
this.canvas.width / 2 - 2 /* radius */,
|
|
0,
|
|
Math.PI * 2,
|
|
false,
|
|
);
|
|
}
|
|
this.ctx.stroke();
|
|
// go back to the origin
|
|
this.ctx.translate(-this.canvas.width / 2, -this.canvas.height / 2);
|
|
|
|
if (this.hasNotification) {
|
|
// We draw a circle with a soft border in the
|
|
// lower right corner.
|
|
const r = 8;
|
|
const cw = this.canvas.width;
|
|
const ch = this.canvas.height;
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(cw - r, ch - r, r, 0, 2 * Math.PI, false);
|
|
const gradient = this.ctx.createRadialGradient(
|
|
cw - r,
|
|
ch - r,
|
|
r,
|
|
cw - r,
|
|
ch - r,
|
|
5,
|
|
);
|
|
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
|
|
gradient.addColorStop(1, "blue");
|
|
this.ctx.fillStyle = gradient;
|
|
this.ctx.fill();
|
|
}
|
|
|
|
// Allow running outside the extension for testing
|
|
// tslint:disable-next-line:no-string-literal
|
|
if (window["chrome"] && window.chrome["browserAction"]) {
|
|
try {
|
|
const imageData = this.ctx.getImageData(
|
|
0,
|
|
0,
|
|
this.canvas.width,
|
|
this.canvas.height,
|
|
);
|
|
chrome.action.setIcon({ imageData });
|
|
} catch (e) {
|
|
// Might fail if browser has over-eager canvas fingerprinting countermeasures.
|
|
// There's nothing we can do then ...
|
|
}
|
|
}
|
|
}
|
|
|
|
private animate(): void {
|
|
if (this.animationRunning) {
|
|
return;
|
|
}
|
|
if (platform.isFirefox()) {
|
|
// Firefox does not support badge animations properly
|
|
return;
|
|
}
|
|
this.animationRunning = true;
|
|
let start: number | undefined;
|
|
const step = (timestamp: number): void => {
|
|
if (!this.animationRunning) {
|
|
return;
|
|
}
|
|
if (!start) {
|
|
start = timestamp;
|
|
}
|
|
if (!this.isBusy && 0 === this.gapWidth) {
|
|
// stop if we're close enough to origin
|
|
this.rotationAngle = 0;
|
|
} else {
|
|
this.rotationAngle =
|
|
(this.rotationAngle +
|
|
(timestamp - start) * ChromeBadge.rotationSpeed) %
|
|
ChromeBadge.rotationAngleMax;
|
|
}
|
|
if (this.isBusy) {
|
|
if (this.gapWidth < ChromeBadge.openMax) {
|
|
this.gapWidth += ChromeBadge.openSpeed * (timestamp - start);
|
|
}
|
|
if (this.gapWidth > ChromeBadge.openMax) {
|
|
this.gapWidth = ChromeBadge.openMax;
|
|
}
|
|
} else {
|
|
if (this.gapWidth > 0) {
|
|
this.gapWidth--;
|
|
this.gapWidth *= ChromeBadge.closeSpeed;
|
|
}
|
|
}
|
|
|
|
if (this.isBusy || this.gapWidth > 0) {
|
|
start = timestamp;
|
|
rAF(step);
|
|
} else {
|
|
this.animationRunning = false;
|
|
}
|
|
this.draw();
|
|
};
|
|
rAF(step);
|
|
}
|
|
|
|
/**
|
|
* Draw the badge such that it shows the
|
|
* user that something happened (balance changed).
|
|
*/
|
|
showNotification(): void {
|
|
this.hasNotification = true;
|
|
this.draw();
|
|
}
|
|
|
|
/**
|
|
* Draw the badge without the notification mark.
|
|
*/
|
|
clearNotification(): void {
|
|
this.hasNotification = false;
|
|
this.draw();
|
|
}
|
|
|
|
startBusy(): void {
|
|
if (this.isBusy) {
|
|
return;
|
|
}
|
|
this.isBusy = true;
|
|
this.animate();
|
|
}
|
|
|
|
stopBusy(): void {
|
|
this.isBusy = false;
|
|
}
|
|
}
|