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

chrome/browser/resources/settings/people_page/password_prompt_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
  *
  * 'settings-password-prompt-dialog' shows a dialog which asks for the user to
  * enter their password. It validates the password is correct. Once the user has
  * entered their account password, the page fires an 'authenticated' event and
@@ skipping 79 matching lines @@
      * @private
      */
     passwordActiveDurationMs_: {
       type: Number,
       value: PASSWORD_ACTIVE_DURATION_MS,
     },
   },
 
   /** @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)
       this.$.dialog.close();
   },
 
   /**
    * Called whenever the dialog is closed.
    * @private
    */
@@ skipping 73 matching lines @@
     this.quickUnlockPrivate_.getActiveModes(function(modes) {
       var credentials =
           /** @type {!Array<string>} */ (Array(modes.length).fill(''));
       this.quickUnlockPrivate_.setModes(
           this.password_, modes, credentials, onCheck);
     }.bind(this));
   }
 });
 
 })();