Show notifications on startup (Chrome)

background.js

 /*
  * This file is part of Adblock Plus <http://adblockplus.org/>,
  * Copyright (C) 2006-2013 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 103 matching lines @@
 function refreshIconAndContextMenu(tab)
 {
   // The tab could have been closed by the time this function is called
   if(!tab)
     return;
 
   var excluded = isWhitelisted(tab.url);
   var iconFilename = excluded ? "icons/abp-19-whitelisted.png" : "icons/abp-19.png";
 
   if (activeNotification)
-    activeNotification.tabIcons[tab.id] = iconFilename;

[Wladimir Palant, 2013/07/23 07:25:04]

This will leak memory if many tabs are opened and closed while the notification
is active.

[Felix Dahlke, 2013/07/23 10:38:08]

Done.

+    startIconAnimation(tab, iconFilename);
   else
     chrome.pageAction.setIcon({tabId: tab.id, path: iconFilename});
 
   // Only show icon for pages we can influence (http: and https:)
   if(/^https?:/.test(tab.url))
   {
     chrome.pageAction.setTitle({tabId: tab.id, title: "Adblock Plus"});
     if ("shouldShowIcon" in localStorage && localStorage["shouldShowIcon"] == "false")
       chrome.pageAction.hide(tab.id);
     else
@@ skipping 339 matching lines @@
             onLoad();
           }
         };
         chrome.tabs.onUpdated.addListener(listener);
       }
     });
   }
 }
 
 var iconAnimationTimer = null;
-var iconAnimationRestartTimer = null;

[Wladimir Palant, 2013/07/23 07:25:04]

A single timer should definitely be sufficient.

[Felix Dahlke, 2013/07/23 10:38:08]

Done.

+var animatedIconTab = null;
 
 function stopIconAnimation()
 {
-  if (iconAnimationRestartTimer)
-  {
-    clearTimeout(iconAnimationRestartTimer)
-    iconAnimationRestartTimer = null;
-  }
-
   if (!iconAnimationTimer)
     return;
 
   clearTimeout(iconAnimationTimer);
   iconAnimationTimer = null;
-  chrome.tabs.getAllInWindow(null, function(tabs)
-  {
-    tabs.forEach(refreshIconAndContextMenu);
-  });
+  animatedIconTab = null;
 }
 
 function loadImages(imageFiles, callback)
 {
   var images = {};
   var imagesLoaded = 0;
   imageFiles.forEach(function(imageFile)
   {
     var image = new Image();
     image.src = imageFile;
     image.addEventListener("load", function()
     {
       images[imageFile] = image;
       if (++imagesLoaded === imageFiles.length)
         callback(images);
     });
   });
 }
 
-function startIconAnimation()
+function startIconAnimation(tab, iconPath)
 {
   stopIconAnimation();
-
-  var normalIconFile = "icons/abp-19.png";
-  var whitelistedIconFile = "icons/abp-19-whitelisted.png";
+  animatedIconTab = tab;
+
   var severitySuffix = activeNotification.severity === "critical"
       ? "critical" : "information";
-  var notificationIconFile = "icons/notification-" + severitySuffix + ".png";
-  var iconFiles = [normalIconFile, whitelistedIconFile ,notificationIconFile];
+  var notificationIconPath = "icons/notification-" + severitySuffix + ".png";
+  var iconFiles = [iconPath, notificationIconPath];
   loadImages(iconFiles, function(images)
   {
-    var normalIcon = images[normalIconFile];
-    var notificationIcon = images[notificationIconFile];
+    var icon = images[iconPath];
+    var notificationIcon = images[notificationIconPath];
+
     var canvas = document.createElement("canvas");
-    canvas.width = normalIcon.width;
-    canvas.height = normalIcon.height;
+    canvas.width = icon.width;
+    canvas.height = icon.height;
     var context = canvas.getContext("2d");
 
-    var animationStartTime = Date.now();
-    var animationInterval = 1000 / 5;
+    var currentFrame = 0;
+    var frameOpacities = [0, 0.2, 0.4, 0.6, 0.8,
+                          1, 1, 1, 1, 1,
+                          0.8, 0.6, 0.4, 0.2, 0];
+
     function animationStep()
     {
-      var timeElapsed = Date.now() - animationStartTime;
-      var duration = 3000;
-      if (timeElapsed > duration)
-      {
-        stopIconAnimation();
-        iconAnimationRestartTimer = setTimeout(startIconAnimation, 5000);
-        return;
-      }
-
-      chrome.tabs.getSelected(null, function(tab)
-      {
-        var icon = images[activeNotification.tabIcons[tab.id]];
-        var animationTime = timeElapsed % duration;
-        var showDelay = 1000;
-        var fadeInEndTime = duration / 2 - showDelay / 2;
-        var fadeOutStartTime = fadeInEndTime + showDelay;
-
-        var opacity;
-        if (animationTime < fadeInEndTime)
-          opacity = animationTime / fadeInEndTime;
-        else if (animationTime > fadeOutStartTime)
-          opacity = 1 - (animationTime - fadeOutStartTime)
-            / (duration - fadeOutStartTime);
-
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        context.globalAlpha = 1;
-        context.drawImage(icon, 0, 0);
-        context.globalAlpha = opacity;
-        context.drawImage(notificationIcon, 0, 0);
-        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-
-        chrome.pageAction.setIcon({tabId: tab.id, imageData: imageData});
-        iconAnimationTimer = setTimeout(animationStep, animationInterval);
-      });
+      var opacity = frameOpacities[currentFrame];
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      context.globalAlpha = 1;
+      context.drawImage(icon, 0, 0);
+      context.globalAlpha = opacity;
+      context.drawImage(notificationIcon, 0, 0);
+      var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+      chrome.pageAction.setIcon({tabId: tab.id, imageData: imageData});
+
+      var interval;
+      currentFrame++;
+      if (currentFrame < frameOpacities.length)
+      {
+        var duration = 3000;
+        interval = duration / frameOpacities.length;
+      }
+      else
+      {
+        currentFrame = 0;
+        interval = 10000;
+      }
+      iconAnimationTimer = setTimeout(animationStep, interval);
     }
     animationStep();
   });
 }
 
 function prepareNotificationIconAndPopup()
 {
-  activeNotification.tabIcons = {};
   activeNotification.onClicked = function()
   {
+    var tab = animatedIconTab;
     stopIconAnimation();
     activeNotification = null;
+    refreshIconAndContextMenu(tab);
   };
-  startIconAnimation();
-
-  chrome.tabs.getAllInWindow(null, function(tabs)
-  {
-    tabs.forEach(refreshIconAndContextMenu);
+
+  chrome.windows.getLastFocused({populate: true}, function(window)
+  {
+    chrome.tabs.query({active: true, windowId: window.id}, function(tabs)
+    {
+      tabs.forEach(refreshIconAndContextMenu);
+    });
   });
 }
 
 function showNotification(notification)
 {
   activeNotification = notification;
 
   if (activeNotification.severity === "critical")
   {
     var notification = webkitNotifications.createHTMLNotification("notification.html");
@@ skipping 134 matching lines @@
 });
 
 // Update icon if a tab changes location
 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab)
 {
   chrome.tabs.sendRequest(tabId, {reqtype: "clickhide-deactivate"})
   if(changeInfo.status == "loading")
     refreshIconAndContextMenu(tab);
 });
 
+// Refresh icon when switching tabs or windows
+chrome.tabs.onActivated.addListener(function(activeInfo)
+{
+  refreshIconAndContextMenu(animatedIconTab);
+  chrome.tabs.get(activeInfo.tabId, refreshIconAndContextMenu);
+});
+chrome.windows.onFocusChanged.addListener(function(windowId)
+{
+  refreshIconAndContextMenu(animatedIconTab);
+  chrome.tabs.query({active: true, windowId: windowId}, function(tabs)
+  {
+    tabs.forEach(refreshIconAndContextMenu);
+  });
+});
+
 setTimeout(function()
 {
   var notificationToShow = Notification.getNextToShow();
   if (notificationToShow)
     showNotification(notificationToShow);
 }, 3 * 60 * 1000);