History: Add load-time metric for non-MD and MD History WebUI

chrome/browser/resources/history/history.js

 // Copyright (c) 2012 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.
 
 <include src="../uber/uber_utils.js">
 <include src="history_focus_manager.js">
 
 ///////////////////////////////////////////////////////////////////////////////
 // Globals:
 /** @const */ var RESULTS_PER_PAGE = 150;
@@ skipping 57 matching lines @@
  * @param {number} maxBucketValue The max value for the last histogram bucket.
  * @param {number} value The value to record in the histogram.
  */
 function recordUmaHistogram(histogram, maxBucketValue, value) {
   chrome.send('metricsHandler:recordInHistogram',
               [histogram,
               ((value > maxBucketValue) ? maxBucketValue : value),
               maxBucketValue]);
 }
 
+/**
+ * Record the current time in milliseconds since pageload into a UMA histogram.
+ * @param {string} histogram The name of the histogram to be recorded in.
+ */
+function recordTimeHistogram(histogram) {

[calamity, 2016/08/03 08:23:22]

Is this worth moving into cr_util.js?

[calamity, 2016/08/03 08:23:22]

Param no longer needed?

[Dan Beam, 2016/08/03 21:05:17]

why not just inline this method?  it's only used once

[tsergeant, 2016/08/03 22:53:56]

Sure, inlined.

+  chrome.send('metricsHandler:recordTime', [histogram, performance.now()]);
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // Visit:
 
 /**
  * Class to hold all the information about an entry in our model.
  * @param {HistoryEntry} result An object containing the visit's data.
  * @param {boolean} continued Whether this visit is on the same day as the
  *     visit before it.
  * @param {HistoryModel} model The model object this entry belongs to.
  * @constructor
@@ skipping 844 matching lines @@
  */
 function HistoryView(model) {
   this.editButtonTd_ = $('edit-button');
   this.editingControlsDiv_ = $('editing-controls');
   this.resultDiv_ = $('results-display');
   this.focusGrid_ = new cr.ui.FocusGrid();
   this.pageDiv_ = $('results-pagination');
   this.model_ = model;
   this.pageIndex_ = 0;
   this.lastDisplayed_ = [];
+  this.hasRenderedResults_ = false;
 
   this.model_.setView(this);
 
   this.currentVisits_ = [];
 
   // If there is no search button, use the search button label as placeholder
   // text in the search field.
   if ($('search-button').offsetWidth == 0)
     $('search-field').placeholder = $('search-button').value;
 
@@ skipping 163 matching lines @@
   document.body.classList.toggle('has-results', hasResults);
 
   this.updateFocusGrid_();
   this.updateNavBar_();
 
   if (isMobileVersion()) {
     // Hide the search field if it is empty and there are no results.
     var isSearch = this.model_.getSearchText().length > 0;
     $('search-field').hidden = !(hasResults || isSearch);
   }
+
+  if (!this.hasRenderedResults_) {
+    this.hasRenderedResults_ = true;
+    requestAnimationFrame(function() {

[tsergeant, 2016/08/03 07:37:04]

I have two main options here:

* requestAnimationFrame, which will always fire just before the next repaint.
That means it doesn't take into account the time taken for paint itself.

* setTimeout 0, which seems to be -after- the next paint but before the
iron-list renders more items. However, I'm really not sure what kind of
guarantees there are on this -- particularly since the rest of the iron-list
rendering is also scheduled with setTimeout.

I've gone with rAF, since it's the one which I'm more certain about. WDYT?

[calamity, 2016/08/03 08:23:23]

rAF sgtm.

+      recordTimeHistogram('History.ResultsRenderedTime');
+    });
+  }
 };
 
 /**
  * Enables or disables the buttons that control editing entries depending on
  * whether there are any checked boxes.
  */
 HistoryView.prototype.updateSelectionEditButtons = function() {
   if (loadTimeData.getBoolean('allowDeletingHistory')) {
     var anyChecked = document.querySelector('.entry input:checked') != null;
     $('remove-selected').disabled = !anyChecked;
@@ skipping 1268 matching lines @@
     historyView.reload();
 }
 
 // Add handlers to HTML elements.
 document.addEventListener('DOMContentLoaded', load);
 
 // This event lets us enable and disable menu items before the menu is shown.
 document.addEventListener('canExecute', function(e) {
   e.canExecute = true;
 });