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..1fd65aee16d341a435ba4cb13a0e7d60fe5eae1b 100644
--- a/lib/icon.js
+++ b/lib/icon.js
@@ -17,73 +17,137 @@
 
 /** @module icon */
 
-const numberOfFrames = 10;
+const frameOpacities =  [0, 0.2, 0.4, 0.6, 0.8,

[Sebastian Noack, 2016/01/21 18:11:01]

This has been copied from the original implementation but note that we increased
the number of steps from 5 to 10 when we used pre-rendered images. Since e cache
the generated animation frames now, 10 steps should still be fine.

[kzar, 2016/01/21 21:07:30]

Haha, I did actually change it to 10 steps before as it looked a little
smoother, but then I thought I better change it back! I should have trusted
myself, Done.

+                         1, 1, 1, 1, 1,
+                         0.8, 0.6, 0.4, 0.2, 0];
+const numberOfFrames = frameOpacities.length;

[Sebastian Noack, 2016/01/21 18:11:01]

While rewriting most of this file, this is a good oppertunity to turn on strict
mode. However, that means that you cannot use const here.

[kzar, 2016/01/21 21:07:30]

Done.

[Sebastian Noack, 2016/01/22 15:59:15]

For reference, jsHydra converts const (like let) to var. So using const in
strict mode is actually fine here. It doesn't have any runtime effects though.

[kzar, 2016/01/22 16:49:34]

Acknowledged.

 
+let stopAnimation = null;
+let animationPlaying = false;
 let whitelistedState = new ext.PageMap();
-let notificationType = null;
-let animationInterval = null;
-let animationStep = 0;
 
-function getIconPath(whitelisted)
+function loadImage(path, size)

[Sebastian Noack, 2016/01/21 18:11:01]

Awesome, using a Promise here. But note that we load icons in a similar way in
notificationHelper.js. Ideally, we unify that code in a common helper function.

[kzar, 2016/01/21 21:07:30]

Done. (Kinda... I put loadImage across, but couldn't see how to remove the
duplication of the canvas stuff.)

 {
-  let filename = "icons/abp-$size";
+  if (!path)
+    return Promise.resolve(null);
+  if (size)
+    path = path.replace("$size", size.toString());
+
+  return new Promise(function(resolve, reject) {
+    let image = new Image();
+    image.src = path;
+    image.addEventListener("load", function() { resolve(image); });
+  });
+}
+
+function getImageData(size, baseIcon, overlayIcon, opacity,
+                      animationStep, frameCache)
+{
+  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 canvas = document.createElement("canvas");
+  let context = canvas.getContext("2d");
+
+  let imageData = Promise.all(
+    [loadImage(baseIcon, size), loadImage(overlayIcon, size)]
+  ).then(function(icons)
   {
-    filename += "-notification-" + notificationType;
+    baseIcon = icons[0];
+    overlayIcon = icons[1];
 
-    if (animationStep < numberOfFrames)
-      filename += "-" + animationStep;
-  }
+    canvas.width = baseIcon.width;
+    canvas.height = baseIcon.height;
+
+    context.globalAlpha = 1;
+    context.drawImage(baseIcon, 0, 0);
 
-  return filename + ".png";
+    if (overlayIcon && opacity)
+    {
+      context.globalAlpha = opacity;
+      context.drawImage(overlayIcon, 0, 0);
+    }
+
+    return context.getImageData(0, 0, canvas.width, canvas.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()
   {
+    animationPlaying = true;
     ext.pages.query({active: true}, function(pages)
     {
-      let fadeInInterval = setInterval(function()
+      let animationStep = 0;
+      frameInterval = setInterval(function()
       {
-        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);
-
-        clearInterval(fadeInInterval);
+          animationStep = 0;
+          clearInterval(frameInterval);
+          animationPlaying = false;
+        }
       }, 100);
     });
-  }, 10000);
+  }
+
+  playAnimation();
+  let animationInterval = setInterval(playAnimation, 10000);
+  return function()
+  {
+    clearInterval(frameInterval);
+    clearInterval(animationInterval);
+    animationPlaying = false;
+  };
 }
 
 /**
@@ -95,8 +159,9 @@ function runAnimation()
  */
 exports.updateIcon = function(page, whitelisted)
 {
-  page.browserAction.setIcon(getIconPath(whitelisted));
   whitelistedState.set(page, whitelisted);
+  if (!animationPlaying)
+    setIcon(page);
 };
 
 /**
@@ -106,10 +171,8 @@ exports.updateIcon = function(page, whitelisted)
  */
 exports.startIconAnimation = function(type)
 {
-  notificationType = type;
-
-  if (animationInterval == null)
-    animationInterval = runAnimation();
+  stopAnimation && stopAnimation();
+  stopAnimation = runAnimation(type);
 };
 
 /**
@@ -117,11 +180,5 @@ exports.startIconAnimation = function(type)
  */
 exports.stopIconAnimation = function()
 {
-  if (animationInterval != null)
-  {
-    clearInterval(animationInterval);
-    animationInterval = null;
-  }
-
-  notificationType  = null;
+  stopAnimation && stopAnimation();
 };