Issue 3532 - Improved preformance of icon animation and fixed a memory leak

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
@@ skipping 98 matching lines @@
           imageData[size] = context.getImageData(0, 0, size, size);
         }
         frames["" + opacity + whitelisted] = imageData;
       }
     }
 
     return frames;
   });
 }
 
-function runAnimation(notificationType)
-{
-  function playAnimation(frames)
-  {
-    ext.pages.query({active: true}, pages =>
-    {
-      let animationStep = 0;
-      let opacity = 0;
-
-      onActivated = page =>
+function animateIcon(notificationType, frames)
+{
+  ext.pages.query({active: true}, pages =>
+  {
+    let animationStep = 0;
+    let opacity = 0;
+
+    onActivated = page =>
+    {
+      pages.push(page);
+      setIcon(page, notificationType, opacity, frames);
+    };
+    ext.pages.onActivated.addListener(onActivated);
+
+    frameInterval = setInterval(() =>
+    {
+      let oldOpacity = opacity;
+      opacity = frameOpacities[animationStep++];
+
+      if (opacity != oldOpacity)
       {
-        pages.push(page);
-        setIcon(page, notificationType, opacity, frames);
-      };
-      ext.pages.onActivated.addListener(onActivated);
-
-      frameInterval = setInterval(() =>
+        for (let page of pages)
+        {
+          if (whitelistedState.has(page))
+            setIcon(page, notificationType, opacity, frames);
+        }
+      }
+
+      if (animationStep > numberOfFrames)
       {
-        let oldOpacity = opacity;
-        opacity = frameOpacities[animationStep++];
-
-        if (opacity != oldOpacity)
-        {
-          for (let page of pages)
-          {
-            if (whitelistedState.has(page))
-              setIcon(page, notificationType, opacity, frames);
-          }
-        }
-
-        if (animationStep > numberOfFrames)
-        {
-          clearInterval(frameInterval);
-          ext.pages.onActivated.removeListener(onActivated);
-          frameInterval = onActivated = null;
-        }
-      }, 100);
-    });
-  }
-
+        clearInterval(frameInterval);
+        ext.pages.onActivated.removeListener(onActivated);
+        frameInterval = onActivated = null;
+      }
+    }, 100);
+  });
+}
+
+function runAnimationLoop(notificationType)
+{
   renderFrames(notificationType).then(frames =>
   {
-    playAnimation(frames);
-    animationInterval = setInterval(() => { playAnimation(frames); }, 10000);
+    animateIcon(notificationType, frames);
+    animationInterval = setInterval(() =>
+    {
+      animateIcon(notificationType, 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
  */
@@ skipping 20 matching lines @@
 };
 
 /**
  * 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)
 {
   stopIconAnimation();
-  runAnimation(type);
-};
+  runAnimationLoop(type);
+};