Bug 1572692 - Properly crop results in the Search panel; r=nchevobbe

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

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

devtools/client/netmonitor/src/assets/styles/RequestList.css

@@ -54,6 +54,7 @@
 .requests-list-scroll {
   overflow-x: hidden;
   overflow-y: auto;
+  width: 100% !important;
 }
 
 .requests-list-table,

devtools/client/netmonitor/src/assets/styles/search.css

@@ -2,67 +2,55 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.network-monitor .monitor-panel .request-list-container .requests-list-scroll {
-    width: 100% !important;
-}
-
 .search-panel {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.search-panel-content {
-    width: 100%;
-    overflow: auto;
+.search-panel .search-panel-content {
+  width: 100%;
+  overflow: auto;
+}
+
+.search-panel .treeTable {
+  width: 100%;
+  color: var(--table-text-color);
 }
 
 /* Custom tree styles for the Search results panel*/
 .search-panel .treeTable .treeLabelCell::after {
-    content: "";
+  content: "";
 }
 
 /* Color for resource label */
 .search-panel .resourceCell {
-    color: var(--theme-text-color-inactive);
+  color: var(--theme-text-color-inactive);
 }
 
-/* Color for search result label */
-.search-panel .resultCell {
-    color: var(--table-text-color);
-    text-overflow: ellipsis;
-}
-
-/* Color for search result label */
-.search-panel .treeLabel.resultLabel {
-    color: var(--theme-text-color-inactive);
-}
-
-/* Break the column layout and make the search result output more compact */
-.search-panel .treeTable tr {
-    display: block;
-}
-
-.search-panel .treeTable {
-    width: 100%;
+.search-panel .treeTable .treeLabelCell {
+  text-overflow: ellipsis;
+  max-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 #devtools-network-search-close::before {
-    background-image: url("chrome://devtools/skin/images/close.svg");
+  background-image: url("chrome://devtools/skin/images/close.svg");
 }
 
 #devtools-network-search-close > button {
-    margin: 0 !important;
-    border-radius: 0 !important;
-    position: relative;
-    min-width: 26px;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  position: relative;
+  min-width: 26px;
 }
 
 /* Color for query matches */
 .search-panel .resultCell .query-match {
-    background-color: var(--theme-selection-background);
-    color: white;
-    padding: 1px 4px;
-    margin: 0 2px 0 2px;
-    border-radius: 2px;
+  background-color: var(--theme-selection-background);
+  color: white;
+  padding: 1px 4px;
+  margin: 0 2px 0 2px;
+  border-radius: 2px;
 }

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

@@ -18,9 +18,18 @@ const {
 } = require("devtools/client/shared/redux/visibility-handler-connect");
 const TreeViewClass = require("devtools/client/shared/components/tree/TreeView");
 const TreeView = createFactory(TreeViewClass);
+const LabelCell = createFactory(
+  require("devtools/client/shared/components/tree/LabelCell")
+);
 const { SearchProvider } = require("./search-provider");
 const Toolbar = createFactory(require("./Toolbar"));
 
+// There are two levels in the search panel tree hierarchy:
+// 0: Resource - represents the source request object
+// 1: Search Result - represents a match coming from the parent resource
+const RESOURCE_LEVEL = 0;
+const SEARCH_RESULT_LEVEL = 1;
+
 /**
  * This component is responsible for rendering all search results
  * coming from the current search.
@@ -41,54 +50,80 @@ class SearchPanel extends Component {
 
   constructor(props) {
     super(props);
+
     this.searchboxRef = createRef();
     this.renderValue = this.renderValue.bind(this);
+    this.renderLabel = this.renderLabel.bind(this);
+
+    this.provider = SearchProvider;
+  }
+
+  /**
+   * Custom TreeView label rendering. The search result
+   * value isn't rendered in separate column, but in the
+   * same column as the label (to save space).
+   */
+  renderLabel(props) {
+    const member = props.member;
+    const level = member.level || 0;
+    const className = level == RESOURCE_LEVEL ? "resourceCell" : "resultCell";
+
+    // Customize label rendering by adding a suffix/value
+    const renderSuffix = () => {
+      return dom.span(
+        {
+          className,
+        },
+        " ",
+        this.renderValue(props)
+      );
+    };
+
+    return LabelCell({
+      ...props,
+      renderSuffix,
+    });
   }
 
   renderTree() {
     const { results } = this.props;
     return TreeView({
       object: results,
-      provider: SearchProvider,
+      provider: this.provider,
       expandableStrings: false,
-      renderValue: this.renderValue,
-      columns: [
-        {
-          id: "value",
-          width: "100%",
-        },
-      ],
+      renderLabelCell: this.renderLabel,
+      columns: [],
     });
   }
 
   /**
    * Custom tree value rendering. This method is responsible for
-   * rendering highlighted query string within the search result.
+   * rendering highlighted query string within the search result
+   * result tree.
    */
   renderValue(props) {
     const member = props.member;
-    /**
-     * Handle only second level (zero based) that displays
-     * the search result. Find the query string inside the
-     * search result value (`props.object`) and render it
-     * within a span element with proper class name.
-     *
-     * level 0 = resource name
-     */
-    if (member.level === 1) {
+
+    // Handle only second level (zero based) that displays
+    // the search result. Find the query string inside the
+    // search result value (`props.object`) and render it
+    // within a span element with proper class name.
+    // level 0 = resource name
+    if (member.level === SEARCH_RESULT_LEVEL) {
       const { query } = this.props;
-      const indexStart = props.object.indexOf(query);
+      const value = member.object.value;
+      const indexStart = value.indexOf(query);
       const indexEnd = indexStart + query.length;
 
       return span(
         {},
-        span({}, props.object.substring(0, indexStart)),
+        span({}, value.substring(0, indexStart)),
         span({ className: "query-match" }, query),
-        span({}, props.object.substring(indexEnd, props.object.length))
+        span({}, value.substring(indexEnd, value.length))
       );
     }
 
-    return props.object;
+    return this.provider.getValue(member.object);
   }
 
   render() {

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

@@ -58,7 +58,7 @@ const SearchProvider = {
 
   getValue(object) {
     if (object.resource) {
-      return object.resource.url;
+      return "";
     } else if (object.type) {
       return object.value;
     }
@@ -84,17 +84,14 @@ const SearchProvider = {
   },
 
   getResourceLabel(object) {
-    const resourceLabel =
+    return (
       getFileName(object.resource.urlDetails.baseNameWithQuery) ||
-      object.resource.urlDetails.host;
-    if (resourceLabel.length > 30) {
-      return resourceLabel.substring(0, 30) + "…";
-    }
-    return resourceLabel;
+      object.resource.urlDetails.host
+    );
   },
 
   getUrlLabel(object) {
-    return object.label.substring(0, 100);
+    return object.label;
   },
 
   getResponseContent(object) {

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

@@ -21,6 +21,7 @@ define(function(require, exports, module) {
       return {
         id: PropTypes.string.isRequired,
         member: PropTypes.object.isRequired,
+        renderSuffix: PropTypes.func,
       };
     }
 
@@ -28,6 +29,7 @@ define(function(require, exports, module) {
       const id = this.props.id;
       const member = this.props.member;
       const level = member.level || 0;
+      const renderSuffix = this.props.renderSuffix;
 
       const iconClassList = ["treeIcon"];
       if (member.hasChildren && member.loading) {
@@ -61,7 +63,8 @@ define(function(require, exports, module) {
             "data-level": level,
           },
           member.name
-        )
+        ),
+        renderSuffix && renderSuffix(member)
       );
     }
   }

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

@@ -62,8 +62,8 @@ define(function(require, exports, module) {
           loading: PropTypes.bool,
         }),
         decorator: PropTypes.object,
-        renderCell: PropTypes.object,
-        renderLabelCell: PropTypes.object,
+        renderCell: PropTypes.func,
+        renderLabelCell: PropTypes.func,
         columns: PropTypes.array.isRequired,
         id: PropTypes.string.isRequired,
         provider: PropTypes.object.isRequired,