Filter across renderers

Author: eps1lon

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -172,6 +172,7 @@ import type {
 } from '../types';
 import type {
   ComponentFilter,
+  FocusedFiberFilter,
   ElementType,
   Plugins,
 } from 'react-devtools-shared/src/frontend/types';
@@ -870,6 +871,9 @@ const idToDevToolsInstanceMap: Map<
   FiberInstance | VirtualInstance,
 > = new Map();
 
+let focusedFiberID: null | FiberInstance['id'] = null;
+let focusedFiber: null | Fiber = null;
+
 const idToSuspenseNodeMap: Map<FiberInstance['id'], SuspenseNode> = new Map();
 
 // Map of canonical HostInstances to the nearest parent DevToolsInstance.
@@ -1437,8 +1441,6 @@ export function attach(
   const hideElementsWithPaths: Set<RegExp> = new Set();
   const hideElementsWithTypes: Set<ElementType> = new Set();
   const hideElementsWithEnvs: Set<string> = new Set();
-  let focusedFiberID: null | FiberInstance['id'] = null;
-  let focusedFiber: null | Fiber = null;
   let isInFocusedFiber: boolean = true;
 
   // Highlight updates
@@ -1447,15 +1449,16 @@ export function attach(
 
   function applyComponentFilters(
     componentFilters: Array<ComponentFilter>,
-    nextFocusedFiber: null | Fiber = null,
+    nextFocusedFiber: null | Fiber,
   ) {
     hideElementsWithTypes.clear();
     hideElementsWithDisplayNames.clear();
     hideElementsWithPaths.clear();
     hideElementsWithEnvs.clear();
-    // Consider everything in the slice by default
+    const previousFocusedFiberID = focusedFiberID;
     focusedFiberID = null;
     focusedFiber = null;
+    // Consider everything in the slice by default
     isInFocusedFiber = true;
 
     componentFilters.forEach(componentFilter => {
@@ -1492,6 +1495,12 @@ export function attach(
           ) {
             focusedFiber = nextFocusedFiber;
             isInFocusedFiber = false;
+            if (componentFilter.rendererID !== rendererID) {
+              // We filtered a Fiber from another renderer.
+              // We need to restore the instance ID since we won't be mounting it
+              // in this renderer.
+              focusedFiberID = previousFocusedFiberID;
+            }
           } else {
             // We're not focusing after all.
             // Don't mark the filter as disabled here.
@@ -1513,15 +1522,15 @@ export function attach(
   if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {
     const restoredComponentFilters: Array<ComponentFilter> =
       persistableComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);
-    applyComponentFilters(restoredComponentFilters);
+    applyComponentFilters(restoredComponentFilters, null);
   } else {
     // Unfortunately this feature is not expected to work for React Native for now.
     // It would be annoying for us to spam YellowBox warnings with unactionable stuff,
     // so for now just skip this message...
     //console.warn('⚛ DevTools: Could not locate saved component filters');
 
     // Fallback to assuming the default filters in this case.
-    applyComponentFilters(getDefaultComponentFilters());
+    applyComponentFilters(getDefaultComponentFilters(), null);
   }
 
   // If necessary, we can revisit optimizing this operation.
@@ -1544,9 +1553,11 @@ export function attach(
     // that ID before we unmount everything. We set the focused ID once
     // we mount it again.
     let nextFocusedFiber: null | Fiber = null;
+    let focusedFiberFilter: null | FocusedFiberFilter = null;
     for (let i = 0; i < componentFilters.length; i++) {
       const filter = componentFilters[i];
       if (filter.type === ComponentFilterFocusedFiber && filter.isEnabled) {
+        focusedFiberFilter = filter;
         const instance = idToDevToolsInstanceMap.get(filter.fiberID);
         if (instance !== undefined && instance.kind === FIBER_INSTANCE) {
           nextFocusedFiber = instance.data;
@@ -1569,7 +1580,11 @@ export function attach(
       currentRoot = (null: any);
     });
 
-    if (nextFocusedFiber !== focusedFiber) {
+    if (
+      nextFocusedFiber !== focusedFiber &&
+      (focusedFiberFilter === null ||
+        focusedFiberFilter.rendererID === rendererID)
+    ) {
       // When we find the applied instance during mount we will send the actual ID.
       // Otherwise 0 will indicate that we unfocused the Fiber slice.
       pushOperation(TREE_OPERATION_FOCUSED_FIBER_CHANGE);
@@ -1635,6 +1650,13 @@ export function attach(
       currentRoot = (null: any);
     });
 
+    // We need to write back the new ID for the focused Fiber.
+    // Otherwise subsequent filter applications will try to focus based on the old ID.
+    // This is also relevant to filter across renderers.
+    if (focusedFiberFilter !== null && focusedFiberID !== null) {
+      focusedFiberFilter.fiberID = focusedFiberID;
+    }
+
     flushPendingEvents();
 
     needsToFlushComponentLogs = false;

packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.js

@@ -43,9 +43,14 @@ export function useChangeActivitySliceAction(): (
     }
 
     if (activityID !== null) {
+      const rendererID = store.getRendererIDForElement(activityID);
+      if (rendererID === null) {
+        throw new Error('Expected to find renderer.');
+      }
       const activityFilter: FocusedFiberFilter = {
-        type: 6,
+        type: ComponentFilterFocusedFiber,
         fiberID: activityID,
+        rendererID,
         isValid: true,
         isEnabled: true,
       };