md-settings: wrap lock screen dialogs in dom-if.

chrome/browser/resources/settings/people_page/lock_screen.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
  * 'settings-lock-screen' allows the user to change how they unlock their
  * device.
  *
  * Example:
@@ skipping 105 matching lines @@
             loadTimeData.getBoolean('easyUnlockProximityDetectionAllowed');
       },
       readOnly: true,
     },
 
     /** @private */
     showEasyUnlockTurnOffDialog_: {
       type: Boolean,
       value: false,
     },
+
+    /** @private */
+    showPasswordPromptDialog_: Boolean,
+
+    /** @private */
+    showSetupPinDialog_: Boolean,
   },
 
   /** @private {?settings.EasyUnlockBrowserProxy} */
   easyUnlockBrowserProxy_: null,
 
   /** @private {?settings.FingerprintBrowserProxy} */
   fingerprintBrowserProxy_: null,
 
   /** selectedUnlockType is defined in LockStateBehavior. */
   observers: ['selectedUnlockTypeChanged_(selectedUnlockType)'],
 
   /** @override */
   attached: function() {
     if (this.shouldAskForPassword_(settings.getCurrentRoute()))
-      this.$.passwordPrompt.open();
+      this.openPasswordPromptDialog_();
 
     this.easyUnlockBrowserProxy_ =
         settings.EasyUnlockBrowserProxyImpl.getInstance();
     this.fingerprintBrowserProxy_ =
         settings.FingerprintBrowserProxyImpl.getInstance();
 
     if (this.easyUnlockAllowed_) {
       this.addWebUIListener(
           'easy-unlock-enabled-status',
           this.handleEasyUnlockEnabledStatusChanged_.bind(this));
@@ skipping 11 matching lines @@
   currentRouteChanged: function(newRoute, oldRoute) {
     if (newRoute == settings.Route.LOCK_SCREEN &&
         this.fingerprintUnlockEnabled_ && this.fingerprintBrowserProxy_) {
       this.fingerprintBrowserProxy_.getNumFingerprints().then(
           function(numFingerprints) {
             this.numFingerprints_ = numFingerprints;
           }.bind(this));
     }
 
     if (this.shouldAskForPassword_(newRoute)) {
-      this.$.passwordPrompt.open();
+      this.openPasswordPromptDialog_();
     } else if (newRoute != settings.Route.FINGERPRINT &&
         oldRoute != settings.Route.FINGERPRINT) {
       // If the user navigated away from the lock screen settings page they will
       // have to re-enter their password. An exception is if they are navigating
       // to or from the fingerprint subpage.
       this.setModes_ = undefined;
     }
   },
 
   /**
    * Called when the unlock type has changed.
    * @param {!string} selected The current unlock type.
    * @private
    */
   selectedUnlockTypeChanged_: function(selected) {
     if (selected == LockScreenUnlockType.VALUE_PENDING)
       return;
 
     if (selected != LockScreenUnlockType.PIN_PASSWORD && this.setModes_) {
       this.setModes_.call(null, [], [], function(didSet) {
         assert(didSet, 'Failed to clear quick unlock modes');
       });
     }
   },
 
   /** @private */
   onSetModesChanged_: function() {
     if (this.shouldAskForPassword_(settings.getCurrentRoute())) {
       this.$.setupPin.close();
-      this.$.passwordPrompt.open();
+      this.openPasswordPromptDialog_();
     }
   },
 
   /** @private */
-  onPasswordClosed_: function() {
-    if (!this.setModes_)
-      settings.navigateTo(settings.Route.PEOPLE);
-    else
-      cr.ui.focusWithoutInk(assert(this.$$('#unlockType')));
-  },
-
-  /** @private */
-  onPinSetupDone_: function() {
-    this.$.setupPin.close();
-  },
-
-  /** @private */
-  onSetupPinClosed_: function() {
-    cr.ui.focusWithoutInk(assert(this.$$('#setupPinButton')));
+  openPasswordPromptDialog_: function() {
+    this.showPasswordPromptDialog_ = true;
+    this.async(function() {
+      var dialog = this.$$('settings-password-prompt-dialog');
+      dialog.addEventListener('close', function() {
+        this.showPasswordPromptDialog_ = false;
+        if (!this.setModes_)
+          settings.navigateToPreviousRoute();
+        else
+          cr.ui.focusWithoutInk(assert(this.$$('#unlockType')));
+      }.bind(this));

[stevenjb, 2017/06/01 17:28:24]

Same here, can we use an on-close binding (and below)? (You'll need to define
these inline functions as methods, but I think that is better anyway).

[sammiequon, 2017/06/01 20:21:10]

Done.

+    }.bind(this));
   },
 
   /**
+   * @param {!Event} e
+   * @private
+   */
+  onConfigurePin_: function(e) {
+    e.preventDefault();
+    this.writeUma_(LockScreenProgress.CHOOSE_PIN_OR_PASSWORD);
+    this.showSetupPinDialog_ = true;
+    this.async(function() {
+      var dialog = this.$$('settings-setup-pin-dialog');
+      dialog.addEventListener('close', function() {

[dpapad, 2017/06/01 17:48:44]

Same here, let's use on-close=, instead of calling addEventListener in JS.

[sammiequon, 2017/06/01 20:21:10]

Done.

+        this.showSetupPinDialog_ = false;
+        cr.ui.focusWithoutInk(assert(this.$$('#setupPinButton')));
+      }.bind(this));
+    }.bind(this));
+  },
+
+  /**
    * Returns true if the setup pin section should be shown.
    * @param {!string} selectedUnlockType The current unlock type. Used to let
    *     Polymer know about the dependency.
    * @private
    */
   showConfigurePinButton_: function(selectedUnlockType) {
     return selectedUnlockType === LockScreenUnlockType.PIN_PASSWORD;
   },
 
   /**
    * @param {boolean} hasPin
    * @private
    */
   getSetupPinText_: function(hasPin) {
     if (hasPin)
       return this.i18n('lockScreenChangePinButton');
     return this.i18n('lockScreenSetupPinButton');
   },
 
   /** @private */
   getDescriptionText_: function() {
     if (this.numFingerprints_ > 0) {
       return this.i18n('lockScreenNumberFingerprints',
           this.numFingerprints_.toString());
     }
 
     return this.i18n('lockScreenEditFingerprintsDescription');
   },
 
-  /**
-   * @param {!Event} e
-   * @private
-   */
-  onConfigurePin_: function(e) {
-    e.preventDefault();
-    this.$.setupPin.open();
-    this.writeUma_(LockScreenProgress.CHOOSE_PIN_OR_PASSWORD);
-  },
-
   /** @private */
   onEditFingerprints_: function() {
     settings.navigateTo(settings.Route.FINGERPRINT);
   },
 
   /**
    * @param {!settings.Route} route
    * @return {boolean} Whether the password dialog should be shown.
    * @private
    */
@@ skipping 49 matching lines @@
   /**
    * @param {boolean} easyUnlockEnabled
    * @param {boolean} proximityDetectionAllowed
    * @private
    */
   getShowEasyUnlockToggle_: function(
       easyUnlockEnabled, proximityDetectionAllowed) {
     return easyUnlockEnabled && proximityDetectionAllowed;
   },
 });