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

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

Issue 9358031: Added new adaptive "Suggest" tab on the New Tab Page, behing the flag, for the experiments. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Fixed bug in card_slider.js which prevented correct card be selected in dome cases Created 8 years, 9 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 | Annotate | Revision Log
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 PageListView implementation. 6 * @fileoverview PageListView implementation.
7 * PageListView manages page list, dot list, switcher buttons and handles apps 7 * PageListView manages page list, dot list, switcher buttons and handles apps
8 * pages callbacks from backend. 8 * pages callbacks from backend.
9 * 9 *
10 * Note that you need to have AppLauncherHandler in your WebUI to use this code. 10 * Note that you need to have AppLauncherHandler in your WebUI to use this code.
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
52 */ 52 */
53 tilePages: undefined, 53 tilePages: undefined,
54 54
55 /** 55 /**
56 * A list of all 'apps-page' elements. 56 * A list of all 'apps-page' elements.
57 * @type {!NodeList|undefined} 57 * @type {!NodeList|undefined}
58 */ 58 */
59 appsPages: undefined, 59 appsPages: undefined,
60 60
61 /** 61 /**
62 * The Suggestions page.
63 * @type {!Element|undefined}
64 */
65 suggestionsPage: undefined,
66
67 /**
62 * The Most Visited page. 68 * The Most Visited page.
63 * @type {!Element|undefined} 69 * @type {!Element|undefined}
64 */ 70 */
65 mostVisitedPage: undefined, 71 mostVisitedPage: undefined,
66 72
67 /** 73 /**
68 * The 'dots-list' element. 74 * The 'dots-list' element.
69 * @type {!Element|undefined} 75 * @type {!Element|undefined}
70 */ 76 */
71 dotList: undefined, 77 dotList: undefined,
(...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after
192 * @param {string} title The title of the tile page. 198 * @param {string} title The title of the tile page.
193 * @param {bool} titleIsEditable If true, the title can be changed. 199 * @param {bool} titleIsEditable If true, the title can be changed.
194 * @param {TilePage} opt_refNode Optional reference node to insert in front 200 * @param {TilePage} opt_refNode Optional reference node to insert in front
195 * of. 201 * of.
196 * When opt_refNode is falsey, |page| will just be appended to the end of 202 * When opt_refNode is falsey, |page| will just be appended to the end of
197 * the page list. 203 * the page list.
198 */ 204 */
199 appendTilePage: function(page, title, titleIsEditable, opt_refNode) { 205 appendTilePage: function(page, title, titleIsEditable, opt_refNode) {
200 if (opt_refNode) { 206 if (opt_refNode) {
201 var refIndex = this.getTilePageIndex(opt_refNode); 207 var refIndex = this.getTilePageIndex(opt_refNode);
202 this.cardSlider.insertCardAtIndex(page, refIndex); 208 this.cardSlider.addCardAtIndex(page, refIndex);
203 } else { 209 } else {
204 this.cardSlider.appendCard(page); 210 this.cardSlider.appendCard(page);
205 } 211 }
206 212
207 // Remember special MostVisitedPage. 213 // Remember special MostVisitedPage.
208 if (typeof ntp4.MostVisitedPage != 'undefined' && 214 if (typeof ntp4.MostVisitedPage != 'undefined' &&
209 page instanceof ntp4.MostVisitedPage) { 215 page instanceof ntp4.MostVisitedPage) {
210 assert(this.tilePages.length == 1, 216 assert(this.tilePages.length == 1,
211 'MostVisitedPage should be added as first tile page'); 217 'MostVisitedPage should be added as first tile page');
212 this.mostVisitedPage = page; 218 this.mostVisitedPage = page;
213 } 219 }
214 220
221 if (typeof ntp4.SuggestionsPage != 'undefined' &&
222 page instanceof ntp4.SuggestionsPage) {
223 this.suggestionsPage = page;
224 }
225
215 // If we're appending an AppsPage and it's a temporary page, animate it. 226 // If we're appending an AppsPage and it's a temporary page, animate it.
216 var animate = page instanceof ntp4.AppsPage && 227 var animate = page instanceof ntp4.AppsPage &&
217 page.classList.contains('temporary'); 228 page.classList.contains('temporary');
218 // Make a deep copy of the dot template to add a new one. 229 // Make a deep copy of the dot template to add a new one.
219 var newDot = new ntp4.NavDot(page, title, titleIsEditable, animate); 230 var newDot = new ntp4.NavDot(page, title, titleIsEditable, animate);
220 page.navigationDot = newDot; 231 page.navigationDot = newDot;
221 this.dotList.insertBefore(newDot, 232 this.dotList.insertBefore(newDot,
222 opt_refNode ? opt_refNode.navigationDot : null); 233 opt_refNode ? opt_refNode.navigationDot : null);
223 // Set a tab index on the first dot. 234 // Set a tab index on the first dot.
224 if (this.dotList.dots.length == 1) 235 if (this.dotList.dots.length == 1)
(...skipping 87 matching lines...) Expand 10 before | Expand all | Expand 10 after
312 323
313 // Sort by launch ordinal 324 // Sort by launch ordinal
314 apps.sort(function(a, b) { 325 apps.sort(function(a, b) {
315 return a.app_launch_ordinal > b.app_launch_ordinal ? 1 : 326 return a.app_launch_ordinal > b.app_launch_ordinal ? 1 :
316 a.app_launch_ordinal < b.app_launch_ordinal ? -1 : 0; 327 a.app_launch_ordinal < b.app_launch_ordinal ? -1 : 0;
317 }); 328 });
318 329
319 // An app to animate (in case it was just installed). 330 // An app to animate (in case it was just installed).
320 var highlightApp; 331 var highlightApp;
321 332
333 // If there are any pages after the apps, add new pages before them.
334 var nextPageAfterApps = null;
335 for (var i = 1; i < this.tilePages.length; ++i) {
336 if (this.tilePages[i - 1] instanceof ntp4.AppsPage &&
337 !(this.tilePages[i] instanceof ntp4.AppsPage)) {
338 nextPageAfterApps = this.tilePages[i];
339 break;
340 }
341 }
Dan Beam 2012/02/28 20:14:24 easier to understand, IMO: var lastAppsPage = thi
GeorgeY 2012/02/28 21:17:42 there is a bug in your code: this.appsPages.length
Dan Beam 2012/02/28 22:30:12 A bug in example code doesn't make your code clear
GeorgeY 2012/02/29 00:15:45 What i meant is that if the 3 line code is buggy,
342
322 // Add the apps, creating pages as necessary 343 // Add the apps, creating pages as necessary
323 for (var i = 0; i < apps.length; i++) { 344 for (var i = 0; i < apps.length; i++) {
324 var app = apps[i]; 345 var app = apps[i];
325 var pageIndex = app.page_index || 0; 346 var pageIndex = app.page_index || 0;
326 while (pageIndex >= this.appsPages.length) { 347 while (pageIndex >= this.appsPages.length) {
327 var pageName = localStrings.getString('appDefaultPageName'); 348 var pageName = localStrings.getString('appDefaultPageName');
328 if (this.appsPages.length < pageNames.length) 349 if (this.appsPages.length < pageNames.length)
329 pageName = pageNames[this.appsPages.length]; 350 pageName = pageNames[this.appsPages.length];
330 351
331 var origPageCount = this.appsPages.length; 352 var origPageCount = this.appsPages.length;
332 this.appendTilePage(new ntp4.AppsPage(), pageName, true); 353 this.appendTilePage(new ntp4.AppsPage(), pageName, true,
354 nextPageAfterApps);
333 // Confirm that appsPages is a live object, updated when a new page is 355 // Confirm that appsPages is a live object, updated when a new page is
334 // added (otherwise we'd have an infinite loop) 356 // added (otherwise we'd have an infinite loop)
335 assert(this.appsPages.length == origPageCount + 1, 357 assert(this.appsPages.length == origPageCount + 1,
336 'expected new page'); 358 'expected new page');
337 } 359 }
338 360
339 if (app.id == this.highlightAppId) 361 if (app.id == this.highlightAppId)
340 highlightApp = app; 362 highlightApp = app;
341 else 363 else
342 this.appsPages[pageIndex].appendApp(app, false); 364 this.appsPages[pageIndex].appendApp(app, false);
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after
422 switch (this.shownPage) { 444 switch (this.shownPage) {
423 case templateData['apps_page_id']: 445 case templateData['apps_page_id']:
424 this.cardSlider.selectCardByValue( 446 this.cardSlider.selectCardByValue(
425 this.appsPages[Math.min(this.shownPageIndex, 447 this.appsPages[Math.min(this.shownPageIndex,
426 this.appsPages.length - 1)]); 448 this.appsPages.length - 1)]);
427 break; 449 break;
428 case templateData['most_visited_page_id']: 450 case templateData['most_visited_page_id']:
429 if (this.mostVisitedPage) 451 if (this.mostVisitedPage)
430 this.cardSlider.selectCardByValue(this.mostVisitedPage); 452 this.cardSlider.selectCardByValue(this.mostVisitedPage);
431 break; 453 break;
454 case templateData['suggestions_page_id']:
455 if (this.suggestionsPage)
456 this.cardSlider.selectCardByValue(this.suggestionsPage);
457 break;
432 } 458 }
433 }, 459 },
434 460
435 /** 461 /**
436 * Called whenever tiles should be re-arranging themselves out of the way 462 * Called whenever tiles should be re-arranging themselves out of the way
437 * of a moving or insert tile. 463 * of a moving or insert tile.
438 */ 464 */
439 enterRearrangeMode: function() { 465 enterRearrangeMode: function() {
440 var tempPage = new ntp4.AppsPage(); 466 var tempPage = new ntp4.AppsPage();
441 tempPage.classList.add('temporary'); 467 tempPage.classList.add('temporary');
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after
520 * Returns the index of the given apps page. 546 * Returns the index of the given apps page.
521 * @param {AppsPage} page The AppsPage we wish to find. 547 * @param {AppsPage} page The AppsPage we wish to find.
522 * @return {number} The index of |page| or -1 if it is not in the 548 * @return {number} The index of |page| or -1 if it is not in the
523 * collection. 549 * collection.
524 */ 550 */
525 getAppsPageIndex: function(page) { 551 getAppsPageIndex: function(page) {
526 return Array.prototype.indexOf.call(this.appsPages, page); 552 return Array.prototype.indexOf.call(this.appsPages, page);
527 }, 553 },
528 554
529 /** 555 /**
556 * Returns the first Apps page object in pageList, so pages could be added
557 * before that.
558 * @return {page} First Apps page object in pageList or null.
559 */
560 getFirstAppsPage: function() {
Dan Beam 2012/02/28 20:14:24 You don't use this anywhere and this can be accomp
GeorgeY 2012/02/28 21:17:42 Yes it is used. See suggestions_page.js
561 if (typeof this.tilePages == 'undefined')
562 return null;
563 for (var i = 0; i < this.tilePages.length; ++i) {
564 if (this.tilePages[i] instanceof ntp4.AppsPage)
565 return this.tilePages[i];
566 }
567 return null;
568 },
569
570 /**
530 * Handler for cardSlider:card_changed events from this.cardSlider. 571 * Handler for cardSlider:card_changed events from this.cardSlider.
531 * @param {Event} e The cardSlider:card_changed event. 572 * @param {Event} e The cardSlider:card_changed event.
532 * @private 573 * @private
533 */ 574 */
534 onCardChanged_: function(e) { 575 onCardChanged_: function(e) {
535 var page = e.cardSlider.currentCardValue; 576 var page = e.cardSlider.currentCardValue;
536 577
537 // Don't change shownPage until startup is done (and page changes actually 578 // Don't change shownPage until startup is done (and page changes actually
538 // reflect user actions). 579 // reflect user actions).
539 if (!this.isStartingUp_()) { 580 if (!this.isStartingUp_()) {
540 if (page.classList.contains('apps-page')) { 581 if (page.classList.contains('apps-page')) {
541 this.shownPage = templateData.apps_page_id; 582 this.shownPage = templateData.apps_page_id;
542 this.shownPageIndex = this.getAppsPageIndex(page); 583 this.shownPageIndex = this.getAppsPageIndex(page);
543 } else if (page.classList.contains('most-visited-page')) { 584 } else if (page.classList.contains('most-visited-page')) {
544 this.shownPage = templateData.most_visited_page_id; 585 this.shownPage = templateData.most_visited_page_id;
545 this.shownPageIndex = 0; 586 this.shownPageIndex = 0;
587 } else if (page.classList.contains('suggestions-page')) {
588 this.shownPage = templateData.suggestions_page_id;
589 this.shownPageIndex = 0;
546 } else { 590 } else {
547 console.error('unknown page selected'); 591 console.error('unknown page selected');
548 } 592 }
549 chrome.send('pageSelected', [this.shownPage, this.shownPageIndex]); 593 chrome.send('pageSelected', [this.shownPage, this.shownPageIndex]);
550 } 594 }
551 595
552 // Update the active dot 596 // Update the active dot
553 var curDot = this.dotList.getElementsByClassName('selected')[0]; 597 var curDot = this.dotList.getElementsByClassName('selected')[0];
554 if (curDot) 598 if (curDot)
555 curDot.classList.remove('selected'); 599 curDot.classList.remove('selected');
(...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after
662 if (page.navigationDot) 706 if (page.navigationDot)
663 page.navigationDot.remove(opt_animate); 707 page.navigationDot.remove(opt_animate);
664 this.cardSlider.removeCard(page); 708 this.cardSlider.removeCard(page);
665 }, 709 },
666 }; 710 };
667 711
668 return { 712 return {
669 PageListView: PageListView 713 PageListView: PageListView
670 }; 714 };
671 }); 715 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698