Handle cancelling USB VM sharing confirmation dialog via ESC better

Currently this causes the dialog to never come up again -- this CL fixes
it to correctly reset state so future operations can respawn the dialog.

Bug: 1146325
Change-Id: I74c9d7b60937076ad1852f4779fb9cbeacc49799
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2580973Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Timothy Loh <timloh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#836514}

chrome/browser/resources/settings/chromeos/crostini_page/crostini_shared_usb_devices.html

@@ -40,7 +40,7 @@
     </template>
     <template is="dom-if" if="[[reassignDevice_]]" restamp>
       <cr-dialog id="reassignDialog" close-text="$i18n{close}"
-          show-on-attach>
+          on-cancel="onReassignCancel_" show-on-attach>
         <div slot="title">
           $i18n{crostiniSharedUsbDevicesInUse}
         </div>
@@ -49,7 +49,7 @@
         </div>
         <div slot="button-container">
           <cr-button id="cancel" class="cancel-button"
-              on-click="onReassignCancelClick_">
+              on-click="onReassignCancel_">
             $i18n{cancel}
           </cr-button>
           <cr-button id="continue" class="action-button"

chrome/browser/resources/settings/chromeos/crostini_page/crostini_shared_usb_devices.js

@@ -69,7 +69,7 @@ Polymer({
   },
 
   /** @private */
-  onReassignCancelClick_() {
+  onReassignCancel_() {
     this.reassignDevice_ = null;
   },
 

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/plugin_vm_page/plugin_vm_shared_usb_devices.html

@@ -42,7 +42,7 @@
     </template>
     <template is="dom-if" if="[[reassignDevice_]]" restamp>
       <cr-dialog id="reassignDialog" close-text="$i18n{close}"
-          show-on-attach>
+          on-cancel="onReassignCancel_" show-on-attach>
         <div slot="title">
           $i18n{pluginVmSharedUsbDevicesInUse}
         </div>
@@ -51,7 +51,7 @@
         </div>
         <div slot="button-container">
           <cr-button id="cancel" class="cancel-button"
-              on-click="onReassignCancelClick_">
+              on-click="onReassignCancel_">
             $i18n{cancel}
           </cr-button>
           <cr-button id="continue" class="action-button"

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/plugin_vm_page/plugin_vm_shared_usb_devices.js

@@ -69,7 +69,7 @@ Polymer({
   },
 
   /** @private */
-  onReassignCancelClick_() {
+  onReassignCancel_() {
     this.reassignDevice_ = null;
   },
 

chrome/test/data/webui/settings/chromeos/app_management/plugin_vm_shared_usb_devices_test.js

@@ -93,6 +93,17 @@ suite('SharedUsbDevices', function() {
     Polymer.dom.flush();
     assertFalse(!!page.$$('#reassignDialog'));
 
+    // Pressing escape will close the dialog, but it's not possible to trigger
+    // this with a fake keypress, so we instead send the 'cancel' event directly
+    // to the native <dialog> element.
+    items[2].click();
+    Polymer.dom.flush();
+    assertTrue(page.$$('#reassignDialog').open);
+    const e = new CustomEvent('cancel', {cancelable: true});
+    page.$$('#reassignDialog').getNative().dispatchEvent(e);
+    Polymer.dom.flush();
+    assertFalse(!!page.$$('#reassignDialog'));
+
     // Clicking continue will call the proxy and close the dialog.
     items[2].click();
     Polymer.dom.flush();