Issue 3532 - Generate animation images at runtime

lib/icon.js

Index: lib/icon.js
diff --git a/lib/icon.js b/lib/icon.js
index 2011d1e23701aada50df48f3f2722514d3b3b24e..85372806bc7f258d5e905681eef1d8acf199e639 100644
--- a/lib/icon.js
+++ b/lib/icon.js
@@ -17,73 +17,149 @@
 
 /** @module icon */
 
-const numberOfFrames = 10;
+"use strict";
 
+const frameOpacities =  [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9,
+                         1, 1, 1, 1, 1,
+                         0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0];
+const numberOfFrames = frameOpacities.length;
+
+let stopAnimation = null;
+let animationPlaying = false;
 let whitelistedState = new ext.PageMap();
-let notificationType = null;
-let animationInterval = null;
-let animationStep = 0;
 
-function getIconPath(whitelisted)
+let loadImage =
+/**
+ * Loads an image and draws it onto a canvas

[Sebastian Noack, 2016/01/23 14:04:09]

Nit: Missing full stop?

[kzar, 2016/01/23 14:43:14]

Done.

+ *
+ * @param {string} path  Path of the image to load
+ * @param {number} [int]  Size of image to load (replaces "$size" in path)
+ * @return {promise}

[Sebastian Noack, 2016/01/23 14:04:09]

Nit: It's "Promise" (capitalized) since it's a class.

[kzar, 2016/01/23 14:43:14]

Done.

+ */
+exports.loadImage = function loadImage(path, size)

[Sebastian Noack, 2016/01/23 14:04:08]

Perhaps we should call the function loadCanvas or loadImageAsCanvas?

[Sebastian Noack, 2016/01/23 14:04:09]

Nit: Named function assigned to a variable?

[kzar, 2016/01/23 14:43:13]

Done.

[kzar, 2016/01/23 14:43:13]

Done.

+  {

[Sebastian Noack, 2016/01/23 14:04:08]

Nit: It seems that the indentation is off here.

[kzar, 2016/01/23 14:43:13]

Done.

+    if (!path)

[Sebastian Noack, 2016/01/23 14:04:09]

Ah, now I see why you check for the path being empty. If for whatever reason the
path should be empty neither onload nor onerror would fire and the promise will
never be resolved. However, I'd rather throw an exception in that case.

[kzar, 2016/01/23 14:43:14]

Done.

+      return Promise.resolve(null);
+    if (size)

[Sebastian Noack, 2016/01/23 14:04:09]

I'm not sure whether this logic should be handled here or rather in the calling
code, in particular as it seems to be specific to the code below.

[kzar, 2016/01/23 14:43:13]

Done.

+      path = path.replace("$size", size.toString());
+
+    return new Promise(function(resolve, reject) {
+      let image = new Image();
+      image.src = path;
+      image.addEventListener("load", function()

[Sebastian Noack, 2016/01/23 14:04:09]

Nit: How about using arrow functions?

[kzar, 2016/01/23 14:43:14]

Done.

+      {
+        let canvas = document.createElement("canvas");
+        let context = canvas.getContext("2d");
+        canvas.height = image.height;
+        canvas.width = image.width;
+        context.drawImage(image, 0, 0);
+        resolve(canvas);
+      });
+      image.addEventListener("error", function(error) { reject(error); });

[Sebastian Noack, 2016/01/23 14:17:41]

Note that the value passed to the listener here isn't an Error but an Event. So
we should create our own Error to reject the promise with.

[kzar, 2016/01/23 14:43:14]

Done.

+    });
+  };
+
+function getImageData(size, baseIcon, overlayIcon, opacity,
+                      animationStep, frameCache)
 {
-  let filename = "icons/abp-$size";
+  let cacheIndex = baseIcon + size + opacity;
 
-  // If the current page is whitelisted, pick an icon that indicates that
-  // Adblock Plus is disabled, however not when the notification icon has
-  // full opacity, or on Safari where icons are genrally grayscale-only.
-  if (whitelisted && animationStep < numberOfFrames && require("info").platform != "safari")
-    filename += "-whitelisted";
+  if (frameCache && frameCache[cacheIndex])
+    return frameCache[cacheIndex];
 
-  // If the icon is currently animating to indicate a pending notification,
-  // pick the icon for the corresponing notification type and animation frame.
-  if (notificationType && animationStep > 0)
+  let imageData = Promise.all(
+    [loadImage(baseIcon, size), loadImage(overlayIcon, size)]
+  ).then(function(icons)
   {
-    filename += "-notification-" + notificationType;
-
-    if (animationStep < numberOfFrames)
-      filename += "-" + animationStep;
-  }
+    let baseIconCanvas = icons[0];
+    let overlayIconCanvas = icons[1];
+    let context = baseIconCanvas.getContext("2d");
 
-  return filename + ".png";
+    if (overlayIconCanvas && opacity)
+    {
+      context.globalAlpha = opacity;
+      context.drawImage(overlayIconCanvas, 0, 0);
+    }
+
+    return context.getImageData(0, 0, baseIconCanvas.width,
+                                baseIconCanvas.height);
+  });
+  if (frameCache)
+    frameCache[cacheIndex] = imageData;
+  return imageData;
 }
 
-function setIcon(page)
+function setIcon(page, animationType, animationStep, frameCache)
 {
-  page.browserAction.setIcon(getIconPath(whitelistedState.get(page)));
+  let safari = require("info").platform == "safari";
+  let opacity = animationType ? frameOpacities[animationStep] : 0;
+  let greyed = whitelistedState.get(page) && !safari;
+  let blending = (animationType && opacity > 0 && opacity < 1);
+
+  let filename = "icons/abp-$size";
+  let baseIcon = filename + (greyed ? "-whitelisted" : "") + ".png";
+  let overlayIcon = animationType && (filename + "-notification-" +
+                                      animationType + ".png");
+
+
+  // If the icon doesn't need any modifications, or the platform doesn't support
+  // data URLs, we can just use the image's filename with the $size placeholder.
+  if (!blending || safari)
+    if (overlayIcon && opacity > 0.5)
+      return page.browserAction.setIcon(overlayIcon);
+    else
+      return page.browserAction.setIcon(baseIcon);
+
+  // Otherwise we must process the images using a canvas and return a data URL
+  // of the result for each size that's required. (19px and 38px are required by
+  // Chrome/Opera.)
+  let imageData = [19, 38].map(function(size)
+  {
+    return getImageData(size, baseIcon, overlayIcon, opacity,
+                        animationStep, frameCache);
+  });
+  Promise.all(imageData).then(function(imageData)
+  {
+    chrome.browserAction.setIcon({tabId: page._id,
+                                  imageData: {19: imageData[0],
+                                              38: imageData[1]}});
+  });
 }
 
-function runAnimation()
+function runAnimation(animationType)
 {
-  return setInterval(function()
+  let frameCache = {};
+  let frameInterval;
+
+  function playAnimation()
   {
-    ext.pages.query({active: true}, function(pages)
+    animationPlaying = true;
+    let animationStep = 0;
+    frameInterval = setInterval(function()
     {
-      let fadeInInterval = setInterval(function()
+      ext.pages.query({active: true}, function(pages)
       {
-        animationStep++;
-        pages.forEach(setIcon);
-
-        if (animationStep < numberOfFrames)
-          return;
-
-        setTimeout(function()
+        pages.forEach(function (page) {
+          setIcon(page, animationType, animationStep++, frameCache);
+        });
+        if (animationStep >= numberOfFrames)
         {
-          let fadeOutInterval = setInterval(function()
-          {
-            animationStep--;
-            pages.forEach(setIcon);
-
-            if (animationStep > 0)
-              return;
-
-            clearInterval(fadeOutInterval);
-          }, 100);
-        },1000);
+          animationStep = 0;
+          clearInterval(frameInterval);
+          animationPlaying = false;
+        }
+      });
+    }, 100);
+  }
 
-        clearInterval(fadeInInterval);
-      }, 100);
-    });
-  }, 10000);
+  playAnimation();
+  let animationInterval = setInterval(playAnimation, 10000);
+  return function()
+  {
+    clearInterval(frameInterval);
+    clearInterval(animationInterval);
+    animationPlaying = false;
+  };
 }
 
 /**
@@ -95,8 +171,9 @@ function runAnimation()
  */
 exports.updateIcon = function(page, whitelisted)
 {
-  page.browserAction.setIcon(getIconPath(whitelisted));
   whitelistedState.set(page, whitelisted);
+  if (!animationPlaying)
+    setIcon(page);
 };
 
 /**
@@ -106,10 +183,8 @@ exports.updateIcon = function(page, whitelisted)
  */
 exports.startIconAnimation = function(type)
 {
-  notificationType = type;
-
-  if (animationInterval == null)
-    animationInterval = runAnimation();
+  stopAnimation && stopAnimation();
+  stopAnimation = runAnimation(type);
 };
 
 /**
@@ -117,11 +192,5 @@ exports.startIconAnimation = function(type)
  */
 exports.stopIconAnimation = function()
 {
-  if (animationInterval != null)
-  {
-    clearInterval(animationInterval);
-    animationInterval = null;
-  }
-
-  notificationType  = null;
+  stopAnimation && stopAnimation();
 };