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

Side by Side Diff: chrome/browser/resources/local_ntp/most_visited_single.js

Issue 2786833003: NTP thumbnails: Always pass singular "thumbnailUrl" to the iframe (Closed)
Patch Set: . Created 3 years, 8 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 2015 The Chromium Authors. All rights reserved. 1 /* Copyright 2015 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 // Single iframe for NTP tiles. 5 // Single iframe for NTP tiles.
6 (function() { 6 (function() {
7 'use strict'; 7 'use strict';
8 8
9 9
10 /** 10 /**
(...skipping 423 matching lines...) Expand 10 before | Expand all | Expand 10 after
434 } 434 }
435 }); 435 });
436 436
437 var title = tile.querySelector('.mv-title'); 437 var title = tile.querySelector('.mv-title');
438 title.innerText = data.title; 438 title.innerText = data.title;
439 title.style.direction = data.direction || 'ltr'; 439 title.style.direction = data.direction || 'ltr';
440 if (NUM_TITLE_LINES > 1) { 440 if (NUM_TITLE_LINES > 1) {
441 title.classList.add('multiline'); 441 title.classList.add('multiline');
442 } 442 }
443 443
444 // We keep track of the outcome of loading possible thumbnails for this
445 // tile. Possible values:
446 // - null: waiting for load/error
447 // - false: error
448 // - a string: URL that loaded correctly.
449 // This is populated by imageLoaded/imageLoadFailed, and selectBestImage
450 // selects the best one to display.
451 var results = [];
452 var thumb = tile.querySelector('.mv-thumb'); 444 var thumb = tile.querySelector('.mv-thumb');
453 var img = document.createElement('img'); 445 var img = document.createElement('img');
454 var loaded = false;
455
456 var selectBestImage = function() {
457 if (loaded) {
458 return;
459 }
460 // |results| is ordered from best candidate to worst.
461 for (var i = 0; i < results.length; ++i) {
462 if (results[i] === null) {
463 // A better candidate is still waiting to be loaded; defer.
464 return;
465 }
466 if (results[i] != false) {
467 // This is the best (non-failed) candidate. Use it!
468 img.src = results[i];
469 loaded = true;
470 return;
471 }
472 }
473 // If we get here, then all candidates failed to load.
474 thumb.classList.add('failed-img');
475 thumb.removeChild(img);
476 // Usually we count the load once the img element gets either a 'load' or
477 // an 'error' event. Since we have removed the img element, instead count
478 // the load here.
479 countLoad();
480 };
481
482 var imageLoaded = function(idx, url) {
483 return function(ev) {
484 results[idx] = url;
485 selectBestImage();
486 };
487 };
488
489 var imageLoadFailed = function(idx) {
490 return function(ev) {
491 results[idx] = false;
492 selectBestImage();
493 };
494 };
495
496 img.title = data.title; 446 img.title = data.title;
447 img.src = data.thumbnailUrl;
497 loadedCounter += 1; 448 loadedCounter += 1;
498 img.addEventListener('load', countLoad); 449 img.addEventListener('load', countLoad);
499 img.addEventListener('error', countLoad); 450 img.addEventListener('error', countLoad);
500 img.addEventListener('error', function(ev) { 451 img.addEventListener('error', function(ev) {
501 thumb.classList.add('failed-img'); 452 thumb.classList.add('failed-img');
502 thumb.removeChild(img); 453 thumb.removeChild(img);
503 }); 454 });
504 thumb.appendChild(img); 455 thumb.appendChild(img);
505 456
506 if (data.thumbnailUrl) {
507 img.src = data.thumbnailUrl;
508 } else {
509 // Get all thumbnailUrls for the tile.
510 // They are ordered from best one to be used to worst.
511 for (var i = 0; i < data.thumbnailUrls.length; ++i) {
512 results.push(null);
513 }
514 for (var i = 0; i < data.thumbnailUrls.length; ++i) {
515 if (data.thumbnailUrls[i]) {
516 var image = new Image();
517 image.src = data.thumbnailUrls[i];
518 image.onload = imageLoaded(i, data.thumbnailUrls[i]);
519 image.onerror = imageLoadFailed(i);
520 } else {
521 imageLoadFailed(i)(/*ev=*/null);
522 }
523 }
524 }
525
526 var favicon = tile.querySelector('.mv-favicon'); 457 var favicon = tile.querySelector('.mv-favicon');
527 if (data.faviconUrl) { 458 if (data.faviconUrl) {
528 var fi = document.createElement('img'); 459 var fi = document.createElement('img');
529 fi.src = data.faviconUrl; 460 fi.src = data.faviconUrl;
530 // Set the title to empty so screen readers won't say the image name. 461 // Set the title to empty so screen readers won't say the image name.
531 fi.title = ''; 462 fi.title = '';
532 loadedCounter += 1; 463 loadedCounter += 1;
533 fi.addEventListener('load', countLoad); 464 fi.addEventListener('load', countLoad);
534 fi.addEventListener('error', countLoad); 465 fi.addEventListener('error', countLoad);
535 fi.addEventListener('error', function(ev) { 466 fi.addEventListener('error', function(ev) {
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after
582 var html = document.querySelector('html'); 513 var html = document.querySelector('html');
583 html.dir = 'rtl'; 514 html.dir = 'rtl';
584 } 515 }
585 516
586 window.addEventListener('message', handlePostMessage); 517 window.addEventListener('message', handlePostMessage);
587 }; 518 };
588 519
589 520
590 window.addEventListener('DOMContentLoaded', init); 521 window.addEventListener('DOMContentLoaded', init);
591 })(); 522 })();
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698