[CrOS cellular] Update Cellular Network setup UI

- Romoved duplicated string
- Updated base page UI

Screenshots:
  - https://imgur.com/OZPqyfj
  - https://imgur.com/OGFU3fI
  - https://imgur.com/jDLcIQu
  - https://imgur.com/Lndkx7C
  - https://screenshot.googleplex.com/ckyhXWunKco7LHP.png

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

chrome/app/chromeos_strings.grdp

@@ -315,9 +315,6 @@
   <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>
-  <message name="IDS_CELLULAR_SETUP_BASE_PAGE_TITLE" desc="Title for cellular setup flow dialog in ChromeOS settings">
-    Set up new network
-  </message>
   <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>

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_BASE_PAGE_TITLE.png.sha1

-21cdf48ff054f2e8ce89531da8f52cd8c80725cd
\ No newline at end of file

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

@@ -21,7 +21,6 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"activationCode", IDS_CELLULAR_SETUP_ESIM_PAGE_ACTIVATION_CODE},
     {"cancel", IDS_CANCEL},
     {"back", IDS_CELLULAR_SETUP_BACK_LABEL},
-    {"basePageTitle", IDS_CELLULAR_SETUP_BASE_PAGE_TITLE},
     {"done", IDS_CELLULAR_SETUP_DONE_LABEL},
     {"eSimFlowSetup", IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL},
     {"eSimFlowSetupMessage",

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

@@ -16,8 +16,15 @@ suite('CrComponentsBasePageTest', function() {
     Polymer.dom.flush();
   });
 
-  test('Base test', function() {
+  test('Title is shown', function() {
+    basePage.title = 'Base page titile';
+    Polymer.dom.flush();
     const title = basePage.$$('#title');
     assertTrue(!!title);
   });
+
+  test('Title is not shown', function() {
+    const title = basePage.$$('#title');
+    assertFalse(!!title);
+  });
 });

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

@@ -8,10 +8,8 @@
     <style>
       #title {
         color: var(--google-grey-900);
-        font-size: 24px;
         font-weight: normal;
         line-height: 24px;
-        margin: 20px 0;
       }
 
       #message {
@@ -20,11 +18,13 @@
 
       :host ::slotted([slot='page-body']) {
         display: block;
-        height: 500px;
+        height: 256px;
         width: 100%;
       }
     </style>
-    <h1 id="title">[[getTitle_(title)]]</h1>
+    <template is="dom-if" if="[[isTitleShown_(title)]]" restamp>
+      <h3 id="title">[[getTitle_(title)]]</h3>
+    </template>
     <div id="message">[[message]]</div>
     <slot name="page-body"></slot>
   </template>

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

@@ -29,6 +29,14 @@ Polymer({
    * @private
    */
   getTitle_() {
-    return this.title || this.i18n('basePageTitle');
+    return this.title;
+  },
+
+  /**
+   * @returns {boolean}
+   * @private
+   */
+  isTitleShown_() {
+    return !!this.title;
   }
 });

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

@@ -9,12 +9,6 @@
 
 <dom-module id="cellular-setup">
   <template>
-    <style>
-      :host {
-        flex: 1 1 auto;
-        padding: 10px;
-      }
-    </style>
     <iron-pages
         attr-for-selected="id"
         selected="[[currentPageName_]]"

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

@@ -9,6 +9,10 @@
 <dom-module id="setup-selection-flow">
   <template>
     <style include="iron-flex">
+      :host {
+        --cr-card-radio-button-width: 224px
+      }
+
       #setup-flow-select-radio {
         display: flex;
         flex-direction: row;

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

@@ -15,6 +15,7 @@
             url(error_2x.png) 2x);
         background-position: center center;
         background-repeat: no-repeat;
+        background-size: contain;
         height: 100%;
         width: 100%;
       }