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
authorMike de Boer <mdeboer@mozilla.com>
Fri, 09 Sep 2016 14:13:23 +0200
changeset 313397 287ff570b1a18bc84c82309e23163557cb9fae6d
parent 313396 68ae5adc423221684ad87a2dc94f7cb864a148f4
child 313398 5febcc03a7299c1fca11af2bf529b8b5be8bb900
push id30681
push userphilringnalda@gmail.com
push dateSat, 10 Sep 2016 07:13:06 +0000
treeherdermozilla-central@61cc64967515 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1283042
milestone51.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
    */