Add chrome://proximity-auth UI implemented with Polymer.

Add chrome://proximity-auth UI implemented with Polymer.

This UI currently uses placeholder data and is not yet hooked up with Chrome.

BUG=409158
Committed: https://crrev.com/46be112a31bf05472d5ef01e2bcd3edf9ae528d3
Cr-Commit-Position: refs/heads/master@{#327556}

[Tim Song, 2015-04-27 18:38:21]

Patchset #1 (id:1) has been deleted

[Tim Song, 2015-04-27 18:41:18]

tengs@chromium.org changed reviewers:
+ isherman@chromium.org, michaelpg@chromium.org

[Tim Song, 2015-04-27 18:41:18]

+michaelpg@ for ui/webui/resources/polymer_resources.grdp
+isherman@ for components/proximity_auth.

[Ilya Sherman, 2015-04-28 02:40:12]

LGTM, thanks.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth.gypi (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth.gypi:131: 'cryptauth',
nit: This isn't reflected in the BUILD.gn file.  Is it currently used?  If so,
please add it to the BUILD.gn file; if not, please remove it here.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/BUILD.gn (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/BUILD.gn:20: "ui/resources",
nit: Prepend "//"

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/content-panel.html (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:4: <link
href="chrome://resources/polymer/core-animated-pages/core-animated-pages.html"
rel="import">
nit: Please alphabetize this list, if possible.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:16:
background-color: #03A9F4;
nit: Please lowercase.

[michaelpg, 2015-04-28 04:00:49]

ui/webui/resources/polymer_resources.grdp looks good, but I have some (mostly
style) nitpicks:

* use double quotes in HTML (with single quotes inside expressions when
necessary)
* use single quotes in JS

source: http://www.chromium.org/developers/web-development-style-guide

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/content-panel.html (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:16:
background-color: #03A9F4;
On 2015/04/28 02:40:12, Ilya Sherman wrote:
> nit: Please lowercase.

another nit: use rgb()

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:18: box-shadow: 0px
3px 2px rgba(0, 0, 0, 0.2);
nit: alphabetize

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:25: device-list{
space before {

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:30: <paper-tabs
id='tabs' selected='{{selected}}'>
use double quotes in HTML

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:44: label='Eligible
Phones' devices={{eligibleDevices}} cross-fade>
use double quotes around attribute values

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/content-panel.js (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.js:11: selected: 0,
These properties only need to be in the publish block if you want to make them
available externally. Otherwise you can make them private members outside the
publish block.

See
https://www.polymer-project.org/0.5/docs/polymer/polymer.html#published-prope...

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.js:19: publicKey:
"CAESRQogHoQkD-Q7ryI-FL8Pei6YaONx_v9vdvCSRvGQc4_bX2wSIQDWs" +
nit: indent is off here -- add another space

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.js:19: publicKey:
"CAESRQogHoQkD-Q7ryI-FL8Pei6YaONx_v9vdvCSRvGQc4_bX2wSIQDWs" +
use single quotes for JS strings throughout

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/device-list.html (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:10: <polymer-element
name="device-list" attributes="label devices" layout vertical>
attributes= is redundant when these appear in the publish block (which is
preferred, and require in 0.8).

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:14: padding: 10px
22px;
alphabetize properties throughout

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:94: class='phone-lock
{{ !device.remoteState ? "hidden" : "" }}'>
Instead of the hidden class, why not the hidden attribute?
hidden="{{!device.remoteState}}" will conditionally include the "hidden"
attribute if the condition is met.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:98: User Present:
nit: 2 space indent here & below

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:124: <core-tooltip
label='{{prettifyReason_(reason)}}' position=top>
double quotes around all attribute values

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:126:
class="ineligibility-icon">
nit: don't align, just indent 4 spaces

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/device-list.js (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.js:17: devices: []
Objects (inc. arrays) should be initialized in the `created` lifecycle callback
instead of on the prototype. See hint at
https://www.polymer-project.org/0.5/docs/polymer/polymer.html#configuring-an-...

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/local-state.html (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/local-state.html:76: class='card-icon
{{
nit: 4-space indent here and below

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/log-panel.html (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/log-panel.html:57: <div>14:23:50</div>
nit: 2-space indent

[Tim Song, 2015-04-28 19:41:33]

Thanks for reviewing the other files Michael.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth.gypi (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth.gypi:131: 'cryptauth',
On 2015/04/28 02:40:12, Ilya Sherman wrote:
> nit: This isn't reflected in the BUILD.gn file.  Is it currently used?  If so,
> please add it to the BUILD.gn file; if not, please remove it here.

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/BUILD.gn (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/BUILD.gn:20: "ui/resources",
On 2015/04/28 02:40:12, Ilya Sherman wrote:
> nit: Prepend "//"

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/content-panel.html (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:4: <link
href="chrome://resources/polymer/core-animated-pages/core-animated-pages.html"
rel="import">
On 2015/04/28 02:40:12, Ilya Sherman wrote:
> nit: Please alphabetize this list, if possible.

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:16:
background-color: #03A9F4;
On 2015/04/28 04:00:49, michaelpg wrote:
> On 2015/04/28 02:40:12, Ilya Sherman wrote:
> > nit: Please lowercase.
> 
> another nit: use rgb()

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:16:
background-color: #03A9F4;
On 2015/04/28 02:40:12, Ilya Sherman wrote:
> nit: Please lowercase.

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:18: box-shadow: 0px
3px 2px rgba(0, 0, 0, 0.2);
On 2015/04/28 04:00:48, michaelpg wrote:
> nit: alphabetize

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:25: device-list{
On 2015/04/28 04:00:48, michaelpg wrote:
> space before {

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:30: <paper-tabs
id='tabs' selected='{{selected}}'>
On 2015/04/28 04:00:49, michaelpg wrote:
> use double quotes in HTML

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.html:44: label='Eligible
Phones' devices={{eligibleDevices}} cross-fade>
On 2015/04/28 04:00:49, michaelpg wrote:
> use double quotes around attribute values

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/content-panel.js (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.js:11: selected: 0,
On 2015/04/28 04:00:49, michaelpg wrote:
> These properties only need to be in the publish block if you want to make them
> available externally. Otherwise you can make them private members outside the
> publish block.
> 
> See
>
https://www.polymer-project.org/0.5/docs/polymer/polymer.html#published-prope...

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.js:19: publicKey:
"CAESRQogHoQkD-Q7ryI-FL8Pei6YaONx_v9vdvCSRvGQc4_bX2wSIQDWs" +
On 2015/04/28 04:00:49, michaelpg wrote:
> use single quotes for JS strings throughout

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/content-panel.js:19: publicKey:
"CAESRQogHoQkD-Q7ryI-FL8Pei6YaONx_v9vdvCSRvGQc4_bX2wSIQDWs" +
On 2015/04/28 04:00:49, michaelpg wrote:
> nit: indent is off here -- add another space

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/device-list.html (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:10: <polymer-element
name="device-list" attributes="label devices" layout vertical>
On 2015/04/28 04:00:49, michaelpg wrote:
> attributes= is redundant when these appear in the publish block (which is
> preferred, and require in 0.8).

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:14: padding: 10px
22px;
On 2015/04/28 04:00:49, michaelpg wrote:
> alphabetize properties throughout

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:94: class='phone-lock
{{ !device.remoteState ? "hidden" : "" }}'>
On 2015/04/28 04:00:49, michaelpg wrote:
> Instead of the hidden class, why not the hidden attribute?
> hidden="{{!device.remoteState}}" will conditionally include the "hidden"
> attribute if the condition is met.

hidden="false" doesn't work. The "hidden" attribute doesn't take a value, and
any element having this property will be hidden.

Polymer expressions don't seem to work for attributes themselves, only values,
so I needed to add a hidden class instead.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:98: User Present:
On 2015/04/28 04:00:49, michaelpg wrote:
> nit: 2 space indent here & below

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:124: <core-tooltip
label='{{prettifyReason_(reason)}}' position=top>
On 2015/04/28 04:00:49, michaelpg wrote:
> double quotes around all attribute values

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:126:
class="ineligibility-icon">
On 2015/04/28 04:00:49, michaelpg wrote:
> nit: don't align, just indent 4 spaces

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/device-list.js (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.js:17: devices: []
On 2015/04/28 04:00:49, michaelpg wrote:
> Objects (inc. arrays) should be initialized in the `created` lifecycle
callback
> instead of on the prototype. See hint at
>
https://www.polymer-project.org/0.5/docs/polymer/polymer.html#configuring-an-...

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/local-state.html (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/local-state.html:76: class='card-icon
{{
On 2015/04/28 04:00:49, michaelpg wrote:
> nit: 4-space indent here and below

Done.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/log-panel.html (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/log-panel.html:57: <div>14:23:50</div>
On 2015/04/28 04:00:49, michaelpg wrote:
> nit: 2-space indent

Done.

[michaelpg, 2015-04-29 00:05:28]

lgtm

Thanks for making those changes. Stylistically, you should still use double
quotes in HTML and single quotes in JS, but I won't block on that.

http://www.chromium.org/developers/web-development-style-guide

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/device-list.html (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:94: class='phone-lock
{{ !device.remoteState ? "hidden" : "" }}'>
On 2015/04/28 19:41:33, Tim Song wrote:
> On 2015/04/28 04:00:49, michaelpg wrote:
> > Instead of the hidden class, why not the hidden attribute?
> > hidden="{{!device.remoteState}}" will conditionally include the "hidden"
> > attribute if the condition is met.
> 
> hidden="false" doesn't work. The "hidden" attribute doesn't take a value, and
> any element having this property will be hidden.
> 
> Polymer expressions don't seem to work for attributes themselves, only values,
> so I needed to add a hidden class instead.

I'm sorry; the syntax is:

hidden?="{{!device.remoteState}}"

the ? tells Polymer to control whether or not "hidden" appears.

[Tim Song, 2015-04-29 18:05:43]

I changed all the quotes to fit the style.

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
File components/proximity_auth/webui/resources/device-list.html (right):

https://codereview.chromium.org/1108713002/diff/20001/components/proximity_au...
components/proximity_auth/webui/resources/device-list.html:94: class='phone-lock
{{ !device.remoteState ? "hidden" : "" }}'>
On 2015/04/29 00:05:28, michaelpg wrote:
> On 2015/04/28 19:41:33, Tim Song wrote:
> > On 2015/04/28 04:00:49, michaelpg wrote:
> > > Instead of the hidden class, why not the hidden attribute?
> > > hidden="{{!device.remoteState}}" will conditionally include the "hidden"
> > > attribute if the condition is met.
> > 
> > hidden="false" doesn't work. The "hidden" attribute doesn't take a value,
and
> > any element having this property will be hidden.
> > 
> > Polymer expressions don't seem to work for attributes themselves, only
values,
> > so I needed to add a hidden class instead.
> 
> I'm sorry; the syntax is:
> 
> hidden?="{{!device.remoteState}}"
> 
> the ? tells Polymer to control whether or not "hidden" appears.

Done. Thanks, that's really helpful to know!

[Tim Song, 2015-04-29 18:05:45]

The CQ bit was checked by tengs@chromium.org

[Tim Song, 2015-04-29 18:05:46]

The patchset sent to the CQ was uploaded after l-g-t-m from
isherman@chromium.org, michaelpg@chromium.org
Link to the patchset: https://codereview.chromium.org/1108713002/#ps60001
(title: "use hidden?=")

[commit-bot: I haz the power, 2015-04-29 18:06:57]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1108713002/60001

[commit-bot: I haz the power, 2015-04-29 21:27:17]

Committed patchset #3 (id:60001)

[commit-bot: I haz the power, 2015-04-29 21:29:15]

Patchset 3 (id:??) landed as
https://crrev.com/46be112a31bf05472d5ef01e2bcd3edf9ae528d3
Cr-Commit-Position: refs/heads/master@{#327556}