Bug 1377319 - Reference to the right tooltip element to correct position r?jaws draft
authorRicky Chien <ricky060709@gmail.com>
Thu, 29 Jun 2017 15:58:13 -0700
changeset 603454 b61e3a69934942b4cfd2522ec4016dda766d1e39
parent 603394 e6a7a778ba132b87f346a5458b0879c45a3061b7
child 635945 fce4beda7eee4b751d199af55c9942ce5edc55f8
push id66803
push userbmo:rchien@mozilla.com
push dateTue, 04 Jul 2017 06:46:27 +0000
reviewersjaws
bugs1377319
milestone56.0a1
Bug 1377319 - Reference to the right tooltip element to correct position r?jaws MozReview-Commit-ID: DggmoNQNgxF
browser/components/preferences/in-content-new/findInPage.js
browser/components/preferences/in-content-new/subdialogs.js
browser/themes/shared/incontentprefs/preferences.inc.css
--- 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%;