<!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> </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>