Issue 3532 - Generate animation images at runtime

lib/icon.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2016 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus 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 Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 /** @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 cacheIndex = baseIcon + size + opacity;
+
+  if (frameCache && frameCache[cacheIndex])
+    return frameCache[cacheIndex];
+
+  let imageData = Promise.all(
+    [loadImage(baseIcon, size), loadImage(overlayIcon, size)]
+  ).then(function(icons)
+  {
+    let baseIconCanvas = icons[0];
+    let overlayIconCanvas = icons[1];
+    let context = baseIconCanvas.getContext("2d");
+
+    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, animationType, animationStep, frameCache)
+{
+  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 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 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)
+  // 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)
   {
-    filename += "-notification-" + notificationType;
+    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]}});
+  });
+}
 
-    if (animationStep < numberOfFrames)
-      filename += "-" + animationStep;
+function runAnimation(animationType)
+{
+  let frameCache = {};
+  let frameInterval;
+
+  function playAnimation()
+  {
+    animationPlaying = true;
+    let animationStep = 0;
+    frameInterval = setInterval(function()
+    {
+      ext.pages.query({active: true}, function(pages)
+      {
+        pages.forEach(function (page) {
+          setIcon(page, animationType, animationStep++, frameCache);
+        });
+        if (animationStep >= numberOfFrames)
+        {
+          animationStep = 0;
+          clearInterval(frameInterval);
+          animationPlaying = false;
+        }
+      });
+    }, 100);
   }
 
-  return filename + ".png";
-}
-
-function setIcon(page)
-{
-  page.browserAction.setIcon(getIconPath(whitelistedState.get(page)));
-}
-
-function runAnimation()
-{
-  return setInterval(function()
+  playAnimation();
+  let animationInterval = setInterval(playAnimation, 10000);
+  return function()
   {
-    ext.pages.query({active: true}, function(pages)
-    {
-      let fadeInInterval = setInterval(function()
-      {
-        animationStep++;
-        pages.forEach(setIcon);
-
-        if (animationStep < numberOfFrames)
-          return;
-
-        setTimeout(function()
-        {
-          let fadeOutInterval = setInterval(function()
-          {
-            animationStep--;
-            pages.forEach(setIcon);
-
-            if (animationStep > 0)
-              return;
-
-            clearInterval(fadeOutInterval);
-          }, 100);
-        },1000);
-
-        clearInterval(fadeInInterval);
-      }, 100);
-    });
-  }, 10000);
+    clearInterval(frameInterval);
+    clearInterval(animationInterval);
+    animationPlaying = false;
+  };
 }
 
 /**
  * Set the browser action icon for the given page, indicating whether
  * adblocking is active there, and considering the icon animation.
  *
  * @param {Page}    page         The page to set the browser action icon for
  * @param {Boolean} whitelisted  Whether the page has been whitelisted
  */
 exports.updateIcon = function(page, whitelisted)
 {
-  page.browserAction.setIcon(getIconPath(whitelisted));
   whitelistedState.set(page, whitelisted);
+  if (!animationPlaying)
+    setIcon(page);
 };
 
 /**
  * Starts to animate the browser action icon to indicate a pending notifcation.
  *
  * @param {string} type  The notification type (i.e: "information" or "critical")
  */
 exports.startIconAnimation = function(type)
 {
-  notificationType = type;
-
-  if (animationInterval == null)
-    animationInterval = runAnimation();
+  stopAnimation && stopAnimation();
+  stopAnimation = runAnimation(type);
 };
 
 /**
  * Stops to animate the browser action icon.
  */
 exports.stopIconAnimation = function()
 {
-  if (animationInterval != null)
-  {
-    clearInterval(animationInterval);
-    animationInterval = null;
-  }
-
-  notificationType  = null;
+  stopAnimation && stopAnimation();
 };