Settings People Revamp: Easy Unlock: Add basic UI

chrome/browser/resources/settings/people_page/people_page.js

Index: chrome/browser/resources/settings/people_page/people_page.js
diff --git a/chrome/browser/resources/settings/people_page/people_page.js b/chrome/browser/resources/settings/people_page/people_page.js
index ba9d9e029b1242a25044f29ced1b61f57f2b60af..8d6441c70f1827858684a311621f7431694fa2ad 100644
--- a/chrome/browser/resources/settings/people_page/people_page.js
+++ b/chrome/browser/resources/settings/people_page/people_page.js
@@ -18,6 +18,7 @@ Polymer({
 
   behaviors: [
     I18nBehavior,
+    WebUIListenerBehavior,
   ],
 
   properties: {
@@ -54,13 +55,43 @@ Polymer({
      * @private {string}
      */
     profileName_: String,
+
+<if expr="chromeos">
+    /**
+     * True if Easy Unlock is allowed on this machine.
+     * @private {boolean}
+     */
+    easyUnlockAllowed_: {

[dpapad, 2016/03/15 00:44:27]

Nit: Does the value of this ever change? If not, should we also add "readonly:
true"?

[tommycli, 2016/03/15 18:58:27]

Done.

+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('easyUnlockAllowed');
+      },
+    },
+
+    /**
+     * True if Easy Unlock is enabled.
+     * @private {boolean}
+     */
+    easyUnlockEnabled_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('easyUnlockEnabled');
+      },
+    },
+</if>
   },
 
   /** @override */
-  created: function() {
+  attached: function() {
     settings.SyncPrivateApi.getProfileInfo(this.handleProfileInfo_.bind(this));
     settings.SyncPrivateApi.getSyncStatus(
         this.handleSyncStatusFetched_.bind(this));
+
+<if expr="chromeos">
+    this.addWebUIListener(

[dpapad, 2016/03/15 00:44:27]

IIUC, this is listener is not needed if easyUnlockAllowed_ is false, and that
value can never change. If that is true, let's wrap this

if (this.easyUnlockAllowed_) {
  this.addWebUIListener(...);
}

[tommycli, 2016/03/15 18:58:27]

Done.

+        'easy-unlock-enabled-status',
+        this.handleEasyUnlockEnabledStatusChanged_.bind(this));

[dpapad, 2016/03/15 00:44:27]

Nit (optional): Given that handleEasyUnlockEnabledStatusChanged_ is a single
line method, and that it is wrapped in <if>, how about simply inlining it here
as an anonymous function? This way there is no need for the 2nd <if> a few lines
below.

[tommycli, 2016/03/15 18:58:27]

I should have mentioned: I will also be doing a cr.sendWithPromise with this as
a the callback fn in the next CL.

+</if>
   },
 
   /**
@@ -86,6 +117,16 @@ Polymer({
     this.$.syncStatusText.innerHTML = syncStatus.statusText;
   },
 
+<if expr="chromeos">
+  /**
+   * Handler for when the Easy Unlock enabled status has changed.
+   * @private
+   */
+  handleEasyUnlockEnabledStatusChanged_: function(easyUnlockEnabled) {
+    this.easyUnlockEnabled_ = easyUnlockEnabled;
+  },
+</if>
+
   /** @private */
   onActionLinkTap_: function() {
     settings.SyncPrivateApi.showSetupUI();