browser/resources/new_new_tab.html

<!DOCTYPE html>
<html i18n-values="
  dir:textdirection;
  bookmarkbarattached:bookmarkbarattached;
  hasattribution:hasattribution;
  anim:anim;
  syncispresent:syncispresent;
  customlogo:customlogo"
  install-animation-enabled="true">
<head>
<meta charset="utf-8">
<title i18n-content="title"></title>
<script src="shared/js/util.js"></script>
<script>
// Logging info for benchmarking purposes.
var log = [];
function logEvent(name, shouldLogTime) {
  if (shouldLogTime) {
    chrome.send('logEventTime', [name]);
  }
  log.push([name, Date.now()]);
}
logEvent('Tab.NewTabScriptStart', true);

/**
 * Registers a callback function so that if the backend calls it too early it
 * will get delayed until DOMContentLoaded is fired.
 * @param {string} name The name of the global function that the backend calls.
 */
function registerCallback(name) {
  var f = function(var_args) {
    var args = Array.prototype.slice.call(arguments);
    // If we still have the temporary function we delay until the dom is ready.
    if (global[name] == f) {
      logEvent(name + ' is not yet ready. Waiting for DOMContentLoaded');
      document.addEventListener('DOMContentLoaded', function() {
        logEvent('Calling the new ' + name);
        global[name].apply(null, args);
      });
    }
  };
  global[name] = f;
}

chrome.send('getMostVisited');
chrome.send('getRecentlyClosedTabs');
chrome.send('getForeignSessions');
chrome.send('getApps');

registerCallback('mostVisitedPages');
registerCallback('recentlyClosedTabs');
registerCallback('syncMessageChanged');
registerCallback('getAppsCallback');
registerCallback('setShownSections');
registerCallback('foreignSessions');
registerCallback('bookmarkBarDetached');
registerCallback('bookmarkBarAttached');

</script>
<!-- template data placeholder -->
<link rel="stylesheet" href="new_new_tab.css">
<link rel="stylesheet" href="ntp/most_visited.css">
<link rel="stylesheet" href="ntp/apps.css">
<link rel="stylesheet" href="shared/css/menu.css">
<script>

/**
 * Bitmask for the different UI sections.
 * This matches the Section enum in ../webui/shown_sections_handler.h
 * @enum {number}
 */
var Section = {
  THUMB: 1 << 0,
  APPS: 1 << 6
};

// These are used to put sections into menu mode and are part of the
// |shownSections| bitmask, but are not sections themselves.
var MENU_THUMB = 1 << (0 + 16);
var MENU_RECENT = 1 << (2 + 16);
var MENU_APPS = 1 << (6 + 16);

// TODO(aa): This state is duplicated. We keep this variable up to date, but we
// also have the same information in the DOM. We can probably just have the DOM
// be the truth and translate to and from the bitmask when needed.
var shownSections = templateData['shown_sections'];

// Until themes can clear the cache, force-reload the theme stylesheet.
document.write('<link id="themecss" rel="stylesheet" ' +
               'href="chrome://theme/css/newtab.css?' +
               Date.now() + '">');

function useSmallGrid() {
  return window.innerWidth <= 940;
}

function isRtl() {
  return templateData['textdirection'] == 'rtl';
}

// Parse any name value pairs passed through the URL hash.
var hashParams = (function() {
  var result = {};
  if (location.hash.length) {
    location.hash.substr(1).split('&').forEach(function(pair) {
      pair = pair.split('=');
      if (pair.length != 2) {
        throw new Error('Unexpected hash value: ' + location.hash);
      }

      result[pair[0]] = pair[1];
    });
  }
  return result;
})();

// Reflect the mode param as an attribute so we can use CSS attribute selectors
// on it.
if ('mode' in hashParams) {
  document.documentElement.setAttribute('mode', hashParams['mode']);
}

</script>
</head>
<body class="loading"
      i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">

<div id="attribution" class="attribution nolayout">
  <div i18n-content="attributionintro"></div>
  <img id="attribution-img">
</div>

<div id="main">

  <div id="notification-container">
    <div id="notification">
      <div>&nbsp;</div>
      <div class="link"><div class="link-color" id="action-link"></div></div>
      <button id="notification-close"></button>
    </div>
  </div>

  <div id="login-container">
    <span id="login-username"></span>
  </div>

  <div class="maxiview" id="apps-maxiview">
    <div id="apps-promo">
      <p id="apps-promo-heading"></p>
      <a class="g-button-basic" id="apps-promo-link" href=""></a><br>
      <button id="apps-promo-hide"></button>
    </div>
    <div id="apps-content"></div>
  </div>
  <div class="maxiview" id="most-visited-maxiview"></div>

  <div class="sections">
    <!-- Start disabled. We only enable once we have installed default apps. -->
    <div id="apps" class="section disabled" section="APPS">
      <h2>
        <img class="disclosure" img src="ntp/ntp_disclosure_triangle.png">
        <div class="back"></div>
        <span i18n-content="apps"></span>
        <button class="section-close-button"></button>
      </h2>
      <div class="miniview"></div>
    </div>

    <div id="most-visited" class="section" section="THUMB">
      <h2>
        <img class="disclosure" src="ntp/ntp_disclosure_triangle.png">
        <div class="back"></div>
        <span i18n-content="mostvisited"></span>
        <button id="most-visited-settings" i18n-content="restorethumbnails">
        </button>
        <button class="section-close-button"></button>
      </h2>
      <div class="miniview"></div>
    </div>

    <!-- Start this section disabled because it might not have data, and looks
         silly without any. -->
    <div id="recently-closed" class="section collapsed disabled"
        section="RECENT" noexpand="true">
      <h2>
        <div class="back"></div>
        <span i18n-content="recentlyclosed"></span>
        <button class="section-close-button"></button>
      </h2>
      <div class="miniview"></div>
    </div>

    <!-- Start disabled until sync is enabled and foreign sessions are
         available. -->
    <div id="foreign-sessions" class="section collapsed disabled"
        section="SYNC">
      <h2>
        <div class="back"></div>
        <span i18n-content="foreignsessions"></span>
      </h2>
      <div class="miniview"></div>
    </div>

    <div id="sync-status" class="section disabled">
      <div>
        <h3></h3>
        <span></span>
      </div>
    </div>
  </div>

  <div id="closed-sections-bar">
    <!-- The default visibility of these buttons needs to be the opposite of the
         default visibility of the corresponding sections. -->
    <button id="apps-button"
            menu="#apps-menu">
      <span i18n-content="apps"></span>
      <img src="ntp/ntp_disclosure_triangle.png">
    </button>
    <button id="most-visited-button"
            menu="#most-visited-menu">
      <span i18n-content="mostvisited"></span>
      <img src="ntp/ntp_disclosure_triangle.png">
    </button>
    <button id="recently-closed-button"
            menu="#recently-closed-menu">
      <span i18n-content="recentlyclosed"></span>
      <img src="ntp/ntp_disclosure_triangle.png">
    </button>
  </div>
</div>  <!-- main -->

<div class="window-menu" id="window-tooltip"></div>

<command id="clear-all-blacklisted" i18n-values=".label:restorethumbnails">
<command id="apps-launch-command">
<command id="apps-options-command" i18n-values=".label:appoptions">
<command id="apps-uninstall-command" i18n-values=".label:appuninstall">
<command id="apps-create-shortcut-command"
    i18n-values=".label:appcreateshortcut">
<command id="apps-launch-type-pinned" i18n-values=".label:applaunchtypepinned"
    launch-type="0">
<command id="apps-launch-type-regular" i18n-values=".label:applaunchtyperegular"
    launch-type="1">
<command id="apps-launch-type-window"
    i18n-values=".label:applaunchtypewindow" launch-type="3">
<command id="apps-launch-type-fullscreen"
    i18n-values=".label:applaunchtypefullscreen" launch-type="2">

<!-- These are populated dynamically -->
<menu id="apps-menu"></menu>
<menu id="most-visited-menu"></menu>
<menu id="recently-closed-menu"></menu>

<menu id="app-context-menu">
  <button class="default" command="#apps-launch-command"></button>
  <hr>
  <button command="#apps-launch-type-regular" launch-type="1"></button>
  <button command="#apps-launch-type-pinned" launch-type="0"></button>
  <button id="apps-launch-type-window-menu-item"
      command="#apps-launch-type-window" launch-type="3"></button>
  <button command="#apps-launch-type-fullscreen" launch-type="2"></button>
  <hr>
  <button command="#apps-options-command"></button>
  <button command="#apps-uninstall-command"></button>
  <hr id="apps-create-shortcut-command-separator">
  <button id="apps-create-shortcut-command-menu-item"
      command="#apps-create-shortcut-command"></button>
</menu>

</body>

<script src="shared/js/i18n_template.js"></script>
<script>
i18nTemplate.process(document, templateData);
</script>
<script src="shared/js/local_strings.js"></script>
<script src="shared/js/parse_html_subset.js"></script>

<script src="shared/js/cr.js"></script>
<script src="shared/js/event_tracker.js"></script>
<script src="shared/js/cr/ui.js"></script>
<script src="shared/js/cr/ui/command.js"></script>
<script src="shared/js/cr/ui/menu_item.js"></script>
<script src="shared/js/cr/ui/menu.js"></script>
<script src="shared/js/cr/ui/position_util.js"></script>
<script src="shared/js/cr/ui/menu_button.js"></script>
<script src="shared/js/cr/ui/context_menu_button.js"></script>
<script src="shared/js/cr/ui/context_menu_handler.js"></script>

<script src="ntp/drag_drop_controller.js"></script>
<script src="ntp/most_visited.js"></script>
<script src="new_new_tab.js"></script>
<script src="ntp/apps.js"></script>

<script>
  cr.ui.decorate('menu', cr.ui.Menu);
  cr.ui.decorate('command', cr.ui.Command);
  cr.ui.decorate('button[menu]', cr.ui.MenuButton);

  if (cr.isChromeOS)
    $('closed-sections-bar').setAttribute('chromeos', true);

  initializeLogin();

  initializeSection('apps', MENU_APPS, Section.APPS);
  initializeSection('most-visited', MENU_THUMB, Section.THUMB);
  initializeSection('recently-closed', MENU_RECENT);

  updateSimpleSection('apps', Section.APPS);
  updateSimpleSection('most-visited', Section.THUMB);
  var appsInitiallyMenu = shownSections & MENU_APPS;
  var mostVisitedInitiallyMenu = shownSections & MENU_THUMB;
  var recentlyClosedInitiallyMenu = shownSections & MENU_RECENT;
  setSectionMenuMode('apps', Section.APPS, appsInitiallyMenu, MENU_APPS);
  setSectionMenuMode('most-visited', Section.THUMB, mostVisitedInitiallyMenu,
                     MENU_THUMB);
  setSectionMenuMode('recently-closed', undefined, recentlyClosedInitiallyMenu,
                     MENU_RECENT);

  layoutSections();
</script>
</html>