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

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

Index: chrome/browser/resources/settings/people_page/password_prompt_dialog.js
diff --git a/chrome/browser/resources/settings/people_page/password_prompt_dialog.js b/chrome/browser/resources/settings/people_page/password_prompt_dialog.js
index 2625f2ba6195b916f413eee1bed0a54f0b003676..7bbb914fd5300cd63c563fa22a472c5a68622bb9 100644
--- a/chrome/browser/resources/settings/people_page/password_prompt_dialog.js
+++ b/chrome/browser/resources/settings/people_page/password_prompt_dialog.js
@@ -97,30 +97,13 @@ Polymer({
 
   /** @override */
   attached: function() {
+    this.writeUma_(LockScreenProgress.START_SCREEN_LOCK);
+    this.$.dialog.showModal();
     this.async(function() {
       this.$.passwordInput.focus();

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

I don't understand why this is needed at all.
 - <dialog> supports |autofocus|,
 - password_prompt_dialog.html already uses |autofocus|
 - AFAIK paper-input understands |autofocus| (we already use it in other places
like
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/search....

This was added at https://codereview.chromium.org/2841313002, which claims that
the observed focus was not as expected. Feel free to experiment with removing
this focus() call in a separate CL. I just point it out here, because it seems
unnecessary.

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

I tried removing this but it does not give the expected behavior. Actually I had
to remove |autofocus| as well after moving the dialog into a dom-if to get it
working as expected. Perhaps it's because this dialog does not come up on click
like the other ones?

[dpapad, 2017/06/01 21:44:53]

Thanks for trying.  The logic for focusing an element when a dialog opens is at
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/html/HTML....
@dbeam is more familiar with it.
I am curious to eventually find out why autofocus-ing a paper-input in this
dialog, since at first glance there is nothing special about it (other dialogs
within dom-if seem to work).

[sammiequon, 2017/06/01 22:02:33]

Actually, it's not that autofocus doesn't work, its only doesn't work on the
first try. I think it's because the dialog gets opened as soon as lock screen is
attached or routed to so some things might not be ready. Would putting the async
where the dialog dom-if boolean be a viable solution? (and putting autofocus
back in the paper-input)

this.async( function() { this.showPasswordPromptDialog = true; }).bind(this);   
 in lock_screen.js

WDYT?

     }.bind(this));
   },
 
-  /**
-   * Open up the dialog. This will wait until the dialog has loaded before
-   * opening it.
-   */
-  open: function() {
-    // Wait until the dialog is attached to the DOM before trying to open it.
-    var dialog = /** @type {{isConnected: boolean}} */ (this.$.dialog);
-    if (!dialog.isConnected) {
-      setTimeout(this.open.bind(this));
-      return;
-    }
-
-    if (this.$.dialog.open)
-      return;
-
-    this.writeUma_(LockScreenProgress.START_SCREEN_LOCK);
-    this.$.dialog.showModal();
-  },
-
   /** @private */
   onCancelTap_: function() {
     if (this.$.dialog.open)