Bug 1377319 - Reference to the right tooltip element to correct position r?jaws
MozReview-Commit-ID: DggmoNQNgxF
--- a/browser/components/preferences/in-content-new/findInPage.js
+++ b/browser/components/preferences/in-content-new/findInPage.js
@@ -407,50 +407,53 @@ var gSearchResultsPane = {
* @param String query
* Word or words that are being searched for
*/
createSearchTooltip(anchorNode, query) {
let searchTooltip = anchorNode.ownerDocument.createElement("span");
searchTooltip.setAttribute("class", "search-tooltip");
searchTooltip.textContent = query;
- anchorNode.setAttribute("data-has-tooltip", "true");
+ // Set tooltipNode property to track corresponded tooltip node.
+ anchorNode.tooltipNode = searchTooltip;
anchorNode.parentElement.classList.add("search-tooltip-parent");
anchorNode.parentElement.appendChild(searchTooltip);
this.calculateTooltipPosition(anchorNode);
},
calculateTooltipPosition(anchorNode) {
- let searchTooltip = anchorNode.parentElement.querySelector(":scope > .search-tooltip");
-
+ let searchTooltip = anchorNode.tooltipNode;
// 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);
+ let offSetLeft = (anchorRect.width / 2) - (tooltipRect.width / 2);
let relativeOffset = anchorRect.left - parentRect.left;
- offSet += relativeOffset > 0 ? relativeOffset : 0;
+ offSetLeft += relativeOffset > 0 ? relativeOffset : 0;
+ // 20.5 is reserved for tooltip position
+ let offSetTop = anchorRect.top - parentRect.top - 20.5;
- searchTooltip.style.setProperty("left", `${offSet}px`);
+ searchTooltip.style.setProperty("left", `${offSetLeft}px`);
+ searchTooltip.style.setProperty("top", `${offSetTop}px`);
},
/**
* Remove all search tooltips that were created.
*/
removeAllSearchTooltips() {
let searchTooltips = Array.from(document.querySelectorAll(".search-tooltip"));
for (let searchTooltip of searchTooltips) {
searchTooltip.parentElement.classList.remove("search-tooltip-parent");
searchTooltip.remove();
}
- this.listSearchTooltips.forEach((anchorNode) => anchorNode.removeAttribute("data-has-tooltip"));
+ this.listSearchTooltips.forEach((anchorNode) => anchorNode.tooltipNode.remove());
this.listSearchTooltips.clear();
},
/**
* Remove all indicators on menuitem.
*/
removeAllSearchMenuitemIndicators() {
this.listSearchMenuitemIndicators.forEach((node) => node.removeAttribute("indicator"));
--- a/browser/components/preferences/in-content-new/subdialogs.js
+++ b/browser/components/preferences/in-content-new/subdialogs.js
@@ -333,26 +333,22 @@ SubDialog.prototype = {
}
this._trapFocus();
// Search within main document and highlight matched keyword.
gSearchResultsPane.searchWithinNode(this._titleElement, gSearchResultsPane.query);
// Search within sub-dialog document and highlight matched keyword.
- let subDialogsChildren = this._frame.contentDocument
- .querySelectorAll(":scope > *:not([data-hidden-from-search])");
-
- for (let i = 0; i < subDialogsChildren.length; i++) {
- gSearchResultsPane.searchWithinNode(subDialogsChildren[i], gSearchResultsPane.query);
- }
+ gSearchResultsPane.searchWithinNode(this._frame.contentDocument.firstElementChild,
+ gSearchResultsPane.query);
// Creating tooltips for all the instances found
for (let node of gSearchResultsPane.listSearchTooltips) {
- if (!node.getAttribute("data-has-tooltip")) {
+ if (!node.tooltipNode) {
gSearchResultsPane.createSearchTooltip(node, gSearchResultsPane.query);
}
}
},
_onResize(mutations) {
let frame = this._frame;
// The width and height styles are needed for the initial
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -618,24 +618,24 @@ groupbox {
color: var(--in-content-category-text);
text-decoration: none;
}
.search-tooltip {
font-size: 1.25rem;
position: absolute;
padding: 0 10px;
- bottom: 100%;
background-color: #ffe900;
border: 1px solid #d7b600;
+ -moz-user-select: none;
}
.search-tooltip:hover,
.search-tooltip:hover::before {
- filter: opacity(10%);
+ opacity: .1;
}
.search-tooltip::before {
position: absolute;
content: "";
border: 7px solid transparent;
border-top-color: #d7b600;
top: 100%;