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

components/proximity_auth/webui/resources/device-list.html

Index: components/proximity_auth/webui/resources/device-list.html
diff --git a/components/proximity_auth/webui/resources/device-list.html b/components/proximity_auth/webui/resources/device-list.html
new file mode 100644
index 0000000000000000000000000000000000000000..95cd15134d67c45133f6cb96a9093eeb79a65a4f
--- /dev/null
+++ b/components/proximity_auth/webui/resources/device-list.html
@@ -0,0 +1,136 @@
+<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" attributes="label devices" layout vertical>

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

attributes= is redundant when these appear in the publish block (which is
preferred, and require in 0.8).

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

Done.

+  <template>
+    <style>
+      .devices-label {
+        padding: 10px 22px;

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

alphabetize properties throughout

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

Done.

+        color: #999;
+        font-size: 16px;
+        margin-top: 20px;
+      }
+
+      paper-shadow {
+        background-color: #ffffff;
+      }
+
+      .item {
+        height: 72px;
+        border-bottom: 1px solid rgba(0,0,0,0.12);
+      }
+
+      .name {
+        margin-right: 0 8px 2px 0;
+      }
+
+      .public-key {
+        font-size: 13px;
+        color: #767676; 
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 16px;
+        white-space: nowrap;
+        width: 300px;
+      }
+
+      .phone-lock {
+        width: 16px;
+        height: 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;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      core-tooltip::shadow .core-tooltip {
+        font-size: 14px;
+        padding: 8px 16px;
+        line-height: 18px;
+      }
+    </style>
+
+    <div class='devices-label'>{{label}}</div>
+
+    <paper-shadow>
+      <template repeat='{{device in devices}}'>
+        <div class='item' layout horizontal center>
+          <paper-icon-button class='end-icon'
+              icon='hardware:phonelink{{!device.unlockKey ? "-off" : ""}}'>
+          </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 {{ !device.remoteState ? "hidden" : "" }}'>

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

Instead of the hidden class, why not the hidden attribute?
hidden="{{!device.remoteState}}" will conditionally include the "hidden"
attribute if the condition is met.

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

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.

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

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]

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

+                </core-icon>
+                <div tip>
+                  <div>
+                      User Present:

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

nit: 2 space indent here & below

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

Done.

+                      {{ device.remoteState.userPresent  }}
+                  </div>
+                  <div>
+                      Secure Screen Lock:
+                      {{ device.remoteState.secureScreenLock }}
+                  </div>
+                  <div>
+                      Trust Agent:
+                      {{ device.remoteState.trustAgent }}
+                  </div>
+                </div>
+              </core-tooltip>
+            </div>
+            <div class='public-key'>{{device.publicKey}}</div>
+          </div>
+
+          <div flex></div>
+          <paper-icon-button
+              class='end-icon {{ !device.unlockKey ? "hidden" : "" }}'
+              icon='{{ getIconForConnection_(device.connectionStatus) }}'>
+          </paper-icon-button>
+
+          <div class='ineligibility-icons
+                  {{ device.ineligibilityReasons == null ? "hidden" : "" }}'>
+            <template repeat="{{ reason in device.ineligibilityReasons }}">
+              <core-tooltip label='{{prettifyReason_(reason)}}' position=top>

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

double quotes around all attribute values

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

Done.

+                <core-icon icon="{{ getIconForIneligibilityReason_(reason) }}"
+                           class="ineligibility-icon">

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

nit: don't align, just indent 4 spaces

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

Done.

+                </core-icon>
+              </core-tooltip>
+            </template>
+          </div>
+        </div>
+      </template>
+    </paper-shadow>
+  </template>
+  <script src="device-list.js"></script>
+</polymer-element>