Remove WebUI NTP on Android.

chrome/browser/resources/ntp_android/ntp_android.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.
-
-// File Description:
-//     Contains all the necessary functions for rendering the NTP on mobile
-//     devices.
-
-/**
- * The event type used to determine when a touch starts.
- * @type {string}
- */
-var PRESS_START_EVT = 'touchstart';
-
-/**
- * The event type used to determine when a touch finishes.
- * @type {string}
- */
-var PRESS_STOP_EVT = 'touchend';
-
-/**
- * The event type used to determine when a touch moves.
- * @type {string}
- */
-var PRESS_MOVE_EVT = 'touchmove';
-
-cr.define('ntp', function() {
-  /**
-   * Constant for the localStorage key used to specify the default bookmark
-   * folder to be selected when navigating to the bookmark tab for the first
-   * time of a new NTP instance.
-   * @type {string}
-   */
-  var DEFAULT_BOOKMARK_FOLDER_KEY = 'defaultBookmarkFolder';
-
-  /**
-   * Constant for the localStorage key used to store whether or not sync was
-   * enabled on the last call to syncEnabled().
-   * @type {string}
-   */
-  var SYNC_ENABLED_KEY = 'syncEnabled';
-
-  /**
-   * The time before and item gets marked as active (in milliseconds).  This
-   * prevents an item from being marked as active when the user is scrolling
-   * the page.
-   * @type {number}
-   */
-  var ACTIVE_ITEM_DELAY_MS = 100;
-
-  /**
-   * The CSS class identifier for grid layouts.
-   * @type {string}
-   */
-  var GRID_CSS_CLASS = 'icon-grid';
-
-  /**
-   * The element to center when centering a GRID_CSS_CLASS.
-   */
-  var GRID_CENTER_CSS_CLASS = 'center-icon-grid';
-
-  /**
-   * Attribute used to specify the number of columns to use in a grid.  If
-   * left unspecified, the grid will fill the container.
-   */
-  var GRID_COLUMNS = 'grid-columns';
-
-  /**
-   * Attribute used to specify whether the top margin should be set to match
-   * the left margin of the grid.
-   */
-  var GRID_SET_TOP_MARGIN_CLASS = 'grid-set-top-margin';
-
-  /**
-   * Attribute used to specify whether the margins of individual items within
-   * the grid should be adjusted to better fill the space.
-   */
-  var GRID_SET_ITEM_MARGINS = 'grid-set-item-margins';
-
-  /**
-   * The CSS class identifier for centered empty section containers.
-   */
-  var CENTER_EMPTY_CONTAINER_CSS_CLASS = 'center-empty-container';
-
-  /**
-   * The CSS class identifier for marking list items as active.
-   * @type {string}
-   */
-  var ACTIVE_LIST_ITEM_CSS_CLASS = 'list-item-active';
-
-  /**
-   * Attributes set on elements representing data in a section, specifying
-   * which section that element belongs to. Used for context menus.
-   * @type {string}
-   */
-  var SECTION_KEY = 'sectionType';
-
-  /**
-   * Attribute set on an element that has a context menu. Specifies the URL for
-   * which the context menu action should apply.
-   * @type {string}
-   */
-  var CONTEXT_MENU_URL_KEY = 'url';
-
-  /**
-   * The list of main section panes added.
-   * @type {Array.<Element>}
-   */
-  var panes = [];
-
-  /**
-   * The list of section prefixes, which are used to append to the hash of the
-   * page to allow the native toolbar to see url changes when the pane is
-   * switched.
-   */
-  var sectionPrefixes = [];
-
-  /**
-   * The next available index for new favicons.  Users must increment this
-   * value once assigning this index to a favicon.
-   * @type {number}
-   */
-  var faviconIndex = 0;
-
-  /**
-   * The currently selected pane DOM element.
-   * @type {Element}
-   */
-  var currentPane = null;
-
-  /**
-   * The index of the currently selected top level pane.  The index corresponds
-   * to the elements defined in {@see #panes}.
-   * @type {number}
-   */
-  var currentPaneIndex;
-
-  /**
-   * The ID of the bookmark folder currently selected.
-   * @type {string|number}
-   */
-  var bookmarkFolderId = null;
-
-  /**
-   * The current element active item.
-   * @type {?Element}
-   */
-  var activeItem;
-
-  /**
-   * The element to be marked as active if no actions cancel it.
-   * @type {?Element}
-   */
-  var pendingActiveItem;
-
-  /**
-   * The timer ID to mark an element as active.
-   * @type {number}
-   */
-  var activeItemDelayTimerId;
-
-  /**
-   * Enum for the different load states based on the initialization of the NTP.
-   * @enum {number}
-   */
-  var LoadStatusType = {
-    LOAD_NOT_DONE: 0,
-    LOAD_IMAGES_COMPLETE: 1,
-    LOAD_BOOKMARKS_FINISHED: 2,
-    LOAD_COMPLETE: 3  // An OR'd combination of all necessary states.
-  };
-
-  /**
-   * The current loading status for the NTP.
-   * @type {LoadStatusType}
-   */
-  var loadStatus_ = LoadStatusType.LOAD_NOT_DONE;
-
-  /**
-   * Whether the loading complete notification has been sent.
-   * @type {boolean}
-   */
-  var finishedLoadingNotificationSent_ = false;
-
-  /**
-   * Whether the page title has been loaded.
-   * @type {boolean}
-   */
-  var titleLoadedStatus_ = false;
-
-  /**
-   * Whether the NTP is in incognito mode or not.
-   * @type {boolean}
-   */
-  var isIncognito = false;
-
-  /**
-   * Whether incognito mode is enabled. (It can be blocked e.g. with a policy.)
-   * @type {boolean}
-   */
-  var isIncognitoEnabled = true;
-
-  /**
-   * Whether the initial history state has been replaced.  The state will be
-   * replaced once the bookmark data has loaded to ensure the proper folder
-   * id is persisted.
-   * @type {boolean}
-   */
-  var replacedInitialState = false;
-
-  /**
-   * Stores number of most visited pages.
-   * @type {number}
-   */
-  var numberOfMostVisitedPages = 0;
-
-  /**
-   * Whether there are any recently closed tabs.
-   * @type {boolean}
-   */
-  var hasRecentlyClosedTabs = false;
-
-  /**
-   * Whether promo is not allowed or not (external to NTP).
-   * @type {boolean}
-   */
-  var promoIsAllowed = false;
-
-  /**
-   * Whether promo should be shown on Most Visited page (externally set).
-   * @type {boolean}
-   */
-  var promoIsAllowedOnMostVisited = false;
-
-  /**
-   * Whether promo should be shown on Open Tabs page (externally set).
-   * @type {boolean}
-   */
-  var promoIsAllowedOnOpenTabs = false;
-
-  /**
-   * Whether promo should show a virtual computer on Open Tabs (externally set).
-   * @type {boolean}
-   */
-  var promoIsAllowedAsVirtualComputer = false;
-
-  /**
-   * Promo-injected title of a virtual computer on an open tabs pane.
-   * @type {string}
-   */
-  var promoInjectedComputerTitleText = '';
-
-  /**
-   * Promo-injected last synced text of a virtual computer on an open tabs pane.
-   * @type {string}
-   */
-  var promoInjectedComputerLastSyncedText = '';
-
-  /**
-   * The different sections that are displayed.
-   * @enum {number}
-   */
-  var SectionType = {
-    BOOKMARKS: 'bookmarks',
-    FOREIGN_SESSION: 'foreign_session',
-    FOREIGN_SESSION_HEADER: 'foreign_session_header',
-    MOST_VISITED: 'most_visited',
-    PROMO_VC_SESSION_HEADER: 'promo_vc_session_header',
-    RECENTLY_CLOSED: 'recently_closed',
-    SNAPSHOTS: 'snapshots',
-    UNKNOWN: 'unknown',
-  };
-
-  /**
-   * The different ids used of our custom context menu. Sent to the ChromeView
-   * and sent back when a menu is selected.
-   * @enum {number}
-   */
-  var ContextMenuItemIds = {
-    BOOKMARK_EDIT: 0,
-    BOOKMARK_DELETE: 1,
-    BOOKMARK_OPEN_IN_NEW_TAB: 2,
-    BOOKMARK_OPEN_IN_INCOGNITO_TAB: 3,
-    BOOKMARK_SHORTCUT: 4,
-
-    MOST_VISITED_OPEN_IN_NEW_TAB: 10,
-    MOST_VISITED_OPEN_IN_INCOGNITO_TAB: 11,
-    MOST_VISITED_REMOVE: 12,
-
-    RECENTLY_CLOSED_OPEN_IN_NEW_TAB: 20,
-    RECENTLY_CLOSED_OPEN_IN_INCOGNITO_TAB: 21,
-    RECENTLY_CLOSED_REMOVE: 22,
-
-    FOREIGN_SESSIONS_REMOVE: 30,
-
-    PROMO_VC_SESSION_REMOVE: 40,
-  };
-
-  /**
-   * The URL of the element for the context menu.
-   * @type {string}
-   */
-  var contextMenuUrl = null;
-
-  var contextMenuItem = null;
-
-  var currentSnapshots = null;
-
-  var currentSessions = null;
-
-  /**
-   * The possible states of the sync section
-   * @enum {number}
-   */
-  var SyncState = {
-    INITIAL: 0,
-    WAITING_FOR_DATA: 1,
-    DISPLAYING_LOADING: 2,
-    DISPLAYED_LOADING: 3,
-    LOADED: 4,
-  };
-
-  /**
-   * The current state of the sync section.
-   */
-  var syncState = SyncState.INITIAL;
-
-  /**
-   * Whether or not sync is enabled. It will be undefined until
-   * setSyncEnabled() is called.
-   * @type {?boolean}
-   */
-  var syncEnabled = undefined;
-
-  /**
-   * The current most visited data being displayed.
-   * @type {Array.<Object>}
-   */
-  var mostVisitedData_ = [];
-
-  /**
-   * The current bookmark data being displayed. Keep a reference to this data
-   * in case the sync enabled state changes.  In this case, the bookmark data
-   * will need to be refiltered.
-   * @type {?Object}
-   */
-  var bookmarkData;
-
-  /**
-   * Keep track of any outstanding timers related to updating the sync section.
-   */
-  var syncTimerId = -1;
-
-  /**
-   * The minimum amount of time that 'Loading...' can be displayed. This is to
-   * prevent flashing.
-   */
-  var SYNC_LOADING_TIMEOUT = 1000;
-
-  /**
-   * How long to wait for sync data to load before displaying the 'Loading...'
-   * text to the user.
-   */
-  var SYNC_INITIAL_LOAD_TIMEOUT = 1000;
-
-  /**
-   * An array of images that are currently in loading state. Once an image
-   * loads it is removed from this array.
-   */
-  var imagesBeingLoaded = new Array();
-
-  /**
-   * Flag indicating if we are on bookmark shortcut mode.
-   * In this mode, only the bookmark section is available and selecting
-   * a non-folder bookmark adds it to the home screen.
-   * Context menu is disabled.
-   */
-  var bookmarkShortcutMode = false;
-
-  function setIncognitoMode(incognito) {
-    isIncognito = incognito;
-    if (!isIncognito) {
-      chrome.send('getMostVisited');
-      chrome.send('getRecentlyClosedTabs');
-      chrome.send('getForeignSessions');
-      chrome.send('getPromotions');
-      chrome.send('getIncognitoDisabled');
-    }
-  }
-
-  function setIncognitoEnabled(item) {
-    isIncognitoEnabled = item.incognitoEnabled;
-  }
-
-  /**
-   * Flag set to true when the page is loading its initial set of images. This
-   * is set to false after all the initial images have loaded.
-   */
-  function onInitialImageLoaded(event) {
-    var url = event.target.src;
-    for (var i = 0; i < imagesBeingLoaded.length; ++i) {
-      if (imagesBeingLoaded[i].src == url) {
-        imagesBeingLoaded.splice(i, 1);
-        if (imagesBeingLoaded.length == 0) {
-          // To send out the NTP loading complete notification.
-          loadStatus_ |= LoadStatusType.LOAD_IMAGES_COMPLETE;
-          sendNTPNotification();
-        }
-      }
-    }
-  }
-
-  /**
-   * Marks the given image as currently being loaded. Once all such images load
-   * we inform the browser via a hash change.
-   */
-  function trackImageLoad(url) {
-    if (finishedLoadingNotificationSent_)
-      return;
-
-    for (var i = 0; i < imagesBeingLoaded.length; ++i) {
-      if (imagesBeingLoaded[i].src == url)
-        return;
-    }
-
-    loadStatus_ &= (~LoadStatusType.LOAD_IMAGES_COMPLETE);
-
-    var image = new Image();
-    image.onload = onInitialImageLoaded;
-    image.onerror = onInitialImageLoaded;
-    image.src = url;
-    imagesBeingLoaded.push(image);
-  }
-
-  /**
-   * Initializes all the UI once the page has loaded.
-   */
-  function init() {
-    // Special case to handle NTP caching.
-    if (window.location.hash == '#cached_ntp')
-      document.location.hash = '#most_visited';
-    // Special case to show a specific bookmarks folder.
-    // Used to show the mobile bookmarks folder after importing.
-    var bookmarkIdMatch = window.location.hash.match(/#bookmarks:(\d+)/);
-    if (bookmarkIdMatch && bookmarkIdMatch.length == 2) {
-      localStorage.setItem(DEFAULT_BOOKMARK_FOLDER_KEY, bookmarkIdMatch[1]);
-      document.location.hash = '#bookmarks';
-    }
-    // Special case to choose a bookmark for adding a shortcut.
-    // See the doc of bookmarkShortcutMode for details.
-    if (window.location.hash == '#bookmark_shortcut')
-      bookmarkShortcutMode = true;
-    // Make sure a valid section is always displayed.  Both normal and
-    // incognito NTPs have a bookmarks section.
-    if (getPaneIndexFromHash() < 0)
-      document.location.hash = '#bookmarks';
-
-    // Initialize common widgets.
-    var titleScrollers =
-        document.getElementsByClassName('section-title-wrapper');
-    for (var i = 0, len = titleScrollers.length; i < len; i++)
-      initializeTitleScroller(titleScrollers[i]);
-
-    // Initialize virtual computers for the sync promo.
-    createPromoVirtualComputers();
-
-    setCurrentBookmarkFolderData(
-        localStorage.getItem(DEFAULT_BOOKMARK_FOLDER_KEY));
-
-    addMainSection('incognito');
-    addMainSection('most_visited');
-    addMainSection('bookmarks');
-    addMainSection('open_tabs');
-
-    computeDynamicLayout();
-
-    scrollToPane(getPaneIndexFromHash());
-    updateSyncEmptyState();
-
-    window.onpopstate = onPopStateHandler;
-    window.addEventListener('hashchange', updatePaneOnHash);
-    window.addEventListener('resize', windowResizeHandler);
-
-    if (!bookmarkShortcutMode)
-      window.addEventListener('contextmenu', contextMenuHandler);
-  }
-
-  function sendNTPTitleLoadedNotification() {
-    if (!titleLoadedStatus_) {
-      titleLoadedStatus_ = true;
-      chrome.send('notifyNTPTitleLoaded');
-    }
-  }
-
-  /**
-   * Notifies the chrome process of the status of the NTP.
-   */
-  function sendNTPNotification() {
-    if (loadStatus_ != LoadStatusType.LOAD_COMPLETE)
-      return;
-
-    if (!finishedLoadingNotificationSent_) {
-      finishedLoadingNotificationSent_ = true;
-      chrome.send('notifyNTPReady');
-    } else {
-      // Navigating after the loading complete notification has been sent
-      // might break tests.
-      chrome.send('NTPUnexpectedNavigation');
-    }
-  }
-
-  /**
-   * The default click handler for created item shortcuts.
-   *
-   * @param {Object} item The item specification.
-   * @param {function} evt The browser click event triggered.
-   */
-  function itemShortcutClickHandler(item, evt) {
-    // Handle the touch callback
-    if (item['folder']) {
-      browseToBookmarkFolder(item.id);
-    } else {
-      if (bookmarkShortcutMode) {
-        chrome.send('createHomeScreenBookmarkShortcut', [item.id]);
-      } else if (!!item.url) {
-        window.location = item.url;
-      }
-    }
-  }
-
-  /**
-   * Opens a recently closed tab.
-   *
-   * @param {Object} item An object containing the necessary information to
-   *     reopen a tab.
-   */
-  function openRecentlyClosedTab(item, evt) {
-    chrome.send('openedRecentlyClosed');
-    chrome.send('reopenTab', [item.sessionId]);
-  }
-
-  /**
-   * Creates a 'div' DOM element.
-   *
-   * @param {string} className The CSS class name for the DIV.
-   * @param {string=} opt_backgroundUrl The background URL to be applied to the
-   *     DIV if required.
-   * @return {Element} The newly created DIV element.
-   */
-  function createDiv(className, opt_backgroundUrl) {
-    var div = document.createElement('div');
-    div.className = className;
-    if (opt_backgroundUrl)
-      div.style.backgroundImage = 'url(' + opt_backgroundUrl + ')';
-    return div;
-  }
-
-  /**
-   * Helper for creating new DOM elements.
-   *
-   * @param {string} type The type of Element to be created (i.e. 'div',
-   *     'span').
-   * @param {Object} params A mapping of element attribute key and values that
-   *     should be applied to the new element.
-   * @return {Element} The newly created DOM element.
-   */
-  function createElement(type, params) {
-    var el = document.createElement(type);
-    if (typeof params === 'string') {
-      el.className = params;
-    } else {
-      for (attr in params) {
-        el[attr] = params[attr];
-      }
-    }
-    return el;
-  }
-
-  /**
-   * Adds a click listener to a specified element with the ability to override
-   * the default value of itemShortcutClickHandler.
-   *
-   * @param {Element} el The element the click listener should be added to.
-   * @param {Object} item The item data represented by the element.
-   * @param {function(Object, string, BrowserEvent)=} opt_clickCallback The
-   *     click callback to be triggered upon selection.
-   */
-  function wrapClickHandler(el, item, opt_clickCallback) {
-    el.addEventListener('click', function(evt) {
-      var clickCallback =
-          opt_clickCallback ? opt_clickCallback : itemShortcutClickHandler;
-      clickCallback(item, evt);
-    });
-  }
-
-  /**
-   * Create a DOM element to contain a recently closed item for a tablet
-   * device.
-   *
-   * @param {Object} item The data of the item used to generate the shortcut.
-   * @param {function(Object, string, BrowserEvent)=} opt_clickCallback The
-   *     click callback to be triggered upon selection (if not provided it will
-   *     use the default -- itemShortcutClickHandler).
-   * @return {Element} The shortcut element created.
-   */
-  function makeRecentlyClosedTabletItem(item, opt_clickCallback) {
-    var cell = createDiv('cell');
-
-    cell.setAttribute(CONTEXT_MENU_URL_KEY, item.url);
-
-    var iconUrl = item.icon;
-    if (!iconUrl) {
-      iconUrl = 'chrome://touch-icon/size/16@' + window.devicePixelRatio +
-          'x/' + item.url;
-    }
-    var icon = createDiv('icon', iconUrl);
-    trackImageLoad(iconUrl);
-    cell.appendChild(icon);
-
-    var title = createDiv('title');
-    title.textContent = item.title;
-    cell.appendChild(title);
-
-    wrapClickHandler(cell, item, opt_clickCallback);
-
-    return cell;
-  }
-
-  /**
-   * Creates a shortcut DOM element based on the item specified item
-   * configuration using the thumbnail layout used for most visited.  Other
-   * data types should not use this as they won't have a thumbnail.
-   *
-   * @param {Object} item The data of the item used to generate the shortcut.
-   * @param {function(Object, string, BrowserEvent)=} opt_clickCallback The
-   *     click callback to be triggered upon selection (if not provided it will
-   *     use the default -- itemShortcutClickHandler).
-   * @return {Element} The shortcut element created.
-   */
-  function makeMostVisitedItem(item, opt_clickCallback) {
-    // thumbnail-cell          -- main outer container
-    //   thumbnail-container   -- container for the thumbnail
-    //     thumbnail           -- the actual thumbnail image; outer border
-    //     inner-border        -- inner border
-    //   title                 -- container for the title
-    //     img                 -- hack align title text baseline with bottom
-    //     title text          -- the actual text of the title
-    var thumbnailCell = createDiv('thumbnail-cell');
-    var thumbnailContainer = createDiv('thumbnail-container');
-    var backgroundUrl = item.thumbnailUrl || 'chrome://thumb/' + item.url;
-    if (backgroundUrl == 'chrome://thumb/chrome://welcome/') {
-      // Ideally, it would be nice to use the URL as is.  However, as of now
-      // theme support has been removed from Chrome.  Instead, load the image
-      // URL from a style and use it.  Don't just use the style because
-      // trackImageLoad(...) must be called with the background URL.
-      var welcomeStyle = findCssRule('.welcome-to-chrome').style;
-      var backgroundImage = welcomeStyle.backgroundImage;
-      // trim the "url(" prefix and ")" suffix
-      backgroundUrl = backgroundImage.substring(4, backgroundImage.length - 1);
-    }
-    trackImageLoad(backgroundUrl);
-    var thumbnail = createDiv('thumbnail');
-    // Use an Image object to ensure the thumbnail image actually exists.  If
-    // not, this will allow the default to show instead.
-    var thumbnailImg = new Image();
-    thumbnailImg.onload = function() {
-      thumbnail.style.backgroundImage = 'url(' + backgroundUrl + ')';
-    };
-    thumbnailImg.src = backgroundUrl;
-
-    thumbnailContainer.appendChild(thumbnail);
-    var innerBorder = createDiv('inner-border');
-    thumbnailContainer.appendChild(innerBorder);
-    thumbnailCell.appendChild(thumbnailContainer);
-    var title = createDiv('title');
-    title.textContent = item.title;
-    var spacerImg = createElement('img', 'title-spacer');
-    spacerImg.alt = '';
-    title.insertBefore(spacerImg, title.firstChild);
-    thumbnailCell.appendChild(title);
-
-    var shade = createDiv('thumbnail-cell-shade');
-    thumbnailContainer.appendChild(shade);
-    addActiveTouchListener(shade, 'thumbnail-cell-shade-active');
-
-    wrapClickHandler(thumbnailCell, item, opt_clickCallback);
-
-    thumbnailCell.setAttribute(CONTEXT_MENU_URL_KEY, item.url);
-    thumbnailCell.contextMenuItem = item;
-    return thumbnailCell;
-  }
-
-  /**
-   * Creates a shortcut DOM element based on the item specified item
-   * configuration using the favicon layout used for bookmarks.
-   *
-   * @param {Object} item The data of the item used to generate the shortcut.
-   * @param {function(Object, string, BrowserEvent)=} opt_clickCallback The
-   *     click callback to be triggered upon selection (if not provided it will
-   *     use the default -- itemShortcutClickHandler).
-   * @return {Element} The shortcut element created.
-   */
-  function makeBookmarkItem(item, opt_clickCallback) {
-    var holder = createDiv('favicon-cell');
-    addActiveTouchListener(holder, 'favicon-cell-active');
-
-    holder.setAttribute(CONTEXT_MENU_URL_KEY, item.url);
-    holder.contextMenuItem = item;
-    var faviconBox = createDiv('favicon-box');
-    if (item.folder) {
-      faviconBox.classList.add('folder');
-    } else {
-      var iconUrl = item.icon || 'chrome://touch-icon/largest/' + item.url;
-      var faviconIcon = createDiv('favicon-icon');
-      faviconIcon.style.backgroundImage = 'url(' + iconUrl + ')';
-      trackImageLoad(iconUrl);
-
-      var image = new Image();
-      image.src = iconUrl;
-      image.onload = function() {
-        var w = image.width;
-        var h = image.height;
-        if (Math.floor(w) <= 16 || Math.floor(h) <= 16) {
-          // it's a standard favicon (or at least it's small).
-          faviconBox.classList.add('document');
-
-          faviconBox.appendChild(
-              createDiv('color-strip colorstrip-' + faviconIndex));
-          faviconBox.appendChild(createDiv('bookmark-border'));
-          var foldDiv = createDiv('fold');
-          foldDiv.id = 'fold_' + faviconIndex;
-          foldDiv.style['background'] =
-              '-webkit-canvas(fold_' + faviconIndex + ')';
-
-          // Use a container so that the fold it self can be zoomed without
-          // changing the positioning of the fold.
-          var foldContainer = createDiv('fold-container');
-          foldContainer.appendChild(foldDiv);
-          faviconBox.appendChild(foldContainer);
-
-          // FaviconWebUIHandler::HandleGetFaviconDominantColor expects
-          // an URL that starts with chrome://favicon/size/.
-          // The handler always loads 16x16 1x favicon and assumes that
-          // the dominant color for all scale factors is the same.
-          chrome.send('getFaviconDominantColor',
-              [('chrome://favicon/size/16@1x/' + item.url), '' + faviconIndex]);
-          faviconIndex++;
-        } else if ((w == 57 && h == 57) || (w == 114 && h == 114)) {
-          // it's a touch icon for 1x or 2x.
-          faviconIcon.classList.add('touch-icon');
-        } else {
-          // It's an html5 icon (or at least it's larger).
-          // Rescale it to be no bigger than 64x64 dip.
-          var max = 64;
-          if (w > max || h > max) {
-            var scale = (w > h) ? (max / w) : (max / h);
-            w *= scale;
-            h *= scale;
-          }
-          faviconIcon.style.backgroundSize = w + 'px ' + h + 'px';
-        }
-      };
-      faviconBox.appendChild(faviconIcon);
-    }
-    holder.appendChild(faviconBox);
-
-    var title = createDiv('title');
-    title.textContent = item.title;
-    holder.appendChild(title);
-
-    wrapClickHandler(holder, item, opt_clickCallback);
-
-    return holder;
-  }
-
-  /**
-   * Adds touch listeners to the specified element to apply a class when it is
-   * selected (removing the class when no longer pressed).
-   *
-   * @param {Element} el The element to apply the class to when touched.
-   * @param {string} activeClass The CSS class name to be applied when active.
-   */
-  function addActiveTouchListener(el, activeClass) {
-    if (!window.touchCancelListener) {
-      window.touchCancelListener = function(evt) {
-        if (activeItemDelayTimerId) {
-          clearTimeout(activeItemDelayTimerId);
-          activeItemDelayTimerId = undefined;
-        }
-        if (!activeItem) {
-          return;
-        }
-        activeItem.classList.remove(activeItem.dataset.activeClass);
-        activeItem = null;
-      };
-      document.addEventListener('touchcancel', window.touchCancelListener);
-    }
-    el.dataset.activeClass = activeClass;
-    el.addEventListener(PRESS_START_EVT, function(evt) {
-      if (activeItemDelayTimerId) {
-        clearTimeout(activeItemDelayTimerId);
-        activeItemDelayTimerId = undefined;
-      }
-      activeItemDelayTimerId = setTimeout(function() {
-        el.classList.add(activeClass);
-        activeItem = el;
-      }, ACTIVE_ITEM_DELAY_MS);
-    });
-    el.addEventListener(PRESS_STOP_EVT, function(evt) {
-      if (activeItemDelayTimerId) {
-        clearTimeout(activeItemDelayTimerId);
-        activeItemDelayTimerId = undefined;
-      }
-      // Add the active class to ensure the pressed state is visible when
-      // quickly tapping, which can happen if the start and stop events are
-      // received before the active item delay timer has been executed.
-      el.classList.add(activeClass);
-      el.classList.add('no-active-delay');
-      setTimeout(function() {
-        el.classList.remove(activeClass);
-        el.classList.remove('no-active-delay');
-      }, 0);
-      activeItem = null;
-    });
-  }
-
-  /**
-   * Creates a shortcut DOM element based on the item specified in the list
-   * format.
-   *
-   * @param {Object} item The data of the item used to generate the shortcut.
-   * @param {function(Object, string, BrowserEvent)=} opt_clickCallback The
-   *     click callback to be triggered upon selection (if not provided it will
-   *     use the default -- itemShortcutClickHandler).
-   * @return {Element} The shortcut element created.
-   */
-  function makeListEntryItem(item, opt_clickCallback) {
-    var listItem = createDiv('list-item');
-    addActiveTouchListener(listItem, ACTIVE_LIST_ITEM_CSS_CLASS);
-    listItem.setAttribute(CONTEXT_MENU_URL_KEY, item.url);
-    var iconSize = item.iconSize || 64;
-    var iconUrl = item.icon ||
-        'chrome://touch-icon/size/' + iconSize + '@1x/' + item.url;
-    listItem.appendChild(createDiv('icon', iconUrl));
-    trackImageLoad(iconUrl);
-    var title = createElement('div', {
-      textContent: item.title,
-      className: 'title session_title'
-    });
-    listItem.appendChild(title);
-
-    listItem.addEventListener('click', function(evt) {
-      var clickCallback =
-          opt_clickCallback ? opt_clickCallback : itemShortcutClickHandler;
-      clickCallback(item, evt);
-    });
-    if (item.divider == 'section') {
-      // Add a child div because the section divider has a gradient and
-      // webkit doesn't seem to currently support borders with gradients.
-      listItem.appendChild(createDiv('section-divider'));
-    } else {
-      listItem.classList.add('standard-divider');
-    }
-    return listItem;
-  }
-
-  /**
-   * Creates a DOM list entry for a remote session or tab.
-   *
-   * @param {Object} item The data of the item used to generate the shortcut.
-   * @param {function(Object, string, BrowserEvent)=} opt_clickCallback The
-   *     click callback to be triggered upon selection (if not provided it will
-   *     use the default -- itemShortcutClickHandler).
-   * @return {Element} The shortcut element created.
-   */
-  function makeForeignSessionListEntry(item, opt_clickCallback) {
-    // Session item
-    var sessionOuterDiv = createDiv('list-item standard-divider');
-    addActiveTouchListener(sessionOuterDiv, ACTIVE_LIST_ITEM_CSS_CLASS);
-    sessionOuterDiv.contextMenuItem = item;
-
-    var icon = createDiv('session-icon ' + item.iconStyle);
-    sessionOuterDiv.appendChild(icon);
-
-    var titleContainer = createElement('div', 'title');
-    sessionOuterDiv.appendChild(titleContainer);
-
-    // Extra container to allow title & last-sync time to stack vertically.
-    var sessionInnerDiv = createDiv('session_container');
-    titleContainer.appendChild(sessionInnerDiv);
-
-    var title = createDiv('session-name');
-    title.textContent = item.title;
-    title.id = item.titleId || '';
-    sessionInnerDiv.appendChild(title);
-
-    var lastSynced = createDiv('session-last-synced');
-    lastSynced.textContent =
-        templateData.opentabslastsynced + ': ' + item.userVisibleTimestamp;
-    lastSynced.id = item.userVisibleTimestampId || '';
-    sessionInnerDiv.appendChild(lastSynced);
-
-    sessionOuterDiv.addEventListener('click', function(evt) {
-      var clickCallback =
-          opt_clickCallback ? opt_clickCallback : itemShortcutClickHandler;
-      clickCallback(item, evt);
-    });
-    return sessionOuterDiv;
-  }
-
-  /**
-   * Saves the number of most visited pages and updates promo visibility.
-   * @param {number} n Number of most visited pages.
-   */
-  function setNumberOfMostVisitedPages(n) {
-    numberOfMostVisitedPages = n;
-    updatePromoVisibility();
-  }
-
-  /**
-   * Saves the recently closed tabs flag and updates promo visibility.
-   * @param {boolean} anyTabs Whether there are any recently closed tabs.
-   */
-  function setHasRecentlyClosedTabs(anyTabs) {
-    hasRecentlyClosedTabs = anyTabs;
-    updatePromoVisibility();
-  }
-
-  /**
-   * Updates the most visited pages.
-   *
-   * @param {Array.<Object>} List of data for displaying the list of most
-   *     visited pages (see C++ handler for model description).
-   * @param {boolean} hasBlacklistedUrls Whether any blacklisted URLs are
-   *     present.
-   */
-  function setMostVisitedPages(data, hasBlacklistedUrls) {
-    setNumberOfMostVisitedPages(data.length);
-    // limit the number of most visited items to display
-    if (isPhone() && data.length > 6) {
-      data.splice(6, data.length - 6);
-    } else if (isTablet() && data.length > 8) {
-      data.splice(8, data.length - 8);
-    }
-
-    data.forEach(function(item, index) {
-      item.mostVisitedIndex = index;
-    });
-
-    if (equals(data, mostVisitedData_))
-      return;
-
-    var clickFunction = function(item) {
-      chrome.send('openedMostVisited');
-      chrome.send('metricsHandler:recordInHistogram',
-          ['NewTabPage.MostVisited', item.mostVisitedIndex, 8]);
-      window.location = item.url;
-    };
-    populateData(findList('most_visited'), SectionType.MOST_VISITED, data,
-        makeMostVisitedItem, clickFunction);
-    computeDynamicLayout();
-
-    mostVisitedData_ = data;
-  }
-
-  /**
-   * Updates the recently closed tabs.
-   *
-   * @param {Array.<Object>} List of data for displaying the list of recently
-   *     closed tabs (see C++ handler for model description).
-   */
-  function setRecentlyClosedTabs(data) {
-    var container = $('recently_closed_container');
-    if (!data || data.length == 0) {
-      // hide the recently closed section if it is empty.
-      container.style.display = 'none';
-      setHasRecentlyClosedTabs(false);
-    } else {
-      container.style.display = 'block';
-      setHasRecentlyClosedTabs(true);
-      var decoratorFunc = isPhone() ? makeListEntryItem :
-          makeRecentlyClosedTabletItem;
-      populateData(findList('recently_closed'), SectionType.RECENTLY_CLOSED,
-          data, decoratorFunc, openRecentlyClosedTab);
-    }
-    computeDynamicLayout();
-  }
-
-  /**
-   * Updates the bookmarks.
-   *
-   * @param {Array.<Object>} List of data for displaying the bookmarks (see
-   *     C++ handler for model description).
-   */
-  function bookmarks(data) {
-    bookmarkFolderId = data.id;
-    if (!replacedInitialState) {
-      history.replaceState(
-          {folderId: bookmarkFolderId, selectedPaneIndex: currentPaneIndex},
-          null, null);
-      replacedInitialState = true;
-    }
-    if (syncEnabled == undefined) {
-      // Wait till we know whether or not sync is enabled before displaying any
-      // bookmarks (since they may need to be filtered below)
-      bookmarkData = data;
-      return;
-    }
-
-    var titleWrapper = $('bookmarks_title_wrapper');
-    setBookmarkTitleHierarchy(
-        titleWrapper, data, data['hierarchy']);
-
-    var filteredBookmarks = data.bookmarks;
-    if (!syncEnabled) {
-      filteredBookmarks = filteredBookmarks.filter(function(val) {
-        return (val.type != 'BOOKMARK_BAR' && val.type != 'OTHER_NODE');
-      });
-    }
-    if (bookmarkShortcutMode) {
-      populateData(findList('bookmarks'), SectionType.BOOKMARKS,
-          filteredBookmarks, makeBookmarkItem);
-    } else {
-      var clickFunction = function(item) {
-        if (item['folder']) {
-          browseToBookmarkFolder(item.id);
-        } else if (!!item.url) {
-          chrome.send('openedBookmark');
-          window.location = item.url;
-        }
-      };
-      populateData(findList('bookmarks'), SectionType.BOOKMARKS,
-          filteredBookmarks, makeBookmarkItem, clickFunction);
-    }
-
-    var bookmarkContainer = $('bookmarks_container');
-
-    // update the shadows on the  breadcrumb bar
-    computeDynamicLayout();
-
-    if ((loadStatus_ & LoadStatusType.LOAD_BOOKMARKS_FINISHED) !=
-        LoadStatusType.LOAD_BOOKMARKS_FINISHED) {
-      loadStatus_ |= LoadStatusType.LOAD_BOOKMARKS_FINISHED;
-      sendNTPNotification();
-    }
-  }
-
-  /**
-   * Checks if promo is allowed and MostVisited requirements are satisfied.
-   * @return {boolean} Whether the promo should be shown on most_visited.
-   */
-  function shouldPromoBeShownOnMostVisited() {
-    return promoIsAllowed && promoIsAllowedOnMostVisited &&
-        numberOfMostVisitedPages >= 2 && !hasRecentlyClosedTabs;
-  }
-
-  /**
-   * Checks if promo is allowed and OpenTabs requirements are satisfied.
-   * @return {boolean} Whether the promo should be shown on open_tabs.
-   */
-  function shouldPromoBeShownOnOpenTabs() {
-    var snapshotsCount =
-        currentSnapshots == null ? 0 : currentSnapshots.length;
-    var sessionsCount = currentSessions == null ? 0 : currentSessions.length;
-    return promoIsAllowed && promoIsAllowedOnOpenTabs &&
-        (snapshotsCount + sessionsCount != 0);
-  }
-
-  /**
-   * Checks if promo is allowed and SyncPromo requirements are satisfied.
-   * @return {boolean} Whether the promo should be shown on sync_promo.
-   */
-  function shouldPromoBeShownOnSync() {
-    var snapshotsCount =
-        currentSnapshots == null ? 0 : currentSnapshots.length;
-    var sessionsCount = currentSessions == null ? 0 : currentSessions.length;
-    return promoIsAllowed && promoIsAllowedOnOpenTabs &&
-        (snapshotsCount + sessionsCount == 0);
-  }
-
-  /**
-   * Records a promo impression on a given section if necessary.
-   * @param {string} section Active section name to check.
-   */
-  function promoUpdateImpressions(section) {
-    if (section == 'most_visited' && shouldPromoBeShownOnMostVisited())
-      chrome.send('recordImpression', ['most_visited']);
-    else if (section == 'open_tabs' && shouldPromoBeShownOnOpenTabs())
-      chrome.send('recordImpression', ['open_tabs']);
-    else if (section == 'open_tabs' && shouldPromoBeShownOnSync())
-      chrome.send('recordImpression', ['sync_promo']);
-  }
-
-  /**
-   * Updates the visibility on all promo-related items as necessary.
-   */
-  function updatePromoVisibility() {
-    var mostVisitedEl = $('promo_message_on_most_visited');
-    var openTabsVCEl = $('promo_vc_list');
-    var syncPromoLegacyEl = $('promo_message_on_sync_promo_legacy');
-    var syncPromoReceivedEl = $('promo_message_on_sync_promo_received');
-    mostVisitedEl.style.display =
-        shouldPromoBeShownOnMostVisited() ? 'block' : 'none';
-    syncPromoReceivedEl.style.display =
-        shouldPromoBeShownOnSync() ? 'block' : 'none';
-    syncPromoLegacyEl.style.display =
-        shouldPromoBeShownOnSync() ? 'none' : 'block';
-    openTabsVCEl.style.display =
-        (shouldPromoBeShownOnOpenTabs() && promoIsAllowedAsVirtualComputer) ?
-            'block' : 'none';
-  }
-
-  /**
-   * Called from native.
-   * Clears the promotion.
-   */
-  function clearPromotions() {
-    setPromotions({});
-  }
-
-  /**
-   * Set the element to a parsed and sanitized promotion HTML string.
-   * @param {Element} el The element to set the promotion string to.
-   * @param {string} html The promotion HTML string.
-   * @throws {Error} In case of non supported markup.
-   */
-  function setPromotionHtml(el, html) {
-    if (!el) return;
-    el.innerHTML = '';
-    if (!html) return;
-    var tags = ['BR', 'DIV', 'BUTTON', 'SPAN'];
-    var attrs = {
-      class: function(node, value) { return true; },
-      style: function(node, value) { return true; },
-    };
-    try {
-      var fragment = parseHtmlSubset(html, tags, attrs);
-      el.appendChild(fragment);
-    } catch (err) {
-      console.error(err.toString());
-      // Ignore all errors while parsing or setting the element.
-    }
-  }
-
-  /**
-   * Called from native.
-   * Sets the text for all promo-related items, updates
-   * promo-send-email-target items to send email on click and
-   * updates the visibility of items.
-   * @param {Object} promotions Dictionary used to fill-in the text.
-   */
-  function setPromotions(promotions) {
-    var mostVisitedEl = $('promo_message_on_most_visited');
-    var openTabsEl = $('promo_message_on_open_tabs');
-    var syncPromoReceivedEl = $('promo_message_on_sync_promo_received');
-
-    promoIsAllowed = !!promotions.promoIsAllowed;
-    promoIsAllowedOnMostVisited = !!promotions.promoIsAllowedOnMostVisited;
-    promoIsAllowedOnOpenTabs = !!promotions.promoIsAllowedOnOpenTabs;
-    promoIsAllowedAsVirtualComputer = !!promotions.promoIsAllowedAsVC;
-
-    setPromotionHtml(mostVisitedEl, promotions.promoMessage);
-    setPromotionHtml(openTabsEl, promotions.promoMessage);
-    setPromotionHtml(syncPromoReceivedEl, promotions.promoMessageLong);
-
-    promoInjectedComputerTitleText = promotions.promoVCTitle || '';
-    promoInjectedComputerLastSyncedText = promotions.promoVCLastSynced || '';
-    var openTabsVCTitleEl = $('promo_vc_title');
-    if (openTabsVCTitleEl)
-      openTabsVCTitleEl.textContent = promoInjectedComputerTitleText;
-    var openTabsVCLastSyncEl = $('promo_vc_lastsync');
-    if (openTabsVCLastSyncEl)
-      openTabsVCLastSyncEl.textContent = promoInjectedComputerLastSyncedText;
-
-    if (promoIsAllowed) {
-      var promoButtonEls =
-          document.getElementsByClassName('promo-button');
-      for (var i = 0, len = promoButtonEls.length; i < len; i++) {
-        promoButtonEls[i].onclick = executePromoAction;
-        addActiveTouchListener(promoButtonEls[i], 'promo-button-active');
-      }
-    }
-    updatePromoVisibility();
-  }
-
-  /**
-   * On-click handler for promo email targets.
-   * Performs the promo action "send email".
-   * @param {Object} evt User interface event that triggered the action.
-   */
-  function executePromoAction(evt) {
-    evt.preventDefault();
-    chrome.send('promoActionTriggered');
-  }
-
-  /**
-   * Called by the browser when a context menu has been selected.
-   *
-   * @param {number} itemId The id of the item that was selected, as specified
-   *     when chrome.send('showContextMenu') was called.
-   */
-  function onCustomMenuSelected(itemId) {
-    if (contextMenuUrl != null) {
-      switch (itemId) {
-        case ContextMenuItemIds.BOOKMARK_OPEN_IN_NEW_TAB:
-        case ContextMenuItemIds.BOOKMARK_OPEN_IN_INCOGNITO_TAB:
-          chrome.send('openedBookmark');
-          break;
-
-        case ContextMenuItemIds.MOST_VISITED_OPEN_IN_NEW_TAB:
-        case ContextMenuItemIds.MOST_VISITED_OPEN_IN_INCOGNITO_TAB:
-          chrome.send('openedMostVisited');
-          if (contextMenuItem) {
-            chrome.send('metricsHandler:recordInHistogram',
-                ['NewTabPage.MostVisited',
-                 contextMenuItem.mostVisitedIndex,
-                 8]);
-          }
-          break;
-
-        case ContextMenuItemIds.RECENTLY_CLOSED_OPEN_IN_NEW_TAB:
-        case ContextMenuItemIds.RECENTLY_CLOSED_OPEN_IN_INCOGNITO_TAB:
-          chrome.send('openedRecentlyClosed');
-          break;
-      }
-    }
-
-    switch (itemId) {
-      case ContextMenuItemIds.BOOKMARK_OPEN_IN_NEW_TAB:
-      case ContextMenuItemIds.MOST_VISITED_OPEN_IN_NEW_TAB:
-      case ContextMenuItemIds.RECENTLY_CLOSED_OPEN_IN_NEW_TAB:
-        if (contextMenuUrl != null)
-          chrome.send('openInNewTab', [contextMenuUrl]);
-        break;
-
-      case ContextMenuItemIds.BOOKMARK_OPEN_IN_INCOGNITO_TAB:
-      case ContextMenuItemIds.MOST_VISITED_OPEN_IN_INCOGNITO_TAB:
-      case ContextMenuItemIds.RECENTLY_CLOSED_OPEN_IN_INCOGNITO_TAB:
-        if (contextMenuUrl != null)
-          chrome.send('openInIncognitoTab', [contextMenuUrl]);
-        break;
-
-      case ContextMenuItemIds.BOOKMARK_EDIT:
-        if (contextMenuItem != null)
-          chrome.send('editBookmark', [contextMenuItem.id]);
-        break;
-
-      case ContextMenuItemIds.BOOKMARK_DELETE:
-        if (contextMenuUrl != null)
-          chrome.send('deleteBookmark', [contextMenuItem.id]);
-        break;
-
-      case ContextMenuItemIds.MOST_VISITED_REMOVE:
-        if (contextMenuUrl != null)
-          chrome.send('blacklistURLFromMostVisited', [contextMenuUrl]);
-        break;
-
-      case ContextMenuItemIds.BOOKMARK_SHORTCUT:
-        if (contextMenuUrl != null)
-          chrome.send('createHomeScreenBookmarkShortcut', [contextMenuItem.id]);
-        break;
-
-      case ContextMenuItemIds.RECENTLY_CLOSED_REMOVE:
-        chrome.send('clearRecentlyClosed');
-        break;
-
-      case ContextMenuItemIds.FOREIGN_SESSIONS_REMOVE:
-        if (contextMenuItem != null) {
-          chrome.send(
-              'deleteForeignSession', [contextMenuItem.sessionTag]);
-          chrome.send('getForeignSessions');
-        }
-        break;
-
-      case ContextMenuItemIds.PROMO_VC_SESSION_REMOVE:
-        chrome.send('promoDisabled');
-        break;
-
-      default:
-        log.error('Unknown context menu selected id=' + itemId);
-        break;
-    }
-  }
-
-  /**
-   * Generates the full bookmark folder hierarchy and populates the scrollable
-   * title element.
-   *
-   * @param {Element} wrapperEl The wrapper element containing the scrollable
-   *     title.
-   * @param {string} data The current bookmark folder node.
-   * @param {Array.<Object>=} opt_ancestry The folder ancestry of the current
-   *     bookmark folder.  The list is ordered in order of closest descendant
-   *     (the root will always be the last node).  The definition of each
-   *     element is:
-   *     - id {number}: Unique ID of the folder (N/A for root node).
-   *     - name {string}: Name of the folder (N/A for root node).
-   *     - root {boolean}: Whether this is the root node.
-   */
-  function setBookmarkTitleHierarchy(wrapperEl, data, opt_ancestry) {
-    var title = wrapperEl.getElementsByClassName('section-title')[0];
-    title.innerHTML = '';
-    if (opt_ancestry) {
-      for (var i = opt_ancestry.length - 1; i >= 0; i--) {
-        var titleCrumb = createBookmarkTitleCrumb_(opt_ancestry[i]);
-        title.appendChild(titleCrumb);
-        title.appendChild(createDiv('bookmark-separator'));
-      }
-    }
-    var titleCrumb = createBookmarkTitleCrumb_(data);
-    titleCrumb.classList.add('title-crumb-active');
-    title.appendChild(titleCrumb);
-
-    // Ensure the last crumb is as visible as possible.
-    var windowWidth =
-        wrapperEl.getElementsByClassName('section-title-mask')[0].offsetWidth;
-    var crumbWidth = titleCrumb.offsetWidth;
-    var leftOffset = titleCrumb.offsetLeft;
-
-    var shiftLeft = windowWidth - crumbWidth - leftOffset;
-    if (shiftLeft < 0) {
-      if (crumbWidth > windowWidth)
-        shifLeft = -leftOffset;
-
-      // Queue up the scrolling initially to allow for the mask element to
-      // be placed into the dom and it's size correctly calculated.
-      setTimeout(function() {
-        handleTitleScroll(wrapperEl, shiftLeft);
-      }, 0);
-    } else {
-      handleTitleScroll(wrapperEl, 0);
-    }
-  }
-
-  /**
-   * Creates a clickable bookmark title crumb.
-   * @param {Object} data The crumb data (see setBookmarkTitleHierarchy for
-   *     definition of the data object).
-   * @return {Element} The clickable title crumb element.
-   * @private
-   */
-  function createBookmarkTitleCrumb_(data) {
-    var titleCrumb = createDiv('title-crumb');
-    if (data.root) {
-      titleCrumb.innerText = templateData.bookmarkstitle;
-    } else {
-      titleCrumb.innerText = data.title;
-    }
-    titleCrumb.addEventListener('click', function(evt) {
-      browseToBookmarkFolder(data.root ? '0' : data.id);
-    });
-    return titleCrumb;
-  }
-
-  /**
-   * Handles scrolling a title element.
-   * @param {Element} wrapperEl The wrapper element containing the scrollable
-   *     title.
-   * @param {number} scrollPosition The position to be scrolled to.
-   */
-  function handleTitleScroll(wrapperEl, scrollPosition) {
-    var overflowLeftMask =
-        wrapperEl.getElementsByClassName('overflow-left-mask')[0];
-    var overflowRightMask =
-        wrapperEl.getElementsByClassName('overflow-right-mask')[0];
-    var title = wrapperEl.getElementsByClassName('section-title')[0];
-    var titleMask = wrapperEl.getElementsByClassName('section-title-mask')[0];
-    var titleWidth = title.scrollWidth;
-    var containerWidth = titleMask.offsetWidth;
-
-    var maxRightScroll = containerWidth - titleWidth;
-    var boundedScrollPosition =
-        Math.max(maxRightScroll, Math.min(scrollPosition, 0));
-
-    overflowLeftMask.style.opacity =
-        Math.min(
-            1,
-            (Math.max(0, -boundedScrollPosition)) + 10 / 30);
-
-    overflowRightMask.style.opacity =
-        Math.min(
-            1,
-            (Math.max(0, boundedScrollPosition - maxRightScroll) + 10) / 30);
-
-    // Set the position of the title.
-    if (titleWidth < containerWidth) {
-      // left-align on LTR and right-align on RTL.
-      title.style.left = '';
-    } else {
-      title.style.left = boundedScrollPosition + 'px';
-    }
-  }
-
-  /**
-   * Initializes a scrolling title element.
-   * @param {Element} wrapperEl The wrapper element of the scrolling title.
-   */
-  function initializeTitleScroller(wrapperEl) {
-    var title = wrapperEl.getElementsByClassName('section-title')[0];
-
-    var inTitleScroll = false;
-    var startingScrollPosition;
-    var startingOffset;
-    wrapperEl.addEventListener(PRESS_START_EVT, function(evt) {
-      inTitleScroll = true;
-      startingScrollPosition = getTouchEventX(evt);
-      startingOffset = title.offsetLeft;
-    });
-    document.body.addEventListener(PRESS_STOP_EVT, function(evt) {
-      if (!inTitleScroll)
-        return;
-      inTitleScroll = false;
-    });
-    document.body.addEventListener(PRESS_MOVE_EVT, function(evt) {
-      if (!inTitleScroll)
-        return;
-      handleTitleScroll(
-          wrapperEl,
-          startingOffset - (startingScrollPosition - getTouchEventX(evt)));
-      evt.stopPropagation();
-    });
-  }
-
-  /**
-   * Handles updates from the underlying bookmark model (calls originate
-   * in the WebUI handler for bookmarks).
-   *
-   * @param {Object} status Describes the type of change that occurred.  Can
-   *     contain the following fields:
-   *     - parent_id {string}: Unique id of the parent that was affected by
-   *                           the change.  If the parent is the bookmark
-   *                           bar, then the ID will be 'root'.
-   *     - node_id {string}: The unique ID of the node that was affected.
-   */
-  function bookmarkChanged(status) {
-    if (status) {
-      var affectedParentNode = status['parent_id'];
-      var affectedNodeId = status['node_id'];
-      var shouldUpdate = (bookmarkFolderId == affectedParentNode ||
-          bookmarkFolderId == affectedNodeId);
-      if (shouldUpdate)
-        setCurrentBookmarkFolderData(bookmarkFolderId);
-    } else {
-      // This typically happens when extensive changes could have happened to
-      // the model, such as initial load, import and sync.
-      setCurrentBookmarkFolderData(bookmarkFolderId);
-    }
-  }
-
-  /**
-   * Loads the bookarks data for a given folder.
-   *
-   * @param {string|number} folderId The ID of the folder to load (or null if
-   *     it should load the root folder).
-   */
-  function setCurrentBookmarkFolderData(folderId) {
-    if (folderId != null) {
-      chrome.send('getBookmarks', [folderId]);
-    } else {
-      chrome.send('getBookmarks');
-    }
-    try {
-      if (folderId == null) {
-        localStorage.removeItem(DEFAULT_BOOKMARK_FOLDER_KEY);
-      } else {
-        localStorage.setItem(DEFAULT_BOOKMARK_FOLDER_KEY, folderId);
-      }
-    } catch (e) {}
-  }
-
-  /**
-   * Navigates to the specified folder and handles loading the required data.
-   * Ensures the current folder can be navigated back to using the browser
-   * controls.
-   *
-   * @param {string|number} folderId The ID of the folder to navigate to.
-   */
-  function browseToBookmarkFolder(folderId) {
-    history.pushState(
-        {folderId: folderId, selectedPaneIndex: currentPaneIndex},
-        null, null);
-    setCurrentBookmarkFolderData(folderId);
-  }
-
-  /**
-   * Called to inform the page of the current sync status. If the state has
-   * changed from disabled to enabled, it changes the current and default
-   * bookmark section to the root directory.  This makes desktop bookmarks are
-   * visible.
-   */
-  function setSyncEnabled(enabled) {
-    try {
-      if (syncEnabled != undefined && syncEnabled == enabled) {
-        // The value didn't change
-        return;
-      }
-      syncEnabled = enabled;
-
-      if (enabled) {
-        if (!localStorage.getItem(SYNC_ENABLED_KEY)) {
-          localStorage.setItem(SYNC_ENABLED_KEY, 'true');
-          setCurrentBookmarkFolderData('0');
-        }
-      } else {
-        localStorage.removeItem(SYNC_ENABLED_KEY);
-      }
-      updatePromoVisibility();
-
-      if (bookmarkData) {
-        // Bookmark data can now be displayed (or needs to be refiltered)
-        bookmarks(bookmarkData);
-      }
-
-      updateSyncEmptyState();
-    } catch (e) {}
-  }
-
-  /**
-   * Handles adding or removing the 'nothing to see here' text from the session
-   * list depending on the state of snapshots and sessions.
-   *
-   * @param {boolean} Whether the call is occuring because of a schedule
-   *     timeout.
-   */
-  function updateSyncEmptyState(timeout) {
-    if (syncState == SyncState.DISPLAYING_LOADING && !timeout) {
-      // Make sure 'Loading...' is displayed long enough
-      return;
-    }
-
-    var openTabsList = findList('open_tabs');
-    var snapshotsList = findList('snapshots');
-    var syncPromo = $('sync_promo');
-    var syncLoading = $('sync_loading');
-    var syncEnableSync = $('sync_enable_sync');
-
-    if (syncEnabled == undefined ||
-        currentSnapshots == null ||
-        currentSessions == null) {
-      if (syncState == SyncState.INITIAL) {
-        // Wait one second for sync data to come in before displaying loading
-        // text.
-        syncState = SyncState.WAITING_FOR_DATA;
-        syncTimerId = setTimeout(function() { updateSyncEmptyState(true); },
-            SYNC_INITIAL_LOAD_TIMEOUT);
-      } else if (syncState == SyncState.WAITING_FOR_DATA && timeout) {
-        // We've waited for the initial info timeout to pass and still don't
-        // have data.  So, display loading text so the user knows something is
-        // happening.
-        syncState = SyncState.DISPLAYING_LOADING;
-        syncLoading.style.display = '-webkit-box';
-        centerEmptySections(syncLoading);
-        syncTimerId = setTimeout(function() { updateSyncEmptyState(true); },
-            SYNC_LOADING_TIMEOUT);
-      } else if (syncState == SyncState.DISPLAYING_LOADING) {
-        // Allow the Loading... text to go away once data comes in
-        syncState = SyncState.DISPLAYED_LOADING;
-      }
-      return;
-    }
-
-    if (syncTimerId != -1) {
-      clearTimeout(syncTimerId);
-      syncTimerId = -1;
-    }
-    syncState = SyncState.LOADED;
-
-    // Hide everything by default, display selectively below
-    syncEnableSync.style.display = 'none';
-    syncLoading.style.display = 'none';
-    syncPromo.style.display = 'none';
-
-    var snapshotsCount =
-        currentSnapshots == null ? 0 : currentSnapshots.length;
-    var sessionsCount = currentSessions == null ? 0 : currentSessions.length;
-
-    if (!syncEnabled) {
-      syncEnableSync.style.display = '-webkit-box';
-      centerEmptySections(syncEnableSync);
-    } else if (sessionsCount + snapshotsCount == 0) {
-      syncPromo.style.display = '-webkit-box';
-      centerEmptySections(syncPromo);
-    } else {
-      openTabsList.style.display = sessionsCount == 0 ? 'none' : 'block';
-      snapshotsList.style.display = snapshotsCount == 0 ? 'none' : 'block';
-    }
-    updatePromoVisibility();
-  }
-
-  /**
-   * Called externally when updated snapshot data is available.
-   *
-   * @param {Object} data The snapshot data
-   */
-  function snapshots(data) {
-    var list = findList('snapshots');
-    list.innerHTML = '';
-
-    currentSnapshots = data;
-    updateSyncEmptyState();
-
-    if (!data || data.length == 0)
-      return;
-
-    data.sort(function(a, b) {
-      return b.createTime - a.createTime;
-    });
-
-    // Create the main container
-    var snapshotsEl = createElement('div');
-    list.appendChild(snapshotsEl);
-
-    // Create the header container
-    var headerEl = createDiv('session-header');
-    snapshotsEl.appendChild(headerEl);
-
-    // Create the documents container
-    var docsEl = createDiv('session-children-container');
-    snapshotsEl.appendChild(docsEl);
-
-    // Create the container for the title & icon
-    var headerInnerEl = createDiv('list-item standard-divider');
-    addActiveTouchListener(headerInnerEl, ACTIVE_LIST_ITEM_CSS_CLASS);
-    headerEl.appendChild(headerInnerEl);
-
-    // Create the header icon
-    headerInnerEl.appendChild(createDiv('session-icon documents'));
-
-    // Create the header title
-    var titleContainer = createElement('span', 'title');
-    headerInnerEl.appendChild(titleContainer);
-    var title = createDiv('session-name');
-    title.textContent = templateData.receivedDocuments;
-    titleContainer.appendChild(title);
-
-    // Add support for expanding and collapsing the children
-    var expando = createDiv();
-    var expandoFunction = createExpandoFunction(expando, docsEl);
-    headerInnerEl.addEventListener('click', expandoFunction);
-    headerEl.appendChild(expando);
-
-    // Support for actually opening the document
-    var snapshotClickCallback = function(item) {
-      if (!item)
-        return;
-      if (item.snapshotId) {
-        window.location = 'chrome://snapshot/' + item.snapshotId;
-      } else if (item.printJobId) {
-        window.location = 'chrome://printjob/' + item.printJobId;
-      } else {
-        window.location = item.url;
-      }
-    }
-
-    // Finally, add the list of documents
-    populateData(docsEl, SectionType.SNAPSHOTS, data,
-        makeListEntryItem, snapshotClickCallback);
-  }
-
-  /**
-   * Create a function to handle expanding and collapsing a section
-   *
-   * @param {Element} expando The expando div
-   * @param {Element} element The element to expand and collapse
-   * @return {function()} A callback function that should be invoked when the
-   *     expando is clicked
-   */
-  function createExpandoFunction(expando, element) {
-    expando.className = 'expando open';
-    return function() {
-      if (element.style.height != '0px') {
-        // It seems that '-webkit-transition' only works when explicit pixel
-        // values are used.
-        setTimeout(function() {
-          // If this is the first time to collapse the list, store off the
-          // expanded height and also set the height explicitly on the style.
-          if (!element.expandedHeight) {
-            element.expandedHeight =
-                element.clientHeight + 'px';
-            element.style.height = element.expandedHeight;
-          }
-          // Now set the height to 0.  Note, this is also done in a callback to
-          // give the layout engine a chance to run after possibly setting the
-          // height above.
-          setTimeout(function() {
-            element.style.height = '0px';
-          }, 0);
-        }, 0);
-        expando.className = 'expando closed';
-      } else {
-        element.style.height = element.expandedHeight;
-        expando.className = 'expando open';
-      }
-    }
-  }
-
-  /**
-   * Initializes the promo_vc_list div to look like a foreign session
-   * with a desktop.
-   */
-  function createPromoVirtualComputers() {
-    var list = findList('promo_vc');
-    list.innerHTML = '';
-
-    // Set up the container and the "virtual computer" session header.
-    var sessionEl = createDiv();
-    list.appendChild(sessionEl);
-    var sessionHeader = createDiv('session-header');
-    sessionEl.appendChild(sessionHeader);
-
-    // Set up the session children container and the promo as a child.
-    var sessionChildren = createDiv('session-children-container');
-    var promoMessage = createDiv('promo-message');
-    promoMessage.id = 'promo_message_on_open_tabs';
-    sessionChildren.appendChild(promoMessage);
-    sessionEl.appendChild(sessionChildren);
-
-    // Add support for expanding and collapsing the children.
-    var expando = createDiv();
-    var expandoFunction = createExpandoFunction(expando, sessionChildren);
-
-    // Fill-in the contents of the "virtual computer" session header.
-    var headerList = [{
-      'title': promoInjectedComputerTitleText,
-      'titleId': 'promo_vc_title',
-      'userVisibleTimestamp': promoInjectedComputerLastSyncedText,
-      'userVisibleTimestampId': 'promo_vc_lastsync',
-      'iconStyle': 'laptop'
-    }];
-
-    populateData(sessionHeader, SectionType.PROMO_VC_SESSION_HEADER, headerList,
-        makeForeignSessionListEntry, expandoFunction);
-    sessionHeader.appendChild(expando);
-  }
-
-  /**
-   * Called externally when updated synced sessions data is available.
-   *
-   * @param {Object} data The snapshot data
-   */
-  function setForeignSessions(data, tabSyncEnabled) {
-    var list = findList('open_tabs');
-    list.innerHTML = '';
-
-    currentSessions = data;
-    updateSyncEmptyState();
-
-    // Sort the windows within each client such that more recently
-    // modified windows appear first.
-    data.forEach(function(client) {
-      if (client.windows != null) {
-        client.windows.sort(function(a, b) {
-          if (b.timestamp == null) {
-            return -1;
-          } else if (a.timestamp == null) {
-            return 1;
-          } else {
-            return b.timestamp - a.timestamp;
-          }
-        });
-      }
-    });
-
-    // Sort so more recently modified clients appear first.
-    data.sort(function(aClient, bClient) {
-      var aWindows = aClient.windows;
-      var bWindows = bClient.windows;
-      if (bWindows == null || bWindows.length == 0 ||
-          bWindows[0].timestamp == null) {
-        return -1;
-      } else if (aWindows == null || aWindows.length == 0 ||
-          aWindows[0].timestamp == null) {
-        return 1;
-      } else {
-        return bWindows[0].timestamp - aWindows[0].timestamp;
-      }
-    });
-
-    data.forEach(function(client, clientNum) {
-
-      var windows = client.windows;
-      if (windows == null || windows.length == 0)
-        return;
-
-      // Set up the container for the session header
-      var sessionEl = createElement('div');
-      list.appendChild(sessionEl);
-      var sessionHeader = createDiv('session-header');
-      sessionEl.appendChild(sessionHeader);
-
-      // Set up the container for the session children
-      var sessionChildren = createDiv('session-children-container');
-      sessionEl.appendChild(sessionChildren);
-
-      var clientName = 'Client ' + clientNum;
-      if (client.name)
-        clientName = client.name;
-
-      var iconStyle;
-      var deviceType = client.deviceType;
-      if (deviceType == 'win' ||
-          deviceType == 'macosx' ||
-          deviceType == 'linux' ||
-          deviceType == 'chromeos' ||
-          deviceType == 'other') {
-        iconStyle = 'laptop';
-      } else if (deviceType == 'phone') {
-        iconStyle = 'phone';
-      } else if (deviceType == 'tablet') {
-        iconStyle = 'tablet';
-      } else {
-        console.error('Unknown sync device type found: ', deviceType);
-        iconStyle = 'laptop';
-      }
-      var headerList = [{
-        'title': clientName,
-        'userVisibleTimestamp': windows[0].userVisibleTimestamp,
-        'iconStyle': iconStyle,
-        'sessionTag': client.tag,
-      }];
-
-      var expando = createDiv();
-      var expandoFunction = createExpandoFunction(expando, sessionChildren);
-      populateData(sessionHeader, SectionType.FOREIGN_SESSION_HEADER,
-          headerList, makeForeignSessionListEntry, expandoFunction);
-      sessionHeader.appendChild(expando);
-
-      // Populate the session children container
-      var openTabsList = new Array();
-      for (var winNum = 0; winNum < windows.length; winNum++) {
-        win = windows[winNum];
-        var tabs = win.tabs;
-        for (var tabNum = 0; tabNum < tabs.length; tabNum++) {
-          var tab = tabs[tabNum];
-          // If this is the last tab in the window and there are more windows,
-          // use a section divider.
-          var needSectionDivider =
-              (tabNum + 1 == tabs.length) && (winNum + 1 < windows.length);
-          tab.icon = tab.icon || 'chrome://favicon/size/16@1x/' + tab.url;
-
-          openTabsList.push({
-            timestamp: tab.timestamp,
-            title: tab.title,
-            url: tab.url,
-            sessionTag: client.tag,
-            winNum: winNum,
-            sessionId: tab.sessionId,
-            icon: tab.icon,
-            iconSize: 16,
-            divider: needSectionDivider ? 'section' : 'standard',
-          });
-        }
-      }
-      var tabCallback = function(item, evt) {
-        var buttonIndex = 0;
-        var altKeyPressed = false;
-        var ctrlKeyPressed = false;
-        var metaKeyPressed = false;
-        var shiftKeyPressed = false;
-        if (evt instanceof MouseEvent) {
-          buttonIndex = evt.button;
-          altKeyPressed = evt.altKey;
-          ctrlKeyPressed = evt.ctrlKey;
-          metaKeyPressed = evt.metaKey;
-          shiftKeyPressed = evt.shiftKey;
-        }
-        chrome.send('openedForeignSession');
-        chrome.send('openForeignSession', [String(item.sessionTag),
-            String(item.winNum), String(item.sessionId), buttonIndex,
-            altKeyPressed, ctrlKeyPressed, metaKeyPressed, shiftKeyPressed]);
-      };
-      populateData(sessionChildren, SectionType.FOREIGN_SESSION, openTabsList,
-          makeListEntryItem, tabCallback);
-    });
-  }
-
-  /**
-   * Updates the dominant favicon color for a given index.
-   *
-   * @param {number} index The index of the favicon whose dominant color is
-   *     being specified.
-   * @param {string} color The string encoded color.
-   */
-  function setFaviconDominantColor(index, color) {
-    var colorstrips = document.getElementsByClassName('colorstrip-' + index);
-    for (var i = 0; i < colorstrips.length; i++)
-      colorstrips[i].style.background = color;
-
-    var id = 'fold_' + index;
-    var fold = $(id);
-    if (!fold)
-      return;
-    var zoom = window.getComputedStyle(fold).zoom;
-    var scale = 1 / window.getComputedStyle(fold).zoom;
-
-    // The width/height of the canvas.  Set to 24 so it looks good across all
-    // resolutions.
-    var cw = 24;
-    var ch = 24;
-
-    // Get the fold canvas and create a path for the fold shape
-    var ctx = document.getCSSCanvasContext(
-        '2d', 'fold_' + index, cw * scale, ch * scale);
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(0, ch * 0.75 * scale);
-    ctx.quadraticCurveTo(
-        0, ch * scale,
-        cw * .25 * scale, ch * scale);
-    ctx.lineTo(cw * scale, ch * scale);
-    ctx.closePath();
-
-    // Create a gradient for the fold and fill it
-    var gradient = ctx.createLinearGradient(cw * scale, 0, 0, ch * scale);
-    if (color.indexOf('#') == 0) {
-      var r = parseInt(color.substring(1, 3), 16);
-      var g = parseInt(color.substring(3, 5), 16);
-      var b = parseInt(color.substring(5, 7), 16);
-      gradient.addColorStop(0, 'rgba(' + r + ', ' + g + ', ' + b + ', 0.6)');
-    } else {
-      // assume the color is in the 'rgb(#, #, #)' format
-      var rgbBase = color.substring(4, color.length - 1);
-      gradient.addColorStop(0, 'rgba(' + rgbBase + ', 0.6)');
-    }
-    gradient.addColorStop(1, color);
-    ctx.fillStyle = gradient;
-    ctx.fill();
-
-    // Stroke the fold
-    ctx.lineWidth = Math.floor(scale);
-    ctx.strokeStyle = color;
-    ctx.stroke();
-    ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
-    ctx.stroke();
-
-  }
-
-  /**
-   * Finds the list element corresponding to the given name.
-   * @param {string} name The name prefix of the DOM element (<prefix>_list).
-   * @return {Element} The list element corresponding with the name.
-   */
-  function findList(name) {
-    return $(name + '_list');
-  }
-
-  /**
-   * Render the given data into the given list, and hide or show the entire
-   * container based on whether there are any elements.  The decorator function
-   * is used to create the element to be inserted based on the given data
-   * object.
-   *
-   * @param {holder} The dom element that the generated list items will be put
-   *     into.
-   * @param {SectionType} section The section that data is for.
-   * @param {Object} data The data to be populated.
-   * @param {function(Object, boolean)} decorator The function that will
-   *     handle decorating each item in the data.
-   * @param {function(Object, Object)} opt_clickCallback The function that is
-   *     called when the item is clicked.
-   */
-  function populateData(holder, section, data, decorator,
-      opt_clickCallback) {
-    // Empty other items in the list, if present.
-    holder.innerHTML = '';
-    var fragment = document.createDocumentFragment();
-    if (!data || data.length == 0) {
-      fragment.innerHTML = '';
-    } else {
-      data.forEach(function(item) {
-        var el = decorator(item, opt_clickCallback);
-        el.setAttribute(SECTION_KEY, section);
-        el.id = section + fragment.childNodes.length;
-        fragment.appendChild(el);
-      });
-    }
-    holder.appendChild(fragment);
-    if (holder.classList.contains(GRID_CSS_CLASS))
-      centerGrid(holder);
-    centerEmptySections(holder);
-  }
-
-  /**
-   * Given an element containing a list of child nodes arranged in
-   * a grid, this will center the grid in the window based on the
-   * remaining space.
-   * @param {Element} el Container holding the grid cell items.
-   */
-  function centerGrid(el) {
-    var childEl = el.firstChild;
-    if (!childEl)
-      return;
-
-    // Find the element to actually set the margins on.
-    var toCenter = el;
-    var curEl = toCenter;
-    while (curEl && curEl.classList) {
-      if (curEl.classList.contains(GRID_CENTER_CSS_CLASS)) {
-        toCenter = curEl;
-        break;
-      }
-      curEl = curEl.parentNode;
-    }
-    var setItemMargins = el.classList.contains(GRID_SET_ITEM_MARGINS);
-    var itemWidth = getItemWidth(childEl, setItemMargins);
-    var windowWidth = document.documentElement.offsetWidth;
-    if (itemWidth >= windowWidth) {
-      toCenter.style.paddingLeft = '0';
-      toCenter.style.paddingRight = '0';
-    } else {
-      var numColumns = el.getAttribute(GRID_COLUMNS);
-      if (numColumns) {
-        numColumns = parseInt(numColumns);
-      } else {
-        numColumns = Math.floor(windowWidth / itemWidth);
-      }
-
-      if (setItemMargins) {
-        // In this case, try to size each item to fill as much space as
-        // possible.
-        var gutterSize =
-            (windowWidth - itemWidth * numColumns) / (numColumns + 1);
-        var childLeftMargin = Math.round(gutterSize / 2);
-        var childRightMargin = Math.floor(gutterSize - childLeftMargin);
-        var children = el.childNodes;
-        for (var i = 0; i < children.length; i++) {
-          children[i].style.marginLeft = childLeftMargin + 'px';
-          children[i].style.marginRight = childRightMargin + 'px';
-        }
-        itemWidth += childLeftMargin + childRightMargin;
-      }
-
-      var remainder = windowWidth - itemWidth * numColumns;
-      var leftPadding = Math.round(remainder / 2);
-      var rightPadding = Math.floor(remainder - leftPadding);
-      toCenter.style.paddingLeft = leftPadding + 'px';
-      toCenter.style.paddingRight = rightPadding + 'px';
-
-      if (toCenter.classList.contains(GRID_SET_TOP_MARGIN_CLASS)) {
-        var childStyle = window.getComputedStyle(childEl);
-        var childLeftPadding = parseInt(
-            childStyle.getPropertyValue('padding-left'));
-        toCenter.style.paddingTop =
-            (childLeftMargin + childLeftPadding + leftPadding) + 'px';
-      }
-    }
-  }
-
-  /**
-   * Finds and centers all child grid elements for a given node (the grids
-   * do not need to be direct descendants and can reside anywhere in the node
-   * hierarchy).
-   * @param {Element} el The node containing the grid child nodes.
-   */
-  function centerChildGrids(el) {
-    var grids = el.getElementsByClassName(GRID_CSS_CLASS);
-    for (var i = 0; i < grids.length; i++)
-      centerGrid(grids[i]);
-  }
-
-  /**
-   * Finds and vertically centers all 'empty' elements for a given node (the
-   * 'empty' elements do not need to be direct descendants and can reside
-   * anywhere in the node hierarchy).
-   * @param {Element} el The node containing the 'empty' child nodes.
-   */
-  function centerEmptySections(el) {
-    if (el.classList &&
-        el.classList.contains(CENTER_EMPTY_CONTAINER_CSS_CLASS)) {
-      centerEmptySection(el);
-    }
-    var empties = el.getElementsByClassName(CENTER_EMPTY_CONTAINER_CSS_CLASS);
-    for (var i = 0; i < empties.length; i++) {
-      centerEmptySection(empties[i]);
-    }
-  }
-
-  /**
-   * Set the top of the given element to the top of the parent and set the
-   * height to (bottom of document - top).
-   *
-   * @param {Element} el Container holding the centered content.
-   */
-  function centerEmptySection(el) {
-    var parent = el.parentNode;
-    var top = parent.offsetTop;
-    var bottom = (
-        document.documentElement.offsetHeight - getButtonBarPadding());
-    el.style.height = (bottom - top) + 'px';
-    el.style.top = top + 'px';
-  }
-
-  /**
-   * Finds the index of the panel specified by its prefix.
-   * @param {string} The string prefix for the panel.
-   * @return {number} The index of the panel.
-   */
-  function getPaneIndex(panePrefix) {
-    var pane = $(panePrefix + '_container');
-
-    if (pane != null) {
-      var index = panes.indexOf(pane);
-
-      if (index >= 0)
-        return index;
-    }
-    return 0;
-  }
-
-  /**
-   * Finds the index of the panel specified by location hash.
-   * @return {number} The index of the panel.
-   */
-  function getPaneIndexFromHash() {
-    var paneIndex;
-    if (window.location.hash == '#bookmarks') {
-      paneIndex = getPaneIndex('bookmarks');
-    } else if (window.location.hash == '#bookmark_shortcut') {
-      paneIndex = getPaneIndex('bookmarks');
-    } else if (window.location.hash == '#most_visited') {
-      paneIndex = getPaneIndex('most_visited');
-    } else if (window.location.hash == '#open_tabs') {
-      paneIndex = getPaneIndex('open_tabs');
-    } else if (window.location.hash == '#incognito') {
-      paneIndex = getPaneIndex('incognito');
-    } else {
-      // Couldn't find a good section
-      paneIndex = -1;
-    }
-    return paneIndex;
-  }
-
-  /**
-   * Selects a pane from the top level list (Most Visited, Bookmarks, etc...).
-   * @param {number} paneIndex The index of the pane to be selected.
-   * @return {boolean} Whether the selected pane has changed.
-   */
-  function scrollToPane(paneIndex) {
-    var pane = panes[paneIndex];
-
-    if (pane == currentPane)
-      return false;
-
-    var newHash = '#' + sectionPrefixes[paneIndex];
-    // If updated hash matches the current one in the URL, we need to call
-    // updatePaneOnHash directly as updating the hash to the same value will
-    // not trigger the 'hashchange' event.
-    if (bookmarkShortcutMode || newHash == document.location.hash)
-      updatePaneOnHash();
-    computeDynamicLayout();
-    promoUpdateImpressions(sectionPrefixes[paneIndex]);
-    return true;
-  }
-
-  /**
-   * Updates the pane based on the current hash.
-   */
-  function updatePaneOnHash() {
-    var paneIndex = getPaneIndexFromHash();
-    var pane = panes[paneIndex];
-
-    if (currentPane)
-      currentPane.classList.remove('selected');
-    pane.classList.add('selected');
-    currentPane = pane;
-    currentPaneIndex = paneIndex;
-
-    setScrollTopForDocument(document, 0);
-
-    var panelPrefix = sectionPrefixes[paneIndex];
-    var title = templateData[panelPrefix + '_document_title'];
-    if (!title)
-      title = templateData['title'];
-    document.title = title;
-
-    sendNTPTitleLoadedNotification();
-
-    // TODO (dtrainor): Could potentially add logic to reset the bookmark state
-    // if they are moving to that pane.  This logic was in there before, but
-    // was removed due to the fact that we have to go to this pane as part of
-    // the history navigation.
-  }
-
-  /**
-   * Adds a top level section to the NTP.
-   * @param {string} panelPrefix The prefix of the element IDs corresponding
-   *     to the container of the content.
-   * @param {boolean=} opt_canBeDefault Whether this section can be marked as
-   *     the default starting point for subsequent instances of the NTP.  The
-   *     default value for this is true.
-   */
-  function addMainSection(panelPrefix) {
-    var paneEl = $(panelPrefix + '_container');
-    var paneIndex = panes.push(paneEl) - 1;
-    sectionPrefixes.push(panelPrefix);
-  }
-
-  /**
-   * Handles the dynamic layout of the components on the new tab page.  Only
-   * layouts that require calculation based on the screen size should go in
-   * this function as it will be called during all resize changes
-   * (orientation, keyword being displayed).
-   */
-  function computeDynamicLayout() {
-    // Update the scrolling titles to ensure they are not in a now invalid
-    // scroll position.
-    var titleScrollers =
-        document.getElementsByClassName('section-title-wrapper');
-    for (var i = 0, len = titleScrollers.length; i < len; i++) {
-      var titleEl =
-          titleScrollers[i].getElementsByClassName('section-title')[0];
-      handleTitleScroll(
-          titleScrollers[i],
-          titleEl.offsetLeft);
-    }
-
-    updateMostVisitedStyle();
-    updateMostVisitedHeight();
-  }
-
-  /**
-   * The centering of the 'recently closed' section is different depending on
-   * the orientation of the device.  In landscape, it should be left-aligned
-   * with the 'most used' section.  In portrait, it should be centered in the
-   * screen.
-   */
-  function updateMostVisitedStyle() {
-    if (isTablet()) {
-      updateMostVisitedStyleTablet();
-    } else {
-      updateMostVisitedStylePhone();
-    }
-  }
-
-  /**
-   * Updates the style of the most visited pane for the phone.
-   */
-  function updateMostVisitedStylePhone() {
-    var mostVisitedList = $('most_visited_list');
-    var childEl = mostVisitedList.firstChild;
-    if (!childEl)
-      return;
-
-    // 'natural' height and width of the thumbnail
-    var thumbHeight = 72;
-    var thumbWidth = 108;
-    var labelHeight = 25;
-    var labelWidth = thumbWidth + 20;
-    var labelLeft = (thumbWidth - labelWidth) / 2;
-    var itemHeight = thumbHeight + labelHeight;
-
-    // default vertical margin between items
-    var itemMarginTop = 0;
-    var itemMarginBottom = 0;
-    var itemMarginLeft = 20;
-    var itemMarginRight = 20;
-
-    var listHeight = 0;
-
-    var screenHeight =
-        document.documentElement.offsetHeight -
-        getButtonBarPadding();
-
-    if (isPortrait()) {
-      mostVisitedList.setAttribute(GRID_COLUMNS, '2');
-      listHeight = screenHeight * .85;
-      // Ensure that listHeight is not too small and not too big.
-      listHeight = Math.max(listHeight, (itemHeight * 3) + 20);
-      listHeight = Math.min(listHeight, 420);
-      // Size for 3 rows (4 gutters)
-      itemMarginTop = (listHeight - (itemHeight * 3)) / 4;
-    } else {
-      mostVisitedList.setAttribute(GRID_COLUMNS, '3');
-      listHeight = screenHeight;
-
-      // If the screen height is less than targetHeight, scale the size of the
-      // thumbnails such that the margin between the thumbnails remains
-      // constant.
-      var targetHeight = 220;
-      if (screenHeight < targetHeight) {
-        var targetRemainder = targetHeight - 2 * (thumbHeight + labelHeight);
-        var scale = (screenHeight - 2 * labelHeight -
-            targetRemainder) / (2 * thumbHeight);
-        // update values based on scale
-        thumbWidth = Math.round(thumbWidth * scale);
-        thumbHeight = Math.round(thumbHeight * scale);
-        labelWidth = thumbWidth + 20;
-        itemHeight = thumbHeight + labelHeight;
-      }
-
-      // scale the vertical margin such that the items fit perfectly on the
-      // screen
-      var remainder = screenHeight - (2 * itemHeight);
-      var margin = (remainder / 2);
-      margin = margin > 24 ? 24 : margin;
-      itemMarginTop = Math.round(margin / 2);
-      itemMarginBottom = Math.round(margin - itemMarginTop);
-    }
-
-    mostVisitedList.style.minHeight = listHeight + 'px';
-
-    modifyCssRule('body[device="phone"] .thumbnail-cell',
-        'height', itemHeight + 'px');
-    modifyCssRule('body[device="phone"] #most_visited_list .thumbnail',
-        'height', thumbHeight + 'px');
-    modifyCssRule('body[device="phone"] #most_visited_list .thumbnail',
-        'width', thumbWidth + 'px');
-    modifyCssRule(
-        'body[device="phone"] #most_visited_list .thumbnail-container',
-        'height', thumbHeight + 'px');
-    modifyCssRule(
-        'body[device="phone"] #most_visited_list .thumbnail-container',
-        'width', thumbWidth + 'px');
-    modifyCssRule('body[device="phone"] #most_visited_list .title',
-        'width', labelWidth + 'px');
-    modifyCssRule('body[device="phone"] #most_visited_list .title',
-        'left', labelLeft + 'px');
-    modifyCssRule('body[device="phone"] #most_visited_list .inner-border',
-        'height', thumbHeight - 2 + 'px');
-    modifyCssRule('body[device="phone"] #most_visited_list .inner-border',
-        'width', thumbWidth - 2 + 'px');
-
-    modifyCssRule('body[device="phone"] .thumbnail-cell',
-        'margin-left', itemMarginLeft + 'px');
-    modifyCssRule('body[device="phone"] .thumbnail-cell',
-        'margin-right', itemMarginRight + 'px');
-    modifyCssRule('body[device="phone"] .thumbnail-cell',
-        'margin-top', itemMarginTop + 'px');
-    modifyCssRule('body[device="phone"] .thumbnail-cell',
-        'margin-bottom', itemMarginBottom + 'px');
-
-    centerChildGrids($('most_visited_container'));
-  }
-
-  /**
-   * Updates the style of the most visited pane for the tablet.
-   */
-  function updateMostVisitedStyleTablet() {
-    function setCenterIconGrid(el, set) {
-      if (set) {
-        el.classList.add(GRID_CENTER_CSS_CLASS);
-      } else {
-        el.classList.remove(GRID_CENTER_CSS_CLASS);
-        el.style.paddingLeft = '0px';
-        el.style.paddingRight = '0px';
-      }
-    }
-    var isPortrait = document.documentElement.offsetWidth <
-        document.documentElement.offsetHeight;
-    var mostVisitedContainer = $('most_visited_container');
-    var mostVisitedList = $('most_visited_list');
-    var recentlyClosedContainer = $('recently_closed_container');
-    var recentlyClosedList = $('recently_closed_list');
-
-    setCenterIconGrid(mostVisitedContainer, !isPortrait);
-    setCenterIconGrid(mostVisitedList, isPortrait);
-    setCenterIconGrid(recentlyClosedContainer, isPortrait);
-    if (isPortrait) {
-      recentlyClosedList.classList.add(GRID_CSS_CLASS);
-    } else {
-      recentlyClosedList.classList.remove(GRID_CSS_CLASS);
-    }
-
-    // Make the recently closed list visually left align with the most recently
-    // closed items in landscape mode.  It will be reset by the grid centering
-    // in portrait mode.
-    if (!isPortrait)
-      recentlyClosedContainer.style.paddingLeft = '14px';
-  }
-
-  /**
-   * This handles updating some of the spacing to make the 'recently closed'
-   * section appear at the bottom of the page.
-   */
-  function updateMostVisitedHeight() {
-    if (!isTablet())
-      return;
-    // subtract away height of button bar
-    var windowHeight = document.documentElement.offsetHeight;
-    var padding = parseInt(window.getComputedStyle(document.body)
-        .getPropertyValue('padding-bottom'));
-    $('most_visited_container').style.minHeight =
-        (windowHeight - padding) + 'px';
-  }
-
-  /**
-   * Called by the native toolbar to open a different section. This handles
-   * updating the hash url which in turns makes a history entry.
-   *
-   * @param {string} section The section to switch to.
-   */
-  var openSection = function(section) {
-    if (!scrollToPane(getPaneIndex(section)))
-      return;
-    // Update the url so the native toolbar knows the pane has changed and
-    // to create a history entry.
-    document.location.hash = '#' + section;
-  }
-
-  /////////////////////////////////////////////////////////////////////////////
-  // NTP Scoped Window Event Listeners.
-  /////////////////////////////////////////////////////////////////////////////
-
-  /**
-   * Handles history on pop state changes.
-   */
-  function onPopStateHandler(event) {
-    if (event.state != null) {
-      var evtState = event.state;
-      // Navigate back to the previously selected panel and ensure the same
-      // bookmarks are loaded.
-      var selectedPaneIndex = evtState.selectedPaneIndex == undefined ?
-          0 : evtState.selectedPaneIndex;
-
-      scrollToPane(selectedPaneIndex);
-      setCurrentBookmarkFolderData(evtState.folderId);
-    } else {
-      // When loading the page, replace the default state with one that
-      // specifies the default panel loaded via localStorage as well as the
-      // default bookmark folder.
-      history.replaceState(
-          {folderId: bookmarkFolderId, selectedPaneIndex: currentPaneIndex},
-          null, null);
-    }
-  }
-
-  /**
-   * Handles window resize events.
-   */
-  function windowResizeHandler() {
-    // Scroll to the current pane to refactor all the margins and offset.
-    scrollToPane(currentPaneIndex);
-    computeDynamicLayout();
-    // Center the padding for each of the grid views.
-    centerChildGrids(document);
-    centerEmptySections(document);
-  }
-
-  /*
-   * We implement the context menu ourselves.
-   */
-  function contextMenuHandler(evt) {
-    var section = SectionType.UNKNOWN;
-    contextMenuUrl = null;
-    contextMenuItem = null;
-    // The node with a menu have been tagged with their section and url.
-    // Let's find these tags.
-    var node = evt.target;
-    while (node) {
-      if (section == SectionType.UNKNOWN &&
-          node.getAttribute &&
-          node.getAttribute(SECTION_KEY) != null) {
-        section = node.getAttribute(SECTION_KEY);
-        if (contextMenuUrl != null)
-          break;
-      }
-      if (contextMenuUrl == null) {
-        contextMenuUrl = node.getAttribute(CONTEXT_MENU_URL_KEY);
-        contextMenuItem = node.contextMenuItem;
-        if (section != SectionType.UNKNOWN)
-          break;
-      }
-      node = node.parentNode;
-    }
-
-    var menuOptions;
-
-    if (section == SectionType.BOOKMARKS &&
-        !contextMenuItem.folder && !isIncognito) {
-      menuOptions = [
-        [
-          ContextMenuItemIds.BOOKMARK_OPEN_IN_NEW_TAB,
-          templateData.elementopeninnewtab
-        ]
-      ];
-      if (isIncognitoEnabled) {
-        menuOptions.push([
-          ContextMenuItemIds.BOOKMARK_OPEN_IN_INCOGNITO_TAB,
-          templateData.elementopeninincognitotab
-        ]);
-      }
-      if (contextMenuItem.editable) {
-        menuOptions.push(
-            [ContextMenuItemIds.BOOKMARK_EDIT, templateData.bookmarkedit],
-            [ContextMenuItemIds.BOOKMARK_DELETE, templateData.bookmarkdelete]);
-      }
-    } else if (section == SectionType.BOOKMARKS &&
-               !contextMenuItem.folder &&
-               isIncognito) {
-      menuOptions = [
-        [
-          ContextMenuItemIds.BOOKMARK_OPEN_IN_INCOGNITO_TAB,
-          templateData.elementopeninincognitotab
-        ]
-      ];
-    } else if (section == SectionType.BOOKMARKS &&
-               contextMenuItem.folder &&
-               contextMenuItem.editable &&
-               !isIncognito) {
-      menuOptions = [
-        [ContextMenuItemIds.BOOKMARK_EDIT, templateData.editfolder],
-        [ContextMenuItemIds.BOOKMARK_DELETE, templateData.deletefolder]
-      ];
-    } else if (section == SectionType.MOST_VISITED) {
-      menuOptions = [
-        [
-          ContextMenuItemIds.MOST_VISITED_OPEN_IN_NEW_TAB,
-          templateData.elementopeninnewtab
-        ],
-      ];
-      if (isIncognitoEnabled) {
-        menuOptions.push([
-          ContextMenuItemIds.MOST_VISITED_OPEN_IN_INCOGNITO_TAB,
-          templateData.elementopeninincognitotab
-        ]);
-      }
-      menuOptions.push(
-        [ContextMenuItemIds.MOST_VISITED_REMOVE, templateData.elementremove]);
-    } else if (section == SectionType.RECENTLY_CLOSED) {
-      menuOptions = [
-        [
-          ContextMenuItemIds.RECENTLY_CLOSED_OPEN_IN_NEW_TAB,
-          templateData.elementopeninnewtab
-        ],
-      ];
-      if (isIncognitoEnabled) {
-        menuOptions.push([
-          ContextMenuItemIds.RECENTLY_CLOSED_OPEN_IN_INCOGNITO_TAB,
-          templateData.elementopeninincognitotab
-        ]);
-      }
-      menuOptions.push(
-        [ContextMenuItemIds.RECENTLY_CLOSED_REMOVE, templateData.removeall]);
-    } else if (section == SectionType.FOREIGN_SESSION_HEADER) {
-      menuOptions = [
-        [
-          ContextMenuItemIds.FOREIGN_SESSIONS_REMOVE,
-          templateData.elementremove
-        ]
-      ];
-    } else if (section == SectionType.PROMO_VC_SESSION_HEADER) {
-      menuOptions = [
-        [
-          ContextMenuItemIds.PROMO_VC_SESSION_REMOVE,
-          templateData.elementremove
-        ]
-      ];
-    }
-
-    if (menuOptions)
-      chrome.send('showContextMenu', menuOptions);
-
-    return false;
-  }
-
-  // Return an object with all the exports
-  return {
-    bookmarks: bookmarks,
-    bookmarkChanged: bookmarkChanged,
-    clearPromotions: clearPromotions,
-    init: init,
-    setIncognitoEnabled: setIncognitoEnabled,
-    onCustomMenuSelected: onCustomMenuSelected,
-    openSection: openSection,
-    setFaviconDominantColor: setFaviconDominantColor,
-    setForeignSessions: setForeignSessions,
-    setIncognitoMode: setIncognitoMode,
-    setMostVisitedPages: setMostVisitedPages,
-    setPromotions: setPromotions,
-    setRecentlyClosedTabs: setRecentlyClosedTabs,
-    setSyncEnabled: setSyncEnabled,
-    snapshots: snapshots
-  };
-});
-
-/////////////////////////////////////////////////////////////////////////////
-//Utility Functions.
-/////////////////////////////////////////////////////////////////////////////
-
-/**
- * A best effort approach for checking simple data object equality.
- * @param {?} val1 The first value to check equality for.
- * @param {?} val2 The second value to check equality for.
- * @return {boolean} Whether the two objects are equal(ish).
- */
-function equals(val1, val2) {
-  if (typeof val1 != 'object' || typeof val2 != 'object')
-    return val1 === val2;
-
-  // Object and array equality checks.
-  var keyCountVal1 = 0;
-  for (var key in val1) {
-    if (!(key in val2) || !equals(val1[key], val2[key]))
-      return false;
-    keyCountVal1++;
-  }
-  var keyCountVal2 = 0;
-  for (var key in val2)
-    keyCountVal2++;
-  if (keyCountVal1 != keyCountVal2)
-    return false;
-  return true;
-}
-
-/**
- * Alias for document.getElementById.
- * @param {string} id The ID of the element to find.
- * @return {HTMLElement} The found element or null if not found.
- */
-function $(id) {
-  return document.getElementById(id);
-}
-
-/**
- * @return {boolean} Whether the device is currently in portrait mode.
- */
-function isPortrait() {
-  return document.documentElement.offsetWidth <
-      document.documentElement.offsetHeight;
-}
-
-/**
- * Determine if the page should be formatted for tablets.
- * @return {boolean} true if the device is a tablet, false otherwise.
- */
-function isTablet() {
-  return document.body.getAttribute('device') == 'tablet';
-}
-
-/**
- * Determine if the page should be formatted for phones.
- * @return {boolean} true if the device is a phone, false otherwise.
- */
-function isPhone() {
-  return document.body.getAttribute('device') == 'phone';
-}
-
-/**
- * Get the page X coordinate of a touch event.
- * @param {TouchEvent} evt The touch event triggered by the browser.
- * @return {number} The page X coordinate of the touch event.
- */
-function getTouchEventX(evt) {
-  return (evt.touches[0] || e.changedTouches[0]).pageX;
-}
-
-/**
- * Get the page Y coordinate of a touch event.
- * @param {TouchEvent} evt The touch event triggered by the browser.
- * @return {number} The page Y coordinate of the touch event.
- */
-function getTouchEventY(evt) {
-  return (evt.touches[0] || e.changedTouches[0]).pageY;
-}
-
-/**
- * @param {Element} el The item to get the width of.
- * @param {boolean} excludeMargin If true, exclude the width of the margin.
- * @return {number} The total width of a given item.
- */
-function getItemWidth(el, excludeMargin) {
-  var elStyle = window.getComputedStyle(el);
-  var width = el.offsetWidth;
-  if (!width || width == 0) {
-    width = parseInt(elStyle.getPropertyValue('width'));
-    width +=
-        parseInt(elStyle.getPropertyValue('border-left-width')) +
-        parseInt(elStyle.getPropertyValue('border-right-width'));
-    width +=
-        parseInt(elStyle.getPropertyValue('padding-left')) +
-        parseInt(elStyle.getPropertyValue('padding-right'));
-  }
-  if (!excludeMargin) {
-    width += parseInt(elStyle.getPropertyValue('margin-left')) +
-        parseInt(elStyle.getPropertyValue('margin-right'));
-  }
-  return width;
-}
-
-/**
- * @return {number} The padding height of the body due to the button bar
- */
-function getButtonBarPadding() {
-  var body = document.getElementsByTagName('body')[0];
-  var style = window.getComputedStyle(body);
-  return parseInt(style.getPropertyValue('padding-bottom'));
-}
-
-/**
- * Modify a css rule
- * @param {string} selector The selector for the rule (passed to findCssRule())
- * @param {string} property The property to update
- * @param {string} value The value to update the property to
- * @return {boolean} true if the rule was updated, false otherwise.
- */
-function modifyCssRule(selector, property, value) {
-  var rule = findCssRule(selector);
-  if (!rule)
-    return false;
-  rule.style[property] = value;
-  return true;
-}
-
-/**
- * Find a particular CSS rule.  The stylesheets attached to the document
- * are traversed in reverse order.  The rules in each stylesheet are also
- * traversed in reverse order.  The first rule found to match the selector
- * is returned.
- * @param {string} selector The selector for the rule.
- * @return {Object} The rule if one was found, null otherwise
- */
-function findCssRule(selector) {
-  var styleSheets = document.styleSheets;
-  for (i = styleSheets.length - 1; i >= 0; i--) {
-    var styleSheet = styleSheets[i];
-    var rules = styleSheet.cssRules;
-    if (rules == null)
-      continue;
-    for (j = rules.length - 1; j >= 0; j--) {
-      if (rules[j].selectorText == selector)
-        return rules[j];
-    }
-  }
-}
-
-/////////////////////////////////////////////////////////////////////////////
-// NTP Entry point.
-/////////////////////////////////////////////////////////////////////////////
-
-/*
- * Handles initializing the UI when the page has finished loading.
- */
-window.addEventListener('DOMContentLoaded', function(evt) {
-  ntp.init();
-  $('content-area').style.display = 'block';
-});