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

4 files changed, 103 insertions, 35 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 499ae06..534fb79 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -3614,6 +3614,14 @@ each locale. -->
          desc="Tooltip text for the button that shows the menu that hides and shows different sections on the new tab page.">
         Change page layout
       </message>
+      <message name="IDS_NEW_TAB_FIRST_RUN_NOTIFICATION"
+         desc="Notification text to show in the banner at the top of the new tab page when the user first sees it.">
+        Over time, the area below will show your eight most visited sites.
+      </message>
+      <message name="IDS_NEW_TAB_CLOSE_FIRST_RUN_NOTIFICATION"
+         desc="Action text for link that closes the first run notification.">
+        Close
+      </message>
 
       <!-- SafeBrowsing -->
       <message name="IDS_SAFE_BROWSING_MALWARE_TITLE" desc="SafeBrowsing Malware HTML title">
diff --git a/chrome/browser/dom_ui/new_tab_ui.cc b/chrome/browser/dom_ui/new_tab_ui.cc
index 8f8c6f7..b2fceb7 100644
--- a/chrome/browser/dom_ui/new_tab_ui.cc
+++ b/chrome/browser/dom_ui/new_tab_ui.cc
@@ -202,16 +202,23 @@ class NewTabHTMLSource : public ChromeURLDataManager::DataSource {
   static void set_first_view(bool first_view) { first_view_ = first_view; }
   static bool first_view() { return first_view_; }
 
+  // Setters and getters for first_run.
+  static void set_first_run(bool first_run) { first_run_ = first_run; }
+  static bool first_run() { return first_run_; }
+
  private:
   // In case a file path to the new tab page was provided this tries to load
   // the file and returns the file content if successful. This returns an empty
   // string in case of failure.
   static std::string GetCustomNewTabPageFromCommandLine();
 
-  // Whether this is the is the first viewing of the new tab page and
+  // Whether this is the first viewing of the new tab page and
   // we think it is the user's startup page.
   static bool first_view_;
 
+  // Whether this is the first run.
+  static bool first_run_;
+
   // The user's profile.
   Profile* profile_;
 
@@ -220,6 +227,8 @@ class NewTabHTMLSource : public ChromeURLDataManager::DataSource {
 
 bool NewTabHTMLSource::first_view_ = true;
 
+bool NewTabHTMLSource::first_run_ = true;
+
 NewTabHTMLSource::NewTabHTMLSource(Profile* profile)
     : DataSource(chrome::kChromeUINewTabHost, MessageLoop::current()),
       profile_(profile) {
@@ -341,6 +350,10 @@ void NewTabHTMLSource::StartDataRequest(const std::string& path,
       l10n_util::GetString(IDS_NEW_TAB_SHOW_HIDE_LIST_TOOLTIP));
   localized_strings.SetString(L"pagedisplaytooltip",
       l10n_util::GetString(IDS_NEW_TAB_PAGE_DISPLAY_TOOLTIP));
+  localized_strings.SetString(L"firstrunnotification",
+      l10n_util::GetString(IDS_NEW_TAB_FIRST_RUN_NOTIFICATION));
+  localized_strings.SetString(L"closefirstrunnotification",
+      l10n_util::GetString(IDS_NEW_TAB_CLOSE_FIRST_RUN_NOTIFICATION));
 
   SetFontAndTextDirection(&localized_strings);
 
@@ -797,7 +810,13 @@ void MostVisitedHandler::OnSegmentUsageAvailable(
     most_visited_urls_.push_back(url);
   }
 
-  dom_ui_->CallJavascriptFunction(L"mostVisitedPages", pages_value);
+  // If we found no pages we treat this as the first run.
+  FundamentalValue first_run(NewTabHTMLSource::first_run() &&
+                             pages_value.GetSize() == 0);
+  // but first_run should only be true once.
+  NewTabHTMLSource::set_first_run(false);
+
+  dom_ui_->CallJavascriptFunction(L"mostVisitedPages", pages_value, first_run);
 }
 
 void MostVisitedHandler::Observe(NotificationType type,
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index efffb80..f865d70 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -81,17 +81,15 @@ html[anim='false'] *,
 }
 
 .filler .thumbnail-wrapper {
-  visibility: inherit;
-  border: 1px solid hsl(0, 0%, 90%);
-  background-color: hsl(0, 0%, 95%);
-  -webkit-border-radius: 2px;
-  display: block;
+  visibility: visible;
+  border: 3px solid hsl(213, 60%, 92%);
 }
 
 .filler .thumbnail {
-  visibility: visible;
-  border-color: hsl(0, 0%, 90%);
-  background-color: hsl(0, 0%, 95%);
+  visibility: inherit;
+  border: 1px solid white;
+  padding: 0;
+  background-color: hsl(213, 60%, 92%);
 }
 
 .edit-bar {
@@ -302,18 +300,26 @@ html[dir=rtl] .thumbnail-container > .title > div {
 #notification {
   position: relative;
   background-color: hsl(52, 100%, 80%);
-  -webkit-border-radius: 4px;
-  padding: 8px 16px;
+  -webkit-border-radius: 6px;
+  padding: 7px 15px;
   white-space: nowrap;
   display: table;
   margin: 10px auto;
   font-weight: bold;
   opacity: 0;
-  visibility: hidden;
-  -webkit-transition: opacity 1s;
+  -webkit-transition: opacity .15s;
+  pointer-events: none;
   z-index: 1;
 }
 
+#notification.first-run {
+  padding: 5px 13px; /* subtract the border witdh */
+  border: 2px solid hsl(213, 55%, 75%);
+  background-color: hsl(213, 63%, 93%);
+  -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3);
+  font-weight: normal;
+}
+
 #notification > * {
   display: table-cell;
   max-width: 500px;
@@ -321,10 +327,10 @@ html[dir=rtl] .thumbnail-container > .title > div {
   text-overflow: ellipsis;
 }
 
-#notification:hover,
 #notification.show {
   opacity: 1;
-  visibility: inherit;
+  pointer-events: all;
+  -webkit-transition: opacity 1s;
 }
 
 #notification .link {
@@ -359,7 +365,7 @@ html[dir=rtl] .thumbnail-container > .title > div {
   -webkit-border-radius: 4px;
   white-space: nowrap;
   text-overflow: ellipsis;
-  border: 1px solid hsl(213, 65%, 92%);
+  border: 1px solid hsl(213, 63%, 93%);
   overflow: hidden;
   min-height: 151px; /* height of 5 items plus the header */
   vertical-align: top;
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.