MD User Manager: Refactors existing dialogs in User Manager into <user-manager-dialog>

chrome/browser/resources/md_user_manager/import_supervised_user.js

Index: chrome/browser/resources/md_user_manager/import_supervised_user.js
diff --git a/chrome/browser/resources/md_user_manager/import_supervised_user.js b/chrome/browser/resources/md_user_manager/import_supervised_user.js
index a820afa77e2ff2b96581cf3c49c45ea5dd958a45..20422783e9551d1d3d4f5a8aa20eae59a743b1a4 100644
--- a/chrome/browser/resources/md_user_manager/import_supervised_user.js
+++ b/chrome/browser/resources/md_user_manager/import_supervised_user.js
@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 /**
- * @fileoverview 'import-supervised-user' is a popup that allows user to select
+ * @fileoverview 'import-supervised-user' is a dialog that allows user to select
  * a supervised profile from a list of profiles to import on the current device.
  */
 (function() {
@@ -22,16 +22,6 @@ Polymer({
 
   properties: {
     /**
-     * True if the element is currently hidden. The element toggles this in
-     * order to display itself or hide itself once done.
-     * @private {boolean}
-     */
-    popupHidden_: {
-      type: Boolean,
-      value: true
-    },
-
-    /**
      * The currently signed in user and the custodian.
      * @private {?SignedInUser}
      */
@@ -59,8 +49,13 @@ Polymer({
     }
   },
 
+  /** override */
+  ready: function() {
+    this.$.dialog.lastFocusableNode = this.$.cancel;
+  },
+
   /**
-   * Displays the popup.
+   * Displays the dialog.
    * @param {(!SignedInUser|undefined)} signedInUser
    * @param {!Array<!SupervisedUser>} supervisedUsers
    */
@@ -76,14 +71,7 @@ Polymer({
 
     this.signedInUser_ = signedInUser || null;
     if (this.signedInUser_)
-      this.popupHidden_ = false;
-
-    if (this.popupHidden_)
-      return;
-
-    this.async(function() {
-      this.$$('paper-listbox').focus();
-    }.bind(this));
+      this.$.dialog.open();
   },
 
   /**
@@ -99,20 +87,16 @@ Polymer({
   },
 
   /**
-   * Hides the popup.
-   * @private
-   */
-  onCancelTap_: function() {
-    this.popupHidden_ = true;
-  },
-
-  /**
    * Returns true if the 'Import' button should be enabled and false otherwise.
    * @private

[dpapad, 2016/06/08 23:05:12]

@param missing

[Moe, 2016/06/09 14:10:03]

Done.

    * @return {boolean}

[dpapad, 2016/06/08 23:05:12]

The comment mismatches the code, says "true if enabled", but the code returns
true if disabled.


Nit (optional): Remove comment above and merge with the @return

@return {boolean} Whether the 'Import' button should be disabled.

[Moe, 2016/06/09 14:10:03]

Done. I've seen conflicting reviews about the language "Whether foobar should be
disabled/enabled...". I personally like it though :)

[dpapad, 2016/06/09 17:02:48]

My suggestion comes straight from the style-guide, see
https://google.github.io/styleguide/javascriptguide.xml?showone=Comments#Comm...
(Search for "Whether something occurred")

    */
   isImportDisabled_: function(supervisedUserIndex) {
-    return supervisedUserIndex == NO_USER_SELECTED;
+    var disabled = supervisedUserIndex == NO_USER_SELECTED;
+    if (!disabled) {
+      this.$.dialog.lastFocusableNode = this.$.import;
+    }
+    return disabled;
   },
 
   /**
@@ -123,7 +107,7 @@ Polymer({
   onImportTap_: function() {
     var supervisedUser = this.supervisedUsers_[this.supervisedUserIndex_];
     if (this.signedInUser_ && supervisedUser) {
-      this.popupHidden_ = true;
+      this.$.dialog.close();
       // Event is caught by create-profile.
       this.fire('import', {supervisedUser: supervisedUser,
                            signedInUser: this.signedInUser_});