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