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

components/proximity_auth/webui/resources/content-panel.html

Index: components/proximity_auth/webui/resources/content-panel.html
diff --git a/components/proximity_auth/webui/resources/content-panel.html b/components/proximity_auth/webui/resources/content-panel.html
new file mode 100644
index 0000000000000000000000000000000000000000..f0d82fef54211d5d31839a41942f6631cde03bf8
--- /dev/null
+++ b/components/proximity_auth/webui/resources/content-panel.html
@@ -0,0 +1,59 @@
+<link href="chrome://resources/polymer/polymer/polymer.html" rel="import">
+<link href="chrome://resources/polymer/paper-tabs/paper-tabs.html" rel="import">
+<link href="chrome://resources/polymer/paper-shadow/paper-shadow.html" rel="import">
+<link href="chrome://resources/polymer/core-animated-pages/core-animated-pages.html" rel="import">

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

nit: Please alphabetize this list, if possible.

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

Done.

+<link rel="import" href="local-state.html">
+<link rel="import" href="device-list.html">
+
+<polymer-element name="content-panel" layout vertical>
+  <template>
+    <style>
+      :host {
+        background-color: #ececec;
+      }
+
+      paper-tabs {
+        background-color: #03A9F4;

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

nit: Please lowercase.

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

another nit: use rgb()

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

Done.

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

Done.

+        color: #ffffff;
+        box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);

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

nit: alphabetize

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

Done.

+        font-size: 14px;
+        font-weight: 500;
+        width: 100%;
+      }
+
+      local-state,
+      device-list{

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

space before {

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

Done.

+        width: 80%;
+      }
+    </style>
+
+    <paper-tabs id='tabs' selected='{{selected}}'>

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

use double quotes in HTML

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

Done.

+      <paper-tab>LOCAL STATE</paper-tab>
+      <paper-tab>ELIGIBLE PHONES</paper-tab>
+      <paper-tab>REACHABLE PHONES</paper-tab>
+    </paper-tabs>
+
+    <core-animated-pages selected='{{selected}}' transitions='cross-fade' flex>
+      <section layout vertical center>
+        <local-state id='local-state' flex self-center cross-fade>
+        </local-state>
+      </section>
+
+      <section layout vertical center>
+        <device-list
+            label='Eligible Phones' devices={{eligibleDevices}} cross-fade>

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

use double quotes around attribute values

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

Done.

+        </device-list>
+        <device-list
+            label='Ineligible Phones' devices={{ineligibleDevices}} cross-fade>
+        </device-list>
+      </section>
+
+      <section layout vertical center>
+        <device-list
+            label='Reachable Phones' devices={{onlineDevices}} cross-fade>
+        </device-list>
+      </section>
+    </core-animated-pages>
+  </template>
+  <script src="content-panel.js"></script>
+</polymer-element>