[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 timestamp for when the initial media status was loaded.
+     * @private {number}
+     */
+    initialLoadTime_: {
+      type: Number,
+      value: 0,
+    },
+
+    /**
      * 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 timestamp for when the route details view was opened.
+     * @type {number}
+     */
+    routeDetailsOpenTime: {
+      type: Number,
+      value: 0,
+    },
+
+    /**
      * 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 92 matching lines @@
    */
   onPlayPause_: function() {
     if (this.routeStatus.isPaused) {
       media_router.browserApi.playCurrentMedia();
     } else {
       media_router.browserApi.pauseCurrentMedia();
     }
   },
 
   /**
-   * 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);
-  },
-
-  /**
    * 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_ = Date.now();
+      media_router.browserApi.reportWebUIRouteControllerLoaded(
+          this.initialLoadTime_ - this.routeDetailsOpenTime);
+    }
   },
 
   /**
    * 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 41 matching lines @@
    * Called when the user starts dragging the volume bar.
    * @param {!Event} e
    *
    * @private
    */
   onVolumeChangeStart_: function(e) {
     this.isVolumeChanging_ = true;
     var target = /** @type {{immediateValue: number}} */ (e.target);
     this.volumeSliderValue_ = target.immediateValue;
   },
+
+  /**
+   * 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);
+  },
 });