# HG changeset patch
# User Nicolas Chevobbe <nchevobbe@mozilla.com>
# Date 1520522459 -3600
# Node ID 354e4a21f31095c749db01a8d75a6177f89db497
# Parent  5fa3bc563b29f4e3a533930f75c518308ba7f9c4
Bug 1441885 - Remove warnings from autocomplete-popup.js; r=jdescottes.

This was caused by an innerHTML assignment. Switching to replaceWith + cloneNode
does the trick.

MozReview-Commit-ID: 4pnIijKoJHU

diff --git a/devtools/client/shared/autocomplete-popup.js b/devtools/client/shared/autocomplete-popup.js
--- a/devtools/client/shared/autocomplete-popup.js
+++ b/devtools/client/shared/autocomplete-popup.js
@@ -59,19 +59,19 @@ function AutocompletePopup(toolboxDoc, o
     "devtools-monospace",
     theme + "-theme");
   // Stop this appearing as an alert to accessibility.
   this._tooltip.panel.setAttribute("role", "presentation");
 
   this._list = this._document.createElementNS(HTML_NS, "ul");
   this._list.setAttribute("flex", "1");
 
-  // The list clone will be inserted in the same document as the anchor, and will receive
-  // a copy of the main list innerHTML to allow screen readers to access the list.
-  this._listClone = this._document.createElementNS(HTML_NS, "ul");
+  // The list clone will be inserted in the same document as the anchor, and will be a
+  // copy of the main list to allow screen readers to access the list.
+  this._listClone = this._list.cloneNode();
   this._listClone.className = "devtools-autocomplete-list-aria-clone";
 
   if (options.listId) {
     this._list.setAttribute("id", options.listId);
   }
   this._list.className = "devtools-autocomplete-listbox " + theme + "-theme";
 
   this._tooltip.setContent(this._list);
@@ -383,18 +383,22 @@ AutocompletePopup.prototype = {
 
     // Make sure the list clone is in the same document as the anchor.
     let anchorDoc = this._activeElement.ownerDocument;
     if (!this._listClone.parentNode || this._listClone.ownerDocument !== anchorDoc) {
       anchorDoc.documentElement.appendChild(this._listClone);
     }
 
     // Update the clone content to match the current list content.
-    // eslint-disable-next-line no-unsanitized/property
-    this._listClone.innerHTML = this._list.innerHTML;
+    const clone = this._list.cloneNode(true);
+    clone.className = "devtools-autocomplete-list-aria-clone";
+    this._listClone.replaceWith(clone);
+
+    // We also need to update the reference.
+    this._listClone = clone;
 
     this._activeElement.setAttribute("aria-activedescendant", id);
   },
 
   /**
    * Clear the aria-activedescendant attribute on the current active element.
    */
   _clearActiveDescendant: function () {