Settings People Revamp: Easy Unlock: Add basic UI

chrome/browser/resources/settings/people_page/people_page.html

 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
 <link rel="import" href="chrome://md-settings/controls/settings_checkbox.html">
 <link rel="import" href="chrome://md-settings/people_page/sync_page.html">
 <link rel="import" href="chrome://md-settings/people_page/sync_private_api.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_subheader.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
@@ skipping 38 matching lines @@
           <template is="dom-if" if="[[syncStatus.signedIn]]">
             <span class="secondary-action">
               <paper-button class="secondary-button" on-tap="onDisconnectTap_"
                   disabled="[[syncStatus.setupInProgress]]">
                 [[i18n('syncDisconnect')]]
               </paper-button>
             </span>
           </template>
 </if>
         </div>
-        <div class="settings-box first two-line"
-            hidden="[[syncStatus.signedIn]]">
+        <div class="settings-box two-line" hidden="[[syncStatus.signedIn]]">
           [[i18n('syncOverview')]]
         </div>
 
-        <div class="settings-box"
-            hidden="[[!isStatusTextSet_(syncStatus)]]">
+        <div class="settings-box" hidden="[[!isStatusTextSet_(syncStatus)]]">
           <span id="syncStatusText"></span>
           <paper-button on-tap="onActionLinkTap_">
             [[syncStatus.actionLinkText]]
           </paper-button>
         </div>
 
         <template is="dom-if"
             if="[[isAdvancedSyncSettingsVisible_(syncStatus)]]">
           <div class="settings-box">
             <paper-button on-tap="onSyncTap_" class="primary-button">
               [[i18n('syncPageTitle')]]
             </paper-button>
           </div>
         </template>
 
 <if expr="chromeos">
         <div class="settings-box">
           <settings-checkbox pref="{{prefs.settings.enable_screen_lock}}"
               i18n-values="label:enableScreenlock">
           </settings-checkbox>
         </div>
+
+        <template is="dom-if" if=[[easyUnlockAllowed_]]>
+          <div class="settings-box">
+            <div class="middle">
+              <div>[[i18n('easyUnlockSectionTitle')]]</div>
+              <div class="secondary">
+                <template is="dom-if" if=[[!easyUnlockEnabled_]]>
+                  [[i18n('easyUnlockSetupIntro')]]
+                </template>
+                <template is="dom-if" if=[[easyUnlockEnabled_]]>
+                  [[i18n('easyUnlockDescription')]]
+                </template>
+                <a target="_blank" href$="[[i18n('easyUnlockLearnMoreURL')]]">
+                  [[i18n('learnMore')]]
+                </a>
+              </div>
+            </div>
+            <div class="secondary-action">
+              <!-- TODO(tommycli): Hook up these buttons to actions. -->
+              <template is="dom-if" if=[[!easyUnlockEnabled_]]>
+                <paper-button class="secondary-button">
+                  [[i18n('easyUnlockSetupButton')]]
+                </paper-button>
+              </template>
+              <template is="dom-if" if=[[easyUnlockEnabled_]]>
+                <paper-button class="secondary-button">
+                  [[i18n('easyUnlockTurnOffButton')]]
+                </paper-button>
+              </template>
+            </div>
+          </div>
+        </template>
 </if>
 
         <div class="settings-box">
           <paper-button class="primary-button" i18n-content="manageOtherPeople"
               on-tap="onManageOtherPeople_">
           </paper-button>
         </div>
       </neon-animatable>
       <neon-animatable id="sync">
         <settings-subheader i18n-values="page-title:syncPageTitle">
@@ skipping 36 matching lines @@
         <paper-button dialog-dismiss i18n-content="cancel">
         </paper-button>
         <paper-button dialog-confirm class="action-button"
             on-tap="onDisconnectConfirm_" i18n-content="syncDisconnectConfirm">
         </paper-button>
       </div>
     </paper-dialog>
   </template>
   <script src="people_page.js"></script>
 </dom-module>