Search result tree + ellipsis

diff --git a/devtools/client/netmonitor/src/assets/styles/search.css b/devtools/client/netmonitor/src/assets/styles/search.css
--- a/devtools/client/netmonitor/src/assets/styles/search.css
+++ b/devtools/client/netmonitor/src/assets/styles/search.css
@@ -1,29 +1,36 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
+.search-panel .treeTable {
+  width: 100%;
+}
+
 /* Custom tree styles for the Search results panel*/
 .search-panel .treeTable .treeLabelCell::after {
   content: "";
 }
 
 /* Color for resource label */
-.search-panel .treeValueCell.resourceCell {
+.search-panel .resourceCell {
   color: var(--theme-text-color-inactive);
 
 }
 
 /* Color for search result label */
-.search-panel .treeValueCell.resultCell {
+.search-panel .resultCell {
   color: var(--table-text-color);
 }
 
 /* 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 .treeLabelCell {
+  text-overflow: ellipsis;
+  max-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
 }
+
diff --git a/devtools/client/netmonitor/src/components/MonitorPanel.js b/devtools/client/netmonitor/src/components/MonitorPanel.js
--- a/devtools/client/netmonitor/src/components/MonitorPanel.js
+++ b/devtools/client/netmonitor/src/components/MonitorPanel.js
@@ -175,17 +175,17 @@ class MonitorPanel extends Component {
       maxSize: "80%",
       splitterSize: 1,
       startPanel: SearchPanel({
         ref: "searchPanel",
       }),
       endPanel: RequestList({ isEmpty, connector }),
       endPanelControl: false,
       vert: true,
-      onControlledPanelResized: () => {},
+      onControlledPanelResized: this.onNetworkDetailsResized,
     });
   }
 
   render() {
     const {
       actions,
       connector,
       isEmpty,
diff --git a/devtools/client/netmonitor/src/components/search/SearchPanel.js b/devtools/client/netmonitor/src/components/search/SearchPanel.js
--- a/devtools/client/netmonitor/src/components/search/SearchPanel.js
+++ b/devtools/client/netmonitor/src/components/search/SearchPanel.js
@@ -27,55 +27,85 @@ class SearchPanel extends Component {
     return {
       // TODO: validate all props
     };
   }
 
   constructor(props) {
     super(props);
 
-    this.renderValue = this.renderValue.bind(this);
+    this.renderLabel = this.renderLabel.bind(this);
+    this.provider = SearchProvider;
+  }
+
+  renderLabel(props) {
+    const id = props.id;
+    const member = props.member;
+    const level = member.level || 0;
+
+    const iconClassList = ["treeIcon"];
+    if (member.hasChildren && member.loading) {
+      iconClassList.push("devtools-throbber");
+    } else if (member.hasChildren) {
+      iconClassList.push("theme-twisty");
+    }
+    if (member.open) {
+      iconClassList.push("open");
+    }
+
+    const labelClassList = [];
+    if (level == 0) {
+      labelClassList.push("resourceCell");
+    } else if (level == 1) {
+      labelClassList.push("resultCell");
+    }
+
+    return dom.td(
+      {
+        className: "treeLabelCell",
+        style: {
+          // Compute indentation dynamically. The deeper the item is
+          // inside the hierarchy, the bigger is the left padding.
+          "--tree-label-cell-indent": `${level * 16}px`,
+        },
+        key: "default",
+        role: "presentation",
+      },
+      dom.span({
+        className: iconClassList.join(" "),
+        role: "presentation",
+      }),
+      dom.span(
+        {
+          className: "treeLabel " + member.type + "Label",
+          "aria-labelledby": id,
+          "data-level": level,
+        },
+        member.name
+      ),
+      " ",
+      dom.span(
+        {
+          className: labelClassList.join(" "),
+        },
+        this.provider.getValue(member.object)
+      )
+    );
   }
 
   renderTree() {
     const { results } = this.props;
     return TreeView({
       object: results,
-      provider: SearchProvider,
-      renderValue: this.renderValue,
-      columns: [
-        {
-          id: "value",
-          width: "100%",
-        },
-      ],
+      provider: this.provider,
+      renderLabelCell: this.renderLabel,
+      columns: [],
     });
   }
 
-  /**
-   * Custom tree value rendering. This method is responsible for
-   * rendering highlighted query string within the search result.
-   */
-  renderValue(props) {
-    const member = props.member;
-    const value = props.value;
-    const path = member.path;
-
-    // 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.
-    // TODO: finish this
-    if (member.level === 1) {
-      return span({}, props.object);
-    }
-
-    return props.object + "";
-  }
-
   render() {
     const {} = this.props;
 
     // TODO: render toolbar (actions: clear, query input box,
     // refresh button, cancel button)
 
     return div(
       { className: "search-panel", style: { width: "100%" } },
diff --git a/devtools/client/shared/components/tree/TreeRow.js b/devtools/client/shared/components/tree/TreeRow.js
--- a/devtools/client/shared/components/tree/TreeRow.js
+++ b/devtools/client/shared/components/tree/TreeRow.js
@@ -57,18 +57,18 @@ define(function(require, exports, module
           open: PropTypes.bool.isRequired,
           path: PropTypes.string.isRequired,
           hidden: PropTypes.bool,
           selected: PropTypes.bool,
           active: PropTypes.bool,
           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,
         onClick: PropTypes.func.isRequired,
         onContextMenu: PropTypes.func,
         onMouseOver: PropTypes.func,
         onMouseOut: PropTypes.func,
       };