[CrOS cellular] Update sim detect page ui

- current UI https://imgur.com/97DpSem
- UI spec https://docs.google.com/presentation/d/1Mfk5ZMEmeHwSbadUbyRU0Si5k6XDIvw-j4u7TUaCIGY/edit#slide=id.g6db8b414e1_4_32

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

chrome/app/chromeos_strings.grdp

@@ -315,6 +315,12 @@
   <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>
+  <message name="IDS_CELLULAR_SETUP_BASE_PAGE_TITLE" desc="Title for cellular setup flow dialog in ChromeOS settings">
+    Set up new network
+  </message>
+  <message name="IDS_CELLULAR_SETUP_ESTABLISH_NETWORK_CONNECTION" desc="Message, informing user that a network connection is being established during cellular setup">
+    Establishing network connection ...
+  </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_BASE_PAGE_TITLE.png.sha1

+21cdf48ff054f2e8ce89531da8f52cd8c80725cd
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESTABLISH_NETWORK_CONNECTION.png.sha1

+21cdf48ff054f2e8ce89531da8f52cd8c80725cd
\ No newline at end of file

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

@@ -21,9 +21,12 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"activationCode", IDS_CELLULAR_SETUP_ESIM_PAGE_ACTIVATION_CODE},
     {"cancel", IDS_CANCEL},
     {"back", IDS_CELLULAR_SETUP_BACK_LABEL},
+    {"basePageTitle", IDS_CELLULAR_SETUP_BASE_PAGE_TITLE},
     {"eSimFlowSetup", IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL},
     {"eSimFlowSetupMessage",
      IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_MESSAGE},
+    {"establishNetworkConnectionMessage",
+     IDS_CELLULAR_SETUP_ESTABLISH_NETWORK_CONNECTION},
     {"next", IDS_CELLULAR_SETUP_NEXT_LABEL},
     {"finish", IDS_CELLULAR_SETUP_FINISH_LABEL},
     {"tryAgain", IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL},

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 // clang-format off
+// #import 'chrome://os-settings/strings.m.js';
 // #import 'chrome://resources/cr_components/chromeos/cellular_setup/sim_detect_page.m.js';
 
 // #import {flush, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

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

@@ -32,6 +32,7 @@ js_library("button_bar") {
 }
 
 js_library("base_page") {
+  deps = [ "//ui/webui/resources/js:i18n_behavior" ]
 }
 
 js_library("sim_detect_page") {
@@ -127,16 +128,16 @@ js_type_check("closure_compile_module") {
   deps = [
     ":base_page.m",
     ":button_bar.m",
-    ":cellular_types.m",
     ":cellular_setup.m",
+    ":cellular_types.m",
     ":esim_flow_ui.m",
     ":final_page.m",
     ":mojo_interface_provider.m",
     ":provisioning_page.m",
     ":psim_flow_ui.m",
+    ":setup_selection_flow.m",
     ":sim_detect_page.m",
     ":subflow_behavior.m",
-    ":setup_selection_flow.m",
     ":webview_post_util.m",
   ]
 }
@@ -256,7 +257,7 @@ js_library("setup_selection_flow.m") {
     ":subflow_behavior.m",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]
-   extra_deps = [ ":setup_selection_flow_module" ]
+  extra_deps = [ ":setup_selection_flow_module" ]
 }
 
 js_library("cellular_setup.m") {
@@ -269,14 +270,14 @@ js_library("cellular_setup.m") {
     ":setup_selection_flow.m",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]
-   extra_deps = [ ":cellular_setup_module" ]
+  extra_deps = [ ":cellular_setup_module" ]
 }
 
 group("polymer3_elements") {
   public_deps = [
-    ":cellular_setup_module",
     ":base_page_module",
     ":button_bar_module",
+    ":cellular_setup_module",
     ":esim_flow_ui_module",
     ":final_page_module",
     ":modulize",

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

 <link rel="import" href="../../../html/polymer.html">
 
 <link rel="import" href="../../../cr_elements/shared_vars_css.html">
+<link rel="import" href="../../../html/i18n_behavior.html">
 
 <dom-module id="base-page">
   <template>
@@ -23,7 +24,7 @@
         width: 100%;
       }
     </style>
-    <h1 id="title">[[title]]</h1>
+    <h1 id="title">[[getTitle_(title)]]</h1>
     <div id="message">[[message]]</div>
     <slot name="page-body"></slot>
   </template>

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

@@ -6,6 +6,8 @@
 Polymer({
   is: 'base-page',
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /**
      * Main title for the page.
@@ -21,4 +23,12 @@ Polymer({
      */
     message: String,
   },
+
+  /**
+   * @returns {string}
+   * @private
+   */
+  getTitle_() {
+    return this.title || this.i18n('basePageTitle');
+  }
 });

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

@@ -13,9 +13,14 @@
     <style include="iron-flex">
       :host {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         padding: 10px 0;
       }
+
+      #flex {
+        flex: 1;
+      }
+
     </style>
     <cr-button id="backward"
         class="cancel-button"
@@ -24,13 +29,7 @@
         hidden$="[[isButtonHidden_(Button.BACKWARD, buttonState.*)]]">
       [[i18n('back')]]
     </cr-button>
-    <cr-button id="cancel"
-        class="cancel-button"
-        on-click="onBackwardButtonClicked_"
-        disabled="[[isButtonDisabled_(Button.CANCEL, buttonState.*)]]"
-        hidden$="[[isButtonHidden_(Button.CANCEL, buttonState.*)]]">
-      [[i18n('cancel')]]
-    </cr-button>
+    <div id="flex"></div>
     <cr-button id="tryAgain"
         class="action-button"
         on-click="onTryAgainButtonClicked_"
@@ -45,6 +44,13 @@
         hidden$="[[isButtonHidden_(Button.FINISH, buttonState.*)]]">
       [[i18n('finish')]]
     </cr-button>
+    <cr-button id="cancel"
+        class="cancel-button"
+        on-click="onBackwardButtonClicked_"
+        disabled="[[isButtonDisabled_(Button.CANCEL, buttonState.*)]]"
+        hidden$="[[isButtonHidden_(Button.CANCEL, buttonState.*)]]">
+      [[i18n('cancel')]]
+    </cr-button>
     <cr-button id="next"
         class="action-button"
         on-click="onNextButtonClicked_"

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

@@ -181,10 +181,10 @@ cr.define('cellularSetup', function() {
     initSubflow() {
       this.state_ = PSimUIState.STARTING_ACTIVATION;
       this.set('buttonState', {
-        backward: cellularSetup.ButtonState.HIDDEN,
+        backward: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
         cancel: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
         finish: cellularSetup.ButtonState.HIDDEN,
-        next: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
+        next: cellularSetup.ButtonState.SHOWN_BUT_DISABLED,
         tryAgain: cellularSetup.ButtonState.HIDDEN
       });
     },

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

@@ -9,11 +9,6 @@
 <dom-module id="sim-detect-page">
   <template>
     <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,
@@ -23,11 +18,18 @@
         height: 100%;
         width: 100%;
       }
+
+      #network-connection-message {
+        text-align: center;
+      }
     </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>
+        <!-- TODO(crbug.com/1093185): Conditionally show spinner when setup is added in OOBE -->
+        <div id="network-connection-message" hidden$="[[showError]]">
+          [[i18n('establishNetworkConnectionMessage')]]
+        </div>
         <div id="error-icon-container" hidden$="[[!showError]]"></div>
       </div>
     </base-page>

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

@@ -27,8 +27,7 @@ Polymer({
    * @private
    */
   getTitle_(showError) {
-    return this.i18n(
-        showError ? 'simDetectPageErrorTitle' : 'simDetectPageTitle');
+    return showError ? this.i18n('simDetectPageErrorTitle') : '';
   },
 
   /**