Bug 1282070 - repaint the modal highlight mask when the page resizes or changes size due to added/ removed content. r=jaws

MozReview-Commit-ID: JKzUehP4pyP
This commit is contained in:
Mike de Boer 2016-08-16 12:16:29 +02:00
Родитель f4f68e2da3
Коммит 010418133a
4 изменённых файлов: 222 добавлений и 109 удалений

Просмотреть файл

@ -139,11 +139,15 @@ Finder.prototype = {
},
set caseSensitive(aSensitive) {
if (this._fastFind.caseSensitive === aSensitive)
return;
this._fastFind.caseSensitive = aSensitive;
this.iterator.reset();
},
set entireWord(aEntireWord) {
if (this._fastFind.entireWord === aEntireWord)
return;
this._fastFind.entireWord = aEntireWord;
this.iterator.reset();
},
@ -379,12 +383,21 @@ Finder.prototype = {
}
},
_notifyMatchesCount: function(result) {
_notifyMatchesCount: function(result = this._currentMatchesCountResult) {
if (!result)
return;
// The `_currentFound` property is only used for internal bookkeeping.
delete result._currentFound;
if (result.total == this._currentMatchLimit)
result.total = -1;
for (let l of this._listeners) {
try {
l.onMatchesCountResult(result);
} catch (ex) {}
}
this._currentMatchesCountResult = null;
},
requestMatchesCount: function(aWord, aMatchLimit, aLinksOnly) {
@ -398,12 +411,14 @@ Finder.prototype = {
}
let window = this._getWindow();
let result = {
this._currentFoundRange = this._fastFind.getFoundRange();
this._currentMatchLimit = aMatchLimit;
this._currentMatchesCountResult = {
total: 0,
current: 0,
_currentFound: false
};
let foundRange = this._fastFind.getFoundRange();
this.iterator.start({
caseSensitive: this._fastFind.caseSensitive,
@ -411,30 +426,38 @@ Finder.prototype = {
finder: this,
limit: aMatchLimit,
linksOnly: aLinksOnly,
onRange: range => {
++result.total;
if (!result._currentFound) {
++result.current;
result._currentFound = (foundRange &&
range.startContainer == foundRange.startContainer &&
range.startOffset == foundRange.startOffset &&
range.endContainer == foundRange.endContainer &&
range.endOffset == foundRange.endOffset);
}
},
listener: this,
useCache: true,
word: aWord
}).then(() => {
// The `_currentFound` property is only used for internal bookkeeping.
delete result._currentFound;
if (result.total == aMatchLimit)
result.total = -1;
this._notifyMatchesCount(result);
});
}).then(this._notifyMatchesCount.bind(this));
},
// FinderIterator listener implementation
onIteratorBeforeRestart() {},
onIteratorRangeFound(range) {
let result = this._currentMatchesCountResult;
if (!result)
return;
++result.total;
if (!result._currentFound) {
++result.current;
result._currentFound = (this._currentFoundRange &&
range.startContainer == this._currentFoundRange.startContainer &&
range.startOffset == this._currentFoundRange.startOffset &&
range.endContainer == this._currentFoundRange.endContainer &&
range.endOffset == this._currentFoundRange.endOffset);
}
},
onIteratorReset() {},
onIteratorRestart({ word, linksOnly }) {
this.requestMatchesCount(word, this._currentMatchLimit, linksOnly);
},
_getWindow: function () {
return this._docShell.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindow);
},

Просмотреть файл

@ -18,6 +18,7 @@ XPCOMUtils.defineLazyGetter(this, "kDebug", () => {
return Services.prefs.getPrefType(kDebugPref) && Services.prefs.getBoolPref(kDebugPref);
});
const kContentChangeThresholdPx = 5;
const kModalHighlightRepaintFreqMs = 10;
const kHighlightAllPref = "findbar.highlightAll";
const kModalHighlightPref = "findbar.modalHighlight";
@ -207,14 +208,12 @@ FinderHighlighter.prototype = {
let window = this.finder._getWindow();
let controller = this.finder._getSelectionController(window);
let doc = window.document;
let found = false;
this.clear();
this._found = false;
if (!controller || !doc || !doc.documentElement) {
// Without the selection controller,
// we are unable to (un)highlight any matches
return found;
return this._found;
}
if (highlight) {
@ -223,40 +222,49 @@ FinderHighlighter.prototype = {
entireWord: this.finder._fastFind.entireWord,
linksOnly, word,
finder: this.finder,
onRange: range => {
this.highlightRange(range, controller, window);
found = true;
},
listener: this,
useCache: true
});
if (found)
if (this._found)
this.finder._outlineLink(true);
} else {
this.hide(window);
this.clear();
this.iterator.reset();
// Removing the highlighting always succeeds, so return true.
found = true;
this._found = true;
}
return found;
return this._found;
}),
// FinderIterator listener implementation
onIteratorBeforeRestart() {
this.clear();
},
onIteratorRangeFound(range) {
this.highlightRange(range);
this._found = true;
},
onIteratorReset() {
this.clear();
},
onIteratorRestart() {},
/**
* 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
* @param {nsISelectionController} controller Selection controller of the
* document that the range belongs
* to
* @param {nsIDOMWindow} window Window object, whose DOM tree
* is being traversed
* @param {nsIDOMRange} range Range object to be highlighted
*/
highlightRange(range, controller, window) {
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;
}
@ -451,6 +459,8 @@ FinderHighlighter.prototype = {
* everything when the user starts to find in page again.
*/
onLocationChange() {
this.clear();
if (!this._modalHighlightOutline)
return;
@ -740,13 +750,14 @@ FinderHighlighter.prototype = {
// Make sure the dimmed mask node takes the full width and height that's available.
let {width, height} = this._getWindowDimensions(window);
this._lastWindowDimensions = { width, height };
maskNode.setAttribute("id", kMaskId);
maskNode.setAttribute("class", kMaskId + (kDebug ? ` ${kModalIdPrefix}-findbar-debug` : ""));
maskNode.setAttribute("style", `width: ${width}px; height: ${height}px;`);
if (this._brightText)
maskNode.setAttribute("brighttext", "true");
if (paintContent) {
if (paintContent || this._modalHighlightAllMask) {
// Create a DOM node for each rectangle representing the ranges we found.
let maskContent = [];
const kRectClassName = kModalIdPrefix + "-findbar-modalHighlight-rect";
@ -794,12 +805,37 @@ FinderHighlighter.prototype = {
* `kModalHighlightRepaintFreqMs` milliseconds.
*
* @param {nsIDOMWindow} window
* @param {Boolean} contentChanged Whether the documents' content changed
* in the meantime. This happens when the
* DOM is updated whilst the page is loaded.
*/
_scheduleRepaintOfMask(window) {
_scheduleRepaintOfMask(window, contentChanged = false) {
if (this._modalRepaintScheduler)
window.clearTimeout(this._modalRepaintScheduler);
this._modalRepaintScheduler = window.setTimeout(
this._repaintHighlightAllMask.bind(this, window), kModalHighlightRepaintFreqMs);
// When we request to repaint unconditionally, we mean to call
// `_repaintHighlightAllMask()` right after the timeout.
if (!this._unconditionalRepaintRequested)
this._unconditionalRepaintRequested = !contentChanged;
this._modalRepaintScheduler = window.setTimeout(() => {
if (this._unconditionalRepaintRequested) {
this._unconditionalRepaintRequested = false;
this._repaintHighlightAllMask(window);
return;
}
let { width, height } = this._getWindowDimensions(window);
if (!this._modalHighlightRectsMap ||
(Math.abs(this._lastWindowDimensions.width - width) < kContentChangeThresholdPx &&
Math.abs(this._lastWindowDimensions.height - height) < kContentChangeThresholdPx)) {
return;
}
this.iterator.restart(this.finder);
this._lastWindowDimensions = { width, height };
this._repaintHighlightAllMask(window);
}, kModalHighlightRepaintFreqMs);
},
/**
@ -838,12 +874,12 @@ FinderHighlighter.prototype = {
return;
this._highlightListeners = [
this._scheduleRepaintOfMask.bind(this, window),
this._scheduleRepaintOfMask.bind(this, window, true),
this.hide.bind(this, window, null)
];
window.addEventListener("DOMContentLoaded", this._highlightListeners[0]);
let target = this.iterator._getDocShell(window).chromeEventHandler;
target.addEventListener("MozAfterPaint", this._highlightListeners[0]);
window.addEventListener("click", this._highlightListeners[1]);
window.addEventListener("resize", this._highlightListeners[1]);
},
/**
@ -855,9 +891,9 @@ FinderHighlighter.prototype = {
if (!this._highlightListeners)
return;
window.removeEventListener("DOMContentLoaded", this._highlightListeners[0]);
let target = this.iterator._getDocShell(window).chromeEventHandler;
target.removeEventListener("MozAfterPaint", this._highlightListeners[0]);
window.removeEventListener("click", this._highlightListeners[1]);
window.removeEventListener("resize", this._highlightListeners[1]);
this._highlightListeners = null;
},

Просмотреть файл

@ -42,9 +42,9 @@ this.FinderIterator = {
* yield `undefined`, instead of a range.
* Upon re-entrance after a break, we check if `stop()` was called during the
* break and if so, we stop iterating.
* Results are also passed to the `onRange` callback method, along with a flag
* that specifies if the result comes from the cache or is fresh. The callback
* also adheres to the `limit` flag.
* Results are also passed to the `listener.onIteratorRangeFound` callback
* method, along with a flag that specifies if the result comes from the cache
* or is fresh. The callback also adheres to the `limit` flag.
* The returned promise is resolved when 1) the limit is reached, 2) when all
* the ranges have been found or 3) when `stop()` is called whilst iterating.
*
@ -58,14 +58,19 @@ this.FinderIterator = {
* @param {Boolean} [options.linksOnly] Only yield ranges that are inside a
* hyperlink (used by QuickFind).
* Optional, defaults to `false`.
* @param {Function} options.onRange Callback invoked when a range is found
* @param {Object} options.listener Listener object that implements the
* following callback functions:
* - onIteratorBeforeRestart({Object} iterParams);
* - onIteratorRangeFound({nsIDOMRange} range);
* - onIteratorReset();
* - onIteratorRestart({Object} iterParams);
* @param {Boolean} [options.useCache] Whether to allow results already
* present in the cache or demand fresh.
* Optional, defaults to `false`.
* @param {String} options.word Word to search for
* @return {Promise}
*/
start({ caseSensitive, entireWord, finder, limit, linksOnly, onRange, useCache, word }) {
start({ caseSensitive, entireWord, finder, limit, linksOnly, listener, useCache, word }) {
// Take care of default values for non-required options.
if (typeof limit != "number")
limit = -1;
@ -83,23 +88,27 @@ this.FinderIterator = {
throw new Error("Missing required option 'finder'");
if (!word)
throw new Error("Missing required option 'word'");
if (typeof onRange != "function")
throw new TypeError("Missing valid, required option 'onRange'");
if (typeof listener != "object" || !listener.onIteratorRangeFound)
throw new TypeError("Missing valid, required option 'listener'");
// Don't add the same listener twice.
if (this._listeners.has(onRange))
throw new Error("Already listening to iterator results");
// If the listener was added before, make sure the promise is resolved before
// we replace it with another.
if (this._listeners.has(listener)) {
let { onEnd } = this._listeners.get(listener);
if (onEnd)
onEnd();
}
let window = finder._getWindow();
let resolver;
let promise = new Promise(resolve => resolver = resolve);
let iterParams = { caseSensitive, entireWord, linksOnly, useCache, word };
this._listeners.set(onRange, { limit, onEnd: resolver });
this._listeners.set(listener, { limit, onEnd: resolver });
// If we're not running anymore and we're requesting the previous result, use it.
if (!this.running && this._previousResultAvailable(iterParams)) {
this._yieldPreviousResult(onRange, window);
this._yieldPreviousResult(listener, window);
return promise;
}
@ -110,7 +119,7 @@ this.FinderIterator = {
throw new Error(`We're currently iterating over '${this._currentParams.word}', not '${word}'`);
// if we're still running, yield the set we have built up this far.
this._yieldIntermediateResult(onRange, window);
this._yieldIntermediateResult(listener, window);
return promise;
}
@ -149,7 +158,29 @@ this.FinderIterator = {
for (let [, { onEnd }] of this._listeners)
onEnd();
this._listeners.clear();
},
/**
* Stops the iteration that currently running, if it is, and start a new one
* with the exact same params as before.
*
* @param {Finder} finder Currently active Finder instance
*/
restart(finder) {
// Capture current iterator params before we stop the show.
let iterParams = this.params;
// If the params don't contain a 'word' param, the iterator has never run before.
if (!iterParams.word)
return;
this.stop();
// Restart manually.
this.running = true;
this._currentParams = iterParams;
this._notifyListeners("beforeRestart", iterParams);
this._findAllRanges(finder, finder._getWindow(), ++this._spawnId);
this._notifyListeners("restart", iterParams);
},
/**
@ -165,6 +196,7 @@ this.FinderIterator = {
this.ranges = [];
this.running = false;
this._notifyListeners("reset");
for (let [, { onEnd }] of this._listeners)
onEnd();
this._listeners.clear();
@ -191,6 +223,24 @@ this.FinderIterator = {
this._currentParams.word == word);
},
/**
* Safely notify all registered listeners that an event has occurred.
*
* @param {String} callback Name of the callback to invoke
* @param {...[mixed]} params Arbitrary amount of arguments that will be
* passed to the callback in-order.
*/
_notifyListeners(callback, ...params) {
callback = "onIterator" + callback.charAt(0).toUpperCase() + callback.substr(1);
for (let [listener] of this._listeners) {
try {
listener[callback](...params);
} catch (ex) {
Cu.reportError("FinderIterator Error: " + ex);
}
}
},
/**
* Internal; check if an iteration request is available in the previous result
* that we cached.
@ -233,17 +283,17 @@ this.FinderIterator = {
* make sure we don't block the host process too long. In the case of a break
* like this, we yield `undefined`, instead of a range.
*
* @param {Function} onRange Callback invoked when a range is found
* @param {Object} listener Listener object
* @param {Array} rangeSource Set of ranges to iterate over
* @param {nsIDOMWindow} window The window object is only really used
* for access to `setTimeout`
* @yield {nsIDOMRange}
*/
_yieldResult: function* (onRange, rangeSource, window) {
_yieldResult: function* (listener, rangeSource, window) {
// We keep track of the number of iterations to allow a short pause between
// every `kIterationSizeMax` number of iterations.
let iterCount = 0;
let { limit, onEnd } = this._listeners.get(onRange);
let { limit, onEnd } = this._listeners.get(listener);
let ranges = rangeSource.slice(0, limit > -1 ? limit : undefined);
for (let range of ranges) {
try {
@ -256,13 +306,13 @@ this.FinderIterator = {
// Pass a flag that is `true` when we're returning the result from a
// cached previous iteration.
onRange(range, !this.running);
listener.onIteratorRangeFound(range, !this.running);
yield range;
if (++iterCount >= kIterationSizeMax) {
iterCount = 0;
// Make sure to save the current limit for later.
this._listeners.set(onRange, { limit, onEnd });
this._listeners.set(listener, { limit, onEnd });
// Sleep for the rest of this cycle.
yield new Promise(resolve => window.setTimeout(resolve, 0));
// After a sleep, the set of ranges may have updated.
@ -271,14 +321,14 @@ this.FinderIterator = {
if (limit !== -1 && --limit === 0) {
// We've reached our limit; no need to do more work.
this._listeners.delete(onRange);
this._listeners.delete(listener);
onEnd();
return;
}
}
// Save the updated limit globally.
this._listeners.set(onRange, { limit, onEnd });
this._listeners.set(listener, { limit, onEnd });
},
/**
@ -286,20 +336,18 @@ this.FinderIterator = {
* mark the listener as 'catching up', meaning it will not receive fresh
* results from a running iterator.
*
* @param {Function} onRange Callback invoked when a range is found
* @param {nsIDOMWindow} window The window object is only really used
* for access to `setTimeout`
* @param {Object} listener Listener object
* @param {nsIDOMWindow} window The window object is only really used
* for access to `setTimeout`
* @yield {nsIDOMRange}
*/
_yieldPreviousResult: Task.async(function* (onRange, window) {
this._catchingUp.add(onRange);
yield* this._yieldResult(onRange, this._previousRanges, window);
this._catchingUp.delete(onRange);
let { onEnd } = this._listeners.get(onRange);
if (onEnd) {
_yieldPreviousResult: Task.async(function* (listener, window) {
this._catchingUp.add(listener);
yield* this._yieldResult(listener, this._previousRanges, window);
this._catchingUp.delete(listener);
let { onEnd } = this._listeners.get(listener);
if (onEnd)
onEnd();
this._listeners.delete(onRange);
}
}),
/**
@ -307,15 +355,15 @@ this.FinderIterator = {
* mark the listener as 'catching up', meaning it will not receive fresh
* results from the running iterator.
*
* @param {Function} onRange Callback invoked when a range is found
* @param {nsIDOMWindow} window The window object is only really used
* for access to `setTimeout`
* @param {Object} listener Listener object
* @param {nsIDOMWindow} window The window object is only really used
* for access to `setTimeout`
* @yield {nsIDOMRange}
*/
_yieldIntermediateResult: Task.async(function* (onRange, window) {
this._catchingUp.add(onRange);
yield* this._yieldResult(onRange, this.ranges, window);
this._catchingUp.delete(onRange);
_yieldIntermediateResult: Task.async(function* (listener, window) {
this._catchingUp.add(listener);
yield* this._yieldResult(listener, this.ranges, window);
this._catchingUp.delete(listener);
}),
/**
@ -348,21 +396,21 @@ this.FinderIterator = {
this.ranges.push(range);
// Call each listener with the range we just found.
for (let [onRange, { limit, onEnd }] of this._listeners) {
if (this._catchingUp.has(onRange))
for (let [listener, { limit, onEnd }] of this._listeners) {
if (this._catchingUp.has(listener))
continue;
onRange(range);
listener.onIteratorRangeFound(range);
if (limit !== -1 && --limit === 0) {
// We've reached our limit; no need to do more work for this listener.
this._listeners.delete(onRange);
this._listeners.delete(listener);
onEnd();
continue;
}
// Save the updated limit globally.
this._listeners.set(onRange, { limit, onEnd });
this._listeners.set(listener, { limit, onEnd });
}
yield range;

Просмотреть файл

@ -45,9 +45,11 @@ add_task(function* test_start() {
caseSensitive: false,
entireWord: false,
finder: gMockFinder,
onRange: range => {
++count;
Assert.equal(range.toString(), findText, "Text content should match");
listener: {
onIteratorRangeFound(range) {
++count;
Assert.equal(range.toString(), findText, "Text content should match");
}
},
word: findText
});
@ -55,6 +57,8 @@ add_task(function* test_start() {
Assert.equal(rangeCount, count, "Amount of ranges yielded should match!");
Assert.ok(!FinderIterator.running, "Running state should match");
Assert.equal(FinderIterator._previousRanges.length, rangeCount, "Ranges cache should match");
FinderIterator.reset();
});
add_task(function* test_valid_arguments() {
@ -68,7 +72,7 @@ add_task(function* test_valid_arguments() {
caseSensitive: false,
entireWord: false,
finder: gMockFinder,
onRange: range => ++count,
listener: { onIteratorRangeFound(range) { ++count; } },
word: findText
});
@ -80,14 +84,14 @@ add_task(function* test_valid_arguments() {
count = 0;
Assert.throws(() => FinderIterator.start({
entireWord: false,
onRange: range => ++count,
listener: { onIteratorRangeFound(range) { ++count; } },
word: findText
}), /Missing required option 'caseSensitive'/, "Should throw when missing an argument");
FinderIterator.reset();
Assert.throws(() => FinderIterator.start({
caseSensitive: false,
onRange: range => ++count,
listener: { onIteratorRangeFound(range) { ++count; } },
word: findText
}), /Missing required option 'entireWord'/, "Should throw when missing an argument");
FinderIterator.reset();
@ -95,7 +99,7 @@ add_task(function* test_valid_arguments() {
Assert.throws(() => FinderIterator.start({
caseSensitive: false,
entireWord: false,
onRange: range => ++count,
listener: { onIteratorRangeFound(range) { ++count; } },
word: findText
}), /Missing required option 'finder'/, "Should throw when missing an argument");
FinderIterator.reset();
@ -105,14 +109,14 @@ add_task(function* test_valid_arguments() {
entireWord: false,
finder: gMockFinder,
word: findText
}), /Missing valid, required option 'onRange'/, "Should throw when missing an argument");
}), /Missing valid, required option 'listener'/, "Should throw when missing an argument");
FinderIterator.reset();
Assert.throws(() => FinderIterator.start({
caseSensitive: false,
entireWord: true,
finder: gMockFinder,
onRange: range => ++count
listener: { onIteratorRangeFound(range) { ++count; } },
}), /Missing required option 'word'/, "Should throw when missing an argument");
FinderIterator.reset();
@ -129,7 +133,7 @@ add_task(function* test_stop() {
caseSensitive: false,
entireWord: false,
finder: gMockFinder,
onRange: range => ++count,
listener: { onIteratorRangeFound(range) { ++count; } },
word: findText
});
@ -138,6 +142,8 @@ add_task(function* test_stop() {
yield whenDone;
Assert.equal(count, 100, "Number of ranges should match `kIterationSizeMax`");
FinderIterator.reset();
});
add_task(function* test_reset() {
@ -150,7 +156,7 @@ add_task(function* test_reset() {
caseSensitive: false,
entireWord: false,
finder: gMockFinder,
onRange: range => ++count,
listener: { onIteratorRangeFound(range) { ++count; } },
word: findText
});
@ -181,7 +187,7 @@ add_task(function* test_parallel_starts() {
caseSensitive: false,
entireWord: false,
finder: gMockFinder,
onRange: range => ++count,
listener: { onIteratorRangeFound(range) { ++count; } },
word: findText
});
@ -194,7 +200,7 @@ add_task(function* test_parallel_starts() {
caseSensitive: false,
entireWord: false,
finder: gMockFinder,
onRange: range => ++count2,
listener: { onIteratorRangeFound(range) { ++count2; } },
word: findText
});