[CrOS Settings] Add profile discovery page UI

Add UI with mock data for the eSIM Profile discovery page.

Screenshots:
https://screenshot.googleplex.com/6APFxT6GKtLqNNd.png
https://screenshot.googleplex.com/AMcw2z4myKRKQTs.png

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

chrome/app/chromeos_strings.grdp

@@ -315,6 +315,9 @@
   <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>
+  <message name="IDS_CELLULAR_SETUP_PROFILE_LIST_PAGE_MESSAGE" desc="Label informing the user that they are able to select multiple eSIM profiles for downloading.">
+    We've found multiple profiles available to download. Select the ones you would like to download before proceeding.
+  </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>

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_PROFILE_LIST_PAGE_MESSAGE.png.sha1

+470635d780b6989e2238310bb55f2eab8863d0b1
\ No newline at end of file

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

@@ -53,7 +53,8 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"switchCamera", IDS_CELLULAR_SETUP_ESIM_PAGE_SWITCH_CAMERA},
     {"useCamera", IDS_CELLULAR_SETUP_ESIM_PAGE_USE_CAMERA},
     {"scanQRCodeSuccess", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_SUCCESS},
-    {"qrCodeRetry", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_RETRY}};
+    {"qrCodeRetry", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_RETRY},
+    {"profileListPageMessage", IDS_CELLULAR_SETUP_PROFILE_LIST_PAGE_MESSAGE}};
 }  //  namespace
 
 void AddLocalizedStrings(content::WebUIDataSource* html_source) {

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

@@ -25,36 +25,40 @@ suite('CrComponentsEsimFlowUiTest', function() {
   });
 
   test('Forward navigation goes to final page', function() {
-    const activationCodePage = eSimPage.$$('#activationCodePage');
+    const profileDiscoveryPage = eSimPage.$$('#profileDiscoveryPage');
     const finalPage = eSimPage.$$('#finalPage');
 
-    assertTrue(!!activationCodePage);
+    assertTrue(!!profileDiscoveryPage);
     assertTrue(!!finalPage);
 
     assertTrue(
-        eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.ESIM &&
-        eSimPage.selectedESimPageName_ === activationCodePage.id);
+        eSimPage.selectedESimPageName_ ===
+            cellular_setup.ESimPageName.PROFILE_DISCOVERY &&
+        eSimPage.selectedESimPageName_ === profileDiscoveryPage.id);
 
     eSimPage.navigateForward();
     Polymer.dom.flush();
 
+    // TODO(crbug.com/1093185) Update this test when the navigation between
+    // profile discovery and activation code pages is wired up.
     assertTrue(
         eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.FINAL &&
         eSimPage.selectedESimPageName_ === finalPage.id);
   });
 
 
-  test('Enable next button', function() {
-    assertTrue(
-        eSimPage.buttonState.next ===
-        cellularSetup.ButtonState.SHOWN_BUT_DISABLED);
+  // TODO(crbug.com/1093185) Update this test when the navigation between
+  // profile discovery and activation code pages is wired up.
+  test('Enable done button', function() {
+    assertTrue(eSimPage.buttonState.done === cellularSetup.ButtonState.HIDDEN);
 
-    const activationCodePage = eSimPage.$$('#activationCodePage');
-    activationCodePage.$$('#activationCode').value = 'ACTIVATION_CODE';
+    const profileDiscoveryPage = eSimPage.$$('#profileDiscoveryPage');
+    const profileList = profileDiscoveryPage.$$('#profileList');
+    profileList.selectItem(profileList.items[0]);
     Polymer.dom.flush();
 
     assertTrue(
-        eSimPage.buttonState.next ===
+        eSimPage.buttonState.done ===
         cellularSetup.ButtonState.SHOWN_AND_ENABLED);
   });
 });

ui/webui/resources/cr_components/BUILD.gn

@@ -91,6 +91,8 @@ preprocess_grit("preprocess_generated") {
       "chromeos/cellular_setup/esim_flow_ui.m.js",
       "chromeos/cellular_setup/final_page.m.js",
       "chromeos/cellular_setup/mojo_interface_provider.m.js",
+      "chromeos/cellular_setup/profile_discovery_list_item.m.js",
+      "chromeos/cellular_setup/profile_discovery_list_page.m.js",
       "chromeos/cellular_setup/provisioning_page.m.js",
       "chromeos/cellular_setup/psim_flow_ui.m.js",
       "chromeos/cellular_setup/setup_selection_flow.m.js",
@@ -201,6 +203,10 @@ preprocess_grit("preprocess_polymer2") {
       "chromeos/cellular_setup/final_page.js",
       "chromeos/cellular_setup/mojo_interface_provider.html",
       "chromeos/cellular_setup/mojo_interface_provider.js",
+      "chromeos/cellular_setup/profile_discovery_list_item.html",
+      "chromeos/cellular_setup/profile_discovery_list_item.js",
+      "chromeos/cellular_setup/profile_discovery_list_page.html",
+      "chromeos/cellular_setup/profile_discovery_list_page.js",
       "chromeos/cellular_setup/provisioning_page.html",
       "chromeos/cellular_setup/provisioning_page.js",
       "chromeos/cellular_setup/psim_flow_ui.html",

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

@@ -19,6 +19,8 @@ js_type_check("closure_compile") {
     ":cellular_types",
     ":final_page",
     ":mojo_interface_provider",
+    ":profile_discovery_list_item",
+    ":profile_discovery_list_page",
     ":provisioning_page",
     ":psim_flow_ui",
     ":setup_selection_flow",
@@ -77,6 +79,17 @@ js_library("activation_code_page") {
   ]
 }
 
+js_library("profile_discovery_list_page") {
+  deps = [
+    "//third_party/polymer/v1_0/components-chromium/iron-list:iron-list-extracted",
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
+}
+
+js_library("profile_discovery_list_item") {
+  deps = [ "//ui/webui/resources/js:i18n_behavior" ]
+}
+
 js_library("psim_flow_ui") {
   deps = [
     ":cellular_setup_delegate",
@@ -96,6 +109,8 @@ js_library("esim_flow_ui") {
   deps = [
     ":activation_code_page",
     ":cellular_setup_delegate",
+    ":profile_discovery_list_item",
+    ":profile_discovery_list_page",
     ":subflow_behavior",
     "//ui/webui/resources/js:i18n_behavior",
   ]
@@ -157,6 +172,8 @@ js_type_check("closure_compile_module") {
     ":esim_flow_ui.m",
     ":final_page.m",
     ":mojo_interface_provider.m",
+    ":profile_discovery_list_item.m",
+    ":profile_discovery_list_page.m",
     ":provisioning_page.m",
     ":psim_flow_ui.m",
     ":setup_selection_flow.m",
@@ -196,6 +213,21 @@ js_library("activation_code_page.m") {
   extra_deps = [ ":activation_code_page_module" ]
 }
 
+js_library("profile_discovery_list_item.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/profile_discovery_list_item.m.js" ]
+  deps = [ "//ui/webui/resources/js:i18n_behavior.m" ]
+  extra_deps = [ ":profile_discovery_list_item_module" ]
+}
+
+js_library("profile_discovery_list_page.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/profile_discovery_list_page.m.js" ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/iron-list:iron-list",
+    "//ui/webui/resources/js:i18n_behavior.m",
+  ]
+  extra_deps = [ ":profile_discovery_list_page_module" ]
+}
+
 js_library("mojo_interface_provider.m") {
   sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/mojo_interface_provider.m.js" ]
   deps = [
@@ -292,6 +324,8 @@ js_library("esim_flow_ui.m") {
     ":cellular_setup_delegate.m",
     ":cellular_types.m",
     ":final_page.m",
+    ":profile_discovery_list_item.m",
+    ":profile_discovery_list_page.m",
     ":subflow_behavior.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
@@ -332,6 +366,8 @@ group("polymer3_elements") {
     ":esim_flow_ui_module",
     ":final_page_module",
     ":modulize",
+    ":profile_discovery_list_item_module",
+    ":profile_discovery_list_page_module",
     ":provisioning_page_module",
     ":psim_flow_ui_module",
     ":setup_selection_flow_module",
@@ -379,6 +415,22 @@ polymer_modulizer("sim_detect_page") {
   auto_imports = cr_components_chromeos_auto_imports
 }
 
+polymer_modulizer("profile_discovery_list_item") {
+  js_file = "profile_discovery_list_item.js"
+  html_file = "profile_discovery_list_item.html"
+  html_type = "dom-module"
+  namespace_rewrites = cr_components_chromeos_namespace_rewrites
+  auto_imports = cr_components_chromeos_auto_imports
+}
+
+polymer_modulizer("profile_discovery_list_page") {
+  js_file = "profile_discovery_list_page.js"
+  html_file = "profile_discovery_list_page.html"
+  html_type = "dom-module"
+  namespace_rewrites = cr_components_chromeos_namespace_rewrites
+  auto_imports = cr_components_chromeos_auto_imports
+}
+
 polymer_modulizer("provisioning_page") {
   js_file = "provisioning_page.js"
   html_file = "provisioning_page.html"

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

@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.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">
 
 <dom-module id="esim-flow-ui">
   <template>
@@ -19,6 +20,9 @@
     </style>
     <iron-pages attr-for-selected="id"
         selected="[[selectedESimPageName_]]">
+      <profile-discovery-list-page id="profileDiscoveryPage"
+          selected-profiles="{{selectedProfiles_}}">
+      </profile-discovery-list-page>
       <activation-code-page id="activationCodePage"></activation-code-page>
       <final-page
         id="finalPage"

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_DISCOVERY: 'profileDiscoveryPage',
     ESIM: 'activationCodePage',
     FINAL: 'finalPage',
   };
@@ -31,7 +32,7 @@ cr.define('cellular_setup', function() {
        */
       selectedESimPageName_: {
         type: String,
-        value: ESimPageName.ESIM,
+        value: ESimPageName.PROFILE_DISCOVERY,
       },
 
       /**
@@ -42,23 +43,36 @@ cr.define('cellular_setup', function() {
         type: Boolean,
         value: false,
       },
+
+      /**
+       * @type {Array<!Object>}
+       * @private
+       */
+      selectedProfiles_: {
+        type: Object,
+      },
+    },
+
+    listeners: {
+      'activation-code-updated': 'onActivationCodeUpdated_',
     },
 
-    listeners: {'activation-code-updated': 'onActivationCodeUpdated_'},
+    observers: ['onSelectedProfilesChanged_(selectedProfiles_.splices)'],
 
     initSubflow() {
       this.buttonState = {
-        backward: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
+        backward: cellularSetup.ButtonState.HIDDEN,
         cancel: this.delegate.shouldShowCancelButton() ?
             cellularSetup.ButtonState.SHOWN_AND_ENABLED :
             cellularSetup.ButtonState.HIDDEN,
         done: cellularSetup.ButtonState.HIDDEN,
-        next: cellularSetup.ButtonState.SHOWN_BUT_DISABLED,
+        next: cellularSetup.ButtonState.HIDDEN,
         tryAgain: cellularSetup.ButtonState.HIDDEN,
-        skipDiscovery: cellularSetup.ButtonState.HIDDEN,
+        skipDiscovery: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
       };
     },
 
+    /** @private */
     onActivationCodeUpdated_(event) {
       if (event.detail.activationCode) {
         this.set(
@@ -69,6 +83,21 @@ cr.define('cellular_setup', function() {
       }
     },
 
+    /** @private */
+    onSelectedProfilesChanged_() {
+      // TODO(crbug.com/1093185): Add navigation logic.
+      if (this.selectedProfiles_.length > 0) {
+        this.set('buttonState.skipDiscovery', cellularSetup.ButtonState.HIDDEN);
+        this.set(
+            'buttonState.done', cellularSetup.ButtonState.SHOWN_AND_ENABLED);
+      } else {
+        this.set(
+            'buttonState.skipDiscovery',
+            cellularSetup.ButtonState.SHOWN_AND_ENABLED);
+        this.set('buttonState.done', cellularSetup.ButtonState.HIDDEN);
+      }
+    },
+
     navigateForward() {
       this.selectedESimPageName_ = ESimPageName.FINAL;
     },

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
+
+<dom-module id="profile-discovery-list-item">
+  <template>
+    <style include="iron-flex">
+      #details {
+        align-items: center;
+        display: flex;
+        flex: auto;
+        min-height: var(--cr-section-two-line-min-height);
+      }
+
+      #profileImage {
+        margin-inline-end: 16px;
+      }
+
+      #profileTitleLabel {
+        color: var(--cr-primary-text-color);
+      }
+
+      #checkmark {
+        -webkit-mask: url(activation_code_page_checked.svg) no-repeat center;
+        background-color: var(--google-blue-600);
+        height: 20px;
+        margin-inline-end: 8px;
+        mask: url(activation_code_page_checked.svg) no-repeat center;
+        padding-inline-end: var(--cr-section-padding);
+        width: 20px;
+      }
+    </style>
+    <div class="two-line no-padding" selectable>
+      <div class="flex layout horizontal center link-wrapper">
+        <div id="details" no-flex$="false">
+          <!-- TODO(crbug.com/1093185): Update with real profile image. -->
+          <img id="profileImage" src="../../../images/200-logo_googleg.png">
+          <div class="flex settings-box-text">
+            <div id="profileTitleLabel">
+              [[profile.name]]
+            </div>
+            <div id="profileProviderLabel">
+              [[profile.provider]]
+            </div>
+          </div>
+        </div>
+        <span id="checkmark" hidden$="[[!selected]]"
+            tabindex="-1">
+      </div>
+    </div>
+  </template>
+  <script src="profile_discovery_list_item.js"></script>
+</dom-module>
\ No newline at end of file

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview
+ * Item in the profile-discovery-list-page list displaying details of an eSIM
+ * profile.
+ */
+
+Polymer({
+  is: 'profile-discovery-list-item',
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    // TODO(crbug.com/1093185) Add type annotation when the real Profile struct
+    // is available.
+    profile: {
+      type: Object,
+      value: null,
+    },
+
+    selected: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
+  },
+});

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

+<link rel="import" href="../../../html/polymer.html">
+
+<link rel="import" href="../../../html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
+<link rel="import" href="base_page.html">
+<link rel="import" href="profile_discovery_list_item.html">
+
+<dom-module id="profile-discovery-list-page">
+  <template>
+    <style include="cr-shared-style iron-flex">
+      [slot='page-body'] {
+        height: 300px;
+        margin-top: -20px;
+      }
+
+      profile-discovery-list-item {
+        height: 64px;
+      }
+
+      #container {
+        height: 230px;
+        margin-top: 20px;
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+
+      iron-list > *:not(:first-of-type) {
+        border-top: var(--cr-separator-line);
+      }
+    </style>
+    <base-page>
+      <div slot="page-body">
+        <div>[[i18n('profileListPageMessage')]]</div>
+        <div id="container" class="layout vertical flex" scrollable>
+          <iron-list id="profileList" items="[[profiles_]]"
+              scroll-target="container" selection-enabled
+              preserve-focus multi-selection
+              selected-items="{{selectedProfiles}}"
+              role="listbox"
+              aria-multiselectable="true">
+            <template>
+              <profile-discovery-list-item profile="[[item]]"
+                  selected="[[isProfileSelected_(item, selectedProfiles.length)]]"
+                  tabindex="0"
+                  role="option"
+                  aria-selected="[[isProfileSelected_(item, selectedProfiles.length)]]">
+              </profile-discovery-list-item>
+            </template>
+          </iron-list>
+        </div>
+      </div>
+    </base-page>
+  </template>
+  <script src="profile_discovery_list_page.js"></script>
+</dom-module>

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview
+ * Page in eSIM Setup flow that displays a choice of available eSIM Profiles.
+ */
+
+Polymer({
+  is: 'profile-discovery-list-page',
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    /**
+     * TODO(crbug.com/1093185) Fetch real profiles.
+     * @type {Array<!Object>}
+     * @private
+     */
+    profiles_: {
+      type: Array,
+      value() {
+        return [
+          {
+            name: 'Profile 1',
+            provider: 'Google Fi',
+          },
+          {
+            name: 'Profile 2',
+            provider: 'Verizon',
+          },
+          {
+            name: 'Profile 3',
+            provider: 'Google Fi',
+          },
+        ];
+      },
+    },
+
+    /**
+     * @type {Array<!Object>}
+     * @private
+     */
+    selectedProfiles: {
+      type: Object,
+      notify: true,
+    },
+  },
+
+  /**
+   * @param {Object} profile
+   * @private
+   */
+  isProfileSelected_(profile) {
+    return this.selectedProfiles.some(p => p === profile);
+  }
+});