Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(734)

Side by Side Diff: chrome/browser/resources/ntp4/new_tab.js

Issue 1129903008: NTP Zombie Code Slayer Part IV: Most Visited (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: pref registration Created 5 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
566 * Show the sync login UI. 531 * Show the sync login UI.
567 * @param {Event} e The click event. 532 * @param {Event} e The click event.
568 */ 533 */
569 function showSyncLoginUI(e) { 534 function showSyncLoginUI(e) {
570 var rect = e.currentTarget.getBoundingClientRect(); 535 var rect = e.currentTarget.getBoundingClientRect();
571 chrome.send('showSyncLoginUI', 536 chrome.send('showSyncLoginUI',
572 [rect.left, rect.top, rect.width, rect.height]); 537 [rect.left, rect.top, rect.width, rect.height]);
573 } 538 }
574 539
575 /** 540 /**
576 * Logs the time to click for the specified item.
577 * @param {string} item The item to log the time-to-click.
578 */
579 function logTimeToClick(item) {
580 var timeToClick = Date.now() - startTime;
581 chrome.send('logTimeToClick',
582 ['NewTabPage.TimeToClick' + item, timeToClick]);
583 }
584
585 /**
586 * Wrappers to forward the callback to corresponding PageListView member. 541 * Wrappers to forward the callback to corresponding PageListView member.
587 */ 542 */
588 543
589 /** 544 /**
590 * Called by chrome when a new app has been added to chrome or has been 545 * Called by chrome when a new app has been added to chrome or has been
591 * enabled if previously disabled. 546 * enabled if previously disabled.
592 * @param {Object} appData A data structure full of relevant information for 547 * @param {Object} appData A data structure full of relevant information for
593 * the app. 548 * the app.
594 * @param {boolean=} opt_highlight Whether the app about to be added should 549 * @param {boolean=} opt_highlight Whether the app about to be added should
595 * be highlighted. 550 * be highlighted.
(...skipping 102 matching lines...) Expand 10 before | Expand all | Expand 10 after
698 appMoved: appMoved, 653 appMoved: appMoved,
699 appRemoved: appRemoved, 654 appRemoved: appRemoved,
700 appsPrefChangeCallback: appsPrefChangeCallback, 655 appsPrefChangeCallback: appsPrefChangeCallback,
701 appLauncherPromoPrefChangeCallback: appLauncherPromoPrefChangeCallback, 656 appLauncherPromoPrefChangeCallback: appLauncherPromoPrefChangeCallback,
702 enterRearrangeMode: enterRearrangeMode, 657 enterRearrangeMode: enterRearrangeMode,
703 getAppsCallback: getAppsCallback, 658 getAppsCallback: getAppsCallback,
704 getAppsPageIndex: getAppsPageIndex, 659 getAppsPageIndex: getAppsPageIndex,
705 getCardSlider: getCardSlider, 660 getCardSlider: getCardSlider,
706 onLoad: onLoad, 661 onLoad: onLoad,
707 leaveRearrangeMode: leaveRearrangeMode, 662 leaveRearrangeMode: leaveRearrangeMode,
708 logTimeToClick: logTimeToClick,
709 NtpFollowAction: NtpFollowAction, 663 NtpFollowAction: NtpFollowAction,
710 saveAppPageName: saveAppPageName, 664 saveAppPageName: saveAppPageName,
711 setAppToBeHighlighted: setAppToBeHighlighted, 665 setAppToBeHighlighted: setAppToBeHighlighted,
712 setBookmarkBarAttached: setBookmarkBarAttached, 666 setBookmarkBarAttached: setBookmarkBarAttached,
713 setMostVisitedPages: setMostVisitedPages,
714 setFaviconDominantColor: setFaviconDominantColor, 667 setFaviconDominantColor: setFaviconDominantColor,
715 showNotification: showNotification, 668 showNotification: showNotification,
716 themeChanged: themeChanged, 669 themeChanged: themeChanged,
717 updateLogin: updateLogin 670 updateLogin: updateLogin
718 }; 671 };
719 }); 672 });
720 673
721 document.addEventListener('DOMContentLoaded', ntp.onLoad); 674 document.addEventListener('DOMContentLoaded', ntp.onLoad);
722 675
723 var toCssPx = cr.ui.toCssPx; 676 var toCssPx = cr.ui.toCssPx;
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698