ntp4 info bubble

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 92 matching lines @@
 
   /**
    * If non-null, this is the ID of the app to highlight to the user the next
    * time getAppsCallback runs. "Highlight" in this case means to switch to
    * the page and run the new tile animation.
    * @type {String}
    */
   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}
+   */
+  var infoBubble;
+
+  /**
    * 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.
    * @type {number}
    * @const
    */
   var DEFAULT_TRANSITION_TIME = 500;
 
   /**
    * Invoked at startup once the DOM is available to initialize the app.
@@ skipping 57 matching lines @@
         CardSlider.EventType.CARD_CHANGED,
         cardChangedHandler);
 
     cr.ui.decorate($('recently-closed-menu-button'), ntp4.RecentMenuButton);
     chrome.send('getRecentlyClosedTabs');
 
     mostVisitedPage = new ntp4.MostVisitedPage();
     appendTilePage(mostVisitedPage, localStrings.getString('mostvisited'));
     chrome.send('getMostVisited');
 
+    if (localStrings.getString('ntp4_intro_message')) {
+      infoBubble = new cr.ui.Bubble;
+      infoBubble.anchorNode = mostVisitedPage.navigationDot;
+      infoBubble.text = localStrings.getString('ntp4_intro_message');
+      infoBubble.show();
+
+      chrome.send('introMessageSeen');
+    }
+
     bookmarksPage = new ntp4.BookmarksPage();
     appendTilePage(bookmarksPage, localStrings.getString('bookmarksPage'));
     chrome.send('getBookmarks');
   }
 
   /**
    * Simple common assertion API
    * @param {*} condition The condition to test.  Note that this may be used to
    *     test whether a value is defined or not, and we don't want to force a
    *     cast to Boolean.
@@ skipping 199 matching lines @@
    * @param {string} title The title of the tile page.
    */
   function appendTilePage(page, title) {
     pageList.appendChild(page);
 
     // Make a deep copy of the dot template to add a new one.
     var newDot = new ntp4.NavDot(page, title, false, false);
 
     dotList.appendChild(newDot);
     page.navigationDot = newDot;
+    if (infoBubble)
+      window.setTimeout(infoBubble.reposition.bind(infoBubble), 0);
 
     eventTracker.add(page, 'pagelayout', onPageLayout);
   }
 
   /**
    * Appends an apps page into the page list.  This is like appendTilePage,
    * but takes care to insert before the Bookmarks page.
    * TODO(csilv): Refactor this function with appendTilePage to avoid
    *              duplication.
    *
@@ skipping 168 matching lines @@
     var page = e.cardSlider.currentCardValue;
     if (page.classList.contains('apps-page')) {
       shownPage = templateData['apps_page_id'];
       shownPageIndex = getAppsPageIndex(page);
     } else if (page.classList.contains('most-visited-page')) {
       shownPage = templateData['most_visited_page_id'];
       shownPageIndex = 0;
     } 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');
     }
     chrome.send('pageSelected', [shownPage, shownPageIndex]);
 
     // Update the active dot
     var curDot = dotList.getElementsByClassName('selected')[0];
     if (curDot)
       curDot.classList.remove('selected');
     var newPageIndex = e.cardSlider.currentCard;
@@ skipping 107 matching lines @@
 // 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);