Skip to content

Commit

Permalink
[Nearby] Add scrollable list of discovered devices.
Browse files Browse the repository at this point in the history
This is the bare bones version without icons or selected state.

Screenshot: https://screenshot.googleplex.com/Fxqbguwth60.png

Bug: 1103190
Change-Id: I394b281e1bbf59a9c0bc67b2715f480dc0a9229e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2300110
Commit-Queue: Michael van Ouwerkerk <mvanouwerkerk@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Richard Knoll <knollr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#788964}
  • Loading branch information
mvano authored and Commit Bot committed Jul 16, 2020
1 parent 9dc85a0 commit 95cb8cf
Show file tree
Hide file tree
Showing 9 changed files with 127 additions and 0 deletions.
9 changes: 9 additions & 0 deletions chrome/browser/resources/nearby_share/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ js_type_check("closure_compile") {
deps = [
":app",
":nearby_confirmation_page",
":nearby_device",
":nearby_discovery_page",
":nearby_preview",
":nearby_progress",
Expand All @@ -36,8 +37,15 @@ js_library("nearby_confirmation_page") {
]
}

js_library("nearby_device") {
deps = [
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
}

js_library("nearby_discovery_page") {
deps = [
":nearby_device",
":nearby_preview",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/cr_elements/cr_button:cr_button.m",
Expand All @@ -62,6 +70,7 @@ 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",
Expand Down
25 changes: 25 additions & 0 deletions chrome/browser/resources/nearby_share/nearby_device.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<style>
:host {
align-items: center;
border: 1px solid rgba(216, 216, 216, 0.76);
border-radius: 8px;
box-sizing: border-box;
display: flex;
height: 40px;
margin-top: 6px;
}

#name {
color: rgb(95, 99, 104);
flex-grow: 1;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.3px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

<div id="name">[[name]]</div>
23 changes: 23 additions & 0 deletions chrome/browser/resources/nearby_share/nearby_device.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
// 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' component shows details of a remote device.
*/

import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

Polymer({
is: 'nearby-device',

_template: html`{__html_template__}`,

properties: {
/** The device name to show. */
name: {
type: String,
value: '',
},
},
});
22 changes: 22 additions & 0 deletions chrome/browser/resources/nearby_share/nearby_discovery_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
text-align: end;
}

#device-list {
overflow: auto;
width: 191px;
}

nearby-preview {
margin-inline-end: 10px;
margin-inline-start: 10px;
Expand All @@ -27,7 +32,9 @@
#process-row {
display: flex;
flex-grow: 1;
justify-content: space-between;
margin-top: 48px;
overflow: hidden;
}

#subtitle {
Expand All @@ -54,6 +61,21 @@ <h2 id="subtitle">Select people you would like to share with</h2>

<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 Name Is Looong"></nearby-device>
<nearby-device name="MirasChromebookIsAllInOneWord"></nearby-device>
<nearby-device name="One"></nearby-device>
<nearby-device name="Two"></nearby-device>
<nearby-device name="Three"></nearby-device>
<nearby-device name="Four"></nearby-device>
<nearby-device name="Five"></nearby-device>
<nearby-device name="Six"></nearby-device>
<nearby-device name="Seven"></nearby-device>
<nearby-device name="Eight"></nearby-device>
<nearby-device name="Nine"></nearby-device>
<nearby-device name="Ten"></nearby-device>
</div>
</div>

<div id="help">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
import './nearby_device.js';
import './nearby_preview.js';

import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@
<include name="IDR_NEARBY_SHARE_NEARBY_CONFIRMATION_PAGE_JS"
file="${root_gen_dir}/chrome/browser/resources/nearby_share/nearby_confirmation_page.js"
use_base_dir="false" type="BINDATA"/>
<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_DISCOVERY_PAGE_JS"
file="${root_gen_dir}/chrome/browser/resources/nearby_share/nearby_discovery_page.js"
use_base_dir="false" type="BINDATA"/>
Expand Down
6 changes: 6 additions & 0 deletions chrome/test/data/webui/nearby_share/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,17 @@ js_type_check("closure_compile") {
]
deps = [
":nearby_confirmation_page_test",
":nearby_device_test",
":nearby_preview_test",
":nearby_progress_test",
]
}

js_library("nearby_device_test") {
deps = [ "//chrome/browser/resources/nearby_share:nearby_device" ]
externs_list = [ "$externs_path/mocha-2.5.js" ]
}

js_library("nearby_confirmation_page_test") {
deps = [ "//chrome/browser/resources/nearby_share:nearby_confirmation_page" ]
externs_list = [ "$externs_path/mocha-2.5.js" ]
Expand Down
1 change: 1 addition & 0 deletions chrome/test/data/webui/nearby_share/nearby_browsertest.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const NearbyBrowserTest = class extends PolymerTest {
};

[['ConfirmationPage', 'nearby_confirmation_page_test.js'],
['Device', 'nearby_device_test.js'],
['Preview', 'nearby_preview_test.js'],
['Progress', 'nearby_progress_test.js'],
].forEach(test => registerTest(...test));
Expand Down
37 changes: 37 additions & 0 deletions chrome/test/data/webui/nearby_share/nearby_device_test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// 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_device.js';

import {assertEquals} from '../chai_assert.js';

suite('DeviceTest', function() {
/** @type {!NearbyDeviceElement} */
let deviceElement;

setup(function() {
deviceElement = /** @type {!NearbyDeviceElement} */ (
document.createElement('nearby-device'));
document.body.appendChild(deviceElement);
});

teardown(function() {
deviceElement.remove();
});

test('renders component', function() {
assertEquals('NEARBY-DEVICE', deviceElement.tagName);
});

test('renders name', function() {
const name = 'Name';
deviceElement.setAttribute('name', name);

const renderedName = deviceElement.$$('#name').textContent;
assertEquals(name, renderedName);
});
});

0 comments on commit 95cb8cf

Please sign in to comment.