Filter changes are applied to the renderer without reloading

src/backend/agent.js

@@ -16,7 +16,7 @@ import type {
   RendererID,
   RendererInterface,
 } from './types';
-import type { Bridge } from '../types';
+import type { Bridge, FilterPreferences } from '../types';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -118,6 +118,7 @@ export default class Agent extends EventEmitter {
       this.syncSelectionFromNativeElementsPanel
     );
     bridge.addListener('shutdown', this.shutdown);
+    bridge.addListener('updateFilterPreferences', this.updateFilterPreferences);
     bridge.addListener('viewElementSource', this.viewElementSource);
 
     if (this._isProfiling) {
@@ -489,6 +490,15 @@ export default class Agent extends EventEmitter {
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
+  updateFilterPreferences = (filterPreferences: FilterPreferences) => {
+    for (let rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.updateFilterPreferences(filterPreferences);
+    }
+  };
+
   viewElementSource = ({ id, rendererID }: InspectSelectParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {

src/backend/renderer.js

@@ -48,6 +48,7 @@ import type {
   RendererInterface,
 } from './types';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
+import type { FilterPreferences } from 'src/types';
 
 function getInternalReactConstants(version) {
   const ReactSymbols = {
@@ -264,12 +265,36 @@ export function attach(
     }
   };
 
-  const {
+  let {
     hideElementsWithTypes,
-    // TOOD (filter) hideElementsWithDisplayNames,
-    // TOOD (filter) hideElementsWithPaths,
+    hideElementsWithDisplayNames,
+    hideElementsWithPaths,
   } = getSavedFilterPreferences();
 
+  // TODO (filter) We could make this more efficient.
+  function updateFilterPreferences(filterPreferences: FilterPreferences) {
+    // Recursively unmount and then re-mount all roots.
+    hook.getFiberRoots(rendererID).forEach(root => {
+      currentRootID = getFiberID(getPrimaryFiber(root.current));
+      unmountFiberChildrenRecursively(root.current);
+      recordUnmount(root.current, false);
+      currentRootID = -1;
+    });
+
+    hideElementsWithTypes = filterPreferences.hideElementsWithTypes;
+    hideElementsWithDisplayNames =
+      filterPreferences.hideElementsWithDisplayNames;
+    hideElementsWithPaths = filterPreferences.hideElementsWithPaths;
+
+    // Recursively re-mount all roots with new filter criteria applied.
+    hook.getFiberRoots(rendererID).forEach(root => {
+      currentRootID = getFiberID(getPrimaryFiber(root.current));
+      mountFiberRecursively(root.current, null);
+      flushPendingEvents(root);
+      currentRootID = -1;
+    });
+  }
+
   // NOTICE Keep in sync with getDataForFiber()
   function shouldFilterFiber(fiber: Fiber): boolean {
     const { tag } = fiber;
@@ -2288,5 +2313,6 @@ export function attach(
     setTrackedPath,
     startProfiling,
     stopProfiling,
+    updateFilterPreferences,
   };
 }

src/backend/types.js

@@ -1,6 +1,6 @@
 // @flow
 
-import type { ElementType } from 'src/types';
+import type { ElementType, FilterPreferences } from 'src/types';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 type BundleType =
@@ -139,6 +139,7 @@ export type RendererInterface = {
   setTrackedPath: (path: Array<PathFrame> | null) => void,
   startProfiling: () => void,
   stopProfiling: () => void,
+  updateFilterPreferences: (filterPreferences: FilterPreferences) => void,
 };
 
 export type Handler = (data: any) => void;

src/devtools/store.js

@@ -247,8 +247,10 @@ export default class Store extends EventEmitter {
 
     saveFilterPreferences(value);
 
-    // TODO (filter) Dump all nodes, update renderer preferences,  and re-initialize tree.
+    // TODO (filter) Dump all nodes, update renderer preferences, and re-initialize tree.
     // TODO (filter) Invariant check that  we aren't profiling.
+    // TODO (filter) Flushing every time a filter setting is changed is too expensive. We probably need an explitit configm
+    this._bridge.send('updateFilterPreferences', value);
 
     this.emit('filterPreferences');
   }