Bug 1719266 - [devtools] Highlight the right selected cookie. :Honza r=Honza DONTBUILD

Add one more assertion to make sure only one cookies is selected

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

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

@@ -149,6 +149,12 @@
   display: inline;
 }
 
+/* Cookies */
+
+.network-monitor .cookies-panel-container .accordion .properties-view tr.treeRow .treeLabelCell {
+  padding-inline-start: 0;
+}
+
 /* Summary tabpanel */
 
 .network-monitor .tabpanel-summary-container {

devtools/client/netmonitor/src/components/request-details/CookiesPanel.js

@@ -32,6 +32,12 @@ const Accordion = createFactory(
   require("devtools/client/shared/components/Accordion")
 );
 
+loader.lazyGetter(this, "TreeRow", function() {
+  return createFactory(
+    require("devtools/client/shared/components/tree/TreeRow")
+  );
+});
+
 const { div } = dom;
 
 const COOKIES_EMPTY_TEXT = L10N.getStr("cookiesEmptyText");
@@ -83,8 +89,8 @@ class CookiesPanel extends Component {
    * @param {Object[]} arr - key-value pair array like cookies or params
    * @returns {Object}
    */
-  getProperties(arr) {
-    return arr.reduce((map, obj) => {
+  getProperties(arr, title) {
+    const cookies = arr.reduce((map, obj) => {
       // Generally cookies object contains only name and value properties and can
       // be rendered as name: value pair.
       // When there are more properties in cookies object such as extra or path,
@@ -97,6 +103,46 @@ class CookiesPanel extends Component {
       }
       return map;
     }, {});
+
+    // To have different roots for Request and Response cookies
+    return { [title]: cookies };
+  }
+
+  /**
+   * Custom rendering method passed to PropertiesView. It's
+   * responsible to filter out level 0 node in the tree
+   *
+   * @param {Object} props
+   */
+  renderRow(props) {
+    const { level } = props.member;
+
+    if (level === 0) {
+      return null;
+    }
+
+    return TreeRow(props);
+  }
+
+  /**
+   * Get the selected cookies path
+   * @param {Object} searchResult
+   * @returns {string}
+   */
+  getTargetCookiePath(searchResult) {
+    if (!searchResult) {
+      return null;
+    }
+
+    switch (searchResult.type) {
+      case "requestCookies": {
+        return `/${REQUEST_COOKIES}/${searchResult.label}`;
+      }
+      case "responseCookies":
+        return `/${RESPONSE_COOKIES}/${searchResult.label}`;
+    }
+
+    return null;
   }
 
   render() {
@@ -123,10 +169,14 @@ class CookiesPanel extends Component {
       items.push({
         component: PropertiesView,
         componentProps: {
-          object: sortObjectKeys(this.getProperties(responseCookies)),
+          object: sortObjectKeys(
+            this.getProperties(responseCookies, RESPONSE_COOKIES)
+          ),
           filterText,
           targetSearchResult,
           defaultSelectFirstNode: false,
+          selectPath: this.getTargetCookiePath,
+          renderRow: this.renderRow,
         },
         header: RESPONSE_COOKIES,
         id: "responseCookies",
@@ -138,10 +188,14 @@ class CookiesPanel extends Component {
       items.push({
         component: PropertiesView,
         componentProps: {
-          object: sortObjectKeys(this.getProperties(requestCookies)),
+          object: sortObjectKeys(
+            this.getProperties(requestCookies, REQUEST_COOKIES)
+          ),
           filterText,
           targetSearchResult,
           defaultSelectFirstNode: false,
+          selectPath: this.getTargetCookiePath,
+          renderRow: this.renderRow,
         },
         header: REQUEST_COOKIES,
         id: "requestCookies",
@@ -150,7 +204,7 @@ class CookiesPanel extends Component {
     }
 
     return div(
-      { className: "panel-container" },
+      { className: "panel-container cookies-panel-container" },
       div(
         { className: "devtools-toolbar devtools-input-toolbar" },
         SearchBox({

devtools/client/netmonitor/test/browser_net_search-results.js

@@ -148,7 +148,7 @@ add_task(async function() {
     monitor,
     matches[9],
     "#cookies-panel",
-    "#requestCookies .properties-view",
+    "#responseCookies .properties-view",
     ".treeRow.selected",
     [SEARCH_STRING]
   );
@@ -156,7 +156,7 @@ add_task(async function() {
     monitor,
     matches[10],
     "#cookies-panel",
-    "#responseCookies .properties-view",
+    "#requestCookies .properties-view",
     ".treeRow.selected",
     [SEARCH_STRING]
   );
@@ -217,6 +217,16 @@ async function checkSearchResult(
     } displayed in this tabpanel`
   );
 
+  // Make sure only 1 item is selected
+  if (panelDetailSelector === ".treeRow.selected") {
+    const selectedElements = tabpanel.querySelectorAll(panelDetailSelector);
+    is(
+      selectedElements.length,
+      1,
+      `There should be only 1 item selected, found ${selectedElements.length} items selected`
+    );
+  }
+
   if (content.length === expected.length) {
     for (let i = 0; i < expected.length; i++) {
       is(