Wire up notifications to the New Tab page.

chrome/browser/resources/ntp/apps.js

Index: chrome/browser/resources/ntp/apps.js
===================================================================
--- chrome/browser/resources/ntp/apps.js	(revision 90942)
+++ chrome/browser/resources/ntp/apps.js	(working copy)
@@ -159,6 +159,69 @@
   chrome.send('launchApp', [appId, APP_LAUNCH.NTP_APP_RE_ENABLE]);
 }
 
+// Shows the notification bubble for a given app (the one clicked on).
+function showNotificationBubble(event) {
+  var item = findAncestorByClass(event.target, 'app-anchor');
+  var title = item.getAttribute('notification-title');
+  var message = item.getAttribute('notification-message');
+  var link = item.getAttribute('notification-link');
+  var link_message = item.getAttribute('notification-link-message');
+
+  if (!title || !message)
+    return;
+
+  // Set the content to the right text.
+  document.getElementById('notification_title').textContent = title;

[Evan Stade, 2011/06/30 23:20:33]

$() instead of document.getElementById

[Finnur, 2011/07/01 00:33:55]

Done.

+  document.getElementById('notification_message').textContent = message;
+  document.getElementById('notification_link').href = link;
+  document.getElementById('notification_link').textContent = link_message;
+
+  var target = event.target;

[Evan Stade, 2011/06/30 23:20:33]

event.currentTarget will do what you want

[Finnur, 2011/07/01 00:33:55]

Not sure what you mean here. event.target and event.currentTarget point to the
same element: the span that is the child of the <a> tag. I need the <a> tag
here.

On 2011/06/30 23:20:33, Evan Stade wrote:

[Evan Stade, 2011/07/02 00:27:50]

if that is the case, how does this line from handleClick work?

var appId = e.currentTarget.getAttribute('app-id');

+  while (target.parentElement && target.tagName != "A") {
+    target = target.parentElement;
+  }
+
+  // Move the bubble to the right location.
+  var bubble = document.getElementById('notification_bubble');
+  var x = target.parentElement.offsetLeft +
+          target.parentElement.offsetWidth - 20;
+  var y = target.parentElement.offsetTop + 20;
+  bubble.style.left = x + "px";
+  bubble.style.top = y + "px";
+
+  // Move the arrow and shadow to the right location.
+  var arrow = document.getElementById('arrow_contents');
+  var border = document.getElementById('arrow_border');
+  var shadow = document.getElementById('arrow_shadow');
+  y += 26;
+  x = x - arrow.style.width - 23;

[Evan Stade, 2011/06/30 23:20:33]

-= ?

[Finnur, 2011/07/01 00:33:55]

Done.

+  arrow.style.left = x + "px";
+  arrow.style.top = y + "px";
+  x -= 1;
+  border.style.left = x + "px";
+  border.style.top = y + "px";

[Evan Stade, 2011/07/02 00:27:50]

I suggest wrapping all these in a single div so you don't have to set
coordinates for all of them

+  x -= 1;
+  shadow.style.left = x + "px";
+  shadow.style.top = y + "px";
+
+  // Animate the bubble into view.
+  bubble.style.opacity = 1;

[Evan Stade, 2011/06/30 23:20:33]

better to do this with a css class than manually editing css in js

[Finnur, 2011/07/01 00:33:55]

I always find it a little silly to create a class around one css property and
start flipping classes around instead of just changing the property. Seems like
the extra level of indirection doesn't result in simpler code. But, if you feel
strongly about this I can take a look in the morning (it is past midnight here).

On 2011/06/30 23:20:33, Evan Stade wrote:

[Evan Stade, 2011/07/02 00:27:50]

it definitely does if you have the right CSS selectors set up. You'd only have
to add the class to one of these things. However you can also shorten this code
considerably by following the wrapping div suggestion above.

+  arrow.style.opacity = 1;
+  border.style.opacity = 1;
+  shadow.style.opacity = 1;
+
+  bubble.focus();
+}
+
+// Hide the notification bubble.
+function hideNotificationBubble(event) {
+  // This will fade the bubble out of existence.
+  document.getElementById('notification_bubble').style.opacity = 0;
+  document.getElementById('arrow_border').style.opacity = 0;
+  document.getElementById('arrow_shadow').style.opacity = 0;
+  document.getElementById('arrow_contents').style.opacity = 0;
+}
+
 var apps = (function() {
 
   function createElement(app) {
@@ -166,12 +229,39 @@
     div.className = 'app';
 
     var a = div.appendChild(document.createElement('a'));
+    a.className = 'app-anchor';
     a.setAttribute('app-id', app['id']);
     a.setAttribute('launch-type', app['launch_type']);
+    if (typeof(app['notification']) != "undefined") {
+      a.setAttribute('notification-title', app['notification']['title']);
+      a.setAttribute('notification-message', app['notification']['body']);
+      if (typeof(app['notification']['linkUrl']) != "undefined" &&
+          typeof(app['notification']['linkText']) != "undefined") {
+        a.setAttribute('notification-link', app['notification']['linkUrl']);
+        a.setAttribute('notification-link-message',
+                       app['notification']['linkText']);
+      }
+    }
     a.draggable = false;
-    a.xtitle = a.textContent = app['name'];
     a.href = app['launch_url'];
 
+    var span = a.appendChild(document.createElement('span'));
+    span.textContent = app['name'];
+
+    span = a.appendChild(document.createElement('span'));
+    span.className = "app_notification";
+    span.textContent =
+        typeof(app['notification']) != "undefined" &&
+        typeof(app['notification']['title']) != "undefined" ?
+            app['notification']['title'] : "";
+    span.onclick = handleClick;
+
+    document.getElementById("notification_close").onclick =
+        hideNotificationBubble;
+    document.getElementById("notification_bubble").setAttribute("tabIndex", 0);
+    document.getElementById("notification_bubble").onblur =
+        hideNotificationBubble;
+
     return div;
   }
 
@@ -219,6 +309,12 @@
    */
   function handleClick(e) {
     var appId = e.currentTarget.getAttribute('app-id');
+    if (appId == null) {
+      showNotificationBubble(e);
+      e.stopPropagation();
+      return false;
+    }
+
     if (!appDragAndDrop.isDragging())
       launchApp(appId, e);
     return false;
@@ -321,7 +417,7 @@
         e.canExecute = true;
         break;
       case 'apps-uninstall-command':
-        e.canExecute = !currentApp['can_uninstall'];
+        e.canExecute = currentApp && !currentApp['can_uninstall'];
         break;
     }
   });
@@ -684,7 +780,9 @@
     },
 
     createElement: function(app) {
+      var container = document.createElement('div');
       var div = createElement(app);
+      container.appendChild(div);
       var a = div.firstChild;
 
       a.onclick = handleClick;
@@ -719,7 +817,29 @@
         addContextMenu(div, app);
       }
 
-      return div;
+      if (app.notifications && app.notifications.length > 0) {
+        var notif_div = document.createElement('div')

[Evan Stade, 2011/06/30 23:20:33]

1. all variable names should be camel case

2. I don't understand where notif_div is used. You have a single notification
bubble for all apps, right? So where does notif_div fit in (please answer via
in-code comments)

[Finnur, 2011/07/01 00:33:55]

This isn't about the bubble. It is about the text under the icon that triggers
the bubble. I've changed the name and added comments to explain.

On 2011/06/30 23:20:33, Evan Stade wrote:

+        container.appendChild(notif_div);
+        var title = document.createElement('span');
+        title.innerText = app.notifications[0].title;
+        notif_div.appendChild(title);
+        notif_div.appendChild(document.createElement('br'));
+
+        var body = document.createElement('span');
+        container.appendChild(body);
+        body.innerText = app.notifications[0].body;
+        notif_div.appendChild(body);
+        if (app.notifications[0].linkUrl) {
+          notif_div.appendChild(document.createElement('br'));
+          var link = document.createElement('a');
+          link.href = app.notifications[0].linkUrl;
+          link.innerText = app.notifications[0].linkText ?
+              app.notifications[0].linkText : "link";
+          notif_div.appendChild(link);
+        }
+      }
+
+      return container;
     },
 
     createMiniviewElement: function(app) {