[CrOS cellular] Create eSim and pSim network groups

- Split networks list into default and cellular
- Cellular contains eSIM, SIM and Tether networks
- Add new string describing each network

Screenshot: https://screenshot.googleplex.com/7EE62daLS47D2Y2.png
Design: https://docs.google.com/presentation/d/1Mfk5ZMEmeHwSbadUbyRU0Si5k6XDIvw-j4u7TUaCIGY/edit#slide=id.g9091f1bab9_0_26

Bug: 093185
Change-Id: I4545cb272b086dfe7e9f64037a51465fc5ff80a3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2505937
Commit-Queue: Nnamdi Theodore Johnson-kanu <tjohnsonkanu@google.com>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825854}

chrome/app/os_settings_strings.grdp

@@ -2250,6 +2250,24 @@
   <message name="IDS_SETTINGS_INTERNET_LOOKING_FOR_MOBILE_NETWORK" desc="Text shown when viewing the Mobile data page when there are no cellular or tether networks available.">
     Looking for a mobile network. <ph name="BEGIN_LINK">&lt;a target="_blank" href="$1"&gt;</ph>Learn more<ph name="END_LINK">&lt;/a&gt;</ph>
   </message>
+  <message name="IDS_SETTINGS_INTERNET_ESIM_LABEL" desc="Label describing list of cellular networks as eSIM networks">
+    eSIM
+  </message>
+  <message name="IDS_SETTINGS_INTERNET_PSIM_LABEL" desc="Label on Mobile data page describing list of cellular networks as SIM networks">
+    SIM
+  </message>
+  <message name="IDS_SETTINGS_INTERNET_TETHER_LABEL" desc="Label on Mobile data page describing list of networks as instant tether networks">
+    Instant Tethering
+  </message>
+  <message name="IDS_SETTINGS_INTERNET_ESIM_NOT_SETUP_WITH_SETUP_LINK" desc="Text shown when viewing the Mobile data page and no eSIM profile is available">
+    No available eSIM profiles. Download a new profile <ph name="BEGIN_LINK">&lt;a href="#" id="cellularEsimLink"&gt;</ph>here<ph name="END_LINK">&lt;/a&gt;</ph>
+  </message>
+  <message name="IDS_SETTINGS_INTERNET_PSIM_NOT_SETUP_WITH_SETUP_LINK" desc="Text shown when viewing the Mobile data page and no physical SIM profile is available">
+    No available SIM profiles. Setup a new profile <ph name="BEGIN_LINK">&lt;a href="#" id="cellularPsimLink"&gt;</ph>here.<ph name="END_LINK">&lt;/a&gt;</ph>
+  </message>
+  <message name="IDS_SETTINGS_INTERNET_TETHER_NOT_SETUP_WITH_LEARN_MORE_LINK" desc="Text shown when viewing the Mobile data page and no instant tether network is available">
+    No device detected <ph name="BEGIN_LINK">&lt;a target="_blank" href="$1"&gt;</ph>Learn more<ph name="END_LINK">&lt;/a&gt;</ph>
+  </message>
 
   <!-- Users Page (OS Settings) -->
   <message name="IDS_SETTINGS_USERS_MODIFIED_BY_OWNER_LABEL" desc="Label saying settings may only be modified by the device owner.">

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_ESIM_LABEL.png.sha1

+0e3ce9ab2ed4e17f44de3ba13de3b0038b8f98aa
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_ESIM_NOT_SETUP_WITH_SETUP_LINK.png.sha1

+0e3ce9ab2ed4e17f44de3ba13de3b0038b8f98aa
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_PSIM_LABEL.png.sha1

+1e1d204443b5b987758569e73f021bc785099902
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_PSIM_NOT_SETUP_WITH_SETUP_LINK.png.sha1

+1e1d204443b5b987758569e73f021bc785099902
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_TETHER_LABEL.png.sha1

+7e4fad1097250fe446a5f1235e6904bfd92cc7a0
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_TETHER_NOT_SETUP_WITH_LEARN_MORE_LINK.png.sha1

+7e4fad1097250fe446a5f1235e6904bfd92cc7a0
\ No newline at end of file

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

@@ -308,6 +308,7 @@ preprocess_grit("preprocess_gen_v3") {
     "chromeos/deep_linking_behavior.m.js",
     "chromeos/google_assistant_page/google_assistant_browser_proxy.m.js",
     "chromeos/google_assistant_page/google_assistant_page.m.js",
+    "chromeos/internet_page/cellular_networks_list.m.js",
     "chromeos/internet_page/cellular_setup_dialog.m.js",
     "chromeos/internet_page/cellular_setup_settings_delegate.m.js",
     "chromeos/internet_page/internet_config.m.js",
@@ -576,6 +577,8 @@ preprocess_grit("preprocess_v2") {
     "chromeos/google_assistant_page/google_assistant_browser_proxy.js",
     "chromeos/google_assistant_page/google_assistant_page.html",
     "chromeos/google_assistant_page/google_assistant_page.js",
+    "chromeos/internet_page/cellular_networks_list.js",
+    "chromeos/internet_page/cellular_networks_list.html",
     "chromeos/internet_page/cellular_setup_dialog.html",
     "chromeos/internet_page/cellular_setup_dialog.js",
     "chromeos/internet_page/cellular_setup_settings_delegate.html",

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

@@ -8,6 +8,7 @@ import("//ui/webui/resources/tools/js_modulizer.gni")
 
 js_type_check("closure_compile") {
   deps = [
+    ":cellular_networks_list",
     ":cellular_setup_dialog",
     ":internet_config",
     ":internet_detail_menu",
@@ -122,6 +123,7 @@ js_library("internet_known_networks_page") {
 
 js_library("internet_subpage") {
   deps = [
+    ":cellular_networks_list",
     ":internet_page_browser_proxy",
     "..:deep_linking_behavior",
     "..:metrics_recorder",
@@ -198,10 +200,20 @@ js_library("cellular_setup_settings_delegate") {
   ]
 }
 
+js_library("cellular_networks_list") {
+  deps = [
+    "//ui/webui/resources/cr_components/chromeos/network:onc_mojo",
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
+  externs_list = [ "$externs_path/networking_private.js" ]
+  extra_sources = [ "$interfaces_path/networking_private_interface.js" ]
+}
+
 # TODO: Uncomment as the Polymer3 migration makes progress.
 js_type_check("closure_compile_module") {
   is_polymer3 = true
   deps = [
+    ":cellular_networks_list.m",
     ":cellular_setup_dialog.m",
     ":cellular_setup_settings_delegate.m",
     ":internet_config.m",
@@ -336,13 +348,13 @@ js_library("internet_page.m") {
     ":internet_page_browser_proxy.m",
     ":internet_subpage.m",
     ":network_summary.m",
+    "//chrome/browser/resources/settings:router.m",
     "//chrome/browser/resources/settings/chromeos:deep_linking_behavior.m",
     "//chrome/browser/resources/settings/chromeos:metrics_recorder.m",
     "//chrome/browser/resources/settings/chromeos:os_route.m",
     "//chrome/browser/resources/settings/prefs:prefs.m",
     "//chrome/browser/resources/settings/settings_page:settings_animated_pages.m",
     "//chrome/browser/resources/settings/settings_page:settings_subpage.m",
-    "//chrome/browser/resources/settings:router.m",
     "//third_party/polymer/v3_0/components-chromium/iron-icon:iron-icon",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_components/chromeos/network:mojo_interface_provider.m",
@@ -382,13 +394,14 @@ js_library("internet_shared_css.m") {
 js_library("internet_subpage.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/internet_page/internet_subpage.m.js" ]
   deps = [
+    ":cellular_networks_list.m",
     ":internet_page_browser_proxy.m",
-    "//chrome/browser/resources/settings/chromeos/localized_link:localized_link.m",
+    "//chrome/browser/resources/settings:router.m",
     "//chrome/browser/resources/settings/chromeos:deep_linking_behavior.m",
     "//chrome/browser/resources/settings/chromeos:metrics_recorder.m",
     "//chrome/browser/resources/settings/chromeos:os_route.m",
     "//chrome/browser/resources/settings/chromeos:route_origin_behavior.m",
-    "//chrome/browser/resources/settings:router.m",
+    "//chrome/browser/resources/settings/chromeos/localized_link:localized_link.m",
     "//third_party/polymer/v3_0/components-chromium/iron-flex-layout:iron-flex-layout-classes",
     "//third_party/polymer/v3_0/components-chromium/iron-icon:iron-icon",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
@@ -473,10 +486,21 @@ js_library("tether_connection_dialog.m") {
   extra_deps = [ ":tether_connection_dialog_module" ]
 }
 
+js_library("cellular_networks_list.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/internet_page/cellular_networks_list.m.js" ]
+  deps = [
+    "//chrome/browser/resources/settings/chromeos/localized_link:localized_link.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
+  ]
+  extra_deps = [ ":cellular_networks_list_module" ]
+}
+
 import("//tools/polymer/polymer.gni")
 
 group("polymer3_elements") {
   public_deps = [
+    ":cellular_networks_list_module",
     ":cellular_setup_dialog_module",
     ":internet_config_module",
     ":internet_detail_menu_module",
@@ -588,6 +612,14 @@ polymer_modulizer("cellular_setup_dialog") {
   namespace_rewrites = os_settings_namespace_rewrites
 }
 
+polymer_modulizer("cellular_networks_list") {
+  js_file = "cellular_networks_list.js"
+  html_file = "cellular_networks_list.html"
+  html_type = "dom-module"
+  auto_imports = os_settings_auto_imports
+  namespace_rewrites = os_settings_namespace_rewrites
+}
+
 js_modulizer("modulize") {
   input_files = [
     "internet_page_browser_proxy.js",

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_components/chromeos/network/onc_mojo.html">
+<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_list_types.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="../../chromeos/os_settings_icons_css.html">
+
+<dom-module id="cellular-networks-list">
+  <template>
+    <style include="cr-shared-style os-settings-icons settings-shared iron-flex">
+
+      .cellular-network-list-header {
+        border-top: var(--cr-separator-line);
+        padding: 16px 0 8px 0;
+      }
+
+      .cellular-network-content {
+       margin: 8px 0 8px 32px;
+      }
+
+      .cellular-not-setup {
+        color: var(--google-grey-700);
+        font-size: smaller;
+        margin-bottom: 16px;
+      }
+    </style>
+    <div class="cellular-network-list-header">
+      $i18n{cellularNetworkEsimLabel}
+    </div>
+    <template is="dom-if"
+        if="[[shouldShowNetworkSublist_(eSimNetworks_)]]" restamp>
+      <div class="cellular-network-content">
+        <network-list id="esimNetworkList" show-buttons
+            show-technology-badge="[[showTechnologyBadge]]"
+            networks="[[eSimNetworks_]]"
+            device-state="[[deviceState]]">
+        </network-list>
+      </div>
+    </template>
+    <template
+        is="dom-if"
+        if="[[!shouldShowNetworkSublist_(eSimNetworks_)]]" restamp>
+      <div class="cellular-network-content cellular-not-setup">
+        <settings-localized-link
+            on-link-clicked="onEsimLearnMoreClicked_"
+            localized-string="$i18n{eSimNetworkNotSetup}">
+        </settings-localized-link>
+      </div>
+    </template>
+    <div class="cellular-network-list-header">
+      $i18n{cellularNetworkPsimLabel}
+    </div>
+    <template
+        is="dom-if"
+        if="[[shouldShowNetworkSublist_(pSimNetworks_)]]" restamp>
+      <div class="cellular-network-content">
+        <network-list
+            id="psimNetworkList" show-buttons
+            show-technology-badge="[[showTechnologyBadge]]"
+            networks="[[pSimNetworks_]]"
+            device-state="[[deviceState]]">
+        </network-list>
+      </div>
+    </template>
+    <template
+        is="dom-if"
+        if="[[!shouldShowNetworkSublist_(pSimNetworks_)]]" restamp>
+      <div class="cellular-network-content cellular-not-setup">
+        <settings-localized-link
+            on-link-clicked="onPsimLearnMoreClicked_"
+            localized-string="$i18n{pSimNetworkNotSetup}">
+        </settings-localized-link>
+      </div>
+    </template>
+    <div class="cellular-network-list-header">
+      $i18n{cellularNetworkTetherLabel}
+    </div>
+    <template is="dom-if"
+        if="[[shouldShowNetworkSublist_(tetherNetworks_)]]" restamp>
+      <div class="cellular-network-content">
+        <network-list
+            id="tetherNetworkList" show-buttons
+            class="cellular-network-content"
+            show-technology-badge="[[showTechnologyBadge]]"
+            networks="[[tetherNetworks_]]"
+            device-state="[[deviceState]]">
+        </network-list>
+      </div>
+    </template>
+    <template is="dom-if"
+        if="[[!shouldShowNetworkSublist_(tetherNetworks_)]]" restamp>
+      <div class="cellular-network-content cellular-not-setup">
+        <settings-localized-link
+            localized-string="[[i18nAdvanced('tetherNetworkNotSetup')]]">
+        </settings-localized-link>
+      </div>
+    </template>
+  </template>
+  <script src="cellular_networks_list.js"></script>
+</dom-module>
\ No newline at end of file

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

+// Copyright 2020 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.
+
+/**
+ * @fileoverview Polymer element for displaying a summary of Cellular network
+ * states
+ */
+
+Polymer({
+  is: 'cellular-networks-list',
+
+  behaviors: [
+    I18nBehavior,
+  ],
+
+  properties: {
+    /**
+     * The list of network state properties for the items to display.
+     * @type {!Array<!OncMojo.NetworkStateProperties>}
+     */
+    networks: {
+      type: Array,
+      value() {
+        return [];
+      },
+      observer: 'networksListChange_',
+    },
+
+    /**
+     * Whether to show technology badge on mobile network icons.
+     */
+    showTechnologyBadge: Boolean,
+
+    /**
+     * Device state for the network type.
+     * @type {!OncMojo.DeviceStateProperties|undefined}
+     */
+    deviceState: Object,
+
+    /**
+     * The list of eSIM network state properties for display.
+     * @type {!Array<!OncMojo.NetworkStateProperties>}
+     * @private
+     */
+    eSimNetworks_: {
+      type: Array,
+      value() {
+        return [];
+      },
+    },
+
+    /**
+     * The list of pSIM network state properties for display.
+     * @type {!Array<!OncMojo.NetworkStateProperties>}
+     * @private
+     */
+    pSimNetworks_: {
+      type: Array,
+      value() {
+        return [];
+      },
+    },
+
+    /**
+     * The list of tether network state properties for display.
+     * @type {!Array<!OncMojo.NetworkStateProperties>}
+     * @private
+     */
+    tetherNetworks_: {
+      type: Array,
+      value() {
+        return [];
+      },
+    }
+  },
+
+  /**
+   * @private
+   */
+  networksListChange_() {
+    const mojom = chromeos.networkConfig.mojom;
+
+    const pSimNetworks = [];
+    const eSimNetworks = [];
+    const tetherNetworks = [];
+
+
+    for (const network of this.networks) {
+      if (network.eid) {
+        eSimNetworks.push(network);
+        continue;
+      }
+      if (network.type === mojom.NetworkType.kTether) {
+        tetherNetworks.push(network);
+        continue;
+      }
+      pSimNetworks.push(network);
+    }
+    this.eSimNetworks_ = eSimNetworks;
+    this.pSimNetworks_ = pSimNetworks;
+    this.tetherNetworks_ = tetherNetworks;
+  },
+
+
+  /**
+   * @param {!Array<!OncMojo.NetworkStateProperties>} list
+   * @returns {boolean}
+   * @private
+   */
+  shouldShowNetworkSublist_(list) {
+    return list.length > 0;
+  },
+
+  /**
+   * @param {Event} event
+   * @private
+   */
+  onEsimLearnMoreClicked_(event) {
+    // TODO(crbug.com/1093185): navigate to cellular dialog esim setup landing
+    // page
+
+    event.detail.event.preventDefault();
+    event.stopPropagation();
+  },
+
+  /**
+   * @param {Event} event
+   * @private
+   */
+  onPsimLearnMoreClicked_(event) {
+    // TODO(crbug.com/1093185): navigate to cellular dialog psim setup landing
+    // page
+    event.detail.event.preventDefault();
+    event.stopPropagation();
+  },
+});

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

@@ -22,6 +22,7 @@
 <link rel="import" href="../localized_link/localized_link.html">
 <link rel="import" href="../metrics_recorder.html">
 <link rel="import" href="../os_route.html">
+<link rel="import" href="./cellular_networks_list.html">
 <link rel="import" href="../route_origin_behavior.html">
 <link rel="import" href="internet_page_browser_proxy.html">
 
@@ -165,6 +166,17 @@
           </network-list>
         </template>
 
+        <!-- List of cellular and instant tethering networks -->
+        <template is="dom-if"
+            if="[[shouldShowCellularNetworkList_(networkStateList_)]]">
+          <cellular-networks-list id="cellularNetworkList"
+              networks="[[networkStateList_]]"
+              show-technology-badge="[[showTechnologyBadge_]]"
+              on-selected="onNetworkSelected_"
+              device-state="[[deviceState]]">
+          </cellular-networks-list>
+        </template>
+
         <!-- Instructions for how to enable "Google Play Services" notifications
             (needed for Instant Tethering). -->
         <template is="dom-if" if="[[showGmsCoreNotificationsSection_(
@@ -190,7 +202,7 @@
         <!-- Text shown if no networks exist. -->
         <settings-localized-link
             class="no-networks"
-            hidden="[[shouldShowNetworkList_(networkStateList_)]]"
+            hidden="[[hideNoNetworksMessage_(networkStateList_)]]"
             localized-string=
                 "[[getNoNetworksInnerHtml_(deviceState, tetherDeviceState)]]">
         </settings-localized-link>

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

@@ -415,8 +415,7 @@ Polymer({
         networkType: mojom.NetworkType.kTether,
       };
       this.networkConfig_.getNetworkStateList(filter).then(response => {
-        const tetherNetworkStates = response.result;
-        this.networkStateList_ = networkStates.concat(tetherNetworkStates);
+        this.set('networkStateList_', networkStates.concat(response.result));
       });
       return;
     }
@@ -449,7 +448,7 @@ Polymer({
       this.thirdPartyVpns_ = thirdPartyVpns;
     }
 
-    this.networkStateList_ = networkStates;
+    this.set('networkStateList_', networkStates);
   },
 
   /**
@@ -825,26 +824,58 @@ Polymer({
   },
 
   /**
-   * @param {!Array<!OncMojo.NetworkStateProperties>} networkStateList
+   * @param {!Array<!OncMojo.NetworkStateProperties>}
+   *     networkStateList
    * @return {boolean}
    * @private
    */
   shouldShowNetworkList_(networkStateList) {
+    if (this.shouldShowCellularNetworkList_()) {
+      return false;
+    }
+
     if (!!this.deviceState &&
         this.deviceState.type === mojom.NetworkType.kVPN) {
-      return this.shouldShowVpnList_(networkStateList);
+      return this.shouldShowVpnList_();
     }
-    return networkStateList.length > 0;
+    return this.networkStateList_.length > 0;
   },
 
   /**
-   * @param {!Array<!OncMojo.NetworkStateProperties>} networkStateList
    * @return {boolean} True if native VPN is not disabled by policy and there
    *     are more than one VPN network configured.
    * @private
    */
-  shouldShowVpnList_(networkStateList) {
-    return this.vpnIsEnabled_ && networkStateList.length > 0;
+  shouldShowVpnList_() {
+    return this.vpnIsEnabled_ && this.networkStateList_.length > 0;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowCellularNetworkList_() {
+    if (!this.isUpdatedCellularUiEnabled_) {
+      return false;
+    }
+
+    if (this.deviceState.type === mojom.NetworkType.kCellular ||
+        this.deviceState.type === mojom.NetworkType.kTether) {
+      return this.networkStateList_.length > 0;
+    }
+
+    return false;
+  },
+
+  /**
+   * @param {!Array<!OncMojo.NetworkStateProperties>}
+   *     networkStateList
+   * @return {boolean}
+   * @private
+   */
+  hideNoNetworksMessage_(networkStateList) {
+    return this.shouldShowCellularNetworkList_() ||
+        this.shouldShowNetworkList_(networkStateList);
   },
 
   /**

chrome/browser/ui/webui/settings/chromeos/internet_section.cc

@@ -694,6 +694,13 @@ void InternetSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
       {"tetherConnectionConnectButton",
        IDS_SETTINGS_INTERNET_TETHER_CONNECTION_CONNECT_BUTTON},
       {"tetherEnableBluetooth", IDS_ENABLE_BLUETOOTH},
+      {"cellularNetworkEsimLabel", IDS_SETTINGS_INTERNET_ESIM_LABEL},
+      {"cellularNetworkPsimLabel", IDS_SETTINGS_INTERNET_PSIM_LABEL},
+      {"pSimNetworkNotSetup",
+       IDS_SETTINGS_INTERNET_PSIM_NOT_SETUP_WITH_SETUP_LINK},
+      {"eSimNetworkNotSetup",
+       IDS_SETTINGS_INTERNET_ESIM_NOT_SETUP_WITH_SETUP_LINK},
+      {"cellularNetworkTetherLabel", IDS_SETTINGS_INTERNET_TETHER_LABEL},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);
 
@@ -740,6 +747,11 @@ void InternetSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
       l10n_util::GetStringFUTF16(
           IDS_SETTINGS_INTERNET_LOOKING_FOR_MOBILE_NETWORK,
           GetHelpUrlWithBoard(chrome::kInstantTetheringLearnMoreURL)));
+  html_source->AddString(
+      "tetherNetworkNotSetup",
+      l10n_util::GetStringFUTF16(
+          IDS_SETTINGS_INTERNET_TETHER_NOT_SETUP_WITH_LEARN_MORE_LINK,
+          GetHelpUrlWithBoard(chrome::kInstantTetheringLearnMoreURL)));
 }
 
 void InternetSection::AddHandlers(content::WebUI* web_ui) {

chrome/test/data/webui/settings/chromeos/internet_subpage_tests.js

@@ -55,6 +55,20 @@ suite('InternetSubpage', function() {
     internetSubpage.deviceState = mojoApi_.getDeviceStateForTest(type);
   }
 
+  function setCellularNetworks() {
+    const mojom = chromeos.networkConfig.mojom;
+    mojoApi_.setNetworkTypeEnabledState(mojom.NetworkType.kTether);
+    setNetworksForTest(mojom.NetworkType.kCellular, [
+      OncMojo.getDefaultNetworkState(mojom.NetworkType.kCellular, 'cellular1'),
+      OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether1'),
+      OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether2'),
+    ]);
+    internetSubpage.tetherDeviceState = {
+      type: mojom.NetworkType.kTether,
+      deviceState: mojom.DeviceStateType.kEnabled
+    };
+  }
+
   function initSubpage(isUpdatedCellularUiEnabled) {
     if (isUpdatedCellularUiEnabled !== undefined) {
       loadTimeData.overrideValues(
@@ -118,7 +132,7 @@ suite('InternetSubpage', function() {
     });
 
     test('Tether', function() {
-      initSubpage();
+      initSubpage(false);
       const mojom = chromeos.networkConfig.mojom;
       setNetworksForTest(mojom.NetworkType.kTether, [
         OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether1'),
@@ -167,7 +181,7 @@ suite('InternetSubpage', function() {
     });
 
     test('Fire show cellular setup event on add cellular clicked', () => {
-      initSubpage();
+      initSubpage(true);
       const mojom = chromeos.networkConfig.mojom;
       mojoApi_.setNetworkTypeEnabledState(mojom.NetworkType.kCellular);
       setNetworksForTest(mojom.NetworkType.kCellular, [
@@ -193,33 +207,45 @@ suite('InternetSubpage', function() {
       });
     });
 
-    test('Tether plus Cellular', function() {
-      initSubpage(false /* isUpdatedCellularUiEnabled */);
-      const mojom = chromeos.networkConfig.mojom;
-      mojoApi_.setNetworkTypeEnabledState(mojom.NetworkType.kTether);
-      setNetworksForTest(mojom.NetworkType.kCellular, [
-        OncMojo.getDefaultNetworkState(
-            mojom.NetworkType.kCellular, 'cellular1'),
-        OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether1'),
-        OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether2'),
-      ]);
-      internetSubpage.tetherDeviceState = {
-        type: mojom.NetworkType.kTether,
-        deviceState: mojom.DeviceStateType.kEnabled
-      };
-      return flushAsync().then(() => {
-        assertEquals(3, internetSubpage.networkStateList_.length);
-        const toggle = internetSubpage.$$('#deviceEnabledButton');
-        assertTrue(!!toggle);
-        assertFalse(toggle.disabled);
-        const networkList = internetSubpage.$$('#networkList');
-        assertTrue(!!networkList);
-        assertEquals(3, networkList.networks.length);
-        const tetherToggle = internetSubpage.$$('#tetherEnabledButton');
-        assertTrue(!!tetherToggle);
-        assertFalse(tetherToggle.disabled);
-      });
-    });
+    test(
+        'Tether plus Cellular with updatedCellularActivationUi false',
+        function() {
+          initSubpage(false /* isUpdatedCellularUiEnabled */);
+          const mojom = chromeos.networkConfig.mojom;
+          setCellularNetworks();
+          return flushAsync().then(() => {
+            assertEquals(3, internetSubpage.networkStateList_.length);
+            const toggle = internetSubpage.$$('#deviceEnabledButton');
+            assertTrue(!!toggle);
+            assertFalse(toggle.disabled);
+            const networkList = internetSubpage.$$('#networkList');
+            assertTrue(!!networkList);
+            assertEquals(3, networkList.networks.length);
+            const tetherToggle = internetSubpage.$$('#tetherEnabledButton');
+            assertTrue(!!tetherToggle);
+            assertFalse(tetherToggle.disabled);
+          });
+        });
+
+    test(
+        'Tether plus Cellular with updatedCellularActivationUi true',
+        function() {
+          initSubpage(true /* isUpdatedCellularUiEnabled */);
+          const mojom = chromeos.networkConfig.mojom;
+          setCellularNetworks();
+          return flushAsync().then(() => {
+            assertEquals(3, internetSubpage.networkStateList_.length);
+            const toggle = internetSubpage.$$('#deviceEnabledButton');
+            assertTrue(!!toggle);
+            assertFalse(toggle.disabled);
+            const cellularNetworkList =
+                internetSubpage.$$('#cellularNetworkList');
+            assertTrue(!!cellularNetworkList);
+            assertEquals(3, cellularNetworkList.networks.length);
+            const tetherToggle = internetSubpage.$$('#tetherEnabledButton');
+            assertFalse(!!tetherToggle);
+          });
+        });
 
     test('Deep link to tether on/off toggle w/ cellular', async () => {
       initSubpage(false /* isUpdatedCellularUiEnabled */);

ui/webui/resources/cr_components/chromeos/network/network_list.html

@@ -11,9 +11,6 @@
 <dom-module id="network-list">
   <template>
     <style include="cr-shared-style iron-flex">
-      :host {
-        display: inline-flex;
-      }
 
       network-list-item {
         align-items: center;