CrDialog: Do not refire cancel events from child dialogs.

Split from https://crrev.com/c/1258508.

Bug: None
Change-Id: I71d0598723ce6abe4bb00c70def3728bf32d7b85
Reviewed-on: https://chromium-review.googlesource.com/c/1260508Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#596482}

chrome/test/data/webui/cr_elements/cr_dialog_test.js

@@ -7,6 +7,33 @@ suite('cr-dialog', function() {
     MockInteractions.keyEventOn(element, 'keypress', 13, undefined, 'Enter');
   }
 
+  /**
+   * Creates and shows two nested cr-dialogs.
+   * @return {!Array<!CrDialogElement>} An array of 2 dialogs. The first dialog
+   *     is the outer dialog, and the second is the inner dialog.
+   */
+  function createAndShowNestedDialogs() {
+    document.body.innerHTML = `
+      <cr-dialog id="outer">
+        <div slot="title">outer dialog title</div>
+        <div slot="body">
+          <cr-dialog id="inner">
+            <div slot="title">inner dialog title</div>
+            <div slot="body">body</div>
+          </cr-dialog>
+        </div>
+      </cr-dialog>`;
+
+    const outer = document.body.querySelector('#outer');
+    assertTrue(!!outer);
+    const inner = document.body.querySelector('#inner');
+    assertTrue(!!inner);
+
+    outer.showModal();
+    inner.showModal();
+    return [outer, inner];
+  }
+
   setup(function() {
     PolymerTest.clearBody();
   });
@@ -44,24 +71,9 @@ suite('cr-dialog', function() {
   // <dialog> child to force them to bubble in Shadow DOM V1. Ensure that this
   // mechanism does not interfere with nested <cr-dialog> 'close' events.
   test('close events not fired from <dialog> are not affected', function() {
-    document.body.innerHTML = `
-      <cr-dialog id="outer">
-        <div slot="title">outer dialog title</div>
-        <div slot="body">
-          <cr-dialog id="inner">
-            <div slot="title">inner dialog title</div>
-            <div slot="body">body</div>
-          </cr-dialog>
-        </div>
-      </cr-dialog>`;
-
-    const outer = document.body.querySelector('#outer');
-    assertTrue(!!outer);
-    const inner = document.body.querySelector('#inner');
-    assertTrue(!!inner);
-
-    outer.showModal();
-    inner.showModal();
+    const dialogs = createAndShowNestedDialogs();
+    const outer = dialogs[0];
+    const inner = dialogs[1];
 
     let whenFired = test_util.eventToPromise('close', window);
     inner.close();
@@ -97,6 +109,31 @@ suite('cr-dialog', function() {
     });
   });
 
+  // cr-dialog has to catch and re-fire 'cancel' events fired from it's native
+  // <dialog> child to force them to bubble in Shadow DOM V1. Ensure that this
+  // mechanism does not interfere with nested <cr-dialog> 'cancel' events.
+  test('cancel events not fired from <dialog> are not affected', function() {
+    const dialogs = createAndShowNestedDialogs();
+    const outer = dialogs[0];
+    const inner = dialogs[1];
+
+    let whenFired = test_util.eventToPromise('cancel', window);
+    inner.cancel();
+
+    return whenFired
+        .then(e => {
+          // Check that the event's target is the inner dialog.
+          assertEquals(inner, e.target);
+          whenFired = test_util.eventToPromise('cancel', window);
+          outer.cancel();
+          return whenFired;
+        })
+        .then(e => {
+          // Check that the event's target is the outer dialog.
+          assertEquals(outer, e.target);
+        });
+  });
+
   test('focuses title on show', function() {
     document.body.innerHTML = `
       <cr-dialog>

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

@@ -216,6 +216,10 @@ Polymer({
    * @private
    */
   onNativeDialogCancel_: function(e) {
+    // Ignore any 'cancel' events not fired directly by the <dialog> element.
+    if (e.target !== this.getNative())
+      return;
+
     if (this.noCancel) {
       e.preventDefault();
       return;