[Nearby] Add nearby-preview component

This component will render a preview of the to-be-shared content. This
might be an image or some text for example. For now it renders a
placeholder image and a title text below it. This component will be used
from the confirmation-page and discovery-page.

Bug: 1099710
Change-Id: I6331fa196a54d02662cd621e3c28ef15cb65de5f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2277734Reviewed-by: Michael van Ouwerkerk <mvanouwerkerk@chromium.org>
Commit-Queue: Richard Knoll <knollr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#785326}

chrome/browser/resources/nearby_share/BUILD.gn

@@ -11,6 +11,7 @@ js_type_check("closure_compile") {
     ":app",
     ":nearby_confirmation_page",
     ":nearby_discovery_page",
+    ":nearby_preview",
     ":nearby_progress",
   ]
 }
@@ -27,6 +28,7 @@ js_library("app") {
 
 js_library("nearby_confirmation_page") {
   deps = [
+    ":nearby_preview",
     ":nearby_progress",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
@@ -38,6 +40,12 @@ js_library("nearby_discovery_page") {
   ]
 }
 
+js_library("nearby_preview") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 js_library("nearby_progress") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/iron-icon",
@@ -51,6 +59,7 @@ html_to_js("web_components") {
     "icons.js",
     "nearby_confirmation_page.js",
     "nearby_discovery_page.js",
+    "nearby_preview.js",
     "nearby_progress.js",
   ]
 }

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

+<style>
+  #process-row {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 32px;
+  }
+</style>
+
 <h1>Nearby Confirmation Page</h1>
-<nearby-progress device-name="Pixel 2"></nearby-progress>
+<div id="process-row">
+  <nearby-preview title="Doggo.jpg"></nearby-preview>
+  <nearby-progress device-name="Pixel 2"></nearby-progress>
+</div>

chrome/browser/resources/nearby_share/nearby_confirmation_page.js

@@ -8,6 +8,7 @@
  * are not currently in the contacts of this user.
  */
 
+import './nearby_preview.js';
 import './nearby_progress.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

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 {
+    display: block;
+    height: 110px;
+    margin: 0 auto;
+    width: 90px;
+  }
+
+  #title {
+    color: rgb(95, 99, 104);
+    font-size: 13px;
+    letter-spacing: 0.2px;
+    line-height: 20px;
+    margin-top: 6px;
+    text-align: center;
+  }
+</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>
+<div id="title">[[title]]</div>

chrome/browser/resources/nearby_share/nearby_preview.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview The 'nearby-preview' component shows a preview of data to be
+ * sent to a remote device. The data might be some plain text, a URL or a file.
+ */
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+Polymer({
+  is: 'nearby-preview',
+
+  _template: html`{__html_template__}`,
+
+  properties: {
+    /** The title to show below the preview graphic. */
+    title: {
+      type: String,
+      value: '',
+    },
+  },
+});

chrome/browser/resources/nearby_share/nearby_share_dialog_resources.grd

@@ -29,6 +29,9 @@
       <include name="IDR_NEARBY_SHARE_NEARBY_DISCOVERY_PAGE_JS"
                file="${root_gen_dir}/chrome/browser/resources/nearby_share/nearby_discovery_page.js"
                use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_NEARBY_SHARE_NEARBY_PREVIEW_JS"
+               file="${root_gen_dir}/chrome/browser/resources/nearby_share/nearby_preview.js"
+               use_base_dir="false" type="BINDATA"/>
       <include name="IDR_NEARBY_SHARE_NEARBY_PROGRESS_JS"
                file="${root_gen_dir}/chrome/browser/resources/nearby_share/nearby_progress.js"
                use_base_dir="false" type="BINDATA"/>

chrome/test/data/webui/nearby_share/BUILD.gn

@@ -13,6 +13,7 @@ js_type_check("closure_compile") {
                   ]
   deps = [
     ":nearby_confirmation_page_test",
+    ":nearby_preview_test",
     ":nearby_progress_test",
   ]
 }
@@ -22,6 +23,11 @@ js_library("nearby_confirmation_page_test") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 
+js_library("nearby_preview_test") {
+  deps = [ "//chrome/browser/resources/nearby_share:nearby_preview" ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
 js_library("nearby_progress_test") {
   deps = [ "//chrome/browser/resources/nearby_share:nearby_progress" ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]

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

@@ -47,6 +47,7 @@ const NearbyBrowserTest = class extends PolymerTest {
 };
 
 [['ConfirmationPage', 'nearby_confirmation_page_test.js'],
+ ['Preview', 'nearby_preview_test.js'],
  ['Progress', 'nearby_progress_test.js'],
 ].forEach(test => registerTest(...test));
 

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// So that mojo is defined.
+import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+
+import 'chrome://nearby/nearby_preview.js';
+
+import {assertEquals} from '../chai_assert.js';
+
+suite('PreviewTest', function() {
+  /** @type {!NearbyPreviewElement} */
+  let previewElement;
+
+  setup(function() {
+    previewElement = /** @type {!NearbyPreviewElement} */ (
+        document.createElement('nearby-preview'));
+    document.body.appendChild(previewElement);
+  });
+
+  teardown(function() {
+    previewElement.remove();
+  });
+
+  test('renders component', function() {
+    assertEquals('NEARBY-PREVIEW', previewElement.tagName);
+  });
+
+  test('renders title', function() {
+    const title = 'Title';
+    previewElement.setAttribute('title', title);
+
+    const renderedTitle = previewElement.$$('#title').textContent;
+    assertEquals(title, renderedTitle);
+  });
+});