[Nearby] Add nearby-device-icon component

This renders a device's icon. For now it only looks at the device type
but in future this will show an image if the remote device has one
defined. Used in the nearby-device component on the discovery page and
in the nearby-progress component on the confirmation page.

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

chrome/browser/resources/nearby_share/BUILD.gn

@@ -12,6 +12,7 @@ js_type_check("closure_compile") {
     ":discovery_manager",
     ":nearby_confirmation_page",
     ":nearby_device",
+    ":nearby_device_icon",
     ":nearby_discovery_page",
     ":nearby_preview",
     ":nearby_progress",
@@ -46,6 +47,15 @@ js_library("nearby_confirmation_page") {
 
 js_library("nearby_device") {
   deps = [
+    ":nearby_device_icon",
+    "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
+js_library("nearby_device_icon") {
+  deps = [
+    "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
     "//third_party/polymer/v3_0/components-chromium/iron-icon",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
@@ -71,7 +81,8 @@ js_library("nearby_preview") {
 
 js_library("nearby_progress") {
   deps = [
-    "//third_party/polymer/v3_0/components-chromium/iron-icon",
+    ":nearby_device_icon",
+    "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
@@ -82,6 +93,7 @@ html_to_js("web_components") {
     "icons.js",
     "nearby_confirmation_page.js",
     "nearby_device.js",
+    "nearby_device_icon.js",
     "nearby_discovery_page.js",
     "nearby_preview.js",
     "nearby_progress.js",

chrome/browser/resources/nearby_share/icons.html

@@ -5,7 +5,9 @@
       These icons are copied from Polymer's iron-icons and kept in sorted order.
       See http://goo.gl/Y1OdAq for instructions on adding additional icons.
       -->
+      <g id="laptop"><path d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"></path></g>
       <g id="smartphone"><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"></path></g>
+      <g id="tablet"><path d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 1.99-.9 1.99-2L23 6c0-1.1-.9-2-2-2zm-2 14H5V6h14v12z"></path></g>
     </defs>
   </svg>
 </iron-iconset-svg>

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

@@ -80,7 +80,7 @@
     <div id="confirmation-token">
       Secure connection ID: [[confirmationToken]]
     </div>
-    <nearby-progress device-name="[[shareTarget.name]]"></nearby-progress>
+    <nearby-progress share-target="[[shareTarget]]"></nearby-progress>
   </div>
 
   <cr-checkbox id="add-contacts">

chrome/browser/resources/nearby_share/nearby_device.html

@@ -14,19 +14,9 @@
   }
 
   #icon {
-    color: rgb(26, 115, 232);
-    height: 15px;
-    width: 15px;
-  }
-
-  #icon-container {
-    align-items: center;
-    background-color: rgb(232, 240, 254);
-    border-radius: 13px;
-    display: flex;
+    --nearby-device-icon-size: 15px;
     flex-shrink: 0;
     height: 26px;
-    justify-content: center;
     width: 26px;
   }
 
@@ -42,7 +32,7 @@
     white-space: nowrap;
   }
 </style>
-<div id="icon-container">
-  <iron-icon id="icon" icon="nearby-share:smartphone"></iron-icon>
-</div>
-<div id="name">[[name]]</div>
+
+<nearby-device-icon id="icon" share-target="[[shareTarget]]">
+</nearby-device-icon>
+<div id="name">[[shareTarget.name]]</div>

chrome/browser/resources/nearby_share/nearby_device.js

@@ -6,8 +6,10 @@
  * @fileoverview The 'nearby-device' component shows details of a remote device.
  */
 
-import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
-import './icons.js';
+import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
+import './nearby_device_icon.js';
+import './nearby_share.mojom-lite.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -17,10 +19,14 @@ Polymer({
   _template: html`{__html_template__}`,
 
   properties: {
-    /** The device name to show. */
-    name: {
-      type: String,
-      value: '',
+    /**
+     * Expected to start as null, then change to a valid object before this
+     * component is shown.
+     * @type {?nearbyShare.mojom.ShareTarget}
+     */
+    shareTarget: {
+      type: Object,
+      value: null,
     },
   },
 });

chrome/browser/resources/nearby_share/nearby_device_icon.html

+<style>
+  :host {
+    background-color: rgb(232, 240, 254);
+    border-radius: 50%;
+    display: flex;
+  }
+
+  #icon {
+    color: rgb(26, 115, 232);
+    height: var(--nearby-device-icon-size, 24px);
+    margin: auto;
+    width: var(--nearby-device-icon-size, 24px);
+  }
+</style>
+
+<iron-icon id="icon" icon="[[getShareTargetIcon_(shareTarget)]]"></iron-icon>

chrome/browser/resources/nearby_share/nearby_device_icon.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-device-icon' component shows an icon for a nearby
+ * device. This might be a user defined image or a generic icon based on device
+ * type.
+ */
+
+import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import './icons.js';
+import './nearby_share.mojom-lite.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+Polymer({
+  is: 'nearby-device-icon',
+
+  _template: html`{__html_template__}`,
+
+  properties: {
+    /**
+     * The share target to show the icon for. Expected to start as null, then
+     * change to a valid object before this component is shown.
+     * @type {?nearbyShare.mojom.ShareTarget}
+     */
+    shareTarget: {
+      type: Object,
+      value: null,
+    },
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getShareTargetIcon_() {
+    if (!this.shareTarget) {
+      return 'nearby-share:laptop';
+    }
+    switch (this.shareTarget.type) {
+      case nearbyShare.mojom.ShareTargetType.kPhone:
+        return 'nearby-share:smartphone';
+      case nearbyShare.mojom.ShareTargetType.kTablet:
+        return 'nearby-share:tablet';
+      case nearbyShare.mojom.ShareTargetType.kLaptop:
+        return 'nearby-share:laptop';
+      default:
+        return 'nearby-share:laptop';
+    }
+  },
+});

chrome/browser/resources/nearby_share/nearby_discovery_page.html

@@ -92,11 +92,8 @@
     <div id="process-row">
       <nearby-preview title="Doggo.jpg"></nearby-preview>
       <div id="device-list">
-        <nearby-device name="Alyssa's Pixel"></nearby-device>
-        <nearby-device name="Shangela's Pixel 2XL"></nearby-device>
-        <nearby-device name="Mira's Chromebook"></nearby-device>
         <template is="dom-repeat" items="[[shareTargets_]]">
-          <nearby-device name="[[item.name]]"></nearby-device>
+          <nearby-device share-target="[[item]]"></nearby-device>
         </template>
       </div>
     </div>

chrome/browser/resources/nearby_share/nearby_discovery_page.js

@@ -96,7 +96,24 @@ Polymer({
 
   /** @override */
   attached() {
-    this.shareTargets_ = [];
+    // TODO(knollr): Remove this once prototyping is done.
+    this.shareTargets_ = [
+      {
+        id: {high: 0, low: 1},
+        name: 'Alyssa\'s Pixel',
+        type: nearbyShare.mojom.ShareTargetType.kTablet,
+      },
+      {
+        id: {high: 0, low: 2},
+        name: 'Shangela\'s Pixel 2XL',
+        type: nearbyShare.mojom.ShareTargetType.kPhone,
+      },
+      {
+        id: {high: 0, low: 3},
+        name: 'Mira\'s Chromebook',
+        type: nearbyShare.mojom.ShareTargetType.kLaptop,
+      }
+    ];
     this.shareTargetMap_ = new Map();
 
     this.mojoEventTarget_ =

chrome/browser/resources/nearby_share/nearby_progress.html

 <style>
-  #background {
-    fill: rgb(232, 240, 254);
-  }
-
   #device-name {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
     color: rgba(0, 0, 0, 0.87);
+    display: -webkit-box;
     letter-spacing: 0.25px;
     line-height: 154%;
     margin-top: 10px;
+    overflow: hidden;
     text-align: center;
   }
 
   #icon {
-    color: rgb(26, 115, 232);
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
+    height: 70px;
+    margin: auto;
+    width: 70px;
   }
 
   #progress-container {
+    display: flex;
     height: 80px;
     margin: 0 auto;
     position: relative;
@@ -68,9 +67,9 @@
 
 <div id="progress-container">
   <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
-    <circle id="background" cx="40" cy="40" r="35"></circle>
     <circle id="spinner" cx="40" cy="40" r="39"></circle>
   </svg>
-  <iron-icon id="icon" icon="nearby-share:smartphone"></iron-icon>
+  <nearby-device-icon id="icon" share-target="[[shareTarget]]">
+  </nearby-device-icon>
 </div>
-<div id="device-name">[[deviceName]]</div>
+<div id="device-name">[[shareTarget.name]]</div>

chrome/browser/resources/nearby_share/nearby_progress.js

@@ -9,8 +9,10 @@
  * now.
  */
 
-import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
-import './icons.js';
+import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
+import './nearby_device_icon.js';
+import './nearby_share.mojom-lite.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -20,10 +22,14 @@ Polymer({
   _template: html`{__html_template__}`,
 
   properties: {
-    /** The device name to show below the progress spinner. */
-    deviceName: {
-      type: String,
-      value: '',
+    /**
+     * The share target to show the progress for. Expected to start as null,
+     * then change to a valid object before this component is shown.
+     * @type {?nearbyShare.mojom.ShareTarget}
+     */
+    shareTarget: {
+      type: Object,
+      value: null,
     },
   },
 });

chrome/browser/resources/nearby_share/nearby_share_dialog_resources.grd

@@ -36,6 +36,9 @@
       <include name="IDR_NEARBY_SHARE_NEARBY_DEVICE_JS"
                file="${root_gen_dir}/chrome/browser/resources/nearby_share/nearby_device.js"
                use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_NEARBY_SHARE_NEARBY_DEVICE_ICON_JS"
+               file="${root_gen_dir}/chrome/browser/resources/nearby_share/nearby_device_icon.js"
+               use_base_dir="false" type="BINDATA"/>
       <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"/>

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

@@ -14,6 +14,7 @@ js_type_check("closure_compile") {
   deps = [
     ":fake_mojo_interfaces",
     ":nearby_confirmation_page_test",
+    ":nearby_device_icon_test",
     ":nearby_device_test",
     ":nearby_discovery_page_test",
     ":nearby_preview_test",
@@ -38,7 +39,18 @@ js_library("nearby_confirmation_page_test") {
 }
 
 js_library("nearby_device_test") {
-  deps = [ "//chrome/browser/resources/nearby_share:nearby_device" ]
+  deps = [
+    "//chrome/browser/resources/nearby_share:nearby_device",
+    "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
+js_library("nearby_device_icon_test") {
+  deps = [
+    "//chrome/browser/resources/nearby_share:nearby_device_icon",
+    "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
+  ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 
@@ -56,7 +68,10 @@ js_library("nearby_preview_test") {
 }
 
 js_library("nearby_progress_test") {
-  deps = [ "//chrome/browser/resources/nearby_share:nearby_progress" ]
+  deps = [
+    "//chrome/browser/resources/nearby_share:nearby_progress",
+    "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
+  ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 

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

@@ -48,6 +48,7 @@ const NearbyBrowserTest = class extends PolymerTest {
 
 [['ConfirmationPage', 'nearby_confirmation_page_test.js'],
  ['Device', 'nearby_device_test.js'],
+ ['DeviceIcon', 'nearby_device_icon_test.js'],
  ['DiscoveryPage', 'nearby_discovery_page_test.js'],
  ['Preview', 'nearby_preview_test.js'],
  ['Progress', 'nearby_progress_test.js'],

chrome/test/data/webui/nearby_share/nearby_device_icon_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://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
+
+import 'chrome://nearby/nearby_device_icon.js';
+import 'chrome://nearby/nearby_share.mojom-lite.js';
+
+import {assertEquals} from '../chai_assert.js';
+
+suite('DeviceIconTest', function() {
+  /** @type {!NearbyDeviceIconElement} */
+  let deviceIconElement;
+
+  setup(function() {
+    deviceIconElement = /** @type {!NearbyDeviceIconElement} */ (
+        document.createElement('nearby-device-icon'));
+    document.body.appendChild(deviceIconElement);
+  });
+
+  teardown(function() {
+    deviceIconElement.remove();
+  });
+
+  test('renders component', function() {
+    assertEquals('NEARBY-DEVICE-ICON', deviceIconElement.tagName);
+  });
+
+  test('renders default icon', function() {
+    const renderedIcon = deviceIconElement.$$('#icon').icon;
+    assertEquals('nearby-share:laptop', renderedIcon);
+  });
+
+  const iconTests = [
+    {
+      type: nearbyShare.mojom.ShareTargetType.kPhone,
+      expected: 'nearby-share:smartphone'
+    },
+    {
+      type: nearbyShare.mojom.ShareTargetType.kTablet,
+      expected: 'nearby-share:tablet'
+    },
+    {
+      type: nearbyShare.mojom.ShareTargetType.kLaptop,
+      expected: 'nearby-share:laptop'
+    },
+    {
+      type: nearbyShare.mojom.ShareTargetType.kUnknown,
+      expected: 'nearby-share:laptop'
+    },
+  ];
+
+  iconTests.forEach(function({type, expected}) {
+    test(`renders ${expected}`, function() {
+      const shareTarget = /** @type {!nearbyShare.mojom.ShareTarget} */ ({
+        id: {high: 0, low: 0},
+        name: 'Device Name',
+        type,
+      });
+      deviceIconElement.shareTarget = shareTarget;
+
+      const renderedIcon = deviceIconElement.$$('#icon').icon;
+      assertEquals(expected, renderedIcon);
+    });
+  });
+});

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

@@ -4,8 +4,10 @@
 
 // So that mojo is defined.
 import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
 
 import 'chrome://nearby/nearby_device.js';
+import 'chrome://nearby/nearby_share.mojom-lite.js';
 
 import {assertEquals} from '../chai_assert.js';
 
@@ -28,8 +30,13 @@ suite('DeviceTest', function() {
   });
 
   test('renders name', function() {
-    const name = 'Name';
-    deviceElement.setAttribute('name', name);
+    const name = 'Device Name';
+    const shareTarget = /** @type {!nearbyShare.mojom.ShareTarget} */ ({
+      id: {high: 0, low: 0},
+      name,
+      type: nearbyShare.mojom.ShareTargetType.kPhone,
+    });
+    deviceElement.shareTarget = shareTarget;
 
     const renderedName = deviceElement.$$('#name').textContent;
     assertEquals(name, renderedName);

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

@@ -20,7 +20,7 @@ suite('DiscoveryPageTest', function() {
   let discoveryManager;
 
   /** @type {!number} Next device id to be used. */
-  let nextId = 0;
+  let nextId = 1;
 
   /**
    * Get the list of device names that are currently shown.
@@ -79,6 +79,10 @@ suite('DiscoveryPageTest', function() {
   });
 
   test('selects share target with success', async function() {
+    // TODO(knollr): Remove this once prototyping is done.
+    /** @suppress {visibility} */
+    discoveryPageElement.shareTargets_ = [];
+
     const created = await setupShareTarget();
     discoveryPageElement.$$('#next-button').click();
     const selectedId = await discoveryManager.whenCalled('selectShareTarget');

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

@@ -4,8 +4,10 @@
 
 // So that mojo is defined.
 import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
 
 import 'chrome://nearby/nearby_progress.js';
+import 'chrome://nearby/nearby_share.mojom-lite.js';
 
 import {assertEquals} from '../chai_assert.js';
 
@@ -27,11 +29,16 @@ suite('ProgressTest', function() {
     assertEquals('NEARBY-PROGRESS', progressElement.tagName);
   });
 
-  test('renders deviceName', function() {
-    const deviceName = 'Device Name';
-    progressElement.setAttribute('device-name', deviceName);
-
-    const renderedDeviceName = progressElement.$$('#device-name').textContent;
-    assertEquals(deviceName, renderedDeviceName);
+  test('renders device name', function() {
+    const name = 'Device Name';
+    const shareTarget = /** @type {!nearbyShare.mojom.ShareTarget} */ ({
+      id: {high: 0, low: 0},
+      name,
+      type: nearbyShare.mojom.ShareTargetType.kPhone,
+    });
+    progressElement.shareTarget = shareTarget;
+
+    const renderedName = progressElement.$$('#device-name').textContent;
+    assertEquals(name, renderedName);
   });
 });