summaryrefslogtreecommitdiffstats
path: root/toolkit/modules/FinderHighlighter.jsm
diff options
context:
space:
mode:
Diffstat (limited to 'toolkit/modules/FinderHighlighter.jsm')
-rw-r--r--toolkit/modules/FinderHighlighter.jsm1615
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) {}
+ };
+ }
+};