[CrOS settings] Add cellular eid popup

Screenshot: https://screenshot.googleplex.com/BNCSFDoGHTmY6Wm.png
Reference: https://docs.google.com/presentation/d/1Mfk5ZMEmeHwSbadUbyRU0Si5k6XDIvw-j4u7TUaCIGY/edit#slide=id.g7d94e49b87_2_58

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

chrome/app/os_settings_strings.grdp

@@ -2294,6 +2294,18 @@
   <message name="IDS_SETTINGS_INTERNET_TETHER_NOT_SETUP_WITH_LEARN_MORE_LINK" desc="Text shown when viewing the Mobile data page and no instant tether network is available">
     No device detected <ph name="BEGIN_LINK">&lt;a target="_blank" href="$1"&gt;</ph>Learn more<ph name="END_LINK">&lt;/a&gt;</ph>
   </message>
+  <message name="IDS_SETTINGS_INTERNET_EID_POPUP_TITLE" desc="Label shown when vewing EID and QR code popup describing device EID">
+    Your device EID
+  </message>
+  <message name="IDS_SETTINGS_INTERNET_EID_POPUP_DESCRIPTION" desc="Label shown when veiwing EID and QR code popup describing what an EID number is used for">
+    A customer service rep can use the EID number to help you activate service.
+  </message>
+  <message name="IDS_SETTINGS_INTERNET_CLOSE_EID_POPUP_BUTTON_LABEL" desc="A11y and tooltip label for EID and QR code popup close button when viewing EID and QR code popup">
+    Close EID and QR code popup
+  </message>
+  <message name="IDS_SETTINGS_INTERNET_SHOW_EID_POPUP_BUTTON_LABEL" desc="A11y and tooltop label for EID and QR code popup show button when viewing cellular network list">
+    Show device EID and QR code popup
+  </message>
 
   <!-- Users Page (OS Settings) -->
   <message name="IDS_SETTINGS_USERS_MODIFIED_BY_OWNER_LABEL" desc="Label saying settings may only be modified by the device owner.">

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_CLOSE_EID_POPUP_BUTTON_LABEL.png.sha1

+cbceaad1438a2266d8e8b3fb095a996790ad282e
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_EID_POPUP_DESCRIPTION.png.sha1

+1370c675688d4ed5f806cfff35f05c1b16283fcf
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_EID_POPUP_TITLE.png.sha1

+1370c675688d4ed5f806cfff35f05c1b16283fcf
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_SHOW_EID_POPUP_BUTTON_LABEL.png.sha1

+cbceaad1438a2266d8e8b3fb095a996790ad282e
\ No newline at end of file

chrome/browser/resources/settings/chromeos/BUILD.gn

@@ -308,6 +308,7 @@ preprocess_grit("preprocess_gen_v3") {
     "chromeos/google_assistant_page/google_assistant_browser_proxy.m.js",
     "chromeos/google_assistant_page/google_assistant_page.m.js",
     "chromeos/internet_page/cellular_networks_list.m.js",
+    "chromeos/internet_page/cellular_eid_popup.m.js",
     "chromeos/internet_page/cellular_setup_dialog.m.js",
     "chromeos/internet_page/cellular_setup_settings_delegate.m.js",
     "chromeos/internet_page/internet_config.m.js",
@@ -580,6 +581,8 @@ preprocess_grit("preprocess_v2") {
     "chromeos/google_assistant_page/google_assistant_page.js",
     "chromeos/internet_page/cellular_networks_list.js",
     "chromeos/internet_page/cellular_networks_list.html",
+    "chromeos/internet_page/cellular_eid_popup.html",
+    "chromeos/internet_page/cellular_eid_popup.js",
     "chromeos/internet_page/cellular_setup_dialog.html",
     "chromeos/internet_page/cellular_setup_dialog.js",
     "chromeos/internet_page/cellular_setup_settings_delegate.html",

chrome/browser/resources/settings/chromeos/internet_page/BUILD.gn

@@ -8,6 +8,7 @@ import("//ui/webui/resources/tools/js_modulizer.gni")
 
 js_type_check("closure_compile") {
   deps = [
+    ":cellular_eid_popup",
     ":cellular_networks_list",
     ":cellular_setup_dialog",
     ":internet_config",
@@ -124,6 +125,7 @@ js_library("internet_known_networks_page") {
 
 js_library("internet_subpage") {
   deps = [
+    ":cellular_eid_popup",
     ":cellular_networks_list",
     ":internet_page_browser_proxy",
     "..:deep_linking_behavior",
@@ -205,16 +207,23 @@ js_library("cellular_setup_settings_delegate") {
 
 js_library("cellular_networks_list") {
   deps = [
+    ":cellular_eid_popup",
     "//ui/webui/resources/cr_components/chromeos/cellular_setup:cellular_types",
     "//ui/webui/resources/cr_components/chromeos/network:onc_mojo",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button",
     "//ui/webui/resources/js:i18n_behavior",
   ]
 }
 
+js_library("cellular_eid_popup") {
+  deps = [ "//ui/webui/resources/js:i18n_behavior" ]
+}
+
 # TODO: Uncomment as the Polymer3 migration makes progress.
 js_type_check("closure_compile_module") {
   is_polymer3 = true
   deps = [
+    ":cellular_eid_popup.m",
     ":cellular_networks_list.m",
     ":cellular_setup_dialog.m",
     ":cellular_setup_settings_delegate.m",
@@ -496,15 +505,23 @@ js_library("cellular_networks_list.m") {
     "//chrome/browser/resources/settings/chromeos/localized_link:localized_link.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_components/chromeos/cellular_setup:cellular_types.m",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]
   extra_deps = [ ":cellular_networks_list_module" ]
 }
 
+js_library("cellular_eid_popup.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/internet_page/cellular_eid_popup.m.js" ]
+  deps = [ "//ui/webui/resources/js:i18n_behavior.m" ]
+  extra_deps = [ ":cellular_eid_popup_module" ]
+}
+
 import("//tools/polymer/polymer.gni")
 
 group("polymer3_elements") {
   public_deps = [
+    ":cellular_eid_popup_module",
     ":cellular_networks_list_module",
     ":cellular_setup_dialog_module",
     ":internet_config_module",
@@ -625,6 +642,14 @@ polymer_modulizer("cellular_networks_list") {
   namespace_rewrites = os_settings_namespace_rewrites
 }
 
+polymer_modulizer("cellular_eid_popup") {
+  js_file = "cellular_eid_popup.js"
+  html_file = "cellular_eid_popup.html"
+  html_type = "dom-module"
+  auto_imports = os_settings_auto_imports
+  namespace_rewrites = os_settings_namespace_rewrites
+}
+
 js_modulizer("modulize") {
   input_files = [
     "internet_page_browser_proxy.js",

chrome/browser/resources/settings/chromeos/internet_page/cellular_eid_popup.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="../../chromeos/os_settings_icons_css.html">
+<link rel="import" href="./internet_shared_css.html">
+
+<dom-module id="cellular-eid-popup">
+  <template>
+    <style include="cr-shared-style
+        os-settings-icons
+        settings-shared internet-shared iron-flex">
+
+      .cellular-network-list-header {
+        border-top: var(--cr-separator-line);
+        padding: 16px 0 8px 0;
+      }
+
+      .body {
+        margin-top: 6px;
+      }
+
+      .cellular-network-content {
+        margin: 8px 0 8px 32px;
+      }
+
+      .cellular-not-setup {
+        color: var(--google-grey-700);
+        font-size: smaller;
+        margin-bottom: 16px;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .title {
+        align-self: center;
+      }
+
+      #container {
+        padding: 8px 16px;
+      }
+
+      #closeBtn {
+        align-self: center;
+        cursor: pointer;
+      }
+
+    </style>
+    <div id="container"
+        class="dialog"
+        tabindex="1"
+        aria-labelledby="eidTitle"
+        aria-describedby="eidDescription">
+      <div class="header">
+        <div id="eidTitle" class="title" arian-hidden="true">
+          $i18n{eidPopupTitle}
+        </div>
+        <cr-icon-button
+            id="eidPopupCloseIcon"
+            iron-icon="cr:close"
+            title="$i18n{closeEidPopupButtonLabel}"
+            aria-label="$i18n{closeEidPopupButtonLabel}"
+            on-click="onCloseTap_">
+        </cr-icon-button>
+      </div>
+      <div class="body">
+        <div id="eidDescription" arian-hidden="true">
+          $i18n{eidPopupDescription}
+        </div>
+        <!-- TODO(crbug/1093185): Add eid code -->
+      </div>
+    </div>
+  </template>
+  <script src="cellular_eid_popup.js"></script>
+</dom-module>
\ No newline at end of file

chrome/browser/resources/settings/chromeos/internet_page/cellular_eid_popup.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 Polymer element for displaying cellular EID and QR code
+ */
+
+Polymer({
+  is: 'cellular-eid-popup',
+
+  behaviors: [
+    I18nBehavior,
+  ],
+
+  /** @override */
+  focus() {
+    this.$$('.dialog').focus();
+  },
+
+  /**@private */
+  onCloseTap_() {
+    this.fire('close-eid-popup');
+  },
+});

chrome/browser/resources/settings/chromeos/internet_page/cellular_networks_list.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/onc_mojo.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/cellular_types.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="../../chromeos/os_settings_icons_css.html">
+<link rel="import" href="./cellular_eid_popup.html">
 
 <dom-module id="cellular-networks-list">
   <template>
@@ -17,6 +20,14 @@
         padding: 16px 0 8px 0;
       }
 
+      .esim-list-header {
+        padding-top: 6px;
+      }
+
+      .esim-list-title {
+        align-self: center;
+      }
+
       .cellular-network-content {
        margin: 8px 0 8px 32px;
       }
@@ -26,9 +37,47 @@
         font-size: smaller;
         margin-bottom: 16px;
       }
+
+      .flex {
+        display: flex;
+      }
+
+      .flex-column {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .eid-popup {
+        background-color: white;
+        border-radius: 4px;
+        box-shadow:  0 2px 5px rgba(0,0,0,0.18);
+        margin: 34px 0 0 12px;
+        position: absolute;
+        width: 224px;
+        z-index: 1;
+      }
+
+      #eidPopupButton {
+        cursor: pointer;
+        margin-inline-start: 0;
+      }
+
     </style>
-    <div class="cellular-network-list-header">
-      $i18n{cellularNetworkEsimLabel}
+    <div class="cellular-network-list-header esim-list-header flex">
+      <div class="esim-list-title">$i18n{cellularNetworkEsimLabel}</div>
+      <div class="flex-column">
+        <cr-icon-button
+            id="eidPopupButton"
+            iron-icon="cr:info-outline"
+            title="$i18n{showEidPopupButtonLabel}"
+            aria-label="$i18n{showEidPopupButtonLabel}"
+            on-click="toggleEidPopup_">
+        </cr-icon-button>
+        <template is="dom-if" if="[[shouldShowEidPopup_]]" restamp>
+          <cellular-eid-popup class="eid-popup">
+          </cellular-eid-popup>
+        </template>
+      </div>
     </div>
     <template is="dom-if"
         if="[[shouldShowNetworkSublist_(eSimNetworks_)]]" restamp>

chrome/browser/resources/settings/chromeos/internet_page/cellular_networks_list.js

@@ -72,9 +72,19 @@ Polymer({
       value() {
         return [];
       },
+    },
+
+    /**@private */
+    shouldShowEidPopup_: {
+      type: Boolean,
+      value: false,
     }
   },
 
+  listeners: {
+    'close-eid-popup': 'toggleEidPopup_',
+  },
+
   /**
    * @private
    */
@@ -137,4 +147,16 @@ Polymer({
         'show-cellular-setup',
         {pageName: cellularSetup.CellularSetupPageName.PSIM_FLOW_UI});
   },
+
+
+  /** @private */
+  toggleEidPopup_() {
+    this.shouldShowEidPopup_ = !this.shouldShowEidPopup_;
+
+    if (this.shouldShowEidPopup_) {
+      Polymer.RenderStatus.afterNextRender(this, () => {
+        this.$$('.eid-popup').focus();
+      });
+    }
+  }
 });

chrome/browser/ui/webui/settings/chromeos/internet_section.cc

@@ -701,6 +701,12 @@ void InternetSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
       {"eSimNetworkNotSetup",
        IDS_SETTINGS_INTERNET_ESIM_NOT_SETUP_WITH_SETUP_LINK},
       {"cellularNetworkTetherLabel", IDS_SETTINGS_INTERNET_TETHER_LABEL},
+      {"eidPopupTitle", IDS_SETTINGS_INTERNET_EID_POPUP_TITLE},
+      {"showEidPopupButtonLabel",
+       IDS_SETTINGS_INTERNET_SHOW_EID_POPUP_BUTTON_LABEL},
+      {"eidPopupDescription", IDS_SETTINGS_INTERNET_EID_POPUP_DESCRIPTION},
+      {"closeEidPopupButtonLabel",
+       IDS_SETTINGS_INTERNET_CLOSE_EID_POPUP_BUTTON_LABEL},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);
 

chrome/test/data/webui/settings/chromeos/cellular_networks_list_test.js

@@ -73,7 +73,7 @@ suite('CellularNetworkList', function() {
     assertEquals(2, tetherNetworkList.networks.length);
   });
   test(
-      'Fire show cellular setup event on eSim/psim no network link click ',
+      'Fire show cellular setup event on eSim/psim no network link click',
       async () => {
         setNetworksForTest(mojom.NetworkType.kCellular, [
           OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether1'),
@@ -109,4 +109,16 @@ suite('CellularNetworkList', function() {
             pSimCellularEvent.detail.pageName,
             cellularSetup.CellularSetupPageName.PSIM_FLOW_UI);
       });
+  test('Show EID and QR code popup', async () => {
+    let eidPopup = cellularNetworkList.$$('.eid-popup');
+    assertFalse(!!eidPopup);
+    const eidPopupBtn = cellularNetworkList.$$('#eidPopupButton');
+    assertTrue(!!eidPopupBtn);
+
+    eidPopupBtn.click();
+    await flushAsync();
+
+    eidPopup = cellularNetworkList.$$('.eid-popup');
+    assertTrue(!!eidPopup);
+  });
 });