chrome/browser/resources/ntp4/new_tab.js - platform/external/chromium_org - Git at Google

 // Copyright (c) 2012 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.
  */

 // Use an anonymous function to enable strict mode just for this file (which
 // will be concatenated with other files when embedded in Chrome
 cr.define('ntp', function() {
   'use strict';

   /**
    * NewTabView instance.
    * @type {!Object|undefined}
    */
   var newTabView;

   /**
    * The 'notification-container' element.
    * @type {!Element|undefined}
    */
   var notificationContainer;

   /**
    * 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 promoBubble;

   /**
    * If non-null, an bubble confirming that the user has signed into sync. It
    * points at the login status at the top of the page.
    * @type {!Element|undefined}
    */
   var loginBubble;

   /**
    * true if |loginBubble| should be shown.
    * @type {boolean}
    */
   var shouldShowLoginBubble = false;

   /**
    * The 'other-sessions-menu-button' element.
    * @type {!Element|undefined}
    */
   var otherSessionsButton;

   /**
    * The time when all sections are ready.
    * @type {number|undefined}
    * @private
    */
   var startTime;

   /**
    * 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;

   /**
    * See description for these values in ntp_stats.h.
    * @enum {number}
    */
   var NtpFollowAction = {
     CLICKED_TILE: 11,
     CLICKED_OTHER_NTP_PANE: 12,
     OTHER: 13
   };

   /**
    * Creates a NewTabView object. NewTabView extends PageListView with
    * new tab UI specific logics.
    * @constructor
    * @extends {PageListView}
    */
   function NewTabView() {
     var pageSwitcherStart = null;
     var pageSwitcherEnd = null;
     if (loadTimeData.getValue('showApps')) {
       pageSwitcherStart = getRequiredElement('page-switcher-start');
       pageSwitcherEnd = getRequiredElement('page-switcher-end');
     }
     this.initialize(getRequiredElement('page-list'),
                     getRequiredElement('dot-list'),
                     getRequiredElement('card-slider-frame'),
                     getRequiredElement('trash'),
                     pageSwitcherStart, pageSwitcherEnd);
   }

   NewTabView.prototype = {
     __proto__: ntp.PageListView.prototype,

     /** @override */
     appendTilePage: function(page, title, titleIsEditable, opt_refNode) {
       ntp.PageListView.prototype.appendTilePage.apply(this, arguments);

       if (promoBubble)
         window.setTimeout(promoBubble.reposition.bind(promoBubble), 0);
     }
   };

   /**
    * Invoked at startup once the DOM is available to initialize the app.
    */
   function onLoad() {
     sectionsToWaitFor = 0;
     if (loadTimeData.getBoolean('showMostvisited'))
       sectionsToWaitFor++;
     if (loadTimeData.getBoolean('showApps')) {
       sectionsToWaitFor++;
       if (loadTimeData.getBoolean('showAppLauncherPromo')) {
         $('app-launcher-promo-close-button').addEventListener('click',
             function() { chrome.send('stopShowingAppLauncherPromo'); });
         $('apps-promo-learn-more').addEventListener('click',
             function() { chrome.send('onLearnMore'); });
       }
     }
     if (loadTimeData.getBoolean('isDiscoveryInNTPEnabled'))
       sectionsToWaitFor++;
     measureNavDots();

     // Load the current theme colors.
     themeChanged();

     newTabView = new NewTabView();

     notificationContainer = getRequiredElement('notification-container');
     notificationContainer.addEventListener(
         'webkitTransitionEnd', onNotificationTransitionEnd);

     if (loadTimeData.getBoolean('showRecentlyClosed')) {
       cr.ui.decorate($('recently-closed-menu-button'), ntp.RecentMenuButton);
       chrome.send('getRecentlyClosedTabs');
     } else {
       $('recently-closed-menu-button').hidden = true;
     }

     if (loadTimeData.getBoolean('showOtherSessionsMenu')) {
       otherSessionsButton = getRequiredElement('other-sessions-menu-button');
       cr.ui.decorate(otherSessionsButton, ntp.OtherSessionsMenuButton);
       otherSessionsButton.initialize(loadTimeData.getBoolean('isUserSignedIn'));
     } else {
       getRequiredElement('other-sessions-menu-button').hidden = true;
     }

     if (loadTimeData.getBoolean('showMostvisited')) {
       var mostVisited = new ntp.MostVisitedPage();
       // Move the footer into the most visited page if we are in "bare minimum"
       // mode.
       if (document.body.classList.contains('bare-minimum'))
         mostVisited.appendFooter(getRequiredElement('footer'));
       newTabView.appendTilePage(mostVisited,
                                 loadTimeData.getString('mostvisited'),
                                 false);
       chrome.send('getMostVisited');
     }

     if (loadTimeData.getBoolean('isDiscoveryInNTPEnabled')) {
       var suggestionsScript = document.createElement('script');
       suggestionsScript.src = 'suggestions_page.js';
       suggestionsScript.onload = function() {
          newTabView.appendTilePage(new ntp.SuggestionsPage(),
                                    loadTimeData.getString('suggestions'),
                                    false,
                                    (newTabView.appsPages.length > 0) ?
                                        newTabView.appsPages[0] : null);
          chrome.send('getSuggestions');
          cr.dispatchSimpleEvent(document, 'sectionready', true, true);
       };
       document.querySelector('head').appendChild(suggestionsScript);
     }

     if (!loadTimeData.getBoolean('showWebStoreIcon')) {
       var webStoreIcon = $('chrome-web-store-link');
       // Not all versions of the NTP have a footer, so this may not exist.
       if (webStoreIcon)
         webStoreIcon.hidden = true;
     } else {
       var webStoreLink = loadTimeData.getString('webStoreLink');
       var url = appendParam(webStoreLink, 'utm_source', 'chrome-ntp-launcher');
       $('chrome-web-store-link').href = url;
       $('chrome-web-store-link').addEventListener('click',
           onChromeWebStoreButtonClick);
     }

     // We need to wait for all the footer menu setup to be completed before
     // we can compute its layout.
     layoutFooter();

     if (loadTimeData.getString('login_status_message')) {
       loginBubble = new cr.ui.Bubble;
       loginBubble.anchorNode = $('login-container');
       loginBubble.arrowLocation = cr.ui.ArrowLocation.TOP_END;
       loginBubble.bubbleAlignment =
           cr.ui.BubbleAlignment.BUBBLE_EDGE_TO_ANCHOR_EDGE;
       loginBubble.deactivateToDismissDelay = 2000;
       loginBubble.closeButtonVisible = false;

       $('login-status-advanced').onclick = function() {
         chrome.send('showAdvancedLoginUI');
       };
       $('login-status-dismiss').onclick = loginBubble.hide.bind(loginBubble);

       var bubbleContent = $('login-status-bubble-contents');
       loginBubble.content = bubbleContent;

       // The anchor node won't be updated until updateLogin is called so don't
       // show the bubble yet.
       shouldShowLoginBubble = true;
     }

     if (loadTimeData.valueExists('bubblePromoText')) {
       promoBubble = new cr.ui.Bubble;
       promoBubble.anchorNode = getRequiredElement('promo-bubble-anchor');
       promoBubble.arrowLocation = cr.ui.ArrowLocation.BOTTOM_START;
       promoBubble.bubbleAlignment = cr.ui.BubbleAlignment.ENTIRELY_VISIBLE;
       promoBubble.deactivateToDismissDelay = 2000;
       promoBubble.content = parseHtmlSubset(
           loadTimeData.getString('bubblePromoText'), ['BR']);

       var bubbleLink = promoBubble.querySelector('a');
       if (bubbleLink) {
         bubbleLink.addEventListener('click', function(e) {
           chrome.send('bubblePromoLinkClicked');
         });
       }

       promoBubble.handleCloseEvent = function() {
         promoBubble.hide();
         chrome.send('bubblePromoClosed');
       };
       promoBubble.show();
       chrome.send('bubblePromoViewed');
     }

     var loginContainer = getRequiredElement('login-container');
     loginContainer.addEventListener('click', showSyncLoginUI);
     if (loadTimeData.getBoolean('shouldShowSyncLogin'))
       chrome.send('initializeSyncLogin');

     doWhenAllSectionsReady(function() {
       // Tell the slider about the pages.
       newTabView.updateSliderCards();
       // Mark the current page.
       newTabView.cardSlider.currentCardValue.navigationDot.classList.add(
           'selected');

       if (loadTimeData.valueExists('notificationPromoText')) {
         var promoText = loadTimeData.getString('notificationPromoText');
         var tags = ['IMG'];
         var attrs = {
           src: function(node, value) {
             return node.tagName == 'IMG' &&
                    /^data\:image\/(?:png|gif|jpe?g)/.test(value);
           },
         };

         var promo = parseHtmlSubset(promoText, tags, attrs);
         var promoLink = promo.querySelector('a');
         if (promoLink) {
           promoLink.addEventListener('click', function(e) {
             chrome.send('notificationPromoLinkClicked');
           });
         }

         showNotification(promo, [], function() {
           chrome.send('notificationPromoClosed');
         }, 60000);
         chrome.send('notificationPromoViewed');
       }

       cr.dispatchSimpleEvent(document, 'ntpLoaded', true, true);
       document.documentElement.classList.remove('starting-up');

       startTime = Date.now();
     });

     preventDefaultOnPoundLinkClicks();  // From webui/js/util.js.
     cr.ui.FocusManager.disableMouseFocusOnButtons();
   }

   /**
    * Launches the chrome web store app with the chrome-ntp-launcher
    * source.
    * @param {Event} e The click event.
    */
   function onChromeWebStoreButtonClick(e) {
     chrome.send('recordAppLaunchByURL',
                 [encodeURIComponent(this.href),
                  ntp.APP_LAUNCH.NTP_WEBSTORE_FOOTER]);
   }

   /*
    * The number of sections to wait on.
    * @type {number}
    */
   var sectionsToWaitFor = -1;

   /**
    * Queued callbacks which lie in wait for all sections to be ready.
    * @type {array}
    */
   var readyCallbacks = [];

   /**
    * Fired as each section of pages becomes ready.
    * @param {Event} e Each page's synthetic DOM event.
    */
   document.addEventListener('sectionready', function(e) {
     if (--sectionsToWaitFor <= 0) {
       while (readyCallbacks.length) {
         readyCallbacks.shift()();
       }
     }
   });

   /**
    * This is used to simulate a fire-once event (i.e. $(document).ready() in
    * jQuery or Y.on('domready') in YUI. If all sections are ready, the callback
    * is fired right away. If all pages are not ready yet, the function is queued
    * for later execution.
    * @param {function} callback The work to be done when ready.
    */
   function doWhenAllSectionsReady(callback) {
     assert(typeof callback == 'function');
     if (sectionsToWaitFor > 0)
       readyCallbacks.push(callback);
     else
       window.setTimeout(callback, 0);  // Do soon after, but asynchronously.
   }

   /**
    * Fills in an invisible div with the 'Most Visited' string so that
    * its length may be measured and the nav dots sized accordingly.
    */
   function measureNavDots() {
     var measuringDiv = $('fontMeasuringDiv');
     if (loadTimeData.getBoolean('showMostvisited'))
       measuringDiv.textContent = loadTimeData.getString('mostvisited');

     // The 4 is for border and padding.
     var pxWidth = Math.max(measuringDiv.clientWidth * 1.15 + 4, 80);

     var styleElement = document.createElement('style');
     styleElement.type = 'text/css';
     // max-width is used because if we run out of space, the nav dots will be
     // shrunk.
     styleElement.textContent = '.dot { max-width: ' + pxWidth + 'px; }';
     document.querySelector('head').appendChild(styleElement);
   }

   /**
    * Layout the footer so that the nav dots stay centered.
    */
   function layoutFooter() {
     var menu = $('footer-menu-container');
     var logo = $('logo-img');
     if (menu.clientWidth > logo.clientWidth)
       logo.style.WebkitFlex = '0 1 ' + menu.clientWidth + 'px';
     else
       menu.style.WebkitFlex = '0 1 ' + logo.clientWidth + 'px';
   }

   function themeChanged(opt_hasAttribution) {
     $('themecss').href = 'chrome://theme/css/new_tab_theme.css?' + Date.now();

     if (typeof opt_hasAttribution != 'undefined') {
       document.documentElement.setAttribute('hasattribution',
                                             opt_hasAttribution);
     }

     updateAttribution();
   }

   function setBookmarkBarAttached(attached) {
     document.documentElement.setAttribute('bookmarkbarattached', attached);
   }

   /**
    * Attributes the attribution image at the bottom left.
    */
   function updateAttribution() {
     var attribution = $('attribution');
     if (document.documentElement.getAttribute('hasattribution') == 'true') {
       attribution.hidden = false;
     } else {
       attribution.hidden = true;
     }
   }

   /**
    * Timeout ID.
    * @type {number}
    */
   var notificationTimeout = 0;

   /**
    * Shows the notification bubble.
    * @param {string|Node} message The notification message or node to use as
    *     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).
    * @param {Function} opt_closeHandler The callback invoked if the user
    *     manually dismisses the notification.
    */
   function showNotification(message, links, opt_closeHandler, opt_timeout) {
     window.clearTimeout(notificationTimeout);

     var span = document.querySelector('#notification > span');
     if (typeof message == 'string') {
       span.textContent = message;
     } else {
       span.textContent = '';  // Remove all children.
       span.appendChild(message);
     }

     var linksBin = $('notificationLinks');
     linksBin.textContent = '';
     for (var i = 0; i < links.length; i++) {
       var link = linksBin.ownerDocument.createElement('div');
       link.textContent = links[i].text;
       link.action = links[i].action;
       link.onclick = function() {
         this.action();
         hideNotification();
       };
       link.setAttribute('role', 'button');
       link.setAttribute('tabindex', 0);
       link.className = 'link-button';
       linksBin.appendChild(link);
     }

     function closeFunc(e) {
       if (opt_closeHandler)
         opt_closeHandler();
       hideNotification();
     }

     document.querySelector('#notification button').onclick = closeFunc;
     document.addEventListener('dragstart', closeFunc);

     notificationContainer.hidden = false;
     showNotificationOnCurrentPage();

     newTabView.cardSlider.frame.addEventListener(
         'cardSlider:card_change_ended', onCardChangeEnded);

     var timeout = opt_timeout || 10000;
     notificationTimeout = window.setTimeout(hideNotification, timeout);
   }

   /**
    * Hide the notification bubble.
    */
   function hideNotification() {
     notificationContainer.classList.add('inactive');

     newTabView.cardSlider.frame.removeEventListener(
         'cardSlider:card_change_ended', onCardChangeEnded);
   }

   /**
    * Happens when 1 or more consecutive card changes end.
    * @param {Event} e The cardSlider:card_change_ended event.
    */
   function onCardChangeEnded(e) {
     // If we ended on the same page as we started, ignore.
     if (newTabView.cardSlider.currentCardValue.notification)
       return;

     // Hide the notification the old page.
     notificationContainer.classList.add('card-changed');

     showNotificationOnCurrentPage();
   }

   /**
    * Move and show the notification on the current page.
    */
   function showNotificationOnCurrentPage() {
     var page = newTabView.cardSlider.currentCardValue;
     doWhenAllSectionsReady(function() {
       if (page != newTabView.cardSlider.currentCardValue)
         return;

       // NOTE: This moves the notification to inside of the current page.
       page.notification = notificationContainer;

       // Reveal the notification and instruct it to hide itself if ignored.
       notificationContainer.classList.remove('inactive');

       // Gives the browser time to apply this rule before we remove it (causing
       // a transition).
       window.setTimeout(function() {
         notificationContainer.classList.remove('card-changed');
       }, 0);
     });
   }

   /**
    * When done fading out, set hidden to true so the notification can't be
    * tabbed to or clicked.
    * @param {Event} e The webkitTransitionEnd event.
    */
   function onNotificationTransitionEnd(e) {
     if (notificationContainer.classList.contains('inactive'))
       notificationContainer.hidden = true;
   }

   function setRecentlyClosedTabs(dataItems) {
     $('recently-closed-menu-button').dataItems = dataItems;
     layoutFooter();
   }

   function setMostVisitedPages(data, hasBlacklistedUrls) {
     newTabView.mostVisitedPage.data = data;
     cr.dispatchSimpleEvent(document, 'sectionready', true, true);
   }

   function setSuggestionsPages(data, hasBlacklistedUrls) {
     newTabView.suggestionsPage.data = data;
   }

   /**
    * Set the dominant color for a node. This will be called in response to
    * getFaviconDominantColor. The node represented by |id| better have a setter
    * for stripeColor.
    * @param {string} id The ID of a node.
    * @param {string} color The color represented as a CSS string.
    */
   function setFaviconDominantColor(id, color) {
     var node = $(id);
     if (node)
       node.stripeColor = color;
   }

   /**
    * Updates the text displayed in the login container. If there is no text then
    * the login container is hidden.
    * @param {string} loginHeader The first line of text.
    * @param {string} loginSubHeader The second line of text.
    * @param {string} iconURL The url for the login status icon. If this is null
         then the login status icon is hidden.
    * @param {boolean} isUserSignedIn Indicates if the user is signed in or not.
    */
   function updateLogin(loginHeader, loginSubHeader, iconURL, isUserSignedIn) {
     if (loginHeader || loginSubHeader) {
       $('login-container').hidden = false;
       $('login-status-header').innerHTML = loginHeader;
       $('login-status-sub-header').innerHTML = loginSubHeader;
       $('card-slider-frame').classList.add('showing-login-area');

       if (iconURL) {
         $('login-status-header-container').style.backgroundImage = url(iconURL);
         $('login-status-header-container').classList.add('login-status-icon');
       } else {
         $('login-status-header-container').style.backgroundImage = 'none';
         $('login-status-header-container').classList.remove(
             'login-status-icon');
       }
     } else {
       $('login-container').hidden = true;
       $('card-slider-frame').classList.remove('showing-login-area');
     }
     if (shouldShowLoginBubble) {
       window.setTimeout(loginBubble.show.bind(loginBubble), 0);
       chrome.send('loginMessageSeen');
       shouldShowLoginBubble = false;
     } else if (loginBubble) {
       loginBubble.reposition();
     }
     if (otherSessionsButton) {
       otherSessionsButton.updateSignInState(isUserSignedIn);
       layoutFooter();
     }
   }

   /**
    * Show the sync login UI.
    * @param {Event} e The click event.
    */
   function showSyncLoginUI(e) {
     var rect = e.currentTarget.getBoundingClientRect();
     chrome.send('showSyncLoginUI',
                 [rect.left, rect.top, rect.width, rect.height]);
   }

   /**
    * Logs the time to click for the specified item.
    * @param {string} item The item to log the time-to-click.
    */
   function logTimeToClick(item) {
     var timeToClick = Date.now() - startTime;
     chrome.send('logTimeToClick',
         ['NewTabPage.TimeToClick' + item, timeToClick]);
   }

   /**
    * Wrappers to forward the callback to corresponding PageListView member.
    */
   function appAdded() {
     return newTabView.appAdded.apply(newTabView, arguments);
   }

   function appMoved() {
     return newTabView.appMoved.apply(newTabView, arguments);
   }

   function appRemoved() {
     return newTabView.appRemoved.apply(newTabView, arguments);
   }

   function appsPrefChangeCallback() {
     return newTabView.appsPrefChangedCallback.apply(newTabView, arguments);
   }

   function appLauncherPromoPrefChangeCallback() {
     return newTabView.appLauncherPromoPrefChangeCallback.apply(newTabView,
                                                                arguments);
   }

   function appsReordered() {
     return newTabView.appsReordered.apply(newTabView, arguments);
   }

   function enterRearrangeMode() {
     return newTabView.enterRearrangeMode.apply(newTabView, arguments);
   }

   function setForeignSessions(sessionList, isTabSyncEnabled) {
     if (otherSessionsButton) {
       otherSessionsButton.setForeignSessions(sessionList, isTabSyncEnabled);
       layoutFooter();
     }
   }

   function getAppsCallback() {
     return newTabView.getAppsCallback.apply(newTabView, arguments);
   }

   function getAppsPageIndex() {
     return newTabView.getAppsPageIndex.apply(newTabView, arguments);
   }

   function getCardSlider() {
     return newTabView.cardSlider;
   }

   function leaveRearrangeMode() {
     return newTabView.leaveRearrangeMode.apply(newTabView, arguments);
   }

   function saveAppPageName() {
     return newTabView.saveAppPageName.apply(newTabView, arguments);
   }

   function setAppToBeHighlighted(appId) {
     newTabView.highlightAppId = appId;
   }

   // Return an object with all the exports
   return {
     appAdded: appAdded,
     appMoved: appMoved,
     appRemoved: appRemoved,
     appsPrefChangeCallback: appsPrefChangeCallback,
     appLauncherPromoPrefChangeCallback: appLauncherPromoPrefChangeCallback,
     enterRearrangeMode: enterRearrangeMode,
     getAppsCallback: getAppsCallback,
     getAppsPageIndex: getAppsPageIndex,
     getCardSlider: getCardSlider,
     onLoad: onLoad,
     leaveRearrangeMode: leaveRearrangeMode,
     logTimeToClick: logTimeToClick,
     NtpFollowAction: NtpFollowAction,
     saveAppPageName: saveAppPageName,
     setAppToBeHighlighted: setAppToBeHighlighted,
     setBookmarkBarAttached: setBookmarkBarAttached,
     setForeignSessions: setForeignSessions,
     setMostVisitedPages: setMostVisitedPages,
     setSuggestionsPages: setSuggestionsPages,
     setRecentlyClosedTabs: setRecentlyClosedTabs,
     setFaviconDominantColor: setFaviconDominantColor,
     showNotification: showNotification,
     themeChanged: themeChanged,
     updateLogin: updateLogin
   };
 });

 document.addEventListener('DOMContentLoaded', ntp.onLoad);

 var toCssPx = cr.ui.toCssPx;
	// Copyright (c) 2012 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.
	*/

	// Use an anonymous function to enable strict mode just for this file (which
	// will be concatenated with other files when embedded in Chrome
	cr.define('ntp', function() {
	'use strict';

	/**
	* NewTabView instance.
	* @type {!Object\|undefined}
	*/
	var newTabView;

	/**
	* The 'notification-container' element.
	* @type {!Element\|undefined}
	*/
	var notificationContainer;

	/**
	* 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 promoBubble;

	/**
	* If non-null, an bubble confirming that the user has signed into sync. It
	* points at the login status at the top of the page.
	* @type {!Element\|undefined}
	*/
	var loginBubble;

	/**
	* true if \|loginBubble\| should be shown.
	* @type {boolean}
	*/
	var shouldShowLoginBubble = false;

	/**
	* The 'other-sessions-menu-button' element.
	* @type {!Element\|undefined}
	*/
	var otherSessionsButton;

	/**
	* The time when all sections are ready.
	* @type {number\|undefined}
	* @private
	*/
	var startTime;

	/**
	* 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;

	/**
	* See description for these values in ntp_stats.h.
	* @enum {number}
	*/
	var NtpFollowAction = {
	CLICKED_TILE: 11,
	CLICKED_OTHER_NTP_PANE: 12,
	OTHER: 13
	};

	/**
	* Creates a NewTabView object. NewTabView extends PageListView with
	* new tab UI specific logics.
	* @constructor
	* @extends {PageListView}
	*/
	function NewTabView() {
	var pageSwitcherStart = null;
	var pageSwitcherEnd = null;
	if (loadTimeData.getValue('showApps')) {
	pageSwitcherStart = getRequiredElement('page-switcher-start');
	pageSwitcherEnd = getRequiredElement('page-switcher-end');
	}
	this.initialize(getRequiredElement('page-list'),
	getRequiredElement('dot-list'),
	getRequiredElement('card-slider-frame'),
	getRequiredElement('trash'),
	pageSwitcherStart, pageSwitcherEnd);
	}

	NewTabView.prototype = {
	__proto__: ntp.PageListView.prototype,

	/** @override */
	appendTilePage: function(page, title, titleIsEditable, opt_refNode) {
	ntp.PageListView.prototype.appendTilePage.apply(this, arguments);

	if (promoBubble)
	window.setTimeout(promoBubble.reposition.bind(promoBubble), 0);
	}
	};

	/**
	* Invoked at startup once the DOM is available to initialize the app.
	*/
	function onLoad() {
	sectionsToWaitFor = 0;
	if (loadTimeData.getBoolean('showMostvisited'))
	sectionsToWaitFor++;
	if (loadTimeData.getBoolean('showApps')) {
	sectionsToWaitFor++;
	if (loadTimeData.getBoolean('showAppLauncherPromo')) {
	$('app-launcher-promo-close-button').addEventListener('click',
	function() { chrome.send('stopShowingAppLauncherPromo'); });
	$('apps-promo-learn-more').addEventListener('click',
	function() { chrome.send('onLearnMore'); });
	}
	}
	if (loadTimeData.getBoolean('isDiscoveryInNTPEnabled'))
	sectionsToWaitFor++;
	measureNavDots();

	// Load the current theme colors.
	themeChanged();

	newTabView = new NewTabView();

	notificationContainer = getRequiredElement('notification-container');
	notificationContainer.addEventListener(
	'webkitTransitionEnd', onNotificationTransitionEnd);

	if (loadTimeData.getBoolean('showRecentlyClosed')) {
	cr.ui.decorate($('recently-closed-menu-button'), ntp.RecentMenuButton);
	chrome.send('getRecentlyClosedTabs');
	} else {
	$('recently-closed-menu-button').hidden = true;
	}

	if (loadTimeData.getBoolean('showOtherSessionsMenu')) {
	otherSessionsButton = getRequiredElement('other-sessions-menu-button');
	cr.ui.decorate(otherSessionsButton, ntp.OtherSessionsMenuButton);
	otherSessionsButton.initialize(loadTimeData.getBoolean('isUserSignedIn'));
	} else {
	getRequiredElement('other-sessions-menu-button').hidden = true;
	}

	if (loadTimeData.getBoolean('showMostvisited')) {
	var mostVisited = new ntp.MostVisitedPage();
	// Move the footer into the most visited page if we are in "bare minimum"
	// mode.
	if (document.body.classList.contains('bare-minimum'))
	mostVisited.appendFooter(getRequiredElement('footer'));
	newTabView.appendTilePage(mostVisited,
	loadTimeData.getString('mostvisited'),
	false);
	chrome.send('getMostVisited');
	}

	if (loadTimeData.getBoolean('isDiscoveryInNTPEnabled')) {
	var suggestionsScript = document.createElement('script');
	suggestionsScript.src = 'suggestions_page.js';
	suggestionsScript.onload = function() {
	newTabView.appendTilePage(new ntp.SuggestionsPage(),
	loadTimeData.getString('suggestions'),
	false,
	(newTabView.appsPages.length > 0) ?
	newTabView.appsPages[0] : null);
	chrome.send('getSuggestions');
	cr.dispatchSimpleEvent(document, 'sectionready', true, true);
	};
	document.querySelector('head').appendChild(suggestionsScript);
	}

	if (!loadTimeData.getBoolean('showWebStoreIcon')) {
	var webStoreIcon = $('chrome-web-store-link');
	// Not all versions of the NTP have a footer, so this may not exist.
	if (webStoreIcon)
	webStoreIcon.hidden = true;
	} else {
	var webStoreLink = loadTimeData.getString('webStoreLink');
	var url = appendParam(webStoreLink, 'utm_source', 'chrome-ntp-launcher');
	$('chrome-web-store-link').href = url;
	$('chrome-web-store-link').addEventListener('click',
	onChromeWebStoreButtonClick);
	}

	// We need to wait for all the footer menu setup to be completed before
	// we can compute its layout.
	layoutFooter();

	if (loadTimeData.getString('login_status_message')) {
	loginBubble = new cr.ui.Bubble;
	loginBubble.anchorNode = $('login-container');
	loginBubble.arrowLocation = cr.ui.ArrowLocation.TOP_END;
	loginBubble.bubbleAlignment =
	cr.ui.BubbleAlignment.BUBBLE_EDGE_TO_ANCHOR_EDGE;
	loginBubble.deactivateToDismissDelay = 2000;
	loginBubble.closeButtonVisible = false;

	$('login-status-advanced').onclick = function() {
	chrome.send('showAdvancedLoginUI');
	};
	$('login-status-dismiss').onclick = loginBubble.hide.bind(loginBubble);

	var bubbleContent = $('login-status-bubble-contents');
	loginBubble.content = bubbleContent;

	// The anchor node won't be updated until updateLogin is called so don't
	// show the bubble yet.
	shouldShowLoginBubble = true;
	}

	if (loadTimeData.valueExists('bubblePromoText')) {
	promoBubble = new cr.ui.Bubble;
	promoBubble.anchorNode = getRequiredElement('promo-bubble-anchor');
	promoBubble.arrowLocation = cr.ui.ArrowLocation.BOTTOM_START;
	promoBubble.bubbleAlignment = cr.ui.BubbleAlignment.ENTIRELY_VISIBLE;
	promoBubble.deactivateToDismissDelay = 2000;
	promoBubble.content = parseHtmlSubset(
	loadTimeData.getString('bubblePromoText'), ['BR']);

	var bubbleLink = promoBubble.querySelector('a');
	if (bubbleLink) {
	bubbleLink.addEventListener('click', function(e) {
	chrome.send('bubblePromoLinkClicked');
	});
	}

	promoBubble.handleCloseEvent = function() {
	promoBubble.hide();
	chrome.send('bubblePromoClosed');
	};
	promoBubble.show();
	chrome.send('bubblePromoViewed');
	}

	var loginContainer = getRequiredElement('login-container');
	loginContainer.addEventListener('click', showSyncLoginUI);
	if (loadTimeData.getBoolean('shouldShowSyncLogin'))
	chrome.send('initializeSyncLogin');

	doWhenAllSectionsReady(function() {
	// Tell the slider about the pages.
	newTabView.updateSliderCards();
	// Mark the current page.
	newTabView.cardSlider.currentCardValue.navigationDot.classList.add(
	'selected');

	if (loadTimeData.valueExists('notificationPromoText')) {
	var promoText = loadTimeData.getString('notificationPromoText');
	var tags = ['IMG'];
	var attrs = {
	src: function(node, value) {
	return node.tagName == 'IMG' &&
	/^data\:image\/(?:png\|gif\|jpe?g)/.test(value);
	},
	};

	var promo = parseHtmlSubset(promoText, tags, attrs);
	var promoLink = promo.querySelector('a');
	if (promoLink) {
	promoLink.addEventListener('click', function(e) {
	chrome.send('notificationPromoLinkClicked');
	});
	}

	showNotification(promo, [], function() {
	chrome.send('notificationPromoClosed');
	}, 60000);
	chrome.send('notificationPromoViewed');
	}

	cr.dispatchSimpleEvent(document, 'ntpLoaded', true, true);
	document.documentElement.classList.remove('starting-up');

	startTime = Date.now();
	});

	preventDefaultOnPoundLinkClicks(); // From webui/js/util.js.
	cr.ui.FocusManager.disableMouseFocusOnButtons();
	}

	/**
	* Launches the chrome web store app with the chrome-ntp-launcher
	* source.
	* @param {Event} e The click event.
	*/
	function onChromeWebStoreButtonClick(e) {
	chrome.send('recordAppLaunchByURL',
	[encodeURIComponent(this.href),
	ntp.APP_LAUNCH.NTP_WEBSTORE_FOOTER]);
	}

	/*
	* The number of sections to wait on.
	* @type {number}
	*/
	var sectionsToWaitFor = -1;

	/**
	* Queued callbacks which lie in wait for all sections to be ready.
	* @type {array}
	*/
	var readyCallbacks = [];

	/**
	* Fired as each section of pages becomes ready.
	* @param {Event} e Each page's synthetic DOM event.
	*/
	document.addEventListener('sectionready', function(e) {
	if (--sectionsToWaitFor <= 0) {
	while (readyCallbacks.length) {
	readyCallbacks.shift()();
	}
	}
	});

	/**
	* This is used to simulate a fire-once event (i.e. $(document).ready() in
	* jQuery or Y.on('domready') in YUI. If all sections are ready, the callback
	* is fired right away. If all pages are not ready yet, the function is queued
	* for later execution.
	* @param {function} callback The work to be done when ready.
	*/
	function doWhenAllSectionsReady(callback) {
	assert(typeof callback == 'function');
	if (sectionsToWaitFor > 0)
	readyCallbacks.push(callback);
	else
	window.setTimeout(callback, 0); // Do soon after, but asynchronously.
	}

	/**
	* Fills in an invisible div with the 'Most Visited' string so that
	* its length may be measured and the nav dots sized accordingly.
	*/
	function measureNavDots() {
	var measuringDiv = $('fontMeasuringDiv');
	if (loadTimeData.getBoolean('showMostvisited'))
	measuringDiv.textContent = loadTimeData.getString('mostvisited');

	// The 4 is for border and padding.
	var pxWidth = Math.max(measuringDiv.clientWidth * 1.15 + 4, 80);

	var styleElement = document.createElement('style');
	styleElement.type = 'text/css';
	// max-width is used because if we run out of space, the nav dots will be
	// shrunk.
	styleElement.textContent = '.dot { max-width: ' + pxWidth + 'px; }';
	document.querySelector('head').appendChild(styleElement);
	}

	/**
	* Layout the footer so that the nav dots stay centered.
	*/
	function layoutFooter() {
	var menu = $('footer-menu-container');
	var logo = $('logo-img');
	if (menu.clientWidth > logo.clientWidth)
	logo.style.WebkitFlex = '0 1 ' + menu.clientWidth + 'px';
	else
	menu.style.WebkitFlex = '0 1 ' + logo.clientWidth + 'px';
	}

	function themeChanged(opt_hasAttribution) {
	$('themecss').href = 'chrome://theme/css/new_tab_theme.css?' + Date.now();

	if (typeof opt_hasAttribution != 'undefined') {
	document.documentElement.setAttribute('hasattribution',
	opt_hasAttribution);
	}

	updateAttribution();
	}

	function setBookmarkBarAttached(attached) {
	document.documentElement.setAttribute('bookmarkbarattached', attached);
	}

	/**
	* Attributes the attribution image at the bottom left.
	*/
	function updateAttribution() {
	var attribution = $('attribution');
	if (document.documentElement.getAttribute('hasattribution') == 'true') {
	attribution.hidden = false;
	} else {
	attribution.hidden = true;
	}
	}

	/**
	* Timeout ID.
	* @type {number}
	*/
	var notificationTimeout = 0;

	/**
	* Shows the notification bubble.
	* @param {string\|Node} message The notification message or node to use as
	* 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).
	* @param {Function} opt_closeHandler The callback invoked if the user
	* manually dismisses the notification.
	*/
	function showNotification(message, links, opt_closeHandler, opt_timeout) {
	window.clearTimeout(notificationTimeout);

	var span = document.querySelector('#notification > span');
	if (typeof message == 'string') {
	span.textContent = message;
	} else {
	span.textContent = ''; // Remove all children.
	span.appendChild(message);
	}

	var linksBin = $('notificationLinks');
	linksBin.textContent = '';
	for (var i = 0; i < links.length; i++) {
	var link = linksBin.ownerDocument.createElement('div');
	link.textContent = links[i].text;
	link.action = links[i].action;
	link.onclick = function() {
	this.action();
	hideNotification();
	};
	link.setAttribute('role', 'button');
	link.setAttribute('tabindex', 0);
	link.className = 'link-button';
	linksBin.appendChild(link);
	}

	function closeFunc(e) {
	if (opt_closeHandler)
	opt_closeHandler();
	hideNotification();
	}

	document.querySelector('#notification button').onclick = closeFunc;
	document.addEventListener('dragstart', closeFunc);

	notificationContainer.hidden = false;
	showNotificationOnCurrentPage();

	newTabView.cardSlider.frame.addEventListener(
	'cardSlider:card_change_ended', onCardChangeEnded);

	var timeout = opt_timeout \|\| 10000;
	notificationTimeout = window.setTimeout(hideNotification, timeout);
	}

	/**
	* Hide the notification bubble.
	*/
	function hideNotification() {
	notificationContainer.classList.add('inactive');

	newTabView.cardSlider.frame.removeEventListener(
	'cardSlider:card_change_ended', onCardChangeEnded);
	}

	/**
	* Happens when 1 or more consecutive card changes end.
	* @param {Event} e The cardSlider:card_change_ended event.
	*/
	function onCardChangeEnded(e) {
	// If we ended on the same page as we started, ignore.
	if (newTabView.cardSlider.currentCardValue.notification)
	return;

	// Hide the notification the old page.
	notificationContainer.classList.add('card-changed');

	showNotificationOnCurrentPage();
	}

	/**
	* Move and show the notification on the current page.
	*/
	function showNotificationOnCurrentPage() {
	var page = newTabView.cardSlider.currentCardValue;
	doWhenAllSectionsReady(function() {
	if (page != newTabView.cardSlider.currentCardValue)
	return;

	// NOTE: This moves the notification to inside of the current page.
	page.notification = notificationContainer;

	// Reveal the notification and instruct it to hide itself if ignored.
	notificationContainer.classList.remove('inactive');

	// Gives the browser time to apply this rule before we remove it (causing
	// a transition).
	window.setTimeout(function() {
	notificationContainer.classList.remove('card-changed');
	}, 0);
	});
	}

	/**
	* When done fading out, set hidden to true so the notification can't be
	* tabbed to or clicked.
	* @param {Event} e The webkitTransitionEnd event.
	*/
	function onNotificationTransitionEnd(e) {
	if (notificationContainer.classList.contains('inactive'))
	notificationContainer.hidden = true;
	}

	function setRecentlyClosedTabs(dataItems) {
	$('recently-closed-menu-button').dataItems = dataItems;
	layoutFooter();
	}

	function setMostVisitedPages(data, hasBlacklistedUrls) {
	newTabView.mostVisitedPage.data = data;
	cr.dispatchSimpleEvent(document, 'sectionready', true, true);
	}

	function setSuggestionsPages(data, hasBlacklistedUrls) {
	newTabView.suggestionsPage.data = data;
	}

	/**
	* Set the dominant color for a node. This will be called in response to
	* getFaviconDominantColor. The node represented by \|id\| better have a setter
	* for stripeColor.
	* @param {string} id The ID of a node.
	* @param {string} color The color represented as a CSS string.
	*/
	function setFaviconDominantColor(id, color) {
	var node = $(id);
	if (node)
	node.stripeColor = color;
	}

	/**
	* Updates the text displayed in the login container. If there is no text then
	* the login container is hidden.
	* @param {string} loginHeader The first line of text.
	* @param {string} loginSubHeader The second line of text.
	* @param {string} iconURL The url for the login status icon. If this is null
	then the login status icon is hidden.
	* @param {boolean} isUserSignedIn Indicates if the user is signed in or not.
	*/
	function updateLogin(loginHeader, loginSubHeader, iconURL, isUserSignedIn) {
	if (loginHeader \|\| loginSubHeader) {
	$('login-container').hidden = false;
	$('login-status-header').innerHTML = loginHeader;
	$('login-status-sub-header').innerHTML = loginSubHeader;
	$('card-slider-frame').classList.add('showing-login-area');

	if (iconURL) {
	$('login-status-header-container').style.backgroundImage = url(iconURL);
	$('login-status-header-container').classList.add('login-status-icon');
	} else {
	$('login-status-header-container').style.backgroundImage = 'none';
	$('login-status-header-container').classList.remove(
	'login-status-icon');
	}
	} else {
	$('login-container').hidden = true;
	$('card-slider-frame').classList.remove('showing-login-area');
	}
	if (shouldShowLoginBubble) {
	window.setTimeout(loginBubble.show.bind(loginBubble), 0);
	chrome.send('loginMessageSeen');
	shouldShowLoginBubble = false;
	} else if (loginBubble) {
	loginBubble.reposition();
	}
	if (otherSessionsButton) {
	otherSessionsButton.updateSignInState(isUserSignedIn);
	layoutFooter();
	}
	}

	/**
	* Show the sync login UI.
	* @param {Event} e The click event.
	*/
	function showSyncLoginUI(e) {
	var rect = e.currentTarget.getBoundingClientRect();
	chrome.send('showSyncLoginUI',
	[rect.left, rect.top, rect.width, rect.height]);
	}

	/**
	* Logs the time to click for the specified item.
	* @param {string} item The item to log the time-to-click.
	*/
	function logTimeToClick(item) {
	var timeToClick = Date.now() - startTime;
	chrome.send('logTimeToClick',
	['NewTabPage.TimeToClick' + item, timeToClick]);
	}

	/**
	* Wrappers to forward the callback to corresponding PageListView member.
	*/
	function appAdded() {
	return newTabView.appAdded.apply(newTabView, arguments);
	}

	function appMoved() {
	return newTabView.appMoved.apply(newTabView, arguments);
	}

	function appRemoved() {
	return newTabView.appRemoved.apply(newTabView, arguments);
	}

	function appsPrefChangeCallback() {
	return newTabView.appsPrefChangedCallback.apply(newTabView, arguments);
	}

	function appLauncherPromoPrefChangeCallback() {
	return newTabView.appLauncherPromoPrefChangeCallback.apply(newTabView,
	arguments);
	}

	function appsReordered() {
	return newTabView.appsReordered.apply(newTabView, arguments);
	}

	function enterRearrangeMode() {
	return newTabView.enterRearrangeMode.apply(newTabView, arguments);
	}

	function setForeignSessions(sessionList, isTabSyncEnabled) {
	if (otherSessionsButton) {
	otherSessionsButton.setForeignSessions(sessionList, isTabSyncEnabled);
	layoutFooter();
	}
	}

	function getAppsCallback() {
	return newTabView.getAppsCallback.apply(newTabView, arguments);
	}

	function getAppsPageIndex() {
	return newTabView.getAppsPageIndex.apply(newTabView, arguments);
	}

	function getCardSlider() {
	return newTabView.cardSlider;
	}

	function leaveRearrangeMode() {
	return newTabView.leaveRearrangeMode.apply(newTabView, arguments);
	}

	function saveAppPageName() {
	return newTabView.saveAppPageName.apply(newTabView, arguments);
	}

	function setAppToBeHighlighted(appId) {
	newTabView.highlightAppId = appId;
	}

	// Return an object with all the exports
	return {
	appAdded: appAdded,
	appMoved: appMoved,
	appRemoved: appRemoved,
	appsPrefChangeCallback: appsPrefChangeCallback,
	appLauncherPromoPrefChangeCallback: appLauncherPromoPrefChangeCallback,
	enterRearrangeMode: enterRearrangeMode,
	getAppsCallback: getAppsCallback,
	getAppsPageIndex: getAppsPageIndex,
	getCardSlider: getCardSlider,
	onLoad: onLoad,
	leaveRearrangeMode: leaveRearrangeMode,
	logTimeToClick: logTimeToClick,
	NtpFollowAction: NtpFollowAction,
	saveAppPageName: saveAppPageName,
	setAppToBeHighlighted: setAppToBeHighlighted,
	setBookmarkBarAttached: setBookmarkBarAttached,
	setForeignSessions: setForeignSessions,
	setMostVisitedPages: setMostVisitedPages,
	setSuggestionsPages: setSuggestionsPages,
	setRecentlyClosedTabs: setRecentlyClosedTabs,
	setFaviconDominantColor: setFaviconDominantColor,
	showNotification: showNotification,
	themeChanged: themeChanged,
	updateLogin: updateLogin
	};
	});

	document.addEventListener('DOMContentLoaded', ntp.onLoad);

	var toCssPx = cr.ui.toCssPx;