Bug 1283042 - make sure we are able to render the DOM elements of the modal highlighter when using the find toolbar on XML documents. r?jaws draft
authorMike de Boer <mdeboer@mozilla.com>
Fri, 09 Sep 2016 14:13:23 +0200
changeset 412170 b39401ed060dadfada12ef5f13c45d2ff9afebe1
parent 412167 feff79e5b1374439f17c5ea10a559acf1380a8d5
child 530885 33ef7b6243bf330b46558cbaa9419097d94e12e2
push id29060
push usermdeboer@mozilla.com
push dateFri, 09 Sep 2016 12:13:43 +0000
reviewersjaws
bugs1283042
milestone51.0a1
Bug 1283042 - make sure we are able to render the DOM elements of the modal highlighter when using the find toolbar on XML documents. r?jaws MozReview-Commit-ID: 15HAGO6DDBD
toolkit/modules/FinderHighlighter.jsm
--- a/toolkit/modules/FinderHighlighter.jsm
+++ b/toolkit/modules/FinderHighlighter.jsm
@@ -83,16 +83,17 @@ const kModalStyles = {
 const kModalOutlineAnim = {
   "keyframes": [
     { transform: "scaleX(1) scaleY(1)" },
     { transform: "scaleX(1.5) scaleY(1.5)", offset: .5, easing: "ease-in" },
     { transform: "scaleX(1) scaleY(1)" }
   ],
   duration: 50,
 };
+const kNSHTML = "http://www.w3.org/1999/xhtml";
 
 function mockAnonymousContentNode(domNode) {
   return {
     setTextContentForElement(id, text) {
       (domNode.querySelector("#" + id) || domNode).textContent = text;
     },
     getAttributeForElement(id, attrName) {
       let node = domNode.querySelector("#" + id) || domNode;
@@ -896,32 +897,32 @@ FinderHighlighter.prototype = {
         this._maybeCreateModalHighlightNodes(window);
       };
       document.addEventListener("visibilitychange", onVisibilityChange);
       return;
     }
 
     // The outline needs to be sitting inside a container, otherwise the anonymous
     // content API won't find it by its ID later...
-    let container = document.createElement("div");
+    let container = document.createElementNS(kNSHTML, "div");
 
     // Create the main (yellow) highlight outline box.
-    let outlineBox = document.createElement("div");
+    let outlineBox = document.createElementNS(kNSHTML, "div");
     outlineBox.setAttribute("id", kModalOutlineId);
     outlineBox.setAttribute("style", this._getStyleString(kModalStyles.outlineNode,
       kDebug ? kModalStyles.outlineNodeDebug : []));
-    let outlineBoxText = document.createElement("span");
+    let outlineBoxText = document.createElementNS(kNSHTML, "span");
     let attrValue = kModalOutlineId + "-text";
     outlineBoxText.setAttribute("id", attrValue);
     outlineBoxText.setAttribute("style", this._getStyleString(kModalStyles.outlineText));
     outlineBox.appendChild(outlineBoxText);
 
     container.appendChild(outlineBox);
     dict.modalHighlightOutline = kDebug ?
-      mockAnonymousContentNode(document.body.appendChild(container.firstChild)) :
+      mockAnonymousContentNode((document.body || document.documentElement).appendChild(container.firstChild)) :
       document.insertAnonymousContent(container);
 
     // Make sure to at least show the dimmed background.
     this._repaintHighlightAllMask(window, false);
   },
 
   /**
    * Build and draw the mask that takes care of the dimmed background that
@@ -932,17 +933,17 @@ FinderHighlighter.prototype = {
    * @param {Boolean} [paintContent]
    */
   _repaintHighlightAllMask(window, paintContent = true) {
     window = window.top;
     let dict = this.getForWindow(window);
     let document = window.document;
 
     const kMaskId = kModalIdPrefix + "-findbar-modalHighlight-outlineMask";
-    let maskNode = document.createElement("div");
+    let maskNode = document.createElementNS(kNSHTML, "div");
 
     // Make sure the dimmed mask node takes the full width and height that's available.
     let {width, height} = dict.lastWindowDimensions = this._getWindowDimensions(window);
     maskNode.setAttribute("id", kMaskId);
     maskNode.setAttribute("style", this._getStyleString(kModalStyles.maskNode,
       [ ["width", width + "px"], ["height", height + "px"] ],
       dict.brightText ? kModalStyles.maskNodeBrightText : [],
       kDebug ? kModalStyles.maskNodeDebug : []));
@@ -955,30 +956,30 @@ FinderHighlighter.prototype = {
       // Create a DOM node for each rectangle representing the ranges we found.
       let maskContent = [];
       const rectStyle = this._getStyleString(kModalStyles.maskRect,
         dict.brightText ? kModalStyles.maskRectBrightText : []);
       for (let [range, rects] of dict.modalHighlightRectsMap) {
         if (dict.updateAllRanges)
           rects = this._updateRangeRects(range);
         for (let rect of rects) {
-          maskContent.push(`<div style="${rectStyle}; top: ${rect.y}px;
+          maskContent.push(`<div xmlns="${kNSHTML}" style="${rectStyle}; top: ${rect.y}px;
             left: ${rect.x}px; height: ${rect.height}px; width: ${rect.width}px;"></div>`);
         }
       }
       dict.updateAllRanges = false;
       maskNode.innerHTML = maskContent.join("");
     }
 
     // Always remove the current mask and insert it a-fresh, because we're not
     // free to alter DOM nodes inside the CanvasFrame.
     this._removeHighlightAllMask(window);
 
     dict.modalHighlightAllMask = kDebug ?
-      mockAnonymousContentNode(document.body.appendChild(maskNode)) :
+      mockAnonymousContentNode((document.body || document.documentElement).appendChild(maskNode)) :
       document.insertAnonymousContent(maskNode);
   },
 
   /**
    * Safely remove the mask AnoymousContent node from the CanvasFrame.
    *
    * @param {nsIDOMWindow} window
    */