chrome/browser/resources/local_ntp/most_visited_thumbnail.js

   1 // Copyright 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5
   6 /**
   7  * @fileoverview Rendering for iframed most visited thumbnails.
   8  */
   9
  10 window.addEventListener('DOMContentLoaded', function() {
  11   'use strict';
  12
  13   fillMostVisited(document.location, function(params, data) {
  14     function logEvent(eventName) {
  15       chrome.embeddedSearch.newTabPage.logEvent(eventName);
  16     }
  17     function showDomainElement() {
  18       logEvent(NTP_LOGGING_EVENT_TYPE.NTP_THUMBNAIL_ERROR);
  19       var link = createMostVisitedLink(
  20           params, data.url, data.title, undefined, data.ping);
  21       var domain = document.createElement('div');
  22       domain.textContent = data.domain;
  23       link.appendChild(domain);
  24       document.body.appendChild(link);
  25     }
  26     // Called on intentionally empty tiles for which the visuals are handled
  27     // externally by the page itself.
  28     function showEmptyTile() {
  29       var link = createMostVisitedLink(
  30           params, data.url, data.title, undefined, data.ping);
  31       document.body.appendChild(link);
  32       logEvent(NTP_LOGGING_EVENT_TYPE.NTP_EXTERNAL_TILE);
  33     }
  34     function createAndAppendThumbnail(isVisible) {
  35       var image = new Image();
  36       image.onload = function() {
  37         var shadow = document.createElement('span');
  38         shadow.classList.add('shadow');
  39         var link = createMostVisitedLink(
  40             params, data.url, data.title, undefined, data.ping);
  41         link.appendChild(shadow);
  42         link.appendChild(image);
  43         // We add 'position: absolute' in anticipation that there could be more
  44         // than one thumbnail. This will superpose the elements.
  45         link.style.position = 'absolute';
  46         document.body.appendChild(link);
  47       };
  48       if (!isVisible) {
  49         image.style.visibility = 'hidden';
  50       }
  51       return image;
  52     }
  53     if (data.thumbnailUrl) {
  54       var image = createAndAppendThumbnail(true);
  55       // If a backup thumbnail URL was provided, preload it in case the first
  56       // thumbnail errors. The backup thumbnail is always preloaded so that the
  57       // server can't gain knowledge on the local thumbnail DB by specifying a
  58       // second URL that is only sometimes fetched.
  59       if (data.thumbnailUrl2) {
  60         var image2 = createAndAppendThumbnail(false);
  61         var imageFailed = false;
  62         var image2Failed = false;
  63         image2.onerror = function() {
  64           image2Failed = true;
  65           image2.style.visibility = 'hidden';
  66           if (imageFailed) {
  67             showDomainElement();
  68           }
  69         };
  70         image2.src = data.thumbnailUrl2;
  71         // The first thumbnail's onerror function will swap the visibility of
  72         // the two thumbnails.
  73         image.onerror = function() {
  74           logEvent(NTP_LOGGING_EVENT_TYPE.NTP_FALLBACK_THUMBNAIL_USED);
  75           imageFailed = true;
  76           image.style.visibility = 'hidden';
  77           if (image2Failed) {
  78             showDomainElement();
  79           } else {
  80             image2.style.visibility = 'visible';
  81           }
  82         };
  83         logEvent(NTP_LOGGING_EVENT_TYPE.NTP_FALLBACK_THUMBNAIL_REQUESTED);
  84       } else {
  85         image.onerror = showDomainElement;
  86       }
  87       image.src = data.thumbnailUrl;
  88       logEvent(NTP_LOGGING_EVENT_TYPE.NTP_THUMBNAIL_ATTEMPT);
  89     } else if (data.domain) {
  90       showDomainElement();
  91     } else {
  92       showEmptyTile();
  93     }
  94   });
  95 });