Desktop NTP: Add a UMA metric NewTabPage.TilesReceivedTime

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';
 
 
 /**
  * The different types of events that are logged from the NTP.  This enum is
  * used to transfer information from the NTP JavaScript to the renderer and is
  * not used as a UMA enum histogram's logged value.
  * Note: Keep in sync with common/ntp_logging_events.h
  * @enum {number}
  * @const
  */
 var LOG_TYPE = {
-  // All NTP Tiles have finished loading (successfully or failing).
+  // All NTP tiles have finished loading (successfully or failing).
   NTP_ALL_TILES_LOADED: 11,
+  // 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
  * @enum {number}
  * @const
  */
 var NTPTileSource = {
@@ skipping 78 matching lines @@
 }
 
 /**
  * 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) {
-    showTiles();
+    swapInNewTiles();
     logEvent(LOG_TYPE.NTP_ALL_TILES_LOADED);
     window.parent.postMessage({cmd: 'loaded'}, DOMAIN_ORIGIN);
     // TODO(treib): Why do we reset to 1 here?
     loadedCounter = 1;
   }
 };
 
 
 /**
  * Handles postMessages coming from the host page to the iframe.
@@ skipping 14 matching lines @@
  * Handles a single command coming from the host page to the iframe.
  * We try to keep the logic here to a minimum and just dispatch to the relevant
  * functions.
  */
 var handleCommand = function(data) {
   var cmd = data.cmd;
 
   if (cmd == 'tile') {
     addTile(data);
   } else if (cmd == 'show') {
-    countLoad();
-    hideOverflowTiles(data);
+    showTiles(data);
   } else if (cmd == 'updateTheme') {
     updateTheme(data);
   } else if (cmd == 'tilesVisible') {
     hideOverflowTiles(data);
   } else {
     console.error('Unknown command: ' + JSON.stringify(data));
   }
 };
 
 
+/**
+ * Handler for the 'show' message from the host page.
+ * @param {object} info Data received in the message.
+ */
+var showTiles = function(info) {
+  logEvent(LOG_TYPE.NTP_ALL_TILES_RECEIVED);
+  countLoad();
+  hideOverflowTiles(info);
+}
+
+
+/**
+ * Handler for the 'updateTheme' message from the host page.
+ * @param {object} info Data received in the message.
+ */
 var updateTheme = function(info) {
   var themeStyle = [];
 
   if (info.tileBorderColor) {
     themeStyle.push('.mv-tile {' +
         'border: 1px solid ' + info.tileBorderColor + '; }');
   }
   if (info.tileHoverBorderColor) {
     themeStyle.push('.mv-tile:hover {' +
         'border-color: ' + info.tileHoverBorderColor + '; }');
@@ skipping 20 matching lines @@
   }
   if (info.tileTitleColor) {
     themeStyle.push('body { color: ' + info.tileTitleColor + '; }');
   }
 
   document.querySelector('#custom-theme').textContent = themeStyle.join('\n');
 };
 
 
 /**
- * Hides extra tiles that don't fit on screen.
+ * Hides extra tiles that don't fit on screen. Called in response to the 'show'
+ * and 'tilesVisible' messages from the host page.
  */
 var hideOverflowTiles = function(data) {
   var tileAndEmptyTileList = document.querySelectorAll(
       '#mv-tiles .mv-tile,#mv-tiles .mv-empty-tile');
   for (var i = 0; i < tileAndEmptyTileList.length; ++i) {
     tileAndEmptyTileList[i].classList.toggle('hidden', i >= data.maxVisible);
   }
 };
 
 
 /**
  * Removes all old instances of #mv-tiles that are pending for deletion.
  */
 var removeAllOldTiles = function() {
   var parent = document.querySelector('#most-visited');
   var oldList = parent.querySelectorAll('.mv-tiles-old');
   for (var i = 0; i < oldList.length; ++i) {
     parent.removeChild(oldList[i]);
   }
 };
 
 
 /**
- * Called when the host page has finished sending us tile information and
- * we are ready to show the new tiles and drop the old ones.
+ * Called when all tiles have finished loading (successfully or not), including
+ * their thumbnail images, and we are ready to show the new tiles and drop the
+ * old ones.
  */
-var showTiles = function() {
+var swapInNewTiles = function() {
   // Store the tiles on the current closure.
   var cur = tiles;
 
   // Create empty tiles until we have NUMBER_OF_TILES.
   while (cur.childNodes.length < NUMBER_OF_TILES) {
     addTile({});
   }
 
   var parent = document.querySelector('#most-visited');
 
@@ skipping 16 matching lines @@
   // Add new tileset.
   cur.id = 'mv-tiles';
   parent.appendChild(cur);
   // getComputedStyle causes the initial style (opacity 0) to be applied, so
   // that when we then set it to 1, that triggers the CSS transition.
   if (fadeIn) {
     window.getComputedStyle(cur).opacity;
   }
   cur.style.opacity = 1.0;
 
-  // Make sure the tiles variable contain the next tileset we may use.
+  // Make sure the tiles variable contain the next tileset we'll use if the host
+  // page sends us an updated set of tiles.
   tiles = document.createElement('div');
 };
 
 
 /**
- * Called when the host page wants to add a suggestion tile.
- * For Most Visited, it grabs the data from Chrome and pass on.
- * For host page generated it just passes the data.
+ * Handler for the 'show' message from the host page, called when it wants to
+ * add a suggestion tile.
+ * It's also used to fill up our tiles to NUMBER_OF_TILES if necessary.
  * @param {object} args Data for the tile to be rendered.
  */
 var addTile = function(args) {
   if (isFinite(args.rid)) {
-    // If a valid number passed in |args.rid|: a local chrome suggestion.
+    // If a valid number passed in |args.rid|: a local Chrome suggestion. Grab
+    // the data from the embeddedSearch API.
     var data =
         chrome.embeddedSearch.newTabPage.getMostVisitedItemData(args.rid);
     if (!data)
       return;
 
     data.tid = data.rid;
     if (!data.faviconUrl) {
       data.faviconUrl = 'chrome-search://favicon/size/16@' +
           window.devicePixelRatio + 'x/' + data.renderViewId + '/' + data.tid;
     }
@@ skipping 234 matching lines @@
   return tile;
 };
 
 
 /**
  * Does some initialization and parses the query arguments passed to the iframe.
  */
 var init = function() {
   // Create a new DOM element to hold the tiles. The tiles will be added
   // one-by-one via addTile, and the whole thing will be inserted into the page
-  // in showTiles, after the parent has sent us the 'show' message, and all
+  // in swapInNewTiles, after the parent has sent us the 'show' message, and all
   // thumbnails and favicons have loaded.
   tiles = document.createElement('div');
 
   // Parse query arguments.
   var query = window.location.search.substring(1).split('&');
   queryArgs = {};
   for (var i = 0; i < query.length; ++i) {
     var val = query[i].split('=');
     if (val[0] == '') continue;
     queryArgs[decodeURIComponent(val[0])] = decodeURIComponent(val[1]);
@@ skipping 10 matching lines @@
     var html = document.querySelector('html');
     html.dir = 'rtl';
   }
 
   window.addEventListener('message', handlePostMessage);
 };
 
 
 window.addEventListener('DOMContentLoaded', init);
 })();