[CellularSetupUi] Add eSim page UI

- Add news strings for eSim UI
- Adds new UI elements to esim_flow_ui.html
- Current UI: https://imgur.com/zdfcmbx
- UI spec https://docs.google.com/presentation/d/1Mfk5ZMEmeHwSbadUbyRU0Si5k6XDIvw-j4u7TUaCIGY/edit#slide=id.g921c12802d_0_1

Bug: 1093185
Change-Id: Iadf0b8a411d93d59c1782d103f34c96442092481
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2351392
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@{#802353}

chrome/app/chromeos_strings.grdp

@@ -261,6 +261,9 @@
   <message name="IDS_CELLULAR_SETUP_NEXT_LABEL" desc="Label for button that advances to next step during cellular setup">
     Next
   </message>
+  <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_ACTIVATION_CODE" desc="Label for activation code input box">
+    Activation code
+  </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.">
     Preparing to setup your cellular device...
   </message>
@@ -300,6 +303,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_PAGE_SCAN_QR_CODE" desc="Label for informing the user on ways to retrieve an eSim profile">
+    Scan QR code using device camera or enter activation code provided by your carrier
+  </message>
 
   <!-- Upgrade notifications -->
   <message name="IDS_RELAUNCH_REQUIRED_TITLE_DAYS" desc="The title of a dialog that tells users the device must be restarted within two or more days.">

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_PAGE_ACTIVATION_CODE.png.sha1

+8c8ed25aabd13fdf8a5305f2121c6df855edb1d1
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE.png.sha1

+8c8ed25aabd13fdf8a5305f2121c6df855edb1d1
\ No newline at end of file

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

@@ -18,6 +18,7 @@ namespace cellular_setup {
 namespace {
 
 constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
+    {"activationCode", IDS_CELLULAR_SETUP_ESIM_PAGE_ACTIVATION_CODE},
     {"cancel", IDS_CANCEL},
     {"back", IDS_CELLULAR_SETUP_BACK_LABEL},
     {"eSimFlowSetup", IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL},
@@ -40,7 +41,8 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"finalPageTitle", IDS_CELLULAR_SETUP_FINAL_PAGE_TITLE},
     {"finalPageMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_MESSAGE},
     {"finalPageErrorTitle", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_TITLE},
-    {"finalPageErrorMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_MESSAGE}};
+    {"finalPageErrorMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_MESSAGE},
+    {"scanQRCode", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE}};
 }  //  namespace
 
 void AddLocalizedStrings(content::WebUIDataSource* html_source) {

chrome/test/data/webui/cr_components/chromeos/cellular_setup/esim_flow_ui_test.js

@@ -19,7 +19,7 @@ suite('CrComponentsEsimFlowUiTest', function() {
   });
 
   test('Base test', function() {
-    const p = eSimPage.$$('p');
-    assertTrue(!!p);
+    const crInput = eSimPage.$$('cr-input');
+    assertTrue(!!crInput);
   });
 });

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

 <link rel="import" href="../../../html/polymer.html">
 <link rel="import" href="../../../html/i18n_behavior.html">
+<link rel="import" href="../../../cr_elements/cr_input/cr_input.html">
 <link rel="import" href="subflow_behavior.html">
 <link rel="import" href="cellular_types.html">
 
@@ -7,13 +8,26 @@
   <template>
     <style include="iron-flex">
       :host {
+        align-content: space-between;
         display: flex;
         flex: 1 1 auto;
         flex-direction: column;
       }
+
+      #esim-qrcode-detection {
+        /* TODO(crbug.com/1093185): Remove When QR code detection is added */
+        background-color: darkgray;
+        height: 200px;
+        margin: 10px 0;
+      }
     </style>
-    <!-- TODO(crbug.com/1093185): Add eSIM UI-->
-    <p>TODO(eSIM flow)</p>
+    [[i18n('scanQRCode')]]
+    <!-- TODO(crbug.com/1093185): Add QR code detection-->
+    <div id="esim-qrcode-detection"></div>
+    <cr-input id="activation-code"
+        label="[[i18n('activationCode')]]"
+        value="{{activationCode_}}">
+    </cr-input>
   </template>
   <script src="esim_flow_ui.js"></script>
 </dom-module>
\ No newline at end of file

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

@@ -10,9 +10,18 @@ Polymer({
   is: 'esim-flow-ui',
 
   behaviors: [
+    I18nBehavior,
     SubflowBehavior,
   ],
 
+  properties: {
+    /**
+     * @type {string}
+     * @private
+     */
+    activationCode_: String,
+  },
+
   initSubflow() {
     this.buttonState = {
       backward: cellularSetup.ButtonState.HIDDEN,