Bug 1358192 - Filtered arrays in JSON viewer cannot be expanded draft
authorJan-Jan <jan.jan.code@gmail.com>
Sat, 19 May 2018 18:25:16 +0200
changeset 797483 b39c99be1c51dcec3e11dd7f9cd1ea212e7a8932
parent 797477 1d26b327ee6bcccdd7d3535cd5352a8ac3fb7d53
push id110494
push userbmo:jan.jan.code@gmail.com
push dateSat, 19 May 2018 16:25:44 +0000
bugs1358192
milestone62.0a1
Bug 1358192 - Filtered arrays in JSON viewer cannot be expanded Solves problem, by being aware of path, so parent key can filter all children MozReview-Commit-ID: F79Ib46kkfc
devtools/client/jsonview/components/JsonPanel.js
devtools/client/jsonview/test/browser_jsonview_filter.js
devtools/client/jsonview/test/filter_json.json
devtools/client/shared/components/tree/TreeView.js
--- a/devtools/client/jsonview/components/JsonPanel.js
+++ b/devtools/client/jsonview/components/JsonPanel.js
@@ -63,22 +63,22 @@ define(function(require, exports, module
     componentWillUnmount() {
       document.removeEventListener("keypress", this.onKeyPress, true);
     }
 
     onKeyPress(e) {
       // XXX shortcut for focusing the Filter field (see Bug 1178771).
     }
 
-    onFilter(object) {
+    onFilter(object, path) {
       if (!this.props.searchFilter) {
         return true;
       }
 
-      let json = object.name + JSON.stringify(object.value);
+      let json = path + object.name + JSON.stringify(object.value);
       return json.toLowerCase().includes(this.props.searchFilter.toLowerCase());
     }
 
     renderValue(props) {
       let member = props.member;
 
       // Hide object summary when non-empty object is expanded (bug 1244912).
       if (isObject(member.value) && member.hasChildren && member.open) {
--- a/devtools/client/jsonview/test/browser_jsonview_filter.js
+++ b/devtools/client/jsonview/test/browser_jsonview_filter.js
@@ -1,28 +1,28 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-const TEST_JSON_URL = URL_ROOT + "array_json.json";
+const TEST_JSON_URL = URL_ROOT + "filter_json.json";
 
 add_task(async function() {
   info("Test valid JSON started");
 
   await addJsonViewTab(TEST_JSON_URL);
 
   let count = await getElementCount(".jsonPanelBox .treeTable .treeRow");
-  is(count, 6, "There must be expected number of rows");
+  is(count, 14, "There must be expected number of rows");
 
   // XXX use proper shortcut to focus the filter box
   // as soon as bug Bug 1178771 is fixed.
-  await sendString("h", ".jsonPanelBox .searchBox");
+  await sendString("ho", ".jsonPanelBox .searchBox");
 
   // The filtering is done asynchronously so, we need to wait.
   await waitForFilter();
 
   let hiddenCount = await getElementCount(
     ".jsonPanelBox .treeTable .treeRow.hidden");
-  is(hiddenCount, 4, "There must be expected number of hidden rows");
+  is(hiddenCount, 2, "There must be expected number of hidden rows");
 });
new file mode 100644
--- /dev/null
+++ b/devtools/client/jsonview/test/filter_json.json
@@ -0,0 +1,6 @@
+[
+  {"name": "jan"},
+  {"name": "honza"},
+  {"honno": [{"name": "other"}, {"name": "bob"}]},
+  {"hohoho": {"title": "Dr", "name": "jan-jan"}}
+]
--- a/devtools/client/shared/components/tree/TreeView.js
+++ b/devtools/client/shared/components/tree/TreeView.js
@@ -352,19 +352,19 @@ define(function(require, exports, module
     }
 
     // Filtering & Sorting
 
     /**
      * Filter out nodes that don't correspond to the current filter.
      * @return {Boolean} true if the node should be visible otherwise false.
      */
-    onFilter(object) {
+    onFilter(object, path) {
       let onFilter = this.props.onFilter;
-      return onFilter ? onFilter(object) : true;
+      return onFilter ? onFilter(object, path) : true;
     }
 
     onSort(parent, children) {
       let onSort = this.props.onSort;
       return onSort ? onSort(parent, children) : children;
     }
 
     // Members
@@ -424,17 +424,17 @@ define(function(require, exports, module
           hasChildren: hasChildren,
           // Value associated with this node (as provided by the data provider)
           value: value,
           // True if the node is expanded.
           open: this.isExpanded(nodePath),
           // Node path
           path: nodePath,
           // True if the node is hidden (used for filtering)
-          hidden: !this.onFilter(child),
+          hidden: !this.onFilter(child, path),
           // True if the node is selected with keyboard
           selected: this.isSelected(nodePath)
         };
       });
     }
 
     /**
      * Render tree rows/nodes.