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

lib/icon.js

Index: lib/icon.js
===================================================================
--- a/lib/icon.js
+++ b/lib/icon.js
@@ -27,6 +27,7 @@
 
 let frameInterval = null;
 let animationInterval = null;
+let onActivated = null;
 let whitelistedState = new ext.PageMap();
 
 function loadImage(url)
@@ -115,43 +116,53 @@
   });
 }
 
-function runAnimation(notificationType)
+function animateIcon(notificationType, frames)
 {
-  function playAnimation(frames)
+  ext.pages.query({active: true}, pages =>
   {
     let animationStep = 0;
-    ext.pages.query({active: true}, pages =>
+    let opacity = 0;
+
+    onActivated = page =>
     {
-      function appendActivePage(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);
-      }
-      ext.pages.onActivated.addListener(appendActivePage);
-
-      frameInterval = setInterval(() =>
-      {
-        let opacity = frameOpacities[animationStep++];
         for (let page of pages)
         {
           if (whitelistedState.has(page))
             setIcon(page, notificationType, opacity, frames);
-        };
+        }
+      }
 
-        if (animationStep > numberOfFrames)
-        {
-          animationStep = 0;
-          clearInterval(frameInterval);
-          frameInterval = null;
-          ext.pages.onActivated.removeListener(appendActivePage);
-        }
-      }, 100);
-    });
-  }
+      if (animationStep > numberOfFrames)
+      {
+        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);
   });
 }
 
@@ -179,7 +190,9 @@
     clearInterval(frameInterval);
   if (animationInterval != null)
     clearInterval(animationInterval);
-  frameInterval = animationInterval = null;
+  if (onActivated)
+    ext.pages.onActivated.removeListener(onActivated);
+  frameInterval = animationInterval = onActivated = null;
 };
 
 /**
@@ -190,5 +203,5 @@
 exports.startIconAnimation = function(type)
 {
   stopIconAnimation();
-  runAnimation(type);
+  runAnimationLoop(type);
 };