Bug 1575930 - Add tool-tip in search results panel. r=Honza

Differential Revision: https://phabricator.services.mozilla.com/D43149

--HG--
extra : moz-landing-system : lando

devtools/client/netmonitor/src/actions/search.js

@@ -111,7 +111,7 @@ function searchResource(resource, query) {
       return;
     }
 
-    dispatch(addSearchResult(resource, result, query));
+    dispatch(addSearchResult(resource, result));
   };
 }
 

devtools/client/netmonitor/src/components/search/SearchPanel.js

@@ -87,6 +87,10 @@ class SearchPanel extends Component {
 
     return LabelCell({
       ...props,
+      title:
+        member.level == 1
+          ? this.provider.getValue(member.object)
+          : this.provider.getResourceTooltipLabel(member.object),
       renderSuffix,
     });
   }
@@ -119,6 +123,7 @@ class SearchPanel extends Component {
     if (member.level === SEARCH_RESULT_LEVEL) {
       const { object } = member;
 
+      // Handles multiple matches in a string
       if (object.startIndex && object.startIndex.length > 1) {
         let indexStart = 0;
         const allMatches = object.startIndex.map((match, index) => {
@@ -145,15 +150,16 @@ class SearchPanel extends Component {
           return highlightedMatch;
         });
 
-        return span({}, allMatches);
+        return span({ title: object.value }, allMatches);
       }
 
       const indexStart = object.value.indexOf(query);
       const indexEnd = indexStart + query.length;
 
+      // Handles a match in a string
       if (indexStart > 0) {
         return span(
-          {},
+          { title: object.value },
           span({}, object.value.substring(0, indexStart)),
           span(
             { className: "query-match" },
@@ -162,6 +168,10 @@ class SearchPanel extends Component {
           span({}, object.value.substring(indexEnd, object.value.length))
         );
       }
+
+      // Default for key:value matches where query might not
+      // be present in the value, but found in the key.
+      return span({ title: object.value }, span({}, object.value));
     }
 
     return this.provider.getValue(member.object);

devtools/client/netmonitor/src/components/search/search-provider.js

@@ -69,6 +69,15 @@ const SearchProvider = {
     return ObjectProvider.getType(object);
   },
 
+  getResourceTooltipLabel(object) {
+    const { resource } = object;
+    if (resource.urlDetails && resource.urlDetails.url) {
+      return resource.urlDetails.url;
+    }
+
+    return this.getResourceLabel(object);
+  },
+
   getResourceLabel(object) {
     return (
       getFileName(object.resource.urlDetails.baseNameWithQuery) ||

devtools/client/netmonitor/src/reducers/search.js

@@ -63,9 +63,10 @@ function onAddSearchQuery(state, action) {
 }
 
 function onAddSearchResult(state, action) {
+  const { resource } = action;
   const results = state.results.slice();
   results.push({
-    resource: action.resource,
+    resource,
     results: action.result,
   });
 

devtools/client/shared/components/tree/LabelCell.js

@@ -18,6 +18,7 @@ define(function(require, exports, module) {
     static get propTypes() {
       return {
         id: PropTypes.string.isRequired,
+        title: PropTypes.string,
         member: PropTypes.object.isRequired,
         renderSuffix: PropTypes.func,
       };
@@ -25,6 +26,7 @@ define(function(require, exports, module) {
 
     render() {
       const id = this.props.id;
+      const title = this.props.title;
       const member = this.props.member;
       const level = member.level || 0;
       const renderSuffix = this.props.renderSuffix;
@@ -42,6 +44,7 @@ define(function(require, exports, module) {
       return dom.td(
         {
           className: "treeLabelCell",
+          title,
           style: {
             // Compute indentation dynamically. The deeper the item is
             // inside the hierarchy, the bigger is the left padding.
@@ -57,6 +60,7 @@ define(function(require, exports, module) {
         dom.span(
           {
             className: "treeLabel " + member.type + "Label",
+            title,
             "aria-labelledby": id,
             "data-level": level,
           },