1 files changed, 39 insertions, 13 deletions

diff --git a/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js b/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
index 59ee2f6e179..554d846387d 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
@@ -6,16 +6,29 @@
  * @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
+ *
+ * Additionally clients can get a reference to the internal native <dialog> via
+ * calling getNative() and inspecting the |returnValue| property inside
  * the 'close' event listener to determine whether it was canceled or just
  * closed, where a truthy value means success, and a falsy value means it was
  * canceled.
+ *
+ * Note that <cr-dialog> wrapper itself always has 0x0 dimensions, and
+ * specifying width/height on <cr-dialog> directly will have no effect on the
+ * internal native <dialog>. Instead use the --cr-dialog-native mixin to specify
+ * width/height (as well as other available mixins to style other parts of the
+ * dialog contents).
  */
 Polymer({
   is: 'cr-dialog',
-  extends: 'dialog',
 
   properties: {
+    open: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
+
     /**
      * Alt-text for the dialog close button.
      */
@@ -63,7 +76,7 @@ Polymer({
     // If the active history entry changes (i.e. user clicks back button),
     // all open dialogs should be cancelled.
     window.addEventListener('popstate', function() {
-      if (!this.ignorePopstate && this.open)
+      if (!this.ignorePopstate && this.$.dialog.open)
         this.cancel();
     }.bind(this));
 
@@ -77,7 +90,7 @@ Polymer({
   /** @override */
   attached: function() {
     var mutationObserverCallback = function() {
-      if (this.open)
+      if (this.$.dialog.open)
         this.addIntersectionObserver_();
       else
         this.removeIntersectionObserver_();
@@ -85,7 +98,7 @@ Polymer({
 
     this.mutationObserver_ = new MutationObserver(mutationObserverCallback);
 
-    this.mutationObserver_.observe(this, {
+    this.mutationObserver_.observe(this.$.dialog, {
       attributes: true,
       attributeFilter: ['open'],
     });
@@ -146,17 +159,20 @@ Polymer({
     }
   },
 
+  showModal: function() {
+    this.$.dialog.showModal();
+    this.open = this.$.dialog.open;
+  },
+
   cancel: function() {
     this.fire('cancel');
-    HTMLDialogElement.prototype.close.call(this, '');
+    this.$.dialog.close();
+    this.open = this.$.dialog.open;
   },
 
-  /**
-   * @param {string=} opt_returnValue
-   * @override
-   */
-  close: function(opt_returnValue) {
-    HTMLDialogElement.prototype.close.call(this, 'success');
+  close: function() {
+    this.$.dialog.close('success');
+    this.open = this.$.dialog.open;
   },
 
   /**
@@ -169,6 +185,16 @@ Polymer({
     e.stopPropagation();
   },
 
+  /**
+   * Expose the inner native <dialog> for some rare cases where it needs to be
+   * directly accessed (for example to programmatically setheight/width, which
+   * would not work on the wrapper).
+   * @return {!HTMLDialogElement}
+   */
+  getNative: function() {
+    return this.$.dialog;
+  },
+
   /** @return {!PaperIconButtonElement} */
   getCloseButton: function() {
     return this.$.close;
@@ -210,7 +236,7 @@ Polymer({
     if (e.button != 0 || e.composedPath()[0].tagName !== 'DIALOG')
       return;
 
-    this.animate(
+    this.$.dialog.animate(
         [
           {transform: 'scale(1)', offset: 0},
           {transform: 'scale(1.02)', offset: 0.4},