Add m-esr52 at 52.6.0

1 files changed, 1615 insertions, 0 deletions

diff --git a/toolkit/modules/FinderHighlighter.jsm b/toolkit/modules/FinderHighlighter.jsm
new file mode 100644
index 000000000..e2079fd37
--- /dev/null
+++ b/toolkit/modules/FinderHighlighter.jsm
@@ -0,0 +1,1615 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+this.EXPORTED_SYMBOLS = ["FinderHighlighter"];
+
+const { interfaces: Ci, utils: Cu } = Components;
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/Task.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "Color", "resource://gre/modules/Color.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "Rect", "resource://gre/modules/Geometry.jsm");
+XPCOMUtils.defineLazyGetter(this, "kDebug", () => {
+  const kDebugPref = "findbar.modalHighlight.debug";
+  return Services.prefs.getPrefType(kDebugPref) && Services.prefs.getBoolPref(kDebugPref);
+});
+
+const kContentChangeThresholdPx = 5;
+const kBrightTextSampleSize = 5;
+const kModalHighlightRepaintLoFreqMs = 100;
+const kModalHighlightRepaintHiFreqMs = 16;
+const kHighlightAllPref = "findbar.highlightAll";
+const kModalHighlightPref = "findbar.modalHighlight";
+const kFontPropsCSS = ["color", "font-family", "font-kerning", "font-size",
+  "font-size-adjust", "font-stretch", "font-variant", "font-weight", "line-height",
+  "letter-spacing", "text-emphasis", "text-orientation", "text-transform", "word-spacing"];
+const kFontPropsCamelCase = kFontPropsCSS.map(prop => {
+  let parts = prop.split("-");
+  return parts.shift() + parts.map(part => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+});
+const kRGBRE = /^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*/i;
+// This uuid is used to prefix HTML element IDs in order to make them unique and
+// hard to clash with IDs content authors come up with.
+const kModalIdPrefix = "cedee4d0-74c5-4f2d-ab43-4d37c0f9d463";
+const kModalOutlineId = kModalIdPrefix + "-findbar-modalHighlight-outline";
+const kOutlineBoxColor = "255,197,53";
+const kOutlineBoxBorderSize = 2;
+const kOutlineBoxBorderRadius = 3;
+const kModalStyles = {
+  outlineNode: [
+    ["background-color", `rgb(${kOutlineBoxColor})`],
+    ["background-clip", "padding-box"],
+    ["border", `${kOutlineBoxBorderSize}px solid`],
+    ["-moz-border-top-colors", `rgba(${kOutlineBoxColor},.1) rgba(${kOutlineBoxColor},.4) rgba(${kOutlineBoxColor},.7)`],
+    ["-moz-border-right-colors", `rgba(${kOutlineBoxColor},.1) rgba(${kOutlineBoxColor},.4) rgba(${kOutlineBoxColor},.7)`],
+    ["-moz-border-bottom-colors", `rgba(${kOutlineBoxColor},.1) rgba(${kOutlineBoxColor},.4) rgba(${kOutlineBoxColor},.7)`],
+    ["-moz-border-left-colors", `rgba(${kOutlineBoxColor},.1) rgba(${kOutlineBoxColor},.4) rgba(${kOutlineBoxColor},.7)`],
+    ["border-radius", `${kOutlineBoxBorderRadius}px`],
+    ["box-shadow", `0 ${kOutlineBoxBorderSize}px 0 0 rgba(0,0,0,.1)`],
+    ["color", "#000"],
+    ["display", "-moz-box"],
+    ["margin", `-${kOutlineBoxBorderSize}px 0 0 -${kOutlineBoxBorderSize}px !important`],
+    ["overflow", "hidden"],
+    ["pointer-events", "none"],
+    ["position", "absolute"],
+    ["white-space", "nowrap"],
+    ["will-change", "transform"],
+    ["z-index", 2]
+  ],
+  outlineNodeDebug: [ ["z-index", 2147483647] ],
+  outlineText: [
+    ["margin", "0 !important"],
+    ["padding", "0 !important"],
+    ["vertical-align", "top !important"]
+  ],
+  maskNode: [
+    ["background", "rgba(0,0,0,.25)"],
+    ["pointer-events", "none"],
+    ["position", "absolute"],
+    ["z-index", 1]
+  ],
+  maskNodeTransition: [
+    ["transition", "background .2s ease-in"]
+  ],
+  maskNodeDebug: [
+    ["z-index", 2147483646],
+    ["top", 0],
+    ["left", 0]
+  ],
+  maskNodeBrightText: [ ["background", "rgba(255,255,255,.25)"] ]
+};
+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;
+      if (!node.hasAttribute(attrName))
+        return undefined;
+      return node.getAttribute(attrName);
+    },
+    setAttributeForElement(id, attrName, attrValue) {
+      (domNode.querySelector("#" + id) || domNode).setAttribute(attrName, attrValue);
+    },
+    removeAttributeForElement(id, attrName) {
+      let node = domNode.querySelector("#" + id) || domNode;
+      if (!node.hasAttribute(attrName))
+        return;
+      node.removeAttribute(attrName);
+    },
+    remove() {
+      try {
+        domNode.parentNode.removeChild(domNode);
+      } catch (ex) {}
+    },
+    setAnimationForElement(id, keyframes, duration) {
+      return (domNode.querySelector("#" + id) || domNode).animate(keyframes, duration);
+    },
+    setCutoutRectsForElement(id, rects) {
+      // no-op for now.
+    }
+  };
+}
+
+let gWindows = new WeakMap();
+
+/**
+ * FinderHighlighter class that is used by Finder.jsm to take care of the
+ * 'Highlight All' feature, which can highlight all find occurrences in a page.
+ *
+ * @param {Finder} finder Finder.jsm instance
+ */
+function FinderHighlighter(finder) {
+  this._highlightAll = Services.prefs.getBoolPref(kHighlightAllPref);
+  this._modal = Services.prefs.getBoolPref(kModalHighlightPref);
+  this.finder = finder;
+}
+
+FinderHighlighter.prototype = {
+  get iterator() {
+    if (this._iterator)
+      return this._iterator;
+    this._iterator = Cu.import("resource://gre/modules/FinderIterator.jsm", null).FinderIterator;
+    return this._iterator;
+  },
+
+  /**
+   * Each window is unique, globally, and the relation between an active
+   * highlighting session and a window is 1:1.
+   * For each window we track a number of properties which _at least_ consist of
+   *  - {Boolean} detectedGeometryChange Whether the geometry of the found ranges'
+   *                                     rectangles has changed substantially
+   *  - {Set}     dynamicRangesSet       Set of ranges that may move around, depending
+   *                                     on page layout changes and user input
+   *  - {Map}     frames                 Collection of frames that were encountered
+   *                                     when inspecting the found ranges
+   *  - {Map}     modalHighlightRectsMap Collection of ranges and their corresponding
+   *                                     Rects
+   *
+   * @param  {nsIDOMWindow} window
+   * @return {Object}
+   */
+  getForWindow(window, propName = null) {
+    if (!gWindows.has(window)) {
+      gWindows.set(window, {
+        detectedGeometryChange: false,
+        dynamicRangesSet: new Set(),
+        frames: new Map(),
+        modalHighlightRectsMap: new Map(),
+        previousRangeRectsCount: 0
+      });
+    }
+    return gWindows.get(window);
+  },
+
+  /**
+   * Notify all registered listeners that the 'Highlight All' operation finished.
+   *
+   * @param {Boolean} highlight Whether highlighting was turned on
+   */
+  notifyFinished(highlight) {
+    for (let l of this.finder._listeners) {
+      try {
+        l.onHighlightFinished(highlight);
+      } catch (ex) {}
+    }
+  },
+
+  /**
+   * Toggle highlighting all occurrences of a word in a page. This method will
+   * be called recursively for each (i)frame inside a page.
+   *
+   * @param {Booolean} highlight Whether highlighting should be turned on
+   * @param {String}   word      Needle to search for and highlight when found
+   * @param {Boolean}  linksOnly Only consider nodes that are links for the search
+   * @yield {Promise}  that resolves once the operation has finished
+   */
+  highlight: Task.async(function* (highlight, word, linksOnly) {
+    let window = this.finder._getWindow();
+    let dict = this.getForWindow(window);
+    let controller = this.finder._getSelectionController(window);
+    let doc = window.document;
+    this._found = false;
+
+    if (!controller || !doc || !doc.documentElement) {
+      // Without the selection controller,
+      // we are unable to (un)highlight any matches
+      return;
+    }
+
+    if (highlight) {
+      let params = {
+        allowDistance: 1,
+        caseSensitive: this.finder._fastFind.caseSensitive,
+        entireWord: this.finder._fastFind.entireWord,
+        linksOnly, word,
+        finder: this.finder,
+        listener: this,
+        useCache: true,
+        window
+      };
+      if (this.iterator.isAlreadyRunning(params) ||
+          (this._modal && this.iterator._areParamsEqual(params, dict.lastIteratorParams))) {
+        return;
+      }
+
+      if (!this._modal)
+        dict.visible = true;
+      yield this.iterator.start(params);
+      if (this._found) {
+        this.finder._outlineLink(true);
+        dict.updateAllRanges = true;
+      }
+    } else {
+      this.hide(window);
+
+      // Removing the highlighting always succeeds, so return true.
+      this._found = true;
+    }
+
+    this.notifyFinished({ highlight, found: this._found });
+  }),
+
+  // FinderIterator listener implementation
+
+  onIteratorRangeFound(range) {
+    this.highlightRange(range);
+    this._found = true;
+  },
+
+  onIteratorReset() {},
+
+  onIteratorRestart() {
+    this.clear(this.finder._getWindow());
+  },
+
+  onIteratorStart(params) {
+    let window = this.finder._getWindow();
+    let dict = this.getForWindow(window);
+    // Save a clean params set for use later in the `update()` method.
+    dict.lastIteratorParams = params;
+    if (!this._modal)
+      this.hide(window, this.finder._fastFind.getFoundRange());
+    this.clear(window);
+  },
+
+  /**
+   * Add a range to the find selection, i.e. highlight it, and if it's inside an
+   * editable node, track it.
+   *
+   * @param {nsIDOMRange} range Range object to be highlighted
+   */
+  highlightRange(range) {
+    let node = range.startContainer;
+    let editableNode = this._getEditableNode(node);
+    let window = node.ownerDocument.defaultView;
+    let controller = this.finder._getSelectionController(window);
+    if (editableNode) {
+      controller = editableNode.editor.selectionController;
+    }
+
+    if (this._modal) {
+      this._modalHighlight(range, controller, window);
+    } else {
+      let findSelection = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND);
+      findSelection.addRange(range);
+      // Check if the range is inside an iframe.
+      if (window != window.top) {
+        let dict = this.getForWindow(window.top);
+        if (!dict.frames.has(window))
+          dict.frames.set(window, null);
+      }
+    }
+
+    if (editableNode) {
+      // Highlighting added, so cache this editor, and hook up listeners
+      // to ensure we deal properly with edits within the highlighting
+      this._addEditorListeners(editableNode.editor);
+    }
+  },
+
+  /**
+   * If modal highlighting is enabled, show the dimmed background that will overlay
+   * the page.
+   *
+   * @param {nsIDOMWindow} window The dimmed background will overlay this window.
+   *                              Optional, defaults to the finder window.
+   */
+  show(window = null) {
+    window = (window || this.finder._getWindow()).top;
+    let dict = this.getForWindow(window);
+    if (!this._modal || dict.visible)
+      return;
+
+    dict.visible = true;
+
+    this._maybeCreateModalHighlightNodes(window);
+    this._addModalHighlightListeners(window);
+  },
+
+  /**
+   * Clear all highlighted matches. If modal highlighting is enabled and
+   * the outline + dimmed background is currently visible, both will be hidden.
+   *
+   * @param {nsIDOMWindow} window    The dimmed background will overlay this window.
+   *                                 Optional, defaults to the finder window.
+   * @param {nsIDOMRange}  skipRange A range that should not be removed from the
+   *                                 find selection.
+   * @param {nsIDOMEvent}  event     When called from an event handler, this will
+   *                                 be the triggering event.
+   */
+  hide(window, skipRange = null, event = null) {
+    try {
+      window = window.top;
+    } catch (ex) {
+      Cu.reportError(ex);
+      return;
+    }
+    let dict = this.getForWindow(window);
+
+    let isBusySelecting = dict.busySelecting;
+    dict.busySelecting = false;
+    // Do not hide on anything but a left-click.
+    if (event && event.type == "click" && (event.button !== 0 || event.altKey ||
+        event.ctrlKey || event.metaKey || event.shiftKey || event.relatedTarget ||
+        isBusySelecting || (event.target.localName == "a" && event.target.href))) {
+      return;
+    }
+
+    this._clearSelection(this.finder._getSelectionController(window), skipRange);
+    for (let frame of dict.frames.keys())
+      this._clearSelection(this.finder._getSelectionController(frame), skipRange);
+
+    // Next, check our editor cache, for editors belonging to this
+    // document
+    if (this._editors) {
+      let doc = window.document;
+      for (let x = this._editors.length - 1; x >= 0; --x) {
+        if (this._editors[x].document == doc) {
+          this._clearSelection(this._editors[x].selectionController, skipRange);
+          // We don't need to listen to this editor any more
+          this._unhookListenersAtIndex(x);
+        }
+      }
+    }
+
+    if (dict.modalRepaintScheduler) {
+      window.clearTimeout(dict.modalRepaintScheduler);
+      dict.modalRepaintScheduler = null;
+    }
+    dict.lastWindowDimensions = null;
+
+    if (dict.modalHighlightOutline) {
+      dict.modalHighlightOutline.setAttributeForElement(kModalOutlineId, "style",
+        dict.modalHighlightOutline.getAttributeForElement(kModalOutlineId, "style") +
+        "; opacity: 0");
+    }
+
+    this._removeHighlightAllMask(window);
+    this._removeModalHighlightListeners(window);
+
+    dict.visible = false;
+  },
+
+  /**
+   * Called by the Finder after a find result comes in; update the position and
+   * content of the outline to the newly found occurrence.
+   * To make sure that the outline covers the found range completely, all the
+   * CSS styles that influence the text are copied and applied to the outline.
+   *
+   * @param {Object} data Dictionary coming from Finder that contains the
+   *                      following properties:
+   *   {Number}  result        One of the nsITypeAheadFind.FIND_* constants
+   *                           indicating the result of a search operation.
+   *   {Boolean} findBackwards If TRUE, the search was performed backwards,
+   *                           FALSE if forwards.
+   *   {Boolean} findAgain     If TRUE, the search was performed using the same
+   *                           search string as before.
+   *   {String}  linkURL       If a link was hit, this will contain a URL string.
+   *   {Rect}    rect          An object with top, left, width and height
+   *                           coordinates of the current selection.
+   *   {String}  searchString  The string the search was performed with.
+   *   {Boolean} storeResult   Indicator if the search string should be stored
+   *                           by the consumer of the Finder.
+   */
+  update(data) {
+    let window = this.finder._getWindow();
+    let dict = this.getForWindow(window);
+    let foundRange = this.finder._fastFind.getFoundRange();
+
+    // Place the match placeholder on top of the current found range.
+    if (data.result == Ci.nsITypeAheadFind.FIND_NOTFOUND || !data.searchString || !foundRange) {
+      this.hide(window);
+      return;
+    }
+
+    if (!this._modal) {
+      if (this._highlightAll) {
+        dict.currentFoundRange = foundRange;
+        let params = this.iterator.params;
+        if (dict.visible && this.iterator._areParamsEqual(params, dict.lastIteratorParams))
+          return;
+        if (!dict.visible && !params)
+          params = {word: data.searchString, linksOnly: data.linksOnly};
+        if (params)
+          this.highlight(true, params.word, params.linksOnly);
+      }
+      return;
+    }
+
+    if (foundRange !== dict.currentFoundRange || data.findAgain) {
+      dict.currentFoundRange = foundRange;
+
+      let textContent = this._getRangeContentArray(foundRange);
+      if (!textContent.length) {
+        this.hide(window);
+        return;
+      }
+
+      if (data.findAgain)
+        dict.updateAllRanges = true;
+
+      if (!dict.visible)
+        this.show(window);
+      else
+        this._maybeCreateModalHighlightNodes(window);
+    }
+
+    let outlineNode = dict.modalHighlightOutline;
+    if (outlineNode) {
+      if (dict.animation)
+        dict.animation.finish();
+      dict.animation = outlineNode.setAnimationForElement(kModalOutlineId,
+        Cu.cloneInto(kModalOutlineAnim.keyframes, window), kModalOutlineAnim.duration);
+      dict.animation.onfinish = () => dict.animation = null;
+    }
+
+    if (this._highlightAll)
+      this.highlight(true, data.searchString, data.linksOnly);
+  },
+
+  /**
+   * Invalidates the list by clearing the map of highlighted ranges that we
+   * keep to build the mask for.
+   */
+  clear(window = null) {
+    if (!window || !window.top)
+      return;
+
+    let dict = this.getForWindow(window.top);
+    if (dict.animation)
+      dict.animation.finish();
+    dict.dynamicRangesSet.clear();
+    dict.frames.clear();
+    dict.modalHighlightRectsMap.clear();
+    dict.brightText = null;
+  },
+
+  /**
+   * When the current page is refreshed or navigated away from, the CanvasFrame
+   * contents is not valid anymore, i.e. all anonymous content is destroyed.
+   * We need to clear the references we keep, which'll make sure we redraw
+   * everything when the user starts to find in page again.
+   */
+  onLocationChange() {
+    let window = this.finder._getWindow();
+    if (!window || !window.top)
+      return;
+    this.hide(window);
+    let dict = this.getForWindow(window);
+    this.clear(window);
+    dict.currentFoundRange = dict.lastIteratorParams = null;
+
+    if (!dict.modalHighlightOutline)
+      return;
+
+    if (kDebug) {
+      dict.modalHighlightOutline.remove();
+    } else {
+      try {
+        window.document.removeAnonymousContent(dict.modalHighlightOutline);
+      } catch (ex) {}
+    }
+
+    dict.modalHighlightOutline = null;
+  },
+
+  /**
+   * When `kModalHighlightPref` pref changed during a session, this callback is
+   * invoked. When modal highlighting is turned off, we hide the CanvasFrame
+   * contents.
+   *
+   * @param {Boolean} useModalHighlight
+   */
+  onModalHighlightChange(useModalHighlight) {
+    let window = this.finder._getWindow();
+    if (window && this._modal && !useModalHighlight) {
+      this.hide(window);
+      this.clear(window);
+    }
+    this._modal = useModalHighlight;
+  },
+
+  /**
+   * When 'Highlight All' is toggled during a session, this callback is invoked
+   * and when it's turned off, the found occurrences will be removed from the mask.
+   *
+   * @param {Boolean} highlightAll
+   */
+  onHighlightAllChange(highlightAll) {
+    this._highlightAll = highlightAll;
+    if (!highlightAll) {
+      let window = this.finder._getWindow();
+      if (!this._modal)
+        this.hide(window);
+      this.clear(window);
+      this._scheduleRepaintOfMask(window);
+    }
+  },
+
+  /**
+   * Utility; removes all ranges from the find selection that belongs to a
+   * controller. Optionally skips a specific range.
+   *
+   * @param  {nsISelectionController} controller
+   * @param  {nsIDOMRange}            restoreRange
+   */
+  _clearSelection(controller, restoreRange = null) {
+    if (!controller)
+      return;
+    let sel = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND);
+    sel.removeAllRanges();
+    if (restoreRange) {
+      sel = controller.getSelection(Ci.nsISelectionController.SELECTION_NORMAL);
+      sel.addRange(restoreRange);
+      controller.setDisplaySelection(Ci.nsISelectionController.SELECTION_ATTENTION);
+      controller.repaintSelection(Ci.nsISelectionController.SELECTION_NORMAL);
+    }
+  },
+
+  /**
+   * Utility; get the nsIDOMWindowUtils for a window.
+   *
+   * @param  {nsIDOMWindow} window Optional, defaults to the finder window.
+   * @return {nsIDOMWindowUtils}
+   */
+  _getDWU(window = null) {
+    return (window || this.finder._getWindow())
+      .QueryInterface(Ci.nsIInterfaceRequestor)
+      .getInterface(Ci.nsIDOMWindowUtils);
+  },
+
+  /**
+   * Utility; returns the bounds of the page relative to the viewport.
+   * If the pages is part of a frameset or inside an iframe of any kind, its
+   * offset is accounted for.
+   * Geometry.jsm takes care of the DOMRect calculations.
+   *
+   * @param  {nsIDOMWindow} window          Window to read the boundary rect from
+   * @param  {Boolean}      [includeScroll] Whether to ignore the scroll offset,
+   *                                        which is useful for comparing DOMRects.
+   *                                        Optional, defaults to `true`
+   * @return {Rect}
+   */
+  _getRootBounds(window, includeScroll = true) {
+    let dwu = this._getDWU(window.top);
+    let cssPageRect = Rect.fromRect(dwu.getRootBounds());
+    let scrollX = {};
+    let scrollY = {};
+    if (includeScroll && window == window.top) {
+      dwu.getScrollXY(false, scrollX, scrollY);
+      cssPageRect.translate(scrollX.value, scrollY.value);
+    }
+
+    // If we're in a frame, update the position of the rect (top/ left).
+    let currWin = window;
+    while (currWin != window.top) {
+      // Since the frame is an element inside a parent window, we'd like to
+      // learn its position relative to it.
+      let el = this._getDWU(currWin).containerElement;
+      currWin = currWin.parent;
+      dwu = this._getDWU(currWin);
+      let parentRect = Rect.fromRect(dwu.getBoundsWithoutFlushing(el));
+
+      if (includeScroll) {
+        dwu.getScrollXY(false, scrollX, scrollY);
+        parentRect.translate(scrollX.value, scrollY.value);
+        // If the current window is an iframe with scrolling="no" and its parent
+        // is also an iframe the scroll offsets from the parents' documentElement
+        // (inverse scroll position) needs to be subtracted from the parent
+        // window rect.
+        if (el.getAttribute("scrolling") == "no" && currWin != window.top) {
+          let docEl = currWin.document.documentElement;
+          parentRect.translate(-docEl.scrollLeft, -docEl.scrollTop);
+        }
+      }
+
+      cssPageRect.translate(parentRect.left, parentRect.top);
+    }
+
+    return cssPageRect;
+  },
+
+  /**
+   * Utility; fetch the full width and height of the current window, excluding
+   * scrollbars.
+   *
+   * @param  {nsiDOMWindow} window The current finder window.
+   * @return {Object} The current full page dimensions with `width` and `height`
+   *                  properties
+   */
+  _getWindowDimensions(window) {
+    // First we'll try without flushing layout, because it's way faster.
+    let dwu = this._getDWU(window);
+    let { width, height } = dwu.getRootBounds();
+
+    if (!width || !height) {
+      // We need a flush after all :'(
+      width = window.innerWidth + window.scrollMaxX - window.scrollMinX;
+      height = window.innerHeight + window.scrollMaxY - window.scrollMinY;
+
+      let scrollbarHeight = {};
+      let scrollbarWidth = {};
+      dwu.getScrollbarSize(false, scrollbarWidth, scrollbarHeight);
+      width -= scrollbarWidth.value;
+      height -= scrollbarHeight.value;
+    }
+
+    return { width, height };
+  },
+
+  /**
+   * Utility; fetch the current text contents of a given range.
+   *
+   * @param  {nsIDOMRange} range Range object to extract the contents from.
+   * @return {Array} Snippets of text.
+   */
+  _getRangeContentArray(range) {
+    let content = range.cloneContents();
+    let textContent = [];
+    for (let node of content.childNodes) {
+      textContent.push(node.textContent || node.nodeValue);
+    }
+    return textContent;
+  },
+
+  /**
+   * Utility; get all available font styles as applied to the content of a given
+   * range. The CSS properties we look for can be found in `kFontPropsCSS`.
+   *
+   * @param  {nsIDOMRange} range Range to fetch style info from.
+   * @return {Object} Dictionary consisting of the styles that were found.
+   */
+  _getRangeFontStyle(range) {
+    let node = range.startContainer;
+    while (node.nodeType != 1)
+      node = node.parentNode;
+    let style = node.ownerDocument.defaultView.getComputedStyle(node, "");
+    let props = {};
+    for (let prop of kFontPropsCamelCase) {
+      if (prop in style && style[prop])
+        props[prop] = style[prop];
+    }
+    return props;
+  },
+
+  /**
+   * Utility; transform a dictionary object as returned by `_getRangeFontStyle`
+   * above into a HTML style attribute value.
+   *
+   * @param  {Object} fontStyle
+   * @return {String}
+   */
+  _getHTMLFontStyle(fontStyle) {
+    let style = [];
+    for (let prop of Object.getOwnPropertyNames(fontStyle)) {
+      let idx = kFontPropsCamelCase.indexOf(prop);
+      if (idx == -1)
+        continue;
+      style.push(`${kFontPropsCSS[idx]}: ${fontStyle[prop]}`);
+    }
+    return style.join("; ");
+  },
+
+  /**
+   * Transform a style definition array as defined in `kModalStyles` into a CSS
+   * string that can be used to set the 'style' property of a DOM node.
+   *
+   * @param  {Array}    stylePairs         Two-dimensional array of style pairs
+   * @param  {...Array} [additionalStyles] Optional set of style pairs that will
+   *                                       augment or override the styles defined
+   *                                       by `stylePairs`
+   * @return {String}
+   */
+  _getStyleString(stylePairs, ...additionalStyles) {
+    let baseStyle = new Map(stylePairs);
+    for (let additionalStyle of additionalStyles) {
+      for (let [prop, value] of additionalStyle)
+        baseStyle.set(prop, value);
+    }
+    return [...baseStyle].map(([cssProp, cssVal]) => `${cssProp}: ${cssVal}`).join("; ");
+  },
+
+  /**
+   * Checks whether a CSS RGB color value can be classified as being 'bright'.
+   *
+   * @param  {String} cssColor RGB color value in the default format rgb[a](r,g,b)
+   * @return {Boolean}
+   */
+  _isColorBright(cssColor) {
+    cssColor = cssColor.match(kRGBRE);
+    if (!cssColor || !cssColor.length)
+      return false;
+    cssColor.shift();
+    return new Color(...cssColor).isBright;
+  },
+
+  /**
+   * Detects if the overall text color in the page can be described as bright.
+   * This is done according to the following algorithm:
+   *  1. With the entire set of ranges that we have found thusfar;
+   *  2. Get an odd-numbered `sampleSize`, with a maximum of `kBrightTextSampleSize`
+   *     ranges,
+   *  3. Slice the set of ranges into `sampleSize` number of equal parts,
+   *  4. Grab the first range for each slice and inspect the brightness of the
+   *     color of its text content.
+   *  5. When the majority of ranges are counted as contain bright colored text,
+   *     the page is considered to contain bright text overall.
+   *
+   * @param {Object} dict Dictionary of properties belonging to the
+   *                      currently active window. The page text color property
+   *                      will be recorded in `dict.brightText` as `true` or `false`.
+   */
+  _detectBrightText(dict) {
+    let sampleSize = Math.min(dict.modalHighlightRectsMap.size, kBrightTextSampleSize);
+    let ranges = [...dict.modalHighlightRectsMap.keys()];
+    let rangesCount = ranges.length;
+    // Make sure the sample size is an odd number.
+    if (sampleSize % 2 == 0) {
+      // Make the currently found range weigh heavier.
+      if (dict.currentFoundRange) {
+        ranges.push(dict.currentFoundRange);
+        ++sampleSize;
+        ++rangesCount;
+      } else {
+        --sampleSize;
+      }
+    }
+    let brightCount = 0;
+    for (let i = 0; i < sampleSize; ++i) {
+      let range = ranges[Math.floor((rangesCount / sampleSize) * i)];
+      let fontStyle = this._getRangeFontStyle(range);
+      if (this._isColorBright(fontStyle.color))
+        ++brightCount;
+    }
+
+    dict.brightText = (brightCount >= Math.ceil(sampleSize / 2));
+  },
+
+  /**
+   * Checks if a range is inside a DOM node that's positioned in a way that it
+   * doesn't scroll along when the document is scrolled and/ or zoomed. This
+   * is the case for 'fixed' and 'sticky' positioned elements, elements inside
+   * (i)frames and elements that have their overflow styles set to 'auto' or
+   * 'scroll'.
+   *
+   * @param  {nsIDOMRange} range Range that be enclosed in a dynamic container
+   * @return {Boolean}
+   */
+  _isInDynamicContainer(range) {
+    const kFixed = new Set(["fixed", "sticky", "scroll", "auto"]);
+    let node = range.startContainer;
+    while (node.nodeType != 1)
+      node = node.parentNode;
+    let document = node.ownerDocument;
+    let window = document.defaultView;
+    let dict = this.getForWindow(window.top);
+
+    // Check if we're in a frameset (including iframes).
+    if (window != window.top) {
+      if (!dict.frames.has(window))
+        dict.frames.set(window, null);
+      return true;
+    }
+
+    do {
+      let style = window.getComputedStyle(node, null);
+      if (kFixed.has(style.position) || kFixed.has(style.overflow) ||
+          kFixed.has(style.overflowX) || kFixed.has(style.overflowY)) {
+        return true;
+      }
+      node = node.parentNode;
+    } while (node && node != document.documentElement)
+
+    return false;
+  },
+
+  /**
+   * Read and store the rectangles that encompass the entire region of a range
+   * for use by the drawing function of the highlighter.
+   *
+   * @param  {nsIDOMRange} range  Range to fetch the rectangles from
+   * @param  {Object}      [dict] Dictionary of properties belonging to
+   *                              the currently active window
+   * @return {Set}         Set of rects that were found for the range
+   */
+  _getRangeRects(range, dict = null) {
+    let window = range.startContainer.ownerDocument.defaultView;
+    let bounds;
+    // If the window is part of a frameset, try to cache the bounds query.
+    if (dict && dict.frames.has(window)) {
+      bounds = dict.frames.get(window);
+      if (!bounds) {
+        bounds = this._getRootBounds(window);
+        dict.frames.set(window, bounds);
+      }
+    } else
+      bounds = this._getRootBounds(window);
+
+    let topBounds = this._getRootBounds(window.top, false);
+    let rects = [];
+    // A range may consist of multiple rectangles, we can also do these kind of
+    // precise cut-outs. range.getBoundingClientRect() returns the fully
+    // encompassing rectangle, which is too much for our purpose here.
+    for (let rect of range.getClientRects()) {
+      rect = Rect.fromRect(rect);
+      rect.x += bounds.x;
+      rect.y += bounds.y;
+      // If the rect is not even visible from the top document, we can ignore it.
+      if (rect.intersects(topBounds))
+        rects.push(rect);
+    }
+    return rects;
+  },
+
+  /**
+   * Read and store the rectangles that encompass the entire region of a range
+   * for use by the drawing function of the highlighter and store them in the
+   * cache.
+   *
+   * @param  {nsIDOMRange} range            Range to fetch the rectangles from
+   * @param  {Boolean}     [checkIfDynamic] Whether we should check if the range
+   *                                        is dynamic as per the rules in
+   *                                        `_isInDynamicContainer()`. Optional,
+   *                                        defaults to `true`
+   * @param  {Object}      [dict]           Dictionary of properties belonging to
+   *                                        the currently active window
+   * @return {Set}         Set of rects that were found for the range
+   */
+  _updateRangeRects(range, checkIfDynamic = true, dict = null) {
+    let window = range.startContainer.ownerDocument.defaultView;
+    let rects = this._getRangeRects(range, dict);
+
+    // Only fetch the rect at this point, if not passed in as argument.
+    dict = dict || this.getForWindow(window.top);
+    let oldRects = dict.modalHighlightRectsMap.get(range);
+    dict.modalHighlightRectsMap.set(range, rects);
+    // Check here if we suddenly went down to zero rects from more than zero before,
+    // which indicates that we should re-iterate the document.
+    if (oldRects && oldRects.length && !rects.length)
+      dict.detectedGeometryChange = true;
+    if (checkIfDynamic && this._isInDynamicContainer(range))
+      dict.dynamicRangesSet.add(range);
+    return rects;
+  },
+
+  /**
+   * Re-read the rectangles of the ranges that we keep track of separately,
+   * because they're enclosed by a position: fixed container DOM node or (i)frame.
+   *
+   * @param {Object} dict Dictionary of properties belonging to the currently
+   *                      active window
+   */
+  _updateDynamicRangesRects(dict) {
+    // Reset the frame bounds cache.
+    for (let frame of dict.frames.keys())
+      dict.frames.set(frame, null);
+    for (let range of dict.dynamicRangesSet)
+      this._updateRangeRects(range, false, dict);
+  },
+
+  /**
+   * Update the content, position and style of the yellow current found range
+   * outline that floats atop the mask with the dimmed background.
+   * Rebuild it, if necessary, This will deactivate the animation between
+   * occurrences.
+   *
+   * @param {Object} dict          Dictionary of properties belonging to the
+   *                               currently active window
+   * @param {Array}  [textContent] Array of text that's inside the range. Optional,
+   *                               defaults to `null`
+   * @param {Object} [fontStyle]   Dictionary of CSS styles in camelCase as
+   *                               returned by `_getRangeFontStyle()`. Optional
+   */
+  _updateRangeOutline(dict, textContent = null, fontStyle = null) {
+    let range = dict.currentFoundRange;
+    if (!range)
+      return;
+
+    fontStyle = fontStyle || this._getRangeFontStyle(range);
+    // Text color in the outline is determined by kModalStyles.
+    delete fontStyle.color;
+
+    let rects = this._getRangeRects(range);
+    textContent = textContent || this._getRangeContentArray(range);
+
+    let outlineAnonNode = dict.modalHighlightOutline;
+    let rectCount = rects.length;
+    // (re-)Building the outline is conditional and happens when one of the
+    // following conditions is met:
+    // 1. No outline nodes were built before, or
+    // 2. When the amount of rectangles to draw is different from before, or
+    // 3. When there's more than one rectangle to draw, because it's impossible
+    //    to animate that consistently with AnonymousContent nodes.
+    let rebuildOutline = (!outlineAnonNode || rectCount !== dict.previousRangeRectsCount ||
+      rectCount != 1);
+    dict.previousRangeRectsCount = rectCount;
+
+    let window = range.startContainer.ownerDocument.defaultView.top;
+    let document = window.document;
+    // First see if we need to and can remove the previous outline nodes.
+    if (rebuildOutline && outlineAnonNode) {
+      if (kDebug) {
+        outlineAnonNode.remove();
+      } else {
+        try {
+          document.removeAnonymousContent(outlineAnonNode);
+        } catch (ex) {}
+      }
+      dict.modalHighlightOutline = null;
+    }
+
+    // Abort when there's no text to highlight.
+    if (!textContent.length)
+      return;
+
+    let outlineBox;
+    if (rebuildOutline) {
+      // Create the main (yellow) highlight outline box.
+      outlineBox = document.createElementNS(kNSHTML, "div");
+      outlineBox.setAttribute("id", kModalOutlineId);
+    }
+
+    const kModalOutlineTextId = kModalOutlineId + "-text";
+    let i = 0;
+    for (let rect of rects) {
+      // if the current rect is the last rect, then text is set to the rest of
+      // the textContent with single spaces injected between the text. Otherwise
+      // text is set to the current textContent for the matching rect.
+      let text = (i == rectCount - 1) ? textContent.slice(i).join(" ") : textContent[i];
+
+      // Next up is to check of the outline box' borders will not overlap with
+      // rects that we drew before or will draw after this one.
+      // We're taking the width of the border into account, which is
+      // `kOutlineBoxBorderSize` pixels.
+      // When left and/ or right sides will overlap with the current, previous
+      // or next rect, make sure to make the necessary adjustments to the style.
+      // These adjustments will override the styles as defined in `kModalStyles.outlineNode`.
+      let intersectingSides = new Set();
+      let previous = rects[i - 1];
+      if (previous &&
+          rect.left - previous.right <= 2 * kOutlineBoxBorderSize) {
+        intersectingSides.add("left");
+      }
+      let next = rects[i + 1];
+      if (next &&
+          next.left - rect.right <= 2 * kOutlineBoxBorderSize) {
+        intersectingSides.add("right");
+      }
+      let borderStyles = [...intersectingSides].map(side => [ "border-" + side, 0 ]);
+      if (intersectingSides.size) {
+        borderStyles.push([ "margin",  `-${kOutlineBoxBorderSize}px 0 0 ${
+          intersectingSides.has("left") ? 0 : -kOutlineBoxBorderSize}px !important`]);
+        borderStyles.push([ "border-radius",
+          (intersectingSides.has("left") ? 0 : kOutlineBoxBorderRadius) + "px " +
+          (intersectingSides.has("right") ? 0 : kOutlineBoxBorderRadius) + "px " +
+          (intersectingSides.has("right") ? 0 : kOutlineBoxBorderRadius) + "px " +
+          (intersectingSides.has("left") ? 0 : kOutlineBoxBorderRadius) + "px" ]);
+      }
+
+      ++i;
+      let outlineStyle = this._getStyleString(kModalStyles.outlineNode, [
+        ["top", rect.top + "px"],
+        ["left", rect.left + "px"],
+        ["height", rect.height + "px"],
+        ["width", rect.width + "px"]
+      ], borderStyles, kDebug ? kModalStyles.outlineNodeDebug : []);
+      fontStyle.lineHeight = rect.height + "px";
+      let textStyle = this._getStyleString(kModalStyles.outlineText) + "; " +
+        this._getHTMLFontStyle(fontStyle);
+
+      if (rebuildOutline) {
+        let textBoxParent = (rectCount == 1) ? outlineBox :
+          outlineBox.appendChild(document.createElementNS(kNSHTML, "div"));
+        textBoxParent.setAttribute("style", outlineStyle);
+
+        let textBox = document.createElementNS(kNSHTML, "span");
+        if (rectCount == 1)
+          textBox.setAttribute("id", kModalOutlineTextId);
+        textBox.setAttribute("style", textStyle);
+        textBox.textContent = text;
+        textBoxParent.appendChild(textBox);
+      } else {
+        // Set the appropriate properties on the existing nodes, which will also
+        // activate the transitions.
+        outlineAnonNode.setAttributeForElement(kModalOutlineId, "style", outlineStyle);
+        outlineAnonNode.setAttributeForElement(kModalOutlineTextId, "style", textStyle);
+        outlineAnonNode.setTextContentForElement(kModalOutlineTextId, text);
+      }
+    }
+
+    if (rebuildOutline) {
+      dict.modalHighlightOutline = kDebug ?
+        mockAnonymousContentNode((document.body ||
+          document.documentElement).appendChild(outlineBox)) :
+        document.insertAnonymousContent(outlineBox);
+    }
+  },
+
+  /**
+   * Add a range to the list of ranges to highlight on, or cut out of, the dimmed
+   * background.
+   *
+   * @param {nsIDOMRange}  range  Range object that should be inspected
+   * @param {nsIDOMWindow} window Window object, whose DOM tree is being traversed
+   */
+  _modalHighlight(range, controller, window) {
+    if (!this._getRangeContentArray(range).length)
+      return;
+
+    this._updateRangeRects(range);
+
+    this.show(window);
+    // We don't repaint the mask right away, but pass it off to a render loop of
+    // sorts.
+    this._scheduleRepaintOfMask(window);
+  },
+
+  /**
+   * Lazily insert the nodes we need as anonymous content into the CanvasFrame
+   * of a window.
+   *
+   * @param {nsIDOMWindow} window Window to draw in.
+   */
+  _maybeCreateModalHighlightNodes(window) {
+    window = window.top;
+    let dict = this.getForWindow(window);
+    if (dict.modalHighlightOutline) {
+      if (!dict.modalHighlightAllMask) {
+        // Make sure to at least show the dimmed background.
+        this._repaintHighlightAllMask(window, false);
+        this._scheduleRepaintOfMask(window);
+      } else {
+        this._scheduleRepaintOfMask(window, { scrollOnly: true });
+      }
+      return;
+    }
+
+    let document = window.document;
+    // A hidden document doesn't accept insertAnonymousContent calls yet.
+    if (document.hidden) {
+      let onVisibilityChange = () => {
+        document.removeEventListener("visibilitychange", onVisibilityChange);
+        this._maybeCreateModalHighlightNodes(window);
+      };
+      document.addEventListener("visibilitychange", onVisibilityChange);
+      return;
+    }
+
+    // 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
+   * overlays the current page and the mask that cuts out all the rectangles of
+   * the ranges that were found.
+   *
+   * @param {nsIDOMWindow} window Window to draw in.
+   * @param {Boolean} [paintContent]
+   */
+  _repaintHighlightAllMask(window, paintContent = true) {
+    window = window.top;
+    let dict = this.getForWindow(window);
+
+    const kMaskId = kModalIdPrefix + "-findbar-modalHighlight-outlineMask";
+    if (!dict.modalHighlightAllMask) {
+      let document = window.document;
+      let maskNode = document.createElementNS(kNSHTML, "div");
+      maskNode.setAttribute("id", kMaskId);
+      dict.modalHighlightAllMask = kDebug ?
+        mockAnonymousContentNode((document.body || document.documentElement).appendChild(maskNode)) :
+        document.insertAnonymousContent(maskNode);
+    }
+
+    // Make sure the dimmed mask node takes the full width and height that's available.
+    let {width, height} = dict.lastWindowDimensions = this._getWindowDimensions(window);
+    if (typeof dict.brightText != "boolean" || dict.updateAllRanges)
+      this._detectBrightText(dict);
+    let maskStyle = this._getStyleString(kModalStyles.maskNode,
+      [ ["width", width + "px"], ["height", height + "px"] ],
+      dict.brightText ? kModalStyles.maskNodeBrightText : [],
+      paintContent ? kModalStyles.maskNodeTransition : [],
+      kDebug ? kModalStyles.maskNodeDebug : []);
+    dict.modalHighlightAllMask.setAttributeForElement(kMaskId, "style", maskStyle);
+
+    this._updateRangeOutline(dict);
+
+    let allRects = [];
+    if (paintContent || dict.modalHighlightAllMask) {
+      this._updateDynamicRangesRects(dict);
+
+      let DOMRect = window.DOMRect;
+      for (let [range, rects] of dict.modalHighlightRectsMap) {
+        if (dict.updateAllRanges)
+          rects = this._updateRangeRects(range);
+
+        // If a geometry change was detected, we bail out right away here, because
+        // the current set of ranges has been invalidated.
+        if (dict.detectedGeometryChange)
+          return;
+
+        for (let rect of rects)
+          allRects.push(new DOMRect(rect.x, rect.y, rect.width, rect.height));
+      }
+      dict.updateAllRanges = false;
+    }
+
+    dict.modalHighlightAllMask.setCutoutRectsForElement(kMaskId, allRects);
+  },
+
+  /**
+   * Safely remove the mask AnoymousContent node from the CanvasFrame.
+   *
+   * @param {nsIDOMWindow} window
+   */
+  _removeHighlightAllMask(window) {
+    window = window.top;
+    let dict = this.getForWindow(window);
+    if (!dict.modalHighlightAllMask)
+      return;
+
+    // If the current window isn't the one the content was inserted into, this
+    // will fail, but that's fine.
+    if (kDebug) {
+      dict.modalHighlightAllMask.remove();
+    } else {
+      try {
+        window.document.removeAnonymousContent(dict.modalHighlightAllMask);
+      } catch (ex) {}
+    }
+    dict.modalHighlightAllMask = null;
+  },
+
+  /**
+   * Doing a full repaint each time a range is delivered by the highlight iterator
+   * is way too costly, thus we pipe the frequency down to every
+   * `kModalHighlightRepaintLoFreqMs` milliseconds. If there are dynamic ranges
+   * found (see `_isInDynamicContainer()` for the definition), the frequency
+   * will be upscaled to `kModalHighlightRepaintHiFreqMs`.
+   *
+   * @param {nsIDOMWindow} window
+   * @param {Object}       options Dictionary of painter hints that contains the
+   *                               following properties:
+   *   {Boolean} contentChanged  Whether the documents' content changed in the
+   *                             meantime. This happens when the DOM is updated
+   *                             whilst the page is loaded.
+   *   {Boolean} scrollOnly      TRUE when the page has scrolled in the meantime,
+   *                             which means that the dynamically positioned
+   *                             elements need to be repainted.
+   *   {Boolean} updateAllRanges Whether to recalculate the rects of all ranges
+   *                             that were found up until now.
+   */
+  _scheduleRepaintOfMask(window, { contentChanged, scrollOnly, updateAllRanges } =
+                                 { contentChanged: false, scrollOnly: false, updateAllRanges: false }) {
+    if (!this._modal)
+      return;
+
+    window = window.top;
+    let dict = this.getForWindow(window);
+    let hasDynamicRanges = !!dict.dynamicRangesSet.size;
+    let repaintDynamicRanges = ((scrollOnly || contentChanged) && hasDynamicRanges);
+
+    // When we request to repaint unconditionally, we mean to call
+    // `_repaintHighlightAllMask()` right after the timeout.
+    if (!dict.unconditionalRepaintRequested)
+      dict.unconditionalRepaintRequested = !contentChanged || repaintDynamicRanges;
+    // Some events, like a resize, call for recalculation of all the rects of all ranges.
+    if (!dict.updateAllRanges)
+      dict.updateAllRanges = updateAllRanges;
+
+    if (dict.modalRepaintScheduler)
+      return;
+
+    dict.modalRepaintScheduler = window.setTimeout(() => {
+      dict.modalRepaintScheduler = null;
+
+      let { width: previousWidth, height: previousHeight } = dict.lastWindowDimensions;
+      let { width, height } = dict.lastWindowDimensions = this._getWindowDimensions(window);
+      let pageContentChanged = dict.detectedGeometryChange ||
+                               (Math.abs(previousWidth - width) > kContentChangeThresholdPx ||
+                                Math.abs(previousHeight - height) > kContentChangeThresholdPx);
+      dict.detectedGeometryChange = false;
+      // When the page has changed significantly enough in size, we'll restart
+      // the iterator with the same parameters as before to find us new ranges.
+      if (pageContentChanged)
+        this.iterator.restart(this.finder);
+
+      if (dict.unconditionalRepaintRequested ||
+          (dict.modalHighlightRectsMap.size && pageContentChanged)) {
+        dict.unconditionalRepaintRequested = false;
+        this._repaintHighlightAllMask(window);
+      }
+    }, hasDynamicRanges ? kModalHighlightRepaintHiFreqMs : kModalHighlightRepaintLoFreqMs);
+  },
+
+  /**
+   * Add event listeners to the content which will cause the modal highlight
+   * AnonymousContent to be re-painted or hidden.
+   *
+   * @param {nsIDOMWindow} window
+   */
+  _addModalHighlightListeners(window) {
+    window = window.top;
+    let dict = this.getForWindow(window);
+    if (dict.highlightListeners)
+      return;
+
+    window = window.top;
+    dict.highlightListeners = [
+      this._scheduleRepaintOfMask.bind(this, window, { contentChanged: true }),
+      this._scheduleRepaintOfMask.bind(this, window, { updateAllRanges: true }),
+      this._scheduleRepaintOfMask.bind(this, window, { scrollOnly: true }),
+      this.hide.bind(this, window, null),
+      () => dict.busySelecting = true
+    ];
+    let target = this.iterator._getDocShell(window).chromeEventHandler;
+    target.addEventListener("MozAfterPaint", dict.highlightListeners[0]);
+    target.addEventListener("resize", dict.highlightListeners[1]);
+    target.addEventListener("scroll", dict.highlightListeners[2]);
+    target.addEventListener("click", dict.highlightListeners[3]);
+    target.addEventListener("selectstart", dict.highlightListeners[4]);
+  },
+
+  /**
+   * Remove event listeners from content.
+   *
+   * @param {nsIDOMWindow} window
+   */
+  _removeModalHighlightListeners(window) {
+    window = window.top;
+    let dict = this.getForWindow(window);
+    if (!dict.highlightListeners)
+      return;
+
+    let target = this.iterator._getDocShell(window).chromeEventHandler;
+    target.removeEventListener("MozAfterPaint", dict.highlightListeners[0]);
+    target.removeEventListener("resize", dict.highlightListeners[1]);
+    target.removeEventListener("scroll", dict.highlightListeners[2]);
+    target.removeEventListener("click", dict.highlightListeners[3]);
+    target.removeEventListener("selectstart", dict.highlightListeners[4]);
+
+    dict.highlightListeners = null;
+  },
+
+  /**
+   * For a given node returns its editable parent or null if there is none.
+   * It's enough to check if node is a text node and its parent's parent is
+   * instance of nsIDOMNSEditableElement.
+   *
+   * @param node the node we want to check
+   * @returns the first node in the parent chain that is editable,
+   *          null if there is no such node
+   */
+  _getEditableNode(node) {
+    if (node.nodeType === node.TEXT_NODE && node.parentNode && node.parentNode.parentNode &&
+        node.parentNode.parentNode instanceof Ci.nsIDOMNSEditableElement) {
+      return node.parentNode.parentNode;
+    }
+    return null;
+  },
+
+  /**
+   * Add ourselves as an nsIEditActionListener and nsIDocumentStateListener for
+   * a given editor
+   *
+   * @param editor the editor we'd like to listen to
+   */
+  _addEditorListeners(editor) {
+    if (!this._editors) {
+      this._editors = [];
+      this._stateListeners = [];
+    }
+
+    let existingIndex = this._editors.indexOf(editor);
+    if (existingIndex == -1) {
+      let x = this._editors.length;
+      this._editors[x] = editor;
+      this._stateListeners[x] = this._createStateListener();
+      this._editors[x].addEditActionListener(this);
+      this._editors[x].addDocumentStateListener(this._stateListeners[x]);
+    }
+  },
+
+  /**
+   * Helper method to unhook listeners, remove cached editors
+   * and keep the relevant arrays in sync
+   *
+   * @param idx the index into the array of editors/state listeners
+   *        we wish to remove
+   */
+  _unhookListenersAtIndex(idx) {
+    this._editors[idx].removeEditActionListener(this);
+    this._editors[idx]
+        .removeDocumentStateListener(this._stateListeners[idx]);
+    this._editors.splice(idx, 1);
+    this._stateListeners.splice(idx, 1);
+    if (!this._editors.length) {
+      delete this._editors;
+      delete this._stateListeners;
+    }
+  },
+
+  /**
+   * Remove ourselves as an nsIEditActionListener and
+   * nsIDocumentStateListener from a given cached editor
+   *
+   * @param editor the editor we no longer wish to listen to
+   */
+  _removeEditorListeners(editor) {
+    // editor is an editor that we listen to, so therefore must be
+    // cached. Find the index of this editor
+    let idx = this._editors.indexOf(editor);
+    if (idx == -1) {
+      return;
+    }
+    // Now unhook ourselves, and remove our cached copy
+    this._unhookListenersAtIndex(idx);
+  },
+
+  /*
+   * nsIEditActionListener logic follows
+   *
+   * We implement this interface to allow us to catch the case where
+   * the findbar found a match in a HTML <input> or <textarea>. If the
+   * user adjusts the text in some way, it will no longer match, so we
+   * want to remove the highlight, rather than have it expand/contract
+   * when letters are added or removed.
+   */
+
+  /**
+   * Helper method used to check whether a selection intersects with
+   * some highlighting
+   *
+   * @param selectionRange the range from the selection to check
+   * @param findRange the highlighted range to check against
+   * @returns true if they intersect, false otherwise
+   */
+  _checkOverlap(selectionRange, findRange) {
+    if (!selectionRange || !findRange)
+      return false;
+    // The ranges overlap if one of the following is true:
+    // 1) At least one of the endpoints of the deleted selection
+    //    is in the find selection
+    // 2) At least one of the endpoints of the find selection
+    //    is in the deleted selection
+    if (findRange.isPointInRange(selectionRange.startContainer,
+                                 selectionRange.startOffset))
+      return true;
+    if (findRange.isPointInRange(selectionRange.endContainer,
+                                 selectionRange.endOffset))
+      return true;
+    if (selectionRange.isPointInRange(findRange.startContainer,
+                                      findRange.startOffset))
+      return true;
+    if (selectionRange.isPointInRange(findRange.endContainer,
+                                      findRange.endOffset))
+      return true;
+
+    return false;
+  },
+
+  /**
+   * Helper method to determine if an edit occurred within a highlight
+   *
+   * @param selection the selection we wish to check
+   * @param node the node we want to check is contained in selection
+   * @param offset the offset into node that we want to check
+   * @returns the range containing (node, offset) or null if no ranges
+   *          in the selection contain it
+   */
+  _findRange(selection, node, offset) {
+    let rangeCount = selection.rangeCount;
+    let rangeidx = 0;
+    let foundContainingRange = false;
+    let range = null;
+
+    // Check to see if this node is inside one of the selection's ranges
+    while (!foundContainingRange && rangeidx < rangeCount) {
+      range = selection.getRangeAt(rangeidx);
+      if (range.isPointInRange(node, offset)) {
+        foundContainingRange = true;
+        break;
+      }
+      rangeidx++;
+    }
+
+    if (foundContainingRange) {
+      return range;
+    }
+
+    return null;
+  },
+
+  // Start of nsIEditActionListener implementations
+
+  WillDeleteText(textNode, offset, length) {
+    let editor = this._getEditableNode(textNode).editor;
+    let controller = editor.selectionController;
+    let fSelection = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND);
+    let range = this._findRange(fSelection, textNode, offset);
+
+    if (range) {
+      // Don't remove the highlighting if the deleted text is at the
+      // end of the range
+      if (textNode != range.endContainer ||
+          offset != range.endOffset) {
+        // Text within the highlight is being removed - the text can
+        // no longer be a match, so remove the highlighting
+        fSelection.removeRange(range);
+        if (fSelection.rangeCount == 0) {
+          this._removeEditorListeners(editor);
+        }
+      }
+    }
+  },
+
+  DidInsertText(textNode, offset, aString) {
+    let editor = this._getEditableNode(textNode).editor;
+    let controller = editor.selectionController;
+    let fSelection = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND);
+    let range = this._findRange(fSelection, textNode, offset);
+
+    if (range) {
+      // If the text was inserted before the highlight
+      // adjust the highlight's bounds accordingly
+      if (textNode == range.startContainer &&
+          offset == range.startOffset) {
+        range.setStart(range.startContainer,
+                       range.startOffset+aString.length);
+      } else if (textNode != range.endContainer ||
+                 offset != range.endOffset) {
+        // The edit occurred within the highlight - any addition of text
+        // will result in the text no longer being a match,
+        // so remove the highlighting
+        fSelection.removeRange(range);
+        if (fSelection.rangeCount == 0) {
+          this._removeEditorListeners(editor);
+        }
+      }
+    }
+  },
+
+  WillDeleteSelection(selection) {
+    let editor = this._getEditableNode(selection.getRangeAt(0)
+                                                 .startContainer).editor;
+    let controller = editor.selectionController;
+    let fSelection = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND);
+
+    let selectionIndex = 0;
+    let findSelectionIndex = 0;
+    let shouldDelete = {};
+    let numberOfDeletedSelections = 0;
+    let numberOfMatches = fSelection.rangeCount;
+
+    // We need to test if any ranges in the deleted selection (selection)
+    // are in any of the ranges of the find selection
+    // Usually both selections will only contain one range, however
+    // either may contain more than one.
+
+    for (let fIndex = 0; fIndex < numberOfMatches; fIndex++) {
+      shouldDelete[fIndex] = false;
+      let fRange = fSelection.getRangeAt(fIndex);
+
+      for (let index = 0; index < selection.rangeCount; index++) {
+        if (shouldDelete[fIndex]) {
+          continue;
+        }
+
+        let selRange = selection.getRangeAt(index);
+        let doesOverlap = this._checkOverlap(selRange, fRange);
+        if (doesOverlap) {
+          shouldDelete[fIndex] = true;
+          numberOfDeletedSelections++;
+        }
+      }
+    }
+
+    // OK, so now we know what matches (if any) are in the selection
+    // that is being deleted. Time to remove them.
+    if (!numberOfDeletedSelections) {
+      return;
+    }
+
+    for (let i = numberOfMatches - 1; i >= 0; i--) {
+      if (shouldDelete[i])
+        fSelection.removeRange(fSelection.getRangeAt(i));
+    }
+
+    // Remove listeners if no more highlights left
+    if (!fSelection.rangeCount) {
+      this._removeEditorListeners(editor);
+    }
+  },
+
+  /*
+   * nsIDocumentStateListener logic follows
+   *
+   * When attaching nsIEditActionListeners, there are no guarantees
+   * as to whether the findbar or the documents in the browser will get
+   * destructed first. This leads to the potential to either leak, or to
+   * hold on to a reference an editable element's editor for too long,
+   * preventing it from being destructed.
+   *
+   * However, when an editor's owning node is being destroyed, the editor
+   * sends out a DocumentWillBeDestroyed notification. We can use this to
+   * clean up our references to the object, to allow it to be destroyed in a
+   * timely fashion.
+   */
+
+  /**
+   * Unhook ourselves when one of our state listeners has been called.
+   * This can happen in 4 cases:
+   *  1) The document the editor belongs to is navigated away from, and
+   *     the document is not being cached
+   *
+   *  2) The document the editor belongs to is expired from the cache
+   *
+   *  3) The tab containing the owning document is closed
+   *
+   *  4) The <input> or <textarea> that owns the editor is explicitly
+   *     removed from the DOM
+   *
+   * @param the listener that was invoked
+   */
+  _onEditorDestruction(aListener) {
+    // First find the index of the editor the given listener listens to.
+    // The listeners and editors arrays must always be in sync.
+    // The listener will be in our array of cached listeners, as this
+    // method could not have been called otherwise.
+    let idx = 0;
+    while (this._stateListeners[idx] != aListener) {
+      idx++;
+    }
+
+    // Unhook both listeners
+    this._unhookListenersAtIndex(idx);
+  },
+
+  /**
+   * Creates a unique document state listener for an editor.
+   *
+   * It is not possible to simply have the findbar implement the
+   * listener interface itself, as it wouldn't have sufficient information
+   * to work out which editor was being destroyed. Therefore, we create new
+   * listeners on the fly, and cache them in sync with the editors they
+   * listen to.
+   */
+  _createStateListener() {
+    return {
+      findbar: this,
+
+      QueryInterface: function(iid) {
+        if (iid.equals(Ci.nsIDocumentStateListener) ||
+            iid.equals(Ci.nsISupports))
+          return this;
+
+        throw Components.results.NS_ERROR_NO_INTERFACE;
+      },
+
+      NotifyDocumentWillBeDestroyed: function() {
+        this.findbar._onEditorDestruction(this);
+      },
+
+      // Unimplemented
+      notifyDocumentCreated: function() {},
+      notifyDocumentStateChanged: function(aDirty) {}
+    };
+  }
+};