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}

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>