[Nearby] Move nearby-device to be shared

This is a mechanical change to move the nearby-device 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).

Bug: 1156035

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

chrome/browser/resources/nearby_share/BUILD.gn

@@ -79,7 +79,6 @@ preprocess_if_expr("preprocess_gen") {
     "app.js",
     "icons.js",
     "nearby_confirmation_page.js",
-    "nearby_device.js",
     "nearby_discovery_page.js",
     "nearby_preview.js",
     "nearby_progress.js",
@@ -126,7 +125,6 @@ js_type_check("closure_compile") {
     ":app",
     ":discovery_manager",
     ":nearby_confirmation_page",
-    ":nearby_device",
     ":nearby_discovery_page",
     ":nearby_preview",
     ":nearby_progress",
@@ -163,20 +161,11 @@ js_library("nearby_confirmation_page") {
   ]
 }
 
-js_library("nearby_device") {
-  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",
-  ]
-}
-
 js_library("nearby_discovery_page") {
   deps = [
     ":discovery_manager",
-    ":nearby_device",
     ":nearby_preview",
+    "./shared:nearby_device.m",
     "//chrome/browser/ui/webui/nearby_share:mojom_js_library_for_compile",
     "//third_party/polymer/v3_0/components-chromium/iron-list",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
@@ -205,7 +194,6 @@ html_to_js("web_components") {
     "app.js",
     "icons.js",
     "nearby_confirmation_page.js",
-    "nearby_device.js",
     "nearby_discovery_page.js",
     "nearby_preview.js",
     "nearby_progress.js",

chrome/browser/resources/nearby_share/nearby_device.html

-<style>
-  #wrapper {
-    align-items: center;
-    background-color: rgb(255, 255, 255);
-    border: 1px solid rgba(216, 216, 216, 0.76);
-    border-radius: 8px;
-    box-sizing: border-box;
-    cursor: pointer;
-    display: flex;
-    height: 40px;
-    margin-block-end: 6px;
-    padding-block-end: 6px;
-    padding-block-start: 6px;
-    padding-inline-end: 9px;
-    padding-inline-start: 9px;
-  }
-
-  :host(:focus) {
-    outline: none;
-  }
-
-  :host(:focus) #wrapper {
-    border-color: var(--google-grey-refresh-700);
-  }
-
-  :host([is-selected]) #wrapper {
-    border-color: var(--google-blue-refresh-500);
-  }
-
-  :host([is-selected]) #done {
-    display: flex;
-  }
-
-  :host([is-selected]) #name {
-    color: var(--google-blue-600);
-  }
-
-  #done {
-    color: var(--google-blue-600);
-    display: none;
-    flex-shrink: 0;
-    height: 17px;
-    width: 17px;
-  }
-
-  #icon {
-    --nearby-device-icon-size: 15px;
-    flex-shrink: 0;
-    height: 26px;
-    width: 26px;
-  }
-
-  #name {
-    color: rgb(95, 99, 104);
-    flex-grow: 1;
-    font-size: 11px;
-    font-weight: 500;
-    letter-spacing: 0.3px;
-    margin-inline-start: 11px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-</style>
-
-<div id="wrapper">
-  <nearby-device-icon id="icon" share-target="[[shareTarget]]">
-  </nearby-device-icon>
-  <div id="name">[[shareTarget.name]]</div>
-  <iron-icon id="done" icon="nearby-share:done"></iron-icon>
-</div>

chrome/browser/resources/nearby_share/nearby_discovery_page.js

@@ -12,7 +12,7 @@ import 'chrome://resources/cr_elements/cr_lottie/cr_lottie.m.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://resources/polymer/v3_0/iron-list/iron-list.js';
-import './nearby_device.js';
+import './shared/nearby_device.m.js';
 import './nearby_preview.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

@@ -42,6 +42,8 @@ preprocess_if_expr("preprocess_v2") {
     "nearby_contact_visibility.js",
     "nearby_device_icon.html",
     "nearby_device_icon.js",
+    "nearby_device.html",
+    "nearby_device.js",
     "nearby_onboarding_page.html",
     "nearby_onboarding_page.js",
     "nearby_page_template.html",
@@ -66,6 +68,7 @@ preprocess_if_expr("preprocess_v3") {
     "nearby_contact_manager.m.js",
     "nearby_contact_visibility.m.js",
     "nearby_device_icon.m.js",
+    "nearby_device.m.js",
     "nearby_onboarding_page.m.js",
     "nearby_page_template.m.js",
     "nearby_share_settings.m.js",
@@ -81,6 +84,7 @@ js_type_check("closure_compile") {
     ":nearby_contact_manager",
     ":nearby_contact_visibility",
     ":nearby_device_icon",
+    ":nearby_device",
     ":nearby_onboarding_page",
     ":nearby_page_template",
     ":nearby_share_settings",
@@ -123,6 +127,13 @@ js_library("nearby_device_icon") {
   ]
 }
 
+js_library("nearby_device") {
+  deps = [
+    ":nearby_device_icon",
+    "//third_party/polymer/v1_0/components-chromium/iron-icon:iron-icon-extracted",
+  ]
+}
+
 js_library("nearby_page_template") {
 }
 
@@ -172,6 +183,7 @@ js_type_check("closure_compile_module") {
     ":nearby_contact_manager.m",
     ":nearby_contact_visibility.m",
     ":nearby_device_icon.m",
+    ":nearby_device.m",
     ":nearby_onboarding_page.m",
     ":nearby_page_template.m",
     ":nearby_share_settings.m",
@@ -185,6 +197,7 @@ group("polymer3_elements") {
     ":modulize",
     ":nearby_contact_visibility_module",
     ":nearby_device_icon_module",
+    ":nearby_device_module",
     ":nearby_onboarding_page_module",
     ":nearby_page_template_module",
     ":nearby_shared_icons_module",
@@ -231,6 +244,15 @@ js_library("nearby_device_icon.m") {
   extra_deps = [ ":nearby_device_icon_module" ]
 }
 
+js_library("nearby_device.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_device.m.js" ]
+  deps = [
+    ":nearby_device_icon.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":nearby_device_module" ]
+}
+
 js_library("nearby_onboarding_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_onboarding_page.m.js" ]
   deps = [
@@ -295,6 +317,14 @@ polymer_modulizer("nearby_device_icon") {
   namespace_rewrites = nearby_shared_namespace_rewrites
 }
 
+polymer_modulizer("nearby_device") {
+  js_file = "nearby_device.js"
+  html_file = "nearby_device.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.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">
+<link rel="import" href="nearby_device_icon.html">
+
+<dom-module id="nearby-device">
+  <template>
+    <style>
+      #wrapper {
+        align-items: center;
+        background-color: rgb(255, 255, 255);
+        border: 1px solid rgba(216, 216, 216, 0.76);
+        border-radius: 8px;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        height: 40px;
+        margin-block-end: 6px;
+        padding-block-end: 6px;
+        padding-block-start: 6px;
+        padding-inline-end: 9px;
+        padding-inline-start: 9px;
+      }
+
+      :host(:focus) {
+        outline: none;
+      }
+
+      :host(:focus) #wrapper {
+        border-color: var(--google-grey-refresh-700);
+      }
+
+      :host([is-selected]) #wrapper {
+        border-color: var(--google-blue-refresh-500);
+      }
+
+      :host([is-selected]) #done {
+        display: flex;
+      }
+
+      :host([is-selected]) #name {
+        color: var(--google-blue-600);
+      }
+
+      #done {
+        color: var(--google-blue-600);
+        display: none;
+        flex-shrink: 0;
+        height: 17px;
+        width: 17px;
+      }
+
+      #icon {
+        --nearby-device-icon-size: 15px;
+        flex-shrink: 0;
+        height: 26px;
+        width: 26px;
+      }
+
+      #name {
+        color: rgb(95, 99, 104);
+        flex-grow: 1;
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.3px;
+        margin-inline-start: 11px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    </style>
+
+    <div id="wrapper">
+      <nearby-device-icon id="icon" share-target="[[shareTarget]]">
+      </nearby-device-icon>
+      <div id="name">[[shareTarget.name]]</div>
+      <iron-icon id="done" icon="nearby-share:done"></iron-icon>
+    </div>
+  </template>
+  <script src="nearby_device.js"></script>
+</dom-module>

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

@@ -6,21 +6,9 @@
  * @fileoverview The 'nearby-device' component shows details of a remote device.
  */
 
-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 './shared/nearby_device_icon.m.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',
 
-  _template: html`{__html_template__}`,
-
   properties: {
     /**
      * Expected to start as null, then change to a valid object before this

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

@@ -25,7 +25,7 @@ js_type_check("closure_compile") {
 
 js_library("nearby_share_confirm_page") {
   deps = [
-    "//chrome/browser/resources/nearby_share/shared:nearby_device_icon",
+    "//chrome/browser/resources/nearby_share/shared:nearby_device",
     "//chrome/browser/resources/nearby_share/shared:nearby_page_template",
   ]
 }
@@ -162,7 +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_device.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">
+<link rel="import" href="../../shared/nearby_device.html">
 
 <dom-module id="nearby-share-confirm-page">
   <template>

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_test",
     ":nearby_discovery_page_test",
     ":nearby_preview_test",
     ":nearby_progress_test",
@@ -42,15 +41,6 @@ js_library("nearby_confirmation_page_test") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 
-js_library("nearby_device_test") {
-  deps = [
-    "..:chai_assert",
-    "//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_discovery_page_test") {
   deps = [
     ":fake_mojo_interfaces",

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

@@ -41,7 +41,6 @@ const NearbyBrowserTest = class extends PolymerTest {
 };
 
 [['ConfirmationPage', 'nearby_confirmation_page_test.js'],
- ['Device', 'nearby_device_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

@@ -14,6 +14,7 @@ js_modulizer("modulize") {
     "fake_nearby_share_settings.js",
     "nearby_contact_visibility_test.js",
     "nearby_device_icon_test.js",
+    "nearby_device_test.js",
     "nearby_onboarding_page_test.js",
     "nearby_page_template_test.js",
     "nearby_visibility_page_test.js",
@@ -38,6 +39,7 @@ js_type_check("closure_compile") {
     ":fake_nearby_share_settings.m",
     ":nearby_contact_visibility_test.m",
     ":nearby_device_icon_test.m",
+    ":nearby_device_test.m",
     ":nearby_onboarding_page_test.m",
     ":nearby_page_template_test.m",
     ":nearby_visibility_page_test.m",
@@ -73,6 +75,16 @@ js_library("nearby_device_icon_test.m") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 
+js_library("nearby_device_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_device_test.m.js" ]
+  deps = [
+    "../..:chai_assert",
+    "//chrome/browser/resources/nearby_share/shared:nearby_device.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_test.js → chrome/test/data/webui/nearby_share/shared/nearby_device_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.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/mojo/nearby_share_target_types.mojom-lite.js';
+// #import 'chrome://nearby/mojo/nearby_share.mojom-lite.js';
+// #import 'chrome://nearby/shared/nearby_device.m.js';
+// #import {assertEquals} from '../../chai_assert.js';
+// clang-format on
 
 suite('DeviceTest', function() {
   /** @type {!NearbyDeviceElement} */

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

@@ -56,6 +56,24 @@ var NearbyDeviceIconTest = class extends NearbySharedBrowserTest {
 
 TEST_F('NearbyDeviceIconTest', 'All', () => mocha.run());
 
+/**
+ * @extends {NearbySharedBrowserTest}
+ */
+var NearbyDeviceTest = class extends NearbySharedBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return super.browsePreload + 'shared/nearby_device.html';
+  }
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      'nearby_device_test.js',
+    ]);
+  }
+};
+
+TEST_F('NearbyDeviceTest', 'All', () => mocha.run());
+
 /**
  * @extends {NearbySharedBrowserTest}
  */

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

@@ -40,6 +40,7 @@ const NearbySharedV3Test = class extends PolymerTest {
 };
 
 [['DeviceIcon', 'nearby_device_icon_test.m.js'],
+ ['Device', 'nearby_device_test.m.js'],
  ['OnboardingPage', 'nearby_onboarding_page_test.m.js'],
  ['PageTemplate', 'nearby_page_template_test.m.js'],
  ['VisibilityPage', 'nearby_visibility_page_test.m.js'],