Migrate <cr-dialog> from PaperDialogBehavior to native <dialog>.

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js

Index: ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
diff --git a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
index 9c9d73fdb7eeaf95bb10574131a0d56d354a5b8b..29d7ea913708d7f42bf51bb7d33d7e854927c7f4 100644
--- a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
+++ b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
@@ -3,43 +3,29 @@
 // found in the LICENSE file.
 
 /**
- * @fileoverview 'cr-dialog' is a component for showing a modal dialog.
+ * @fileoverview 'cr-dialog' is a component for showing a modal dialog. If the
+ * dialog is closed via close(), a 'close' event is fired. If the dialog is
+ * canceled via cancel(), a 'cancel' event is fired followed by a 'close' event.
+ * Additionally clients can inspect the dialog's |returnValue| property inside
+ * the 'close' callback to determine whether it was canceled or just closed,

[michaelpg, 2016/07/28 16:50:50]

"callback" is confusing here, since close is also the name of the method on this
element and the method it overrides. i think "the 'close' event listener" is
better

it's also confusing that |returnValue| is an unrelated property of the event
passed to the 'close' listener :-\

[Dan Beam, 2016/07/28 17:31:43]

that's fine by me
there's a HTMLDialogElement#returnValue -- is that the one you're thinking
about?
https://html.spec.whatwg.org/multipage/forms.html#dom-dialog-returnvalue

+ * where a truthy value means success, and a falsy value means it was canceled.
  */
 Polymer({
   is: 'cr-dialog',
+  extends: 'dialog',
 
-  properties: {
-    /** @override */
-    noCancelOnOutsideClick: {
-      type: Boolean,
-      value: true,
-    },
-
-    /** @override */
-    noCancelOnEscKey: {
-      type: Boolean,
-      value: false,
-    },
-
-    /**
-     * @type {!Element}
-     * @override
-     */
-    sizingTarget: {
-      type: Element,
-      value: function() {
-        return assert(this.$$('.body-container'));
-      },
-    },
-
-    /** @override */
-    withBackdrop: {
-      type: Boolean,
-      value: true,
-    },
+  cancel: function() {
+    this.fire('cancel');
+    HTMLDialogElement.prototype.close.call(this);

[michaelpg, 2016/07/28 16:50:50]

shouldn't this provide the returnValue argument ''? otherwise the
this.returnValue property may still be 'success' after a previous call to
this.close()

[Dan Beam, 2016/07/28 17:31:43]

undefined results in '' as a returnValue (of the dialog, not the event) each
time the dialog is closed

we didn't design this API, it's native HTMLDialogElement

[dpapad, 2016/07/28 18:47:34]

Actually after trying this manually it turns out that calling
HTMLDialogElement#close() will not override previous value if it is called with
no arguments, so I changed this to always pass the empty string.

   },
 
-  behaviors: [Polymer.PaperDialogBehavior],
+  /**
+   * @param {string=} opt_returnValue
+   * @override
+   */
+  close: function(opt_returnValue) {

[michaelpg, 2016/07/28 16:50:50]

it looks like nobody ever uses this parameter -- why is it here?

[Dan Beam, 2016/07/28 17:31:43]

we're overriding native HTMLDialogElement#close

+    HTMLDialogElement.prototype.close.call(this, 'success');

[michaelpg, 2016/07/28 16:50:50]

why include opt_returnValue only to discard it?

[Dan Beam, 2016/07/28 17:31:43]

see above

+  },
 
   /** @return {!PaperIconButtonElement} */
   getCloseButton: function() {