show notification dot when balance changes (#5214)

1 files changed, 37 insertions, 0 deletions

diff --git a/src/webex/chromeBadge.ts b/src/webex/chromeBadge.ts
index 13add9b3f..3dfe94518 100644
--- a/src/webex/chromeBadge.ts
+++ b/src/webex/chromeBadge.ts
@@ -63,6 +63,11 @@ export class ChromeBadge implements Badge {
   private gapWidth: number = 0;
 
   /**
+   * Should we show the notification dot?
+   */
+  private hasNotification = false;
+
+  /**
    * Maximum value for our rotationAngle, corresponds to 2 Pi.
    */
   static rotationAngleMax = 1000;
@@ -150,6 +155,21 @@ export class ChromeBadge implements Badge {
     // 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"]) {
@@ -211,6 +231,23 @@ export class ChromeBadge implements Badge {
     rAF(step);
   }
 
+  /**
+   * Draw the badge such that it shows the
+   * user that something happened (balance changed).
+   */
+  showNotification() {
+    this.hasNotification = true;
+    this.draw();
+  }
+
+  /**
+   * Draw the badge without the notification mark.
+   */
+  clearNotification() {
+    this.hasNotification = false;
+    this.draw();
+  }
+
   startBusy() {
     if (this.isBusy) {
       return;