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.
+  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) {
     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;
+
+    document.getElementById("notification_close").onclick =
+        hideNotificationBubble;
+    document.getElementById("notification_bubble").setAttribute("tabIndex", 0);
+    document.getElementById("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) {
+        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) {
       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);