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.
+  $('notification-title').textContent = title;
+  $('notification-message').textContent = message;
+  $('notification-link').href = link;
+  $('notification-link').textContent = link_message;
+
+  var target = event.target;
+  while (target.parentElement && target.tagName != "A") {
+    target = target.parentElement;
+  }
+
+  // Move the bubble to the right location.
+  var bubble = $('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 = $('arrow-contents');
+  var border = $('arrow-border');
+  var shadow = $('arrow-shadow');
+  y += 26;
+  x -= arrow.style.width + 23;
+  arrow.style.left = x + "px";
+  arrow.style.top = y + "px";
+  x -= 1;
+  border.style.left = x + "px";
+  border.style.top = y + "px";
+  x -= 1;
+  shadow.style.left = x + "px";
+  shadow.style.top = y + "px";
+
+  // Animate the bubble into view.
+  bubble.style.opacity = 1;
+  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.
+  $('notification-bubble').style.opacity = 0;
+  $('arrow-border').style.opacity = 0;
+  $('arrow-shadow').style.opacity = 0;
+  $('arrow-contents').style.opacity = 0;
+}
+
 var apps = (function() {
 
   function createElement(app) {
@@ -166,12 +229,37 @@
     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;
+
+    $("notification-close").onclick = hideNotificationBubble;
+    $("notification-bubble").setAttribute("tabIndex", 0);
+    $("notification-bubble").onblur = hideNotificationBubble;
+
     return div;
   }
 
@@ -219,6 +307,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 +415,7 @@
         e.canExecute = true;
         break;
       case 'apps-uninstall-command':
-        e.canExecute = !currentApp['can_uninstall'];
+        e.canExecute = currentApp && !currentApp['can_uninstall'];
         break;
     }
   });
@@ -684,7 +778,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 +815,31 @@
         addContextMenu(div, app);
       }
 
-      return div;
+      if (app.notifications && app.notifications.length > 0) {

[asargent_no_longer_on_chrome, 2011/07/01 05:03:06]

FYI, in the code I ended up checking in, I just put the most recent notification
in a property called "notification" instead of the full list in a
"notifications" property, so you'll need to fix that here. See:

http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/ui/webui/ntp/a...

I pulled in your patch from this codereview, made the edit I mention above, but
the UI doesn't seem to be working correctly for me, so you might want to update
to trunk and test things yourself.

[Finnur, 2011/07/01 13:43:18]

I know. This is already wired up in this changelist.
I did just now, and it works, except that you have to press F5 to get the new
notifications to show up on the NTP (the changelist I was working against
recreated the apps when new notifications came in, which is something that
changed with your last changelist). I have now changed it so that updates
request new app info for all apps, which should be enough for the prototype.


On 2011/07/01 05:03:06, Antony Sargent wrote:

+        // Create the notification div below the app icon that is used to
+        // trigger the hidden notification bubble to appear.
+        var notification = document.createElement('div')
+        container.appendChild(notification);
+        var title = document.createElement('span');
+        title.innerText = app.notifications[0].title;
+        notification.appendChild(title);
+        notification.appendChild(document.createElement('br'));
+
+        var body = document.createElement('span');
+        container.appendChild(body);
+        body.innerText = app.notifications[0].body;
+        notification.appendChild(body);
+        if (app.notifications[0].linkUrl) {
+          notification.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";
+          notification.appendChild(link);
+        }
+      }
+
+      return container;
     },
 
     createMiniviewElement: function(app) {