ntp4: notification area

chrome/browser/resources/ntp4/new_tab.js

Index: chrome/browser/resources/ntp4/new_tab.js
diff --git a/chrome/browser/resources/ntp4/new_tab.js b/chrome/browser/resources/ntp4/new_tab.js
index 22e0a5eb70a3e0c7a57d2895f584e8fdc678252e..2f9922da4fc5de677e92cb4adb47ba4746a25a5b 100644
--- a/chrome/browser/resources/ntp4/new_tab.js
+++ b/chrome/browser/resources/ntp4/new_tab.js
@@ -84,6 +84,10 @@ cr.define('ntp4', function() {
     trash = getRequiredElement('trash');
     trash.hidden = true;
 
+    document.querySelector('#notification button').onclick = function(e) {
+      hideNotification();
+    };
+
     // Request data on the apps so we can fill them in.
     // Note that this is kicked off asynchronously.  'getAppsCallback' will be
     // invoked at some point after this function returns.
@@ -371,7 +375,51 @@ cr.define('ntp4', function() {
     } else {
       attribution.hidden = true;
     }
+  }
+
+  /**
+    * Timeout ID.
+    * @type {number}
+    */
+  var notificationTimeout_ = 0;
+
+  /**
+   * Shows the notification bubble.
+   * @param {string} text The notification message.
+   * @param {array} links An array of objects describing the links in the

[Rick Byers, 2011/06/08 20:41:10]

You could precisely describe the type using closure type syntax, I think it's:
{Array.<{{text:string, action: function()}}>}

[Evan Stade, 2011/06/08 23:54:52]

yes, I think that's it except with one fewer pair of curlies. thanks.

+   *     notification. Each object should have a 'text' attribute (a string)
+   *     and an 'action' attribute (a function to run when the link is
+   *     activated).
+   */
+  function showNotification(text, links) {
+    window.clearTimeout(notificationTimeout_);
+    document.querySelector('#notification > span').textContent = text;
+
+    var linksBin = $('notificationLinks');
+    linksBin.textContent = '';
+    for (var i = 0; i < links.length; i++) {
+      var link = linksBin.ownerDocument.createElement('div');
+      link.textContent = links[i].text;
+      var action = links[i].action;
+      link.onclick = function(e) {
+        action();
+        hideNotification();
+      }
+      link.setAttribute('role', 'button');
+      link.setAttribute('tabindex', 0);
+      link.className = "linkButton";
+      linksBin.appendChild(link);
+    }
 
+    $('notification').classList.remove('inactive');
+    notificationTimeout_ = window.setTimeout(hideNotification, 10000);
+  }
+
+  /**
+   * Hide the notification bubble.
+   */
+  function hideNotification() {
+    $('notification').classList.add('inactive');
   }
 
   function setRecentlyClosedTabs(dataItems) {
@@ -395,6 +443,7 @@ cr.define('ntp4', function() {
     themeChanged: themeChanged,
     setRecentlyClosedTabs: setRecentlyClosedTabs,
     setMostVisitedPages: setMostVisitedPages,
+    showNotification: showNotification,
   };
 });