MD Settings: Overhaul Easy Unlock Turn Off Dialog.

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview A dialog allowing the user to turn off the Easy Unlock feature.
  */
 
 (function() {
 
 /**
  * Possible UI statuses for the EasyUnlockTurnOffDialogElement.
  * See easy_unlock_settings_handler.cc.
  * @enum {string}
  */
 var EasyUnlockTurnOffStatus = {
   UNKNOWN: 'unknown',
   OFFLINE: 'offline',
   IDLE: 'idle',
   PENDING: 'pending',
   SERVER_ERROR: 'server-error',
 };
 
 Polymer({
   is: 'easy-unlock-turn-off-dialog',
 
   behaviors: [I18nBehavior, WebUIListenerBehavior],
 
   properties: {
-    /** @private {!settings.EasyUnlockBrowserProxy} */
-    browserProxy_: Object,
-
     /** @private {!EasyUnlockTurnOffStatus} */
     status_: {
       type: String,
       value: EasyUnlockTurnOffStatus.UNKNOWN,
     },
-
-    /** @private {?WebUIListener} */
-    turnOffStatusWebUiListener_: {
-      type: Object,
-      value: null,
-    },
   },
 
+  /** @private {settings.EasyUnlockBrowserProxy} */
+  browserProxy_: null,
+
   /** @override */
-  ready: function() {
+  attached: function() {
     this.browserProxy_ = settings.EasyUnlockBrowserProxyImpl.getInstance();
 
     this.addWebUIListener(
         'easy-unlock-enabled-status',
         this.handleEasyUnlockEnabledStatusChanged_.bind(this));
-  },
 
-  /**
-   * Opens the dialog.
-   */
-  open: function() {
+    this.addWebUIListener(
+        'easy-unlock-turn-off-flow-status',
+        function(status) { this.status_ = status; }.bind(this));
+
+    // Since the dialog text depends on the status, defer opening until we have
+    // retrieved the turn off status to prevent UI flicker.
     this.getTurnOffStatus_().then(function(status) {
       this.status_ = status;
       this.$.dialog.showModal();
     }.bind(this));
-
-    // The turn off flow status listener should only be active when the dialog
-    // is actually open.
-    assert(this.turnOffStatusWebUiListener_ == null);
-    this.turnOffStatusWebUiListener_ = cr.addWebUIListener(
-        'easy-unlock-turn-off-flow-status',
-        function(status) { this.status_ = status; }.bind(this));
   },
 
   /**
    * @return {!Promise<!EasyUnlockTurnOffStatus>}
    * @private
    */
   getTurnOffStatus_: function() {
     return navigator.onLine ?
         this.browserProxy_.getTurnOffFlowStatus() :
         Promise.resolve(EasyUnlockTurnOffStatus.OFFLINE);
   },
 
   /**
    * This dialog listens for Easy Unlock to become disabled. This signals
    * that the turnoff process has succeeded. Regardless of whether the turnoff
    * was initiated from this tab or another, this closes the dialog.
    * @param {boolean} easyUnlockEnabled
    * @private
    */
   handleEasyUnlockEnabledStatusChanged_: function(easyUnlockEnabled) {
     var dialog = /** @type {!CrDialogElement} */ this.$.dialog;
     if (!easyUnlockEnabled && dialog.open)
       this.onCancelTap_();
   },
 
   /** @private */
   onCancelTap_: function() {
-    if (this.turnOffStatusWebUiListener_) {
-      cr.removeWebUIListener(this.turnOffStatusWebUiListener_);
-      this.turnOffStatusWebUiListener_ = null;
-    }
-
     this.browserProxy_.cancelTurnOffFlow();
     this.$.dialog.close();
   },
 
   /** @private */
   onTurnOffTap_: function() {
     this.browserProxy_.startTurnOffFlow();
   },
 
   /**
@@ skipping 85 matching lines @@
    * @return {boolean}
    * @private
    */
   isTurnOffButtonEnabled_: function(status) {
     return status == EasyUnlockTurnOffStatus.IDLE ||
         status == EasyUnlockTurnOffStatus.SERVER_ERROR;
   },
 });
 
 })();