[CellularSetupUi] Create new CellularSetup and rename old to PsimFlowUi.

* Renames CellularSetup Polymer component to PsimFlowUi.
* CellularSetup now includes an IronPages element that can switch
  between the PsimFlowUi, EsimFlowUi (to be written), and
  SetupFlowSelectionPage (to be written).
* Moves ButtonBar into new CellularSetup.

Bug: 1093185
Change-Id: I69bc4fd331cedab6cc28b4068ed613a6ad097656
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2324068Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#793720}

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

@@ -14,6 +14,7 @@ js_type_check("closure_compile") {
     ":final_page",
     ":mojo_interface_provider",
     ":provisioning_page",
+    ":psim_flow_ui",
     ":sim_detect_page",
     ":webview_post_util",
   ]
@@ -53,9 +54,8 @@ js_library("final_page") {
   deps = [ ":base_page" ]
 }
 
-js_library("cellular_setup") {
+js_library("psim_flow_ui") {
   deps = [
-    ":button_bar",
     ":final_page",
     ":mojo_interface_provider",
     ":provisioning_page",
@@ -65,6 +65,13 @@ js_library("cellular_setup") {
   ]
 }
 
+js_library("cellular_setup") {
+  deps = [
+    ":button_bar",
+    ":psim_flow_ui",
+  ]
+}
+
 js_library("mojo_interface_provider") {
   deps = [
     "//chromeos/services/cellular_setup/public/mojom:mojom_js_library_for_compile",

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

 <link rel="import" href="../../../html/polymer.html">
 
-<link rel="import" href="../../../html/i18n_behavior.html">
-<link rel="import" href="mojo_interface_provider.html">
 <link rel="import" href="button_bar.html">
-<link rel="import" href="sim_detect_page.html">
-<link rel="import" href="provisioning_page.html">
-<link rel="import" href="final_page.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="psim_flow_ui.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 
 <dom-module id="cellular-setup">
   <template>
-    <style include="iron-flex">
+    <style>
       :host {
-        display: flex;
         flex: 1 1 auto;
-        flex-direction: column;
         padding: 10px;
       }
+
+      iron-pages {
+        display: flex;
+        flex: 1 1 auto;
+      }
     </style>
     <iron-pages attr-for-selected="is"
-        selected="[[selectedPageName_]]"
-        selected-item="{{selectedPage_}}">
-      <sim-detect-page show-error="[[showError_]]"></sim-detect-page>
-      <provisioning-page show-error="{{showError_}}"
-          cellular-metadata="[[cellularMetadata_]]"
-          on-carrier-portal-loaded="onCarrierPortalLoaded_"
-          on-carrier-portal-result="onCarrierPortalResult_">
-      </provisioning-page>
-      <final-page show-error="[[showError_]]"></final-page>
+        selected="[[selectedPageName_]]">
+      <!-- TODO(hsuregan): Implement <setup-flow-selection>. -->
+      <psim-flow-ui></psim-flow-ui>
+      <!-- TODO(hsuregan): Implement <esim-flow>. -->
     </iron-pages>
     <button-bar show-try-again-button="[[showTryAgainButton_]]"
         show-finish-button="[[showFinishButton_]]"
-        show-cancel-button="[[showCancelButton_]]"></button-bar>
+        show-cancel-button="[[showCancelButton_]]">
+    </button-bar>
   </template>
   <script src="cellular_setup.js">
   </script>

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

+<link rel="import" href="../../../html/polymer.html">
+
+<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="provisioning_page.html">
+<link rel="import" href="final_page.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.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/iron-pages/iron-pages.html">
+
+<dom-module id="psim-flow-ui">
+  <template>
+    <style include="iron-flex">
+      :host {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+      }
+    </style>
+    <iron-pages attr-for-selected="is"
+        selected="[[selectedPSimPageName_]]"
+        selected-item="{{selectedPage_}}">
+      <sim-detect-page show-error="[[showError_]]"></sim-detect-page>
+      <provisioning-page show-error="{{showError_}}"
+          cellular-metadata="[[cellularMetadata_]]"
+          on-carrier-portal-loaded="onCarrierPortalLoaded_"
+          on-carrier-portal-result="onCarrierPortalResult_">
+      </provisioning-page>
+      <final-page show-error="[[showError_]]"></final-page>
+    </iron-pages>
+  </template>
+  <script src="psim_flow_ui.js">
+  </script>
+</dom-module>

ui/webui/resources/cr_components/cr_components_resources.grdp

@@ -134,6 +134,12 @@
     <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_CELLULAR_SETUP_JS"
                file="cr_components/chromeos/cellular_setup/cellular_setup.js"
                type="chrome_html" />
+    <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_PSIM_FLOW_HTML"
+               file="cr_components/chromeos/cellular_setup/psim_flow_ui.html"
+               type="chrome_html" />
+    <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_PSIM_FLOW_JS"
+               file="cr_components/chromeos/cellular_setup/psim_flow_ui.js"
+               type="chrome_html" />
     <structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_MOJO_INTERFACE_PROVIDER_HTML"
                file="cr_components/chromeos/cellular_setup/mojo_interface_provider.html"
                type="chrome_html" />