ntp4: notification area

chrome/browser/resources/ntp4/new_tab.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.
 
 /**
  * @fileoverview New tab page
  * This is the main code for the new tab page used by touch-enabled Chrome
  * browsers.  For now this is still a prototype.
  */
 
@@ skipping 66 matching lines @@
    */
   function initialize() {
     // Load the current theme colors.
     themeChanged();
 
     dotList = getRequiredElement('dot-list');
     pageList = getRequiredElement('page-list');
     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.
     chrome.send('getApps');
 
     // Prevent touch events from triggering any sort of native scrolling
     document.addEventListener('touchmove', function(e) {
       e.preventDefault();
     }, true);
 
@@ skipping 267 matching lines @@
    */
   function updateAttribution() {
     var attribution = $('attribution');
     if (document.documentElement.getAttribute('hasattribution') == 'true') {
       $('attribution-img').src =
           'chrome://theme/IDR_THEME_NTP_ATTRIBUTION?' + Date.now();
       attribution.hidden = false;
     } else {
       attribution.hidden = true;
     }
+  }
 
+  /**
+    * Timeout ID.
+    * @type {number}
+    */
+  var notificationTimeout_ = 0;
+
+  /**
+   * Shows the notification bubble.
+   * @param {string} text The notification message.
+   * @param {Array.<{text: string, action: function()}>} links An array of
+   *     records describing the links in the notification. Each record should
+   *     have a 'text' attribute (the display 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) {
     $('recently-closed-menu-button').dataItems = dataItems;
   }
 
   function setMostVisitedPages(data, firstRun, hasBlacklistedUrls) {
     mostVisitedPage.data = data;
   }
 
   // Return an object with all the exports
   return {
     assert: assert,
     appsPrefChangeCallback: appsPrefChangeCallback,
     enterRearrangeMode: enterRearrangeMode,
     getAppsCallback: getAppsCallback,
     getCardSlider: getCardSlider,
     getAppsPageIndex: getAppsPageIndex,
     initialize: initialize,
     leaveRearrangeMode: leaveRearrangeMode,
     themeChanged: themeChanged,
     setRecentlyClosedTabs: setRecentlyClosedTabs,
     setMostVisitedPages: setMostVisitedPages,
+    showNotification: showNotification,
   };
 });
 
 // publish ntp globals
 // TODO(estade): update the content handlers to use ntp namespace instead of
 // making these global.
 var assert = ntp4.assert;
 var getAppsCallback = ntp4.getAppsCallback;
 var appsPrefChangeCallback = ntp4.appsPrefChangeCallback;
 var themeChanged = ntp4.themeChanged;
 var recentlyClosedTabs = ntp4.setRecentlyClosedTabs;
 var setMostVisitedPages = ntp4.setMostVisitedPages;
 
 document.addEventListener('DOMContentLoaded', ntp4.initialize);