[CrOS Cellular] Implement SimDetectPage in CellularSetup UI.

This page displays a spinner while waiting for the SIM card to be
detected, and displays an error if the SIM card is unable to be found.

Bug: 968858
Change-Id: I38a294258edfd193fda246fabf0ee71418be9556
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1717689
Auto-Submit: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Ryan Hansberry <hansberry@chromium.org>
Cr-Commit-Position: refs/heads/master@{#681111}

chrome/app/chromeos_strings.grdp

@@ -213,8 +213,14 @@
   <message name="IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL" desc="Label for button to retry a step during cellular setup">
     Try again
   </message>
-  <message name="IDS_CELLULAR_SETUP_SIM_DETECT_PAGE_TITLE" desc="Title for first screen of cellular setup during which ChromeOS is preparing the cellular device for setup." translateable="false">
-    Sim Detect Page
+  <message name="IDS_CELLULAR_SETUP_SIM_DETECT_PAGE_TITLE" desc="Title for first screen of cellular setup during which ChromeOS is preparing the cellular device for setup.">
+    Preparing to setup your cellular device...
+  </message>
+  <message name="IDS_CELLULAR_SETUP_SIM_DETECT_PAGE_ERROR_TITLE" desc="Title for cellular setup when Chrome OS encounters an error preparing the cellular device for setup.">
+    We couldn't detect your SIM card
+  </message>
+  <message name="IDS_CELLULAR_SETUP_SIM_DETECT_PAGE_ERROR_MESSAGE" desc="Message displayed under title in cellular setup when Chrome OS encounters an error preparing the cellular device for setup. Prompts user to insert SIM and try again.">
+    Please insert your SIM and try again
   </message>
   <message name="IDS_CELLULAR_SETUP_PROVISIONING_PAGE_TITLE" desc="Title for cellular setup step in which the user uses the embedded carrier provisioning portal to make payment and activate the device." translateable="false">
     Provisioning Page

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

@@ -23,6 +23,9 @@ constexpr LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"finish", IDS_CELLULAR_SETUP_FINISH_LABEL},
     {"tryAgain", IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL},
     {"simDetectPageTitle", IDS_CELLULAR_SETUP_SIM_DETECT_PAGE_TITLE},
+    {"simDetectPageErrorTitle", IDS_CELLULAR_SETUP_SIM_DETECT_PAGE_ERROR_TITLE},
+    {"simDetectPageErrorMessage",
+     IDS_CELLULAR_SETUP_SIM_DETECT_PAGE_ERROR_MESSAGE},
     {"provisioningPageTitle", IDS_CELLULAR_SETUP_PROVISIONING_PAGE_TITLE},
     {"finalPageTitle", IDS_CELLULAR_SETUP_FINAL_PAGE_TITLE},
     {"finalPageMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_MESSAGE},

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

@@ -2,13 +2,33 @@
 
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/base_page.html">
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.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/paper-spinner/paper-spinner-lite.html">
 
 <dom-module id="sim-detect-page">
   <template>
-    <base-page title="[[i18n('simDetectPageTitle')]]">
-      <div slot="page-body">
-        <!-- TODO(azeemarshad): Add page assets and strings -->
-        [[i18n('simDetectPageTitle')]]
+    <style include="iron-flex cr-hidden-style">
+      paper-spinner-lite {
+        height: 200px;
+        width: 200px;
+      }
+
+      #error-icon-container {
+        background-image: -webkit-image-set(
+            url(error_1x.png) 1x,
+            url(error_2x.png) 2x);
+        background-position: center center;
+        background-repeat: no-repeat;
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+    <base-page title="[[getTitle_(showError)]]"
+        message="[[getMessage_(showError)]]">
+      <div slot="page-body" class="layout horizontal center-center">
+        <paper-spinner-lite active hidden$="[[showError]]"></paper-spinner-lite>
+        <div id="error-icon-container" hidden$="[[!showError]]"></div>
       </div>
     </base-page>
   </template>

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

@@ -18,9 +18,25 @@ Polymer({
      * Whether error state should be shown.
      * @type {boolean}
      */
-    showError: {
-      type: Boolean,
-      value: false,
-    },
-  }
+    showError: Boolean,
+  },
+
+  /**
+   * @param {boolean} showError
+   * @return {string}
+   * @private
+   */
+  getTitle_: function(showError) {
+    return this.i18n(
+        showError ? 'simDetectPageErrorTitle' : 'simDetectPageTitle');
+  },
+
+  /**
+   * @param {boolean} showError
+   * @return {string}
+   * @private
+   */
+  getMessage_: function(showError) {
+    return showError ? this.i18n('simDetectPageErrorMessage') : '';
+  },
 });