Show notifications on startup (Chrome)

background.js

Index: background.js
===================================================================
--- a/background.js
+++ b/background.js
@@ -33,6 +33,7 @@
 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;
@@ -133,6 +134,9 @@
     else
       showContextMenu();
   }
+
+  if (activeNotification)
+    setNotificationPageAction(tab);

[Wladimir Palant, 2013/07/21 11:15:30]

This logic seems wrong to me - you are overriding refreshIconAndContextMenu()
logic here instead of extending it. Suggestion: you set the state in
showNotification() and refreshIconAndContextMenu() decides which icon to show
and whether to animate between two icons. If the state changes you can call
refreshIconAndContextMenu() for all tabs.

[Felix Dahlke, 2013/07/22 12:30:15]

Done.

 }
 
 /**
@@ -473,6 +477,152 @@
   }
 }
 
+var activeNotification;

[Wladimir Palant, 2013/07/21 11:15:30]

Initialize with null so you don't work with undefined values in
refreshIconAndContextMenu?

[Felix Dahlke, 2013/07/22 12:30:15]

Done, didn't notice that we always tend to do that.

+
+function loadImages(imageFiles, callback)
+{
+  var images = {};
+  imageFiles.forEach(function(imageFile)
+  {
+    var image = new Image();
+    image.src = imageFile;
+    image.addEventListener("load", function()
+    {
+      images[imageFile] = image;
+      if (Object.keys(images).length === imageFiles.length)

[Wladimir Palant, 2013/07/21 11:15:30]

I really don't like relying on Object.keys() only having the keys you put into
it, use a proper counter?

[Felix Dahlke, 2013/07/22 12:30:15]

I had a hunch you'd say this :) Done.

+        callback(images);
+    });
+  });
+}
+
+function startInformationNotificationAnimation()
+{
+  var abpIconFile = "icons/abp-19.png";

[Wladimir Palant, 2013/07/21 11:15:30]

What about "icons/abp-19-whitelisted.png"?

+  var notificationIconFile = "icons/notification-information.png";
+  var iconFiles = [abpIconFile, notificationIconFile];
+  loadImages(iconFiles, function(images)
+  {
+    var abpIcon = images[abpIconFile];
+    var notificationIcon = images[notificationIconFile];
+    var canvas = document.createElement("canvas");
+    canvas.width = abpIcon.width;
+    canvas.height = abpIcon.height;
+    var context = canvas.getContext("2d");
+
+    var animationStartTime = Date.now();
+    var animationInterval = 1000 / 60;
+    function animationStep()
+    {
+      var timeElapsed = Date.now() - animationStartTime;
+      var duration = 3000;
+      var animationTime = timeElapsed % duration;
+      var delay = 1000;
+      var fadeInEndTime = duration / 2 - delay / 2;
+      var fadeOutStartTime = fadeInEndTime + delay;
+
+      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(abpIcon, 0, 0);
+      context.globalAlpha = opacity;
+      context.drawImage(notificationIcon, 0, 0);
+      var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+
+      chrome.tabs.getSelected(null, function(tab)
+      {
+        chrome.pageAction.setIcon({tabId: tab.id, imageData: imageData});
+        activeNotification.animationTimer =
+          setTimeout(animationStep, animationInterval);
+      });

[Wladimir Palant, 2013/07/21 11:15:30]

Frankly, drawing images 60 times per second is a huge overkill (e.g. think of
the CPU use). I suggest precomputing two images (abp-19.png with notification
icon and abp-19-whitelisted.png with notification icon). For the animation
switching between the regular icon and the version with notification every three
seconds should be sufficient.

[Felix Dahlke, 2013/07/21 12:19:53]

Well, drawing images 60 times per second is how animations normally work, and we
wouldn't be the only Chrome extension doing it. Note that this is more like
_at_most_ 60 times per second, so I thought we'd at worst get a stuttering
animation.

We could move to simple blinking, but I personally prefer the animation. In any
case, this is mostly an aesthetical issue, so we might want to delay that until
lthe next release, given that we're in a bit of a hurry. I'm sure we'll get
various ideas on how to improve this if I demonstrate it on Monday.

Regarding abp-19-whitelisted.png, I did try to get the path of the current icon
and use that, but that's not possible in Chrome so I didn't bother for now. We
can of course save the current icon path whenever we set it.

+    }
+    animationStep();
+  });
+}
+
+function showInformationNotification()
+{
+  activeNotification.onClicked = function()
+  {
+    clearTimeout(activeNotification.animationTimer);
+    chrome.tabs.getAllInWindow(null, function(tabs)
+    {
+      tabs.forEach(refreshIconAndContextMenu);
+      activeNotification = null;
+    });
+  };
+
+  startInformationNotificationAnimation();
+}
+
+function showCriticalNotification()
+{
+  var notification = webkitNotifications.createHTMLNotification("notification.html");
+  notification.show();
+}
+
+function setNotificationPageAction(tab)
+{
+  if (activeNotification.severity !== "critical")
+    return;
+
+  var abpIconFile = "icons/abp-19.png";
+  var notificationIconFile = "icons/notification-critical.png";

[Wladimir Palant, 2013/07/21 11:15:30]

Again, what about abp-19-whitelisted.png?

Same comment here - we can precompile the images (e.g. in showNotification),
doing this all the time is unnecessary.

+  var iconFiles = [abpIconFile, notificationIconFile];
+  loadImages(iconFiles, function(images)
+  {
+    var abpIcon = images[abpIconFile];
+    var notificationIcon = images[notificationIconFile];
+    var canvas = document.createElement("canvas");
+    canvas.width = abpIcon.width;
+    canvas.height = abpIcon.height;
+    var context = canvas.getContext("2d");
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(abpIcon, 0, 0);
+    context.drawImage(notificationIcon, 0, 0);
+    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+    chrome.pageAction.setIcon({tabId: tab.id, imageData: imageData});
+  });
+}
+
+function showNotification(notification)
+{
+  activeNotification = notification;
+
+  if (notification.severity === "critical")
+    showCriticalNotification();
+  else
+    showInformationNotification();
+
+  chrome.tabs.getAllInWindow(null, function(tabs)
+  {
+    tabs.forEach(setNotificationPageAction);
+  });
+}
+
+function getLocalizedTexts(notification)
+{
+  return Notification.getLocalizedTexts(notification);
+}
+
+function getDocLinks(notification)
+{
+  if (!notification.links)
+    return [];
+
+  var docLinks = [];
+  notification.links.forEach(function(link)
+  {
+    docLinks.push(Utils.getDocLink(link));
+  });
+  return docLinks;
+}
+
 /**
  * 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
@@ -609,3 +759,10 @@
   if(changeInfo.status == "loading")
     refreshIconAndContextMenu(tab);
 });
+
+setTimeout(function()
+{
+  var notificationToShow = Notification.getNextToShow();
+  if (notificationToShow)
+    showNotification(notificationToShow);
+}, 3 * 60 * 1000);