[NearbyShare] Add progress icon in receive confirmation page.

This CL adds a progress icon and dashed line showing the
share target details and connection token. File preview
icon on the right side is TODO.

This CL also updates confirmation token in send confirmation
page to match the specs.

Screenshot: https://screenshot.googleplex.com/5Vmf5iXCNsGDrdR.png

Fixed: 1157297
Change-Id: Ic4378966ea2fe972fcb6d66ff1c2fc9371c41123
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2590591
Commit-Queue: Azeem Arshad <azeemarshad@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837416}

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

@@ -14,11 +14,12 @@
   }
 
   #confirmationToken {
-    border-top: 1px dashed rgba(151, 151, 151, 0.74);
-    color: rgba(0, 0, 0, 0.4);
+    border-top: 1px dashed var(--google-grey-600);
+    color: var(--google-grey-600);
     flex-grow: 1;
-    font-size: 90%;
+    font-size: 9px;
     letter-spacing: 0.3px;
+    line-height: 12px;
     margin-top: 46px;
     padding-top: 6px;
     text-align: center;

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_confirm_page.html

@@ -17,6 +17,18 @@
         margin: 0 32px;
       }
 
+      #connectionToken {
+        border-top: 1px dashed var(--google-grey-600);
+        color: var(--google-grey-600);
+        flex-grow: 1;
+        font-size: 9px;
+        letter-spacing: 0.3px;
+        line-height: 12px;
+        margin-top: 46px;
+        padding-top: 6px;
+        text-align: center;
+      }
+
       #processRow {
         display: flex;
         flex-grow: 1;
@@ -71,9 +83,17 @@
       <div id="centerContent" slot="content">
         <div id="processRow">
           <div id="processRowContent">
-            <div id="shareTargetName">[[shareTarget.name]]</div>
-            <div id="connectionToken">
-              [[getConnectionTokenString_(connectionToken)]]
+            <!-- nearby-progress is used with progress=0 to disable progress 
+                 ring and animation -->
+            <nearby-progress id="progressIcon"
+                share-target="[[shareTarget]]"
+                has-error="[[errorTitle_]]"
+                progress="0">
+            </nearby-progress>
+            <div id="connectionToken" aria-live="polite">
+              <template is="dom-if" if="[[connectionToken]]">
+                [[i18n('nearbyShareSecureConnectionId', connectionToken)]]
+              </template>
             </div>
             <nearby-preview payload-preview="[[shareTarget.payloadPreview]]">
             </nearby-preview>

chrome/test/data/webui/settings/chromeos/nearby_share_receive_dialog_tests.js

@@ -92,8 +92,9 @@ suite('NearbyShare', function() {
       const confirmPage = dialog.$$('nearby-share-confirm-page');
       Polymer.dom.flush();
 
-      assertEquals(
-          target.name, confirmPage.$$('#shareTargetName').textContent.trim());
+      const progressIcon = confirmPage.$$('#progressIcon');
+      assertTrue(!!progressIcon.shareTarget);
+      assertEquals(target.name, progressIcon.shareTarget.name);
       assertTrue(
           confirmPage.$$('#connectionToken').textContent.includes('1234'));
       assertTrue(test_util.isChildVisible(confirmPage, 'nearby-preview'));
@@ -113,8 +114,9 @@ suite('NearbyShare', function() {
       const confirmPage = dialog.$$('nearby-share-confirm-page');
       Polymer.dom.flush();
 
-      assertEquals(
-          target.name, confirmPage.$$('#shareTargetName').textContent.trim());
+      const progressIcon = confirmPage.$$('#progressIcon');
+      assertTrue(!!progressIcon.shareTarget);
+      assertEquals(target.name, progressIcon.shareTarget.name);
       assertTrue(
           confirmPage.$$('#connectionToken').textContent.includes('1234'));
       assertTrue(test_util.isChildVisible(confirmPage, 'nearby-preview'));