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

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

Index: chrome/browser/resources/media_router/elements/route_controls/route_controls.js
diff --git a/chrome/browser/resources/media_router/elements/route_controls/route_controls.js b/chrome/browser/resources/media_router/elements/route_controls/route_controls.js
index 4d3a65bc61b8b87fbab79581dc093b0bd3a33a32..91d86b54ca8b44b888e94754f84d23783d006285 100644
--- a/chrome/browser/resources/media_router/elements/route_controls/route_controls.js
+++ b/chrome/browser/resources/media_router/elements/route_controls/route_controls.js
@@ -39,6 +39,15 @@ Polymer({
       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.
@@ -59,6 +68,15 @@ Polymer({
       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}
@@ -171,15 +189,6 @@ Polymer({
     }
   },
 
-  /**
-   * 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.
@@ -197,6 +206,11 @@ Polymer({
     if (newRouteStatus.description !== '') {
       this.displayedDescription_ = newRouteStatus.description;
     }
+    if (!this.initialLoadTime_) {
+      this.initialLoadTime_ = Date.now();
+      media_router.browserApi.reportWebUIRouteControllerLoaded(
+          this.initialLoadTime_ - this.routeDetailsOpenTime);
+    }
   },
 
   /**
@@ -258,4 +272,13 @@ Polymer({
     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);
+  },
 });