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 15 matching lines @@
 {
   this.Subscription = Subscription;
   this.DownloadableSubscription = DownloadableSubscription;
 }
 var FilterStorage = require("filterStorage").FilterStorage;
 var ElemHide = require("elemHide").ElemHide;
 var defaultMatcher = require("matcher").defaultMatcher;
 var Prefs = require("prefs").Prefs;
 var Synchronizer = require("synchronizer").Synchronizer;
 var Utils = require("utils").Utils;
+var Notification = require("notification").Notification;
 
 // Some types cannot be distinguished
 RegExpFilter.typeMap.OBJECT_SUBREQUEST = RegExpFilter.typeMap.OBJECT;
 RegExpFilter.typeMap.MEDIA = RegExpFilter.typeMap.FONT = RegExpFilter.typeMap.OTHER;
 
 var isFirstRun = false;
 var seenDataCorruption = false;
 require("filterNotifier").FilterNotifier.addListener(function(action)
 {
   if (action == "load")
@@ skipping 54 matching lines @@
 {
   // Ignore fragment identifier
   var index = url.indexOf("#");
   if (index >= 0)
     url = url.substring(0, index);
 
   var result = defaultMatcher.matchesAny(url, type || "DOCUMENT", extractHostFromURL(parentUrl || url), false);
   return (result instanceof WhitelistFilter ? result : null);
 }
 
+var activeNotification = null;
+
 // Adds or removes page action icon according to options.
 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";
-  chrome.pageAction.setIcon({tabId: tab.id, path: iconFilename});
+
+  if (activeNotification)
+    startIconAnimation(tab, iconFilename);

[Wladimir Palant, 2013/07/23 11:53:17]

Don't we need to check whether this is actually the active tab? We do some
refreshes for background tabs when we stop animations.

[Felix Dahlke, 2013/07/23 12:52:02]

I don't think it's necessary, since we only refresh background tabs on startup
and right after activeAnimation is set to null. We could do it to be really
safe, but I think then we'd also have to ensure that the tab is in the currently
focused window, and we already have that logic below.

+  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
       chrome.pageAction.show(tab.id);
 
@@ skipping 336 matching lines @@
             chrome.tabs.onUpdated.removeListener(listener);
             onLoad();
           }
         };
         chrome.tabs.onUpdated.addListener(listener);
       }
     });
   }
 }
 
+var iconAnimationTimer = null;
+var animatedIconTab = null;
+
+function stopIconAnimation()
+{
+  if (!iconAnimationTimer)
+    return;
+
+  clearTimeout(iconAnimationTimer);
+  iconAnimationTimer = null;
+  animatedIconTab = null;

[Wladimir Palant, 2013/07/23 11:53:17]

refreshIconAndContextMenu(animatedIconTab)? Well, not really necessary I
guess...

[Felix Dahlke, 2013/07/23 12:52:02]

Not necessary, no. I used to do that here, but removed it now that
stopIconAnimation is called in startIconAnimation - doesn't really make much
sense to set the icon right before it's being animated IMO.

+}
+
+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(tab, iconPath)
+{
+  stopIconAnimation();
+  animatedIconTab = tab;
+
+  var severitySuffix = activeNotification.severity === "critical"
+      ? "critical" : "information";
+  var notificationIconPath = "icons/notification-" + severitySuffix + ".png";
+  var iconFiles = [iconPath, notificationIconPath];
+  loadImages(iconFiles, function(images)
+  {
+    var icon = images[iconPath];
+    var notificationIcon = images[notificationIconPath];
+
+    var canvas = document.createElement("canvas");
+    canvas.width = icon.width;
+    canvas.height = icon.height;
+    var context = canvas.getContext("2d");
+
+    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 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()
+{
+  function refreshAll(tabs)
+  {
+    tabs.forEach(refreshIconAndContextMenu);
+  }
+
+  activeNotification.onClicked = function()
+  {
+    stopIconAnimation();
+    activeNotification = null;
+    chrome.tabs.query(null, refreshAll);

[Wladimir Palant, 2013/07/23 11:53:17]

Do we still need to refresh all icons here?

if (animatedIconTab)
{
  var tab = animatedIconTab;
  stopIconAnimation();
  refreshAll([tab]);
}

refreshTabs() might be a better name than refreshAll(), it shouldn't actually
apply to all tabs.

[Felix Dahlke, 2013/07/23 12:52:02]

Done. You're right, it's not necessary anymore now that we reset the icon for
tabs that become inactive.

+  };
+
+  chrome.windows.getLastFocused({populate: true}, function(window)
+  {
+    chrome.tabs.query({active: true, windowId: window.id}, refreshAll);
+  });
+}
+
+function showNotification(notification)
+{
+  activeNotification = notification;
+
+  if (activeNotification.severity === "critical")
+  {
+    var notification = webkitNotifications.createHTMLNotification("notification.html");
+    notification.show();
+    notification.addEventListener("close", prepareNotificationIconAndPopup);
+  }
+  else
+    prepareNotificationIconAndPopup();
+}
+
 /**
  * This function is a hack - we only know the tabId and document URL for a
  * message but we need to know the frame ID. Try to find it in webRequest's
  * frame data.
  */
 function getFrameId(tabId, url)
 {
   if (tabId in frames)
   {
     for (var f in frames[tabId])
@@ skipping 116 matching lines @@
       refreshIconAndContextMenu(windows[i].tabs[j]);
 });
 
 // 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, function(tab)
+  {
+    refreshIconAndContextMenu(tab);
+  });

[Wladimir Palant, 2013/07/23 11:53:17]

How about:

chrome.tabs.get(activeInfo.tabId, refreshIconAndContextMenu);

[Felix Dahlke, 2013/07/23 12:52:02]

Done.

+});
+chrome.windows.onFocusChanged.addListener(function(windowId)
+{
+  refreshIconAndContextMenu(animatedIconTab);
+  chrome.tabs.query({active: true, windowId: windowId}, function(tabs)
+  {
+    refreshIconAndContextMenu(tabs[0]);

[Wladimir Palant, 2013/07/23 11:53:17]

How about dropping the assumption that there is only one tab:

tabs.forEach(refreshIconAndContextMenu);

[Felix Dahlke, 2013/07/23 12:52:02]

This should really only be one, but yeah, forEach is safer. I think the list can
actually be empty sometimes.

+  });
+});
+
+setTimeout(function()
+{
+  var notificationToShow = Notification.getNextToShow();
+  if (notificationToShow)
+    showNotification(notificationToShow);
+}, 3 * 60 * 1000);