[Nearby] Move nearby-device-icon to be shared

This is a mostly mechanical change to move the nearby-device-icon
Polymer component from being chrome://nearby (Poylmer3) only to being
shared with chrome://os-settings (Polymer2/3). This necessary for Nearby
Share's launch despite Polymer2 being phased out (the conversion won't
be complete in time for M-89 launch).

A Few other small changes were necessary:
- Fixed a copy/paste issue with resource_path_rewrites
- Make the nearby_share/shared folder CrOS only. There was still a
lingering referenced to the closure compiler targets that were not CrOS
only.
- Refactored browser test to not use the mojo interfaces from a const
expression (necessary for Polymer2).
- Copied icons from icons to the existing shared icon set (old icons
will be cleaned up in a follow up CL.

Bug: 1156035

Change-Id: Ic913ca66e814097524ebf29fd7eb0c89aad82d68
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2571804
Commit-Queue: James Vecore <vecore@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834609}

chrome/browser/resources/BUILD.gn

@@ -42,8 +42,6 @@ if (enable_js_type_check) {
         "management:closure_compile",
         "media_router:closure_compile",
         "nearby_internals:closure_compile",
-        "nearby_share/shared:closure_compile",
-        "nearby_share/shared:closure_compile_module",
         "new_tab_page:closure_compile",
         "ntp4:closure_compile",
         "omnibox:closure_compile",
@@ -72,6 +70,8 @@ if (enable_js_type_check) {
       deps += [
         "chromeos:closure_compile",
         "nearby_share:closure_compile",
+        "nearby_share/shared:closure_compile",
+        "nearby_share/shared:closure_compile_module",
       ]
     }
     if (enable_extensions) {

chrome/browser/resources/nearby_share/BUILD.gn

@@ -56,7 +56,7 @@ generate_grd("build_grd") {
   resource_path_rewrites = [
     "chrome/browser/ui/webui/nearby_share/nearby_share.mojom-lite.js|mojo/nearby_share.mojom-lite.js",
     "chrome/browser/ui/webui/nearby_share/public/mojom/nearby_share_settings.mojom-lite.js|mojo/nearby_share_settings.mojom-lite.js",
-    "chromeos/services/nearby/public/mojom/nearby_share_target_types.mojom-lite.js|mojo/nearby_share_settings.mojom-lite.js",
+    "chromeos/services/nearby/public/mojom/nearby_share_target_types.mojom-lite.js|mojo/nearby_share_target_types.mojom-lite.js",
   ]
 }
 
@@ -80,7 +80,6 @@ preprocess_if_expr("preprocess_gen") {
     "icons.js",
     "nearby_confirmation_page.js",
     "nearby_device.js",
-    "nearby_device_icon.js",
     "nearby_discovery_page.js",
     "nearby_preview.js",
     "nearby_progress.js",
@@ -128,7 +127,6 @@ js_type_check("closure_compile") {
     ":discovery_manager",
     ":nearby_confirmation_page",
     ":nearby_device",
-    ":nearby_device_icon",
     ":nearby_discovery_page",
     ":nearby_preview",
     ":nearby_progress",
@@ -167,15 +165,7 @@ 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/iron-icon",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
-js_library("nearby_device_icon") {
-  deps = [
+    "./shared:nearby_device_icon.m",
     "//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",
@@ -204,7 +194,7 @@ js_library("nearby_preview") {
 
 js_library("nearby_progress") {
   deps = [
-    ":nearby_device_icon",
+    "./shared:nearby_device_icon.m",
     "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
@@ -216,7 +206,6 @@ 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/nearby_device.js

@@ -10,7 +10,7 @@ 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_device_icon.js';
+import './shared/nearby_device_icon.m.js';
 import './mojo/nearby_share_target_types.mojom-lite.js';
 import './mojo/nearby_share.mojom-lite.js';
 

chrome/browser/resources/nearby_share/nearby_device_icon.html

-<style>
-  :host {
-    background-color: var(--nearby-device-icon-background-color,
-                          var(--google-blue-50));
-    border-radius: 50%;
-    display: flex;
-  }
-
-  #icon {
-    color: var(--nearby-device-icon-color, var(--google-blue-600));
-    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_progress.js

@@ -11,7 +11,7 @@
 
 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 './shared/nearby_device_icon.m.js';
 import './mojo/nearby_share_target_types.mojom-lite.js';
 import './mojo/nearby_share.mojom-lite.js';
 

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

@@ -9,6 +9,8 @@ import("//ui/webui/resources/tools/generate_grd.gni")
 import("//ui/webui/resources/tools/js_modulizer.gni")
 import("./nearby_shared.gni")
 
+assert(is_chromeos, "Nearby Share is CrOS only")
+
 os_settings_dir = "$root_gen_dir/chrome/browser/resources/settings/chromeos"
 preprocess_v2_manifest = "preprocessed_v2_manifest.json"
 preprocess_v3_manifest = "preprocessed_v3_manifest.json"
@@ -38,6 +40,8 @@ preprocess_if_expr("preprocess_v2") {
     "nearby_contact_manager.js",
     "nearby_contact_visibility.html",
     "nearby_contact_visibility.js",
+    "nearby_device_icon.html",
+    "nearby_device_icon.js",
     "nearby_onboarding_page.html",
     "nearby_onboarding_page.js",
     "nearby_page_template.html",
@@ -61,6 +65,7 @@ preprocess_if_expr("preprocess_v3") {
   in_files = [
     "nearby_contact_manager.m.js",
     "nearby_contact_visibility.m.js",
+    "nearby_device_icon.m.js",
     "nearby_onboarding_page.m.js",
     "nearby_page_template.m.js",
     "nearby_share_settings.m.js",
@@ -75,6 +80,7 @@ js_type_check("closure_compile") {
   deps = [
     ":nearby_contact_manager",
     ":nearby_contact_visibility",
+    ":nearby_device_icon",
     ":nearby_onboarding_page",
     ":nearby_page_template",
     ":nearby_share_settings",
@@ -109,6 +115,14 @@ js_library("nearby_contact_visibility") {
   ]
 }
 
+js_library("nearby_device_icon") {
+  deps = [
+    "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
+    "//chromeos/services/nearby/public/mojom:nearby_share_target_types_js_library_for_compile",
+    "//third_party/polymer/v1_0/components-chromium/iron-icon:iron-icon-extracted",
+  ]
+}
+
 js_library("nearby_page_template") {
 }
 
@@ -157,6 +171,7 @@ js_type_check("closure_compile_module") {
   deps = [
     ":nearby_contact_manager.m",
     ":nearby_contact_visibility.m",
+    ":nearby_device_icon.m",
     ":nearby_onboarding_page.m",
     ":nearby_page_template.m",
     ":nearby_share_settings.m",
@@ -169,12 +184,15 @@ group("polymer3_elements") {
   public_deps = [
     ":modulize",
     ":nearby_contact_visibility_module",
+    ":nearby_device_icon_module",
     ":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:mojom_js",
     "//chrome/browser/ui/webui/nearby_share/public/mojom:mojom_js",
+    "//chromeos/services/nearby/public/mojom:nearby_share_target_types_js",
   ]
 }
 
@@ -203,6 +221,16 @@ js_library("nearby_contact_visibility.m") {
   extra_deps = [ ":nearby_contact_visibility_module" ]
 }
 
+js_library("nearby_device_icon.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_device_icon.m.js" ]
+  deps = [
+    "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
+    "//chromeos/services/nearby/public/mojom:nearby_share_target_types_js_library_for_compile",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":nearby_device_icon_module" ]
+}
+
 js_library("nearby_onboarding_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_onboarding_page.m.js" ]
   deps = [
@@ -259,6 +287,14 @@ polymer_modulizer("nearby_contact_visibility") {
   namespace_rewrites = nearby_shared_namespace_rewrites
 }
 
+polymer_modulizer("nearby_device_icon") {
+  js_file = "nearby_device_icon.js"
+  html_file = "nearby_device_icon.html"
+  html_type = "dom-module"
+  auto_imports = nearby_shared_auto_imports
+  namespace_rewrites = nearby_shared_namespace_rewrites
+}
+
 polymer_modulizer("nearby_onboarding_page") {
   js_file = "nearby_onboarding_page.js"
   html_file = "nearby_onboarding_page.html"

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="nearby_shared_icons.html">
+
+<script src="chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js"></script>
+<script src="chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js"></script>
+<script src="/mojo/nearby_share_target_types.mojom-lite.js"></script>
+<script src="/mojo/nearby_share.mojom-lite.js"></script>
+
+<dom-module id="nearby-device-icon">
+  <template>
+    <style>
+      :host {
+        background-color: var(--nearby-device-icon-background-color,
+                              var(--google-blue-50));
+        border-radius: 50%;
+        display: flex;
+      }
+
+      #icon {
+        color: var(--nearby-device-icon-color, var(--google-blue-600));
+        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>
+  </template>
+  <script src="nearby_device_icon.js"></script>
+</dom-module>

chrome/browser/resources/nearby_share/nearby_device_icon.js → chrome/browser/resources/nearby_share/shared/nearby_device_icon.js

@@ -8,20 +8,9 @@
  * 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 './mojo/nearby_share_target_types.mojom-lite.js';
-import './mojo/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

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

@@ -36,6 +36,23 @@
   </svg>
 </iron-iconset-svg>
 
+<iron-iconset-svg name="nearby-share" size="24">
+  <svg>
+    <defs>
+      <!-- Nearby Share icons -->
+      <g id="done"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path></g>
+
+      <!--
+      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>
+
 <iron-iconset-svg name="nearby-images" size="200">
   <svg>
     <defs>

chrome/browser/resources/settings/chromeos/BUILD.gn

@@ -53,6 +53,7 @@ if (optimize_webui) {
       "chrome://os-settings/app-management/file_path.mojom-lite.js",
       "chrome://os-settings/app-management/image.mojom-lite.js",
       "chrome://os-settings/app-management/types.mojom-lite.js",
+      "chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js",
       "chrome://resources/mojo/mojo/public/mojom/base/big_buffer.mojom.html",
       "chrome://resources/mojo/mojo/public/mojom/base/string16.mojom.html",
       "chrome://resources/mojo/mojo/public/mojom/base/time.mojom.html",

chrome/browser/resources/settings/chromeos/nearby_share_page/BUILD.gn

@@ -24,8 +24,10 @@ js_type_check("closure_compile") {
 }
 
 js_library("nearby_share_confirm_page") {
-  deps =
-      [ "//chrome/browser/resources/nearby_share/shared:nearby_page_template" ]
+  deps = [
+    "//chrome/browser/resources/nearby_share/shared:nearby_device_icon",
+    "//chrome/browser/resources/nearby_share/shared:nearby_page_template",
+  ]
 }
 
 js_library("nearby_account_manager_browser_proxy") {
@@ -160,6 +162,7 @@ js_type_check("closure_compile_module") {
 js_library("nearby_share_confirm_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_confirm_page.m.js" ]
   deps = [
+    "//chrome/browser/resources/nearby_share/shared:nearby_device_icon.m",
     "//chrome/browser/resources/nearby_share/shared:nearby_page_template.m",
   ]
   extra_deps = [ ":nearby_share_confirm_page_module" ]

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="../../shared/nearby_page_template.html">
+<link rel="import" href="../../shared/nearby_device_icon.html">
 
 <dom-module id="nearby-share-confirm-page">
   <template>

chrome/test/data/webui/BUILD.gn

@@ -302,6 +302,7 @@ if (include_js_tests) {
         "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/fake_nearby_contact_manager.m.js",
         "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/fake_nearby_share_settings.m.js",
         "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_contact_visibility_test.m.js",
+        "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_device_icon_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_onboarding_page_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_page_template_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_visibility_page_test.m.js",

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

@@ -18,7 +18,6 @@ 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",
@@ -52,15 +51,6 @@ js_library("nearby_device_test") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 
-js_library("nearby_device_icon_test") {
-  deps = [
-    "..:chai_assert",
-    "//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" ]
-}
-
 js_library("nearby_discovery_page_test") {
   deps = [
     ":fake_mojo_interfaces",

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

@@ -42,7 +42,6 @@ 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/shared/BUILD.gn

@@ -13,6 +13,7 @@ js_modulizer("modulize") {
     "fake_nearby_contact_manager.js",
     "fake_nearby_share_settings.js",
     "nearby_contact_visibility_test.js",
+    "nearby_device_icon_test.js",
     "nearby_onboarding_page_test.js",
     "nearby_page_template_test.js",
     "nearby_visibility_page_test.js",
@@ -36,6 +37,7 @@ js_type_check("closure_compile") {
     ":fake_nearby_contact_manager.m",
     ":fake_nearby_share_settings.m",
     ":nearby_contact_visibility_test.m",
+    ":nearby_device_icon_test.m",
     ":nearby_onboarding_page_test.m",
     ":nearby_page_template_test.m",
     ":nearby_visibility_page_test.m",
@@ -61,6 +63,16 @@ js_library("nearby_contact_visibility_test.m") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 
+js_library("nearby_device_icon_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_device_icon_test.m.js" ]
+  deps = [
+    "../..:chai_assert",
+    "//chrome/browser/resources/nearby_share/shared:nearby_device_icon.m",
+  ]
+  extra_deps = [ ":modulize" ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
 js_library("nearby_onboarding_page_test.m") {
   sources = [ "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_onboarding_page_test.m.js" ]
   deps = [

chrome/test/data/webui/nearby_share/nearby_device_icon_test.js → chrome/test/data/webui/nearby_share/shared/nearby_device_icon_test.js

@@ -2,14 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
 // 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/mojo/nearby_share.mojom-lite.js';
-
-import {assertEquals} from '../chai_assert.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 'chrome://nearby/shared/nearby_device_icon.m.js';
+// #import 'chrome://nearby/mojo/nearby_share_target_types.mojom-lite.js';
+// #import 'chrome://nearby/mojo/nearby_share.mojom-lite.js';
+// #import {assertEquals} from '../../chai_assert.js';
+// clang-format on
 
 suite('DeviceIconTest', function() {
   /** @type {!NearbyDeviceIconElement} */
@@ -34,36 +35,32 @@ suite('DeviceIconTest', function() {
     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'
-    },
-  ];
+  function testIcon(type, expected) {
+    const shareTarget = /** @type {!nearbyShare.mojom.ShareTarget} */ ({
+      id: {high: 0, low: 0},
+      name: 'Device Name',
+      type,
+    });
+    deviceIconElement.shareTarget = shareTarget;
 
-  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);
+  }
 
-      const renderedIcon = deviceIconElement.$$('#icon').icon;
-      assertEquals(expected, renderedIcon);
-    });
+  test('renders phone', function() {
+    testIcon(nearbyShare.mojom.ShareTargetType.kPhone,
+      'nearby-share:smartphone');
+  });
+
+  test('renders tablet', function() {
+    testIcon(nearbyShare.mojom.ShareTargetType.kTablet, 'nearby-share:tablet');
+  });
+
+  test('renders laptop', function() {
+    testIcon(nearbyShare.mojom.ShareTargetType.kLaptop, 'nearby-share:laptop');
+  });
+
+  test('renders unknown as laptop', function() {
+    testIcon(nearbyShare.mojom.ShareTargetType.kUnknown, 'nearby-share:laptop');
   });
 });

chrome/test/data/webui/nearby_share/shared/nearby_shared_browsertest.js

@@ -38,6 +38,23 @@ const NearbySharedBrowserTest = class extends PolymerTest {
   }
 };
 
+/**
+ * @extends {NearbySharedBrowserTest}
+ */
+var NearbyDeviceIconTest = class extends NearbySharedBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return super.browsePreload + 'shared/nearby_device_icon.html';
+  }
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      'nearby_device_icon_test.js',
+    ]);
+  }
+};
+
+TEST_F('NearbyDeviceIconTest', 'All', () => mocha.run());
 
 /**
  * @extends {NearbySharedBrowserTest}

chrome/test/data/webui/nearby_share/shared/nearby_shared_v3_browsertest.js

@@ -39,7 +39,8 @@ const NearbySharedV3Test = class extends PolymerTest {
   }
 };
 
-[['OnboardingPage', 'nearby_onboarding_page_test.m.js'],
+[['DeviceIcon', 'nearby_device_icon_test.m.js'],
+ ['OnboardingPage', 'nearby_onboarding_page_test.m.js'],
  ['PageTemplate', 'nearby_page_template_test.m.js'],
  ['VisibilityPage', 'nearby_visibility_page_test.m.js'],
  ['ContactVisibility', 'nearby_contact_visibility_test.m.js'],