diff options
author | tengs <tengs@chromium.org> | 2015-06-24 19:34:29 -0700 |
---|---|---|
committer | Commit bot <commit-bot@chromium.org> | 2015-06-25 02:36:02 +0000 |
commit | 796a801f32eac112e2e78ca667b217410247cdaf (patch) | |
tree | cef5ab0148b01e0a21ade10dedb81bc9b4b668db /components/proximity_auth | |
parent | 0da84eb2bdb24a044412e5ba6e1f605d4cdbbe71 (diff) | |
download | chromium_src-796a801f32eac112e2e78ca667b217410247cdaf.zip chromium_src-796a801f32eac112e2e78ca667b217410247cdaf.tar.gz chromium_src-796a801f32eac112e2e78ca667b217410247cdaf.tar.bz2 |
Migrate chrome://proximity-auth from Polymer 0.5 to 1.0.
Note: <core-tooltip> has not been ported to Polymer 1.0 yet, so tooltips do not
currently work.
BUG=489785
TEST=manual
Review URL: https://codereview.chromium.org/1207593005
Cr-Commit-Position: refs/heads/master@{#336077}
Diffstat (limited to 'components/proximity_auth')
14 files changed, 580 insertions, 472 deletions
diff --git a/components/proximity_auth/webui/proximity_auth_webui_handler.cc b/components/proximity_auth/webui/proximity_auth_webui_handler.cc index 98c7276..4f51a9f 100644 --- a/components/proximity_auth/webui/proximity_auth_webui_handler.cc +++ b/components/proximity_auth/webui/proximity_auth_webui_handler.cc @@ -125,11 +125,9 @@ void ProximityAuthWebUIHandler::OnLogBufferCleared() { void ProximityAuthWebUIHandler::GetLogMessages(const base::ListValue* args) { base::ListValue json_logs; - auto logs = LogBuffer::GetInstance()->logs(); - std::transform(logs->begin(), logs->end(), json_logs.begin(), - [](const LogBuffer::LogMessage& log) { - return LogMessageToDictionary(log).release(); - }); + for (const auto& log : *LogBuffer::GetInstance()->logs()) { + json_logs.Append(LogMessageToDictionary(log).release()); + } web_ui()->CallJavascriptFunction("LogBufferInterface.onGotLogMessages", json_logs); diff --git a/components/proximity_auth/webui/resources/content-panel.html b/components/proximity_auth/webui/resources/content-panel.html index a2edce3..e2233fb 100644 --- a/components/proximity_auth/webui/resources/content-panel.html +++ b/components/proximity_auth/webui/resources/content-panel.html @@ -1,60 +1,70 @@ -<link rel="import" href="chrome://resources/polymer/core-animated-pages/core-animated-pages.html"> -<link rel="import" href="chrome://resources/polymer/paper-tabs/paper-tabs.html"> -<link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html"> -<link rel="import" href="chrome://resources/polymer/polymer/polymer.html"> -<link rel="import" href="device-list.html"> -<link rel="import" href="local-state.html"> -<link rel="import" href="eligible-devices.html"> - -<polymer-element name="content-panel" layout vertical> - <template> - <style> - :host { - background-color: #ececec; - } - - paper-tabs { - background-color: rgb(3, 169, 244); - box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2); - color: #ffffff; - font-size: 14px; - font-weight: 500; - width: 100%; - } - - local-state, - eligible-devices, - device-list { - width: 80%; - } - </style> +<link href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/neon-animation/neon-animated-pages.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/paper-material/paper-material.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/polymer/polymer.html" rel="import"> +<link href="device-list.html" rel="import"> +<link href="eligible-devices.html" rel="import"> +<link href="local-state.html" rel="import"> + +<dom-module id="content-panel"> + <style> + :host { + background-color: #ececec; + display: flex; + flex-direction: column; + } + + #pages { + overflow-y: auto; + } + + paper-tabs { + background-color: rgb(3, 169, 244); + box-shadow: 0 3px 2px rgba(0, 0, 0, 0.2); + color: white; + font-size: 14px; + font-weight: 500; + width: 100%; + } + local-state, + eligible-devices, + device-list { + width: 80%; + } + </style> + + <template> <paper-tabs id="tabs" selected="{{selected_}}"> <paper-tab>LOCAL STATE</paper-tab> <paper-tab>ELIGIBLE PHONES</paper-tab> <paper-tab>REACHABLE PHONES</paper-tab> </paper-tabs> - <core-animated-pages id='pages' selected="{{selected_}}" - transitions="cross-fade" - on-core-animated-pages-transition-prepare="{{preparePageTransition_}}" - flex> - <section layout vertical center> - <local-state id="local-state" flex self-center cross-fade> - </local-state> - </section> - - <section layout vertical center> - <eligible-devices id='eligible-devices' flex self-center cross-fade> + <neon-animated-pages id="pages" selected="[[selected_]]" + entry-animation="fade-in-animation" + exit-animation="fade-out-animation" + on-selected-item-changed="onSelectedPageChanged_" + class="flex"> + <neon-animatable class="layout vertical center"> + <local-state id="local-state" class="flex"></local-state> + </neon-animatable> + + <neon-animatable class="layout vertical center"> + <eligible-devices id="eligible-devices" class="flex"></eligible-devices> </eligible-devices> - </section> + </neon-animatable> - <section layout vertical center> + <neon-animatable class="layout vertical center"> <device-list - label="Reachable Phones" devices={{onlineDevices_}} cross-fade> + label="Reachable Phones" devices="[[onlineDevices_]]" class="flex"> </device-list> - </section> - </core-animated-pages> + </neon-animatable> + </neon-animated-pages> </template> <script src="content-panel.js"></script> -</polymer-element> +</dom-module> diff --git a/components/proximity_auth/webui/resources/content-panel.js b/components/proximity_auth/webui/resources/content-panel.js index 2e4b53d..bcdfc11 100644 --- a/components/proximity_auth/webui/resources/content-panel.js +++ b/components/proximity_auth/webui/resources/content-panel.js @@ -2,71 +2,96 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -Polymer('content-panel', { - /** - * List of devices that are online and reachable by CryptAuth. - * @type {Array<DeviceInfo>} - * @private - */ - onlineDevices_: [ - { - publicKey: 'CAESRgohAN4IwMl-bTemMQ0E-YV36s86TG0suEj422xKvNoIslyvEiE' + - 'Ab8m8J4dB44v2l8l-38-9vLwzf9GsPth4BsquCpAbNRk=', - friendlyDeviceName: 'Sony Xperia Z3', - }, - { - publicKey: 'CAESRgohAN5ljWzNNYWbuQNoQdE0NhZaCg9CmCVd-XuwR__41G_5EiE' + - 'A3ATFvesN_6Tr-wSM5fHL5v5Bn1mX4d-m4OXJ3beRYhk=', - friendlyDeviceName: 'Samsung Galaxy S5', - }, - { - publicKey: 'CAESRgohAN9QYU5HySO14Gi9PDIClacBnC0C8wqPwXsNHUNG_vXlEiE' + - 'AggzU80ZOd9DWuCBdp6bzpGcC-oj1yrwdVCHGg_yeaAQ=', - friendlyDeviceName: 'LGE Nexus 5', - }, - { - publicKey: 'CAESRgohAOGtyjLiPnkQwi-bAvp75hUrBkfRlx2pBw7_C0VojjIFEiE' + - 'ARMN6miPfDOtlAFOiV7fulvhoDqguq-sTjUCZ2Et0mYQ=', - friendlyDeviceName: 'LGE Nexus 4', - unlockKey: true, - connectionStatus: 'disconnected', - }, - { - publicKey: 'CAESRgohAOKowGAhRs6FryK5KZqlHoAinNCon0T1tpeyIGPzKKmlEiE' + - 'ARH5joqbVWtLGjuh7aO7nLEhkFxv0u2C3kyoWysq6U_4=', - friendlyDeviceName: 'Samsung GT-N8010', - }, - { - publicKey: 'CAESRgohAOPegrIJNl9HeFeykbCswXciAXOpJZdme6Nh2WcMMiyZEiE' + - 'A8X7fTDRh61X-iDE1bYASMPiCbk7bPy7n0N0MiBeJNuo=', - friendlyDeviceName: 'Sony D5503', - }, - { - publicKey: 'CAESRgohAOZly-M7bBQokc3CJ9Wio37bzpUYaD-p9On3e6H4n2kKEiE' + - 'ANhkioq9y_19lN8Wnoc8XBLOilyyT6kn6iM00DEIOhFk=', - friendlyDeviceName: 'LGE LG-D855', - }, - { - publicKey: 'CAESRgohAOZ6JXDntf-h7MmRgrJc9RuW0mIgDluYEBcs8zx_uESeEiE' + - 'AeQk_My_0AFM9jb0eOSZupZ2s_n-6Vqs-_XaOnbAGSeU=', - friendlyDeviceName: 'Motorola Nexus 6', +Polymer({ + is: 'content-panel', + + properties: { + /** + * List of devices that are online and reachable by CryptAuth. + * @type {Array<DeviceInfo>} + * @const + * @private + */ + onlineDevices_: { + type: Array, + value: [ + { + publicKey: 'CAESRgohAN4IwMl-bTemMQ0E-YV36s86TG0suEj422xKvNoIslyvEiE' + + 'Ab8m8J4dB44v2l8l-38-9vLwzf9GsPth4BsquCpAbNRk=', + friendlyDeviceName: 'Sony Xperia Z3', + }, + { + publicKey: 'CAESRgohAN5ljWzNNYWbuQNoQdE0NhZaCg9CmCVd-XuwR__41G_5EiE' + + 'A3ATFvesN_6Tr-wSM5fHL5v5Bn1mX4d-m4OXJ3beRYhk=', + friendlyDeviceName: 'Samsung Galaxy S5', + }, + { + publicKey: 'CAESRgohAN9QYU5HySO14Gi9PDIClacBnC0C8wqPwXsNHUNG_vXlEiE' + + 'AggzU80ZOd9DWuCBdp6bzpGcC-oj1yrwdVCHGg_yeaAQ=', + friendlyDeviceName: 'LGE Nexus 5', + }, + { + publicKey: 'CAESRgohAOGtyjLiPnkQwi-bAvp75hUrBkfRlx2pBw7_C0VojjIFEiE' + + 'ARMN6miPfDOtlAFOiV7fulvhoDqguq-sTjUCZ2Et0mYQ=', + friendlyDeviceName: 'LGE Nexus 4', + unlockKey: true, + connectionStatus: 'disconnected', + ineligibilityReasons: [ + 'deviceOffline', + 'invalidCredentials', + 'bluetoothNotSupported', + 'badOsVersion' + ], + remoteState: { + userPresent: true, + secureScreenLock: false, + trustAgent: true, + } + }, + { + publicKey: 'CAESRgohAOKowGAhRs6FryK5KZqlHoAinNCon0T1tpeyIGPzKKmlEiE' + + 'ARH5joqbVWtLGjuh7aO7nLEhkFxv0u2C3kyoWysq6U_4=', + friendlyDeviceName: 'Samsung GT-N8010', + }, + { + publicKey: 'CAESRgohAOPegrIJNl9HeFeykbCswXciAXOpJZdme6Nh2WcMMiyZEiE' + + 'A8X7fTDRh61X-iDE1bYASMPiCbk7bPy7n0N0MiBeJNuo=', + friendlyDeviceName: 'Sony D5503', + }, + { + publicKey: 'CAESRgohAOZly-M7bBQokc3CJ9Wio37bzpUYaD-p9On3e6H4n2kKEiE' + + 'ANhkioq9y_19lN8Wnoc8XBLOilyyT6kn6iM00DEIOhFk=', + friendlyDeviceName: 'LGE LG-D855', + }, + { + publicKey: 'CAESRgohAOZ6JXDntf-h7MmRgrJc9RuW0mIgDluYEBcs8zx_uESeEiE' + + 'AeQk_My_0AFM9jb0eOSZupZ2s_n-6Vqs-_XaOnbAGSeU=', + friendlyDeviceName: 'Motorola Nexus 6', + }, + ], + readOnly: true, }, - ], - /** - * The selected page that is currently shown. - * @type {number} - * @private - */ - selected_: 0, + /** + * The index of the selected page that is currently shown. + * @private + */ + selected_: { + type: Number, + value: 0, + } + }, /** - * Called when the current page is about to transition. + * Called when a page transition event occurs. + * @param {Event} event * @private */ - preparePageTransition_: function() { - var page = this.$.pages.selectedItem.querySelector(':first-child'); - if (page.activate) - page.activate(); + onSelectedPageChanged_: function(event) { + var newPage = event.detail.value instanceof Element && + event.detail.value.children[0]; + if (newPage && newPage.activate != null) { + newPage.activate(); + } } }); diff --git a/components/proximity_auth/webui/resources/device-list.html b/components/proximity_auth/webui/resources/device-list.html index 09e330f..7141559 100644 --- a/components/proximity_auth/webui/resources/device-list.html +++ b/components/proximity_auth/webui/resources/device-list.html @@ -1,131 +1,134 @@ -<link href="chrome://resources/polymer/polymer/polymer.html" rel="import"> -<link href="chrome://resources/polymer/paper-icon-button/paper-icon-button.html" rel="import"> -<link href="chrome://resources/polymer/paper-shadow/paper-shadow.html" rel="import"> -<link href="chrome://resources/polymer/core-tooltip/core-tooltip.html" rel="import"> -<link href="chrome://resources/polymer/core-icon/core-icon.html" rel="import"> -<link href="chrome://resources/polymer/core-icons/device-icons.html" rel="import"> -<link href="chrome://resources/polymer/core-icons/hardware-icons.html" rel="import"> -<link href="chrome://resources/polymer/core-icons/notification-icons.html" rel="import"> - -<polymer-element name="device-list" layout vertical> +<link href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/iron-icons/device-icons.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/iron-icons/hardware-icons.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/iron-icons/notification-icons.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/paper-material/paper-material.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/polymer/polymer.html" rel="import"> + +<dom-module id="device-list"> + <style> + .devices-label { + color: rgb(153, 153, 153); + font-size: 16px; + margin-top: 20px; + padding: 10px 22px; + } + + paper-material { + background-color: white; + } + + .item { + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + height: 72px; + } + + .name { + margin: 0 8px 2px 0; + } + + .public-key { + color: #767676; + font-size: 13px; + height: 16px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 300px; + } + + .phone-lock { + height: 16px; + width: 16px; + vertical-align: top; + } + + .end-icon { + margin: 0 14px; + } + + paper-icon-button, iron-icon { + opacity: 0.25; + } + + paper-icon-button:hover, iron-icon:hover { + opacity: 1; + } + + .ineligibility-icons { + margin: 0 22px; + } + + .ineligibility-icon { + color: orange; + opacity: 0.5; + } + + iron-tooltip::shadow .iron-tooltip { + font-size: 14px; + line-height: 18px; + padding: 8px 16px; + } + </style> + <template> - <style> - .devices-label { - color: rgb(153, 153, 153); - font-size: 16px; - margin-top: 20px; - padding: 10px 22px; - } - - paper-shadow { - background-color: white; - } - - .item { - border-bottom: 1px solid rgba(0, 0, 0, 0.12); - height: 72px; - } - - .name { - margin: 0 8px 2px 0; - } - - .public-key { - color: #767676; - font-size: 13px; - height: 16px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 300px; - } - - .phone-lock { - height: 16px; - width: 16px; - } - - .end-icon { - margin: 0 14px; - } - - paper-icon-button, core-icon { - opacity: 0.25; - } - - paper-icon-button:hover, core-icon:hover { - opacity: 1; - } - - .ineligibility-icons { - margin: 0 22px; - } - - .ineligibility-icon { - color: orange; - opacity: 0.5; - } - - core-tooltip::shadow .core-tooltip { - font-size: 14px; - line-height: 18px; - padding: 8px 16px; - } - </style> - - <div class="devices-label">{{label}}</div> - - <paper-shadow> - <template repeat="{{device in devices}}"> - <div class="item" layout horizontal center> + <div class="devices-label">[[label]]</div> + + <paper-material> + <template is="dom-repeat" items="[[devices]]"> + <div class="item layout horizontal center"> <paper-icon-button class="end-icon" - icon="hardware:phonelink{{!device.unlockKey ? '-off' : ''}}"> + icon="[[getIconForUnlockKey_(item)]]"> </paper-icon-button> <div class="info"> - <div layout horizontal> - <span class="name">{{device.friendlyDeviceName}}</span> - <core-tooltip position="top"> - <core-icon icon="lock-open" class="phone-lock" - hidden?="{{!device.remoteState}}"> - </core-icon> - <div tip> + <div class="layout horizontal center"> + <span class="name">[[item.friendlyDeviceName]]</span> + <core-tooltip position="top" hidden$="[[!item.remoteState]]"> + <iron-icon icon="[[getIconForRemoteState_(item.remoteState)]]" + class="phone-lock flex"></iron-icon> + <!--TODO(tengs): Reimplement the tooltip after it is ported to + Polymer 1.0--> + <div hidden> <div> User Present: - {{ device.remoteState.userPresent }} + <span>[[item.remoteState.userPresent]]</span> </div> <div> Secure Screen Lock: - {{ device.remoteState.secureScreenLock }} + <span>[[item.remoteState.secureScreenLock]]</span> </div> <div> Trust Agent: - {{ device.remoteState.trustAgent }} + <span>[[item.remoteState.trustAgent]]</span> </div> </div> </core-tooltip> </div> - <div class="public-key">{{device.publicKey}}</div> + <div class="public-key">[[item.publicKey]]</div> </div> - <div flex></div> + <div class="flex"></div> <div class="ineligibility-icons" - hidden?="{{!device.ineligibilityReasons}}"> - <template repeat="{{ reason in device.ineligibilityReasons }}"> - <core-tooltip label="{{prettifyReason_(reason)}}" position=top> - <core-icon icon="{{ getIconForIneligibilityReason_(reason) }}" + hidden$="[[!item.ineligibilityReasons]]"> + <template is="dom-repeat" items="[[item.ineligibilityReasons]]"> + <core-tooltip label="[[prettifyReason_(item)]]" position="top"> + <iron-icon icon="[[getIconForIneligibilityReason_(item)]]") class="ineligibility-icon"> - </core-icon> + </iron-icon> </core-tooltip> </template> </div> <paper-icon-button class="end-icon" - hidden?="{{!device.unlockKey}}" - icon="{{ getIconForConnection_(device.connectionStatus) }}"> + icon="[[getIconForConnection_(item.connectionStatus)]]" + hidden$="{{!item.unlockKey}}"> </paper-icon-button> </div> </template> - </paper-shadow> + </paper-material> </template> <script src="device-list.js"></script> -</polymer-element> +</dom-module> diff --git a/components/proximity_auth/webui/resources/device-list.js b/components/proximity_auth/webui/resources/device-list.js index ad0854cb..60fbdec 100644 --- a/components/proximity_auth/webui/resources/device-list.js +++ b/components/proximity_auth/webui/resources/device-list.js @@ -2,26 +2,24 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -Polymer('device-list', { - publish: { +Polymer({ + is: 'device-list', + + properties: { /** * The label of the list to be displayed. * @type {string} */ - label: 'Device List', + label: { + type: String, + value: 'Device List', + }, /** * Info of the devices contained in the list. * @type {Array<DeviceInfo>} */ - devices: null - }, - - /** - * Called when an instance is created. - */ - created: function() { - this.devices = []; + devices: Array, }, /** @@ -30,7 +28,7 @@ Polymer('device-list', { * @private */ prettifyReason_: function(reason) { - if (reason == null) + if (reason == null || reason == '') return ''; var reasonWithSpaces = reason.replace(/([A-Z])/g, ' $1'); return reasonWithSpaces[0].toUpperCase() + reasonWithSpaces.slice(1); @@ -55,6 +53,28 @@ Polymer('device-list', { }, /** + * @param {DeviceInfo} device + * @return {string} The icon id to be shown for the unlock key state of the + * device. + */ + getIconForUnlockKey_: function(device) { + return 'hardware:phonelink' + (!device.unlockKey ? '-off' : ''); + }, + + /** + * @param {Object} remoteState The remote state of the device. + * @return {string} The icon representing the state. + */ + getIconForRemoteState_: function(remoteState) { + if (remoteState != null && remoteState.userPresent && + remoteState.secureScreenLock && remoteState.trustAgent) { + return 'icons:lock-open'; + } else { + return 'icons:lock-outline'; + } + }, + + /** * @param {string} reason The device ineligibility reason. * @return {string} The icon id to be shown for the ineligibility reason. * @private diff --git a/components/proximity_auth/webui/resources/eligible-devices.html b/components/proximity_auth/webui/resources/eligible-devices.html index 5aaa156..47c80f8 100644 --- a/components/proximity_auth/webui/resources/eligible-devices.html +++ b/components/proximity_auth/webui/resources/eligible-devices.html @@ -1,28 +1,31 @@ -<link href="chrome://resources/polymer/polymer/polymer.html" rel="import"> -<link href="chrome://resources/polymer/paper-spinner/paper-spinner.html" rel="import"> -<link rel="import" href="device-list.html"> +<link href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/polymer/polymer.html" rel="import"> +<link href="device-list.html" rel="import"> -<polymer-element name="eligible-devices" layout vertical> - <template> - <style> - paper-spinner { - margin-top: 40px; - } - </style> +<dom-module id="eligible-devices"> + <style> + paper-spinner { + margin-top: 40px; + } + </style> - <paper-spinner - hidden?="{{!requestInProgress_}}" self-center active> - </paper-spinner> + <template> + <div class="layout vertical"> + <paper-spinner + hidden$="[[!requestInProgress_]]" class="self-center" active> + </paper-spinner> - <device-list - label="Eligible Phones" devices={{eligibleDevices_}} - hidden?="{{eligibleDevices_.length == 0}}" cross-fade> - </device-list> + <device-list + label="Eligible Phones" devices="[[eligibleDevices_]]" + hidden$="[[!eligibleDevices_.length]]"> + </device-list> - <device-list - label="Ineligible Phones" devices={{ineligibleDevices_}} - hidden?="{{ineligibleDevices_.length == 0}}" cross-fade> - </device-list> + <device-list + label="Ineligible Phones" devices="[[ineligibleDevices_]]" + hidden$="[[!ineligibleDevices_.length]]"> + </device-list> + </div> </template> <script src="eligible-devices.js"></script> -</polymer-element> +</dom-module> diff --git a/components/proximity_auth/webui/resources/eligible-devices.js b/components/proximity_auth/webui/resources/eligible-devices.js index ff6da9e..d76a71e 100644 --- a/components/proximity_auth/webui/resources/eligible-devices.js +++ b/components/proximity_auth/webui/resources/eligible-devices.js @@ -2,34 +2,36 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -Polymer('eligible-devices', { - /** - * List of devices that are eligible to be used as an unlock key. - * @type {Array<DeviceInfo>} - * @private - */ - eligibleDevices_: null, +Polymer({ + is: 'eligible-devices', - /** - * List of devices that are ineligible to be used as an unlock key. - * @type {Array<DeviceInfo>} - * @private - */ - ineligibleDevices_: null, + properties: { + /** + * List of devices that are eligible to be used as an unlock key. + * @type {Array<DeviceInfo>} + * @private + */ + eligibleDevices_: Array, - /** - * Whether the findEligibleUnlockDevices request is in progress. - * @type {boolean} - * @private - */ - requestInProgress_: false, + /** + * List of devices that are ineligible to be used as an unlock key. + * @type {Array<DeviceInfo>} + * @private + */ + ineligibleDevices_: Array, + + /** + * Whether the findEligibleUnlockDevices request is in progress. + * @type {boolean} + * @private + */ + requestInProgress_: Boolean, + }, /** * Called when this element is added to the DOM */ attached: function() { - this.eligibleDevices_ = []; - this.ineligibleDevices_ = []; CryptAuthInterface.addObserver(this); }, @@ -50,8 +52,8 @@ Polymer('eligible-devices', { /** * Called when eligible devices are found. - * @param {Array.<EligibleDevice>} eligibleDevices - * @param {Array.<IneligibleDevice>} ineligibleDevices_ + * @param {Array<EligibleDevice>} eligibleDevices + * @param {Array<IneligibleDevice>} ineligibleDevices_ */ onGotEligibleDevices: function(eligibleDevices, ineligibleDevices) { this.requestInProgress_ = false; diff --git a/components/proximity_auth/webui/resources/local-state.html b/components/proximity_auth/webui/resources/local-state.html index 275fa86..2cac823 100644 --- a/components/proximity_auth/webui/resources/local-state.html +++ b/components/proximity_auth/webui/resources/local-state.html @@ -1,116 +1,116 @@ -<link href="chrome://resources/polymer/polymer/polymer.html" rel="import"> -<link href="chrome://resources/polymer/paper-shadow/paper-shadow.html" rel="import"> -<link href="chrome://resources/polymer/paper-button/paper-button.html" rel="import"> -<link href="chrome://resources/polymer/paper-icon-button/paper-icon-button.html" rel="import"> -<link href="chrome://resources/polymer/core-icon/core-icon.html" rel="import"> -<link href="chrome://resources/polymer/core-icons/notification-icons.html" rel="import"> -<link rel="import" href="device-list.html"> +<link href="chrome://resources/polymer/v1_0/polymer/polymer.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/paper-material/paper-material.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/paper-button/paper-button.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/iron-icons/notification-icons.html" rel="import"> +<link href="device-list.html" rel="import"> -<polymer-element name="local-state" layout vertical> - <template> - <style> - paper-shadow { - background-color: white; - } +<dom-module id="local-state"> + <style> + paper-material { + background-color: white; + } + + #card-row { + margin-top: 22px; + } - #card-row { - margin-top: 22px; - } + #enrollment-card { + margin-right: 30px; + } - #enrollment-card { - margin-right: 30px; - } + .card-content { + margin: 24px 16px 0 16px; + } - .card-content { - margin: 24px 16px 0px 16px; - } + .card-title { + font-size: 20px; + } - .card-title { - font-size: 20px; - } + .card-subtitle { + color: #767676; + font-size: 14px; + margin-bottom: 16px; + } - .card-subtitle { - color: #767676; - font-size: 14px; - margin-bottom: 16px; - } + paper-button { + margin: 8px; + } - paper-button { - margin: 8px; - } + .card-icon { + color: green; + height: 90px; + margin: 16px 16px 0 0; + width: 90px; + } - .card-icon { - color: green; - height: 90px; - margin: 16px 16px 0 0; - width: 90px; - } + .next-sync-icon { + color: green; + margin-right: 4px; + } - .next-sync-icon { - color: green; - margin-right: 4px; - } + .next-refresh { + height: 40px; + } - .error-icon { - color: orange; - } - </style> + iron-icon[error-icon] { + color: orange; + } + </style> - <div id="card-row" layout horizontal> + <template> + <div id="card-row" class="layout horizontal"> <!-- CryptAuth Enrollment Info Card --> - <paper-shadow id="enrollment-card" layout vertical flex> - <div layout horizontal> - <div class="card-content" flex layout vertical> + <paper-material id="enrollment-card" class="layout vertical flex"> + <div class="layout horizontal"> + <div class="card-content layout vertical flex"> <div class="card-title">Enrollment</div> <div class="card-subtitle"> - {{ enrollmentInfo.lastSuccessTime || "Never enrolled" }} + <span>[[getLastSyncTimeString_(enrollmentInfo, + "Never enrolled")]]</span> </div> - <div class layout horizontal center flex> - <core-icon class="next-sync-icon error-icon" icon="schedule"> - </core-icon> - {{enrollmentInfo.nextRefreshTime}} to refresh + <div class="next-refresh layout horizontal center flex"> + <iron-icon class="next-sync-icon" + icon="icons:schedule" error-icon> + </iron-icon> + <span>[[getNextEnrollmentString_(enrollmentInfo)]]</span> </div> </div> - <core-icon - class="card-icon {{ - enrollmentInfo.lastAttemptFailed ? 'error-icon' : '' - }}" - icon="{{ - enrollmentInfo.lastAttemptFailed ? 'error' : 'cloud-done' - }}"> - </core-icon> + <iron-icon class="card-icon" + icon="[[getIconForLastAttempt_(enrollmentInfo)]]" + error-icon$="[[enrollmentInfo.lastAttemptFailed]]"> + </iron-icon> </div> - <paper-button self-start>Force Enroll</paper-button> - </paper-shadow> + <paper-button class="self-start">Force Enroll</paper-button> + </paper-material> <!-- Device Sync Info Card --> - <paper-shadow id="device-card" layout vertical flex> - <div layout horizontal flex> - <div class="card-content" flex layout vertical> + <paper-material id="device-card" class="layout vertical flex"> + <div class="layout horizontal flex"> + <div class="card-content layout vertical flex"> <div class="card-title">Device Sync</div> <div class="card-subtitle"> - {{ deviceSyncInfo.lastSuccessTime || "Never synced" }} + <span>[[getLastSyncTimeString_(deviceSyncInfo, + "Never synced")]]</span> </div> - <div class layout horizontal center flex> - <core-icon class="next-sync-icon" icon="schedule"></core-icon> - {{ deviceSyncInfo.nextRefreshTime }} to refresh + <div class="layout horizontal center flex"> + <iron-icon class="next-sync-icon" icon="icons:schedule"></iron-icon> + <span>[[getNextEnrollmentString_(deviceSyncInfo)]]</span> </div> </div> - <core-icon - class="card-icon {{ - { 'error-icon': deviceSyncInfo.lastAttemptFailed } | tokenList - }}" - icon="{{ - deviceSyncInfo.lastAttemptFailed ? 'error' : 'cloud-done' - }}"> - </core-icon> + <iron-icon class="card-icon" + icon="[[getIconForLastAttempt_(deviceSyncInfo)]]" + error-icon$="[[deviceSyncInfo.lastAttemptFailed]]"> + </iron-icon> </div> - <paper-button self-start>Force Sync</paper-button> - </paper-shadow> + <paper-button class="self-start">Force Sync</paper-button> + </paper-material> </div> - <device-list label="Unlock Keys" devices="{{unlockKeys}}"></device-list> + <device-list label="Unlock Keys" devices="[[unlockKeys]]"></device-list> </template> <script src="local-state.js"></script> -</polymer-element> +</local-state> diff --git a/components/proximity_auth/webui/resources/local-state.js b/components/proximity_auth/webui/resources/local-state.js index 4047058..6ee17eb 100644 --- a/components/proximity_auth/webui/resources/local-state.js +++ b/components/proximity_auth/webui/resources/local-state.js @@ -2,8 +2,9 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -Polymer('local-state', { - publish: { +Polymer({ + is: 'local-state', + properties: { /** * The current CryptAuth enrollment status. * @type {{ @@ -12,7 +13,15 @@ Polymer('local-state', { * lastAttemptFailed: boolean, * }} */ - enrollmentInfo: null, + enrollmentInfo: { + type: Object, + value: { + lastSuccessTime: null, + nextRefreshTime: '90 days', + lastAttemptFailed: true + }, + notify: true, + }, /** * The current CryptAuth device sync status. @@ -22,46 +31,65 @@ Polymer('local-state', { * lastAttemptFailed: boolean, * }} */ - deviceSyncInfo: null, + deviceSyncInfo: { + type: Object, + value: { + lastSuccessTime: 'April 20 14:23', + nextRefreshTime: '15.5 hours', + lastAttemptFailed: false + }, + notify: true, + }, /** * List of unlock keys that can unlock the local device. * @type {Array<DeviceInfo>} */ - unlockKeys: null, + unlockKeys: { + type: Array, + value: [ + { + publicKey: 'CAESRQogOlH8DgPMQu7eAt-b6yoTXcazG8mAl6SPC5Ds-LTULIcSIQDZ' + + 'DMqsoYRO4tNMej1FBEl1sTiTiVDqrcGq-CkYCzDThw==', + friendlyDeviceName: 'LGE Nexus 4', + bluetoothAddress: 'C4:43:8F:12:07:07', + unlockKey: true, + unlockable: false, + connectionStatus: 'connected', + remoteState: { + userPresent: true, + secureScreenLock: true, + trustAgent: true + }, + }, + ], + notify: true, + }, }, /** - * Called when an instance is created. + * @param {SyncInfo} syncInfo + * @param {string} neverSyncedString + * @return {string} */ - created: function() { - this.enrollmentInfo = { - lastSuccessTime: null, - nextRefreshTime: '90 days', - lastAttemptFailed: true - }; + getLastSyncTimeString_: function(syncInfo, neverSyncedString) { + return syncInfo.lastSuccessTime || neverSyncedString; + }, - this.deviceSyncInfo = { - lastSuccessTime: 'April 20 14:23', - nextRefreshTime: '15.5 hours', - lastAttemptFailed: false - }; + /** + * @param {SyncInfo} syncInfo + * @return {string} + */ + getNextEnrollmentString_: function(syncInfo) { + return syncInfo.nextRefreshTime + ' to refresh'; + }, - this.unlockKeys = [ - { - publicKey: 'CAESRQogOlH8DgPMQu7eAt-b6yoTXcazG8mAl6SPC5Ds-LTULIcSIQDZDM' + - 'qsoYRO4tNMej1FBEl1sTiTiVDqrcGq-CkYCzDThw==', - friendlyDeviceName: 'LGE Nexus 4', - bluetoothAddress: 'C4:43:8F:12:07:07', - unlockKey: true, - unlockable: false, - connectionStatus: 'connected', - remoteState: { - userPresent: true, - secureScreenLock: true, - trustAgent: true - }, - }, - ]; + /** + * @param {SyncInfo} syncInfo + * @return {string} + */ + getIconForLastAttempt_: function(syncInfo) { + return syncInfo.lastAttemptFailed ? + 'icons:error' : 'icons:cloud-done'; }, }); diff --git a/components/proximity_auth/webui/resources/log-buffer.html b/components/proximity_auth/webui/resources/log-buffer.html index e85ce50..ad603b1d 100644 --- a/components/proximity_auth/webui/resources/log-buffer.html +++ b/components/proximity_auth/webui/resources/log-buffer.html @@ -1,5 +1,6 @@ -<link href="chrome://resources/polymer/polymer/polymer.html" rel="import"> -<polymer-element name="log-buffer"> +<link href="chrome://resources/polymer/v1_0/polymer/polymer.html" rel="import"> + +<dom-module id="log-buffer"> <template></template> <script src="log-buffer.js"></script> </polymer-element> diff --git a/components/proximity_auth/webui/resources/log-buffer.js b/components/proximity_auth/webui/resources/log-buffer.js index 82710d6..41d978e 100644 --- a/components/proximity_auth/webui/resources/log-buffer.js +++ b/components/proximity_auth/webui/resources/log-buffer.js @@ -2,8 +2,10 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -Polymer('log-buffer', { - publish: { +Polymer({ + is: 'log-buffer', + + properties: { /** * List of displayed logs. * @type {?Array<{{ @@ -14,14 +16,17 @@ Polymer('log-buffer', { * severity: number, * }}>} LogMessage */ - logs: null, + logs: { + type: Array, + value: [], + notify: true, + } }, /** - * Called when an instance is created. + * Called when an instance is initialized. */ - created: function() { - this.logs = []; + ready: function() { // We assume that only one instance of log-buffer is ever created. LogBufferInterface = this; chrome.send('getLogMessages'); @@ -34,7 +39,7 @@ Polymer('log-buffer', { // Handles when a new log message is added. onLogMessageAdded: function(log) { - this.logs.push(log); + this.push('logs', log); }, // Handles when the logs are cleared. diff --git a/components/proximity_auth/webui/resources/log-panel.html b/components/proximity_auth/webui/resources/log-panel.html index 5b0ef01..ac98111 100644 --- a/components/proximity_auth/webui/resources/log-panel.html +++ b/components/proximity_auth/webui/resources/log-panel.html @@ -1,79 +1,85 @@ -<link href="chrome://resources/polymer/polymer/polymer.html" rel="import"> -<link href="chrome://resources/polymer/core-toolbar/core-toolbar.html" rel="import"> -<link href="chrome://resources/polymer/paper-icon-button/paper-icon-button.html" rel="import"> -<link href="chrome://resources/polymer/core-icons/communication-icons.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/iron-icons/communication-icons.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html" rel="import"> +<link href="chrome://resources/polymer/v1_0/polymer/polymer.html" rel="import"> <link href="log-buffer.html" rel="import"> -<polymer-element name="log-panel" layout vertical> - <template> - <style> - core-toolbar { - background-color: #069BDE; - box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2); - height: 48px; - margin: 0; - } +<dom-module id="log-panel"> + <style> + :host { + height: 100vh; + display: flex; + flex-direction: column; + } + + paper-toolbar { + background-color: #069BDE; + box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2); + height: 48px; + margin: 0; + } - core-toolbar paper-icon-button { - padding: 0; - } + paper-toolbar paper-icon-button { + padding: 0; + } - #list { - overflow: auto; - } + #list { + overflow-y: scroll; + } - .list-item { - border-bottom: 1px solid rgba(0, 0, 0, 0.12); - font-family: monospace; - font-size: 12px; - padding: 15px 30px; - } + .list-item { + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + font-family: monospace; + font-size: 12px; + padding: 15px 30px; + } - .list-item[severity="1"] { - background-color: #fffcef; - color: #312200; - } + .list-item[severity="1"] { + background-color: #fffcef; + color: #312200; + } - .list-item[severity="2"] { - background-color: #fff1f1; - color: #ef0000; - } + .list-item[severity="2"] { + background-color: #fff1f1; + color: #ef0000; + } - .item-metadata { - color: #888888; - font-size: 10px; - } + .item-metadata { + color: #888888; + font-size: 10px; + } - .item-log { - margin: 0; - overflow: hidden; - } + .item-log { + margin: 0; + overflow: hidden; + } - .list-item:hover .item-log { - overflow: auto; - text-overflow: clip; - } - </style> + .list-item:hover .item-log { + overflow: auto; + text-overflow: clip; + } + </style> - <core-toolbar layout horizontal end-justified center - on-click="{{clearLogs_}}"> + <template> + <paper-toolbar class="layout horizontal end-justified center" + on-click="clearLogs_"> <paper-icon-button icon="communication:clear-all"></paper-icon-button> - </core-toolbar> + </paper-toolbar> <log-buffer id='logBuffer' logs="{{logs}}"></log-buffer> - <div id="list" flex> - <template repeat="{{log in logs}}"> - <div class="list-item {{ {selected: log.selected} | tokenList }}" - on-click={{itemClick}} severity="{{log.severity}}"> - <div class="item-metadata" layout horizontal> - <div>{{log.time}}</div> - <div flex></div> - <div>{{stripPath_(log.file)}}:{{log.line}}</div> + <div id="list" class="flex"> + <template is="dom-repeat" items="[[logs]]"> + <div class="list-item" severity="[[item.severity]]"> + <div class="item-metadata layout horizontal"> + <div>[[item.time]]</div> + <div class="flex"></div> + <div>[[computeFileAndLine_(item)]]</div> </div> - <pre class="item-log" flex>{{log.text}}</pre> + <pre class="item-log flex">[[item.text]]</pre> </div> </template> </div> </template> <script src="log-panel.js"></script> -</polymer-element> +</dom-module> diff --git a/components/proximity_auth/webui/resources/log-panel.js b/components/proximity_auth/webui/resources/log-panel.js index 0475a55..8d4351b 100644 --- a/components/proximity_auth/webui/resources/log-panel.js +++ b/components/proximity_auth/webui/resources/log-panel.js @@ -2,8 +2,9 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -Polymer('log-panel', { - publish: { +Polymer({ + is: 'log-panel', + properties: { /** * List of displayed logs. * @type {Array<{{ @@ -12,9 +13,13 @@ Polymer('log-panel', { * source: string * }}>} */ - logs: null, + logs: Array, }, + observers: [ + 'logsChanged_(logs.*)', + ], + /** * @type {boolean} * @private @@ -32,7 +37,7 @@ Polymer('log-panel', { /** * Called when the list of logs change. */ - logsChanged: function(oldValue, newValue) { + logsChanged_: function() { if (this.isScrollAtBottom_) this.async(this.scrollToBottom_); }, @@ -64,12 +69,13 @@ Polymer('log-panel', { }, /** - * @param {string} filename - * @return {string} The filename stripped of its preceeding path. + * @param {LogMessage} log + * @return {string} The filename stripped of its preceeding path concatenated + * with the line number of the log. * @private */ - stripPath_: function(filename) { - var directories = filename.split('/'); - return directories[directories.length - 1]; + computeFileAndLine_: function(log) { + var directories = log.file.split('/'); + return directories[directories.length - 1] + ':' + log.line; }, }); diff --git a/components/proximity_auth/webui/resources/proximity_auth.html b/components/proximity_auth/webui/resources/proximity_auth.html index 804e74b..3927fed 100644 --- a/components/proximity_auth/webui/resources/proximity_auth.html +++ b/components/proximity_auth/webui/resources/proximity_auth.html @@ -5,14 +5,15 @@ <title>Proximity Auth Debug</title> <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" href="proximity_auth.css"> - <link rel="stylesheet" href="chrome://resources/css/roboto.css"> - <link rel="import" href="content-panel.html"> - <link rel="import" href="log-panel.html"> - <script src='cryptauth_interface.js'></script> + <link href="proximity_auth.css" rel="stylesheet"> + <link href="chrome://resources/css/roboto.css" rel="stylesheet"> + <link href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html" rel="import"> + <link href="content-panel.html" rel="import"> + <link href="log-panel.html" rel="import"> + <script src="cryptauth_interface.js"></script> </head> -<body layout horizontal fullbleed> - <content-panel id="content" flex></content-panel> +<body class="layout horizontal fullbleed"> + <content-panel id="content" class="flex"></content-panel> <log-panel id="logs"></log-panel> </body> </html> |