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

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

Index: chrome/browser/resources/settings/people_page/lock_screen.js
diff --git a/chrome/browser/resources/settings/people_page/lock_screen.js b/chrome/browser/resources/settings/people_page/lock_screen.js
index fe5be029e66e86603bf7fd010986d95b6135aa97..7827fee565a258f88bc1733182566a1cca152063 100644
--- a/chrome/browser/resources/settings/people_page/lock_screen.js
+++ b/chrome/browser/resources/settings/people_page/lock_screen.js
@@ -123,6 +123,12 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /** @private */
+    showPasswordPromptDialog_: Boolean,
+
+    /** @private */
+    showSetupPinDialog_: Boolean,
   },
 
   /** @private {?settings.EasyUnlockBrowserProxy} */
@@ -137,7 +143,7 @@ Polymer({
   /** @override */
   attached: function() {
     if (this.shouldAskForPassword_(settings.getCurrentRoute()))
-      this.$.passwordPrompt.open();
+      this.openPasswordPromptDialog_();
 
     this.easyUnlockBrowserProxy_ =
         settings.EasyUnlockBrowserProxyImpl.getInstance();
@@ -169,7 +175,7 @@ Polymer({
     }
 
     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
@@ -199,26 +205,40 @@ Polymer({
   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();
+  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));
   },
 
-  /** @private */
-  onSetupPinClosed_: function() {
-    cr.ui.focusWithoutInk(assert(this.$$('#setupPinButton')));
+  /**
+   * @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));
   },
 
   /**
@@ -251,16 +271,6 @@ Polymer({
     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);