[Nearby] Show share target name on confimation page, adjust layout

Remove a line that sets |selectedShareTarget| null on the discovery
page so that the selected share target is preserved on the
confirmation page.

Adjust margins and fix vertical centering of content on the
confimation page. Allow the content to expand horizontally instead of
fixing the width.

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

Bug: b/163036847
Change-Id: Ie41d7a18026f72c621c7f5801f16f5c09dabdb05
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2555803
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@{#830723}

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

@@ -19,42 +19,39 @@
     flex-grow: 1;
     font-size: 90%;
     letter-spacing: 0.3px;
-    margin-inline-end: -15px;
-    margin-top: 48px;
+    margin-top: 46px;
     padding-top: 6px;
     text-align: center;
-    width: 200px;
-  }
-
-  nearby-preview {
-    margin-inline-end: 10px;
-    margin-inline-start: 10px;
   }
 
   nearby-progress {
-    margin-top: 8px;
-    width: 126px;
+    width: 116px;
   }
 
   #centerContent {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    height: 100%;
-    padding: 27px 32px 25px 37px;
+    flex-grow: 1;
+    margin: 0 32px;
   }
 
   #processRow {
     display: flex;
-    margin-top: 48px;
+    flex-grow: 1;
+  }
+
+  #processRowContent {
+    align-self: center;
+    display: flex;
+    flex-grow: 1;
+    margin: 24px 8px;
   }
 
   #errorSection {
     align-items: flex-start;
     display: flex;
     flex-direction: row;
-    margin-inline-end:  var(--nearby-page-space-inline);
-    margin-inline-start: var(--nearby-page-space-inline);
     padding: 8px;
   }
 
@@ -92,17 +89,19 @@
         cancel-button-event-name="[[getCancelEventName_(needsConfirmation_)]]">
   <div id="centerContent" slot="content">
     <div id="processRow">
-      <nearby-preview send-preview="[[sendPreview]]"
-          disabled="[[errorTitle_]]">
-      </nearby-preview>
-      <div id="confirmationToken">
-        <template is="dom-if" if="[[confirmationToken_]]">
-          [[i18n('nearbyShareSecureConnectionId', confirmationToken_)]]
-        </template>
+      <div id="processRowContent">
+        <nearby-preview send-preview="[[sendPreview]]"
+            disabled="[[errorTitle_]]">
+        </nearby-preview>
+        <div id="confirmationToken">
+          <template is="dom-if" if="[[confirmationToken_]]">
+            [[i18n('nearbyShareSecureConnectionId', confirmationToken_)]]
+          </template>
+        </div>
+        <nearby-progress share-target="[[shareTarget]]"
+            has-error="[[errorTitle_]]">
+        </nearby-progress>
       </div>
-      <nearby-progress share-target="[[shareTarget]]"
-          has-error="[[errorTitle_]]">
-      </nearby-progress>
     </div>
 
     <template is="dom-if" if="[[contactName_(shareTarget)]]">

chrome/browser/resources/nearby_share/nearby_discovery_page.js

@@ -233,7 +233,6 @@ Polymer({
       this.shareTargetMap_.clear();
     }
     this.lastSelectedShareTarget_ = null;
-    this.selectedShareTarget = null;
     this.shareTargets_ = [];
   },
 

chrome/browser/resources/nearby_share/nearby_preview.html

@@ -17,7 +17,6 @@
     height: 60px;
     letter-spacing: 0.2px;
     line-height: 20px;
-    margin-top: 6px;
     overflow: hidden;
     overflow-wrap: break-word;
     text-align: center;

chrome/browser/resources/nearby_share/nearby_progress.html

@@ -6,15 +6,14 @@
     display: -webkit-box;
     letter-spacing: 0.25px;
     line-height: 154%;
-    margin-top: 10px;
     overflow: hidden;
     text-align: center;
   }
 
   #icon {
-    height: 70px;
+    height: 68px;
     margin: auto;
-    width: 70px;
+    width: 68px;
   }
 
   .has-error #icon {
@@ -24,10 +23,10 @@
 
   #progress-container {
     display: flex;
-    height: 80px;
-    margin: 0 auto;
+    height: 76px;
+    margin: 8px auto 20px auto;
     position: relative;
-    width: 80px;
+    width: 76px;
   }
 
   #wheel {

chrome/test/data/webui/nearby_share/nearby_discovery_page_test.js

@@ -272,7 +272,7 @@ suite('DiscoveryPageTest', function() {
 
     assertEquals(null, discoveryPageElement.selectedShareTarget);
 
-    // Click on fist share target and expect it to be selected.
+    // Click on first share target and expect it to be selected.
     assertTrue(clickOnDevice(0));
     assertShareTargetsEqual(
         targets[0], discoveryPageElement.selectedShareTarget);
@@ -281,6 +281,16 @@ suite('DiscoveryPageTest', function() {
     assertTrue(clickOnDevice(2));
     assertShareTargetsEqual(
         targets[2], discoveryPageElement.selectedShareTarget);
+
+    const shareTarget = discoveryPageElement.selectedShareTarget;
+    const onConnectionClosedPromise = new Promise(
+        (resolve) => listener.onConnectionError.addListener(resolve));
+    discoveryPageElement.fire('view-exit-finish');
+    await onConnectionClosedPromise;
+
+    // Stopping discovery does not clear selected share target.
+    assertShareTargetsEqual(
+        shareTarget, discoveryPageElement.selectedShareTarget);
   });
 
   test('loosing selected device disables next button', async function() {