Wire up notifications to the New Tab page.

chrome/browser/resources/ntp/apps.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 var MAX_APPS_PER_ROW = [];
 MAX_APPS_PER_ROW[LayoutMode.SMALL] = 4;
 MAX_APPS_PER_ROW[LayoutMode.NORMAL] = 6;
 
 function getAppsCallback(data) {
   logEvent('received apps');
@@ skipping 141 matching lines @@
 function appNotificationChanged(id, lastNotification) {
   // TODO(asargent/finnur) use this when we hook up notifications into the NTP.
 }
 
 // Launches the specified app using the APP_LAUNCH_NTP_APP_RE_ENABLE histogram.
 // This should only be invoked from the AppLauncherHandler.
 function launchAppAfterEnable(appId) {
   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) {
     var div = document.createElement('div');
     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;
   }
 
   /**
    * Launches an application.
    * @param {string} appId Application to launch.
    * @param {MouseEvent} opt_mouseEvent Mouse event from the click that
    *     triggered the launch, used to detect modifier keys that change
    *     the tab's disposition.
    */
@@ skipping 27 matching lines @@
       return APP_LAUNCH.NTP_APPS_COLLAPSED;
     else
       return APP_LAUNCH.NTP_APPS_MAXIMIZED;
   }
 
   /**
    * @this {!HTMLAnchorElement}
    */
   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;
   }
 
   // Keep in sync with LaunchType in extension_prefs.h
   var LaunchType = {
     LAUNCH_PINNED: 0,
     LAUNCH_REGULAR: 1,
     LAUNCH_FULLSCREEN: 2,
@@ skipping 82 matching lines @@
 
   document.addEventListener('canExecute', function(e) {
     switch (e.command.id) {
       case 'apps-options-command':
         e.canExecute = currentApp && currentApp['options_url'];
         break;
       case 'apps-launch-command':
         e.canExecute = true;
         break;
       case 'apps-uninstall-command':
-        e.canExecute = !currentApp['can_uninstall'];
+        e.canExecute = currentApp && !currentApp['can_uninstall'];
         break;
     }
   });
 
   // Moves the element at position |from| in array |arr| to position |to|.
   function arrayMove(arr, from, to) {
     var element = arr.splice(from, 1);
     arr.splice(to, 0, element[0]);
   }
 
@@ skipping 342 matching lines @@
         return;
       }
     },
 
     showImages: function() {
       $('apps-content').classList.add('visible');
       clearTimeout(this.imageTimer);
     },
 
     createElement: function(app) {
+      var container = document.createElement('div');
       var div = createElement(app);
+      container.appendChild(div);
       var a = div.firstChild;
 
       a.onclick = handleClick;
       a.ping = getAppPingUrl(
           'PING_BY_ID', this.showPromo, 'NTP_APPS_MAXIMIZED');
       a.style.backgroundImage = url(app['icon_big']);
       if (app.isNew) {
         div.setAttribute('new', 'new');
         // Delay changing the attribute a bit to let the page settle down a bit.
         setTimeout(function() {
@@ skipping 14 matching lines @@
       img.src = app['icon_big'];
 
       // User cannot change launch options or uninstall component extension.
       if (!app['is_component']) {
         var settingsButton = div.appendChild(new cr.ui.ContextMenuButton);
         settingsButton.className = 'app-settings';
         settingsButton.title = localStrings.getString('appsettings');
         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) {
       var span = document.createElement('span');
       var a = span.appendChild(document.createElement('a'));
 
       a.setAttribute('app-id', app['id']);
       a.textContent = app['name'];
       a.href = app['launch_url'];
       a.onclick = handleClick;
@@ skipping 52 matching lines @@
       a.href = localStrings.getString('web_store_url');
       a.style.backgroundImage = url('chrome://theme/IDR_WEBSTORE_ICON_16');
       a.className = 'item';
       return a;
     }
   };
 })();
 
 // Enable drag and drop reordering of the app launcher.
 var appDragAndDrop = new DragAndDropController(apps);