Adds the first run banner.

First run is determined by checking if there are no thumbnails. The check for no thumbnails is done on the backend since I need to add code to add some pre populated thumbnails and therefore the most visited pages will not be empty on the client. There is one edge case where the banner can show up again and that is if the user blacklists all his thumbnails and restarts chrome.

Also, updates the look of the fillers to match the latest mocks.

BUG=15079

TEST=Start with a new empty profile. You should see the blue first run banner. Then navigate to some link and come back the NTP. The banner should not be shown again. Also, test that this did not break the yellow notification banner shown when a thumbnail is removed.

Review URL: http://codereview.chromium.org/159304

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@21480 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 53 insertions, 18 deletions

diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 418abc4..a7adfd6e 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -70,7 +70,7 @@ var mostVisitedData = [];
 var gotMostVisited = false;
 var gotShownSections = false;
 
-function mostVisitedPages(data) {
+function mostVisitedPages(data, firstRun) {
   logEvent('received most visited pages');
 
   // We append the class name with the "filler" so that we can style fillers
@@ -87,6 +87,11 @@ function mostVisitedPages(data) {
 
   gotMostVisited = true;
   onDataLoaded();
+
+  // Only show the first run notification if first run.
+  if (firstRun) {
+    showFirstRunNotification();
+  }
 }
 
 function downloadsList(data) {
@@ -801,29 +806,59 @@ function afterTransition(f) {
 
 // Notification
 
-function showNotification(text, actionText, f) {
+
+var notificationTimeout;
+
+function showNotification(text, actionText, opt_f) {
   var notificationElement = $('notification');
+
+  function show() {
+    window.clearTimeout(notificationTimeout);
+    addClass(notificationElement, 'show');
+  }
+
+  function delayedHide() {
+    notificationTimeout = window.setTimeout(hideNotification, 10000);
+  }
+
+  function doAction() {
+    if (opt_f) {
+      opt_f();
+    }
+    hideNotification();
+  }
+
+  // Remove any possible first-run trails.
+  removeClass(notification, 'first-run');
+
   var actionLink = notificationElement.querySelector('.link');
   notificationElement.firstElementChild.textContent = text;
-
   actionLink.textContent = actionText;
-  actionLink.onclick = function() {
-    f();
-    removeClass(notificationElement, 'show');
-    // Since we have a :hover rule to not hide the notification banner when the
-    // mouse is over we need force it to hide. We remove the hide class after
-    // a short timeout to allow the banner to be shown again.
-    addClass(notificationElement, 'hide');
-    afterTransition(function() {
-      removeClass(notificationElement, 'hide');
-    })
-  };
-  addClass(notificationElement, 'show');
-  window.setTimeout(function() {
-    removeClass(notificationElement, 'show');
-  }, 10000);
+
+  actionLink.onclick = doAction;
+  actionLink.onkeydown = handleIfEnterKey(doAction);
+  notificationElement.onmouseover = show;
+  notificationElement.onmouseout = delayedHide;
+  actionLink.onfocus = show;
+  actionLink.onblur = delayedHide;
+
+  show();
+  delayedHide();
 }
 
+function hideNotification() {
+  var notificationElement = $('notification');
+  removeClass(notificationElement, 'show');
+}
+
+function showFirstRunNotification() {
+  showNotification(localStrings.getString('firstrunnotification'),
+                   localStrings.getString('closefirstrunnotification'));
+  var notificationElement = $('notification');
+  addClass(notification, 'first-run');
+}
+
+
 /**
  * This handles the option menu.
  * @param {Element} button The button element.