Cleanup network types in internet_page.js

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

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

@@ -28,7 +28,6 @@ js_library("internet_page") {
     "//chromeos/services/network_config/public/mojom:mojom_js_library_for_compile",
     "//ui/webui/resources/cr_components/chromeos/network:mojo_interface_provider",
     "//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:assert",
     "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:web_ui_listener_behavior",
@@ -82,7 +81,6 @@ js_library("internet_detail_page") {
 js_library("internet_known_networks_page") {
   deps = [
     "//ui/webui/resources/cr_elements/chromeos/network:cr_network_listener_behavior",
-    "//ui/webui/resources/cr_elements/chromeos/network:cr_onc_types",
     "//ui/webui/resources/cr_elements/cr_action_menu:cr_action_menu",
     "//ui/webui/resources/cr_elements/policy:cr_policy_network_behavior_mojo",
     "//ui/webui/resources/js:assert",

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

@@ -18,10 +18,10 @@ Polymer({
   properties: {
     /**
      * The type of networks to list.
-     * @type {CrOnc.Type}
+     * @type {chromeos.networkConfig.mojom.NetworkType|undefined}
      */
     networkType: {
-      type: String,
+      type: Number,
       observer: 'networkTypeChanged_',
     },
 
@@ -90,13 +90,13 @@ Polymer({
    * @private
    */
   refreshNetworks_: function() {
-    if (!this.networkType) {
+    if (this.networkType === undefined) {
       return;
     }
     const filter = {
       filter: chromeos.networkConfig.mojom.FilterType.kConfigured,
       limit: chromeos.networkConfig.mojom.kNoLimit,
-      networkType: OncMojo.getNetworkTypeFromString(this.networkType),
+      networkType: this.networkType,
     };
     this.networkConfig_.getNetworkStateList(filter).then(response => {
       this.networkStateList_ = response.result;

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/mojo_interface_provider.html">
-<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
@@ -49,13 +48,12 @@
           </cr-expand-button>
           <template is="dom-if" if="[[addConnectionExpanded_]]">
             <div class="list-frame vertical-list">
-              <template is="dom-if"
-                  if="[[deviceIsEnabled_(deviceStates, 'WiFi')]]">
+              <template is="dom-if" if="[[wifiIsEnabled_(deviceStates)]]">
                 <div actionable class="list-item" on-click="onAddWiFiTap_">
                   <div class="start settings-box-text">
                     $i18n{internetAddWiFi}
                   </div>
-                  <cr-icon-button class$="[[getAddNetworkClass_('WiFi')]]"
+                  <cr-icon-button class="icon-add-wifi"
                       aria-label="$i18n{internetAddWiFi}"></cr-icon-button>
                 </div>
               </template>
@@ -63,7 +61,7 @@
                 <div class="start settings-box-text">
                   $i18n{internetAddVPN}
                 </div>
-                <cr-icon-button class$="[[getAddNetworkClass_('VPN')]]"
+                <cr-icon-button class="icon-add-circle"
                     aria-label="$i18n{internetAddVPN}"></cr-icon-button>
               </div>
               <template is="dom-repeat" items="[[vpnProviders_]]">

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

@@ -65,16 +65,18 @@ Polymer({
     showSpinner_: Boolean,
 
     /**
-     * The network type for the networks subpage. Used in the subpage header.
+     * The network type for the networks subpage when shown.
+     * @type {chromeos.networkConfig.mojom.NetworkType}
      * @private
      */
-    subpageType_: String,
+    subpageType_: Number,
 
     /**
-     * The network type for the known networks subpage.
+     * The network type for the known networks subpage when shown.
+     * @type {chromeos.networkConfig.mojom.NetworkType}
      * @private
      */
-    knownNetworksType_: String,
+    knownNetworksType_: Number,
 
     /**
      * Whether the 'Add connection' section is expanded.
@@ -118,8 +120,11 @@ Polymer({
     },
   },
 
-  /** @private {string} Type of last detail page visited. */
-  detailType_: '',
+  /**
+   * Type of last detail page visited
+   * @private {chromeos.networkConfig.mojom.NetworkType|undefined}
+   */
+  detailType_: undefined,
 
   // Element event listeners
   listeners: {
@@ -170,7 +175,7 @@ Polymer({
       const queryParams = settings.getQueryParameters();
       const type = queryParams.get('type');
       if (type) {
-        this.subpageType_ = type;
+        this.subpageType_ = OncMojo.getNetworkTypeFromString(type);
       }
     } else if (route == settings.routes.KNOWN_NETWORKS) {
       // Handle direct navigation to the known networks page,
@@ -178,7 +183,7 @@ Polymer({
       const queryParams = settings.getQueryParameters();
       const type = queryParams.get('type');
       if (type) {
-        this.knownNetworksType_ = type;
+        this.knownNetworksType_ = OncMojo.getNetworkTypeFromString(type);
       }
     } else if (
         route != settings.routes.INTERNET && route != settings.routes.BASIC) {
@@ -201,9 +206,9 @@ Polymer({
       if (subPage) {
         element = subPage.$$('#networkList');
       }
-    } else if (this.detailType_) {
-      const rowForDetailType =
-          this.$$('network-summary').$$(`#${this.detailType_}`);
+    } else if (this.detailType_ !== undefined) {
+      const oncType = OncMojo.getNetworkTypeString(this.detailType_);
+      const rowForDetailType = this.$$('network-summary').$$(`#${oncType}`);
 
       // Note: It is possible that the row is no longer present in the DOM
       // (e.g., when a Cellular dongle is unplugged or when Instant Tethering
@@ -246,29 +251,33 @@ Polymer({
    * @private
    */
   onShowConfig_: function(event) {
+    const type = OncMojo.getNetworkTypeFromString(event.detail.type);
     if (!event.detail.guid) {
       // New configuration
-      this.showConfig_(true /* configAndConnect */, event.detail.type);
+      this.showConfig_(true /* configAndConnect */, type);
     } else {
       this.showConfig_(
-          false /* configAndConnect */, event.detail.type, event.detail.guid,
+          false /* configAndConnect */, type, event.detail.guid,
           event.detail.name);
     }
   },
 
   /**
    * @param {boolean} configAndConnect
-   * @param {string} type
+   * @param {chromeos.networkConfig.mojom.NetworkType} type
    * @param {?string=} opt_guid
    * @param {?string=} opt_name
    * @private
    */
   showConfig_: function(configAndConnect, type, opt_guid, opt_name) {
-    assert(type != CrOnc.Type.CELLULAR && type != CrOnc.Type.TETHER);
+    assert(
+        type != chromeos.networkConfig.mojom.NetworkType.kCellular &&
+        type != chromeos.networkConfig.mojom.NetworkType.kTether);
     const configDialog =
         /** @type {!InternetConfigElement} */ (this.$.configDialog);
-    configDialog.type =
-        /** @type {chrome.networkingPrivate.NetworkType} */ (type);
+    // TODO(stevenjb): Update configDialog to use mojom.NetworkType.
+    configDialog.type = /** @type{!chrome.networkingPrivate.NetworkType}*/ (
+        OncMojo.getNetworkTypeString(type));
     configDialog.guid = opt_guid || '';
     configDialog.name = opt_name || '';
     configDialog.showConnect = configAndConnect;
@@ -281,11 +290,10 @@ Polymer({
    */
   onShowDetail_: function(event) {
     const networkState = event.detail;
-    const oncType = OncMojo.getNetworkTypeString(networkState.type);
-    this.detailType_ = oncType;
+    this.detailType_ = networkState.type;
     const params = new URLSearchParams;
     params.append('guid', networkState.guid);
-    params.append('type', oncType);
+    params.append('type', OncMojo.getNetworkTypeString(networkState.type));
     params.append('name', OncMojo.getNetworkStateDisplayName(networkState));
     settings.navigateTo(settings.routes.NETWORK_DETAIL, params);
   },
@@ -306,39 +314,31 @@ Polymer({
     // The shared Cellular/Tether subpage is referred to as "Mobile".
     // TODO(khorimoto): Remove once Cellular/Tether are split into their own
     // sections.
-    if (this.subpageType_ == CrOnc.Type.CELLULAR ||
-        this.subpageType_ == CrOnc.Type.TETHER) {
+    if (this.subpageType_ == mojom.NetworkType.kCellular ||
+        this.subpageType_ == mojom.NetworkType.kTether) {
       return this.i18n('OncTypeMobile');
     }
-    return this.i18n('OncType' + this.subpageType_);
+    return this.i18n(
+        'OncType' + OncMojo.getNetworkTypeString(this.subpageType_));
   },
 
   /**
-   * @param {string} type
-   * @return {string}
-   * @private
-   */
-  getAddNetworkClass_: function(type) {
-    return type == CrOnc.Type.WI_FI ? 'icon-add-wifi' : 'icon-add-circle';
-  },
-
-  /**
-   * @param {string} subpageType
+   * @param {chromeos.networkConfig.mojom.NetworkType} subpageType
    * @param {!Object<!OncMojo.DeviceStateProperties>|undefined} deviceStates
    * @return {!OncMojo.DeviceStateProperties|undefined}
    * @private
    */
   getDeviceState_: function(subpageType, deviceStates) {
-    if (!subpageType) {
+    if (subpageType === undefined) {
       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 &&
+    if (subpageType == mojom.NetworkType.kTether &&
         this.deviceStates[mojom.NetworkType.kCellular]) {
-      subpageType = CrOnc.Type.CELLULAR;
+      subpageType = mojom.NetworkType.kCellular;
     }
-    return deviceStates[OncMojo.getNetworkTypeFromString(subpageType)];
+    return deviceStates[subpageType];
   },
 
   /**
@@ -356,7 +356,8 @@ Polymer({
    * @private
    */
   onDeviceStatesChanged_: function(newValue, oldValue) {
-    const wifiDeviceState = this.getDeviceState_(CrOnc.Type.WI_FI, newValue);
+    const wifiDeviceState =
+        this.getDeviceState_(mojom.NetworkType.kWiFi, newValue);
     let managedNetworkAvailable = false;
     if (wifiDeviceState) {
       managedNetworkAvailable = !!wifiDeviceState.managedNetworkAvailable;
@@ -366,9 +367,7 @@ Polymer({
       this.managedNetworkAvailable = managedNetworkAvailable;
     }
 
-    if (this.detailType_ &&
-        !this.deviceStates[OncMojo.getNetworkTypeFromString(
-            this.detailType_)]) {
+    if (this.detailType_ && !this.deviceStates[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
@@ -385,22 +384,26 @@ Polymer({
    * @private
    */
   onShowKnownNetworks_: function(event) {
-    const oncType = OncMojo.getNetworkTypeString(event.detail);
-    this.detailType_ = oncType;
-    this.knownNetworksType_ = oncType;
+    const type = event.detail;
+    this.detailType_ = type;
+    this.knownNetworksType_ = type;
     const params = new URLSearchParams;
-    params.append('type', oncType);
+    params.append('type', OncMojo.getNetworkTypeString(type));
     settings.navigateTo(settings.routes.KNOWN_NETWORKS, params);
   },
 
   /** @private */
   onAddWiFiTap_: function() {
-    this.showConfig_(true /* configAndConnect */, CrOnc.Type.WI_FI);
+    this.showConfig_(
+        true /* configAndConnect */,
+        chromeos.networkConfig.mojom.NetworkType.kWiFi);
   },
 
   /** @private */
   onAddVPNTap_: function() {
-    this.showConfig_(true /* configAndConnect */, CrOnc.Type.VPN);
+    this.showConfig_(
+        true /* configAndConnect */,
+        chromeos.networkConfig.mojom.NetworkType.kVPN);
   },
 
   /**
@@ -417,11 +420,10 @@ Polymer({
    * @private
    */
   showNetworksSubpage_: function(type) {
-    const oncType = OncMojo.getNetworkTypeString(type);
-    this.detailType_ = oncType;
+    this.detailType_ = type;
     const params = new URLSearchParams;
-    params.append('type', oncType);
-    this.subpageType_ = oncType;
+    params.append('type', OncMojo.getNetworkTypeString(type));
+    this.subpageType_ = type;
     settings.navigateTo(settings.routes.INTERNET_NETWORKS, params);
   },
 
@@ -452,14 +454,13 @@ Polymer({
 
   /**
    * @param {!Array<!OncMojo.DeviceStateProperties>} deviceStates
-   * @param {string} type
    * @return {boolean}
    * @private
    */
-  deviceIsEnabled_: function(deviceStates, type) {
-    const device = deviceStates[OncMojo.getNetworkTypeFromString(type)];
-    return !!device &&
-        device.deviceState ==
+  wifiIsEnabled_: function(deviceStates) {
+    const wifi = deviceStates[mojom.NetworkType.kWiFi];
+    return !!wifi &&
+        wifi.deviceState ==
         chromeos.networkConfig.mojom.DeviceStateType.kEnabled;
   },
 
@@ -497,15 +498,15 @@ Polymer({
    */
   onNetworkConnect_: function(event) {
     const networkState = event.detail.networkState;
-    const oncType = OncMojo.getNetworkTypeString(networkState.type);
+    const type = networkState.type;
     const displayName = OncMojo.getNetworkStateDisplayName(networkState);
 
     if (!event.detail.bypassConnectionDialog &&
-        networkState.type == mojom.NetworkType.kTether &&
+        type == mojom.NetworkType.kTether &&
         !networkState.tether.hasConnectedToHost) {
       const params = new URLSearchParams;
       params.append('guid', networkState.guid);
-      params.append('type', oncType);
+      params.append('type', OncMojo.getNetworkTypeString(type));
       params.append('name', displayName);
       params.append('showConfigure', true.toString());
 
@@ -513,10 +514,10 @@ Polymer({
       return;
     }
 
-    const isMobile = OncMojo.networkTypeIsMobile(networkState.type);
+    const isMobile = OncMojo.networkTypeIsMobile(type);
     if (!isMobile && (!networkState.connectable || !!networkState.errorState)) {
       this.showConfig_(
-          true /* configAndConnect */, oncType, networkState.guid, displayName);
+          true /* configAndConnect */, type, networkState.guid, displayName);
       return;
     }
 
@@ -532,7 +533,7 @@ Polymer({
         case mojom.StartConnectResult.kNotConfigured:
           if (!isMobile) {
             this.showConfig_(
-                true /* configAndConnect */, oncType, networkState.guid,
+                true /* configAndConnect */, type, networkState.guid,
                 displayName);
           }
           return;