Skip to content

GitLab

T
tangled
Commit 483f7ae6 authored by James Vecore's avatar James Vecore Committed by Commit Bot
Browse files
Options

[Nearby] Switch discovery and confirmation to page template 

Converts disocvery and confirmation pages to use the page template for
consistent behaviour and reduced css. There should be no change in
behavior.

Change-Id: I8382befed448e6bb1b94e020717cb127950eeaee
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2423350
Commit-Queue: James Vecore <vecore@google.com>
Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#809614}
parent 57c8523c
Show whitespace changes
Inline Side-by-side
Showing with 113 additions and 137 deletions
chrome/browser/resources/nearby_share/nearby_confirmation_page.html
View file @ 483f7ae6
<style>
#actions {
margin-inline-start: auto;
margin-top: auto;
}
#add-contacts {
#addContacts {
margin-top: 32px;
}
#add-contacts-label {
#addContactsLabel {
color: rgb(32, 33, 36);
line-height: 138%;
}
#add-contacts-label-secondary {
#addContactsLabelSecondary {
color: rgb(95, 99, 104);
line-height: 138%;
}
#confirmation-token {
#confirmationToken {
border-top: 1px dashed rgba(151, 151, 151, 0.74);
color: rgba(0, 0, 0, 0.4);
flex-grow: 1;
......@@ -28,6 +23,7 @@
margin-top: 55px;
padding-top: 6px;
text-align: center;
width: 200px;
}
nearby-preview {
......@@ -40,7 +36,7 @@
width: 126px;
}
#page-content {
#centerContent {
box-sizing: border-box;
display: flex;
flex-direction: column;
......@@ -48,27 +44,21 @@
padding: 27px 32px 25px 37px;
}
#process-row {
#processRow {
display: flex;
margin-top: 48px;
}
#title {
color: rgb(32, 33, 36);
font-size: 123%;
font-weight: normal;
letter-spacing: 0.27px;
line-height: 150%;
margin: 0;
}
</style>
<div id="page-content">
<h1 id="title">[[i18n('nearbyShareConfirmationPageTitle')]]</h1>
<div id="process-row">
<nearby-page-template title="$i18n{nearbyShareConfirmationPageTitle}"
action-button-label="[[getActionButtonLabel_(needsConfirmation_)]]"
action-button-event-name="accept"
cancel-button-label="[[getCancelButtonLabel_(needsConfirmation_)]]"
cancel-button-event-name="[[getCancelEventName_(needsConfirmation_)]]">
<div id="centerContent" slot="content">
<div id="processRow">
<nearby-preview title="[[attachmentTitle_()]]"></nearby-preview>
<div id="confirmation-token">
<div id="confirmationToken">
<template is="dom-if" if="[[confirmationToken_]]">
[[i18n('nearbyShareSecureConnectionId', confirmationToken_)]]
</template>
......@@ -77,32 +67,14 @@
</div>
<template is="dom-if" if="[[contactName_(shareTarget)]]">
<cr-checkbox id="add-contacts">
<div id="add-contacts-label">
<cr-checkbox id="addContacts">
<div id="addContactsLabel">
[[contactName_(shareTarget)]]
</div>
<div id="add-contacts-label-secondary">
<div id="addContactsLabelSecondary">
[[i18n('nearbyShareConfirmationPageAddContactSubtitle')]]
</div>
</cr-checkbox>
</template>
<div id="actions">
<template is="dom-if" if="[[needsConfirmation_]]">
<cr-button id="reject-button" class="cancel-button"
on-click="onRejectTap_">
[[i18n('nearbyShareActionsReject')]]
</cr-button>
<cr-button id="accept-button" class="action-button"
on-click="onAcceptTap_">
[[i18n('nearbyShareActionsConfirm')]]
</cr-button>
</template>
<template is="dom-if" if="[[!needsConfirmation_]]">
<cr-button id="cancel-button" class="action-button"
on-click="onCancelTap_">
[[i18n('nearbyShareActionsCancel')]]
</cr-button>
</template>
</div>
</div>
</nearby-page-template>
chrome/browser/resources/nearby_share/nearby_confirmation_page.js
View file @ 483f7ae6
......@@ -16,6 +16,7 @@ import './nearby_preview.js';
import './nearby_progress.js';
import './nearby_share_target_types.mojom-lite.js';
import './nearby_share.mojom-lite.js';
import './shared/nearby_page_template.m.js';
import './strings.m.js';
import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
......@@ -100,7 +101,8 @@ Polymer({
},
/**
* Whether the user needs to confirm this transfer on the local device.
* Whether the user needs to confirm this transfer on the local device. This
* affects which buttons are displayed to the user.
* @private
* */
needsConfirmation_: {
......@@ -109,6 +111,12 @@ Polymer({
},
},
listeners: {
'accept': 'onAccept_',
'reject': 'onReject_',
'cancel': 'onCancel_',
},
/** @private {?TransferUpdateListener} */
transferUpdateListener_: null,
......@@ -162,7 +170,7 @@ Polymer({
},
/** @private */
onAcceptTap_() {
onAccept_() {
this.confirmationManager.accept().then(
result => {
// TODO(crbug.com/1123934): Show error if !result.success
......@@ -170,19 +178,46 @@ Polymer({
},
/** @private */
onRejectTap_() {
onReject_() {
this.confirmationManager.reject().then(result => {
this.fire('close');
});
},
/** @private */
onCancelTap_() {
onCancel_() {
this.confirmationManager.cancel().then(result => {
this.fire('close');
});
},
/**
* @param {boolean} needsConfirmation
* @return {?string} Localized string or null if the button should be hidden.
*/
getActionButtonLabel_(needsConfirmation) {
return needsConfirmation ? this.i18n('nearbyShareActionsConfirm') : null;
},
/**
* @param {boolean} needsConfirmation
* @return {string} Localized string to show on the cancel button.
* @private
*/
getCancelButtonLabel_(needsConfirmation) {
return needsConfirmation ? this.i18n('nearbyShareActionsReject') :
this.i18n('nearbyShareActionsCancel');
},
/**
* @param {boolean} needsConfirmation
* @return {string} The event name fire when the cancel button is clicked.
* @private
*/
getCancelEventName_(needsConfirmation) {
return needsConfirmation ? 'reject' : 'cancel';
},
/**
* @return {!string} The title of the attachment to be shared.
* @private
......
chrome/browser/resources/nearby_share/nearby_discovery_page.html
View file @ 483f7ae6
......@@ -5,15 +5,7 @@
--nearby-page-space-large-inline: 42px;
}
#actions {
margin-block-end: var(--nearby-page-space-block);
margin-block-start: 17px;
margin-inline-end: var(--nearby-page-space-inline);
margin-inline-start: var(--nearby-page-space-inline);
text-align: end;
}
#center-content {
#centerContent {
background: radial-gradient(160% 50% at 0 100%, rgba(138, 180, 248, 0.25),
rgba(255, 255, 255, 0));
box-sizing: border-box;
......@@ -45,12 +37,6 @@
margin-inline-start: var(--nearby-page-space-inline);
}
#page-content {
display: flex;
flex-direction: column;
height: 100%;
}
#process-row {
display: flex;
flex-grow: 1;
......@@ -58,37 +44,16 @@
margin-block-start: 48px;
overflow: hidden;
}
#subtitle {
color: rgb(32, 33, 36);
font-size: 100%;
font-weight: normal;
line-height: 154%;
margin-block-end: 0;
margin-block-start: 0;
margin-inline-end: var(--nearby-page-space-inline);
margin-inline-start: var(--nearby-page-space-inline);
}
#title {
color: rgb(32, 33, 36);
font-size: 123%;
font-weight: normal;
letter-spacing: 0.27px;
line-height: 150%;
margin-block-end: 0;
margin-block-start: var(--nearby-page-space-block);
margin-inline-end: var(--nearby-page-space-inline);
margin-inline-start: var(--nearby-page-space-inline);
}
</style>
<div id="page-content">
<h1 id="title">[[i18n('nearbyShareDiscoveryPageTitle')]]</h1>
<h2 id="subtitle">[[i18n('nearbyShareDiscoveryPageSubtitle')]]</h2>
<div id="center-content">
<nearby-page-template title="$i18n{nearbyShareDiscoveryPageTitle}"
sub-title="$i18n{nearbyShareDiscoveryPageSubtitle}"
action-button-label="$i18n{nearbyShareActionsNext}"
action-button-event-name="next"
action-disabled="[[!selectedShareTarget]]"
cancel-button-label="$i18n{nearbyShareActionsCancel}"
cancel-button-event-name="close">
<div id="centerContent" slot="content">
<div id="process-row">
<nearby-preview title="[[attachmentsDescription]]"></nearby-preview>
<iron-list items="[[shareTargets_]]" id="deviceList"
......@@ -104,18 +69,6 @@
</template>
</iron-list>
</div>
<div id="help">[[i18n('nearbyShareDiscoveryPageInfo')]]</div>
</div>
<div id="actions">
<cr-button class="cancel-button" on-click="onCancelTap_">
[[i18n('nearbyShareActionsCancel')]]
</cr-button>
<cr-button id="next-button" class="action-button" on-click="onNextTap_"
disabled="[[!selectedShareTarget]]">
[[i18n('nearbyShareActionsNext')]]
</cr-button>
</div>
</div>
</nearby-page-template>
chrome/browser/resources/nearby_share/nearby_discovery_page.js
View file @ 483f7ae6
......@@ -15,6 +15,7 @@ import './nearby_device.js';
import './nearby_preview.js';
import './nearby_share_target_types.mojom-lite.js';
import './nearby_share.mojom-lite.js';
import './shared/nearby_page_template.m.js';
import './strings.m.js';
import {assert} from 'chrome://resources/js/assert.m.js';
......@@ -99,6 +100,7 @@ Polymer({
},
listeners: {
'next': 'onNext_',
'view-enter-start': 'onViewEnterStart_',
'view-exit-finish': 'onViewExitFinish_',
},
......@@ -242,7 +244,7 @@ Polymer({
},
/** @private */
onNextTap_() {
onNext_() {
if (!this.selectedShareTarget) {
return;
}
......@@ -283,7 +285,7 @@ Polymer({
},
/**
* Updates the selected share tagrget to |shareTarget| if its id matches |id|.
* Updates the selected share target to |shareTarget| if its id matches |id|.
* @param {!mojoBase.mojom.UnguessableToken} id
* @param {?nearbyShare.mojom.ShareTarget} shareTarget
* @private
......@@ -295,9 +297,4 @@ Polymer({
this.selectedShareTarget = shareTarget;
}
},
/** @private */
onCancelTap_() {
this.fire('close');
},
});
chrome/browser/resources/nearby_share/shared/nearby_page_template.html
View file @ 483f7ae6
......@@ -74,7 +74,7 @@
</template>
<template is="dom-if" if="[[actionButtonLabel]]">
<cr-button id="actionButton" class="action-button"
on-click="onActionClick_">
on-click="onActionClick_" disabled="[[actionDisabled]]">
[[actionButtonLabel]]
</cr-button>
</template>
......
chrome/browser/resources/nearby_share/shared/nearby_page_template.js
View file @ 483f7ae6
......@@ -32,6 +32,11 @@ Polymer({
value: 'action'
},
actionDisabled: {
type: Boolean,
value: false,
},
/** @type {?string} */
cancelButtonLabel: {
type: String,
......
chrome/test/data/webui/nearby_share/nearby_confirmation_page_test.js
View file @ 483f7ae6
......@@ -20,6 +20,13 @@ suite('ConfirmatonPageTest', function() {
/** @type {!FakeTransferUpdateListenerPendingReceiver} */
let transferUpdateListener;
/**
* @param {string} button button selector (i.e. #actionButton)
*/
function getButton(button) {
return confirmationPageElement.$$('nearby-page-template').$$(button);
}
setup(function() {
confirmationManager = new FakeConfirmationManagerRemote();
transferUpdateListener = new FakeTransferUpdateListenerPendingReceiver();
......@@ -44,7 +51,7 @@ suite('ConfirmatonPageTest', function() {
/*token=*/ null);
await transferUpdateListener.remote_.$.flushForTesting();
confirmationPageElement.$$('#accept-button').click();
getButton('#actionButton').click();
await confirmationManager.whenCalled('accept');
});
......@@ -54,7 +61,7 @@ suite('ConfirmatonPageTest', function() {
/*token=*/ null);
await transferUpdateListener.remote_.$.flushForTesting();
confirmationPageElement.$$('#reject-button').click();
getButton('#cancelButton').click();
await confirmationManager.whenCalled('reject');
});
......@@ -64,7 +71,7 @@ suite('ConfirmatonPageTest', function() {
/*token=*/ null);
await transferUpdateListener.remote_.$.flushForTesting();
confirmationPageElement.$$('#cancel-button').click();
getButton('#cancelButton').click();
await confirmationManager.whenCalled('cancel');
});
......@@ -75,7 +82,7 @@ suite('ConfirmatonPageTest', function() {
await transferUpdateListener.remote_.$.flushForTesting();
const renderedToken =
confirmationPageElement.$$('#confirmation-token').textContent;
confirmationPageElement.$$('#confirmationToken').textContent;
assertTrue(renderedToken.includes(token));
});
......
chrome/test/data/webui/nearby_share/nearby_discovery_page_test.js
View file @ 483f7ae6
......@@ -91,6 +91,13 @@ suite('DiscoveryPageTest', function() {
};
}
/**
* @param {string} button button selector (i.e. #actionButton)
*/
function getButton(button) {
return discoveryPageElement.$$('nearby-page-template').$$(button);
}
/**
* Starts discovery and returns the ShareTargetListenerRemote.
* @return {!Promise<nearbyShare.mojom.ShareTargetListenerRemote>}
......@@ -136,7 +143,7 @@ suite('DiscoveryPageTest', function() {
test('selects share target with success', async function() {
const created = await setupShareTarget();
discoveryPageElement.selectedShareTarget = created;
discoveryPageElement.$$('#next-button').click();
getButton('#actionButton').click();
const selectedId = await discoveryManager.whenCalled('selectShareTarget');
assertTokensEqual(created.id, selectedId);
});
......@@ -146,7 +153,7 @@ suite('DiscoveryPageTest', function() {
discoveryManager.selectShareTargetResult.result =
nearbyShare.mojom.SelectShareTargetResult.kError;
discoveryPageElement.$$('#next-button').click();
getButton('#actionButton').click();
await discoveryManager.whenCalled('selectShareTarget');
});
......@@ -161,7 +168,7 @@ suite('DiscoveryPageTest', function() {
eventDetail = event.detail;
});
discoveryPageElement.$$('#next-button').click();
getButton('#actionButton').click();
await discoveryManager.whenCalled('selectShareTarget');
assertEquals('confirmation', eventDetail.page);
......@@ -274,7 +281,7 @@ suite('DiscoveryPageTest', function() {
await listener.$.flushForTesting();
assertTrue(clickOnDevice(1));
assertFalse(discoveryPageElement.$$('#next-button').disabled);
assertFalse(getButton('#actionButton').disabled);
// Loose the second device.
listener.onShareTargetLost(targets[1]);
......@@ -283,7 +290,7 @@ suite('DiscoveryPageTest', function() {
// Loosing the selected device should clear the selected device and disable
// the next button.
assertEquals(null, discoveryPageElement.selectedShareTarget);
assertTrue(discoveryPageElement.$$('#next-button').disabled);
assertTrue(getButton('#actionButton').disabled);
});
});
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