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

var global = this;

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

</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 /dom_ui/shown_sections_handler.h
 * @enum {number}
 */
var Section = {
  THUMB: 1 << 0,
  APPS: 1 << 6
};

// These are used to hide sections and are part of the |shownSections| bitmask,
// but are not sections themselves.
var MINIMIZED_THUMB = 1 << (0 + 16);
var MINIMIZED_RECENT = 1 << (2 + 16);
var MINIMIZED_APPS = 1 << (6 + 16);

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">
      <span>&nbsp;</span>
      <span class="link"><span class="link-color"></span></span>
    </div>
  </div>

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

  <div class="maxiview" id="apps-maxiview">
    <div id="apps-promo">
      <button id="apps-promo-hide" i18n-content="appspromohide"></button>
      <h3 i18n-content="appspromoheader"></h3>
      <p id="apps-promo-text1" i18n-values=".innerHTML:appspromotext1"></p>
      <p id="apps-promo-text2" i18n-content="appspromotext2"></p>
    </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 hidden 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 hidden 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"
            class="disabled"
            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>
  <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/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/util.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', MINIMIZED_APPS, Section.APPS);
  initializeSection('most-visited', MINIMIZED_THUMB, Section.THUMB);
  initializeSection('recently-closed', MINIMIZED_RECENT);

  updateSimpleSection('apps', Section.APPS);
  updateSimpleSection('most-visited', Section.THUMB);
  var appsInitiallyVisible = !(shownSections & MINIMIZED_APPS);
  var mostVisitedInitiallyVisible = !(shownSections & MINIMIZED_THUMB);
  var recentlyClosedInitiallyVisible = !(shownSections & MINIMIZED_RECENT);
  // Apps and recently closed start as hidden in the HTML, most visited is
  // initially visible. Adapt to the change received from the prefs by forcing
  // all three sections to update.
  shownSections &= ~MINIMIZED_THUMB;
  shownSections |= MINIMIZED_APPS | MINIMIZED_RECENT;
  setSectionVisible('apps', Section.APPS, appsInitiallyVisible, MINIMIZED_APPS);
  setSectionVisible(
      'most-visited', Section.THUMB,
      mostVisitedInitiallyVisible, MINIMIZED_THUMB);
  setSectionVisible(
      'recently-closed', undefined,
      recentlyClosedInitiallyVisible, MINIMIZED_RECENT);

  // This is insane, but we use the CSS class 'disabled' for both 'minimized'
  // sections and sections that are actually disabled, as in not accessible in
  // any way.
  //
  // The above code syncs up the DOM and shownSection wrt minimized. But we
  // don't know until we receive the apps data whether the apps section will be
  // disabled or not. So we need to add the 'disabled' class back to the apps
  // section here. We remove it later, once we know for sure we want it to be
  // enabled.
  //
  // See also: crbug.com/67273.
  $('apps').classList.add('disabled');

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