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
  * 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 frameInterval = null;
 let animationInterval = null;
+let onActivated = null;
 let whitelistedState = new ext.PageMap();
 
 function loadImage(url)
 {
   return new Promise((resolve, reject) =>
   {
     let image = new Image();
     image.src = url;
     image.addEventListener("load", () =>
     {
@@ skipping 72 matching lines @@
     }
 
     return frames;
   });
 }
 
 function runAnimation(notificationType)
 {
   function playAnimation(frames)
   {
-    let animationStep = 0;
     ext.pages.query({active: true}, pages =>
     {
-      function appendActivePage(page)
+      let animationStep = 0;
+      let opacity = 0;
+
+      onActivated = page =>
       {
         pages.push(page);
-      }
-      ext.pages.onActivated.addListener(appendActivePage);
+        setIcon(page, notificationType, opacity, frames);
+      };
+      ext.pages.onActivated.addListener(onActivated);
 
       frameInterval = setInterval(() =>
       {
-        let opacity = frameOpacities[animationStep++];
-        for (let page of pages)
+        let oldOpacity = opacity;
+        opacity = frameOpacities[animationStep++];
+
+        if (opacity != oldOpacity)
         {
-          if (whitelistedState.has(page))
-            setIcon(page, notificationType, opacity, frames);
-        };
+          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);
+          ext.pages.onActivated.removeListener(onActivated);
+          frameInterval = onActivated = null;
         }
       }, 100);
     });
   }
 
   renderFrames(notificationType).then(frames =>
   {
     playAnimation(frames);
     animationInterval = setInterval(() => { playAnimation(frames); }, 10000);
   });
@@ skipping 16 matching lines @@
 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;
+  if (onActivated)
+    ext.pages.onActivated.removeListener(onActivated);
+  frameInterval = animationInterval = onActivated = 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)
 {
   stopIconAnimation();
   runAnimation(type);
 };