Inspect the Screen when inspecting a Root

The Screen is the union of all Roots of all Renderers registered in the Store.

Author: eps1lon

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -974,12 +974,8 @@ describe('Store', () => {
             <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
       `);
 
-      const rendererID = getRendererID();
-      const rootID = store.getRootIDForElement(store.getElementIDAtIndex(0));
       await actAsync(() => {
         agent.overrideSuspenseMilestone({
-          rendererID,
-          rootID,
           suspendedSet: [
             store.getElementIDAtIndex(4),
             store.getElementIDAtIndex(8),
@@ -1009,8 +1005,6 @@ describe('Store', () => {
 
       await actAsync(() => {
         agent.overrideSuspenseMilestone({
-          rendererID,
-          rootID,
           suspendedSet: [],
         });
       });

packages/react-devtools-shared/src/backend/agent.js

@@ -26,6 +26,7 @@ import type {
   RendererID,
   RendererInterface,
   DevToolsHookSettings,
+  InspectedElementPayload,
 } from './types';
 import type {ComponentFilter} from 'react-devtools-shared/src/frontend/types';
 import type {GroupItem} from './views/TraceUpdates/canvas';
@@ -73,6 +74,13 @@ type InspectElementParams = {
   requestID: number,
 };
 
+type InspectScreenParams = {
+  forceFullData: boolean,
+  id: number,
+  path: Array<string | number> | null,
+  requestID: number,
+};
+
 type OverrideHookParams = {
   id: number,
   hookID: number,
@@ -131,8 +139,6 @@ type OverrideSuspenseParams = {
 };
 
 type OverrideSuspenseMilestoneParams = {
-  rendererID: number,
-  rootID: number,
   suspendedSet: Array<number>,
 };
 
@@ -201,6 +207,7 @@ export default class Agent extends EventEmitter<{
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
     bridge.addListener('getOwnersList', this.getOwnersList);
     bridge.addListener('inspectElement', this.inspectElement);
+    bridge.addListener('inspectScreen', this.inspectScreen);
     bridge.addListener('logElementToConsole', this.logElementToConsole);
     bridge.addListener('overrideError', this.overrideError);
     bridge.addListener('overrideSuspense', this.overrideSuspense);
@@ -531,6 +538,48 @@ export default class Agent extends EventEmitter<{
     }
   };
 
+  inspectScreen: InspectScreenParams => void = ({
+    requestID,
+    id,
+    forceFullData,
+    path,
+  }) => {
+    const payload: InspectedElementPayload = {
+      type: 'no-change',
+      id,
+      responseID: requestID,
+    };
+    for (const rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      const inspectedRoots = renderer.inspectRoots(
+        requestID,
+        id,
+        path,
+        forceFullData,
+      );
+      switch (inspectedRoots.type) {
+        case 'hydrated-path':
+        case 'full-data':
+          // TODO: We can't merge different elements since they might have dehydrated data.
+          // For now we assume only handle the first renderer that returns data
+          // The Frontend needs a dedicated InspectedScreen type because most of the
+          // InspectedElement properties can't be sequashed (e.g. rendererVersion)
+          this._bridge.send('inspectedScreen', inspectedRoots);
+          return;
+        case 'not-found':
+          continue;
+        case 'error':
+          // bail out and show the error
+          this._bridge.send('inspectedScreen', inspectedRoots);
+          return;
+      }
+    }
+
+    this._bridge.send('inspectedScreen', payload);
+  };
+
   logElementToConsole: ElementAndRendererID => void = ({id, rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
@@ -567,17 +616,13 @@ export default class Agent extends EventEmitter<{
   };
 
   overrideSuspenseMilestone: OverrideSuspenseMilestoneParams => void = ({
-    rendererID,
-    rootID,
     suspendedSet,
   }) => {
-    const renderer = this._rendererInterfaces[rendererID];
-    if (renderer == null) {
-      console.warn(
-        `Invalid renderer id "${rendererID}" to override suspense milestone`,
-      );
-    } else {
-      renderer.overrideSuspenseMilestone(rootID, suspendedSet);
+    for (const rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.overrideSuspenseMilestone(suspendedSet);
     }
   };
 

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

@@ -4832,7 +4832,11 @@ export function attach(
       fiberInstance.data = nextFiber;
       if (
         mostRecentlyInspectedElement !== null &&
-        mostRecentlyInspectedElement.id === fiberInstance.id &&
+        (mostRecentlyInspectedElement.id === fiberInstance.id ||
+          // If we're inspecting a Root, we inspect the Screen.
+          // Invalidating any Root invalidates the Screen too.
+          (mostRecentlyInspectedElement.type === ElementTypeRoot &&
+            nextFiber.tag === HostRoot)) &&
         didFiberRender(prevFiber, nextFiber)
       ) {
         // If this Fiber has updated, clear cached inspected data.
@@ -6335,7 +6339,10 @@ export function attach(
       return inspectVirtualInstanceRaw(devtoolsInstance);
     }
     if (devtoolsInstance.kind === FIBER_INSTANCE) {
-      return inspectFiberInstanceRaw(devtoolsInstance);
+      const isRoot = devtoolsInstance.parent === null;
+      return isRoot
+        ? inspectRootsRaw(devtoolsInstance.id)
+        : inspectFiberInstanceRaw(devtoolsInstance);
     }
     (devtoolsInstance: FilteredFiberInstance); // assert exhaustive
     throw new Error('Unsupported instance kind');
@@ -7122,6 +7129,98 @@ export function attach(
     };
   }
 
+  function inspectRootsRaw(id: number): InspectedElement | null {
+    const roots = hook.getFiberRoots(rendererID);
+    if (roots.size === 0) {
+      return null;
+    }
+
+    const inspectedRoots: InspectedElement = {
+      // invariants
+      id: id,
+      rendererPackageName: renderer.rendererPackageName,
+      rendererVersion: renderer.version,
+      type: ElementTypeRoot,
+      // Properties we merge
+      isErrored: false,
+      errors: [],
+      warnings: [],
+      suspendedBy: [],
+      suspendedByRange: null,
+      // Properties where merging doesn't make sense so we ignore them entirely in the UI
+      rootType: null,
+      plugins: {stylex: null},
+      nativeTag: null,
+      env: null,
+      source: null,
+      stack: null,
+      unknownSuspenders: UNKNOWN_SUSPENDERS_NONE,
+      // These don't make sense for a Root. They're just bottom values.
+      key: null,
+      canEditFunctionProps: false,
+      canEditHooks: false,
+      canEditFunctionPropsDeletePaths: false,
+      canEditFunctionPropsRenamePaths: false,
+      canEditHooksAndDeletePaths: false,
+      canEditHooksAndRenamePaths: false,
+      canToggleError: false,
+      canToggleSuspense: false,
+      isSuspended: false,
+      hasLegacyContext: false,
+      context: null,
+      hooks: null,
+      props: null,
+      state: null,
+      owners: null,
+    };
+
+    let minSuspendedByRange = Infinity;
+    let maxSuspendedByRange = -Infinity;
+    roots.forEach(root => {
+      const rootInstance = rootToFiberInstanceMap.get(root);
+      if (rootInstance === undefined) {
+        throw new Error(
+          'Expected a root instance to exist for this Fiber root',
+        );
+      }
+      const inspectedRoot = inspectFiberInstanceRaw(rootInstance);
+      if (inspectedRoot === null) {
+        return;
+      }
+
+      if (inspectedRoot.isErrored) {
+        inspectedRoots.isErrored = true;
+      }
+      for (let i = 0; i < inspectedRoot.errors.length; i++) {
+        inspectedRoots.errors.push(inspectedRoot.errors[i]);
+      }
+      for (let i = 0; i < inspectedRoot.warnings.length; i++) {
+        inspectedRoots.warnings.push(inspectedRoot.warnings[i]);
+      }
+      for (let i = 0; i < inspectedRoot.suspendedBy.length; i++) {
+        inspectedRoots.suspendedBy.push(inspectedRoot.suspendedBy[i]);
+      }
+      const suspendedByRange = inspectedRoot.suspendedByRange;
+      if (suspendedByRange !== null) {
+        if (suspendedByRange[0] < minSuspendedByRange) {
+          minSuspendedByRange = suspendedByRange[0];
+        }
+        if (suspendedByRange[1] > maxSuspendedByRange) {
+          maxSuspendedByRange = suspendedByRange[1];
+        }
+      }
+    });
+
+    if (minSuspendedByRange !== Infinity || maxSuspendedByRange !== -Infinity) {
+      inspectedRoots.suspendedByRange = [
+        minSuspendedByRange,
+        maxSuspendedByRange,
+      ];
+    }
+
+    return inspectedRoots;
+  }
+
   function logElementToConsole(id: number) {
     const result = isMostRecentlyInspectedElementCurrent(id)
       ? mostRecentlyInspectedElement
@@ -7768,13 +7867,9 @@ export function attach(
 
   /**
    * Resets the all other roots of this renderer.
-   * @param rootID The root that contains this milestone
    * @param suspendedSet List of IDs of SuspenseComponent Fibers
    */
-  function overrideSuspenseMilestone(
-    rootID: FiberInstance['id'],
-    suspendedSet: Array<FiberInstance['id']>,
-  ) {
+  function overrideSuspenseMilestone(suspendedSet: Array<FiberInstance['id']>) {
     if (
       typeof setSuspenseHandler !== 'function' ||
       typeof scheduleUpdate !== 'function'
@@ -7784,7 +7879,6 @@ export function attach(
       );
     }
 
-    // TODO: Allow overriding the timeline for the specified root.
     forceFallbackForFibers.forEach(fiber => {
       scheduleUpdate(fiber);
     });
@@ -8314,6 +8408,7 @@ export function attach(
     handlePostCommitFiberRoot,
     hasElementWithId,
     inspectElement,
+    inspectRoots: inspectElement,
     logElementToConsole,
     getComponentStack,
     getElementAttributeByPath,

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

@@ -198,6 +198,13 @@ export function attach(
         type: 'not-found',
       };
     },
+    inspectRoots(requestID: number, arbitraryRootID: number) {
+      return {
+        id: arbitraryRootID,
+        responseID: requestID,
+        type: 'not-found',
+      };
+    },
     logElementToConsole() {},
     getElementAttributeByPath() {},
     getElementSourceFunctionById() {},

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

@@ -793,6 +793,20 @@ export function attach(
     };
   }
 
+  function inspectRoots(
+    requestID: number,
+    arbitraryRootID: number,
+    path: Array<string | number> | null,
+    forceFullData: boolean,
+  ): InspectedElementPayload {
+    // TODO: Implement once we figured out how to merge InspectedElements on the Frontend.
+    return {
+      id: arbitraryRootID,
+      responseID: requestID,
+      type: 'not-found',
+    };
+  }
+
   function inspectElementRaw(id: number): InspectedElement | null {
     const internalInstance = idToInternalInstanceMap.get(id);
 
@@ -1176,6 +1190,7 @@ export function attach(
     handlePostCommitFiberRoot,
     hasElementWithId,
     inspectElement,
+    inspectRoots,
     logElementToConsole,
     overrideError,
     overrideSuspense,

packages/react-devtools-shared/src/backend/types.js

@@ -433,14 +433,17 @@ export type RendererInterface = {
     inspectedPaths: Object,
     forceFullData: boolean,
   ) => InspectedElementPayload,
+  inspectRoots: (
+    requestID: number,
+    arbitraryRootID: number,
+    path: Array<string | number> | null,
+    forceFullData: boolean,
+  ) => InspectedElementPayload,
   logElementToConsole: (id: number) => void,
   onErrorOrWarning?: OnErrorOrWarning,
   overrideError: (id: number, forceError: boolean) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
-  overrideSuspenseMilestone: (
-    rootID: number,
-    suspendedSet: Array<number>,
-  ) => void,
+  overrideSuspenseMilestone: (suspendedSet: Array<number>) => void,
   overrideValueAtPath: (
     type: Type,
     id: number,

packages/react-devtools-shared/src/backendAPI.js

@@ -95,7 +95,7 @@ export function inspectElement(
   id: number,
   path: InspectedElementPath | null,
   rendererID: number,
-  shouldListenToPauseEvents: boolean = false,
+  shouldListenToPauseEvents: boolean,
 ): Promise<InspectedElementPayload> {
   const requestID = requestCounter++;
   const promise = getPromiseForRequestID<InspectedElementPayload>(
@@ -117,6 +117,32 @@ export function inspectElement(
   return promise;
 }
 
+export function inspectScreen(
+  bridge: FrontendBridge,
+  forceFullData: boolean,
+  arbitraryRootID: number,
+  path: InspectedElementPath | null,
+  shouldListenToPauseEvents: boolean,
+): Promise<InspectedElementPayload> {
+  const requestID = requestCounter++;
+  const promise = getPromiseForRequestID<InspectedElementPayload>(
+    requestID,
+    'inspectedScreen',
+    bridge,
+    `Timed out while inspecting screen.`,
+    shouldListenToPauseEvents,
+  );
+
+  bridge.send('inspectScreen', {
+    requestID,
+    id: arbitraryRootID,
+    path,
+    forceFullData,
+  });
+
+  return promise;
+}
+
 let storeAsGlobalCount = 0;
 
 export function storeAsGlobal({