{"patch":"diff --git a\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap b\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap\nnew file mode 100644\nindex 0000000000..0f1e213a05\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap\n@@ -0,0 +1,77 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: mount 1`] = `\n+[root]\n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: owners for \"Child\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"id\": 7,\n+ },\n+ Object {\n+ \"displayName\": \"Parent\",\n+ \"id\": 9,\n+ },\n+ Object {\n+ \"displayName\": \"Child\",\n+ \"id\": 8,\n+ },\n+]\n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element: owners for \"Child\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"id\": 2,\n+ },\n+ Object {\n+ \"displayName\": \"Parent\",\n+ \"id\": 3,\n+ },\n+ Object {\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ },\n+]\n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element: owners for \"Parent\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"id\": 2,\n+ },\n+ Object {\n+ \"displayName\": \"Parent\",\n+ \"id\": 3,\n+ },\n+]\n+`;\n+\n+exports[`OwnersListContext should include the current element even if there are no other owners: mount 1`] = `\n+[root]\n+ \n+`;\n+\n+exports[`OwnersListContext should include the current element even if there are no other owners: owners for \"Grandparent\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"id\": 5,\n+ },\n+]\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\nnew file mode 100644\nindex 0000000000..3a9149861b\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\n@@ -0,0 +1,1023 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 2: child owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 0,\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 0,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 3: remove child 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 4: parent owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 0,\n+ \"parentID\": 1,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 2,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 5: unmount root 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 0,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 2: parent owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 4,\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": \"0\",\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": \"1\",\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 3: remove second child 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 4,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 2,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": \"0\",\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 4: remove first child 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 2: parent owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 4,\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 3: final state 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 0: mount 1`] = `\n+[root]\n+ \n+ \n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 3: mount Baz 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 0: mount 1`] = `\n+[root]\n+ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 3: search for \"f\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 2,\n+ ],\n+ \"searchText\": \"f\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 4: search for \"q\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"q\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `\n+[root]\n+ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 3: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 4: unmount Baz 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 0: mount 1`] = `\n+[root]\n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 3: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 4: go to third result 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 2,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 5: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 6: go to first result 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 7: wrap to last result 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 2,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 8: wrap to first result 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 2: select second child 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 3: remove children (parent should now be selected) 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 4: unmount root (nothing should be selected) 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 0,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 2: select first element 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 3: select Parent 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 4: select Child 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 2: select last child 1`] = `\n+Object {\n+ \"inspectedElementID\": 8,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 8,\n+ \"selectedElementIndex\": 6,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 3: select Parent 1`] = `\n+Object {\n+ \"inspectedElementID\": 6,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 6,\n+ \"selectedElementIndex\": 4,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 4: select Grandparent 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 2: select first element 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (0) 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (1) 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (2) 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (1) 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (2) 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (3) 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 5: select previous wraps around to last 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 6: select next wraps around to first 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\ndiff --git a\/src\/__tests__\/ownersListContext-test.js b\/src\/__tests__\/ownersListContext-test.js\nnew file mode 100644\nindex 0000000000..253e31fa3d\n--- \/dev\/null\n+++ b\/src\/__tests__\/ownersListContext-test.js\n@@ -0,0 +1,208 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type { Element } from 'src\/devtools\/views\/Components\/types';\n+import type Bridge from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('OwnersListContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: Bridge;\n+ let store: Store;\n+ let utils;\n+\n+ let BridgeContext;\n+ let OwnersListContext;\n+ let OwnersListContextController;\n+ let StoreContext;\n+ let TreeContextController;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n+ OwnersListContext = require('src\/devtools\/views\/Components\/OwnersListContext')\n+ .OwnersListContext;\n+ OwnersListContextController = require('src\/devtools\/views\/Components\/OwnersListContext')\n+ .OwnersListContextController;\n+ StoreContext = require('src\/devtools\/views\/context').StoreContext;\n+ TreeContextController = require('src\/devtools\/views\/Components\/TreeContext')\n+ .TreeContextController;\n+ });\n+\n+ const Contexts = ({ children, defaultOwnerID = null }) => (\n+ \n+ \n+ \n+ {children}<\/OwnersListContextController>\n+ <\/TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+\n+ it('should fetch the owners list for the selected element', async done => {\n+ const Grandparent = () => ;\n+ const Parent = () => {\n+ return (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('mount');\n+\n+ const parent = ((store.getElementAtIndex(1): any): Element);\n+ const firstChild = ((store.getElementAtIndex(2): any): Element);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ owner }) {\n+ const read = React.useContext(OwnersListContext);\n+ const owners = read(owner.id);\n+ expect(owners).toMatchSnapshot(\n+ `owners for \"${(owner && owner.displayName) || ''}\"`\n+ );\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actSuspense(\n+ () =>\n+ TestRenderer.create(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ 3\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ didFinish = false;\n+ await utils.actSuspense(\n+ () =>\n+ TestRenderer.create(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ 3\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+\n+ it('should fetch the owners list for the selected element that includes filtered components', async done => {\n+ store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];\n+\n+ const Grandparent = () => ;\n+ const Parent = () => {\n+ return (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('mount');\n+\n+ const firstChild = ((store.getElementAtIndex(1): any): Element);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ owner }) {\n+ const read = React.useContext(OwnersListContext);\n+ const owners = read(owner.id);\n+ expect(owners).toMatchSnapshot(\n+ `owners for \"${(owner && owner.displayName) || ''}\"`\n+ );\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actSuspense(\n+ () =>\n+ TestRenderer.create(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ 3\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+\n+ it('should include the current element even if there are no other owners', async done => {\n+ store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];\n+\n+ const Grandparent = () => ;\n+ const Parent = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('mount');\n+\n+ const grandparent = ((store.getElementAtIndex(0): any): Element);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ owner }) {\n+ const read = React.useContext(OwnersListContext);\n+ const owners = read(owner.id);\n+ expect(owners).toMatchSnapshot(\n+ `owners for \"${(owner && owner.displayName) || ''}\"`\n+ );\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actSuspense(\n+ () =>\n+ TestRenderer.create(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ 3\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+});\ndiff --git a\/src\/__tests__\/storeComponentFilters-test.js b\/src\/__tests__\/storeComponentFilters-test.js\nindex 8f408f49f7..3030646bf6 100644\n--- a\/src\/__tests__\/storeComponentFilters-test.js\n+++ b\/src\/__tests__\/storeComponentFilters-test.js\n@@ -6,42 +6,7 @@ describe('Store component filters', () => {\n let TestUtils;\n let Types;\n let store;\n-\n- const createElementTypeFilter = (elementType, isEnabled = true) => ({\n- type: Types.ComponentFilterElementType,\n- isEnabled,\n- value: elementType,\n- });\n-\n- const createDisplayNameFilter = (source, isEnabled = true) => {\n- let isValid = true;\n- try {\n- new RegExp(source);\n- } catch (error) {\n- isValid = false;\n- }\n- return {\n- type: Types.ComponentFilterDisplayName,\n- isEnabled,\n- isValid,\n- value: source,\n- };\n- };\n-\n- const createLocationFilter = (source, isEnabled = true) => {\n- let isValid = true;\n- try {\n- new RegExp(source);\n- } catch (error) {\n- isValid = false;\n- }\n- return {\n- type: Types.ComponentFilterLocation,\n- isEnabled,\n- isValid,\n- value: source,\n- };\n- };\n+ let utils;\n \n const act = (callback: Function) => {\n TestUtils.act(() => {\n@@ -59,6 +24,7 @@ describe('Store component filters', () => {\n ReactDOM = require('react-dom');\n TestUtils = require('react-dom\/test-utils');\n Types = require('src\/types');\n+ utils = require('.\/utils');\n });\n \n it('should throw if filters are updated while profiling', () => {\n@@ -89,7 +55,7 @@ describe('Store component filters', () => {\n act(\n () =>\n (store.componentFilters = [\n- createElementTypeFilter(Types.ElementTypeHostComponent),\n+ utils.createElementTypeFilter(Types.ElementTypeHostComponent),\n ])\n );\n \n@@ -98,7 +64,7 @@ describe('Store component filters', () => {\n act(\n () =>\n (store.componentFilters = [\n- createElementTypeFilter(Types.ElementTypeClass),\n+ utils.createElementTypeFilter(Types.ElementTypeClass),\n ])\n );\n \n@@ -107,8 +73,8 @@ describe('Store component filters', () => {\n act(\n () =>\n (store.componentFilters = [\n- createElementTypeFilter(Types.ElementTypeClass),\n- createElementTypeFilter(Types.ElementTypeFunction),\n+ utils.createElementTypeFilter(Types.ElementTypeClass),\n+ utils.createElementTypeFilter(Types.ElementTypeFunction),\n ])\n );\n \n@@ -117,8 +83,8 @@ describe('Store component filters', () => {\n act(\n () =>\n (store.componentFilters = [\n- createElementTypeFilter(Types.ElementTypeClass, false),\n- createElementTypeFilter(Types.ElementTypeFunction, false),\n+ utils.createElementTypeFilter(Types.ElementTypeClass, false),\n+ utils.createElementTypeFilter(Types.ElementTypeFunction, false),\n ])\n );\n \n@@ -134,7 +100,7 @@ describe('Store component filters', () => {\n act(\n () =>\n (store.componentFilters = [\n- createElementTypeFilter(Types.ElementTypeRoot),\n+ utils.createElementTypeFilter(Types.ElementTypeRoot),\n ])\n );\n \n@@ -159,13 +125,17 @@ describe('Store component filters', () => {\n );\n expect(store).toMatchSnapshot('1: mount');\n \n- act(() => (store.componentFilters = [createDisplayNameFilter('Foo')]));\n+ act(\n+ () => (store.componentFilters = [utils.createDisplayNameFilter('Foo')])\n+ );\n expect(store).toMatchSnapshot('2: filter \"Foo\"');\n \n- act(() => (store.componentFilters = [createDisplayNameFilter('Ba')]));\n+ act(() => (store.componentFilters = [utils.createDisplayNameFilter('Ba')]));\n expect(store).toMatchSnapshot('3: filter \"Ba\"');\n \n- act(() => (store.componentFilters = [createDisplayNameFilter('B.z')]));\n+ act(\n+ () => (store.componentFilters = [utils.createDisplayNameFilter('B.z')])\n+ );\n expect(store).toMatchSnapshot('4: filter \"B.z\"');\n });\n \n@@ -178,7 +148,7 @@ describe('Store component filters', () => {\n act(\n () =>\n (store.componentFilters = [\n- createLocationFilter(__filename.replace(__dirname, '')),\n+ utils.createLocationFilter(__filename.replace(__dirname, '')),\n ])\n );\n \n@@ -189,7 +159,7 @@ describe('Store component filters', () => {\n act(\n () =>\n (store.componentFilters = [\n- createLocationFilter('this:is:a:made:up:path'),\n+ utils.createLocationFilter('this:is:a:made:up:path'),\n ])\n );\n \ndiff --git a\/src\/__tests__\/treeContext-test.js b\/src\/__tests__\/treeContext-test.js\nnew file mode 100644\nindex 0000000000..a7d7ba5094\n--- \/dev\/null\n+++ b\/src\/__tests__\/treeContext-test.js\n@@ -0,0 +1,550 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type Bridge from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+import type {\n+ DispatcherContext,\n+ StateContext,\n+} from 'src\/devtools\/views\/Components\/TreeContext';\n+\n+describe('TreeListContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: Bridge;\n+ let store: Store;\n+ let utils;\n+\n+ let BridgeContext;\n+ let StoreContext;\n+ let TreeContext;\n+\n+ let dispatch: DispatcherContext;\n+ let state: StateContext;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n+ StoreContext = require('src\/devtools\/views\/context').StoreContext;\n+ TreeContext = require('src\/devtools\/views\/Components\/TreeContext');\n+ });\n+\n+ afterEach(() => {\n+ \/\/ Reset between tests\n+ dispatch = ((null: any): DispatcherContext);\n+ state = ((null: any): StateContext);\n+ });\n+\n+ const Capture = () => {\n+ dispatch = React.useContext(TreeContext.TreeDispatcherContext);\n+ state = React.useContext(TreeContext.TreeStateContext);\n+ return null;\n+ };\n+\n+ const Contexts = () => {\n+ return (\n+ \n+ \n+ \n+ \n+ <\/TreeContext.TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+ };\n+\n+ describe('tree state', () => {\n+ it('should select the next and previous elements in the tree', () => {\n+ const Grandparent = () => ;\n+ const Parent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: select first element');\n+\n+ while (\n+ state.selectedElementIndex !== null &&\n+ state.selectedElementIndex < store.numElements - 1\n+ ) {\n+ const index = ((state.selectedElementIndex: any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot(`3: select element after (${index})`);\n+ }\n+\n+ while (\n+ state.selectedElementIndex !== null &&\n+ state.selectedElementIndex > 0\n+ ) {\n+ const index = ((state.selectedElementIndex: any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot(`4: select element before (${index})`);\n+ }\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('5: select previous wraps around to last');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('6: select next wraps around to first');\n+ });\n+\n+ it('should select child elements', () => {\n+ const Grandparent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Parent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 0 })\n+ );\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: select first element');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: select Parent');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: select Child');\n+\n+ const previousState = state;\n+\n+ \/\/ There are no more children to select, so this should be a no-op\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toEqual(previousState);\n+ });\n+\n+ it('should select parent elements and then collapse', () => {\n+ const Grandparent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Parent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ const lastChildID = store.getElementIDAtIndex(store.numElements - 1);\n+\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID })\n+ );\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: select last child');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: select Parent');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: select Grandparent');\n+\n+ const previousState = state;\n+\n+ \/\/ There are no more ancestors to select, so this should be a no-op\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toEqual(previousState);\n+ });\n+\n+ it('should clear selection if the selected element is unmounted', async done => {\n+ const Grandparent = props => props.children || null;\n+ const Parent = props => props.children || null;\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+ utils.act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ <\/Parent>\n+ <\/Grandparent>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 3 })\n+ );\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: select second child');\n+\n+ await utils.actSuspense(() =>\n+ ReactDOM.render(\n+ \n+ \n+ <\/Grandparent>,\n+ container\n+ )\n+ );\n+ expect(state).toMatchSnapshot(\n+ '3: remove children (parent should now be selected)'\n+ );\n+\n+ await utils.actSuspense(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(state).toMatchSnapshot(\n+ '4: unmount root (nothing should be selected)'\n+ );\n+\n+ done();\n+ });\n+ });\n+\n+ describe('search state', () => {\n+ it('should find elements matching search text', () => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'f' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: search for \"f\"');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'q' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: search for \"q\"');\n+ });\n+\n+ it('should select the next and previous items within the search results', () => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: go to second result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: go to third result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('5: go to second result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('6: go to first result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('7: wrap to last result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('8: wrap to first result');\n+ });\n+\n+ it('should add newly mounted elements to the search results set if they match the current text', async done => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ await utils.actSuspense(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: mount Baz');\n+\n+ done();\n+ });\n+\n+ it('should remove unmounted elements from the search results set', async done => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: go to second result');\n+\n+ await utils.actSuspense(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: unmount Baz');\n+\n+ done();\n+ });\n+ });\n+\n+ describe('owners state', () => {\n+ it('should support entering and existing the owners tree view', () => {\n+ const Grandparent = () => ;\n+ const Parent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ let parentID = ((store.getElementIDAtIndex(1): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: parent owners tree');\n+\n+ utils.act(() => dispatch({ type: 'RESET_OWNER_STACK' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: final state');\n+ });\n+\n+ it('should remove an element from the owners list if it is unmounted', async done => {\n+ const Grandparent = ({ count }) => ;\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => );\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+ utils.act(() => ReactDOM.render(, container));\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ let parentID = ((store.getElementIDAtIndex(1): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: parent owners tree');\n+\n+ await utils.actSuspense(() =>\n+ ReactDOM.render(, container)\n+ );\n+ expect(state).toMatchSnapshot('3: remove second child');\n+\n+ await utils.actSuspense(() =>\n+ ReactDOM.render(, container)\n+ );\n+ expect(state).toMatchSnapshot('4: remove first child');\n+\n+ done();\n+ });\n+\n+ it('should exit the owners list if the current owner is unmounted', async done => {\n+ const Parent = props => props.children || null;\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+ utils.act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ <\/Parent>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ let childID = ((store.getElementIDAtIndex(1): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: childID }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: child owners tree');\n+\n+ await utils.actSuspense(() => ReactDOM.render(, container));\n+ expect(state).toMatchSnapshot('3: remove child');\n+\n+ let parentID = ((store.getElementIDAtIndex(0): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: parent owners tree');\n+\n+ await utils.actSuspense(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(state).toMatchSnapshot('5: unmount root');\n+\n+ done();\n+ });\n+ });\n+});\ndiff --git a\/src\/__tests__\/utils.js b\/src\/__tests__\/utils.js\nindex 89c7ffd6b1..06d8ec8858 100644\n--- a\/src\/__tests__\/utils.js\n+++ b\/src\/__tests__\/utils.js\n@@ -2,6 +2,8 @@\n \n import typeof ReactTestRenderer from 'react-test-renderer';\n \n+import type { ElementType } from 'src\/types';\n+\n export function act(callback: Function): void {\n const TestUtils = require('react-dom\/test-utils');\n TestUtils.act(() => {\n@@ -54,6 +56,56 @@ export function beforeEachProfiling(): void {\n );\n }\n \n+export function createElementTypeFilter(\n+ elementType: ElementType,\n+ isEnabled: boolean = true\n+) {\n+ const Types = require('src\/types');\n+ return {\n+ type: Types.ComponentFilterElementType,\n+ isEnabled,\n+ value: elementType,\n+ };\n+}\n+\n+export function createDisplayNameFilter(\n+ source: string,\n+ isEnabled: boolean = true\n+) {\n+ const Types = require('src\/types');\n+ let isValid = true;\n+ try {\n+ new RegExp(source);\n+ } catch (error) {\n+ isValid = false;\n+ }\n+ return {\n+ type: Types.ComponentFilterDisplayName,\n+ isEnabled,\n+ isValid,\n+ value: source,\n+ };\n+}\n+\n+export function createLocationFilter(\n+ source: string,\n+ isEnabled: boolean = true\n+) {\n+ const Types = require('src\/types');\n+ let isValid = true;\n+ try {\n+ new RegExp(source);\n+ } catch (error) {\n+ isValid = false;\n+ }\n+ return {\n+ type: Types.ComponentFilterLocation,\n+ isEnabled,\n+ isValid,\n+ value: source,\n+ };\n+}\n+\n export function getRendererID(): number {\n if (global.agent == null) {\n throw Error('Agent unavailable.');\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex 1a12eee29a..0c8fd77f09 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -16,6 +16,7 @@ import type {\n RendererID,\n RendererInterface,\n } from '.\/types';\n+import type { OwnersList } from 'src\/devtools\/views\/Components\/types';\n import type { Bridge, ComponentFilter } from '..\/types';\n \n const debug = (methodName, ...args) => {\n@@ -29,7 +30,7 @@ const debug = (methodName, ...args) => {\n }\n };\n \n-type InspectSelectParams = {|\n+type ElementAndRendererID = {|\n id: number,\n rendererID: number,\n |};\n@@ -99,6 +100,7 @@ export default class Agent extends EventEmitter {\n bridge.addListener('getProfilingStatus', this.getProfilingStatus);\n bridge.addListener('getProfilingSummary', this.getProfilingSummary);\n bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);\n+ bridge.addListener('getOwnersList', this.getOwnersList);\n bridge.addListener('inspectElement', this.inspectElement);\n bridge.addListener('logElementToConsole', this.logElementToConsole);\n bridge.addListener('overrideContext', this.overrideContext);\n@@ -303,7 +305,17 @@ export default class Agent extends EventEmitter {\n }\n };\n \n- inspectElement = ({ id, rendererID }: InspectSelectParams) => {\n+ getOwnersList = ({ id, rendererID }: ElementAndRendererID) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ const owners = renderer.getOwnersList(id);\n+ this._bridge.send('ownersList', ({ id, owners }: OwnersList));\n+ }\n+ };\n+\n+ inspectElement = ({ id, rendererID }: ElementAndRendererID) => {\n const renderer = this._rendererInterfaces[rendererID];\n if (renderer == null) {\n console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n@@ -312,7 +324,7 @@ export default class Agent extends EventEmitter {\n }\n };\n \n- logElementToConsole = ({ id, rendererID }: InspectSelectParams) => {\n+ logElementToConsole = ({ id, rendererID }: ElementAndRendererID) => {\n const renderer = this._rendererInterfaces[rendererID];\n if (renderer == null) {\n console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n@@ -340,7 +352,7 @@ export default class Agent extends EventEmitter {\n this._bridge.send('screenshotCaptured', { commitIndex, dataURL });\n };\n \n- selectElement = ({ id, rendererID }: InspectSelectParams) => {\n+ selectElement = ({ id, rendererID }: ElementAndRendererID) => {\n const renderer = this._rendererInterfaces[rendererID];\n if (renderer == null) {\n console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n@@ -506,7 +518,7 @@ export default class Agent extends EventEmitter {\n }\n };\n \n- viewElementSource = ({ id, rendererID }: InspectSelectParams) => {\n+ viewElementSource = ({ id, rendererID }: ElementAndRendererID) => {\n const renderer = this._rendererInterfaces[rendererID];\n if (renderer == null) {\n console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex c05c1dee05..b76ce8a7d6 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -50,7 +50,10 @@ import type {\n ReactRenderer,\n RendererInterface,\n } from '.\/types';\n-import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n+import type {\n+ InspectedElement,\n+ Owner,\n+} from 'src\/devtools\/views\/Components\/types';\n import type { ComponentFilter, ElementType } from 'src\/types';\n \n function getInternalReactConstants(version) {\n@@ -1685,6 +1688,35 @@ export function attach(\n }\n }\n \n+ function getOwnersList(id: number): Array | null {\n+ let fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber == null) {\n+ return null;\n+ }\n+\n+ const { _debugOwner } = fiber;\n+\n+ const owners = [\n+ {\n+ displayName: getDisplayNameForFiber(fiber) || 'Unknown',\n+ id,\n+ },\n+ ];\n+\n+ if (_debugOwner) {\n+ let owner = _debugOwner;\n+ while (owner !== null) {\n+ owners.unshift({\n+ displayName: getDisplayNameForFiber(owner) || 'Unknown',\n+ id: getFiberID(getPrimaryFiber(owner)),\n+ });\n+ owner = owner._debugOwner || null;\n+ }\n+ }\n+\n+ return owners;\n+ }\n+\n function inspectElementRaw(id: number): InspectedElement | null {\n let fiber = findCurrentFiberUsingSlowPathById(id);\n if (fiber == null) {\n@@ -2385,6 +2417,7 @@ export function attach(\n getFiberCommits,\n getInteractions,\n findNativeByFiberID,\n+ getOwnersList,\n getPathForElement,\n getProfilingDataForDownload,\n getProfilingSummary,\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex 7cd529528b..a9680cd78a 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -1,7 +1,10 @@\n \/\/ @flow\n \n import type { ComponentFilter, ElementType } from 'src\/types';\n-import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n+import type {\n+ InspectedElement,\n+ Owner,\n+} from 'src\/devtools\/views\/Components\/types';\n \n type BundleType =\n | 0 \/\/ PROD\n@@ -175,6 +178,7 @@ export type RendererInterface = {\n ) => number | null,\n getFiberCommits: (rootID: number, fiberID: number) => FiberCommitsBackend,\n getInteractions: (rootID: number) => InteractionsBackend,\n+ getOwnersList: (id: number) => Array | null,\n getProfilingDataForDownload: (rootID: number) => Object,\n getProfilingSummary: (rootID: number) => ProfilingSummaryBackend,\n getPathForElement: (id: number) => Array | null,\ndiff --git a\/src\/devtools\/views\/Components\/Components.js b\/src\/devtools\/views\/Components\/Components.js\nindex dd4b775431..3ed317a101 100644\n--- a\/src\/devtools\/views\/Components\/Components.js\n+++ b\/src\/devtools\/views\/Components\/Components.js\n@@ -4,6 +4,7 @@ import React, { Suspense } from 'react';\n import Tree from '.\/Tree';\n import SelectedElement from '.\/SelectedElement';\n import { InspectedElementContextController } from '.\/InspectedElementContext';\n+import { OwnersListContextController } from '.\/OwnersListContext';\n import portaledContent from '..\/portaledContent';\n import { ModalDialog } from '..\/ModalDialog';\n \n@@ -12,19 +13,21 @@ import styles from '.\/Components.css';\n function Components(_: {||}) {\n \/\/ TODO Flex wrappers below should be user resizable.\n return (\n-

\n-

\n- \n- <\/div>\n-

\n- \n- }>\n- \n- <\/Suspense>\n- <\/InspectedElementContextController>\n- <\/div>\n- \n- <\/div>\n+ \n+ \n+

\n+

\n+ \n+ <\/div>\n+

\n+ }>\n+ \n+ <\/Suspense>\n+ <\/div>\n+ \n+ <\/div>\n+ <\/InspectedElementContextController>\n+ <\/OwnersListContextController>\n );\n }\n \ndiff --git a\/src\/devtools\/views\/Components\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nindex 322726784d..79b015e85c 100644\n--- a\/src\/devtools\/views\/Components\/Element.js\n+++ b\/src\/devtools\/views\/Components\/Element.js\n@@ -29,7 +29,7 @@ type Props = {\n \n export default function ElementView({ data, index, style }: Props) {\n const store = useContext(StoreContext);\n- const { ownerFlatTree, ownerStack, selectedElementID } = useContext(\n+ const { ownerFlatTree, ownerID, selectedElementID } = useContext(\n TreeStateContext\n );\n const dispatch = useContext(TreeDispatcherContext);\n@@ -168,7 +168,7 @@ export default function ElementView({ data, index, style }: Props) {\n }}\n >\n \n- {ownerStack.length === 0 ? (\n+ {ownerID === null ? (\n \n ) : null}\n \ndiff --git a\/src\/devtools\/views\/Components\/OwnersListContext.js b\/src\/devtools\/views\/Components\/OwnersListContext.js\nnew file mode 100644\nindex 0000000000..3720f3b2cc\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/OwnersListContext.js\n@@ -0,0 +1,109 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+} from 'react';\n+import { createResource } from '..\/..\/cache';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import { TreeStateContext } from '.\/TreeContext';\n+\n+import type {\n+ Element,\n+ Owner,\n+ OwnersList,\n+} from 'src\/devtools\/views\/Components\/types';\n+import type { Resource, Thenable } from '..\/..\/cache';\n+\n+type Context = (id: number) => Array | null;\n+\n+const OwnersListContext = createContext(((null: any): Context));\n+OwnersListContext.displayName = 'OwnersListContext';\n+\n+type ResolveFn = (ownersList: Array | null) => void;\n+type InProgressRequest = {|\n+ promise: Thenable>,\n+ resolveFn: ResolveFn,\n+|};\n+\n+const inProgressRequests: WeakMap = new WeakMap();\n+const resource: Resource> = createResource(\n+ (element: Element) => {\n+ let request = inProgressRequests.get(element);\n+ if (request != null) {\n+ return request.promise;\n+ }\n+\n+ let resolveFn = ((null: any): ResolveFn);\n+ const promise = new Promise(resolve => {\n+ resolveFn = resolve;\n+ });\n+\n+ inProgressRequests.set(element, { promise, resolveFn });\n+\n+ return promise;\n+ },\n+ (element: Element) => element,\n+ { useWeakMap: true }\n+);\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function OwnersListContextController({ children }: Props) {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+ const { ownerID } = useContext(TreeStateContext);\n+\n+ const read = useCallback(\n+ (id: number) => {\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ return resource.read(element);\n+ } else {\n+ return null;\n+ }\n+ },\n+ [store]\n+ );\n+\n+ useEffect(() => {\n+ const onOwnersList = (ownersList: OwnersList) => {\n+ const id = ownersList.id;\n+\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ const request = inProgressRequests.get(element);\n+ if (request != null) {\n+ inProgressRequests.delete(element);\n+ request.resolveFn(ownersList.owners);\n+ }\n+ }\n+ };\n+\n+ bridge.addListener('ownersList', onOwnersList);\n+ return () => bridge.removeListener('ownersList', onOwnersList);\n+ }, [bridge, store]);\n+\n+ \/\/ This effect requests an updated owners list any time the selected owner changes\n+ useEffect(() => {\n+ if (ownerID !== null) {\n+ const rendererID = store.getRendererIDForElement(ownerID);\n+\n+ bridge.send('getOwnersList', { id: ownerID, rendererID });\n+ }\n+\n+ return () => {};\n+ }, [bridge, ownerID, store]);\n+\n+ return (\n+ \n+ {children}\n+ <\/OwnersListContext.Provider>\n+ );\n+}\n+\n+export { OwnersListContext, OwnersListContextController };\ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.css b\/src\/devtools\/views\/Components\/OwnersStack.css\nindex 1aba50714a..48c9db0fc4 100644\n--- a\/src\/devtools\/views\/Components\/OwnersStack.css\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.css\n@@ -91,3 +91,8 @@\n font-family: var(--font-family-monospace);\n font-size: var(--font-size-monospace-normal);\n }\n+\n+.NotInStore,\n+.NotInStore:hover {\n+ color: var(--color-dimmest);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.js b\/src\/devtools\/views\/Components\/OwnersStack.js\nindex 9635045d33..3883a14480 100644\n--- a\/src\/devtools\/views\/Components\/OwnersStack.js\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.js\n@@ -4,6 +4,7 @@ import React, {\n useCallback,\n useContext,\n useLayoutEffect,\n+ useReducer,\n useRef,\n useState,\n } from 'react';\n@@ -12,22 +13,113 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach\/menu-button';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n import Toggle from '..\/Toggle';\n+import { OwnersListContext } from '.\/OwnersListContext';\n import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n-import { StoreContext } from '..\/context';\n import { useIsOverflowing } from '..\/hooks';\n+import { StoreContext } from '..\/context';\n \n-import type { Element } from '.\/types';\n+import type { Owner } from '.\/types';\n \n import styles from '.\/OwnersStack.css';\n \n+type SelectOwner = (owner: Owner | null) => void;\n+\n+type ACTION_UPDATE_OWNER_ID = {|\n+ type: 'UPDATE_OWNER_ID',\n+ ownerID: number | null,\n+ owners: Array,\n+|};\n+type ACTION_UPDATE_SELECTED_INDEX = {|\n+ type: 'UPDATE_SELECTED_INDEX',\n+ selectedIndex: number,\n+|};\n+\n+type Action = ACTION_UPDATE_OWNER_ID | ACTION_UPDATE_SELECTED_INDEX;\n+\n+type State = {|\n+ ownerID: number | null,\n+ owners: Array,\n+ selectedIndex: number,\n+|};\n+\n+function dialogReducer(state, action) {\n+ switch (action.type) {\n+ case 'UPDATE_OWNER_ID':\n+ const selectedIndex = action.owners.findIndex(\n+ owner => owner.id === action.ownerID\n+ );\n+ return {\n+ ownerID: action.ownerID,\n+ owners: action.owners,\n+ selectedIndex,\n+ };\n+ case 'UPDATE_SELECTED_INDEX':\n+ return {\n+ ...state,\n+ selectedIndex: action.selectedIndex,\n+ };\n+ default:\n+ throw new Error(`Invalid action \"${action.type}\"`);\n+ }\n+}\n+\n export default function OwnerStack() {\n- const { ownerStack, ownerStackIndex } = useContext(TreeStateContext);\n- const dispatch = useContext(TreeDispatcherContext);\n+ const read = useContext(OwnersListContext);\n+ const { ownerID } = useContext(TreeStateContext);\n+ const treeDispatch = useContext(TreeDispatcherContext);\n+\n+ const [state, dispatch] = useReducer(dialogReducer, {\n+ ownerID: null,\n+ owners: [],\n+ selectedIndex: 0,\n+ });\n+\n+ \/\/ When an owner is selected, we either need to update the selected index, or we need to fetch a new list of owners.\n+ \/\/ We use a reducer here so that we can avoid fetching a new list unless the owner ID has actually changed.\n+ if (ownerID === null) {\n+ dispatch({\n+ type: 'UPDATE_OWNER_ID',\n+ ownerID: null,\n+ owners: [],\n+ });\n+ } else if (ownerID !== state.ownerID) {\n+ const isInStore =\n+ state.owners.findIndex(owner => owner.id === ownerID) >= 0;\n+ dispatch({\n+ type: 'UPDATE_OWNER_ID',\n+ ownerID,\n+ owners: isInStore ? state.owners : read(ownerID) || [],\n+ });\n+ }\n+\n+ const { owners, selectedIndex } = state;\n+\n+ const selectOwner = useCallback(\n+ (owner: Owner | null) => {\n+ if (owner !== null) {\n+ const index = owners.indexOf(owner);\n+ dispatch({\n+ type: 'UPDATE_SELECTED_INDEX',\n+ selectedIndex: index >= 0 ? index : 0,\n+ });\n+ treeDispatch({ type: 'SELECT_OWNER', payload: owner.id });\n+ } else {\n+ dispatch({\n+ type: 'UPDATE_SELECTED_INDEX',\n+ selectedIndex: 0,\n+ });\n+ treeDispatch({ type: 'RESET_OWNER_STACK' });\n+ }\n+ },\n+ [owners, treeDispatch]\n+ );\n \n const [elementsTotalWidth, setElementsTotalWidth] = useState(0);\n const elementsBarRef = useRef(null);\n const isOverflowing = useIsOverflowing(elementsBarRef, elementsTotalWidth);\n \n+ const selectedOwner = owners[selectedIndex];\n+\n useLayoutEffect(() => {\n \/\/ If we're already overflowing, then we don't need to re-measure items.\n \/\/ That's because once the owners stack is open, it can only get larger (by driling in).\n@@ -37,7 +129,7 @@ export default function OwnerStack() {\n }\n \n let elementsTotalWidth = 0;\n- for (let i = 0; i < ownerStack.length; i++) {\n+ for (let i = 0; i < owners.length; i++) {\n const element = elementsBarRef.current.children[i];\n const computedStyle = getComputedStyle(element);\n \n@@ -48,7 +140,7 @@ export default function OwnerStack() {\n }\n \n setElementsTotalWidth(elementsTotalWidth);\n- }, [elementsBarRef, isOverflowing, ownerStack.length]);\n+ }, [elementsBarRef, isOverflowing, owners.length]);\n \n return (\n

\n@@ -56,28 +148,38 @@ export default function OwnerStack() {\n {isOverflowing && (\n \n \n \n- \n+ {selectedOwner != null && (\n+ \n+ )}\n <\/Fragment>\n )}\n {!isOverflowing &&\n- ownerStack.map((id, index) => (\n- \n+ owners.map((owner, index) => (\n+ \n ))}\n <\/div>\n

\n dispatch({ type: 'RESET_OWNER_STACK' })}\n+ onClick={() => selectOwner(null)}\n title=\"Back to tree view\"\n >\n \n@@ -87,26 +189,28 @@ export default function OwnerStack() {\n }\n \n type ElementsDropdownProps = {\n- ownerStack: Array,\n- ownerStackIndex: number | null,\n+ owners: Array,\n+ selectedIndex: number,\n+ selectOwner: SelectOwner,\n };\n function ElementsDropdown({\n- ownerStack,\n- ownerStackIndex,\n+ owners,\n+ selectedIndex,\n+ selectOwner,\n }: ElementsDropdownProps) {\n const store = useContext(StoreContext);\n- const dispatch = useContext(TreeDispatcherContext);\n \n const menuItems = [];\n- for (let index = ownerStack.length - 1; index >= 0; index--) {\n- const id = ownerStack[index];\n+ for (let index = owners.length - 1; index >= 0; index--) {\n+ const owner = owners[index];\n+ const isInStore = store.containsElement(owner.id);\n menuItems.push(\n dispatch({ type: 'SELECT_OWNER', payload: id })}\n+ key={owner.id}\n+ className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}\n+ onSelect={() => (isInStore ? selectOwner(owner) : null)}\n >\n- {((store.getElementByID(id): any): Element).displayName}\n+ {owner.displayName}\n <\/MenuItem>\n );\n }\n@@ -126,28 +230,26 @@ function ElementsDropdown({\n }\n \n type ElementViewProps = {\n- id: number,\n- index: number | null,\n+ isSelected: boolean,\n+ owner: Owner,\n+ selectOwner: SelectOwner,\n };\n-function ElementView({ id, index }: ElementViewProps) {\n+function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {\n const store = useContext(StoreContext);\n- const { ownerStackIndex } = useContext(TreeStateContext);\n- const dispatch = useContext(TreeDispatcherContext);\n-\n- const { displayName } = ((store.getElementByID(id): any): Element);\n \n- const isChecked = ownerStackIndex === index;\n+ const { displayName } = owner;\n+ const isInStore = store.containsElement(owner.id);\n \n const handleChange = useCallback(() => {\n- if (!isChecked) {\n- dispatch({ type: 'SELECT_OWNER', payload: id });\n+ if (isInStore) {\n+ selectOwner(owner);\n }\n- }, [dispatch, id, isChecked]);\n+ }, [isInStore, selectOwner, owner]);\n \n return (\n \n {displayName}\n@@ -156,32 +258,32 @@ function ElementView({ id, index }: ElementViewProps) {\n }\n \n type BackToOwnerButtonProps = {|\n- ownerStack: Array,\n- ownerStackIndex: number | null,\n+ owners: Array,\n+ selectedIndex: number,\n+ selectOwner: SelectOwner,\n |};\n function BackToOwnerButton({\n- ownerStack,\n- ownerStackIndex,\n+ owners,\n+ selectedIndex,\n+ selectOwner,\n }: BackToOwnerButtonProps) {\n const store = useContext(StoreContext);\n- const dispatch = useContext(TreeDispatcherContext);\n \n- if (ownerStackIndex === null || ownerStackIndex === 0) {\n+ if (selectedIndex <= 0) {\n return null;\n }\n \n- const ownerID = ownerStack[ownerStackIndex - 1];\n- const owner = store.getElementByID(ownerID);\n+ const owner = owners[selectedIndex - 1];\n+ if (owner == null) {\n+ debugger;\n+ }\n+ const isInStore = store.containsElement(owner.id);\n \n return (\n \n- dispatch({\n- type: 'SELECT_OWNER',\n- payload: ownerID,\n- })\n- }\n- title={`Up to ${(owner !== null && owner.displayName) || 'owner'}`}\n+ className={isInStore ? undefined : styles.NotInStore}\n+ onClick={() => (isInStore ? selectOwner(owner) : null)}\n+ title={`Up to ${owner.displayName || 'owner'}`}\n >\n \n <\/Button>\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.js b\/src\/devtools\/views\/Components\/SelectedElement.js\nindex 90da16ee48..b49ce87ad8 100644\n--- a\/src\/devtools\/views\/Components\/SelectedElement.js\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.js\n@@ -227,7 +227,7 @@ function InspectedElementView({\n state,\n } = inspectedElement;\n \n- const { ownerStack } = useContext(TreeStateContext);\n+ const { ownerID } = useContext(TreeStateContext);\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n \n@@ -298,13 +298,13 @@ function InspectedElementView({\n overrideValueFn={overrideContextFn}\n \/>\n \n- {ownerStack.length === 0 && owners !== null && owners.length > 0 && (\n+ {ownerID === null && owners !== null && owners.length > 0 && (\n

rendered by<\/div>\n {owners.map(owner => (\n \ndiff --git a\/src\/devtools\/views\/Components\/Tree.css b\/src\/devtools\/views\/Components\/Tree.css\nindex 3ce44f0828..3efc1bf863 100644\n--- a\/src\/devtools\/views\/Components\/Tree.css\n+++ b\/src\/devtools\/views\/Components\/Tree.css\n@@ -37,3 +37,14 @@\n margin: 0 0.5rem;\n background-color: var(--color-border);\n }\n+\n+.Loading {\n+ height: 100%;\n+ padding-left: 0.5rem;\n+ display: flex;\n+ align-items: center;\n+ flex: 1;\n+ justify-content: flex-start;\n+ font-size: var(--font-size-sans-large);\n+ color: var(--color-dim);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Tree.js b\/src\/devtools\/views\/Components\/Tree.js\nindex 8c3c4031f7..4687c79939 100644\n--- a\/src\/devtools\/views\/Components\/Tree.js\n+++ b\/src\/devtools\/views\/Components\/Tree.js\n@@ -1,6 +1,7 @@\n \/\/ @flow\n \n import React, {\n+ Suspense,\n useState,\n useCallback,\n useContext,\n@@ -38,7 +39,7 @@ export default function Tree(props: Props) {\n const dispatch = useContext(TreeDispatcherContext);\n const {\n numElements,\n- ownerStack,\n+ ownerID,\n searchIndex,\n searchResults,\n selectedElementID,\n@@ -277,7 +278,9 @@ export default function Tree(props: Props) {\n

\n \n

\n- {ownerStack.length > 0 ? : }\n+ }>\n+ {ownerID !== null ? : }\n+ <\/Suspense>\n

\n \n <\/div>\n@@ -317,7 +320,7 @@ export default function Tree(props: Props) {\n }\n \n function InnerElementType({ style, ...rest }) {\n- const { ownerStack } = useContext(TreeStateContext);\n+ const { ownerID } = useContext(TreeStateContext);\n \n \/\/ The list may need to scroll horizontally due to deeply nested elements.\n \/\/ We don't know the maximum scroll width up front, because we're windowing.\n@@ -346,10 +349,9 @@ function InnerElementType({ style, ...rest }) {\n \n \/\/ We shouldn't retain this width across different conceptual trees though,\n \/\/ so when the user opens the \"owners tree\" view, we should discard the previous width.\n- const hasOwnerStack = ownerStack.length > 0;\n- const [prevHasOwnerStack, setPrevHasOwnerStack] = useState(hasOwnerStack);\n- if (hasOwnerStack !== prevHasOwnerStack) {\n- setPrevHasOwnerStack(hasOwnerStack);\n+ const [prevOwnerID, setPrevOwnerID] = useState(ownerID);\n+ if (ownerID !== prevOwnerID) {\n+ setPrevOwnerID(ownerID);\n setMinWidth(null);\n }\n \n@@ -371,3 +373,7 @@ function InnerElementType({ style, ...rest }) {\n \/>\n );\n }\n+\n+function Loading() {\n+ return

Loading...<\/div>;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/TreeContext.js b\/src\/devtools\/views\/Components\/TreeContext.js\nindex 002f6b619e..067f8fbaf4 100644\n--- a\/src\/devtools\/views\/Components\/TreeContext.js\n+++ b\/src\/devtools\/views\/Components\/TreeContext.js\n@@ -38,7 +38,7 @@ import Store from '..\/..\/store';\n \n import type { Element } from '.\/types';\n \n-type StateContext = {|\n+export type StateContext = {|\n \/\/ Tree\n numElements: number,\n selectedElementID: number | null,\n@@ -50,9 +50,8 @@ type StateContext = {|\n searchText: string,\n \n \/\/ Owners\n+ ownerID: number | null,\n ownerFlatTree: Array | null,\n- ownerStack: Array,\n- ownerStackIndex: number | null,\n \n \/\/ Inspection element panel\n inspectedElementID: number | null,\n@@ -118,7 +117,7 @@ type Action =\n | ACTION_SET_SEARCH_TEXT\n | ACTION_UPDATE_INSPECTED_ELEMENT_ID;\n \n-type DispatcherContext = (action: Action) => void;\n+export type DispatcherContext = (action: Action) => void;\n \n const TreeStateContext = createContext(\n ((null: any): StateContext)\n@@ -142,8 +141,7 @@ type State = {|\n searchText: string,\n \n \/\/ Owners\n- ownerStack: Array,\n- ownerStackIndex: number | null,\n+ ownerID: number | null,\n ownerFlatTree: Array | null,\n \n \/\/ Inspection element panel\n@@ -151,17 +149,12 @@ type State = {|\n |};\n \n function reduceTreeState(store: Store, state: State, action: Action): State {\n- let {\n- numElements,\n- ownerStack,\n- selectedElementIndex,\n- selectedElementID,\n- } = state;\n+ let { numElements, ownerID, selectedElementIndex, selectedElementID } = state;\n \n let lookupIDForIndex = true;\n \n \/\/ Base tree should ignore selected element changes when the owner's tree is active.\n- if (ownerStack.length === 0) {\n+ if (ownerID === null) {\n switch (action.type) {\n case 'HANDLE_STORE_MUTATION':\n numElements = store.numElements;\n@@ -276,7 +269,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {\n \n function reduceSearchState(store: Store, state: State, action: Action): State {\n let {\n- ownerStack,\n+ ownerID,\n searchIndex,\n searchResults,\n searchText,\n@@ -295,7 +288,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {\n let didRequestSearch = false;\n \n \/\/ Search isn't supported when the owner's tree is active.\n- if (ownerStack.length === 0) {\n+ if (ownerID === null) {\n switch (action.type) {\n case 'GO_TO_NEXT_SEARCH_RESULT':\n if (numPrevSearchResults > 0) {\n@@ -442,9 +435,8 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n numElements,\n selectedElementID,\n selectedElementIndex,\n+ ownerID,\n ownerFlatTree,\n- ownerStack,\n- ownerStackIndex,\n searchIndex,\n searchResults,\n searchText,\n@@ -454,30 +446,20 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n \n switch (action.type) {\n case 'HANDLE_STORE_MUTATION':\n- if (ownerStack.length > 0) {\n- let indexOfRemovedItem = -1;\n- for (let i = 0; i < ownerStack.length; i++) {\n- if (store.getElementByID(ownerStack[i]) === null) {\n- indexOfRemovedItem = i;\n- break;\n- }\n- }\n-\n- if (indexOfRemovedItem >= 0) {\n- ownerStack = ownerStack.slice(0, indexOfRemovedItem);\n- if (ownerStack.length === 0) {\n- ownerFlatTree = null;\n- ownerStackIndex = null;\n- } else {\n- ownerStackIndex = ownerStack.length - 1;\n+ if (ownerID !== null) {\n+ if (!store.containsElement(ownerID)) {\n+ ownerID = null;\n+ ownerFlatTree = null;\n+ selectedElementID = null;\n+ } else {\n+ ownerFlatTree = store.getOwnersListForElement(ownerID);\n+ if (selectedElementID !== null) {\n+ \/\/ Mutation might have caused the index of this ID to shift.\n+ selectedElementIndex = ownerFlatTree.findIndex(\n+ element => element.id === selectedElementID\n+ );\n }\n }\n- if (selectedElementID !== null && ownerFlatTree !== null) {\n- \/\/ Mutation might have caused the index of this ID to shift.\n- selectedElementIndex = ownerFlatTree.findIndex(\n- element => element.id === selectedElementID\n- );\n- }\n } else {\n if (selectedElementID !== null) {\n \/\/ Mutation might have caused the index of this ID to shift.\n@@ -491,13 +473,12 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n }\n break;\n case 'RESET_OWNER_STACK':\n- ownerStack = [];\n- ownerStackIndex = null;\n+ ownerID = null;\n+ ownerFlatTree = null;\n selectedElementIndex =\n selectedElementID !== null\n ? store.getIndexOfElementID(selectedElementID)\n : null;\n- ownerFlatTree = null;\n break;\n case 'SELECT_ELEMENT_AT_INDEX':\n if (ownerFlatTree !== null) {\n@@ -533,33 +514,12 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n \/\/ If the Store doesn't have any owners metadata, don't drill into an empty stack.\n \/\/ This is a confusing user experience.\n if (store.hasOwnerMetadata) {\n- const id = (action: ACTION_SELECT_OWNER).payload;\n- ownerStackIndex = ownerStack.indexOf(id);\n+ ownerID = (action: ACTION_SELECT_OWNER).payload;\n+ ownerFlatTree = store.getOwnersListForElement(ownerID);\n \n \/\/ Always force reset selection to be the top of the new owner tree.\n selectedElementIndex = 0;\n prevSelectedElementIndex = null;\n-\n- \/\/ If this owner is already in the current stack, just select it.\n- \/\/ Otherwise, create a new stack.\n- if (ownerStackIndex < 0) {\n- \/\/ Add this new owner, and fill in the owners above it as well.\n- ownerStack = [];\n- let currentOwnerID = id;\n- while (currentOwnerID !== 0) {\n- ownerStack.unshift(currentOwnerID);\n- currentOwnerID = ((store.getElementByID(\n- currentOwnerID\n- ): any): Element).ownerID;\n- }\n- ownerStackIndex = ownerStack.length - 1;\n-\n- if (searchText !== '') {\n- searchIndex = null;\n- searchResults = [];\n- searchText = '';\n- }\n- }\n }\n break;\n default:\n@@ -569,17 +529,12 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n \n \/\/ Changes in the selected owner require re-calculating the owners tree.\n if (\n- ownerStackIndex !== state.ownerStackIndex ||\n- ownerStack !== state.ownerStack ||\n+ ownerFlatTree !== state.ownerFlatTree ||\n action.type === 'HANDLE_STORE_MUTATION'\n ) {\n- if (ownerStackIndex === null) {\n- ownerFlatTree = null;\n+ if (ownerFlatTree === null) {\n numElements = store.numElements;\n } else {\n- ownerFlatTree = store.getOwnersListForElement(\n- ownerStack[ownerStackIndex]\n- );\n numElements = ownerFlatTree.length;\n }\n }\n@@ -588,9 +543,10 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n if (selectedElementIndex !== prevSelectedElementIndex) {\n if (selectedElementIndex === null) {\n selectedElementID = null;\n- } else if (ownerFlatTree !== null) {\n- selectedElementID =\n- ownerFlatTree[((selectedElementIndex: any): number)].id;\n+ } else {\n+ if (ownerFlatTree !== null) {\n+ selectedElementID = ownerFlatTree[selectedElementIndex].id;\n+ }\n }\n }\n \n@@ -605,8 +561,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n searchResults,\n searchText,\n \n- ownerStack,\n- ownerStackIndex,\n+ ownerID,\n ownerFlatTree,\n };\n }\n@@ -619,20 +574,30 @@ function reduceSuspenseState(\n const { type } = action;\n switch (type) {\n case 'UPDATE_INSPECTED_ELEMENT_ID':\n- return {\n- ...state,\n- inspectedElementID: state.selectedElementID,\n- };\n+ if (state.inspectedElementID !== state.selectedElementID) {\n+ return {\n+ ...state,\n+ inspectedElementID: state.selectedElementID,\n+ };\n+ }\n+ break;\n default:\n- \/\/ React can bailout of no-op updates.\n- return state;\n+ break;\n }\n+\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n }\n \n-type Props = {| children: React$Node |};\n+type Props = {|\n+ children: React$Node,\n+\n+ \/\/ Used for automated testing\n+ defaultOwnerID?: ?number,\n+|};\n \n \/\/ TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.\n-function TreeContextController({ children }: Props) {\n+function TreeContextController({ children, defaultOwnerID }: Props) {\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n \n@@ -696,8 +661,7 @@ function TreeContextController({ children }: Props) {\n searchText: '',\n \n \/\/ Owners\n- ownerStack: [],\n- ownerStackIndex: null,\n+ ownerID: defaultOwnerID == null ? null : defaultOwnerID,\n ownerFlatTree: null,\n \n \/\/ Inspection element panel\ndiff --git a\/src\/devtools\/views\/Components\/types.js b\/src\/devtools\/views\/Components\/types.js\nindex 0849ec019a..aaae8d378a 100644\n--- a\/src\/devtools\/views\/Components\/types.js\n+++ b\/src\/devtools\/views\/Components\/types.js\n@@ -31,10 +31,15 @@ export type Element = {|\n |};\n \n export type Owner = {|\n- displayName: string,\n+ displayName: string | null,\n id: number,\n |};\n \n+export type OwnersList = {|\n+ id: number,\n+ owners: Array | null,\n+|};\n+\n export type InspectedElement = {|\n id: number,\n \n","body":"Fetch owners list from renderer (using suspense)","parents":["17516b76ae763ec7c4dfa09d826164d6bb2e41c0","ac0022bf4a32f8c464e59f8b71dec12f141619b3"],"commit":{"authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","revision":"8536995b11054288ada3fab9b6ba0ef03fe2a7be","authoredAt":"2019-05-10T08:10:24-07:00","subject":"Merge pull request #264 from bvaughn\/filter-owners-list","shortRevision":"8536995b11"},"files":[{"path":"src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap","status":"A"},{"path":"src\/__tests__\/__snapshots__\/treeContext-test.js.snap","status":"A"},{"path":"src\/__tests__\/ownersListContext-test.js","status":"A"},{"path":"src\/__tests__\/storeComponentFilters-test.js","status":"M"},{"path":"src\/__tests__\/treeContext-test.js","status":"A"},{"path":"src\/__tests__\/utils.js","status":"M"},{"path":"src\/backend\/agent.js","status":"M"},{"path":"src\/backend\/renderer.js","status":"M"},{"path":"src\/backend\/types.js","status":"M"},{"path":"src\/devtools\/views\/Components\/Components.js","status":"M"},{"path":"src\/devtools\/views\/Components\/Element.js","status":"M"},{"path":"src\/devtools\/views\/Components\/OwnersListContext.js","status":"A"},{"path":"src\/devtools\/views\/Components\/OwnersStack.css","status":"M"},{"path":"src\/devtools\/views\/Components\/OwnersStack.js","status":"M"},{"path":"src\/devtools\/views\/Components\/SelectedElement.js","status":"M"},{"path":"src\/devtools\/views\/Components\/Tree.css","status":"M"},{"path":"src\/devtools\/views\/Components\/Tree.js","status":"M"},{"path":"src\/devtools\/views\/Components\/TreeContext.js","status":"M"},{"path":"src\/devtools\/views\/Components\/types.js","status":"M"}]}

dillon1000/react

Files changed