Settings > Internet: Use mojo for DeviceStateProperties

This CL:
* Replaces all uses of CrOnc.DeviceState in Settings UI and related
  cr_elements to OncMojo.DeviceStateProperties.
* Replaces all calls to networkingPrivate.getDeviceStates in Settings
  UI and related cr_elements to CrosNetworkConfig.getDeviceStateList.
* Modifies device related <internet-page> events to use mojo types.

Bug: 853953
Change-Id: I858fc0db3fc8d171b267776644f9a5a90fd266af
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1666840
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#672521}

chrome/browser/resources/settings/internet_page/BUILD.gn

@@ -100,6 +100,7 @@ js_library("internet_subpage") {
     "//ui/webui/resources/cr_elements/policy:cr_policy_network_behavior",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:i18n_behavior",
+    "//ui/webui/resources/js/chromeos:onc_mojo",
   ]
   externs_list = [ "$externs_path/networking_private.js" ]
   extra_sources = [ "$interfaces_path/networking_private_interface.js" ]
@@ -124,6 +125,7 @@ js_library("network_summary") {
     "//ui/webui/resources/cr_elements/chromeos/network:cr_onc_types",
     "//ui/webui/resources/cr_elements/policy:cr_policy_network_behavior",
     "//ui/webui/resources/js:assert",
+    "//ui/webui/resources/js/chromeos:onc_mojo",
   ]
   extra_sources = [ "$interfaces_path/networking_private_interface.js" ]
 }
@@ -134,6 +136,7 @@ js_library("network_summary_item") {
     "//ui/webui/resources/cr_elements/policy:cr_policy_network_behavior",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:i18n_behavior",
+    "//ui/webui/resources/js/chromeos:onc_mojo",
   ]
   extra_sources = [ "$interfaces_path/networking_private_interface.js" ]
 }

chrome/browser/resources/settings/internet_page/internet_page.html

@@ -50,7 +50,7 @@
           <template is="dom-if" if="[[addConnectionExpanded_]]">
             <div class="list-frame vertical-list">
               <template is="dom-if"
-                  if="[[deviceIsEnabled_(deviceStates.WiFi)]]">
+                  if="[[deviceIsEnabled_(deviceStates, 'WiFi')]]">
                 <div actionable class="list-item" on-click="onAddWiFiTap_">
                   <div class="start settings-box-text">
                     $i18n{internetAddWiFi}
@@ -127,7 +127,7 @@
           <settings-internet-subpage
               default-network="[[defaultNetwork]]"
               device-state="[[getDeviceState_(subpageType_, deviceStates)]]"
-              tether-device-state="[[get('Tether', deviceStates)]]"
+              tether-device-state="[[getTetherDeviceState_(deviceStates)]]"
               global-policy="[[globalPolicy_]]"
               third-party-vpn-providers="[[thirdPartyVpnProviders_]]"
               arc-vpn-providers="[[arcVpnProviders_]]"

chrome/browser/resources/settings/internet_page/internet_page.js

@@ -2,6 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+(function() {
+
+const mojom = chromeos.networkConfig.mojom;
+
 /**
  * @fileoverview
  * 'settings-internet-page' is the settings page containing internet
@@ -33,8 +37,9 @@ Polymer({
     },
 
     /**
-     * The device state for each network device type. Set by network-summary.
-     * @type {!Object<!CrOnc.DeviceStateProperties>|undefined}
+     * The device state for each network device type, keyed by NetworkType. Set
+     * by network-summary.
+     * @type {!Object<!OncMojo.DeviceStateProperties>|undefined}
      * @private
      */
     deviceStates: {
@@ -132,12 +137,12 @@ Polymer({
 
   // Element event listeners
   listeners: {
-    'device-enabled-toggled': 'onDeviceEnabledToggled_',
+    'device-enabled-toggled': 'onDeviceEnabledToggled_',  // mojo api
     'network-connect': 'onNetworkConnect_',
     'show-config': 'onShowConfig_',
     'show-detail': 'onShowDetail_',
-    'show-known-networks': 'onShowKnownNetworks_',
-    'show-networks': 'onShowNetworks_',
+    'show-known-networks': 'onShowKnownNetworks_',  // mojo api
+    'show-networks': 'onShowNetworks_',             // mojo api
   },
 
   // chrome.management listeners
@@ -277,14 +282,13 @@ Polymer({
    * Event triggered by a device state enabled toggle.
    * @param {!CustomEvent<!{
    *     enabled: boolean,
-   *     type: chrome.networkingPrivate.NetworkType
+   *     type: chromeos.networkConfig.mojom.NetworkType
    * }>} event
    * @private
    */
   onDeviceEnabledToggled_: function(event) {
     this.networkConfigProxy_.setNetworkTypeEnabledState(
-        OncMojo.getNetworkTypeFromString(event.detail.type),
-        event.detail.enabled);
+        event.detail.type, event.detail.enabled);
   },
 
   /**
@@ -338,11 +342,11 @@ Polymer({
   },
 
   /**
-   * @param {!CustomEvent<!{type: string}>} event
+   * @param {!CustomEvent<chromeos.networkConfig.mojom.NetworkType>} event
    * @private
    */
   onShowNetworks_: function(event) {
-    this.showNetworksSubpage_(event.detail.type);
+    this.showNetworksSubpage_(event.detail);
   },
 
   /**
@@ -371,37 +375,51 @@ Polymer({
 
   /**
    * @param {string} subpageType
-   * @param {!Object<!CrOnc.DeviceStateProperties>|undefined} deviceStates
-   * @return {!CrOnc.DeviceStateProperties|undefined}
+   * @param {!Object<!OncMojo.DeviceStateProperties>|undefined} deviceStates
+   * @return {!OncMojo.DeviceStateProperties|undefined}
    * @private
    */
   getDeviceState_: function(subpageType, deviceStates) {
+    if (!subpageType) {
+      return undefined;
+    }
     // If both Tether and Cellular are enabled, use the Cellular device state
     // when directly navigating to the Tether page.
     if (subpageType == CrOnc.Type.TETHER &&
-        this.deviceStates[CrOnc.Type.CELLULAR]) {
+        this.deviceStates[mojom.NetworkType.kCellular]) {
       subpageType = CrOnc.Type.CELLULAR;
     }
-    return deviceStates[subpageType];
+    return deviceStates[OncMojo.getNetworkTypeFromString(subpageType)];
+  },
+
+  /**
+   * @param {!Object<!OncMojo.DeviceStateProperties>|undefined} deviceStates
+   * @return {!OncMojo.DeviceStateProperties|undefined}
+   * @private
+   */
+  getTetherDeviceState_: function(deviceStates) {
+    return deviceStates[mojom.NetworkType.kTether];
   },
 
   /**
-   * @param {!CrOnc.DeviceStateProperties|undefined} newValue
-   * @param {!CrOnc.DeviceStateProperties|undefined} oldValue
+   * @param {!OncMojo.DeviceStateProperties|undefined} newValue
+   * @param {!OncMojo.DeviceStateProperties|undefined} oldValue
    * @private
    */
   onDeviceStatesChanged_: function(newValue, oldValue) {
     const wifiDeviceState = this.getDeviceState_(CrOnc.Type.WI_FI, newValue);
     let managedNetworkAvailable = false;
     if (wifiDeviceState) {
-      managedNetworkAvailable = !!wifiDeviceState.ManagedNetworkAvailable;
+      managedNetworkAvailable = !!wifiDeviceState.managedNetworkAvailable;
     }
 
     if (this.managedNetworkAvailable != managedNetworkAvailable) {
       this.managedNetworkAvailable = managedNetworkAvailable;
     }
 
-    if (this.detailType_ && !this.deviceStates[this.detailType_]) {
+    if (this.detailType_ &&
+        !this.deviceStates[OncMojo.getNetworkTypeFromString(
+            this.detailType_)]) {
       // If the device type associated with the current network has been
       // removed (e.g., due to unplugging a Cellular dongle), the details page,
       // if visible, displays controls which are no longer functional. If this
@@ -414,14 +432,15 @@ Polymer({
   },
 
   /**
-   * @param {!CustomEvent<!{type: string}>} event
+   * @param {!CustomEvent<chromeos.networkConfig.mojom.NetworkType>} event
    * @private
    */
   onShowKnownNetworks_: function(event) {
-    this.detailType_ = event.detail.type;
+    const oncType = OncMojo.getNetworkTypeString(event.detail);
+    this.detailType_ = oncType;
+    this.knownNetworksType_ = oncType;
     const params = new URLSearchParams;
-    params.append('type', event.detail.type);
-    this.knownNetworksType_ = event.detail.type;
+    params.append('type', oncType);
     settings.navigateTo(settings.routes.KNOWN_NETWORKS, params);
   },
 
@@ -448,18 +467,19 @@ Polymer({
 
   /** @private */
   onAddArcVpnTap_: function() {
-    this.showNetworksSubpage_(CrOnc.Type.VPN);
+    this.showNetworksSubpage_(mojom.NetworkType.kVPN);
   },
 
   /**
-   * @param {string} type
+   * @param {chromeos.networkConfig.mojom.NetworkType} type
    * @private
    */
   showNetworksSubpage_: function(type) {
-    this.detailType_ = type;
+    const oncType = OncMojo.getNetworkTypeString(type);
+    this.detailType_ = oncType;
     const params = new URLSearchParams;
-    params.append('type', type);
-    this.subpageType_ = type;
+    params.append('type', oncType);
+    this.subpageType_ = oncType;
     settings.navigateTo(settings.routes.INTERNET_NETWORKS, params);
   },
 
@@ -559,12 +579,16 @@ Polymer({
   },
 
   /**
-   * @param {!CrOnc.DeviceStateProperties} deviceState
+   * @param {!Array<!OncMojo.DeviceStateProperties>} deviceStates
+   * @param {string} type
    * @return {boolean}
    * @private
    */
-  deviceIsEnabled_: function(deviceState) {
-    return !!deviceState && deviceState.State == CrOnc.DeviceState.ENABLED;
+  deviceIsEnabled_: function(deviceStates, type) {
+    const device = deviceStates[OncMojo.getNetworkTypeFromString(type)];
+    return !!device &&
+        device.deviceState ==
+        chromeos.networkConfig.mojom.DeviceStateType.kEnabled;
   },
 
   /**
@@ -643,3 +667,4 @@ Polymer({
     });
   },
 });
+})();

chrome/browser/resources/settings/internet_page/internet_subpage.html

@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/chromeos/onc_mojo.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
@@ -111,7 +112,7 @@
     <template is="dom-if" if="[[deviceIsEnabled_(deviceState)]]">
       <div id="networkListDiv" class="layout vertical flex">
         <!-- VPN only header for built-in VPNs. -->
-        <template is="dom-if" if="[[isEqual_('VPN', deviceState.Type)]]">
+        <template is="dom-if" if="[[matchesType_('VPN', deviceState)]]">
           <div class="vpn-header layout horizontal center">
             <div class="flex settings-box-text">$i18n{networkVpnBuiltin}</div>
             <cr-icon-button class="icon-add-circle"
@@ -157,7 +158,7 @@
           class="no-networks">
         </div>
 
-        <template is="dom-if" if="[[isEqual_('VPN', deviceState.Type)]]">
+        <template is="dom-if" if="[[matchesType_('VPN', deviceState)]]">
           <!-- Third party VPNs. -->
           <template is="dom-repeat" items="[[thirdPartyVpnProviders]]">
             <div id="[[item.ProviderName]]"

chrome/browser/resources/settings/internet_page/network_summary.html

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_listener_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
+<link rel="import" href="chrome://resources/html/chromeos/onc_mojo.html">
 <link rel="import" href="network_summary_item.html">
 
 <dom-module id="network-summary">
@@ -11,9 +12,9 @@
       <template is="dom-repeat" items="[[activeNetworkStates_]]">
         <network-summary-item id="[[item.Type]]"
             active-network-state="[[item]]"
-            device-state="[[get(item.Type, deviceStates)]]"
+            device-state="[[getDeviceState_(item.Type, deviceStates)]]"
             network-state-list="[[get(item.Type, networkStateLists_)]]"
-            tether-device-state="[[get('Tether', deviceStates)]]">
+            tether-device-state="[[getDeviceState_('Tether', deviceStates)]]">
         </network-summary-item>
       </template>
     </div>

chrome/browser/resources/settings/internet_page/network_summary.js

@@ -7,17 +7,6 @@
  * by type: Ethernet, WiFi, Cellular, WiMAX, and VPN.
  */
 
-/**
- * @typedef {{
- *   Ethernet: (!CrOnc.DeviceStateProperties|undefined),
- *   WiFi: (!CrOnc.DeviceStateProperties|undefined),
- *   Cellular: (!CrOnc.DeviceStateProperties|undefined),
- *   WiMAX: (!CrOnc.DeviceStateProperties|undefined),
- *   VPN: (!CrOnc.DeviceStateProperties|undefined)
- * }}
- */
-let DeviceStateObject;
-
 /**
  * @typedef {{
  *   Ethernet: (Array<!CrOnc.NetworkStateProperties>|undefined),
@@ -58,14 +47,17 @@ Polymer({
      * The device state for each network device type. We initialize this to
      * include a disabled WiFi type since WiFi is always present. This reduces
      * the amount of visual change on first load.
-     * @private {!DeviceStateObject}
+     * @private {!Object<!OncMojo.DeviceStateProperties>}
      */
     deviceStates: {
       type: Object,
       value: function() {
-        return {
-          WiFi: {Type: CrOnc.Type.WI_FI, State: CrOnc.DeviceState.DISABLED},
+        const result = {};
+        result[chromeos.networkConfig.mojom.NetworkType.kWiFi] = {
+          deviceState: chromeos.networkConfig.mojom.DeviceStateType.kDisabled,
+          type: chromeos.networkConfig.mojom.NetworkType.kWiFi,
         };
+        return result;
       },
       notify: true,
     },
@@ -94,12 +86,27 @@ Polymer({
     },
   },
 
+  /**
+   * This UI will use both the networkingPrivate extension API and the
+   * networkConfig mojo API until we provide all of the required functionality
+   * in networkConfig. TODO(stevenjb): Remove use of networkingPrivate api.
+   * @private {?chromeos.networkConfig.mojom.CrosNetworkConfigProxy}
+   */
+  networkConfigProxy_: null,
+
   /**
    * Set of GUIDs identifying active networks, one for each type.
    * @private {?Set<string>}
    */
   activeNetworkIds_: null,
 
+  /** @override */
+  created: function() {
+    this.networkConfigProxy_ =
+        network_config.MojoInterfaceProviderImpl.getInstance()
+            .getMojoServiceProxy();
+  },
+
   /** @override */
   attached: function() {
     this.getNetworkLists_();
@@ -177,9 +184,9 @@ Polymer({
    */
   getNetworkLists_: function() {
     // First get the device states.
-    this.networkingPrivate.getDeviceStates(deviceStates => {
+    this.networkConfigProxy_.getDeviceStateList().then(response => {
       // Second get the network states.
-      this.getNetworkStates_(deviceStates);
+      this.getNetworkStates_(response.result);
     });
   },
 
@@ -187,17 +194,17 @@ Polymer({
    * Requests the list of network states from Chrome. Updates
    * activeNetworkStates and networkStateLists once the results are returned
    * from Chrome.
-   * @param {!Array<!CrOnc.DeviceStateProperties>} deviceStates
+   * @param {!Array<!OncMojo.DeviceStateProperties>} deviceStateList
    * @private
    */
-  getNetworkStates_: function(deviceStates) {
+  getNetworkStates_: function(deviceStateList) {
     const filter = {
       networkType: CrOnc.Type.ALL,
       visible: true,
       configured: false
     };
     this.networkingPrivate.getNetworks(filter, networkStates => {
-      this.updateNetworkStates_(networkStates, deviceStates);
+      this.updateNetworkStates_(networkStates, deviceStateList);
     });
   },
 
@@ -205,13 +212,14 @@ Polymer({
    * Called after network states are received from getNetworks.
    * @param {!Array<!CrOnc.NetworkStateProperties>} networkStates The state
    *     properties for all visible networks.
-   * @param {!Array<!CrOnc.DeviceStateProperties>} deviceStates
+   * @param {!Array<!OncMojo.DeviceStateProperties>} deviceStateList
    * @private
    */
-  updateNetworkStates_: function(networkStates, deviceStates) {
-    const newDeviceStates = /** @type {!DeviceStateObject} */ ({});
-    for (const state of deviceStates) {
-      newDeviceStates[state.Type] = state;
+  updateNetworkStates_: function(networkStates, deviceStateList) {
+    const mojom = chromeos.networkConfig.mojom;
+    const newDeviceStates = {};
+    for (const device of deviceStateList) {
+      newDeviceStates[device.type] = device;
     }
 
     // Clear any current networks.
@@ -245,9 +253,9 @@ Polymer({
 
     // Create a VPN entry in deviceStates if there are any VPN networks.
     if (newNetworkStateLists.VPN && newNetworkStateLists.VPN.length > 0) {
-      newDeviceStates.VPN = {
-        Type: CrOnc.Type.VPN,
-        State: CrOnc.DeviceState.ENABLED
+      newDeviceStates[mojom.NetworkType.kVPN] = {
+        type: mojom.NetworkType.kVPN,
+        deviceState: chromeos.networkConfig.mojom.DeviceStateType.kEnabled,
       };
     }
 
@@ -256,11 +264,15 @@ Polymer({
     const newActiveNetworkStates = [];
     this.activeNetworkIds_ = new Set;
     const orderedDeviceTypes = [
-      CrOnc.Type.ETHERNET, CrOnc.Type.WI_FI, CrOnc.Type.CELLULAR,
-      CrOnc.Type.TETHER, CrOnc.Type.WI_MAX, CrOnc.Type.VPN
+      mojom.NetworkType.kEthernet,
+      mojom.NetworkType.kWiFi,
+      mojom.NetworkType.kCellular,
+      mojom.NetworkType.kTether,
+      mojom.NetworkType.kWiMAX,
+      mojom.NetworkType.kVPN,
     ];
-    for (const type of orderedDeviceTypes) {
-      const device = newDeviceStates[type];
+    for (const deviceType of orderedDeviceTypes) {
+      const device = newDeviceStates[deviceType];
       if (!device) {
         continue;
       }  // The technology for this device type is unavailable.
@@ -268,7 +280,8 @@ Polymer({
       // If both 'Tether' and 'Cellular' technologies exist, merge the network
       // lists and do not add an active network for 'Tether' so that there is
       // only one 'Mobile data' section / subpage.
-      if (type == CrOnc.Type.TETHER && newDeviceStates[CrOnc.Type.CELLULAR]) {
+      if (deviceType == mojom.NetworkType.kTether &&
+          newDeviceStates[mojom.NetworkType.kCellular]) {
         newNetworkStateLists[CrOnc.Type.CELLULAR] =
             newNetworkStateLists[CrOnc.Type.CELLULAR].concat(
                 newNetworkStateLists[CrOnc.Type.TETHER]);
@@ -277,15 +290,16 @@ Polymer({
 
       // Note: The active state for 'Cellular' may be a Tether network if both
       // types are enabled but no Cellular network exists (edge case).
-      const state =
-          this.getActiveStateForType_(activeNetworkStatesByType, type);
-      if (state.Source === undefined &&
-          device.State == CrOnc.DeviceState.PROHIBITED) {
+      const networkState = this.getActiveStateForType_(
+          activeNetworkStatesByType, OncMojo.getNetworkTypeString(deviceType));
+      if (networkState.Source === undefined &&
+          device.deviceState ==
+              chromeos.networkConfig.mojom.DeviceStateType.kProhibited) {
         // Prohibited technologies are enforced by the device policy.
-        state.Source = CrOnc.Source.DEVICE_POLICY;
+        networkState.Source = CrOnc.Source.DEVICE_POLICY;
       }
-      newActiveNetworkStates.push(state);
-      this.activeNetworkIds_.add(state.GUID);
+      newActiveNetworkStates.push(networkState);
+      this.activeNetworkIds_.add(networkState.GUID);
     }
 
     this.deviceStates = newDeviceStates;
@@ -309,4 +323,13 @@ Polymer({
     }
     return activeState || {GUID: '', Type: type};
   },
+
+  /**
+   * @param {string} type
+   * @param {!Object<!OncMojo.DeviceStateProperties>} deviceStates
+   * @return {!OncMojo.DeviceStateProperties|undefined}
+   */
+  getDeviceState_: function(type, deviceStates) {
+    return this.deviceStates[OncMojo.getNetworkTypeFromString(type)];
+  },
 });

chrome/browser/resources/settings/internet_page/network_summary_item.html

@@ -7,6 +7,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/chromeos/onc_mojo.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="../settings_page/settings_subpage.html">

chrome/browser/resources/settings/multidevice_page/BUILD.gn

@@ -110,6 +110,7 @@ if (is_chromeos) {
       "..:route",
       "//ui/webui/resources/cr_elements/chromeos/network:cr_network_listener_behavior",
       "//ui/webui/resources/cr_elements/chromeos/network:cr_onc_types",
+      "//ui/webui/resources/js/chromeos:onc_mojo",
     ]
     externs_list = [ "$externs_path/networking_private.js" ]
     extra_sources = [ "$interfaces_path/networking_private_interface.js" ]

chrome/browser/resources/settings/multidevice_page/multidevice_tether_item.html

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_listener_behavior.html">
+<link rel="import" href="chrome://resources/html/chromeos/onc_mojo.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">

chrome/browser/resources/settings/multidevice_page/multidevice_tether_item.js

@@ -31,7 +31,7 @@ Polymer({
 
     /**
      * The device state for tethering.
-     * @private {?CrOnc.DeviceStateProperties|undefined}
+     * @private {?OncMojo.DeviceStateProperties|undefined}
      */
     deviceState_: Object,
 
@@ -65,6 +65,21 @@ Polymer({
     },
   },
 
+  /**
+   * This UI will use both the networkingPrivate extension API and the
+   * networkConfig mojo API until we provide all of the required functionality
+   * in networkConfig. TODO(stevenjb): Remove use of networkingPrivate api.
+   * @private {?chromeos.networkConfig.mojom.CrosNetworkConfigProxy}
+   */
+  networkConfigProxy_: null,
+
+  /** @override */
+  created: function() {
+    this.networkConfigProxy_ =
+        network_config.MojoInterfaceProviderImpl.getInstance()
+            .getMojoServiceProxy();
+  },
+
   /** @override */
   attached: function() {
     this.updateTetherDeviceState_();
@@ -112,7 +127,7 @@ Polymer({
   },
 
   /**
-   * Retrieves device states (CrOnc.DeviceStateProperties) and sets
+   * Retrieves device states (OncMojo.DeviceStateProperties) and sets
    * this.deviceState_ to the retrieved Instant Tethering state (or undefined if
    * there is none) in its callback. Note that the function
    * chrome.networkingPrivate.getDevicePolicy() retrieves at most one object per
@@ -121,11 +136,18 @@ Polymer({
    * @private
    */
   updateTetherDeviceState_: function() {
-    this.networkingPrivate_.getDeviceStates(deviceStates => {
-      this.deviceState_ =
-          deviceStates.find(
-              deviceState => deviceState.Type == CrOnc.Type.TETHER) ||
-          {Type: CrOnc.Type.TETHER, State: CrOnc.DeviceState.DISABLED};
+    this.networkConfigProxy_.getDeviceStateList().then(response => {
+      const kTether = chromeos.networkConfig.mojom.NetworkType.kTether;
+      const deviceStates = response.result;
+      const deviceState =
+          deviceStates.find(deviceState => deviceState.type == kTether);
+      this.deviceState_ = deviceState || {
+        deviceState: chromeos.networkConfig.mojom.DeviceStateType.kDisabled,
+        managedNetworkAvailable: false,
+        scanning: false,
+        simAbsent: false,
+        type: kTether,
+      };
     });
   },
 

chrome/test/data/webui/chromeos/fake_network_config_mojom.js

@@ -38,6 +38,22 @@ class FakeNetworkConfig {
     this.observers_.push(observer);
   }
 
+  /**
+   * @return {!Promise<{result:
+   *     !Array<!chromeos.networkConfig.mojom.DeviceStateProperties>}>}
+   */
+  getDeviceStateList() {
+    return new Promise(resolve => {
+      this.extensionApi_.getDeviceStates(devices => {
+        let result = [];
+        devices.forEach(device => {
+          result.push(this.deviceToMojo_(device));
+        });
+        resolve({result: result});
+      });
+    });
+  }
+
   /**
    * @param {!chromeos.networkConfig.mojom.NetworkType} type
    * @param {boolean} enabled
@@ -51,4 +67,21 @@ class FakeNetworkConfig {
     }
     return Promise.resolve(true);
   }
+
+  /** @param { !chromeos.networkConfig.mojom.NetworkType } type */
+  requestNetworkScan(type) {
+    this.extensionApi_.requestNetworkScan();
+  }
+
+  /**
+   * @param {!chrome.networkingPrivate.DeviceStateProperties} device
+   * @return {!chromeos.networkConfig.mojom.DeviceStateProperties}
+   * @private
+   */
+  deviceToMojo_(device) {
+    return {
+      deviceState: OncMojo.getDeviceStateTypeFromString(device.State),
+      type: OncMojo.getNetworkTypeFromString(device.Type),
+    };
+  }
 }

ui/webui/resources/cr_elements/chromeos/network/BUILD.gn

@@ -27,6 +27,7 @@ if (is_chromeos) {
     deps = [
       ":cr_onc_types",
       "//ui/webui/resources/js:assert",
+      "//ui/webui/resources/js/chromeos:onc_mojo",
     ]
   }
 

ui/webui/resources/cr_elements/chromeos/network/cr_network_icon.html

@@ -3,6 +3,7 @@
 <link rel="import" href="../../chromeos/network/cr_onc_types.html">
 <link rel="import" href="../../chromeos/network/network_icons.html">
 <link rel="import" href="../../hidden_style_css.html">
+<link rel="import" href="../../../html/chromeos/onc_mojo.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 
 <dom-module id="cr-network-icon">

ui/webui/resources/cr_elements/chromeos/network/cr_network_icon.js

@@ -22,7 +22,7 @@ Polymer({
     /**
      * If set, the device state for the network type. Otherwise it defaults to
      * null rather than undefined so that it does not block computed bindings.
-     * @type {?CrOnc.DeviceStateProperties}
+     * @type {?OncMojo.DeviceStateProperties}
      */
     deviceState: {
       type: Object,
@@ -75,9 +75,10 @@ Polymer({
         'cellular-' :
         'wifi-';
     if (!this.isListItem && !this.networkState.GUID) {
-      const deviceState = this.deviceState;
-      if (!deviceState || deviceState.State == 'Enabled' ||
-          deviceState.State == 'Enabling') {
+      const mojom = chromeos.networkConfig.mojom;
+      const device = this.deviceState;
+      if (!device || device.deviceState == mojom.DeviceStateType.kEnabled ||
+          device.deviceState == mojom.DeviceStateType.kEnabling) {
         return prefix + 'no-network';
       }
       return prefix + 'off';

ui/webui/resources/js/chromeos/BUILD.gn

@@ -4,6 +4,8 @@
 
 import("//third_party/closure_compiler/compile_js.gni")
 
+assert(is_chromeos, "Non-ChromeOS builds cannot depend on //chromeos")
+
 group("closure_compile") {
   deps = [
     ":js_resources",

ui/webui/resources/js/chromeos/onc_mojo.js

@@ -102,6 +102,30 @@ class OncMojo {
     return '';
   }
 
+  /**
+   * @param {string} value
+   * @return {!chromeos.networkConfig.mojom.DeviceStateType}
+   */
+  static getDeviceStateTypeFromString(value) {
+    const DeviceStateType = chromeos.networkConfig.mojom.DeviceStateType;
+    switch (value) {
+      case 'Uninitialized':
+        return DeviceStateType.kUninitialized;
+      case 'Disabled':
+        return DeviceStateType.kDisabled;
+      case 'Enabling':
+        return DeviceStateType.kEnabling;
+      case 'Enabled':
+        return DeviceStateType.kEnabled;
+      case 'Prohibited':
+        return DeviceStateType.kProhibited;
+      case 'Unavailable':
+        return DeviceStateType.kUnavailable;
+    }
+    assertNotReached();
+    return DeviceStateType.kUnavailable;
+  }
+
   /**
    * @param {!chromeos.networkConfig.mojom.NetworkType} value
    * @return {string}
@@ -158,7 +182,7 @@ class OncMojo {
       case 'WiMAX':
         return NetworkType.kWiMAX;
     }
-    assertNotReached();
+    assertNotReached('Unexpected value: ' + value);
     return NetworkType.kAll;
   }
 
@@ -246,6 +270,8 @@ class OncMojo {
   }
 }
 
+// Convenience types for commonly used chromeos.networkConfig.mojom types.
+
 /** @typedef {chromeos.networkConfig.mojom.DeviceStateProperties} */
 OncMojo.DeviceStateProperties;