OLD | NEW |
| (Empty) |
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. | |
16 var log = []; | |
17 function logEvent(name, shouldLogTime) { | |
18 if (shouldLogTime) { | |
19 chrome.send('logEventTime', [name]); | |
20 } | |
21 log.push([name, Date.now()]); | |
22 } | |
23 logEvent('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 */ | |
30 function 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 | |
45 registerCallback('setMostVisitedPages'); | |
46 registerCallback('recentlyClosedTabs'); | |
47 registerCallback('syncMessageChanged'); | |
48 registerCallback('getAppsCallback'); | |
49 registerCallback('setShownSections'); | |
50 registerCallback('foreignSessions'); | |
51 registerCallback('bookmarkBarDetached'); | |
52 registerCallback('bookmarkBarAttached'); | |
53 | |
54 chrome.send('getMostVisited'); | |
55 chrome.send('getRecentlyClosedTabs'); | |
56 chrome.send('getForeignSessions'); | |
57 chrome.send('getApps'); | |
58 | |
59 </script> | |
60 <!-- template data placeholder --> | |
61 <link rel="stylesheet" href="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 <link rel="stylesheet" href="chrome://resources/css/throbber.css"> | |
66 <link rel="stylesheet" href="sync_setup_overlay.css"> | |
67 <link rel="stylesheet" href="new_tab_sync_promo.css"> | |
68 <script> | |
69 | |
70 /** | |
71 * Bitmask for the different UI sections. | |
72 * This matches the Section enum in ../webui/shown_sections_handler.h | |
73 * @enum {number} | |
74 */ | |
75 var Section = { | |
76 THUMB: 1 << 0, | |
77 APPS: 1 << 6 | |
78 }; | |
79 | |
80 // These are used to put sections into menu mode and are part of the | |
81 // |shownSections| bitmask, but are not sections themselves. | |
82 var MENU_THUMB = 1 << (0 + 16); | |
83 var MENU_RECENT = 1 << (2 + 16); | |
84 var MENU_APPS = 1 << (6 + 16); | |
85 | |
86 // TODO(aa): This state is duplicated. We keep this variable up to date, but we | |
87 // also have the same information in the DOM. We can probably just have the DOM | |
88 // be the truth and translate to and from the bitmask when needed. | |
89 var shownSections = templateData['shown_sections']; | |
90 | |
91 // Until themes can clear the cache, force-reload the theme stylesheet. | |
92 document.write('<link id="themecss" rel="stylesheet" ' + | |
93 'href="chrome://theme/css/newtab.css?' + | |
94 Date.now() + '">'); | |
95 | |
96 function useSmallGrid() { | |
97 return window.innerWidth <= 940; | |
98 } | |
99 | |
100 function isRtl() { | |
101 return templateData['textdirection'] == 'rtl'; | |
102 } | |
103 | |
104 // Parse any name value pairs passed through the URL hash. | |
105 var hashParams = (function() { | |
106 var result = {}; | |
107 if (location.hash.length) { | |
108 location.hash.substr(1).split('&').forEach(function(pair) { | |
109 pair = pair.split('='); | |
110 if (pair.length != 2) { | |
111 throw new Error('Unexpected hash value: ' + location.hash); | |
112 } | |
113 | |
114 result[pair[0]] = pair[1]; | |
115 }); | |
116 } | |
117 return result; | |
118 })(); | |
119 | |
120 // Reflect the mode param as an attribute so we can use CSS attribute selectors | |
121 // on it. | |
122 if ('mode' in hashParams) { | |
123 document.documentElement.setAttribute('mode', hashParams['mode']); | |
124 } | |
125 | |
126 </script> | |
127 </head> | |
128 <body class="loading" | |
129 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> | |
130 | |
131 <div id="sync-promo" class="collapsed" hidden> | |
132 <div id="sync-promo-login-status"> | |
133 <div id="sync-promo-login-status-cell"> | |
134 <span id="sync-promo-login-status-msg"></span> | |
135 <img id="login-status-avatar-icon" hidden> | |
136 </div> | |
137 </div> | |
138 <div id="sync-promo-contents"> | |
139 <include src="sync_setup_overlay.html"> | |
140 </div> | |
141 <div id="sync-promo-toggle"> | |
142 <input id="sync-promo-toggle-button" type="image" | |
143 src="sync_promo_minimize.png"> | |
144 </div> | |
145 </div> | |
146 | |
147 <div id="attribution" class="attribution nolayout"> | |
148 <div i18n-content="attributionintro"></div> | |
149 <img id="attribution-img"> | |
150 </div> | |
151 | |
152 <div id="main"> | |
153 | |
154 <div id="notification-container"> | |
155 <div id="notification"> | |
156 <div> </div> | |
157 <div class="link"><div class="link-color" id="action-link"></div></div> | |
158 <button id="notification-close"><div></div></button> | |
159 </div> | |
160 </div> | |
161 | |
162 <div id="login-container"> | |
163 <span id="login-username"></span> | |
164 </div> | |
165 | |
166 <div class="maxiview" id="apps-maxiview"> | |
167 <div id="apps-promo"> | |
168 <p id="apps-promo-heading"></p> | |
169 <a class="g-button-basic" id="apps-promo-link" href=""></a><br> | |
170 <button id="apps-promo-hide"></button> | |
171 </div> | |
172 <div id="apps-content"></div> | |
173 <div id="app-notification-bubble" class="notification-bubble"> | |
174 <img id="app-notification-close" src="chrome://theme/IDR_CLOSE_BAR"> | |
175 <strong id="app-notification-title"></strong><br> | |
176 <span id="app-notification-message"></span><br><br> | |
177 <a id="app-notification-link"></a> | |
178 </div> | |
179 <div id="arrow-container" class="notification-bubble-closed"> | |
180 <div id="arrow-contents" class="arrow"></div> | |
181 <div id="arrow-border" class="arrow"></div> | |
182 <div id="arrow-shadow" class="arrow"></div> | |
183 </div> | |
184 </div> | |
185 <div class="maxiview" id="most-visited-maxiview"></div> | |
186 | |
187 <div class="sections"> | |
188 <!-- Start disabled. We only enable once we have installed default apps. --> | |
189 <div id="apps" class="section disabled" section="APPS"> | |
190 <h2> | |
191 <img class="disclosure" img src="ntp/ntp_disclosure_triangle.png"> | |
192 <div class="back"></div> | |
193 <span i18n-content="apps"></span> | |
194 <button class="section-close-button"></button> | |
195 </h2> | |
196 <div class="miniview"></div> | |
197 </div> | |
198 | |
199 <div id="most-visited" class="section" section="THUMB"> | |
200 <h2> | |
201 <img class="disclosure" src="ntp/ntp_disclosure_triangle.png"> | |
202 <div class="back"></div> | |
203 <span i18n-content="mostvisited"></span> | |
204 <button id="most-visited-settings" i18n-content="restorethumbnails"> | |
205 </button> | |
206 <button class="section-close-button"></button> | |
207 </h2> | |
208 <div class="miniview"></div> | |
209 </div> | |
210 | |
211 <!-- Start this section disabled because it might not have data, and looks | |
212 silly without any. --> | |
213 <div id="recently-closed" class="section collapsed disabled" | |
214 section="RECENT" noexpand="true"> | |
215 <h2> | |
216 <div class="back"></div> | |
217 <span i18n-content="recentlyclosed"></span> | |
218 <button class="section-close-button"></button> | |
219 </h2> | |
220 <div class="miniview"></div> | |
221 </div> | |
222 | |
223 <!-- Start disabled until sync is enabled and foreign sessions are | |
224 available. --> | |
225 <div id="foreign-sessions" class="section collapsed disabled" | |
226 section="SYNC"> | |
227 <h2> | |
228 <div class="back"></div> | |
229 <span i18n-content="foreignsessions"></span> | |
230 </h2> | |
231 <div class="miniview"></div> | |
232 </div> | |
233 | |
234 <div id="sync-status" class="section disabled"> | |
235 <div> | |
236 <h3></h3> | |
237 <span></span> | |
238 </div> | |
239 </div> | |
240 </div> | |
241 | |
242 <div id="closed-sections-bar"> | |
243 <!-- The default visibility of these buttons needs to be the opposite of the | |
244 default visibility of the corresponding sections. --> | |
245 <button id="apps-button" | |
246 menu="#apps-menu"> | |
247 <span i18n-content="apps"></span> | |
248 <img src="ntp/ntp_disclosure_triangle.png"> | |
249 </button> | |
250 <button id="most-visited-button" | |
251 menu="#most-visited-menu"> | |
252 <span i18n-content="mostvisited"></span> | |
253 <img src="ntp/ntp_disclosure_triangle.png"> | |
254 </button> | |
255 <button id="recently-closed-button" | |
256 menu="#recently-closed-menu"> | |
257 <span i18n-content="recentlyclosed"></span> | |
258 <img src="ntp/ntp_disclosure_triangle.png"> | |
259 </button> | |
260 </div> | |
261 </div> <!-- main --> | |
262 | |
263 <div class="window-menu" id="window-tooltip"></div> | |
264 | |
265 <command id="clear-all-blacklisted" i18n-values=".label:restorethumbnails"> | |
266 <command id="apps-launch-command"> | |
267 <command id="apps-options-command" i18n-values=".label:appoptions"> | |
268 <command id="apps-uninstall-command" i18n-values=".label:appuninstall"> | |
269 <command id="apps-create-shortcut-command" | |
270 i18n-values=".label:appcreateshortcut"> | |
271 <command id="apps-launch-type-pinned" i18n-values=".label:applaunchtypepinned" | |
272 launch-type="0"> | |
273 <command id="apps-launch-type-regular" i18n-values=".label:applaunchtyperegular" | |
274 launch-type="1"> | |
275 <command id="apps-launch-type-window" | |
276 i18n-values=".label:applaunchtypewindow" launch-type="3"> | |
277 <command id="apps-launch-type-fullscreen" | |
278 i18n-values=".label:applaunchtypefullscreen" launch-type="2"> | |
279 | |
280 <!-- These are populated dynamically --> | |
281 <menu id="apps-menu"></menu> | |
282 <menu id="most-visited-menu"></menu> | |
283 <menu id="recently-closed-menu"></menu> | |
284 | |
285 <menu id="app-context-menu"> | |
286 <button class="default" command="#apps-launch-command"></button> | |
287 <hr> | |
288 <button command="#apps-launch-type-regular" launch-type="1"></button> | |
289 <button command="#apps-launch-type-pinned" launch-type="0"></button> | |
290 <button id="apps-launch-type-window-menu-item" | |
291 command="#apps-launch-type-window" launch-type="3"></button> | |
292 <button command="#apps-launch-type-fullscreen" launch-type="2"></button> | |
293 <hr> | |
294 <button command="#apps-options-command"></button> | |
295 <button command="#apps-uninstall-command"></button> | |
296 <hr id="apps-create-shortcut-command-separator"> | |
297 <button id="apps-create-shortcut-command-menu-item" | |
298 command="#apps-create-shortcut-command"></button> | |
299 </menu> | |
300 | |
301 </body> | |
302 | |
303 <script src="shared/js/i18n_template.js"></script> | |
304 <script> | |
305 i18nTemplate.process(document, templateData); | |
306 </script> | |
307 <script src="shared/js/local_strings.js"></script> | |
308 <script src="shared/js/parse_html_subset.js"></script> | |
309 | |
310 <script src="shared/js/cr.js"></script> | |
311 <script src="shared/js/event_tracker.js"></script> | |
312 <script src="shared/js/cr/ui.js"></script> | |
313 <script src="shared/js/cr/ui/command.js"></script> | |
314 <script src="shared/js/cr/ui/menu_item.js"></script> | |
315 <script src="shared/js/cr/ui/menu.js"></script> | |
316 <script src="shared/js/cr/ui/position_util.js"></script> | |
317 <script src="shared/js/cr/ui/menu_button.js"></script> | |
318 <script src="shared/js/cr/ui/context_menu_button.js"></script> | |
319 <script src="shared/js/cr/ui/context_menu_handler.js"></script> | |
320 | |
321 <script src="ntp/drag_drop_controller.js"></script> | |
322 <script src="ntp/most_visited.js"></script> | |
323 <script src="new_tab.js"></script> | |
324 <script src="ntp/apps.js"></script> | |
325 | |
326 <script src="chrome://resources/js/cr/event_target.js"></script> | |
327 <!-- TODO(sail): Refactor options_page and remove this include. --> | |
328 <script src="options/options_page.js"></script> | |
329 <script src="sync_setup_overlay.js"></script> | |
330 <script src="new_tab_sync_promo.js"></script> | |
331 | |
332 <script> | |
333 cr.ui.decorate('menu', cr.ui.Menu); | |
334 cr.ui.decorate('command', cr.ui.Command); | |
335 cr.ui.decorate('button[menu]', cr.ui.MenuButton); | |
336 | |
337 if (cr.isChromeOS) | |
338 $('closed-sections-bar').setAttribute('chromeos', true); | |
339 | |
340 initializeLogin(); | |
341 | |
342 initializeSection('apps', MENU_APPS, Section.APPS); | |
343 initializeSection('most-visited', MENU_THUMB, Section.THUMB); | |
344 initializeSection('recently-closed', MENU_RECENT); | |
345 | |
346 updateSimpleSection('apps', Section.APPS); | |
347 updateSimpleSection('most-visited', Section.THUMB); | |
348 var appsInitiallyMenu = shownSections & MENU_APPS; | |
349 var mostVisitedInitiallyMenu = shownSections & MENU_THUMB; | |
350 var recentlyClosedInitiallyMenu = shownSections & MENU_RECENT; | |
351 setSectionMenuMode('apps', Section.APPS, appsInitiallyMenu, MENU_APPS); | |
352 setSectionMenuMode('most-visited', Section.THUMB, mostVisitedInitiallyMenu, | |
353 MENU_THUMB); | |
354 setSectionMenuMode('recently-closed', undefined, recentlyClosedInitiallyMenu, | |
355 MENU_RECENT); | |
356 | |
357 layoutSections(); | |
358 </script> | |
359 </html> | |
OLD | NEW |