[quickview] Enclose <cr-dialog> in a <dialog> :)

Enclose |cr-dialog-container| in a <dialog> (delete-confirm-dialog) to
ensure that tab index always remains within the <cr-dialog>. Also stop
keydown event propagation to stop them passing out of the <dialog> for
the same reasons.

Implement the functions |showModalElement| and |doneCallback| to show
and close the <dialog>, respectively.

Minor: Change parameter type from HTMLElement to Element on the
FilesConfirmDialog interface.

Bug: 803259
Change-Id: Iea2482c017804e873e0ab0f23b8d7bfe2ba3ca1d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2033012
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#737683}

ui/file_manager/file_manager/foreground/js/file_manager_commands.js

@@ -1017,11 +1017,14 @@ CommandHandler.COMMANDS_['delete'] = new class extends Command {
 
     if (!dialog) {
       dialog = fileManager.ui.deleteConfirmDialog;
+    } else if (dialog.showModalElement) {
+      dialog.showModalElement();
     }
 
     dialog.show(message, () => {
+      dialog.doneCallback && dialog.doneCallback();
       fileManager.fileOperationManager.deleteEntries(entries);
-    }, null, null);
+    }, dialog.doneCallback, null);
   }
 
   /**

ui/file_manager/file_manager/foreground/js/quick_view_controller.js

@@ -279,10 +279,24 @@ class QuickViewController {
 
     // Create a delete confirm dialog if needed.
     if (!this.deleteConfirmDialog_) {
-      const parent = this.quickView_.shadowRoot.getElementById('dialog');
-      assert(parent);
-      this.deleteConfirmDialog_ = new FilesConfirmDialog(parent);
+      const dialogElement = document.createElement('dialog');
+      this.quickView_.shadowRoot.appendChild(dialogElement);
+      dialogElement.id = 'delete-confirm-dialog';
+
+      this.deleteConfirmDialog_ = new FilesConfirmDialog(dialogElement);
       this.deleteConfirmDialog_.setOkLabel(str('DELETE_BUTTON_LABEL'));
+
+      dialogElement.addEventListener('keydown', event => {
+        event.stopPropagation();
+      });
+
+      this.deleteConfirmDialog_.showModalElement = function() {
+        dialogElement.showModal();
+      };
+
+      this.deleteConfirmDialog_.doneCallback = function() {
+        dialogElement.close();
+      };
     }
 
     // Delete the entry.

ui/file_manager/file_manager/foreground/js/ui/files_confirm_dialog.js

@@ -7,7 +7,7 @@
  */
 class FilesConfirmDialog extends cr.ui.dialogs.ConfirmDialog {
   /**
-   * @param {!HTMLElement} parentElement
+   * @param {!Element} parentElement
    */
   constructor(parentElement) {
     super(parentElement);