[DevTools] Activity slices in Suspense tab

Author: eps1lon

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

@@ -26,6 +26,7 @@ import {
   ComponentFilterHOC,
   ComponentFilterLocation,
   ComponentFilterEnvironmentName,
+  ComponentFilterActivitySlice,
   ElementTypeClass,
   ElementTypeContext,
   ElementTypeFunction,
@@ -1433,16 +1434,24 @@ export function attach(
   const hideElementsWithPaths: Set<RegExp> = new Set();
   const hideElementsWithTypes: Set<ElementType> = new Set();
   const hideElementsWithEnvs: Set<string> = new Set();
+  let activitySliceID: null | FiberInstance['id'] = null;
+  let activitySlice: null | Fiber = null;
+  let isInActivitySlice: boolean = true;
 
   // Highlight updates
   let traceUpdatesEnabled: boolean = false;
   const traceUpdatesForNodes: Set<HostInstance> = new Set();
 
-  function applyComponentFilters(componentFilters: Array<ComponentFilter>) {
+  function applyComponentFilters(
+    componentFilters: Array<ComponentFilter>,
+    nextActivitySlice: null | Fiber = null,
+  ) {
     hideElementsWithTypes.clear();
     hideElementsWithDisplayNames.clear();
     hideElementsWithPaths.clear();
     hideElementsWithEnvs.clear();
+    activitySliceID = null;
+    activitySlice = null;
 
     componentFilters.forEach(componentFilter => {
       if (!componentFilter.isEnabled) {
@@ -1471,6 +1480,16 @@ export function attach(
         case ComponentFilterEnvironmentName:
           hideElementsWithEnvs.add(componentFilter.value);
           break;
+        case ComponentFilterActivitySlice:
+          activitySlice = nextActivitySlice;
+          if (activitySlice === null) {
+            // We're not filtering by activity slice after all. Consider everything
+            // to be in the slice.
+            isInActivitySlice = true;
+          } else {
+            isInActivitySlice = false;
+          }
+          break;
         default:
           console.warn(
             `Invalid component filter type "${componentFilter.type}"`,
@@ -1510,6 +1529,20 @@ export function attach(
       throw Error('Cannot modify filter preferences while profiling');
     }
 
+    // The ID will be based on the old tree. We need to find the Fiber based on
+    // that ID before we unmount everything. We set the activity slice ID once
+    // we mount it again.
+    let nextActivitySlice: null | Fiber = null;
+    for (let i = 0; i < componentFilters.length; i++) {
+      const filter = componentFilters[i];
+      if (filter.type === ComponentFilterActivitySlice && filter.isEnabled) {
+        const instance = idToDevToolsInstanceMap.get(filter.activityID);
+        if (instance !== undefined && instance.kind === FIBER_INSTANCE) {
+          nextActivitySlice = instance.data;
+        }
+      }
+    }
+
     // Recursively unmount all roots.
     hook.getFiberRoots(rendererID).forEach(root => {
       const rootInstance = rootToFiberInstanceMap.get(root);
@@ -1525,7 +1558,7 @@ export function attach(
       currentRoot = (null: any);
     });
 
-    applyComponentFilters(componentFilters);
+    applyComponentFilters(componentFilters, nextActivitySlice);
 
     // Reset pseudo counters so that new path selections will be persisted.
     rootDisplayNameCounter.clear();
@@ -1614,6 +1647,11 @@ export function attach(
   function shouldFilterFiber(fiber: Fiber): boolean {
     const {tag, type, key} = fiber;
 
+    // It is never valid to filter the root element.
+    if (tag !== HostRoot && !isInActivitySlice) {
+      return true;
+    }
+
     switch (tag) {
       case DehydratedSuspenseComponent:
         // TODO: ideally we would show dehydrated Suspense immediately.
@@ -3920,11 +3958,21 @@ export function attach(
     fiber: Fiber,
     traceNearestHostComponentUpdate: boolean,
   ): void {
+    const isActivitySliceEntry =
+      activitySlice !== null &&
+      (fiber === activitySlice || fiber.alternate === activitySlice);
+    if (isActivitySliceEntry) {
+      isInActivitySlice = true;
+    }
+
     const shouldIncludeInTree = !shouldFilterFiber(fiber);
     let newInstance = null;
     let newSuspenseNode = null;
     if (shouldIncludeInTree) {
       newInstance = recordMount(fiber, reconcilingParent);
+      if (isActivitySliceEntry) {
+        activitySliceID = newInstance.id;
+      }
       if (fiber.tag === SuspenseComponent || fiber.tag === HostRoot) {
         newSuspenseNode = createSuspenseNode(newInstance);
         // Measure this Suspense node. In general we shouldn't do this until we have
@@ -4040,6 +4088,7 @@ export function attach(
     const stashedSuspenseParent = reconcilingParentSuspenseNode;
     const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;
     const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;
+    const stashedIsInActivitySlice = isInActivitySlice;
     if (newInstance !== null) {
       // Push a new DevTools instance parent while reconciling this subtree.
       reconcilingParent = newInstance;
@@ -4053,6 +4102,13 @@ export function attach(
       remainingReconcilingChildrenSuspenseNodes = null;
       shouldPopSuspenseNode = true;
     }
+    if (
+      !isActivitySliceEntry &&
+      activitySlice !== null &&
+      fiber.tag === ActivityComponent
+    ) {
+      isInActivitySlice = false;
+    }
     try {
       if (traceUpdatesEnabled) {
         if (traceNearestHostComponentUpdate) {
@@ -4180,6 +4236,7 @@ export function attach(
         }
       }
     } finally {
+      isInActivitySlice = stashedIsInActivitySlice;
       if (newInstance !== null) {
         reconcilingParent = stashedParent;
         previouslyReconciledSibling = stashedPrevious;
@@ -4211,6 +4268,7 @@ export function attach(
     const stashedSuspenseParent = reconcilingParentSuspenseNode;
     const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;
     const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;
+    const stashedIsInActivitySlice = isInActivitySlice;
     const previousSuspendedBy = instance.suspendedBy;
     // Push a new DevTools instance parent while reconciling this subtree.
     reconcilingParent = instance;
@@ -4229,6 +4287,18 @@ export function attach(
       shouldPopSuspenseNode = true;
     }
 
+    if (activitySlice !== null) {
+      if (instance.id === activitySliceID) {
+        isInActivitySlice = true;
+      } else if (
+        instance.kind === FIBER_INSTANCE &&
+        instance.data !== null &&
+        instance.data.tag === ActivityComponent
+      ) {
+        isInActivitySlice = false;
+      }
+    }
+
     try {
       // Unmount the remaining set.
       if (
@@ -4279,6 +4349,7 @@ export function attach(
         previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
         remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
       }
+      isInActivitySlice = stashedIsInActivitySlice;
     }
     if (instance.kind === FIBER_INSTANCE) {
       recordUnmount(instance);
@@ -4959,6 +5030,7 @@ export function attach(
     const stashedSuspenseParent = reconcilingParentSuspenseNode;
     const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;
     const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;
+    const stashedIsInActivitySlice = isInActivitySlice;
     let updateFlags = NoUpdate;
     let shouldMeasureSuspenseNode = false;
     let shouldPopSuspenseNode = false;
@@ -4998,6 +5070,15 @@ export function attach(
         shouldMeasureSuspenseNode = true;
         shouldPopSuspenseNode = true;
       }
+
+      if (activitySlice !== null) {
+        if (fiberInstance.id === activitySliceID) {
+          isInActivitySlice = true;
+        } else if (nextFiber.tag === ActivityComponent) {
+          // Reached the next Activity so we're exiting the slice.
+          isInActivitySlice = false;
+        }
+      }
     }
     try {
       trackDebugInfoFromLazyType(nextFiber);
@@ -5422,6 +5503,7 @@ export function attach(
           previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
           remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
         }
+        isInActivitySlice = stashedIsInActivitySlice;
       }
     }
   }

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

@@ -27,7 +27,7 @@ import {
   SUSPENSE_TREE_OPERATION_RESIZE,
   SUSPENSE_TREE_OPERATION_SUSPENDERS,
 } from '../constants';
-import {ElementTypeRoot} from '../frontend/types';
+import {ElementTypeActivity, ElementTypeRoot} from '../frontend/types';
 import {
   getSavedComponentFilters,
   setSavedComponentFilters,

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -10,6 +10,7 @@
 import * as React from 'react';
 import {Fragment, useContext, useMemo, useState} from 'react';
 import Store from 'react-devtools-shared/src/devtools/store';
+import {ElementTypeActivity} from 'react-devtools-shared/src/frontend/types';
 import ButtonIcon from '../ButtonIcon';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {StoreContext} from '../context';
@@ -25,6 +26,7 @@ import styles from './Element.css';
 import Icon from '../Icon';
 import {useChangeOwnerAction} from './OwnersListContext';
 import Tooltip from './reach-ui/tooltip';
+import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
 
 type Props = {
   data: ItemData,
@@ -66,6 +68,8 @@ export default function Element({data, index, style}: Props): React.Node {
 
   const changeOwnerAction = useChangeOwnerAction();
 
+  const [, changeActivitySliceAction] = useChangeActivitySliceAction();
+
   // Handle elements that are removed from the tree while an async render is in progress.
   if (element == null) {
     console.warn(`<Element> Could not find element at index ${index}`);
@@ -75,8 +79,10 @@ export default function Element({data, index, style}: Props): React.Node {
   }
 
   const handleDoubleClick = () => {
-    if (id !== null) {
-      changeOwnerAction(id);
+    if (element.type === ElementTypeActivity) {
+      changeActivitySliceAction(element.id);
+    } else {
+      changeOwnerAction(element.id);
     }
   };
 

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

@@ -37,7 +37,9 @@ import ButtonIcon from '../ButtonIcon';
 import Button from '../Button';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 import {useExtensionComponentsPanelVisibility} from 'react-devtools-shared/src/frontend/hooks/useExtensionComponentsPanelVisibility';
+import {ElementTypeActivity} from 'react-devtools-shared/src/frontend/types';
 import {useChangeOwnerAction} from './OwnersListContext';
+import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
 
 // Indent for each node at level N, compared to node at level N - 1.
 const INDENTATION_SIZE = 10;
@@ -302,14 +304,23 @@ export default function Tree(): React.Node {
   const handleBlur = useCallback(() => setTreeFocused(false), []);
   const handleFocus = useCallback(() => setTreeFocused(true), []);
 
+  const [, changeActivitySliceAction] = useChangeActivitySliceAction();
   const changeOwnerAction = useChangeOwnerAction();
   const handleKeyPress = useCallback(
     (event: $FlowFixMe) => {
       switch (event.key) {
         case 'Enter':
         case ' ':
           if (inspectedElementID !== null) {
-            changeOwnerAction(inspectedElementID);
+            const inspectedElement = store.getElementByID(inspectedElementID);
+            if (
+              inspectedElement !== null &&
+              inspectedElement.type === ElementTypeActivity
+            ) {
+              changeActivitySliceAction(inspectedElementID);
+            } else {
+              changeOwnerAction(inspectedElementID);
+            }
           }
           break;
         default:

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

@@ -29,6 +29,7 @@ import {
   ComponentFilterHOC,
   ComponentFilterLocation,
   ComponentFilterEnvironmentName,
+  ComponentFilterActivitySlice,
   ElementTypeClass,
   ElementTypeContext,
   ElementTypeFunction,
@@ -171,6 +172,8 @@ export default function ComponentsSettings({
               isValid: true,
               value: 'Client',
             };
+          } else if (type === ComponentFilterActivitySlice) {
+            // TODO: Allow changing type
           }
         }
         return cloned;
@@ -371,6 +374,9 @@ export default function ComponentsSettings({
                       : styles.InvalidRegExp
                   }
                   isChecked={componentFilter.isEnabled}
+                  isDisabled={
+                    componentFilter.type === ComponentFilterActivitySlice
+                  }
                   onChange={isEnabled =>
                     toggleFilterIsEnabled(componentFilter, isEnabled)
                   }
@@ -392,6 +398,9 @@ export default function ComponentsSettings({
               </td>
               <td className={styles.TableCell}>
                 <select
+                  disabled={
+                    componentFilter.type === ComponentFilterActivitySlice
+                  }
                   value={componentFilter.type}
                   onChange={({currentTarget}) =>
                     changeFilterType(
@@ -413,6 +422,7 @@ export default function ComponentsSettings({
                       environment
                     </option>
                   )}
+                  <option value={ComponentFilterActivitySlice}>activity</option>
                 </select>
               </td>
               <td className={styles.TableCell}>
@@ -487,6 +497,9 @@ export default function ComponentsSettings({
                     ))}
                   </select>
                 )}
+                {componentFilter.type === ComponentFilterActivitySlice && (
+                  <span>Activity Slice</span>
+                )}
               </td>
               <td className={styles.TableCell}>
                 <Button

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

@@ -0,0 +1,45 @@
+.ActivityList {
+  cursor: default;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ActivityList[data-pending-activity-slice-selection="true"] {
+  cursor: wait;
+}
+
+.ActivityList:focus {
+  outline: none;
+}
+
+.ActivityListItem {
+  color: var(--color-component-name);
+  padding: 0 0.25rem;
+  user-select: none;
+}
+
+.ActivityListItem:hover {
+  background-color: var(--color-background-hover);
+}
+
+.ActivityListItem[aria-selected="true"] {
+  background-color: var(--color-background-inactive);
+}
+
+.ActivityList:focus .ActivityListItem[aria-selected="true"] {
+  background-color: var(--color-background-selected);
+  color: var(--color-text-selected);
+
+  /* Invert colors */
+  --color-component-name: var(--color-component-name-inverted);
+  --color-text: var(--color-text-selected);
+  --color-component-badge-background: var(
+    --color-component-badge-background-inverted
+  );
+  --color-forget-badge-background: var(--color-forget-badge-background-inverted);
+  --color-component-badge-count: var(--color-component-badge-count-inverted);
+  --color-attribute-name: var(--color-attribute-name-inverted);
+  --color-attribute-value: var(--color-attribute-value-inverted);
+  --color-expand-collapse-toggle: var(--color-component-name-inverted);
+}