Bug 1550423 - When a result's title or URL overflows, expose the full value in a tooltip. r=mak
authorDão Gottwald <dao@mozilla.com>
Thu, 09 May 2019 13:06:53 +0000
changeset 532051 1e371ad57bd0be4039954e30bc0832350e9f3656
parent 532042 912b44cef0bcf2ddf29778ee2f5d8586933095af
child 532052 035696395109f035a7c314c9f759843a364dc01f
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak
bugs1550423
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1550423 - When a result's title or URL overflows, expose the full value in a tooltip. r=mak Differential Revision: https://phabricator.services.mozilla.com/D30470
browser/components/urlbar/UrlbarInput.jsm
browser/components/urlbar/UrlbarView.jsm
--- a/browser/components/urlbar/UrlbarInput.jsm
+++ b/browser/components/urlbar/UrlbarInput.jsm
@@ -55,16 +55,17 @@ class UrlbarInput {
     // the container element.
     let MozXULElement = this.window.MozXULElement;
     // TODO Bug 1535659: urlbarView-body-inner possibly doesn't need the
     // role="combobox" once bug 1513337 is fixed.
     this.document.getElementById("mainPopupSet").appendChild(
       MozXULElement.parseXULToFragment(`
         <panel id="urlbar-results"
                role="group"
+               tooltip="aHTMLTooltip"
                noautofocus="true"
                hidden="true"
                flip="none"
                consumeoutsideclicks="never"
                norolluponanchor="true"
                level="parent">
           <html:div class="urlbarView-body-outer">
             <html:div class="urlbarView-body-inner"
--- a/browser/components/urlbar/UrlbarView.jsm
+++ b/browser/components/urlbar/UrlbarView.jsm
@@ -566,16 +566,20 @@ class UrlbarView {
       favicon.src = result.payload.icon || UrlbarUtils.ICON.SEARCH_GLASS;
     } else {
       favicon.src = result.payload.icon || UrlbarUtils.ICON.DEFAULT;
     }
 
     let title = item._elements.get("title");
     this._addTextContentWithHighlights(
       title, result.title, result.titleHighlights);
+    title._tooltip = result.title;
+    if (title.hasAttribute("overflow")) {
+      title.setAttribute("title", title._tooltip);
+    }
 
     let tagsContainer = item._elements.get("tagsContainer");
     tagsContainer.textContent = "";
     if (result.payload.tags && result.payload.tags.length > 0) {
       tagsContainer.append(...result.payload.tags.map((tag, i) => {
         const element = this._createElement("span");
         element.className = "urlbarView-tag";
         this._addTextContentWithHighlights(
@@ -614,18 +618,23 @@ class UrlbarView {
         }
         break;
     }
 
     let url = item._elements.get("url");
     if (setURL) {
       this._addTextContentWithHighlights(url, result.payload.displayUrl,
                                          result.payloadHighlights.displayUrl || []);
+      url._tooltip = result.payload.displayUrl;
     } else {
       url.textContent = "";
+      url._tooltip = "";
+    }
+    if (url.hasAttribute("overflow")) {
+      url.setAttribute("title", url._tooltip);
     }
 
     if (isVisitAction) {
       action = bundle.GetStringFromName("visit");
       title.setAttribute("isurl", "true");
     } else {
       title.removeAttribute("isurl");
     }
@@ -815,24 +824,26 @@ class UrlbarView {
     this.input.pickResult(event, parseInt(row.getAttribute("resultIndex")));
   }
 
   _on_overflow(event) {
     if (event.detail == 1 &&
         (event.target.classList.contains("urlbarView-url") ||
          event.target.classList.contains("urlbarView-title"))) {
       event.target.toggleAttribute("overflow", true);
+      event.target.setAttribute("title", event.target._tooltip);
     }
   }
 
   _on_underflow(event) {
     if (event.detail == 1 &&
         (event.target.classList.contains("urlbarView-url") ||
          event.target.classList.contains("urlbarView-title"))) {
       event.target.toggleAttribute("overflow", false);
+      event.target.removeAttribute("title");
     }
   }
 
   _on_popupshowing() {
     this.window.addEventListener("resize", this);
   }
 
   _on_popupshown() {