ntp4 info bubble

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 5c0ba441268fc69a1386d31e218ecd9e7bbf0f42..a16c3f510a40f420a44aee49aa3be45a7076de58 100644
--- a/chrome/browser/resources/ntp4/new_tab.js
+++ b/chrome/browser/resources/ntp4/new_tab.js
@@ -110,6 +110,14 @@ cr.define('ntp4', function() {
   var highlightAppId = null;
 
   /**
+   * If non-null, an info bubble for showing messages to the user. It points at
+   * the Most Visited label, and is used to draw more attention to the
+   * navigation dot UI.
+   * @type {!Element|undefined}

[Rick Byers, 2011/08/12 21:54:00]

type doesn't match initialization to null before.  I suggest you just use this
type but leave it undefined to represent unset.

[Evan Stade, 2011/08/12 22:35:13]

Done.

+   */
+  var infoBubble = null;
+
+  /**
    * The time in milliseconds for most transitions.  This should match what's
    * in new_tab.css.  Unfortunately there's no better way to try to time
    * something to occur until after a transition has completed.
@@ -191,6 +199,15 @@ cr.define('ntp4', function() {
     appendTilePage(mostVisitedPage, localStrings.getString('mostvisited'));
     chrome.send('getMostVisited');
 
+    if (localStrings.getString('ntp4_intro_message')) {
+      infoBubble = new cr.ui.Bubble;
+      infoBubble.attach(mostVisitedPage.navigationDot);
+      infoBubble.setText(localStrings.getString('ntp4_intro_message'));
+      infoBubble.show();
+
+      chrome.send('introMessageSeen');
+    }
+
     bookmarksPage = new ntp4.BookmarksPage();
     appendTilePage(bookmarksPage, localStrings.getString('bookmarksPage'));
     chrome.send('getBookmarks');
@@ -408,6 +425,8 @@ cr.define('ntp4', function() {
 
     dotList.appendChild(newDot);
     page.navigationDot = newDot;
+    if (infoBubble)
+      window.setTimeout(infoBubble.reposition.bind(infoBubble), 0);
 
     eventTracker.add(page, 'pagelayout', onPageLayout);
   }
@@ -596,9 +615,6 @@ cr.define('ntp4', function() {
     } else if (page.classList.contains('bookmarks-page')) {
       shownPage = templateData['bookmarks_page_id'];
       shownPageIndex = 0;
-    } else if (page.classList.contains('bookmarks-page')) {
-      shownPage = templateData['bookmarks_page_id'];
-      shownPageIndex = 0;
     } else {
       console.error('unknown page selected');
     }