NTP: Record TileType metrics also on desktop

chrome/browser/resources/local_ntp/most_visited_single.js

 /* Copyright 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
  // Single iframe for NTP tiles.
 (function() {
 'use strict';
 
 
 /**
@@ skipping 10 matching lines @@
   // The data for all NTP tiles (title, URL, etc, but not the thumbnail image)
   // has been received. In contrast to NTP_ALL_TILES_LOADED, this is recorded
   // before the actual DOM elements have loaded (in particular the thumbnail
   // images).
   NTP_ALL_TILES_RECEIVED: 12,
 };
 
 
 /**
  * The different sources that an NTP tile can have.
- * Note: Keep in sync with components/ntp_tiles/ntp_tile_source.h
+ * Note: Keep in sync with components/ntp_tiles/tile_source.h
  * @enum {number}
  * @const
  */
-var NTPTileSource = {
+var TileSource = {
   TOP_SITES: 0,
   SUGGESTIONS_SERVICE: 1,
   POPULAR: 3,
   WHITELIST: 4,
 };
 
 
 /**
+ * The different (visual) types that an NTP tile can have.
+ * Note: Keep in sync with components/ntp_tiles/tile_visual_type.h
+ * @enum {number}
+ * @const
+ */
+var TileVisualType = {
+  NONE: 0,
+  ICON_REAL: 1,
+  ICON_COLOR: 2,
+  ICON_DEFAULT: 3,
+  THUMBNAIL: 4,
+  THUMBNAIL_FAILED: 5,
+};
+
+
+/**
  * Total number of tiles to show at any time. If the host page doesn't send
  * enough tiles, we fill them blank.
  * @const {number}
  */
 var NUMBER_OF_TILES = 8;
 
 
 /**
  * Number of lines to display in titles.
  * @type {number}
@@ skipping 35 matching lines @@
  * Log an event on the NTP.
  * @param {number} eventType Event from LOG_TYPE.
  */
 var logEvent = function(eventType) {
   chrome.embeddedSearch.newTabPage.logEvent(eventType);
 };
 
 /**
  * Log impression of an NTP tile.
  * @param {number} tileIndex Position of the tile, >= 0 and < NUMBER_OF_TILES.
- * @param {number} tileSource The source from NTPTileSource.
+ * @param {number} tileSource The source from TileSource.
+ * @param {number} tileType The type from TileVisualType.
  */
-function logMostVisitedImpression(tileIndex, tileSource) {
+function logMostVisitedImpression(tileIndex, tileSource, tileType) {
   chrome.embeddedSearch.newTabPage.logMostVisitedImpression(tileIndex,
-                                                            tileSource);
+                                                            tileSource,
+                                                            tileType);
 }
 
 /**
  * Log click on an NTP tile.
  * @param {number} tileIndex Position of the tile, >= 0 and < NUMBER_OF_TILES.
- * @param {number} tileSource The source from NTPTileSource.
+ * @param {number} tileSource The source from TileSource.
+ * @param {number} tileType The type from TileVisualType.
  */
-function logMostVisitedNavigation(tileIndex, tileSource) {
+function logMostVisitedNavigation(tileIndex, tileSource, tileType) {
   chrome.embeddedSearch.newTabPage.logMostVisitedNavigation(tileIndex,
-                                                            tileSource);
+                                                            tileSource,
+                                                            tileType);
 }
 
 /**
  * Down counts the DOM elements that we are waiting for the page to load.
  * When we get to 0, we send a message to the parent window.
  * This is usually used as an EventListener of onload/onerror.
  */
 var countLoad = function() {
   loadedCounter -= 1;
   if (loadedCounter <= 0) {
@@ skipping 186 matching lines @@
       return;
 
     data.tid = data.rid;
     if (!data.faviconUrl) {
       data.faviconUrl = 'chrome-search://favicon/size/16@' +
           window.devicePixelRatio + 'x/' + data.renderViewId + '/' + data.tid;
     }
     tiles.appendChild(renderTile(data));
   } else if (args.url) {
     // If a URL is passed: a server-side suggestion.
-    args.tileSource = NTPTileSource.SUGGESTIONS_SERVICE;
+    args.tileSource = TileSource.SUGGESTIONS_SERVICE;
     // check sanity of the arguments
     if (/^javascript:/i.test(args.url) ||
         /^javascript:/i.test(args.thumbnailUrl))
       return;
     tiles.appendChild(renderTile(args));
   } else {  // an empty tile
     tiles.appendChild(renderTile(null));
   }
 };
 
@@ skipping 33 matching lines @@
 var renderTile = function(data) {
   var tile = document.createElement('a');
 
   if (data == null) {
     tile.className = 'mv-empty-tile';
     return tile;
   }
 
   // The tile will be appended to tiles.
   var position = tiles.children.length;
-  logMostVisitedImpression(position, data.tileSource);
+
+  // This is set in the load/error event for the thumbnail image.
+  var tileType = TileVisualType.NONE;
 
   tile.className = 'mv-tile';
   tile.setAttribute('data-tid', data.tid);
   var html = [];
   html.push('<div class="mv-favicon"></div>');
   html.push('<div class="mv-title"></div><div class="mv-thumb"></div>');
   html.push('<div class="mv-x" role="button"></div>');
   tile.innerHTML = html.join('');
   tile.lastElementChild.title = queryArgs['removeTooltip'] || '';
 
   if (isSchemeAllowed(data.url)) {
     tile.href = data.url;
   }
   tile.setAttribute('aria-label', data.title);
   tile.title = data.title;
 
   tile.addEventListener('click', function(ev) {
-    logMostVisitedNavigation(position, data.tileSource);
+    logMostVisitedNavigation(position, data.tileSource, tileType);
   });
 
   tile.addEventListener('keydown', function(event) {
     if (event.keyCode == 46 /* DELETE */ ||
         event.keyCode == 8 /* BACKSPACE */) {
       event.preventDefault();
       event.stopPropagation();
       blacklistTile(this);
     } else if (event.keyCode == 13 /* ENTER */ ||
                event.keyCode == 32 /* SPACE */) {
@@ skipping 36 matching lines @@
   title.style.direction = data.direction || 'ltr';
   if (NUM_TITLE_LINES > 1) {
     title.classList.add('multiline');
   }
 
   var thumb = tile.querySelector('.mv-thumb');
   var img = document.createElement('img');
   img.title = data.title;
   img.src = data.thumbnailUrl;
   loadedCounter += 1;
-  img.addEventListener('load', countLoad);
-  img.addEventListener('error', countLoad);
+  img.addEventListener('load', function(ev) {
+    // Store the type for a potential later navigation.
+    tileType = TileVisualType.THUMBNAIL;
+    logMostVisitedImpression(position, data.tileSource, tileType);
+    // Note: It's important to call countLoad last, because that might emit the
+    // NTP_ALL_TILES_LOADED event, which must happen after the impression log.
+    countLoad();
+  });
   img.addEventListener('error', function(ev) {
     thumb.classList.add('failed-img');
     thumb.removeChild(img);
+    // Store the type for a potential later navigation.
+    tileType = TileVisualType.THUMBNAIL_FAILED;
+    logMostVisitedImpression(position, data.tileSource, tileType);
+    // Note: It's important to call countLoad last, because that might emit the
+    // NTP_ALL_TILES_LOADED event, which must happen after the impression log.
+    countLoad();
   });
   thumb.appendChild(img);
 
   var favicon = tile.querySelector('.mv-favicon');
   if (data.faviconUrl) {
     var fi = document.createElement('img');
     fi.src = data.faviconUrl;
     // Set the title to empty so screen readers won't say the image name.
     fi.title = '';
     loadedCounter += 1;
@@ skipping 49 matching lines @@
     var html = document.querySelector('html');
     html.dir = 'rtl';
   }
 
   window.addEventListener('message', handlePostMessage);
 };
 
 
 window.addEventListener('DOMContentLoaded', init);
 })();