Bug 1397737 - Show a "…" ellipsis if the width of search tooltip is over 150px to match visual design spec. r=mconley
authorEvan Tseng <evan@tseng.io>
Thu, 28 Sep 2017 16:18:31 +0800
changeset 427034 f2b67f97ef41ed92915035ca6e7037de5691b387
parent 427033 25cdc47d74bffe6397101f375226fb51f4c90edd
child 427035 a0feee4c1123a2242362e6f2c4b7d5cc82eef886
push id97
push userfmarier@mozilla.com
push dateSat, 14 Oct 2017 01:12:59 +0000
reviewersmconley
bugs1397737
milestone58.0a1
Bug 1397737 - Show a "…" ellipsis if the width of search tooltip is over 150px to match visual design spec. r=mconley The visual design suggestion is from https://bugzilla.mozilla.org/show_bug.cgi?id=1397737#c2. MozReview-Commit-ID: 91iciz52s5d
browser/components/preferences/in-content/findInPage.js
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/in-content/findInPage.js
+++ b/browser/components/preferences/in-content/findInPage.js
@@ -456,18 +456,20 @@ var gSearchResultsPane = {
    * @param String query
    *    Word or words that are being searched for
    */
   createSearchTooltip(anchorNode, query) {
     if (anchorNode.tooltipNode) {
       return;
     }
     let searchTooltip = anchorNode.ownerDocument.createElement("span");
+    let searchTooltipText = anchorNode.ownerDocument.createElement("span");
     searchTooltip.setAttribute("class", "search-tooltip");
-    searchTooltip.textContent = query;
+    searchTooltipText.textContent = query;
+    searchTooltip.appendChild(searchTooltipText);
 
     // 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);
   },
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -671,22 +671,22 @@ button > hbox > label {
   margin: 20px 0 30px 0;
 }
 
 #searchInput .textbox-search-icons:not([selectedIndex="1"]) {
   display: none;
 }
 
 .search-tooltip {
+  max-width: 150px;
   font-size: 1.25rem;
   position: absolute;
   padding: 0 10px;
   background-color: #ffe900;
   border: 1px solid #d7b600;
-  -moz-user-select: none;
   bottom: 36px;
 }
 
 .search-tooltip:hover,
 .search-tooltip:hover::before {
   opacity: .1;
 }
 
@@ -707,16 +707,23 @@ button > hbox > label {
   top: 100%;
   offset-inline-start: calc(50% - 6px);
 }
 
 .search-tooltip-parent {
   position: relative;
 }
 
+.search-tooltip > span {
+  -moz-user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .visually-hidden {
   visibility: hidden;
 }
 
 menulist {
   height: 30px;
   margin-top: 4px;
   margin-bottom: 4px;