Skip to content

GitLab

T
tangled
Commit 003a037b authored by stevenjb's avatar stevenjb Committed by Commit bot
Browse files
Options

MD Settings: Bluetooth polish 

Some extra bluettoth polish:
* Fixed height for the bluetooth dialog
* Correctly center dialog contents
* Blue spinners for all chrome WebUI
* Focus dialog inputs

BUG=602538
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2218713002
Cr-Commit-Position: refs/heads/master@{#412604}
parent 820e8882
Hide whitespace changes
Inline Side-by-side
Showing with 144 additions and 122 deletions
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.html
View file @ 003a037b
...@@ -40,6 +40,11 @@ ...@@ -40,6 +40,11 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
div.contents {
max-height: 250px;
min-height: 250px;
}
/* .display indicates a displayed pin code or passkey. */ /* .display indicates a displayed pin code or passkey. */
span.display { span.display {
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -79,59 +84,64 @@ ...@@ -79,59 +84,64 @@
<dialog is="cr-dialog" id="dialog" on-cancel="onDialogCanceled_"> <dialog is="cr-dialog" id="dialog" on-cancel="onDialogCanceled_">
<div class="title">[[getTitle_(dialogId)]]</div> <div class="title">[[getTitle_(dialogId)]]</div>
<div class="body"> <div class="body">
<template is="dom-if" if="[[isDialogType_(dialogId, 'addDevice')]]"> <div class="contents layout vertical center center-justified">
<div id="dialogDeviceList" class="layout vertical" <template is="dom-if" if="[[isDialogType_(dialogId, 'addDevice')]]">
on-device-event="onDeviceEvent_"> <div id="dialogDeviceList"
<span class="no-devices" hidden$="[[haveDevices_(deviceList)]]"> class="layout vertical flex start self-stretch"
$i18n{bluetoothNoDevices} on-device-event="onDeviceEvent_">
</span> <span class="no-devices" hidden$="[[haveDevices_(deviceList)]]">
<iron-selector class="flex"> $i18n{bluetoothNoDevices}
<template is="dom-repeat" items="[[deviceList]]" </span>
filter="deviceNotPaired_" observe="paired"> <iron-selector class="flex">
<bluetooth-device-list-item device="[[item]]"> <template is="dom-repeat" items="[[deviceList]]"
</bluetooth-device-list-item> filter="deviceNotPaired_" observe="paired">
</template> <bluetooth-device-list-item device="[[item]]">
</iron-selector> </bluetooth-device-list-item>
</div> </template>
</template> </iron-selector>
<template is="dom-if" if="[[isDialogType_(dialogId, 'pairDevice')]]">
<div id="pairing" class="settings-box first layout vertical center
center-justified">
<div class="dialog-message">
[[getMessage_(pairingDevice, pairingEvent)]]
</div>
<div hidden$="[[!showEnterPincode_(pairingEvent)]]">
<paper-input id="pincode" minlength="1" maxlength="16"
type="text" auto-validate value="{{pinOrPass}}">
</paper-input>
</div>
<div hidden$="[[!showEnterPasskey_(pairingEvent)]]">
<paper-input id="passkey" minlength="6" maxlength="6" type="text"
auto-validate value="{{pinOrPass}}"></paper-input>
</div> </div>
<div id="pinDiv" class="layout horizontal center center-justified" </template>
hidden="[[!showDisplayPassOrPin_(pairingEvent)]]"> <template is="dom-if" if="[[isDialogType_(dialogId, 'pairDevice')]]">
<template is="dom-repeat" items="[[digits]]"> <div id="pairing" class="settings-box first layout vertical center
<span class$="[[getPinClass_(pairingEvent, index)]]"> center-justified">
[[getPinDigit_(pairingEvent, index)]] <div class="dialog-message">
[[getMessage_(pairingDevice, pairingEvent)]]
</div>
<div hidden$="[[!showEnterPincode_(pairingEvent)]]">
<paper-input id="pincode" minlength="1" maxlength="16"
type="text" auto-validate value="{{pinOrPass}}">
</paper-input>
</div>
<div hidden$="[[!showEnterPasskey_(pairingEvent)]]">
<paper-input id="passkey" minlength="6" maxlength="6"
type="text" auto-validate value="{{pinOrPass}}">
</paper-input>
</div>
<div id="pinDiv" class="layout horizontal center center-justified"
hidden="[[!showDisplayPassOrPin_(pairingEvent)]]">
<template is="dom-repeat" items="[[digits]]">
<span class$="[[getPinClass_(index, pairingEvent)]]">
[[getPinDigit_(index, pairingEvent)]]
</span>
</template>
<span class$="[[getPinClass_(-1, pairingEvent)]]"
hidden="[[showAcceptReject_(pairingEvent)]]">
$i18n{bluetoothEnterKey}
</span> </span>
</template> </div>
<span class$="[[getPinClass_(pairingEvent, -1)]]"
hidden="[[showAcceptReject_(pairingEvent)]]">
$i18n{bluetoothEnterKey}
</span>
</div> </div>
</div> </template>
</template> <template is="dom-if"
<template is="dom-if" if="[[isDialogType_(dialogId, 'connectError')]]"> if="[[isDialogType_('connectError', dialogId)]]">
<div class="settings-box first layout vertical center <div class="settings-box first layout vertical center
center-justified"> center-justified">
<div class="dialog-message">[[errorMessage]]</div> <div class="dialog-message">[[errorMessage]]</div>
</div> </div>
</template> </template>
</div>
</div> </div>
<div class="button-container"> <div class="button-container">
<template is="dom-if" if="[[isDialogType_(dialogId, 'addDevice')]]"> <template is="dom-if" if="[[isDialogType_('addDevice', dialogId)]]">
<div id="scanning" class="layout horizontal center flex" <div id="scanning" class="layout horizontal center flex"
hidden$="[[!adapterState.discovering]]"> hidden$="[[!adapterState.discovering]]">
<paper-spinner active="[[adapterState.discovering]]"> <paper-spinner active="[[adapterState.discovering]]">
...@@ -142,7 +152,7 @@ ...@@ -142,7 +152,7 @@
$i18n{cancel} $i18n{cancel}
</paper-button> </paper-button>
</template> </template>
<template is="dom-if" if="[[isDialogType_(dialogId, 'pairDevice')]]"> <template is="dom-if" if="[[isDialogType_('pairDevice', dialogId)]]">
<paper-button hidden$="[[!showAcceptReject_(pairingEvent)]]" <paper-button hidden$="[[!showAcceptReject_(pairingEvent)]]"
on-tap="onAcceptTap_">$i18n{bluetoothAccept}</paper-button> on-tap="onAcceptTap_">$i18n{bluetoothAccept}</paper-button>
<paper-button hidden$="[[!showAcceptReject_(pairingEvent)]]" <paper-button hidden$="[[!showAcceptReject_(pairingEvent)]]"
...@@ -157,7 +167,7 @@ ...@@ -157,7 +167,7 @@
$i18n{cancel} $i18n{cancel}
</paper-button> </paper-button>
</template> </template>
<template is="dom-if" if="[[isDialogType_(dialogId, 'connectError')]]"> <template is="dom-if" if="[[isDialogType_('connectError', dialogId)]]">
<paper-button on-tap="close">$i18n{bluetoothDismiss} <paper-button on-tap="close">$i18n{bluetoothDismiss}
</paper-button> </paper-button>
</template> </template>
......
chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.js
View file @ 003a037b
...@@ -29,7 +29,9 @@ settings.BluetoothAddDeviceBehavior = { ...@@ -29,7 +29,9 @@ settings.BluetoothAddDeviceBehavior = {
*/ */
deviceList: { deviceList: {
type: Array, type: Array,
value: /** @return {Array} */ function() { return []; }, value: /** @return {Array} */ function() {
return [];
},
}, },
}, },
...@@ -44,15 +46,18 @@ settings.BluetoothAddDeviceBehavior = { ...@@ -44,15 +46,18 @@ settings.BluetoothAddDeviceBehavior = {
* @return {boolean} * @return {boolean}
* @private * @private
*/ */
deviceNotPaired_: function(device) { return !device.paired; }, deviceNotPaired_: function(device) {
return !device.paired;
},
/** /**
* @param {!Array<!chrome.bluetooth.Device>} deviceList
* @return {boolean} True if deviceList contains any unpaired devices. * @return {boolean} True if deviceList contains any unpaired devices.
* @private * @private
*/ */
haveDevices_: function(deviceList) { haveDevices_: function(deviceList) {
return this.deviceList.findIndex(function(d) { return !d.paired; }) != -1; return this.deviceList.findIndex(function(d) {
return !d.paired;
}) != -1;
}, },
/** /**
...@@ -98,14 +103,10 @@ settings.BluetoothPairDeviceBehavior = { ...@@ -98,14 +103,10 @@ settings.BluetoothPairDeviceBehavior = {
'pairingChanged_(pairingDevice, pairingEvent)', 'pairingChanged_(pairingDevice, pairingEvent)',
], ],
/** /** @private */
* @param {?chrome.bluetooth.Device} pairingDevice pairingChanged_: function() {
* @param {?chrome.bluetoothPrivate.PairingEvent} pairingEvent
* @private
*/
pairingChanged_: function(pairingDevice, pairingEvent) {
// Auto-close the dialog when pairing completes. // Auto-close the dialog when pairing completes.
if (pairingDevice && pairingDevice.connected) { if (this.pairingDevice && this.pairingDevice.connected) {
this.close(); this.close();
return; return;
} }
...@@ -113,51 +114,46 @@ settings.BluetoothPairDeviceBehavior = { ...@@ -113,51 +114,46 @@ settings.BluetoothPairDeviceBehavior = {
}, },
/** /**
* @param {?chrome.bluetooth.Device} device
* @param {?chrome.bluetoothPrivate.PairingEvent} pairingEvent
* @return {string} * @return {string}
* @private * @private
*/ */
getMessage_: function(device, pairingEvent) { getMessage_: function() {
if (!device) if (!this.pairingDevice)
return ''; return '';
var message; var message;
if (!pairingEvent) if (!this.pairingEvent)
message = 'bluetoothStartConnecting'; message = 'bluetoothStartConnecting';
else else
message = this.getEventDesc_(pairingEvent.pairing); message = this.getEventDesc_(this.pairingEvent.pairing);
return this.i18n(message, device.name); return this.i18n(message, this.pairingDevice.name);
}, },
/** /**
* @param {?chrome.bluetoothPrivate.PairingEvent} pairingEvent
* @return {boolean} * @return {boolean}
* @private * @private
*/ */
showEnterPincode_: function(pairingEvent) { showEnterPincode_: function() {
return !!pairingEvent && return !!this.pairingEvent &&
pairingEvent.pairing == PairingEventType.REQUEST_PINCODE; this.pairingEvent.pairing == PairingEventType.REQUEST_PINCODE;
}, },
/** /**
* @param {?chrome.bluetoothPrivate.PairingEvent} pairingEvent
* @return {boolean} * @return {boolean}
* @private * @private
*/ */
showEnterPasskey_: function(pairingEvent) { showEnterPasskey_: function() {
return !!pairingEvent && return !!this.pairingEvent &&
pairingEvent.pairing == PairingEventType.REQUEST_PASSKEY; this.pairingEvent.pairing == PairingEventType.REQUEST_PASSKEY;
}, },
/** /**
* @param {?chrome.bluetoothPrivate.PairingEvent} pairingEvent
* @return {boolean} * @return {boolean}
* @private * @private
*/ */
showDisplayPassOrPin_: function(pairingEvent) { showDisplayPassOrPin_: function() {
if (!pairingEvent) if (!this.pairingEvent)
return false; return false;
var pairing = pairingEvent.pairing; var pairing = this.pairingEvent.pairing;
return ( return (
pairing == PairingEventType.DISPLAY_PINCODE || pairing == PairingEventType.DISPLAY_PINCODE ||
pairing == PairingEventType.DISPLAY_PASSKEY || pairing == PairingEventType.DISPLAY_PASSKEY ||
...@@ -166,36 +162,32 @@ settings.BluetoothPairDeviceBehavior = { ...@@ -166,36 +162,32 @@ settings.BluetoothPairDeviceBehavior = {
}, },
/** /**
* @param {?chrome.bluetoothPrivate.PairingEvent} pairingEvent
* @return {boolean} * @return {boolean}
* @private * @private
*/ */
showAcceptReject_: function(pairingEvent) { showAcceptReject_: function() {
return !!pairingEvent && return !!this.pairingEvent &&
pairingEvent.pairing == PairingEventType.CONFIRM_PASSKEY; this.pairingEvent.pairing == PairingEventType.CONFIRM_PASSKEY;
}, },
/** /**
* @param {?chrome.bluetoothPrivate.PairingEvent} pairingEvent
* @return {boolean} * @return {boolean}
* @private * @private
*/ */
showConnect_: function(pairingEvent) { showConnect_: function() {
if (!pairingEvent) if (!this.pairingEvent)
return false; return false;
var pairing = pairingEvent.pairing; var pairing = this.pairingEvent.pairing;
return pairing == PairingEventType.REQUEST_PINCODE || return pairing == PairingEventType.REQUEST_PINCODE ||
pairing == PairingEventType.REQUEST_PASSKEY; pairing == PairingEventType.REQUEST_PASSKEY;
}, },
/** /**
* @param {?chrome.bluetoothPrivate.PairingEvent} pairingEvent
* @param {string} pinOrPass Unused; call is triggered when this changes.
* @return {boolean} * @return {boolean}
* @private * @private
*/ */
enableConnect_: function(pairingEvent, pinOrPass) { enableConnect_: function() {
if (!this.showConnect_(this.pairingEvent)) if (!this.showConnect_())
return false; return false;
var inputId = var inputId =
(this.pairingEvent.pairing == PairingEventType.REQUEST_PINCODE) ? (this.pairingEvent.pairing == PairingEventType.REQUEST_PINCODE) ?
...@@ -208,14 +200,13 @@ settings.BluetoothPairDeviceBehavior = { ...@@ -208,14 +200,13 @@ settings.BluetoothPairDeviceBehavior = {
}, },
/** /**
* @param {?chrome.bluetooth.Device} device
* @param {?chrome.bluetoothPrivate.PairingEvent} pairingEvent
* @return {boolean} * @return {boolean}
* @private * @private
*/ */
showDismiss_: function(device, pairingEvent) { showDismiss_: function() {
return (!!device && device.paired) || return (!!this.paringDevice && this.pairingDevice.paired) ||
(!!pairingEvent && pairingEvent.pairing == PairingEventType.COMPLETE); (!!this.pairingEvent &&
this.pairingEvent.pairing == PairingEventType.COMPLETE);
}, },
/** @private */ /** @private */
...@@ -233,7 +224,10 @@ settings.BluetoothPairDeviceBehavior = { ...@@ -233,7 +224,10 @@ settings.BluetoothPairDeviceBehavior = {
this.sendResponse_(chrome.bluetoothPrivate.PairingResponse.REJECT); this.sendResponse_(chrome.bluetoothPrivate.PairingResponse.REJECT);
}, },
/** @private */ /**
* @param {!chrome.bluetoothPrivate.PairingResponse} response
* @private
*/
sendResponse_: function(response) { sendResponse_: function(response) {
if (!this.pairingDevice) if (!this.pairingDevice)
return; return;
...@@ -268,24 +262,24 @@ settings.BluetoothPairDeviceBehavior = { ...@@ -268,24 +262,24 @@ settings.BluetoothPairDeviceBehavior = {
}, },
/** /**
* @param {?chrome.bluetoothPrivate.PairingEvent} pairingEvent
* @param {number} index * @param {number} index
* @return {string} * @return {string}
* @private * @private
*/ */
getPinDigit_: function(pairingEvent, index) { getPinDigit_: function(index) {
if (!pairingEvent) if (!this.pairingEvent)
return ''; return '';
var digit = '0'; var digit = '0';
var pairing = pairingEvent.pairing; var pairing = this.pairingEvent.pairing;
if (pairing == PairingEventType.DISPLAY_PINCODE && pairingEvent.pincode && if (pairing == PairingEventType.DISPLAY_PINCODE &&
index < pairingEvent.pincode.length) { this.pairingEvent.pincode && index < this.pairingEvent.pincode.length) {
digit = pairingEvent.pincode[index]; digit = this.pairingEvent.pincode[index];
} else if ( } else if (
pairingEvent.passkey && (pairing == PairingEventType.DISPLAY_PASSKEY || this.pairingEvent.passkey &&
pairing == PairingEventType.KEYS_ENTERED || (pairing == PairingEventType.DISPLAY_PASSKEY ||
pairing == PairingEventType.CONFIRM_PASSKEY)) { pairing == PairingEventType.KEYS_ENTERED ||
var passkeyString = String(pairingEvent.passkey); pairing == PairingEventType.CONFIRM_PASSKEY)) {
var passkeyString = String(this.pairingEvent.passkey);
if (index < passkeyString.length) if (index < passkeyString.length)
digit = passkeyString[index]; digit = passkeyString[index];
} }
...@@ -293,27 +287,26 @@ settings.BluetoothPairDeviceBehavior = { ...@@ -293,27 +287,26 @@ settings.BluetoothPairDeviceBehavior = {
}, },
/** /**
* @param {?chrome.bluetoothPrivate.PairingEvent} pairingEvent
* @param {number} index * @param {number} index
* @return {string} * @return {string}
* @private * @private
*/ */
getPinClass_: function(pairingEvent, index) { getPinClass_: function(index) {
if (!pairingEvent) if (!this.pairingEvent)
return ''; return '';
if (pairingEvent.pairing == PairingEventType.CONFIRM_PASSKEY) if (this.pairingEvent.pairing == PairingEventType.CONFIRM_PASSKEY)
return 'confirm'; return 'confirm';
var cssClass = 'display'; var cssClass = 'display';
if (pairingEvent.pairing == PairingEventType.DISPLAY_PASSKEY) { if (this.pairingEvent.pairing == PairingEventType.DISPLAY_PASSKEY) {
if (index == 0) if (index == 0)
cssClass += ' next'; cssClass += ' next';
else else
cssClass += ' untyped'; cssClass += ' untyped';
} else if ( } else if (
pairingEvent.pairing == PairingEventType.KEYS_ENTERED && this.pairingEvent.pairing == PairingEventType.KEYS_ENTERED &&
pairingEvent.enteredKey) { this.pairingEvent.enteredKey) {
var enteredKey = pairingEvent.enteredKey; // 1-7 var enteredKey = this.pairingEvent.enteredKey; // 1-7
var lastKey = this.digits.length; // 6 var lastKey = this.digits.length; // 6
if ((index == -1 && enteredKey > lastKey) || (index + 1 == enteredKey)) if ((index == -1 && enteredKey > lastKey) || (index + 1 == enteredKey))
cssClass += ' next'; cssClass += ' next';
else if (index > enteredKey) else if (index > enteredKey)
...@@ -337,6 +330,10 @@ Polymer({ ...@@ -337,6 +330,10 @@ Polymer({
dialogId: String, dialogId: String,
}, },
observers: [
'dialogUpdated_(dialogId, pairingEvent)',
],
open: function() { open: function() {
this.pinOrPass = ''; this.pinOrPass = '';
this.getDialog_().showModal(); this.getDialog_().showModal();
...@@ -348,6 +345,14 @@ Polymer({ ...@@ -348,6 +345,14 @@ Polymer({
dialog.close(); dialog.close();
}, },
/** @private */
dialogUpdated_: function() {
if (this.showEnterPincode_())
this.$$('#pincode').focus();
else if (this.showEnterPasskey_())
this.$$('#passkey').focus();
},
/** /**
* @return {!CrDialogElement} * @return {!CrDialogElement}
* @private * @private
...@@ -368,13 +373,12 @@ Polymer({ ...@@ -368,13 +373,12 @@ Polymer({
}, },
/** /**
* @param {string} currentDialogType * @param {string} desiredDialogType
* @param {string} wantedDialogType
* @return {boolean} * @return {boolean}
* @private * @private
*/ */
isDialogType_: function(currentDialogType, wantedDialogType) { isDialogType_: function(desiredDialogType, currentDialogType) {
return currentDialogType == wantedDialogType; return currentDialogType == desiredDialogType;
}, },
/** @private */ /** @private */
......
ui/webui/resources/cr_elements/shared_style_css.html
View file @ 003a037b
...@@ -6,6 +6,14 @@ ...@@ -6,6 +6,14 @@
<dom-module id="cr-shared-style"> <dom-module id="cr-shared-style">
<template> <template>
<style> <style>
/* Chrome spinners should be blue. */
paper-spinner {
--paper-spinner-layer-1-color: var(--google-blue-500);
--paper-spinner-layer-2-color: var(--google-blue-500);
--paper-spinner-layer-3-color: var(--google-blue-500);
--paper-spinner-layer-4-color: var(--google-blue-500);
}
.action-button { .action-button {
background: var(--google-blue-500); background: var(--google-blue-500);
color: white; color: white;
......
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