[Nearby] Resize file icons, adjust alignment on confirmation page

File preview icons have been enlarged to match the size of the
<nearby-progress> icon.

The confirmation page spec has been updated to require that the dashed
line between the file preview icon and the progress icon should be
aligned with their centers.

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

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

@@ -20,7 +20,7 @@
     font-size: 90%;
     letter-spacing: 0.3px;
     margin-inline-end: -15px;
-    margin-top: 55px;
+    margin-top: 48px;
     padding-top: 6px;
     text-align: center;
     width: 200px;
@@ -32,7 +32,7 @@
   }
 
   nearby-progress {
-    margin-top: 15px;
+    margin-top: 8px;
     width: 126px;
   }
 

chrome/browser/resources/nearby_share/nearby_preview.html

 <style>
   iron-icon {
     display: block;
-    height: 40px;
-    margin: 20px auto 24px auto;
-    width: 40px;
+    height: 68px;
+    margin: 12px auto 24px auto;
+    width: 68px;
   }
 
   #title {

chrome/browser/resources/nearby_share/nearby_preview.js

@@ -64,34 +64,34 @@ Polymer({
 
     switch (this.sendPreview.shareType) {
       case nearbyShare.mojom.ShareType.kUnknownFile:
-        return 'nearbysharetype40:unknown-file';
+        return 'nearbysharetype68:unknown-file';
       case nearbyShare.mojom.ShareType.kMultipleFiles:
-        return 'nearbysharetype40:multiple-file';
+        return 'nearbysharetype68:multiple-file';
       case nearbyShare.mojom.ShareType.kImageFile:
       case nearbyShare.mojom.ShareType.kVideoFile:
-        return 'nearbysharetype40:image-video-file';
+        return 'nearbysharetype68:image-video-file';
       case nearbyShare.mojom.ShareType.kAudioFile:
-        return 'nearbysharetype40:audio-file';
+        return 'nearbysharetype68:audio-file';
       case nearbyShare.mojom.ShareType.kPdfFile:
-        return 'nearbysharetype40:pdf-file';
+        return 'nearbysharetype68:pdf-file';
       case nearbyShare.mojom.ShareType.kGoogleDocsFile:
-        return 'nearbysharetype40:google-docs-file';
+        return 'nearbysharetype68:google-docs-file';
       case nearbyShare.mojom.ShareType.kGoogleSheetsFile:
-        return 'nearbysharetype40:google-sheets-file';
+        return 'nearbysharetype68:google-sheets-file';
       case nearbyShare.mojom.ShareType.kGoogleSlidesFile:
-        return 'nearbysharetype40:google-slides-file';
+        return 'nearbysharetype68:google-slides-file';
       case nearbyShare.mojom.ShareType.kText:
-        return 'nearbysharetype40:text';
+        return 'nearbysharetype68:text';
       case nearbyShare.mojom.ShareType.kUrl:
-        return 'nearbysharetype40:url';
+        return 'nearbysharetype68:url';
       case nearbyShare.mojom.ShareType.kAddress:
-        return 'nearbysharetype40:address';
+        return 'nearbysharetype68:address';
       case nearbyShare.mojom.ShareType.kPhone:
-        return 'nearbysharetype40:phone';
+        return 'nearbysharetype68:phone';
       default:
         assertNotReached(
             'No icon defined for share type ' + this.sendPreview.shareType);
-        return 'nearbysharetype40:unknown-file';
+        return 'nearbysharetype68:unknown-file';
     }
   },
 });

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
 
-<iron-iconset-svg name="nearbysharetype40" size="40">
+<iron-iconset-svg name="nearbysharetype68" size="68">
   <svg>
     <defs>
       <!--
       Keep these in sorted order by id="". See also http://goo.gl/Y1OdAq
       -->
       <g id="address">
-        <circle cx="20" cy="20" r="20" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(8 8)" d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 11.88 14.12 16.19 12 18.88C9.92 16.21 7 11.85 7 9ZM14.5 9C14.5 10.3807 13.3807 11.5 12 11.5C10.6193 11.5 9.5 10.3807 9.5 9C9.5 7.61929 10.6193 6.5 12 6.5C13.3807 6.5 14.5 7.61929 14.5 9Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 11.88 14.12 16.19 12 18.88C9.92 16.21 7 11.85 7 9ZM14.5 9C14.5 10.3807 13.3807 11.5 12 11.5C10.6193 11.5 9.5 10.3807 9.5 9C9.5 7.61929 10.6193 6.5 12 6.5C13.3807 6.5 14.5 7.61929 14.5 9Z" fill="#1a73e8"></path>
       </g>
       <g id="audio-file">
-        <circle cx="20" cy="20" r="20" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(8 8)" d="M6 8C7.1 8 8 8.9 8 10V14C8 15.1 7.1 16 6 16C4.9 16 4 15.1 4 14V10C4 8.9 4.9 8 6 8ZM16 10V14C16 15.1 16.9 16 18 16C19.1 16 20 15.1 20 14V10C20 8.9 19.1 8 18 8C16.9 8 16 8.9 16 10ZM10 6V18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18V6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M6 8C7.1 8 8 8.9 8 10V14C8 15.1 7.1 16 6 16C4.9 16 4 15.1 4 14V10C4 8.9 4.9 8 6 8ZM16 10V14C16 15.1 16.9 16 18 16C19.1 16 20 15.1 20 14V10C20 8.9 19.1 8 18 8C16.9 8 16 8.9 16 10ZM10 6V18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18V6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6Z" fill="#1a73e8"></path>
       </g>
       <g id="google-docs-file">
-        <circle cx="20" cy="20" r="20" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(8 8)" d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM17.01 9H7V7H17.01V9V9ZM17.01 13H7V11H17.01V13V13ZM14.01 17H7V15H14.01V17V17Z" fill="#4285F4"></path>
+        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM17.01 9H7V7H17.01V9V9ZM17.01 13H7V11H17.01V13V13ZM14.01 17H7V15H14.01V17V17Z" fill="#4285F4"></path>
       </g>
       <g id="google-sheets-file">
-        <circle cx="20" cy="20" r="20" fill="#e6f4ea"></circle>
-        <path fill-rule="evenodd" transform="translate(8 8)" d="M19 3H5C3.9 3 3.01 3.9 3.01 5L3 8V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM19 11H11V19H9V11H5V9H9V5H11V9H19V11V11Z" fill="#34A853"></path>
+        <circle cx="34" cy="34" r="34" fill="#e6f4ea"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M19 3H5C3.9 3 3.01 3.9 3.01 5L3 8V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM19 11H11V19H9V11H5V9H9V5H11V9H19V11V11Z" fill="#34A853"></path>
       </g>
       <g id="google-slides-file">
-        <circle cx="20" cy="20" r="20" fill="#fef7e0"></circle>
-        <path fill-rule="evenodd" transform="translate(8 8)" d="M18.9998 3H4.99977C3.89977 3 3.00977 3.9 3.00977 5V19C3.00977 20.1 3.89977 21 4.99977 21H18.9998C20.0998 21 20.9998 20.1 20.9998 19V5C20.9998 3.9 20.0998 3 18.9998 3V3ZM18.9998 16H4.99977V8H18.9998V16V16Z" fill="#F4B400"></path>
+        <circle cx="34" cy="34" r="34" fill="#fef7e0"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M18.9998 3H4.99977C3.89977 3 3.00977 3.9 3.00977 5V19C3.00977 20.1 3.89977 21 4.99977 21H18.9998C20.0998 21 20.9998 20.1 20.9998 19V5C20.9998 3.9 20.0998 3 18.9998 3V3ZM18.9998 16H4.99977V8H18.9998V16V16Z" fill="#F4B400"></path>
       </g>
       <g id="image-video-file">
-        <rect height="40" width="40" rx="4" fill="#e8f0fe"></rect>
-        <path fill-rule="evenodd" d="M14 8v6a9 9 0 1 0 10 11h7v-17zm10 17a9 9 0 0 0 -10 -11v11h10z" fill="#aecbfa"></path>
+        <rect x="5" height="68" width="58" rx="4" fill="#e8f0fe"></rect>
+        <path transform="translate(16 16)" fill-rule="evenodd" d="M14 8v6a9 9 0 1 0 10 11h7v-17zm10 17a9 9 0 0 0 -10 -11v11h10z" fill="#aecbfa"></path>
       </g>
       <g id="multiple-file">
-        <circle cx="20" cy="20" r="20" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(8 8)" d="M15 1H8C6.9 1 6.01 1.9 6.01 3L6 17C6 18.1 6.89 19 7.99 19H19C20.1 19 21 18.1 21 17V7L15 1ZM18 23H4C2.9 23 2 22.1 2 21V7H4V21H18V23ZM8 3V17H19V8H14V3H8Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M15 1H8C6.9 1 6.01 1.9 6.01 3L6 17C6 18.1 6.89 19 7.99 19H19C20.1 19 21 18.1 21 17V7L15 1ZM18 23H4C2.9 23 2 22.1 2 21V7H4V21H18V23ZM8 3V17H19V8H14V3H8Z" fill="#1a73e8"></path>
       </g>
       <g id="pdf-file">
-        <circle cx="20" cy="20" r="20" fill="#fce8e6"></circle>
-        <path fill-rule="evenodd" transform="translate(8 8)" d="M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM8 11.5H7V10.5H8V11.5ZM9.5 11.5C9.5 12.33 8.83 13 8 13H7V15H5.5V9H8C8.83 9 9.5 9.67 9.5 10.5V11.5ZM17 10.5H19.5V9H15.5V15H17V13H18.5V11.5H17V10.5ZM14.5 13.5C14.5 14.33 13.83 15 13 15H10.5V9H13C13.83 9 14.5 9.67 14.5 10.5V13.5ZM13 13.5H12V10.5H13V13.5Z" fill="#EA4335"></path>
+        <circle cx="34" cy="34" r="34" fill="#fce8e6"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM8 11.5H7V10.5H8V11.5ZM9.5 11.5C9.5 12.33 8.83 13 8 13H7V15H5.5V9H8C8.83 9 9.5 9.67 9.5 10.5V11.5ZM17 10.5H19.5V9H15.5V15H17V13H18.5V11.5H17V10.5ZM14.5 13.5C14.5 14.33 13.83 15 13 15H10.5V9H13C13.83 9 14.5 9.67 14.5 10.5V13.5ZM13 13.5H12V10.5H13V13.5Z" fill="#EA4335"></path>
       </g>
       <g id="phone">
-        <circle cx="20" cy="20" r="20" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(8 8)" d="M17 1H7C5.9 1 5 1.9 5 3V21C5 22.1 5.9 23 7 23H17C18.1 23 19 22.1 19 21V3C19 1.9 18.1 1 17 1ZM7 6H17V16H7V6ZM7 21H17V18H7V21ZM7 4V3H17V4H7ZM14 19H10V20H14V19Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M17 1H7C5.9 1 5 1.9 5 3V21C5 22.1 5.9 23 7 23H17C18.1 23 19 22.1 19 21V3C19 1.9 18.1 1 17 1ZM7 6H17V16H7V6ZM7 21H17V18H7V21ZM7 4V3H17V4H7ZM14 19H10V20H14V19Z" fill="#1a73e8"></path>
       </g>
       <g id="text">
-        <circle cx="20" cy="20" r="20" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(8 8)" d="M3.59961 6H20.3996V8.4H3.59961V6ZM3.59961 10.8H20.3996V13.2H3.59961V10.8ZM13.1996 15.6H3.59961V18H13.1996V15.6Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M3.59961 6H20.3996V8.4H3.59961V6ZM3.59961 10.8H20.3996V13.2H3.59961V10.8ZM13.1996 15.6H3.59961V18H13.1996V15.6Z" fill="#1a73e8"></path>
       </g>
       <g id="unknown-file">
-        <circle cx="20" cy="20" r="20" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(8 8)" d="M6 2H14L20 8V20C20 21.1 19.1 22 18 22H5.99C4.89 22 4 21.1 4 20L4.01 4C4.01 2.9 4.9 2 6 2ZM6 4V20H18V9H13V4H6Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M6 2H14L20 8V20C20 21.1 19.1 22 18 22H5.99C4.89 22 4 21.1 4 20L4.01 4C4.01 2.9 4.9 2 6 2ZM6 4V20H18V9H13V4H6Z" fill="#1a73e8"></path>
       </g>
       <g id="url">
-        <circle cx="20" cy="20" r="20" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(8 8)" d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15ZM17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7ZM16 11H8V13H16V11Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15ZM17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7ZM16 11H8V13H16V11Z" fill="#1a73e8"></path>
       </g>
     </defs>
   </svg>