NTP: Record TileType metrics also on desktop

chrome/browser/resources/local_ntp/most_visited_single.js

Index: chrome/browser/resources/local_ntp/most_visited_single.js
diff --git a/chrome/browser/resources/local_ntp/most_visited_single.js b/chrome/browser/resources/local_ntp/most_visited_single.js
index 703ab1164bea6dd0f62550fb1b75400664f1842e..5529abf88ea7375267be4b3815f52a2810586ab2 100644
--- a/chrome/browser/resources/local_ntp/most_visited_single.js
+++ b/chrome/browser/resources/local_ntp/most_visited_single.js
@@ -28,11 +28,11 @@ var LOG_TYPE = {
 
 /**
  * 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,
@@ -41,6 +41,22 @@ var NTPTileSource = {
 
 
 /**
+ * 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}
@@ -96,21 +112,25 @@ var logEvent = function(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);
 }
 
 /**
@@ -317,7 +337,7 @@ var addTile = function(args) {
     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))
@@ -371,7 +391,9 @@ var renderTile = function(data) {
 
   // 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);
@@ -389,7 +411,7 @@ var renderTile = function(data) {
   tile.title = data.title;
 
   tile.addEventListener('click', function(ev) {
-    logMostVisitedNavigation(position, data.tileSource);
+    logMostVisitedNavigation(position, data.tileSource, tileType);
   });
 
   tile.addEventListener('keydown', function(event) {
@@ -446,11 +468,23 @@ var renderTile = function(data) {
   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);