Bug 1573857 - Search doesn't properly for Cookies. r=Honza

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

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

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

@@ -108,7 +108,8 @@ class SearchPanel extends Component {
    * result tree.
    */
   renderValue(props) {
-    const member = props.member;
+    const { member } = props;
+    const { query } = this.props;
 
     // Handle only second level (zero based) that displays
     // the search result. Find the query string inside the
@@ -116,17 +117,51 @@ class SearchPanel extends Component {
     // within a span element with proper class name.
     // level 0 = resource name
     if (member.level === SEARCH_RESULT_LEVEL) {
-      const { query } = this.props;
-      const value = member.object.value;
-      const indexStart = value.indexOf(query);
+      const { object } = member;
+
+      if (object.startIndex && object.startIndex.length > 1) {
+        let indexStart = 0;
+        const allMatches = object.startIndex.map((match, index) => {
+          if (index === 0) {
+            indexStart = match - 50;
+          }
+
+          const highlightedMatch = [
+            span(
+              { key: "match-" + match },
+              object.value.substring(indexStart, match - query.length)
+            ),
+            span(
+              {
+                className: "query-match",
+                key: "match-" + match + "-highlight",
+              },
+              object.value.substring(match - query.length, match)
+            ),
+          ];
+
+          indexStart = match;
+
+          return highlightedMatch;
+        });
+
+        return span({}, allMatches);
+      }
+
+      const indexStart = object.value.indexOf(query);
       const indexEnd = indexStart + query.length;
 
-      return span(
-        {},
-        span({}, value.substring(0, indexStart)),
-        span({ className: "query-match" }, query),
-        span({}, value.substring(indexEnd, value.length))
-      );
+      if (indexStart > 0) {
+        return span(
+          {},
+          span({}, object.value.substring(0, indexStart)),
+          span(
+            { className: "query-match" },
+            object.value.substring(indexStart, indexStart + query.length)
+          ),
+          span({}, object.value.substring(indexEnd, object.value.length))
+        );
+      }
     }
 
     return this.provider.getValue(member.object);

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

@@ -4,7 +4,6 @@
 
 "use strict";
 
-const { L10N } = require("devtools/client/netmonitor/src/utils/l10n");
 const {
   ObjectProvider,
 } = require("devtools/client/shared/components/tree/ObjectProvider");
@@ -37,21 +36,8 @@ const SearchProvider = {
   getLabel(object) {
     if (object.resource) {
       return this.getResourceLabel(object);
-    } else if (object.type) {
-      switch (object.type) {
-        case "url":
-          return this.getUrlLabel(object);
-        case "responseContent":
-          return this.getResponseContent(object);
-        case "requestCookies":
-          return this.getRequestCookies();
-        case "responseCookies":
-          return this.getResponseCookies();
-        case "requestHeaders":
-          return this.getRequestHeaders();
-        case "responseHeaders":
-          return this.getResponseHeaders();
-      }
+    } else if (object.label) {
+      return object.label;
     }
     return ObjectProvider.getLabel(object);
   },
@@ -89,30 +75,6 @@ const SearchProvider = {
       object.resource.urlDetails.host
     );
   },
-
-  getUrlLabel(object) {
-    return object.label;
-  },
-
-  getResponseContent(object) {
-    return object.line + "";
-  },
-
-  getRequestCookies() {
-    return "Set-Cookie";
-  },
-
-  getResponseCookies() {
-    return "Cookie";
-  },
-
-  getRequestHeaders() {
-    return L10N.getStr("netmonitor.search.labels.requestHeaders");
-  },
-
-  getResponseHeaders() {
-    return L10N.getStr("netmonitor.search.labels.responseHeaders");
-  },
 };
 
 module.exports = {

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

@@ -138,6 +138,10 @@ function findMatches(resource, query, data) {
   const resourceValue = getValue(data.key, resource);
   const resourceType = getType(resourceValue);
 
+  if (resource.hasOwnProperty("name") && resource.hasOwnProperty("value")) {
+    return searchInProperties(query, resource, data);
+  }
+
   switch (resourceType) {
     case "string":
       return searchInText(query, resourceValue, data);
@@ -150,6 +154,25 @@ function findMatches(resource, query, data) {
   }
 }
 
+function searchInProperties(query, obj, data) {
+  const match = {
+    ...data,
+  };
+
+  if (obj.name.includes(query)) {
+    match.label = obj.name;
+  }
+
+  if (obj.name.includes(query) || obj.value.includes(query)) {
+    match.value = obj.value;
+    match.startIndex = obj.value.indexOf(query);
+
+    return match;
+  }
+
+  return [];
+}
+
 /**
  * Get type of resource - deals with arrays as well.
  * @param resource
@@ -175,27 +198,39 @@ function getValue(path, obj) {
  * @param query
  * @param text
  * @param data
- * @returns {*}
+ * @returns {Array}
  */
 function searchInText(query, text, data) {
-  const { type, label } = data;
+  const { type } = data;
   const lines = text.split(/\r\n|\r|\n/);
   const matches = [];
 
   // iterate through each line
-  lines.forEach((curr, i, arr) => {
+  lines.forEach((curr, i) => {
     const regexQuery = RegExp(query, "gmi");
+    const lineMatches = [];
     let singleMatch;
 
     while ((singleMatch = regexQuery.exec(lines[i])) !== null) {
       const startIndex = regexQuery.lastIndex;
-      matches.push({
-        type,
-        label,
-        line: i,
-        value: getTruncatedValue(lines[i], query, startIndex),
-        startIndex,
-      });
+      lineMatches.push(startIndex);
+    }
+
+    if (lineMatches.length !== 0) {
+      const line = i + 1 + "";
+      const match = {
+        ...data,
+        label: type !== "url" ? line : "Url",
+        line,
+        startIndex: lineMatches,
+      };
+
+      match.value =
+        lineMatches.length === 1
+          ? getTruncatedValue(lines[i], query, lineMatches[0])
+          : lines[i];
+
+      matches.push(match);
     }
   });
 
@@ -212,12 +247,11 @@ function searchInText(query, text, data) {
  */
 function searchInArray(query, arr, data) {
   const { type, key, label } = data;
-
   const matches = arr
     .filter(match => JSON.stringify(match).includes(query))
     .map((match, i) =>
       findMatches(match, query, {
-        label,
+        label: match.hasOwnProperty("name") ? match.name : label,
         key: key + ".[" + i + "]",
         type,
       })
@@ -227,8 +261,8 @@ function searchInArray(query, arr, data) {
 }
 
 /**
- * Return query match and up to 100 characters on left and right.
- * (100) + [matched query] + (100)
+ * Return query match and up to 50 characters on left and right.
+ * (50) + [matched query] + (50)
  * @param value
  * @param query
  * @param startIndex
@@ -238,14 +272,14 @@ function getTruncatedValue(value, query, startIndex) {
   const valueSize = value.length;
   const indexEnd = startIndex + query.length;
 
-  if (valueSize < 200 + query.length) {
+  if (valueSize < 100 + query.length) {
     return value;
   }
 
-  const start = value.substring(startIndex, startIndex - 100);
-  const end = value.substring(indexEnd, indexEnd + 100);
+  const start = value.substring(startIndex, startIndex - 50);
+  const end = value.substring(indexEnd, indexEnd + 50);
 
-  return start + query + end;
+  return start + end;
 }
 
 /**
@@ -257,44 +291,31 @@ function getTruncatedValue(value, query, startIndex) {
  * @returns {*}
  */
 function searchInObject(query, obj, data) {
-  const { type, label } = data;
+  const { type } = data;
   const matches = data.hasOwnProperty("collector") ? data.collector : [];
 
   for (const objectKey in obj) {
-    if (obj.hasOwnProperty(objectKey)) {
-      if (typeof obj[objectKey] === "object") {
-        searchInObject(obj[objectKey], query, {
-          collector: matches,
-          type,
-          label: objectKey,
-        });
-      }
-
-      let location;
-
-      if (objectKey) {
-        if (objectKey.includes(query)) {
-          location = "name";
-        } else if (
-          typeof obj[objectKey] === "string" &&
-          obj[objectKey].includes(query)
-        ) {
-          location = "value";
-        }
-      }
-
-      if (!location) {
-        continue;
-      }
+    const objectKeyType = getType(obj[objectKey]);
 
+    // if the value is an object, send to search in object
+    if (objectKeyType === "object" && Object.keys(obj[objectKey].length > 1)) {
+      searchInObject(query, obj[objectKey], {
+        ...data,
+        collector: matches,
+      });
+    } else if (
+      (objectKeyType === "string" && obj[objectKey].includes(query)) ||
+      objectKey.includes(query)
+    ) {
       const match = {
+        ...data,
         type,
-        label: objectKey,
       };
 
-      const value = location === "name" ? objectKey : obj[objectKey];
+      const value = obj[objectKey];
       const startIndex = value.indexOf(query);
 
+      match.label = objectKey;
       match.startIndex = startIndex;
       match.value = getTruncatedValue(value, query, startIndex);