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