[CrOS Cellular] Move EID popup element to cr_components

This CL moves the cellular_eid_popup element from settings/chromeos
to cr_components/chromeos since this components will also be used
in cellular_setup in OOBE.

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

chrome/app/chromeos_strings.grdp

@@ -351,6 +351,15 @@
   <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>
+  <message name="IDS_CELLULAR_SETUP_EID_POPUP_TITLE" desc="Label shown when vewing EID and QR code popup describing device EID">
+    Your device EID
+  </message>
+  <message name="IDS_CELLULAR_SETUP_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_CELLULAR_SETUP_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>
 
   <!-- 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/os_settings_strings.grdp

@@ -2400,15 +2400,6 @@ Press an assigned switch to remove assignment.
   <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>

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

@@ -315,7 +315,6 @@ preprocess_if_expr("preprocess_gen_v3") {
     "chromeos/internet_page/esim_remove_profile_dialog.m.js",
     "chromeos/internet_page/esim_rename_dialog.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",
@@ -603,8 +602,6 @@ preprocess_if_expr("preprocess_v2") {
     "chromeos/internet_page/esim_rename_dialog.html",
     "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,7 +8,6 @@ import("//ui/webui/resources/tools/js_modulizer.gni")
 
 js_type_check("closure_compile") {
   deps = [
-    ":cellular_eid_popup",
     ":cellular_networks_list",
     ":cellular_setup_dialog",
     ":esim_remove_profile_dialog",
@@ -129,7 +128,6 @@ js_library("internet_known_networks_page") {
 
 js_library("internet_subpage") {
   deps = [
-    ":cellular_eid_popup",
     ":cellular_networks_list",
     ":internet_page_browser_proxy",
     "..:deep_linking_behavior",
@@ -211,7 +209,7 @@ js_library("cellular_setup_settings_delegate") {
 
 js_library("cellular_networks_list") {
   deps = [
-    ":cellular_eid_popup",
+    "//ui/webui/resources/cr_components/chromeos/cellular_setup:cellular_eid_popup",
     "//ui/webui/resources/cr_components/chromeos/cellular_setup:cellular_types",
     "//ui/webui/resources/cr_components/chromeos/cellular_setup:esim_manager_listener_behavior",
     "//ui/webui/resources/cr_components/chromeos/cellular_setup:esim_manager_utils",
@@ -223,10 +221,6 @@ js_library("cellular_networks_list") {
   ]
 }
 
-js_library("cellular_eid_popup") {
-  deps = [ "//ui/webui/resources/js:i18n_behavior" ]
-}
-
 js_library("esim_rename_dialog") {
   deps = [
     "//ui/webui/resources/cr_components/chromeos/cellular_setup:mojo_interface_provider",
@@ -251,7 +245,6 @@ js_library("esim_remove_profile_dialog") {
 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",
@@ -546,12 +539,6 @@ js_library("cellular_networks_list.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" ]
-}
-
 js_library("esim_rename_dialog.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/internet_page/esim_rename_dialog.m.js" ]
   deps = [
@@ -580,7 +567,6 @@ import("//tools/polymer/polymer.gni")
 
 group("polymer3_elements") {
   public_deps = [
-    ":cellular_eid_popup_module",
     ":cellular_networks_list_module",
     ":cellular_setup_dialog_module",
     ":esim_remove_profile_dialog_module",
@@ -703,14 +689,6 @@ 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
-}
-
 polymer_modulizer("esim_rename_dialog") {
   js_file = "esim_rename_dialog.js"
   html_file = "esim_rename_dialog.html"

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

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/mojo_interface_provider.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/esim_manager_listener_behavior.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/esim_manager_utils.html">
+<link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/cellular_eid_popup.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/network_list_types.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/onc_mojo.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/mojo_interface_provider.html">
@@ -14,7 +15,6 @@
 <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>

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

@@ -65,7 +65,11 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"scanQRCodeSuccess", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_SUCCESS},
     {"qrCodeRetry", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_RETRY},
     {"scanQrCodeInvalid", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_INVALID},
-    {"profileListPageMessage", IDS_CELLULAR_SETUP_PROFILE_LIST_PAGE_MESSAGE}};
+    {"profileListPageMessage", IDS_CELLULAR_SETUP_PROFILE_LIST_PAGE_MESSAGE},
+    {"eidPopupTitle", IDS_CELLULAR_SETUP_EID_POPUP_TITLE},
+    {"eidPopupDescription", IDS_CELLULAR_SETUP_EID_POPUP_DESCRIPTION},
+    {"closeEidPopupButtonLabel",
+     IDS_CELLULAR_SETUP_CLOSE_EID_POPUP_BUTTON_LABEL}};
 
 struct NamedBoolean {
   const char* name;

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

@@ -702,12 +702,8 @@ 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},
       {"eSimRenameProfileDialogLabel",
        IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_RENAME_PROFILE},
       {"eSimRenameProfileDialogDone",

ui/webui/resources/cr_components/BUILD.gn

@@ -154,6 +154,7 @@ preprocess_if_expr("preprocess_generated") {
       "chromeos/cellular_setup/provisioning_page.m.js",
       "chromeos/cellular_setup/psim_flow_ui.m.js",
       "chromeos/cellular_setup/setup_selection_flow.m.js",
+      "chromeos/cellular_setup/cellular_eid_popup.m.js",
       "chromeos/cellular_setup/setup_loading_page.m.js",
       "chromeos/cellular_setup/subflow_behavior.m.js",
       "chromeos/cellular_setup/webview_post_util.m.js",
@@ -282,6 +283,8 @@ preprocess_if_expr("preprocess_polymer2") {
       "chromeos/cellular_setup/psim_flow_ui.js",
       "chromeos/cellular_setup/setup_selection_flow.html",
       "chromeos/cellular_setup/setup_selection_flow.js",
+      "chromeos/cellular_setup/cellular_eid_popup.html",
+      "chromeos/cellular_setup/cellular_eid_popup.js",
       "chromeos/cellular_setup/setup_loading_page.html",
       "chromeos/cellular_setup/setup_loading_page.js",
       "chromeos/cellular_setup/subflow_behavior.html",

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

@@ -14,6 +14,7 @@ js_type_check("closure_compile") {
     ":activation_code_page",
     ":base_page",
     ":button_bar",
+    ":cellular_eid_popup",
     ":cellular_setup",
     ":cellular_setup_delegate",
     ":cellular_types",
@@ -135,6 +136,10 @@ js_library("setup_selection_flow") {
   ]
 }
 
+js_library("cellular_eid_popup") {
+  deps = [ "//ui/webui/resources/js:i18n_behavior" ]
+}
+
 js_library("subflow_behavior") {
   deps = [
     ":cellular_types",
@@ -387,6 +392,12 @@ js_library("setup_selection_flow.m") {
   extra_deps = [ ":setup_selection_flow_module" ]
 }
 
+js_library("cellular_eid_popup.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_popup.m.js" ]
+  deps = [ "//ui/webui/resources/js:i18n_behavior.m" ]
+  extra_deps = [ ":cellular_eid_popup_module" ]
+}
+
 js_library("cellular_setup.m") {
   sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup.m.js" ]
   deps = [
@@ -406,6 +417,7 @@ group("polymer3_elements") {
     ":activation_code_page_module",
     ":base_page_module",
     ":button_bar_module",
+    ":cellular_eid_popup_module",
     ":cellular_setup_icons_module",
     ":cellular_setup_module",
     ":confirmation_code_page_module",
@@ -517,6 +529,14 @@ polymer_modulizer("setup_selection_flow") {
   auto_imports = cr_components_chromeos_auto_imports
 }
 
+polymer_modulizer("cellular_eid_popup") {
+  js_file = "cellular_eid_popup.js"
+  html_file = "cellular_eid_popup.html"
+  html_type = "dom-module"
+  namespace_rewrites = cr_components_chromeos_namespace_rewrites
+  auto_imports = cr_components_chromeos_auto_imports
+}
+
 polymer_modulizer("cellular_setup") {
   js_file = "cellular_setup.js"
   html_file = "cellular_setup.html"

chrome/browser/resources/settings/chromeos/internet_page/cellular_eid_popup.html → ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_popup.html

@@ -4,14 +4,10 @@
 <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">
+    <style include="cr-shared-style iron-flex">
 
       .cellular-network-list-header {
         border-top: var(--cr-separator-line);
@@ -58,19 +54,19 @@
         aria-describedby="eidDescription">
       <div class="header">
         <div id="eidTitle" class="title" arian-hidden="true">
-          $i18n{eidPopupTitle}
+          [[i18n('eidPopupTitle')]]
         </div>
         <cr-icon-button
             id="eidPopupCloseIcon"
             iron-icon="cr:close"
-            title="$i18n{closeEidPopupButtonLabel}"
-            aria-label="$i18n{closeEidPopupButtonLabel}"
+            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}
+          [[i18n('eidPopupDescription')]]
         </div>
         <!-- TODO(crbug/1093185): Add eid code -->
       </div>