Commit 4b68c376 authored by James Vecore's avatar James Vecore Committed by Chromium LUCI CQ

[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: default avatarKyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834609}
parent 09825450
......@@ -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) {
......
......@@ -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",
......
......@@ -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';
......
<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>
......@@ -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';
......
......@@ -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"
......
<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>
......@@ -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
......
......@@ -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>
......
......@@ -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",
......
......@@ -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" ]
......
<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>
......
......@@ -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",
......
......@@ -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",
......
......@@ -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'],
......
......@@ -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 = [
......
......@@ -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');
});
});
......@@ -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}
......
......@@ -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'],
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment