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