Disable view source for Developer Tools.

[chromium-blink-merge.git] / 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]);
      }
      if (contextMenuUrl.search('chrome://') == -1 &&
          contextMenuUrl.search('about://') == -1 &&
          document.body.getAttribute('shortcut_item_enabled') == 'true') {
        menuOptions.push([
          ContextMenuItemIds.BOOKMARK_SHORTCUT,
          templateData.bookmarkshortcut
        ]);
      }
    } 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';
});