Files app: Narrow down queries to <body>

Follow up to CL:1869562 With native HTML Imports removed, the polyfill works by adding the imported content to the <head>, with this document.getElementById() can return elements added in the <head> which isn't intended to be returned. For example in the CL above, a "#delete" <command> was conflicting with a SVG icon <g id="delete">. When native HTML imports were used the imported content would be added to a shadow DOM avoiding this conflict. No change in behaviour, this is a preventive change, so it's covered by current suite of tests. Change-Id: Icfbaf9d690a63059de5d22f28c4f7b81919ff640 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1904554Reviewed-by: Alex Danilo <adanilo@chromium.org> Commit-Queue: Luciano Pacheco <lucmult@chromium.org> Auto-Submit: Luciano Pacheco <lucmult@chromium.org> Cr-Commit-Position: refs/heads/master@{#713732}

Files app: Narrow down queries to <body>
Follow up to CL:1869562 With native HTML Imports removed, the polyfill works by adding the imported content to the <head>, with this document.getElementById() can return elements added in the <head> which isn't intended to be returned. For example in the CL above, a "#delete" <command> was conflicting with a SVG icon <g id="delete">. When native HTML imports were used the imported content would be added to a shadow DOM avoiding this conflict. No change in behaviour, this is a preventive change, so it's covered by current suite of tests. Change-Id: Icfbaf9d690a63059de5d22f28c4f7b81919ff640 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1904554Reviewed-by: Alex Danilo <adanilo@chromium.org> Commit-Queue: Luciano Pacheco <lucmult@chromium.org> Auto-Submit: Luciano Pacheco <lucmult@chromium.org> Cr-Commit-Position: refs/heads/master@{#713732}
ebbc9a9c · Luciano Pacheco · Commit Bot · 2060f20b · ebbc9a9c · ebbc9a9c
Commit ebbc9a9c authored Nov 08, 2019 by Luciano Pacheco Committed by Commit Bot Nov 08, 2019
4 changed files
--- a/ui/file_manager/file_manager/foreground/js/file_manager_commands.js
+++ b/ui/file_manager/file_manager/foreground/js/file_manager_commands.js
@@ -164,7 +164,7 @@ CommandUtil.canExecuteVisibleOnDriveInNormalAppModeOnly =
 CommandUtil.forceDefaultHandler = (node, commandId) => {
  const doc = node.ownerDocument;
  const command = /** @type {!cr.ui.Command} */ (
-      doc.querySelector('command[id="' + commandId + '"]'));
+      doc.body.querySelector('command[id="' + commandId + '"]'));
  node.addEventListener('keydown', e => {
    if (command.matchesEvent(e)) {
      // Prevent cr.ui.CommandManager of handling it and leave it

--- a/ui/file_manager/file_manager/foreground/js/file_transfer_controller.js
+++ b/ui/file_manager/file_manager/foreground/js/file_transfer_controller.js
@@ -141,14 +141,14 @@ class FileTransferController {
     * @const
     */
    this.copyCommand_ = /** @type {!cr.ui.Command} */ (
-        queryRequiredElement('command#copy', this.document_));
+        queryRequiredElement('command#copy', assert(this.document_.body)));

    /**
     * @private {!cr.ui.Command}
     * @const
     */
    this.cutCommand_ = /** @type {!cr.ui.Command} */ (
-        queryRequiredElement('command#cut', this.document_));
+        queryRequiredElement('command#cut', assert(this.document_.body)));

    /**
     * @private {DirectoryEntry|FilesAppDirEntry}
@@ -616,7 +616,7 @@ class FileTransferController {
  renderThumbnail_() {
    const length = this.selectionHandler_.selection.entries.length;
    const container = /** @type {HTMLElement} */ (
-        this.document_.querySelector('#drag-container'));
+        this.document_.body.querySelector('#drag-container'));
    const contents = this.document_.createElement('div');
    contents.className = 'drag-contents';
    container.appendChild(contents);
@@ -758,7 +758,7 @@ class FileTransferController {
    // This should be removed after the bug is fixed.
    this.touching_ = false;

-    const container = this.document_.querySelector('#drag-container');
+    const container = this.document_.body.querySelector('#drag-container');
    container.textContent = '';
    this.clearDropTarget_();
    delete window[DRAG_AND_DROP_GLOBAL_DATA];
@@ -1280,7 +1280,7 @@ class FileTransferController {
   * @private
   */
  simulateCommand_(command, handler) {
-    const iframe = this.document_.querySelector('#command-dispatcher');
+    const iframe = this.document_.body.querySelector('#command-dispatcher');
    const doc = iframe.contentDocument;
    doc.addEventListener(command, handler);
    doc.execCommand(command);

--- a/ui/file_manager/file_manager/foreground/js/ui/commandbutton.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/commandbutton.js
@@ -72,7 +72,7 @@ class CommandButton {
    if (typeof command == 'string') {
      assert(command[0] == '#');
      command = /** @type {!cr.ui.Command} */
-          (this.ownerDocument.getElementById(command.slice(1)));
+          (this.ownerDocument.body.querySelector(command));
      cr.ui.decorate(command, cr.ui.Command);
    }


--- a/ui/file_manager/file_manager/foreground/js/ui/multi_menu.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/multi_menu.js
@@ -119,7 +119,7 @@ cr.define('cr.ui', () => {
    }
    set menu(menu) {
      if (typeof menu == 'string' && menu[0] == '#') {
-        menu = assert(this.ownerDocument.getElementById(menu.slice(1)));
+        menu = assert(this.ownerDocument.body.querySelector(menu));
        cr.ui.decorate(menu, cr.ui.Menu);
      }