1<!DOCTYPE html>
2<html i18n-values="
3  dir:textdirection;
4  bookmarkbarattached:bookmarkbarattached;
5  hasattribution:hasattribution;
6  anim:anim;
7  syncispresent:syncispresent;
8  customlogo:customlogo"
9  install-animation-enabled="true">
10<head>
11<meta charset="utf-8">
12<title i18n-content="title"></title>
13<script src="shared/js/util.js"></script>
14<script>
15// Logging info for benchmarking purposes.
16var log = [];
17function logEvent(name, shouldLogTime) {
18  if (shouldLogTime) {
19    chrome.send('logEventTime', [name]);
20  }
21  log.push([name, Date.now()]);
22}
23logEvent('Tab.NewTabScriptStart', true);
24
25/**
26 * Registers a callback function so that if the backend calls it too early it
27 * will get delayed until DOMContentLoaded is fired.
28 * @param {string} name The name of the global function that the backend calls.
29 */
30function registerCallback(name) {
31  var f = function(var_args) {
32    var args = Array.prototype.slice.call(arguments);
33    // If we still have the temporary function we delay until the dom is ready.
34    if (global[name] == f) {
35      logEvent(name + ' is not yet ready. Waiting for DOMContentLoaded');
36      document.addEventListener('DOMContentLoaded', function() {
37        logEvent('Calling the new ' + name);
38        global[name].apply(null, args);
39      });
40    }
41  };
42  global[name] = f;
43}
44
45chrome.send('getMostVisited');
46chrome.send('getRecentlyClosedTabs');
47chrome.send('getForeignSessions');
48chrome.send('getApps');
49
50registerCallback('mostVisitedPages');
51registerCallback('recentlyClosedTabs');
52registerCallback('syncMessageChanged');
53registerCallback('getAppsCallback');
54registerCallback('setShownSections');
55registerCallback('foreignSessions');
56registerCallback('bookmarkBarDetached');
57registerCallback('bookmarkBarAttached');
58
59</script>
60<!-- template data placeholder -->
61<link rel="stylesheet" href="new_new_tab.css">
62<link rel="stylesheet" href="ntp/most_visited.css">
63<link rel="stylesheet" href="ntp/apps.css">
64<link rel="stylesheet" href="shared/css/menu.css">
65<script>
66
67/**
68 * Bitmask for the different UI sections.
69 * This matches the Section enum in /webui/shown_sections_handler.h
70 * @enum {number}
71 */
72var Section = {
73  THUMB: 1 << 0,
74  APPS: 1 << 6
75};
76
77// These are used to put sections into menu mode and are part of the
78// |shownSections| bitmask, but are not sections themselves.
79var MENU_THUMB = 1 << (0 + 16);
80var MENU_RECENT = 1 << (2 + 16);
81var MENU_APPS = 1 << (6 + 16);
82
83// TODO(aa): This state is duplicated. We keep this variable up to date, but we
84// also have the same information in the DOM. We can probably just have the DOM
85// be the truth and translate to and from the bitmask when needed.
86var shownSections = templateData['shown_sections'];
87
88// Until themes can clear the cache, force-reload the theme stylesheet.
89document.write('<link id="themecss" rel="stylesheet" ' +
90               'href="chrome://theme/css/newtab.css?' +
91               Date.now() + '">');
92
93function useSmallGrid() {
94  return window.innerWidth <= 940;
95}
96
97function isRtl() {
98  return templateData['textdirection'] == 'rtl';
99}
100
101// Parse any name value pairs passed through the URL hash.
102var hashParams = (function() {
103  var result = {};
104  if (location.hash.length) {
105    location.hash.substr(1).split('&').forEach(function(pair) {
106      pair = pair.split('=');
107      if (pair.length != 2) {
108        throw new Error('Unexpected hash value: ' + location.hash);
109      }
110
111      result[pair[0]] = pair[1];
112    });
113  }
114  return result;
115})();
116
117// Reflect the mode param as an attribute so we can use CSS attribute selectors
118// on it.
119if ('mode' in hashParams) {
120  document.documentElement.setAttribute('mode', hashParams['mode']);
121}
122
123</script>
124</head>
125<body class="loading"
126      i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
127
128<div id="attribution" class="attribution nolayout">
129  <div i18n-content="attributionintro"></div>
130  <img id="attribution-img">
131</div>
132
133<div id="main">
134
135  <div id="notification-container">
136    <div id="notification">
137      <div>&nbsp;</div>
138      <div class="link"><div class="link-color" id="action-link"></div></div>
139      <button id="notification-close"></button>
140    </div>
141  </div>
142
143  <div id="login-container">
144    <span id="login-username"></span>
145  </div>
146
147  <div class="maxiview" id="apps-maxiview">
148    <div id="apps-promo">
149      <p id="apps-promo-heading"></p>
150      <a class="g-button-basic" id="apps-promo-link" href=""></a><br>
151      <button id="apps-promo-hide"></button>
152    </div>
153    <div id="apps-content"></div>
154  </div>
155  <div class="maxiview" id="most-visited-maxiview"></div>
156
157  <div class="sections">
158    <!-- Start disabled. We only enable once we have installed default apps. -->
159    <div id="apps" class="section disabled" section="APPS">
160      <h2>
161        <img class="disclosure" img src="ntp/ntp_disclosure_triangle.png">
162        <div class="back"></div>
163        <span i18n-content="apps"></span>
164        <button class="section-close-button"></button>
165      </h2>
166      <div class="miniview"></div>
167    </div>
168
169    <div id="most-visited" class="section" section="THUMB">
170      <h2>
171        <img class="disclosure" src="ntp/ntp_disclosure_triangle.png">
172        <div class="back"></div>
173        <span i18n-content="mostvisited"></span>
174        <button id="most-visited-settings" i18n-content="restorethumbnails">
175        </button>
176        <button class="section-close-button"></button>
177      </h2>
178      <div class="miniview"></div>
179    </div>
180
181    <!-- Start this section disabled because it might not have data, and looks
182         silly without any. -->
183    <div id="recently-closed" class="section collapsed disabled"
184        section="RECENT" noexpand="true">
185      <h2>
186        <div class="back"></div>
187        <span i18n-content="recentlyclosed"></span>
188        <button class="section-close-button"></button>
189      </h2>
190      <div class="miniview"></div>
191    </div>
192
193    <!-- Start disabled until sync is enabled and foreign sessions are
194         available. -->
195    <div id="foreign-sessions" class="section collapsed disabled"
196        section="SYNC">
197      <h2>
198        <div class="back"></div>
199        <span i18n-content="foreignsessions"></span>
200      </h2>
201      <div class="miniview"></div>
202    </div>
203
204    <div id="sync-status" class="section disabled">
205      <div>
206        <h3></h3>
207        <span></span>
208      </div>
209    </div>
210  </div>
211
212  <div id="closed-sections-bar">
213    <!-- The default visibility of these buttons needs to be the opposite of the
214         default visibility of the corresponding sections. -->
215    <button id="apps-button"
216            menu="#apps-menu">
217      <span i18n-content="apps"></span>
218      <img src="ntp/ntp_disclosure_triangle.png">
219    </button>
220    <button id="most-visited-button"
221            menu="#most-visited-menu">
222      <span i18n-content="mostvisited"></span>
223      <img src="ntp/ntp_disclosure_triangle.png">
224    </button>
225    <button id="recently-closed-button"
226            menu="#recently-closed-menu">
227      <span i18n-content="recentlyclosed"></span>
228      <img src="ntp/ntp_disclosure_triangle.png">
229    </button>
230  </div>
231</div>  <!-- main -->
232
233<div class="window-menu" id="window-tooltip"></div>
234
235<command id="clear-all-blacklisted" i18n-values=".label:restorethumbnails">
236<command id="apps-launch-command">
237<command id="apps-options-command" i18n-values=".label:appoptions">
238<command id="apps-uninstall-command" i18n-values=".label:appuninstall">
239<command id="apps-create-shortcut-command"
240    i18n-values=".label:appcreateshortcut">
241<command id="apps-launch-type-pinned" i18n-values=".label:applaunchtypepinned"
242    launch-type="0">
243<command id="apps-launch-type-regular" i18n-values=".label:applaunchtyperegular"
244    launch-type="1">
245<command id="apps-launch-type-window"
246    i18n-values=".label:applaunchtypewindow" launch-type="3">
247<command id="apps-launch-type-fullscreen"
248    i18n-values=".label:applaunchtypefullscreen" launch-type="2">
249
250<!-- These are populated dynamically -->
251<menu id="apps-menu"></menu>
252<menu id="most-visited-menu"></menu>
253<menu id="recently-closed-menu"></menu>
254
255<menu id="app-context-menu">
256  <button class="default" command="#apps-launch-command"></button>
257  <hr>
258  <button command="#apps-launch-type-regular" launch-type="1"></button>
259  <button command="#apps-launch-type-pinned" launch-type="0"></button>
260  <button id="apps-launch-type-window-menu-item"
261      command="#apps-launch-type-window" launch-type="3"></button>
262  <button command="#apps-launch-type-fullscreen" launch-type="2"></button>
263  <hr>
264  <button command="#apps-options-command"></button>
265  <button command="#apps-uninstall-command"></button>
266  <hr id="apps-create-shortcut-command-separator">
267  <button id="apps-create-shortcut-command-menu-item"
268      command="#apps-create-shortcut-command"></button>
269</menu>
270
271</body>
272
273<script src="shared/js/i18n_template.js"></script>
274<script>
275i18nTemplate.process(document, templateData);
276</script>
277<script src="shared/js/local_strings.js"></script>
278<script src="shared/js/parse_html_subset.js"></script>
279
280<script src="shared/js/cr.js"></script>
281<script src="shared/js/event_tracker.js"></script>
282<script src="shared/js/cr/ui.js"></script>
283<script src="shared/js/cr/ui/command.js"></script>
284<script src="shared/js/cr/ui/menu_item.js"></script>
285<script src="shared/js/cr/ui/menu.js"></script>
286<script src="shared/js/cr/ui/position_util.js"></script>
287<script src="shared/js/cr/ui/menu_button.js"></script>
288<script src="shared/js/cr/ui/context_menu_button.js"></script>
289<script src="shared/js/cr/ui/context_menu_handler.js"></script>
290
291<script src="ntp/drag_drop_controller.js"></script>
292<script src="ntp/most_visited.js"></script>
293<script src="new_new_tab.js"></script>
294<script src="ntp/apps.js"></script>
295
296<script>
297  cr.ui.decorate('menu', cr.ui.Menu);
298  cr.ui.decorate('command', cr.ui.Command);
299  cr.ui.decorate('button[menu]', cr.ui.MenuButton);
300
301  if (cr.isChromeOS)
302    $('closed-sections-bar').setAttribute('chromeos', true);
303
304  initializeLogin();
305
306  initializeSection('apps', MENU_APPS, Section.APPS);
307  initializeSection('most-visited', MENU_THUMB, Section.THUMB);
308  initializeSection('recently-closed', MENU_RECENT);
309
310  updateSimpleSection('apps', Section.APPS);
311  updateSimpleSection('most-visited', Section.THUMB);
312  var appsInitiallyMenu = shownSections & MENU_APPS;
313  var mostVisitedInitiallyMenu = shownSections & MENU_THUMB;
314  var recentlyClosedInitiallyMenu = shownSections & MENU_RECENT;
315  setSectionMenuMode('apps', Section.APPS, appsInitiallyMenu, MENU_APPS);
316  setSectionMenuMode('most-visited', Section.THUMB, mostVisitedInitiallyMenu,
317                     MENU_THUMB);
318  setSectionMenuMode('recently-closed', undefined, recentlyClosedInitiallyMenu,
319                     MENU_RECENT);
320
321  layoutSections();
322</script>
323</html>
324