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

chrome/browser/resources/md_user_manager/user_manager_dialog.js

Index: chrome/browser/resources/md_user_manager/user_manager_dialog.js
diff --git a/chrome/browser/resources/md_user_manager/user_manager_dialog.js b/chrome/browser/resources/md_user_manager/user_manager_dialog.js
new file mode 100644
index 0000000000000000000000000000000000000000..24d610212f6d0dc027caf9fb5961b59f68a49652
--- /dev/null
+++ b/chrome/browser/resources/md_user_manager/user_manager_dialog.js
@@ -0,0 +1,72 @@
+// 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 'user-manager-dialog' is a modal dialog for the user manager.
+ */
+Polymer({
+  is: 'user-manager-dialog',
+
+  behaviors: [Polymer.PaperDialogBehavior],
+
+  properties: {
+    /** @override */
+    noCancelOnOutsideClick: {
+      type: Boolean,
+      value: true
+    },
+
+    /** @override */
+    withBackdrop: {
+      type: Boolean,
+      value: true
+    },
+
+    /**
+     * The first node that can receive focus.
+     * @type {Node}

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

Can this be null? If not, let's change it to !Node.

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

Done.

+     */
+    firstFocusableNode: {
+      type: Object,
+      value: function() { return this.$.close; },
+      observer: 'firstFocusableNodeChanged_'
+    },
+
+    /**
+     * The last node that can receive focus.
+     * @type {Node}
+     */
+    lastFocusableNode: {
+      type: Object,
+      value: function() { return this.$.close; },
+      observer: 'lastFocusableNodeChanged_'
+    }
+  },
+
+  /**
+   * Returns the first and the last focusable elements in order to wrap the
+   * focus for the dialog in Polymer.PaperDialogBehavior.
+   * @override
+   * @type {Array<Node>}

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

Should this be !Array<!Node>

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

Done.

+   */
+  get _focusableNodes() {
+    return [this.firstFocusableNode, this.lastFocusableNode];
+  },
+
+  /**
+   * Observer for firstFocusableNode. Updates __firstFocusableNode in
+   * Polymer.PaperDialogBehavior.
+   */
+  firstFocusableNodeChanged_: function(newValue) {
+    this.__firstFocusableNode = newValue;

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

This method and the next one seem to modify "private" variables of the behavior.
Can you explain a bit why this is needed? Is there a bug on PaperDialogBehavior
that should eventually be fixed upstream?

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

iron-overlay-behavior wrap the focus for the overlay (keeps the focus inside the
overlay). It provides get _focusableNodes() as a protected function so it can be
overridden to return the first and the last focusable elements if you know what
your content is. However it only looks up _focusableNodes when the dialog opens
and caches the first and the last focusable elements.
This works if the content is static. In import-supervised-user dialog, the
confirm button becomes focusable (enabled) once something is selected on the
dialog. therefore I need to be able to update the "cached" last focusable
element which is not exposed in the API. I'm planning to file a bug and
potentially offer a patch to expose these two variables in the API as I believe
I won't be the first and last person who'd have dynamic focusable content on
their dialogs.

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

Thanks for the explanation.

+  },
+
+  /**
+   * Observer for lastFocusableNodeChanged_. Updates __lastFocusableNode in
+   * Polymer.PaperDialogBehavior.
+   */
+  lastFocusableNodeChanged_: function(newValue) {
+    this.__lastFocusableNode = newValue;
+  }
+});