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..c4173f9be038e36b30bf17d338eb94b4746ed1ab
--- /dev/null
+++ b/components/proximity_auth/webui/resources/content-panel.html
@@ -0,0 +1,59 @@
+<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">
+
+<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,
+      device-list {
+        width: 80%;
+      }
+    </style>
+
+    <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 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>
+        </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>