[CrOS Settings] Update sim-detect-page to be more generic

Rename sim-detect-page to setup-loading-page and update UI to be used
for both psim and esim flows.

Bug: 1093185
Change-Id: Iaf8934a3423c1ce21d6115bc9ea28c9d972738b8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2535231
Commit-Queue: Gordon Seto <gordonseto@google.com>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#827473}

chrome/app/chromeos_strings.grdp

@@ -312,6 +312,9 @@
   <message name="IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL" desc="Label for electronic SIM (eSIM) setup flow card radio select button during cellular setup">
     eSim setup
   </message>
+  <message name="IDS_CELLULAR_SETUP_ESIM_PROFILE_DETECT_MESSAGE" desc="Message displayed during loading page in eSIM setup flow when looking for eSIM profiles.">
+    Looking for available profiles...
+  </message>
   <message name="IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_MESSAGE" desc="Message for electronic SIM (eSIM) setup flow card radio select button during cellular setup, informing the user to establish an internet connection before proceeding.">
     Establish an internet connection first
   </message>

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_PROFILE_DETECT_MESSAGE.png.sha1

+50d98ca9d86f9d8fe780771b4de96d4edeb154dc
\ No newline at end of file

chrome/browser/ui/webui/chromeos/cellular_setup/cellular_setup_localized_strings_provider.cc

@@ -49,6 +49,8 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"finalPageMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_MESSAGE},
     {"finalPageErrorTitle", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_TITLE},
     {"finalPageErrorMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_MESSAGE},
+    {"eSimProfileDetectMessage",
+     IDS_CELLULAR_SETUP_ESIM_PROFILE_DETECT_MESSAGE},
     {"scanQRCode", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE},
     {"switchCamera", IDS_CELLULAR_SETUP_ESIM_PAGE_SWITCH_CAMERA},
     {"useCamera", IDS_CELLULAR_SETUP_ESIM_PAGE_USE_CAMERA},

chrome/test/data/webui/cr_components/chromeos/cellular_setup/BUILD.gn

@@ -16,7 +16,7 @@ js_modulizer("modulize") {
     "provisioning_page_test.js",
     "psim_flow_ui_test.js",
     "setup_selection_flow_test.js",
-    "sim_detect_page_test.js",
+    "setup_loading_page_test.js",
     "fake_cellular_setup_delegate.js",
     "fake_cellular_setup_remote.js",
     "fake_media_devices.js",

chrome/test/data/webui/cr_components/chromeos/cellular_setup/sim_detect_page_test.js → chrome/test/data/webui/cr_components/chromeos/cellular_setup/setup_loading_page_test.js

@@ -4,17 +4,17 @@
 
 // clang-format off
 // #import 'chrome://os-settings/strings.m.js';
-// #import 'chrome://resources/cr_components/chromeos/cellular_setup/sim_detect_page.m.js';
+// #import 'chrome://resources/cr_components/chromeos/cellular_setup/setup_loading_page.m.js';
 
 // #import {flush, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {assertFalse, assertTrue} from '../../../chai_assert.js';
 // #import {FakeCellularSetupDelegate} from './fake_cellular_setup_delegate.m.js';
 // clang-format on
 
-suite('CrComponentsSimDetectPageTest', function() {
+suite('CrComponentsSetupLoadingPageTest', function() {
   let simDetectPage;
   setup(function() {
-    simDetectPage = document.createElement('sim-detect-page');
+    simDetectPage = document.createElement('setup-loading-page');
     simDetectPage.delegate = new cellular_setup.FakeCellularSetupDelegate();
     document.body.appendChild(simDetectPage);
     Polymer.dom.flush();

chrome/test/data/webui/cr_components/chromeos/cr_components_chromeos_browsertest.js

@@ -84,7 +84,7 @@ GEN('#include "content/public/test/browser_test.h"');
   ['SetupSelectionFlow', 'cellular_setup/setup_selection_flow_test.js',[
     './cellular_setup/fake_cellular_setup_delegate.js',
   ]],
-  ['SimDetectPage', 'cellular_setup/sim_detect_page_test.js', [
+  ['SetupLoadingPage', 'cellular_setup/setup_loading_page_test.js', [
     './cellular_setup/fake_cellular_setup_delegate.js',
   ]],
 ].forEach(test => registerTest('CellularSetup', 'cellular-setup', ...test));

chrome/test/data/webui/cr_components/chromeos/cr_components_chromeos_v3_browsertest.js

@@ -41,7 +41,7 @@ GEN('#include "chromeos/constants/chromeos_features.h"');
  ['ProvisioningPage', 'cellular_setup/provisioning_page_test.m.js'],
  ['PsimFlowUi', 'cellular_setup/psim_flow_ui_test.m.js'],
  ['SetupSelectionFlow', 'cellular_setup/setup_selection_flow_test.m.js'],
- ['SimDetectPage', 'cellular_setup/sim_detect_page_test.m.js'],
+ ['SetupLoadingPage', 'cellular_setup/setup_loading_page_test.m.js'],
 ].forEach(test => registerTest('CellularSetup', ...test));
 // clang-format on
 

ui/webui/resources/cr_components/BUILD.gn

@@ -107,7 +107,7 @@ preprocess_grit("preprocess_generated") {
       "chromeos/cellular_setup/provisioning_page.m.js",
       "chromeos/cellular_setup/psim_flow_ui.m.js",
       "chromeos/cellular_setup/setup_selection_flow.m.js",
-      "chromeos/cellular_setup/sim_detect_page.m.js",
+      "chromeos/cellular_setup/setup_loading_page.m.js",
       "chromeos/cellular_setup/subflow_behavior.m.js",
       "chromeos/cellular_setup/webview_post_util.m.js",
       "chromeos/network_health/network_diagnostics.m.js",
@@ -224,8 +224,8 @@ preprocess_grit("preprocess_polymer2") {
       "chromeos/cellular_setup/psim_flow_ui.js",
       "chromeos/cellular_setup/setup_selection_flow.html",
       "chromeos/cellular_setup/setup_selection_flow.js",
-      "chromeos/cellular_setup/sim_detect_page.html",
-      "chromeos/cellular_setup/sim_detect_page.js",
+      "chromeos/cellular_setup/setup_loading_page.html",
+      "chromeos/cellular_setup/setup_loading_page.js",
       "chromeos/cellular_setup/subflow_behavior.html",
       "chromeos/cellular_setup/subflow_behavior.js",
       "chromeos/cellular_setup/webview_post_util.html",

ui/webui/resources/cr_components/chromeos/cellular_setup/BUILD.gn

@@ -23,8 +23,8 @@ js_type_check("closure_compile") {
     ":profile_discovery_list_page",
     ":provisioning_page",
     ":psim_flow_ui",
+    ":setup_loading_page",
     ":setup_selection_flow",
-    ":sim_detect_page",
     ":webview_post_util",
   ]
 }
@@ -40,7 +40,7 @@ js_library("base_page") {
   deps = [ "//ui/webui/resources/js:i18n_behavior" ]
 }
 
-js_library("sim_detect_page") {
+js_library("setup_loading_page") {
   deps = [
     ":base_page",
     ":cellular_setup_delegate",
@@ -97,7 +97,7 @@ js_library("psim_flow_ui") {
     ":final_page",
     ":mojo_interface_provider",
     ":provisioning_page",
-    ":sim_detect_page",
+    ":setup_loading_page",
     ":subflow_behavior",
     "//chromeos/services/cellular_setup/public/mojom:mojom_js_library_for_compile",
     "//ui/webui/resources/js:assert.m",
@@ -176,8 +176,8 @@ js_type_check("closure_compile_module") {
     ":profile_discovery_list_page.m",
     ":provisioning_page.m",
     ":psim_flow_ui.m",
+    ":setup_loading_page.m",
     ":setup_selection_flow.m",
-    ":sim_detect_page.m",
     ":subflow_behavior.m",
     ":webview_post_util.m",
   ]
@@ -247,13 +247,13 @@ js_library("webview_post_util.m") {
   extra_deps = [ ":modulize" ]
 }
 
-js_library("sim_detect_page.m") {
-  sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/sim_detect_page.m.js" ]
+js_library("setup_loading_page.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.m.js" ]
   deps = [
     ":base_page.m",
     ":cellular_setup_delegate.m",
   ]
-  extra_deps = [ ":sim_detect_page_module" ]
+  extra_deps = [ ":setup_loading_page_module" ]
 }
 
 js_library("provisioning_page.m") {
@@ -307,7 +307,7 @@ js_library("psim_flow_ui.m") {
     ":final_page.m",
     ":mojo_interface_provider.m",
     ":provisioning_page.m",
-    ":sim_detect_page.m",
+    ":setup_loading_page.m",
     ":subflow_behavior.m",
     "//chromeos/services/cellular_setup/public/mojom:mojom_js_library_for_compile",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
@@ -370,8 +370,8 @@ group("polymer3_elements") {
     ":profile_discovery_list_page_module",
     ":provisioning_page_module",
     ":psim_flow_ui_module",
+    ":setup_loading_page_module",
     ":setup_selection_flow_module",
-    ":sim_detect_page_module",
   ]
 }
 
@@ -407,9 +407,9 @@ polymer_modulizer("button_bar") {
   auto_imports = cr_components_chromeos_auto_imports
 }
 
-polymer_modulizer("sim_detect_page") {
-  js_file = "sim_detect_page.js"
-  html_file = "sim_detect_page.html"
+polymer_modulizer("setup_loading_page") {
+  js_file = "setup_loading_page.js"
+  html_file = "setup_loading_page.html"
   html_type = "dom-module"
   namespace_rewrites = cr_components_chromeos_namespace_rewrites
   auto_imports = cr_components_chromeos_auto_imports

ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html

@@ -4,6 +4,7 @@
 <link rel="import" href="cellular_types.html">
 <link rel="import" href="cellular_setup_delegate.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
+<link rel="import" href="setup_loading_page.html">
 <link rel="import" href="activation_code_page.html">
 <link rel="import" href="final_page.html">
 <link rel="import" href="profile_discovery_list_page.html">
@@ -20,6 +21,10 @@
     </style>
     <iron-pages attr-for-selected="id"
         selected="[[selectedESimPageName_]]">
+      <setup-loading-page id="profileLoadingPage"
+          delegate="[[delegate]]"
+          loading-message="[[i18n('eSimProfileDetectMessage')]]">
+      </setup-loading-page>
       <profile-discovery-list-page id="profileDiscoveryPage"
           selected-profiles="{{selectedProfiles_}}">
       </profile-discovery-list-page>

ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js

@@ -5,6 +5,7 @@
 cr.define('cellular_setup', function() {
   /** @enum{string} */
   /* #export */ const ESimPageName = {
+    PROFILE_LOADING: 'profileLoadingPage',
     PROFILE_DISCOVERY: 'profileDiscoveryPage',
     ESIM: 'activationCodePage',
     FINAL: 'finalPage',
@@ -32,6 +33,7 @@ cr.define('cellular_setup', function() {
        */
       selectedESimPageName_: {
         type: String,
+        // TODO(crbug.com/1093185) Make initial page PROFILE_LOADING.
         value: ESimPageName.PROFILE_DISCOVERY,
       },
 

ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.html

@@ -2,7 +2,7 @@
 
 <link rel="import" href="../../../html/i18n_behavior.html">
 <link rel="import" href="mojo_interface_provider.html">
-<link rel="import" href="sim_detect_page.html">
+<link rel="import" href="setup_loading_page.html">
 <link rel="import" href="provisioning_page.html">
 <link rel="import" href="final_page.html">
 <link rel="import" href="subflow_behavior.html">
@@ -23,16 +23,23 @@
         flex-direction: column;
       }
     </style>
-    <iron-pages attr-for-selected="is"
+    <iron-pages attr-for-selected="id"
         selected="[[selectedPSimPageName_]]"
         selected-item="{{selectedPage_}}">
-      <sim-detect-page delegate="[[delegate]]" show-error="[[showError_]]"></sim-detect-page>
-      <provisioning-page delegate="[[delegate]]" show-error="{{showError_}}"
+      <setup-loading-page id="simDetectPage"
+          delegate="[[delegate]]" show-error="[[showError_]]"
+          loading-message="[[i18n('establishNetworkConnectionMessage')]]">
+      </setup-loading-page>
+      <provisioning-page id="provisioningPage"
+          delegate="[[delegate]]" show-error="{{showError_}}"
           cellular-metadata="[[cellularMetadata_]]"
           on-carrier-portal-loaded="onCarrierPortalLoaded_"
           on-carrier-portal-result="onCarrierPortalResult_">
       </provisioning-page>
-      <final-page delegate="[[delegate]]" show-error="[[showError_]]"></final-page>
+      <final-page id="finalPage"
+          delegate="[[delegate]]"
+          show-error="[[showError_]]">
+      </final-page>
     </iron-pages>
   </template>
   <script src="psim_flow_ui.js"></script>

ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.js

@@ -5,9 +5,9 @@
 cr.define('cellularSetup', function() {
   /** @enum{string} */
   /* #export */ const PSimPageName = {
-    SIM_DETECT: 'sim-detect-page',
-    PROVISIONING: 'provisioning-page',
-    FINAL: 'final-page',
+    SIM_DETECT: 'simDetectPage',
+    PROVISIONING: 'provisioningPage',
+    FINAL: 'finalPage',
   };
 
   /** @enum{string} */
@@ -104,7 +104,7 @@ cr.define('cellularSetup', function() {
 
       /**
        * DOM Element for the current selected sub-page.
-       * @private {!SimDetectPageElement|!ProvisioningPageElement|
+       * @private {!SetupLoadingPageElement|!ProvisioningPageElement|
        *           !FinalPageElement}
        */
       selectedPage_: Object,

ui/webui/resources/cr_components/chromeos/cellular_setup/sim_detect_page.html → ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.html

@@ -7,7 +7,7 @@
 <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/paper-spinner/paper-spinner-lite.html">
 
-<dom-module id="sim-detect-page">
+<dom-module id="setup-loading-page">
   <template>
     <style include="iron-flex cr-hidden-style">
       #error-icon-container {
@@ -30,11 +30,11 @@
       <div slot="page-body" class="layout horizontal center-center">
         <!-- TODO(crbug.com/1093185): Conditionally show spinner when setup is added in OOBE -->
         <div id="network-connection-message" hidden$="[[showError]]">
-          [[i18n('establishNetworkConnectionMessage')]]
+          [[loadingMessage]]
         </div>
         <div id="error-icon-container" hidden$="[[!showError]]"></div>
       </div>
     </base-page>
   </template>
-  <script src="sim_detect_page.js"></script>
+  <script src="setup_loading_page.js"></script>
 </dom-module>

ui/webui/resources/cr_components/chromeos/cellular_setup/sim_detect_page.js → ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.js

@@ -3,13 +3,13 @@
 // found in the LICENSE file.
 
 /**
- * SIM Detection subpage in Cellular Setup flow. This element contains image
- * asset and description to indicate that the SIM detection is in progress.
- * It also has an error state that displays a message for errors that may
- * happen during this step.
+ * Loading subpage in Cellular Setup flow. This element contains image
+ * asset and description to indicate that a SIM detection or eSIM profiles
+ * loading is in progress. It also has an error state that displays a message
+ * for errors that may happen during this step.
  */
 Polymer({
-  is: 'sim-detect-page',
+  is: 'setup-loading-page',
 
   behaviors: [I18nBehavior],
 
@@ -17,11 +17,16 @@ Polymer({
     /** @type {!cellular_setup.CellularSetupDelegate} */
     delegate: Object,
 
-    /**
-     * Whether error state should be shown.
-     * @type {boolean}
-     */
-    showError: Boolean,
+    /** Whether error state should be shown. */
+    showError: {
+      type: Boolean,
+      value: false,
+    },
+
+    loadingMessage: {
+      type: String,
+      value: '',
+    }
   },
 
   /**