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 */
 
 "use strict";
 
 const frameOpacities =  [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9,
                          1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0,
                          0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0];
 const numberOfFrames = frameOpacities.length;
 const safariPlatform = require("info").platform == "safari";
 
-let stopAnimation = null;
-let animationPlaying = false;
+let frameInterval = null;
+let animationInterval = null;
 let whitelistedState = new ext.PageMap();
 
-let loadImage =
-/**
- * Loads an image, returning a promise

[Sebastian Noack, 2016/01/26 16:12:37]

Nit: The return value is already doumented below.

[kzar, 2016/01/26 17:10:54]

Acknowledged.

- *
- * @param {string} url  URL string of the image to load
- * @return {Promise}
- */
-exports.loadImage = function(url)
+function loadImage(url)
 {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) =>
+  {
     let image = new Image();
     image.src = url;
     image.addEventListener("load", () =>
     {
       resolve(image);
     });
-    image.addEventListener("error", () => {
+    image.addEventListener("error", () =>
+    {
       reject("Failed to load image " + url);
     });
   });
 };
 
 function setIcon(page, notificationType, opacity, frames)
 {
   opacity = opacity || 0;
-  let greyed = whitelistedState.get(page) && !safariPlatform && true || false;
+  let whitelisted = !!whitelistedState.get(page) && !safariPlatform;
 
   if (!notificationType || !frames)
   {
-    if (notificationType && opacity > 0.5)
+    if (opacity > 0.5)
       page.browserAction.setIcon("icons/abp-$size-notification-"
                                  + notificationType + ".png");
     else
       page.browserAction.setIcon("icons/abp-$size" +
-                                 (greyed ? "-whitelisted" : "") + ".png");
+                                 (whitelisted ? "-whitelisted" : "") + ".png");
   }
   else
   {
     chrome.browserAction.setIcon({
       tabId: page._id,
-      imageData: frames["" + opacity + greyed]
-      });
+      imageData: frames["" + opacity + whitelisted]
+    });
   }
 }
 
 function renderFrames(notificationType)
 {
   if (safariPlatform)
     return Promise.resolve(null);
 
   return Promise.all([
     loadImage("icons/abp-19.png"),
     loadImage("icons/abp-19-whitelisted.png"),
     loadImage("icons/abp-19-notification-" + notificationType + ".png"),
     loadImage("icons/abp-38.png"),
     loadImage("icons/abp-38-whitelisted.png"),
     loadImage("icons/abp-38-notification-" + notificationType + ".png"),
   ]).then(images =>
   {
     let images = {
       19: { base: [images[0], images[1]], overlay: images[2] },
       38: { base: [images[3], images[4]], overlay: images[5] }
     };
 
     let frames = {};
     let canvas = document.createElement("canvas");
     let context = canvas.getContext("2d");
 
-    for (let size of [19, 38])
+    for (let whitelisted of [false, true])
     {
-      canvas.width = size;
-      canvas.height = size;
-      for (let whitelisted of [false, true])
+      for (let i = 0, opacity = 0; i <= 10; opacity = ++i / 10)
       {
-        for (let opacity of [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1])
+        let imageData = {};
+        for (let size of [19, 38])
         {
+          canvas.width = size;
+          canvas.height = size;
           context.globalAlpha = 1;
           context.drawImage(images[size]["base"][whitelisted | 0], 0, 0);
           context.globalAlpha = opacity;
           context.drawImage(images[size]["overlay"], 0, 0);
-          let frameKey = "" + opacity + whitelisted;
-          if (!(frameKey in frames))

[Sebastian Noack, 2016/01/26 16:12:37]

If you iterate over the sizes in the inner loop you don't need this check. As a
side-effect you'd also generate the key twice as often.

  data = {};
  for (let size of [19, 38])
    ...
    data[size] = context.getImageData(0, 0, size, size);
  frames["" + opacity + whitelisted] = data;

[kzar, 2016/01/26 17:10:54]

Done.

-            frames[frameKey] = {};
-          frames[frameKey][size] = context.getImageData(0, 0, size, size);
+          imageData[size] = context.getImageData(0, 0, size, size);
         }
+        frames["" + opacity + whitelisted] = imageData;
       }
     }
 
     return frames;
   });
 }
 
 function runAnimation(notificationType)
 {
   function playAnimation(frames)
   {
-    animationPlaying = true;
     let animationStep = 0;
     ext.pages.query({active: true}, pages =>
     {
       function appendActivePage(page)
       {
         pages.push(page);
       }
       ext.pages.onActivated.addListener(appendActivePage);
 
       frameInterval = setInterval(() =>
       {
         let opacity = frameOpacities[animationStep++];
-        pages.forEach(page => {
+        for (let page of pages)
+        {
           if (whitelistedState.has(page))
             setIcon(page, notificationType, opacity, frames);
-        });
+        };
 
         if (animationStep > numberOfFrames)
         {
           animationStep = 0;
           clearInterval(frameInterval);
-          animationPlaying = false;
+          frameInterval = null;
           ext.pages.onActivated.removeListener(appendActivePage);
         }
       }, 100);
     });
   }
 
   renderFrames(notificationType).then(frames =>
   {
     playAnimation(frames);
-    let animationInterval = setInterval(() => { playAnimation(frames); },
-                                        10000);
-    return () =>
-    {
-      clearInterval(frameInterval);
-      clearInterval(animationInterval);
-      animationPlaying = false;
-    };
+    animationInterval = setInterval(() => { playAnimation(frames); }, 10000);
   });
 }
 
 /**
  * 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)
 {
   whitelistedState.set(page, whitelisted);
-  if (!animationPlaying)
+  if (frameInterval == null)
     setIcon(page);
+};
+
+let stopIconAnimation =
+/**
+ * Stops to animate the browser action icon.
+ */
+exports.stopIconAnimation = function()
+{
+  if (frameInterval != null)
+    clearInterval(frameInterval);
+  if (animationInterval != null)
+    clearInterval(animationInterval);
+  frameInterval = animationInterval = null;
 };
 
 /**
  * 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)
 {
-  stopAnimation && stopAnimation();
-  stopAnimation = runAnimation(type);
+  stopIconAnimation();
+  runAnimation(type);
 };
-
-/**
- * Stops to animate the browser action icon.
- */
-exports.stopIconAnimation = function()
-{
-  stopAnimation && stopAnimation();
-};