[Nearby] Add icons for various filetype previews

Add all of the missing filetype icons in nearby-preview. Rework the
existing elements so that the sizing/spacing/colors fit the spec. Add
additional ShareTypes for the new icons.

Bug: 1123942
Change-Id: I49b64014ec22e30386e4438650c3ed8fefe9a1d2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2499069Reviewed-by: Alex Gough <ajgo@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: James Vecore <vecore@google.com>
Commit-Queue: Curt Clemens <cclem@google.com>
Cr-Commit-Position: refs/heads/master@{#823649}

chrome/browser/nearby_sharing/nearby_per_session_discovery_manager.cc

@@ -38,6 +38,50 @@ base::Optional<nearby_share::mojom::TransferStatus> GetTransferStatus(
   return base::nullopt;
 }
 
+nearby_share::mojom::ShareType GetTextShareType(
+    const TextAttachment* attachment) {
+  switch (attachment->type()) {
+    case TextAttachment::Type::kUrl:
+      return nearby_share::mojom::ShareType::kUrl;
+    case TextAttachment::Type::kAddress:
+      return nearby_share::mojom::ShareType::kAddress;
+    case TextAttachment::Type::kPhoneNumber:
+      return nearby_share::mojom::ShareType::kPhone;
+    default:
+      return nearby_share::mojom::ShareType::kText;
+  }
+}
+
+nearby_share::mojom::ShareType GetFileShareType(
+    const FileAttachment* attachment) {
+  switch (attachment->type()) {
+    case FileAttachment::Type::kImage:
+      return nearby_share::mojom::ShareType::kImageFile;
+    case FileAttachment::Type::kVideo:
+      return nearby_share::mojom::ShareType::kVideoFile;
+    case FileAttachment::Type::kAudio:
+      return nearby_share::mojom::ShareType::kAudioFile;
+    default:
+      break;
+  }
+
+  // Try matching on mime type if the attachment type is unrecognized.
+  if (attachment->mime_type() == "application/pdf") {
+    return nearby_share::mojom::ShareType::kPdfFile;
+  } else if (attachment->mime_type() ==
+             "application/vnd.google-apps.document") {
+    return nearby_share::mojom::ShareType::kGoogleDocsFile;
+  } else if (attachment->mime_type() ==
+             "application/vnd.google-apps.spreadsheet") {
+    return nearby_share::mojom::ShareType::kGoogleSheetsFile;
+  } else if (attachment->mime_type() ==
+             "application/vnd.google-apps.presentation") {
+    return nearby_share::mojom::ShareType::kGoogleSlidesFile;
+  } else {
+    return nearby_share::mojom::ShareType::kUnknownFile;
+  }
+}
+
 }  // namespace
 
 NearbyPerSessionDiscoveryManager::NearbyPerSessionDiscoveryManager(
@@ -178,32 +222,22 @@ void NearbyPerSessionDiscoveryManager::GetSendPreview(
   auto& attachment = attachments_[0];
   send_preview->description = attachment->GetDescription();
 
-  // For text we are all done, but for files we have to handle the two cases of
-  // sharing a single file or sharing multiple files.
-  if (attachment->family() == Attachment::Family::kFile) {
-    send_preview->file_count = attachments_.size();
-    if (attachments_.size() > 1) {
+  // TODO(crbug.com/1144942) Add virtual GetShareType to Attachment to eliminate
+  // these casts.
+  switch (attachment->family()) {
+    case Attachment::Family::kText:
+      send_preview->share_type =
+          GetTextShareType(static_cast<TextAttachment*>(attachment.get()));
+      break;
+    case Attachment::Family::kFile:
+      send_preview->file_count = attachments_.size();
       // For multiple files we don't capture the types.
-      send_preview->share_type = nearby_share::mojom::ShareType::kMultipleFiles;
-    } else {
-      FileAttachment* file_attachment =
-          static_cast<FileAttachment*>(attachment.get());
-      switch (file_attachment->type()) {
-        case FileAttachment::Type::kImage:
-          send_preview->share_type = nearby_share::mojom::ShareType::kImageFile;
-          break;
-        case FileAttachment::Type::kVideo:
-          send_preview->share_type = nearby_share::mojom::ShareType::kVideoFile;
-          break;
-        case FileAttachment::Type::kAudio:
-          send_preview->share_type = nearby_share::mojom::ShareType::kAudioFile;
-          break;
-        default:
-          send_preview->share_type =
-              nearby_share::mojom::ShareType::kUnknownFile;
-          break;
-      }
-    }
+      send_preview->share_type =
+          attachments_.size() > 1
+              ? nearby_share::mojom::ShareType::kMultipleFiles
+              : GetFileShareType(
+                    static_cast<FileAttachment*>(attachment.get()));
+      break;
   }
 
   std::move(callback).Run(std::move(send_preview));

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

@@ -57,7 +57,8 @@
         cancel-button-event-name="[[getCancelEventName_(needsConfirmation_)]]">
   <div id="centerContent" slot="content">
     <div id="processRow">
-      <nearby-preview title="[[attachmentTitle_(sendPreview)]]">
+      <nearby-preview title="[[attachmentTitle_(sendPreview)]]"
+          share-type="[[sendPreview.shareType]]">
       </nearby-preview>
       <div id="confirmationToken">
         <template is="dom-if" if="[[confirmationToken_]]">

chrome/browser/resources/nearby_share/nearby_discovery_page.html

@@ -80,7 +80,8 @@
         cancel-button-event-name="close">
   <div id="centerContent" slot="content">
     <div id="process-row">
-      <nearby-preview title="[[sendPreview.description]]"></nearby-preview>
+      <nearby-preview title="[[sendPreview.description]]"
+          share-type="[[sendPreview.shareType]]"></nearby-preview>
       <iron-list items="[[shareTargets_]]" id="deviceList"
           selected-item="{{selectedShareTarget}}"
           on-selected-item-changed="onSelectedShareTargetChanged_"

chrome/browser/resources/nearby_share/nearby_preview.html

 <style>
-  #background {
-    fill: rgb(232, 240, 254)
-  }
-
-  #placeholder {
-    clip-rule: evenodd;
-    fill: rgb(28, 116, 233);
-    fill-opacity: 0.3;
-    fill-rule: evenodd;
-  }
-
-  #svg {
+  iron-icon {
     display: block;
-    height: 110px;
-    margin: 0 auto;
-    width: 90px;
+    height: 40px;
+    margin: 20px auto 24px auto;
+    width: 40px;
   }
 
   #title {
-    color: rgb(95, 99, 104);
+    color: rgb(32, 33, 36);
     font-size: 13px;
+    height: 60px;
     letter-spacing: 0.2px;
     line-height: 20px;
     margin-top: 6px;
-    max-height: 40px;
-    max-width: 200px;
     overflow: hidden;
     overflow-wrap: break-word;
     text-align: center;
+    width: 116px;
   }
 </style>
 
-<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 110">
-  <rect id="background" width="90" height="110" rx="4"></rect>
-  <path id="placeholder" d="M33 31v12a18 18 0 1020 22h14V31zm20 34a18 18 0 00-20-22v22h20z"></path>
-</svg>
+<iron-icon icon="[[getIronIconName_(shareType)]]"></iron-icon>
 <div id="title">[[title]]</div>

chrome/browser/resources/nearby_share/nearby_preview.js

@@ -7,6 +7,9 @@
  * sent to a remote device. The data might be some plain text, a URL or a file.
  */
 
+import './shared/nearby_shared_share_type_icons.m.js';
+
+import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 Polymer({
@@ -20,5 +23,55 @@ Polymer({
       type: String,
       value: '',
     },
+
+    /**
+     * The type of the attachment. Determines the icon displayed.
+     * @type {?nearbyShare.mojom.ShareType}
+     * */
+    shareType: {
+      type: Number,
+      value: null,
+    }
+  },
+
+  /**
+   * @return {string} the identifier for the iron icon
+   * @private
+   */
+  getIronIconName_() {
+    if (this.shareType === null || this.shareType === undefined) {
+      return '';
+    }
+
+    switch (this.shareType) {
+      case nearbyShare.mojom.ShareType.kUnknownFile:
+        return 'nearbysharetype40:unknown-file';
+      case nearbyShare.mojom.ShareType.kMultipleFiles:
+        return 'nearbysharetype40:multiple-file';
+      case nearbyShare.mojom.ShareType.kImageFile:
+      case nearbyShare.mojom.ShareType.kVideoFile:
+        return 'nearbysharetype40:image-video-file';
+      case nearbyShare.mojom.ShareType.kAudioFile:
+        return 'nearbysharetype40:audio-file';
+      case nearbyShare.mojom.ShareType.kPdfFile:
+        return 'nearbysharetype40:pdf-file';
+      case nearbyShare.mojom.ShareType.kGoogleDocsFile:
+        return 'nearbysharetype40:google-docs-file';
+      case nearbyShare.mojom.ShareType.kGoogleSheetsFile:
+        return 'nearbysharetype40:google-sheets-file';
+      case nearbyShare.mojom.ShareType.kGoogleSlidesFile:
+        return 'nearbysharetype40:google-slides-file';
+      case nearbyShare.mojom.ShareType.kText:
+        return 'nearbysharetype40:text';
+      case nearbyShare.mojom.ShareType.kUrl:
+        return 'nearbysharetype40:url';
+      case nearbyShare.mojom.ShareType.kAddress:
+        return 'nearbysharetype40:address';
+      case nearbyShare.mojom.ShareType.kPhone:
+        return 'nearbysharetype40:phone';
+      default:
+        assertNotReached('No icon defined for share type ' + this.shareType);
+        return 'nearbysharetype40:unknown-file';
+    }
   },
 });

chrome/browser/resources/nearby_share/shared/BUILD.gn

@@ -169,6 +169,7 @@ group("polymer3_elements") {
     ":nearby_onboarding_page_module",
     ":nearby_page_template_module",
     ":nearby_shared_icons_module",
+    ":nearby_shared_share_type_icons_module",
     ":nearby_visibility_page_module",
     "//chrome/browser/ui/webui/nearby_share/public/mojom:mojom_js",
   ]
@@ -276,6 +277,12 @@ polymer_modulizer("nearby_shared_icons") {
   html_type = "iron-iconset"
 }
 
+polymer_modulizer("nearby_shared_share_type_icons") {
+  js_file = "nearby_shared_share_type_icons.m.js"
+  html_file = "nearby_shared_share_type_icons.html"
+  html_type = "iron-iconset"
+}
+
 polymer_modulizer("nearby_visibility_page") {
   js_file = "nearby_visibility_page.js"
   html_file = "nearby_visibility_page.html"

chrome/browser/resources/nearby_share/shared/nearby_shared_resources.grd

@@ -42,6 +42,8 @@
                file="nearby_share_settings_behavior.js" type="BINDATA" compress="false"/>
       <include name="IDR_NEARBY_SHARED_ICONS_HTML"
                file="nearby_shared_icons.html" type="BINDATA" compress="false"/>
+      <include name="IDR_NEARBY_SHARED_SHARE_TYPE_ICONS_HTML"
+               file="nearby_shared_share_type_icons.html" type="BINDATA" compress="false"/>
       <include name="IDR_NEARBY_VISIBILITY_PAGE_HTML"
                file="nearby_visibility_page.html" type="BINDATA" compress="false"/>
       <include name="IDR_NEARBY_VISIBILITY_PAGE_JS"

chrome/browser/resources/nearby_share/shared/nearby_shared_resources_v3.grd

@@ -34,6 +34,9 @@
       <include name="IDR_NEARBY_SHARED_ICONS_M_JS"
                file="${root_gen_dir}/chrome/browser/resources/nearby_share/shared/nearby_shared_icons.m.js"
                use_base_dir="false" type="BINDATA" compress="false"/>
+      <include name="IDR_NEARBY_SHARED_SHARE_TYPE_ICONS_M_JS"
+               file="${root_gen_dir}/chrome/browser/resources/nearby_share/shared/nearby_shared_share_type_icons.m.js"
+               use_base_dir="false" type="BINDATA" compress="false"/>
       <include name="IDR_NEARBY_VISIBILITY_PAGE_M_JS"
                file="${root_gen_dir}/chrome/browser/resources/nearby_share/shared/nearby_visibility_page.m.js"
                use_base_dir="false" type="BINDATA" compress="false"/>

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">
+  <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>
+      </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>
+      </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>
+      </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>
+      </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>
+      </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>
+      </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>
+      </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>
+      </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>
+      </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>
+      </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>
+      </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>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>

chrome/browser/ui/webui/nearby_share/nearby_share.mojom

@@ -104,8 +104,14 @@ interface TransferUpdateListener {
 // This enum combines both text and file share attachment types into a single
 // enum that more directly maps to what is shown to user for preview.
 enum ShareType {
-  // A non-file text share (url, phone, address, etc).
+  // A generic non-file text share.
   kText,
+  // A text share representing a url, opened in browser.
+  kUrl,
+  // A text share representing a phone number, opened in dialer.
+  kPhone,
+  // A text share representing an address, opened in browser.
+  kAddress,
   // Multiple files are being shared, we don't capture the specific types.
   kMultipleFiles,
   // Single file attachment with a mime type of 'image/*'.
@@ -114,6 +120,17 @@ enum ShareType {
   kVideoFile,
   // Single file attachment with a mime type of 'audio/*'.
   kAudioFile,
+  // Single file attachment with a mime type of 'application/pdf'.
+  kPdfFile,
+  // Single file attachment with a mime type of
+  // 'application/vnd.google-apps.document'.
+  kGoogleDocsFile,
+  // Single file attachment with a mime type of
+  // 'application/vnd.google-apps.spreadsheet'.
+  kGoogleSheetsFile,
+  // Single file attachment with a mime type of
+  // 'application/vnd.google-apps.presentation'.
+  kGoogleSlidesFile,
   // Single file attachment with un-matched mime type.
   kUnknownFile,
 };