Bug 1374230 - Wrong tooltip position after resizing browser window r?mconley
MozReview-Commit-ID: GYPjtzRTQdf
--- a/browser/components/preferences/in-content-new/findInPage.js
+++ b/browser/components/preferences/in-content-new/findInPage.js
@@ -13,16 +13,29 @@ var gSearchResultsPane = {
init() {
this.searchResultsCategory = document.getElementById("category-search-results");
this.searchInput = document.getElementById("searchInput");
this.searchInput.hidden = !Services.prefs.getBoolPref("browser.preferences.search");
if (!this.searchInput.hidden) {
this.searchInput.addEventListener("command", this);
this.searchInput.addEventListener("focus", this);
+
+ // Throttling the resize event to reduce the callback frequency
+ let callbackId;
+ window.addEventListener("resize", () => {
+ if (!callbackId) {
+ callbackId = window.requestAnimationFrame(() => {
+ this.listSearchTooltips.forEach((anchorNode) => {
+ this.calculateTooltipPosition(anchorNode);
+ });
+ callbackId = null;
+ });
+ }
+ });
}
},
handleEvent(event) {
if (event.type === "command") {
this.searchFunction(event);
} else if (event.type === "focus") {
this.initializeCategories();
@@ -386,16 +399,22 @@ var gSearchResultsPane = {
let searchTooltip = anchorNode.ownerDocument.createElement("span");
searchTooltip.setAttribute("class", "search-tooltip");
searchTooltip.textContent = query;
anchorNode.setAttribute("data-has-tooltip", "true");
anchorNode.parentElement.classList.add("search-tooltip-parent");
anchorNode.parentElement.appendChild(searchTooltip);
+ this.calculateTooltipPosition(anchorNode);
+ },
+
+ calculateTooltipPosition(anchorNode) {
+ let searchTooltip = anchorNode.parentElement.querySelector(":scope > .search-tooltip");
+
// In order to get the up-to-date position of each of the nodes that we're
// putting tooltips on, we have to flush layout intentionally, and that
// this is the result of a XUL limitation (bug 1363730).
let anchorRect = anchorNode.getBoundingClientRect();
let tooltipRect = searchTooltip.getBoundingClientRect();
let parentRect = anchorNode.parentElement.getBoundingClientRect();
let offSet = (anchorRect.width / 2) - (tooltipRect.width / 2);