[Nearby] Onboarding device name page help text, layout

Add "How your device appears to others" help text underneath the device
name input on the onboarding page.

Adjust layout. Expand input to 50% width, accounting for margin.
Baseline of input centered vertically. Image centered vertically.
Margins adjusted to spec.

Screenshot: https://screenshot.googleplex.com/AapmoYP4m5Jhwrv.png

Bug: b/163036847
Change-Id: I258c7be50e497d981a677b3d6c9bb196529afaee
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2575211
Commit-Queue: Curt Clemens <cclem@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: James Vecore <vecore@google.com>
Cr-Commit-Position: refs/heads/master@{#834458}

chrome/app/nearby_share_strings.grdp

@@ -85,6 +85,9 @@
   <message name="IDS_NEARBY_ONBOARDING_PAGE_DEVICE_NAME" desc="Label of the text input field to set the name of a users device which is shown to other devices for the Nearby Share feature.">
     Device name
   </message>
+  <message name="IDS_NEARBY_ONBOARDING_PAGE_DEVICE_NAME_HELP" desc="Text that accompanies the device name input field to give some context about what the device name is and how it will be used.">
+    How your device appears to others
+  </message>
   <message name="IDS_NEARBY_ONBOARDING_PAGE_SUBTITLE" desc="Subtitle of the Nearby Share onboarding page that sets up the local device for the feature which provides a way for nearby devices to share files, text, and urls.">
     Share files with people around you
   </message>

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_ONBOARDING_PAGE_DEVICE_NAME_HELP.png.sha1

+361d088c2583505fd3b18732cdab33c493db1dc8
\ No newline at end of file

chrome/browser/resources/nearby_share/shared/nearby_onboarding_page.html

@@ -13,21 +13,28 @@
     <style include="cr-icons cr-shared-style"></style>
     <style>
       #center-content {
+        align-items: center;
         box-sizing: border-box;
         display: flex;
         flex-grow: 1;
-        justify-content: center;
+        justify-content: space-between;
+        margin: 0 24px;
         overflow: hidden;
       }
 
       #splash-image-column {
         height: 200px;
-        margin: 10px;
+        margin: 8px;
         width: 200px;
       }
 
       #device-name-column {
-        margin: 10px;
+        display: flex;
+        flex-direction: column;
+        margin: 8px;
+        position: relative;
+        top: -12px;
+        width: calc(50% - 16px);
       }
 
       #link-row {
@@ -35,8 +42,13 @@
         border-radius: 5px;
       }
 
-      #deviceName {
-        margin-top: 60px;
+      #deviceNameHelp {
+        bottom: 8px;
+        color: var(--google-grey-600);
+        font-size: 10px;
+        line-height: 10px;
+        margin-inline-start: 8px;
+        position: absolute;
       }
 
       #device-name-group {
@@ -60,8 +72,15 @@
           <cr-input label="$i18n{nearbyShareOnboardingPageDeviceName}"
               id="deviceName" value="[[settings.deviceName]]"
               on-input="onDeviceNameInput_" error-message="[[errorMessage]]"
-              invalid="[[hasErrorMessage_(errorMessage)]]">
+              invalid="[[hasErrorMessage_(errorMessage)]]"
+              aria-label="$i18n{nearbyShareOnboardingPageDeviceName}
+                  $i18n{nearbyShareOnboardingPageDeviceNameHelp}">
           </cr-input>
+          <!-- TODO(crbug.com/1155756) move this help text into cr-input -->
+          <div id="deviceNameHelp" hidden="[[hasErrorMessage_(errorMessage)]]"
+            aria-hidden="true">
+            $i18n{nearbyShareOnboardingPageDeviceNameHelp}
+          </div>
         </div>
       </div>
     </nearby-page-template>

chrome/browser/ui/webui/nearby_share/shared_resources.cc

@@ -80,6 +80,8 @@ void RegisterNearbySharedStrings(content::WebUIDataSource* data_source) {
       {"nearbyShareFeatureName", IDS_NEARBY_SHARE_FEATURE_NAME},
       {"nearbyShareOnboardingPageDeviceName",
        IDS_NEARBY_ONBOARDING_PAGE_DEVICE_NAME},
+      {"nearbyShareOnboardingPageDeviceNameHelp",
+       IDS_NEARBY_ONBOARDING_PAGE_DEVICE_NAME_HELP},
       {"nearbyShareOnboardingPageSubtitle",
        IDS_NEARBY_ONBOARDING_PAGE_SUBTITLE},
       {"nearbyShareOnboardingPageTitle", IDS_NEARBY_ONBOARDING_PAGE_TITLE},