OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview New tab page | 6 * @fileoverview New tab page |
7 * This is the main code for the new tab page used by touch-enabled Chrome | 7 * This is the main code for the new tab page used by touch-enabled Chrome |
8 * browsers. For now this is still a prototype. | 8 * browsers. For now this is still a prototype. |
9 */ | 9 */ |
10 | 10 |
11 /** | |
12 * @typedef {{direction: string, | |
13 * filler: (boolean|undefined), | |
14 * title: string, | |
15 * url: string}} | |
16 * @see chrome/browser/ui/webui/ntp/most_visited_handler.cc | |
17 */ | |
18 var PageData; | |
19 | |
20 // Use an anonymous function to enable strict mode just for this file (which | 11 // Use an anonymous function to enable strict mode just for this file (which |
21 // will be concatenated with other files when embedded in Chrome | 12 // will be concatenated with other files when embedded in Chrome |
22 cr.define('ntp', function() { | 13 cr.define('ntp', function() { |
23 'use strict'; | 14 'use strict'; |
24 | 15 |
25 /** | 16 /** |
26 * NewTabView instance. | 17 * NewTabView instance. |
27 * @type {!Object|undefined} | 18 * @type {!Object|undefined} |
28 */ | 19 */ |
29 var newTabView; | 20 var newTabView; |
(...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
113 if (promoBubble) | 104 if (promoBubble) |
114 window.setTimeout(promoBubble.reposition.bind(promoBubble), 0); | 105 window.setTimeout(promoBubble.reposition.bind(promoBubble), 0); |
115 } | 106 } |
116 }; | 107 }; |
117 | 108 |
118 /** | 109 /** |
119 * Invoked at startup once the DOM is available to initialize the app. | 110 * Invoked at startup once the DOM is available to initialize the app. |
120 */ | 111 */ |
121 function onLoad() { | 112 function onLoad() { |
122 sectionsToWaitFor = 0; | 113 sectionsToWaitFor = 0; |
123 if (loadTimeData.getBoolean('showMostvisited')) | |
124 sectionsToWaitFor++; | |
125 if (loadTimeData.getBoolean('showApps')) { | 114 if (loadTimeData.getBoolean('showApps')) { |
126 sectionsToWaitFor++; | 115 sectionsToWaitFor++; |
127 if (loadTimeData.getBoolean('showAppLauncherPromo')) { | 116 if (loadTimeData.getBoolean('showAppLauncherPromo')) { |
128 $('app-launcher-promo-close-button').addEventListener('click', | 117 $('app-launcher-promo-close-button').addEventListener('click', |
129 function() { chrome.send('stopShowingAppLauncherPromo'); }); | 118 function() { chrome.send('stopShowingAppLauncherPromo'); }); |
130 $('apps-promo-learn-more').addEventListener('click', | 119 $('apps-promo-learn-more').addEventListener('click', |
131 function() { chrome.send('onLearnMore'); }); | 120 function() { chrome.send('onLearnMore'); }); |
132 } | 121 } |
133 } | 122 } |
134 measureNavDots(); | 123 measureNavDots(); |
135 | 124 |
136 // Load the current theme colors. | 125 // Load the current theme colors. |
137 themeChanged(); | 126 themeChanged(); |
138 | 127 |
139 newTabView = new NewTabView(); | 128 newTabView = new NewTabView(); |
140 | 129 |
141 notificationContainer = getRequiredElement('notification-container'); | 130 notificationContainer = getRequiredElement('notification-container'); |
142 notificationContainer.addEventListener( | 131 notificationContainer.addEventListener( |
143 'webkitTransitionEnd', onNotificationTransitionEnd); | 132 'webkitTransitionEnd', onNotificationTransitionEnd); |
144 | 133 |
145 if (loadTimeData.getBoolean('showMostvisited')) { | |
146 var mostVisited = new ntp.MostVisitedPage(); | |
147 // Move the footer into the most visited page if we are in "bare minimum" | |
148 // mode. | |
149 if (document.body.classList.contains('bare-minimum')) | |
150 mostVisited.appendFooter(getRequiredElement('footer')); | |
151 newTabView.appendTilePage(mostVisited, | |
152 loadTimeData.getString('mostvisited'), | |
153 false); | |
154 chrome.send('getMostVisited'); | |
155 } | |
156 | |
157 if (!loadTimeData.getBoolean('showWebStoreIcon')) { | 134 if (!loadTimeData.getBoolean('showWebStoreIcon')) { |
158 var webStoreIcon = $('chrome-web-store-link'); | 135 var webStoreIcon = $('chrome-web-store-link'); |
159 // Not all versions of the NTP have a footer, so this may not exist. | 136 // Not all versions of the NTP have a footer, so this may not exist. |
160 if (webStoreIcon) | 137 if (webStoreIcon) |
161 webStoreIcon.hidden = true; | 138 webStoreIcon.hidden = true; |
162 } else { | 139 } else { |
163 var webStoreLink = loadTimeData.getString('webStoreLink'); | 140 var webStoreLink = loadTimeData.getString('webStoreLink'); |
164 var url = appendParam(webStoreLink, 'utm_source', 'chrome-ntp-launcher'); | 141 var url = appendParam(webStoreLink, 'utm_source', 'chrome-ntp-launcher'); |
165 $('chrome-web-store-link').href = url; | 142 $('chrome-web-store-link').href = url; |
166 $('chrome-web-store-link').addEventListener('click', | 143 $('chrome-web-store-link').addEventListener('click', |
(...skipping 152 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
319 measuringDiv.textContent = loadTimeData.getString(id); | 296 measuringDiv.textContent = loadTimeData.getString(id); |
320 // The 4 is for border and padding. | 297 // The 4 is for border and padding. |
321 return Math.max(measuringDiv.clientWidth * 1.15 + 4, 80); | 298 return Math.max(measuringDiv.clientWidth * 1.15 + 4, 80); |
322 } | 299 } |
323 | 300 |
324 /** | 301 /** |
325 * Fills in an invisible div with the longest dot title string so that | 302 * Fills in an invisible div with the longest dot title string so that |
326 * its length may be measured and the nav dots sized accordingly. | 303 * its length may be measured and the nav dots sized accordingly. |
327 */ | 304 */ |
328 function measureNavDots() { | 305 function measureNavDots() { |
329 var pxWidth = measureNavDot('appDefaultPageName'); | |
330 if (loadTimeData.getBoolean('showMostvisited')) | |
331 pxWidth = Math.max(measureNavDot('mostvisited'), pxWidth); | |
332 | |
333 var styleElement = document.createElement('style'); | 306 var styleElement = document.createElement('style'); |
334 styleElement.type = 'text/css'; | 307 styleElement.type = 'text/css'; |
335 // max-width is used because if we run out of space, the nav dots will be | 308 // max-width is used because if we run out of space, the nav dots will be |
336 // shrunk. | 309 // shrunk. |
| 310 var pxWidth = measureNavDot('appDefaultPageName'); |
337 styleElement.textContent = '.dot { max-width: ' + pxWidth + 'px; }'; | 311 styleElement.textContent = '.dot { max-width: ' + pxWidth + 'px; }'; |
338 document.querySelector('head').appendChild(styleElement); | 312 document.querySelector('head').appendChild(styleElement); |
339 } | 313 } |
340 | 314 |
341 /** | 315 /** |
342 * Layout the footer so that the nav dots stay centered. | 316 * Layout the footer so that the nav dots stay centered. |
343 */ | 317 */ |
344 function layoutFooter() { | 318 function layoutFooter() { |
345 // We need the image to be loaded. | 319 // We need the image to be loaded. |
346 var logo = $('logo-img'); | 320 var logo = $('logo-img'); |
(...skipping 153 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
500 * When done fading out, set hidden to true so the notification can't be | 474 * When done fading out, set hidden to true so the notification can't be |
501 * tabbed to or clicked. | 475 * tabbed to or clicked. |
502 * @param {Event} e The webkitTransitionEnd event. | 476 * @param {Event} e The webkitTransitionEnd event. |
503 */ | 477 */ |
504 function onNotificationTransitionEnd(e) { | 478 function onNotificationTransitionEnd(e) { |
505 if (notificationContainer.classList.contains('inactive')) | 479 if (notificationContainer.classList.contains('inactive')) |
506 notificationContainer.hidden = true; | 480 notificationContainer.hidden = true; |
507 } | 481 } |
508 | 482 |
509 /** | 483 /** |
510 * @param {Array<PageData>} data | |
511 * @param {boolean} hasBlacklistedUrls | |
512 */ | |
513 function setMostVisitedPages(data, hasBlacklistedUrls) { | |
514 newTabView.mostVisitedPage.data = data; | |
515 cr.dispatchSimpleEvent(document, 'sectionready', true, true); | |
516 } | |
517 | |
518 /** | |
519 * Set the dominant color for a node. This will be called in response to | 484 * Set the dominant color for a node. This will be called in response to |
520 * getFaviconDominantColor. The node represented by |id| better have a setter | 485 * getFaviconDominantColor. The node represented by |id| better have a setter |
521 * for stripeColor. | 486 * for stripeColor. |
522 * @param {string} id The ID of a node. | 487 * @param {string} id The ID of a node. |
523 * @param {string} color The color represented as a CSS string. | 488 * @param {string} color The color represented as a CSS string. |
524 */ | 489 */ |
525 function setFaviconDominantColor(id, color) { | 490 function setFaviconDominantColor(id, color) { |
526 var node = $(id); | 491 var node = $(id); |
527 if (node) | 492 if (node) |
528 node.stripeColor = color; | 493 node.stripeColor = color; |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
567 * Show the sync login UI. | 532 * Show the sync login UI. |
568 * @param {Event} e The click event. | 533 * @param {Event} e The click event. |
569 */ | 534 */ |
570 function showSyncLoginUI(e) { | 535 function showSyncLoginUI(e) { |
571 var rect = e.currentTarget.getBoundingClientRect(); | 536 var rect = e.currentTarget.getBoundingClientRect(); |
572 chrome.send('showSyncLoginUI', | 537 chrome.send('showSyncLoginUI', |
573 [rect.left, rect.top, rect.width, rect.height]); | 538 [rect.left, rect.top, rect.width, rect.height]); |
574 } | 539 } |
575 | 540 |
576 /** | 541 /** |
577 * Logs the time to click for the specified item. | |
578 * @param {string} item The item to log the time-to-click. | |
579 */ | |
580 function logTimeToClick(item) { | |
581 var timeToClick = Date.now() - startTime; | |
582 chrome.send('logTimeToClick', | |
583 ['NewTabPage.TimeToClick' + item, timeToClick]); | |
584 } | |
585 | |
586 /** | |
587 * Wrappers to forward the callback to corresponding PageListView member. | 542 * Wrappers to forward the callback to corresponding PageListView member. |
588 */ | 543 */ |
589 | 544 |
590 /** | 545 /** |
591 * Called by chrome when a new app has been added to chrome or has been | 546 * Called by chrome when a new app has been added to chrome or has been |
592 * enabled if previously disabled. | 547 * enabled if previously disabled. |
593 * @param {Object} appData A data structure full of relevant information for | 548 * @param {Object} appData A data structure full of relevant information for |
594 * the app. | 549 * the app. |
595 * @param {boolean=} opt_highlight Whether the app about to be added should | 550 * @param {boolean=} opt_highlight Whether the app about to be added should |
596 * be highlighted. | 551 * be highlighted. |
(...skipping 102 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
699 appMoved: appMoved, | 654 appMoved: appMoved, |
700 appRemoved: appRemoved, | 655 appRemoved: appRemoved, |
701 appsPrefChangeCallback: appsPrefChangeCallback, | 656 appsPrefChangeCallback: appsPrefChangeCallback, |
702 appLauncherPromoPrefChangeCallback: appLauncherPromoPrefChangeCallback, | 657 appLauncherPromoPrefChangeCallback: appLauncherPromoPrefChangeCallback, |
703 enterRearrangeMode: enterRearrangeMode, | 658 enterRearrangeMode: enterRearrangeMode, |
704 getAppsCallback: getAppsCallback, | 659 getAppsCallback: getAppsCallback, |
705 getAppsPageIndex: getAppsPageIndex, | 660 getAppsPageIndex: getAppsPageIndex, |
706 getCardSlider: getCardSlider, | 661 getCardSlider: getCardSlider, |
707 onLoad: onLoad, | 662 onLoad: onLoad, |
708 leaveRearrangeMode: leaveRearrangeMode, | 663 leaveRearrangeMode: leaveRearrangeMode, |
709 logTimeToClick: logTimeToClick, | |
710 NtpFollowAction: NtpFollowAction, | 664 NtpFollowAction: NtpFollowAction, |
711 saveAppPageName: saveAppPageName, | 665 saveAppPageName: saveAppPageName, |
712 setAppToBeHighlighted: setAppToBeHighlighted, | 666 setAppToBeHighlighted: setAppToBeHighlighted, |
713 setBookmarkBarAttached: setBookmarkBarAttached, | 667 setBookmarkBarAttached: setBookmarkBarAttached, |
714 setMostVisitedPages: setMostVisitedPages, | |
715 setFaviconDominantColor: setFaviconDominantColor, | 668 setFaviconDominantColor: setFaviconDominantColor, |
716 showNotification: showNotification, | 669 showNotification: showNotification, |
717 themeChanged: themeChanged, | 670 themeChanged: themeChanged, |
718 updateLogin: updateLogin | 671 updateLogin: updateLogin |
719 }; | 672 }; |
720 }); | 673 }); |
721 | 674 |
722 document.addEventListener('DOMContentLoaded', ntp.onLoad); | 675 document.addEventListener('DOMContentLoaded', ntp.onLoad); |
723 | 676 |
724 var toCssPx = cr.ui.toCssPx; | 677 var toCssPx = cr.ui.toCssPx; |
OLD | NEW |