Commit ebbc9a9c authored by Luciano Pacheco's avatar Luciano Pacheco Committed by Commit Bot

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: default avatarAlex 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}
parent 2060f20b
...@@ -164,7 +164,7 @@ CommandUtil.canExecuteVisibleOnDriveInNormalAppModeOnly = ...@@ -164,7 +164,7 @@ CommandUtil.canExecuteVisibleOnDriveInNormalAppModeOnly =
CommandUtil.forceDefaultHandler = (node, commandId) => { CommandUtil.forceDefaultHandler = (node, commandId) => {
const doc = node.ownerDocument; const doc = node.ownerDocument;
const command = /** @type {!cr.ui.Command} */ ( const command = /** @type {!cr.ui.Command} */ (
doc.querySelector('command[id="' + commandId + '"]')); doc.body.querySelector('command[id="' + commandId + '"]'));
node.addEventListener('keydown', e => { node.addEventListener('keydown', e => {
if (command.matchesEvent(e)) { if (command.matchesEvent(e)) {
// Prevent cr.ui.CommandManager of handling it and leave it // Prevent cr.ui.CommandManager of handling it and leave it
......
...@@ -141,14 +141,14 @@ class FileTransferController { ...@@ -141,14 +141,14 @@ class FileTransferController {
* @const * @const
*/ */
this.copyCommand_ = /** @type {!cr.ui.Command} */ ( this.copyCommand_ = /** @type {!cr.ui.Command} */ (
queryRequiredElement('command#copy', this.document_)); queryRequiredElement('command#copy', assert(this.document_.body)));
/** /**
* @private {!cr.ui.Command} * @private {!cr.ui.Command}
* @const * @const
*/ */
this.cutCommand_ = /** @type {!cr.ui.Command} */ ( this.cutCommand_ = /** @type {!cr.ui.Command} */ (
queryRequiredElement('command#cut', this.document_)); queryRequiredElement('command#cut', assert(this.document_.body)));
/** /**
* @private {DirectoryEntry|FilesAppDirEntry} * @private {DirectoryEntry|FilesAppDirEntry}
...@@ -616,7 +616,7 @@ class FileTransferController { ...@@ -616,7 +616,7 @@ class FileTransferController {
renderThumbnail_() { renderThumbnail_() {
const length = this.selectionHandler_.selection.entries.length; const length = this.selectionHandler_.selection.entries.length;
const container = /** @type {HTMLElement} */ ( const container = /** @type {HTMLElement} */ (
this.document_.querySelector('#drag-container')); this.document_.body.querySelector('#drag-container'));
const contents = this.document_.createElement('div'); const contents = this.document_.createElement('div');
contents.className = 'drag-contents'; contents.className = 'drag-contents';
container.appendChild(contents); container.appendChild(contents);
...@@ -758,7 +758,7 @@ class FileTransferController { ...@@ -758,7 +758,7 @@ class FileTransferController {
// This should be removed after the bug is fixed. // This should be removed after the bug is fixed.
this.touching_ = false; this.touching_ = false;
const container = this.document_.querySelector('#drag-container'); const container = this.document_.body.querySelector('#drag-container');
container.textContent = ''; container.textContent = '';
this.clearDropTarget_(); this.clearDropTarget_();
delete window[DRAG_AND_DROP_GLOBAL_DATA]; delete window[DRAG_AND_DROP_GLOBAL_DATA];
...@@ -1280,7 +1280,7 @@ class FileTransferController { ...@@ -1280,7 +1280,7 @@ class FileTransferController {
* @private * @private
*/ */
simulateCommand_(command, handler) { simulateCommand_(command, handler) {
const iframe = this.document_.querySelector('#command-dispatcher'); const iframe = this.document_.body.querySelector('#command-dispatcher');
const doc = iframe.contentDocument; const doc = iframe.contentDocument;
doc.addEventListener(command, handler); doc.addEventListener(command, handler);
doc.execCommand(command); doc.execCommand(command);
......
...@@ -72,7 +72,7 @@ class CommandButton { ...@@ -72,7 +72,7 @@ class CommandButton {
if (typeof command == 'string') { if (typeof command == 'string') {
assert(command[0] == '#'); assert(command[0] == '#');
command = /** @type {!cr.ui.Command} */ command = /** @type {!cr.ui.Command} */
(this.ownerDocument.getElementById(command.slice(1))); (this.ownerDocument.body.querySelector(command));
cr.ui.decorate(command, cr.ui.Command); cr.ui.decorate(command, cr.ui.Command);
} }
......
...@@ -119,7 +119,7 @@ cr.define('cr.ui', () => { ...@@ -119,7 +119,7 @@ cr.define('cr.ui', () => {
} }
set menu(menu) { set menu(menu) {
if (typeof menu == 'string' && menu[0] == '#') { 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); cr.ui.decorate(menu, cr.ui.Menu);
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment