[MediaRouter UI] Compile MR WebUI js code with Closure.

chrome/browser/resources/media_router/media_router.js

Index: chrome/browser/resources/media_router/media_router.js
diff --git a/chrome/browser/resources/media_router/media_router.js b/chrome/browser/resources/media_router/media_router.js
index 0c55b88d95a858285a38a663d047ee9dc9df8218..4871665cc4a838062ff8c7191d50d046b0e80d63 100644
--- a/chrome/browser/resources/media_router/media_router.js
+++ b/chrome/browser/resources/media_router/media_router.js
@@ -9,7 +9,10 @@
 cr.define('media_router', function() {
   'use strict';
 
-  // The media-router-container element. Initialized after polymer is ready.
+  /**
+   * The media-router-container element. Initialized after polymer is ready.
+   * @type {?MediaRouterContainerElement}
+   */
   var container = null;
 
   /**
@@ -19,7 +22,8 @@ cr.define('media_router', function() {
   function initialize() {
     media_router.browserApi.requestInitialData();
 
-    container = $('media-router-container');
+    container = /** @type {!MediaRouterContainerElement} */
+        ($('media-router-container'));
     media_router.ui.setContainer(container);
 
     container.addEventListener('close-button-click', onCloseDialogEvent);
@@ -42,12 +46,11 @@ cr.define('media_router', function() {
    * Acts on an issue and dismisses it from the UI.
    * Called when the user performs an action on an issue.
    *
-   * @param {{detail: {id: string, actionType: number, helpPageId: number}}}
-   *     data
+   * @param {!Event} data
    * Parameters in |data|.detail:
-   *   id - issue ID.
-   *   actionType - type of action performed by the user.
-   *   helpPageId - the numeric help center ID.
+   *   id (string) - issue ID.
+   *   actionType (number) - type of action performed by the user.
+   *   helpPageId (number) - the numeric help center ID.
    */
   function onIssueActionClick(data) {

[Dan Beam, 2015/12/29 01:25:38]

I would just cast in these cases, i.e.

  /** @type {{id: string, actionType: number, helpPageId: number}} */
  var details = data.detail;

OR

  var details =
      /** @type {{id: string, actionType: number, helpPageId: number}} */
          (data.details);

if required.

otherwise, how does this compile?  does the compiler not complain about
.detail.* missing?

[imcheng, 2016/01/04 20:02:04]

I am not sure why compiler doesn't complain. Is it because data.detail is just a
generic Object so it doesn't know what properties it has?

     media_router.browserApi.actOnIssue(data.detail.id,
@@ -60,10 +63,10 @@ cr.define('media_router', function() {
    * Creates a media route.
    * Called when the user requests to create a media route.
    *
-   * @param {{detail: {sinkId: string, selectedCastModeValue: number}}} data
+   * @param {!Event} data
    * Parameters in |data|.detail:
-   *   sinkId - sink ID selected by the user.
-   *   selectedCastModeValue - cast mode selected by the user.
+   *   sinkId (string) - sink ID selected by the user.
+   *   selectedCastModeValue (number) - cast mode selected by the user.
    */
   function onCreateRoute(data) {
     media_router.browserApi.requestRoute(data.detail.sinkId,
@@ -74,9 +77,9 @@ cr.define('media_router', function() {
    * Stops a route.
    * Called when the user requests to stop a media route.
    *
-   * @param {{detail: {route: string}}} data
+   * @param {!Event} data
    * Parameters in |data|.detail:
-   *   route - route ID.
+   *   route (media_router.Route) - The route to close.
    */
   function onCloseRouteClick(data) {
     media_router.browserApi.closeRoute(data.detail.route);
@@ -86,9 +89,9 @@ cr.define('media_router', function() {
    * Reports the current sink count.
    * Called 3 seconds after the dialog is initially opened.
    *
-   * @param {{detail: {sinkCount: number}}} data
+   * @param {!Event} data
    * Parameters in |data|.detail:
-   *   sinkCount - the number of sinks.
+   *   sinkCount (number) - the number of sinks.
    */
   function onSinkCountReported(data) {
     media_router.browserApi.reportSinkCount(data.detail.sinkCount);