[CrOS cellular] Add setup selection icons

- Adds new icons
- current UI https://imgur.com/nnyirs2
- UI spec https://docs.google.com/presentation/d/1Mfk5ZMEmeHwSbadUbyRU0Si5k6XDIvw-j4u7TUaCIGY/edit#slide=id.g7dc3c1fe01_5_115

Bug: 1093185
Change-Id: I2b11a74364f06c4b0667e0dc8351577f36f94890
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2382016Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Commit-Queue: Nnamdi Theodore Johnson-kanu <tjohnsonkanu@google.com>
Cr-Commit-Position: refs/heads/master@{#803886}

chrome/app/chromeos_strings.grdp

@@ -303,9 +303,15 @@
   <message name="IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_PSIM_LABEL" desc="Label for physical SIM (pSIM) setup flow card radio select button during cellular setup">
     Physical SIM
   </message>
+  <message name="IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_PSIM_MESSAGE" desc="Message for physical SIM (pSIM) setup flow card radio select button during cellular setup, informing the user to insert a physical SIM.">
+    Insert SIM before proceeding
+  </message>
   <message name="IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL" desc="Label for electronic SIM (eSIM) setup flow card radio select button during cellular setup">
     eSim setup
   </message>
+  <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_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_CELLULAR_SETUP_PAGE_ESIM_MESSAGE.png.sha1

+b02f37817e28230b800cf15aeafd36aba7a81915
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_PSIM_MESSAGE.png.sha1

+b02f37817e28230b800cf15aeafd36aba7a81915
\ No newline at end of file

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

@@ -22,6 +22,8 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"cancel", IDS_CANCEL},
     {"back", IDS_CELLULAR_SETUP_BACK_LABEL},
     {"eSimFlowSetup", IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL},
+    {"eSimFlowSetupMessage",
+     IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_MESSAGE},
     {"next", IDS_CELLULAR_SETUP_NEXT_LABEL},
     {"finish", IDS_CELLULAR_SETUP_FINISH_LABEL},
     {"tryAgain", IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL},
@@ -38,6 +40,8 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"provisioningPageErrorMessage",
      IDS_CELLULAR_SETUP_PROVISIONING_PAGE_ERROR_MESSAGE},
     {"pSimFlowSetup", IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_PSIM_LABEL},
+    {"pSimFlowSetupMessage",
+     IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_PSIM_MESSAGE},
     {"finalPageTitle", IDS_CELLULAR_SETUP_FINAL_PAGE_TITLE},
     {"finalPageMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_MESSAGE},
     {"finalPageErrorTitle", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_TITLE},

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

@@ -12,19 +12,79 @@
       #setup-flow-select-radio {
         display: flex;
         flex-direction: row;
+        justify-content: center;
       }
+
+      .sim-icon-container {
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 60px;
+      }
+
+      #psim-icon-container {
+        background-image: -webkit-image-set(
+            url(psim_1x.png) 1x,
+            url(psim_2x.png) 2x);
+      }
+
+      #esim-icon-container {
+        background-image: -webkit-image-set(
+            url(esim_1x.png) 1x,
+            url(esim_2x.png) 2x);
+      }
+
+      .sim-btn-text {
+        text-align: center;
+      }
+      .sim-btn-title {
+        font-weight: 600;  /* semibold */
+        margin-top: 15px;
+      }
+
+      .sim-btn-description {
+        margin-top: 10px;
+      }
+
     </style>
     <cr-radio-group
         name="setup-flow-selection"
         id="setup-flow-select-radio"
         selected="{{setupFlowSelection_}}"
         on-selected-changed="onSetupFlowRadioSelectedChange_">
-      <!-- TODO(crbug.com/1093185): Add icons for pSIM and eSIM-->
-      <cr-card-radio-button name="psim-flow-ui">
-        [[i18n('pSimFlowSetup')]]
+      <cr-card-radio-button
+          id="psim-flow-ui-btn"
+          name="psim-flow-ui"
+          aria-labeledby="psim-btn-title"
+          aria-describedby="psim-btn-descritpion">
+        <div id="psim-icon-container" class="sim-icon-container"></div>
+        <div id="psim-btn-title"
+            class="sim-btn-title sim-btn-text"
+            aria-hidden="true">
+          [[i18n('pSimFlowSetup')]]
+        </div>
+        <div id="psim-btn-descritpion"
+            class="sim-btn-description sim-btn-text"
+            aria-hidden="true">
+          [[i18n('pSimFlowSetupMessage')]]
+        </div>
       </cr-card-radio-button>
-      <cr-card-radio-button name="esim-flow-ui" >
-        [[i18n('eSimFlowSetup')]]
+      <cr-card-radio-button
+          id="esim-flow-ui-btn"
+          name="esim-flow-ui"
+          aria-labeledby="esim-btn-title"
+          aria-describedby="esim-btn-descritpion">
+        <div id="esim-icon-container" class="sim-icon-container"></div>
+        <div id="esim-btn-title"
+            class="sim-btn-title sim-btn-text"
+            aria-hidden="true">
+          [[i18n('eSimFlowSetup')]]
+        </div>
+        <div id="esim-btn-descrition"
+            class="sim-btn-description sim-btn-text"
+            aria-hidden="true">
+          [[i18n('eSimFlowSetupMessage')]]
+        </div>
       </cr-card-radio-button>
     </cr-radio-group>
   </template>

ui/webui/resources/cr_components/cr_components_images.grdp

@@ -43,6 +43,22 @@
              file="cr_components/chromeos/cellular_setup/final_page_success_2x.png"
              type="BINDATA"
              compress="gzip" />
+    <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_PSIM_1X_PNG"
+             file="cr_components/chromeos/cellular_setup/psim_1x.png"
+             type="BINDATA"
+             compress="gzip" />
+    <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_PSIM_2X_PNG"
+             file="cr_components/chromeos/cellular_setup/psim_2x.png"
+             type="BINDATA"
+             compress="gzip" />
+    <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ESIM_1X_PNG"
+             file="cr_components/chromeos/cellular_setup/esim_1x.png"
+             type="BINDATA"
+             compress="gzip" />
+    <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ESIM_2X_PNG"
+             file="cr_components/chromeos/cellular_setup/esim_2x.png"
+             type="BINDATA"
+             compress="gzip" />
 
     <!-- NetworkIcon Images -->
     <include name="IDR_CR_ELEMENTS_CELLULAR_0_WITH_X_SVG"