[Media Router] Add UMA metrics to record the load time for route controls

chrome/browser/resources/media_router/elements/route_controls/route_controls.js

 // Copyright 2017 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.
 
 /**
  * This Polymer element shows media controls for a route that is currently cast
  * to a device.
  * @implements {RouteControlsInterface}
  */
 Polymer({
@@ skipping 22 matching lines @@
     /**
      * The volume shown in the volume control, between 0 and 1.
      * @private {number}
      */
     displayedVolume_: {
       type: Number,
       value: 0,
     },
 
     /**
+     * The time when the initial media status was loaded.
+     * @private {?Date}
+     */
+    initialLoadTime_: {
+      type: Date,
+      value: null,
+    },
+
+    /**
      * Set to true when the user is dragging the seek bar. Updates for the
      * current time from the browser will be ignored when set to true.
      * @private {boolean}
      */
     isSeeking_: {
       type: Boolean,
       value: false,
     },
 
     /**
      * Set to true when the user is dragging the volume bar. Volume updates from
      * the browser will be ignored when set to true.
      * @private {boolean}
      */
     isVolumeChanging_: {
       type: Boolean,
       value: false,
     },
 
     /**
+     * The time when the route details view was opened.
+     * @type {?Date}
+     */
+    routeDetailsOpenTime: {
+      type: Date,
+      value: null,
+      observer: 'onRouteDetailsOpenTimeSet_',

[imcheng, 2017/06/02 23:53:13]

We can use maybeReportLoadTime_ here. Then we won't need
onRouteDetailsOpenTimeSet_. But then if we set openTime on route details during
construction, then I don't think we need the observer here.

[takumif, 2017/06/03 01:31:14]

Right, the observer is no longer necessary. Removed.

+    },
+
+    /**
      * The status of the media route shown.
      * @type {!media_router.RouteStatus}
      */
     routeStatus: {
       type: Object,
       observer: 'onRouteStatusChange_',
       value: new media_router.RouteStatus(
           '', '', false, false, false, false, false, false, 0, 0, 0),
     },
   },
@@ skipping 68 matching lines @@
    * @return {string} Localized title for the play/pause button.
    *
    * @private
    */
   getPlayPauseTitle_: function(routeStatus) {
     return routeStatus.isPaused ? this.i18n('playTitle') :
                                   this.i18n('pauseTitle');
   },
 
   /**
+   * Notify the browser the time it took from opening the route details view to
+   * loading the route controller if the data is available.
+   *
+   * @private
+   */
+  maybeReportLoadTime_: function() {
+    if (this.initialLoadTime_ && this.routeDetailsOpenTime) {
+      var timeMs = this.initialLoadTime_ - this.routeDetailsOpenTime;
+      media_router.browserApi.reportWebUIRouteControllerLoaded(timeMs);
+    }
+  },
+
+  /**
    * Called when the user toggles the mute status of the media. Sends a mute or
    * unmute command to the browser.
    *
    * @private
    */
   onMuteUnmute_: function() {
     media_router.browserApi.setCurrentMediaMute(!this.routeStatus.isMuted);
   },
 
   /**
@@ skipping 13 matching lines @@
   /**
    * Resets the route controls. Called when the route details view is closed.
    */
   reset: function() {
     this.routeStatus = new media_router.RouteStatus(
         '', '', false, false, false, false, false, false, 0, 0, 0);
     media_router.ui.setRouteControls(null);
   },
 
   /**
+   * Called when |routeDetailsOpenTime| is set.
+   *
+   * @private
+   */
+  onRouteDetailsOpenTimeSet_: function() {
+    this.maybeReportLoadTime_();
+  },
+
+  /**
    * Updates seek and volume bars if the user is not currently dragging on
    * them.
    * @param {!media_router.RouteStatus} newRouteStatus
    *
    * @private
    */
   onRouteStatusChange_: function(newRouteStatus) {
     if (!this.isSeeking_) {
       this.displayedCurrentTime_ = newRouteStatus.currentTime;
     }
     if (!this.isVolumeChanging_) {
       this.displayedVolume_ = newRouteStatus.volume;
     }
     if (newRouteStatus.description !== '') {
       this.displayedDescription_ = newRouteStatus.description;
     }
+    if (!this.initialLoadTime_) {
+      this.initialLoadTime_ = new Date();

[imcheng, 2017/06/02 23:53:13]

Date.now()

[takumif, 2017/06/03 01:31:14]

Done.

+      this.maybeReportLoadTime_();
+    }
   },
 
   /**
    * Called when the route is updated. Updates the description shown if it has
    * not been provided by status updates.
    * @param {!media_router.Route} route
    */
   onRouteUpdated: function(route) {
     if (this.routeStatus.description === '') {
       this.displayedDescription_ =
@@ skipping 42 matching lines @@
    * @param {!Event} e
    *
    * @private
    */
   onVolumeChangeStart_: function(e) {
     this.isVolumeChanging_ = true;
     var target = /** @type {{immediateValue: number}} */ (e.target);
     this.volumeSliderValue_ = target.immediateValue;
   },
 });