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

chrome/browser/resources/media_router/media_router_data.js

 // Copyright 2015 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.
 
 // Any strings used here will already be localized. Values such as
 // CastMode.type or IDs will be defined elsewhere and determined later.
 cr.define('media_router', function() {
   'use strict';
 
   /**
@@ skipping 20 matching lines @@
   var MediaRouterView = {
     CAST_MODE_LIST: 'cast-mode-list',
     FILTER: 'filter',
     ISSUE: 'issue',
     ROUTE_DETAILS: 'route-details',
     SINK_LIST: 'sink-list',
   };
 
   /**
    * This corresponds to the C++ MediaSink IconType.
-   * @enum {mumber}
+   * @enum {number}
    */
   var SinkIconType = {
     CAST: 0,
     CAST_AUDIO: 1,
     CAST_AUDIO_GROUP: 2,
     GENERIC: 3,
     HANGOUT: 4,
   };
 
   /**
    * @enum {string}
    */
   var SinkStatus = {
     IDLE: 'idle',
     ACTIVE: 'active',
     REQUEST_PENDING: 'request_pending'
   };

[Dan Beam, 2015/12/10 23:41:34]

^ just move these out of the cr.define(), and if you want them to stay
namespaced

cr.exportPath('media_router');

/** @enum {number} */
media_router.SinkIconType = {...};

[imcheng, 2015/12/11 01:14:59]

Done.

 
 
   /**
-   * @param {media_router.CastModeType} type The type of cast mode.
+   * @param {number} type The type of cast mode.
    * @param {string} description The description of the cast mode.
    * @param {?string} host The hostname of the site to cast.
    * @constructor
    * @struct
    */
   var CastMode = function(type, description, host) {
     /** @type {number} */
     this.type = type;
 
     /** @type {string} */
     this.description = description;
 
     /** @type {?string} */
     this.host = host || null;
   };
 
   /**
    * Placeholder object for AUTO cast mode. See comment in CastModeType.
    * @const {!media_router.CastMode}
    */
   var AUTO_CAST_MODE = new CastMode(CastModeType.AUTO,
       loadTimeData.getString('autoCastMode'), null);
 
+  /**
+   * @const {string}
+   */
+  var DEVICE_MISSING_TEXT = loadTimeData.getString('deviceMissing');
+
+  /**
+   * @const {string}
+   */
+  var ISSUE_HEADER_TEXT = loadTimeData.getString('issueHeader');
+
+  /**
+   * @const {string}
+   */
+  var SELECT_CAST_MODE_HEADER_TEXT =
+      loadTimeData.getString('selectCastModeHeader');
+
+  /**
+   * @const {string}
+   */
+  var SHARE_YOUR_SCREEN_SUBHEADING_TEXT =
+      loadTimeData.getString('shareYourScreenSubheading');
+
+  /**
+   * @const {string}
+   */
+  var STOP_CASTING_BUTTON_TEXT = loadTimeData.getString('stopCastingButton');

[Dan Beam, 2015/12/10 23:41:34]

why are these better?  also, have you see I18nBehavior?

[imcheng, 2015/12/11 01:14:59]

Calling loadtimeData from Polymer properties doesn't work: "ERROR - No
properties on this expression"

I could make the value be function() { return loadtimeData.getString(...); }.
But since the string is more of a static constant I wonder if that's the right
thing to do? Or it doesn't matter since media-router-container is supposedly a
singleton?

[Dan Beam, 2015/12/11 04:58:46]

you just need to include load_time_data.js, string.js, and i18n_template.js
before this template

also, yes: you could defer creating the property with:

  properties: {
    i18n_: function() {
      return {
        MSG1: loadTimeData.getString('msg1'),
        ...
      },
    },
  },

and bind to

  [[i18n_.MSG1]]

as well as the single value format like you mentioned:

  properties: {
    MSG1: {
      type: String,
      value: function() { return loadTimeData.getString('msg1'); },
    },
  },

[imcheng, 2015/12/11 20:00:46]

Done. Went with latter.

 
   /**
    * @param {string} id The ID of this issue.
    * @param {string} title The issue title.
    * @param {string} message The issue message.
    * @param {number} defaultActionType The type of default action.
    * @param {?number} secondaryActionType The type of optional action.
    * @param {?string} mediaRouteId The route ID to which this issue
    *                  pertains. If not set, this is a global issue.
    * @param {boolean} isBlocking True if this issue blocks other UI.
@@ skipping 61 matching lines @@
 
     /** @type {?string} */
     this.customControllerPath = customControllerPath;
   };
 
 
   /**
    * @param {string} id The ID of the media sink.
    * @param {string} name The name of the sink.
    * @param {?string} description Optional description of the sink.
-   * @param {media_router.SinkIconType} iconType the type of icon for the sink.
-   * @param {media_router.SinkStatus} status The readiness state of the sink.
+   * @param {number} iconType the type of icon for the sink.

[imcheng, 2015/12/10 21:37:21]

The compiler won't let me use media_router.SinkIconType here. Looking at other
projects' code it seems it is WAI?

[imcheng, 2015/12/11 01:14:59]

Moving the enum out of cr.define and using cr.export solves the problem.

+   * @param {string} status The readiness state of the sink.
    * @param {number} castModes Bitset of cast modes compatible with the sink.
    * @constructor
    * @struct
    */
   var Sink = function(id, name, description, iconType, status, castModes) {
     /** @type {string} */
     this.id = id;
 
     /** @type {string} */
     this.name = name;
 
     /** @type {?string} */
     this.description = description;
 
-    /** @type {SinkIconType} */
+    /** @type {number} */
     this.iconType = iconType;
 
-    /** @type {media_router.SinkStatus} */
+    /** @type {string} */
     this.status = status;
 
     /** @type {number} */
     this.castModes = castModes;
   };
 
 
   /**
    * @param {number} tabId The current tab ID.
    * @param {string} domain The domain of the current tab.
    * @constructor
    * @struct
    */
   var TabInfo = function(tabId, domain) {
     /** @type {number} */
     this.tabId = tabId;
 
     /** @type {string} */
     this.domain = domain;
   };
 
   return {
     AUTO_CAST_MODE: AUTO_CAST_MODE,
+    DEVICE_MISSING_TEXT: DEVICE_MISSING_TEXT,
+    ISSUE_HEADER_TEXT: ISSUE_HEADER_TEXT,
+    SELECT_CAST_MODE_HEADER_TEXT: SELECT_CAST_MODE_HEADER_TEXT,
+    SHARE_YOUR_SCREEN_SUBHEADING_TEXT: SHARE_YOUR_SCREEN_SUBHEADING_TEXT,
+    STOP_CASTING_BUTTON_TEXT: STOP_CASTING_BUTTON_TEXT,
     CastModeType: CastModeType,
     MediaRouterView: MediaRouterView,
     SinkIconType: SinkIconType,
     SinkStatus: SinkStatus,
     CastMode: CastMode,
     Issue: Issue,
     Route: Route,
     Sink: Sink,
     TabInfo: TabInfo,
   };
 });