Issue 3532 - Handle when the icon animaion is stopped while animating

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 stopRequested = false;
+let canUpdateIcon = true;
+let notRunning = Promise.resolve();
 let whitelistedState = new ext.PageMap();
 
 function loadImage(url)
 {
   return new Promise((resolve, reject) =>
   {
     let image = new Image();
     image.src = url;
     image.addEventListener("load", () =>
     {
@@ skipping 75 matching lines @@
   });
 }
 
 function animateIcon(notificationType, frames)
 {
   ext.pages.query({active: true}, pages =>
   {
     let animationStep = 0;
     let opacity = 0;
 
-    onActivated = page =>
+    let onActivated = page =>
     {
       pages.push(page);
       setIcon(page, notificationType, opacity, frames);
     };
     ext.pages.onActivated.addListener(onActivated);
 
-    frameInterval = setInterval(() =>
+    canUpdateIcon = false;
+    let frameInterval = setInterval(() =>
     {
       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;
+        canUpdateIcon = true;
       }
     }, 100);
   });
 }
 
-function runAnimationLoop(notificationType)
-{
-  renderFrames(notificationType).then(frames =>
-  {
-    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
  */
 exports.updateIcon = function(page, whitelisted)
 {
   whitelistedState.set(page, whitelisted);
-  if (frameInterval == null)
+  if (canUpdateIcon)
     setIcon(page);
 };
 
 let stopIconAnimation =
 /**
  * Stops to animate the browser action icon.
+ *
+ * @return {Promise}
  */
 exports.stopIconAnimation = function()
 {
-  if (frameInterval != null)
-    clearInterval(frameInterval);
-  if (animationInterval != null)
-    clearInterval(animationInterval);
-  if (onActivated)
-    ext.pages.onActivated.removeListener(onActivated);
-  frameInterval = animationInterval = onActivated = null;
+  stopRequested = true;
+  return notRunning.then(() =>
+  {
+    stopRequested = false;
+  });
 };
 
 /**
  * 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();
-  runAnimationLoop(type);
+  notRunning = new Promise(resolve =>
+  {
+    Promise.all([renderFrames(type), stopIconAnimation()]).then(results =>
+    {
+      if (stopRequested)
+      {
+        resolve();
+        return;
+      }
+
+      let frames = results[0];
+      animateIcon(type, frames);
+
+      let animationInterval = setInterval(() =>
+      {
+        if (stopRequested)
+        {
+          clearInterval(animationInterval);
+          resolve();
+          return;
+        }
+
+        animateIcon(type, frames);
+      }, 10000);
+    });
+  });
 };