{children}<\/main>\n+ <\/React.Suspense>\n+ <\/Activity>\n+ );\n+ }\n+\n+ function Layout({children}) {\n+ return (\n+ \n+

Blog<\/h2>\n+
{children}<\/section>\n+ <\/Activity>\n+ );\n+ }\n+\n+ function Page() {\n+ return {immediate}<\/React.Suspense>;\n+ }\n+\n+ await actAsync(async () =>\n+ render(\n+ \n+ \n+ \n+ <\/Layout>\n+ <\/Root>,\n+ ),\n+ );\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ ▾ \n+
\n+ ▾
\n+ ▾ \n+ ▾ \n+
\n+ ▾
\n+ ▾ \n+ ▾ \n+
\n+ [suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}\n+ \n+ \n+ `);\n+\n+ await actAsync(\n+ async () =>\n+ (store.componentFilters = [\n+ utils.createActivitySliceFilter(store.getElementIDAtIndex(1)),\n+ ]),\n+ );\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+
\n+ ▾
\n+ ▾ \n+ ▸ \n+ [suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}\n+ \n+ \n+ `);\n+\n+ await actAsync(async () => (store.componentFilters = []));\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ ▾ \n+
\n+ ▾
\n+ ▾ \n+ ▾ \n+
\n+ ▾
\n+ ▾ \n+ ▾ \n+
\n+ [suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}\n+ \n+ \n `);\n });\n });\ndiff --git a\/packages\/react-devtools-shared\/src\/tests\/utils.js b\/packages\/react-devtools-shared\/src\/tests\/utils.js\nindex c22ac6e05d..e84382f6fc 100644\n--- a\/packages\/react-devtools-shared\/src\/tests\/utils.js\n+++ b\/packages\/react-devtools-shared\/src\/tests\/utils.js\n@@ -328,6 +328,19 @@ export function createLocationFilter(\n };\n }\n \n+export function createActivitySliceFilter(\n+ activityID: Element['id'],\n+ isEnabled: boolean = true,\n+) {\n+ const Types = require('react-devtools-shared\/src\/frontend\/types');\n+ return {\n+ type: Types.ComponentFilterActivitySlice,\n+ isEnabled,\n+ isValid: true,\n+ activityID: activityID,\n+ };\n+}\n+\n export function getRendererID(): number {\n if (global.agent == null) {\n throw Error('Agent unavailable.');\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\nindex ddafd014e7..2cd037f78d 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n@@ -26,6 +26,7 @@ import {\n ComponentFilterHOC,\n ComponentFilterLocation,\n ComponentFilterEnvironmentName,\n+ ComponentFilterActivitySlice,\n ElementTypeClass,\n ElementTypeContext,\n ElementTypeFunction,\n@@ -53,7 +54,7 @@ import {\n renamePathInObject,\n setInObject,\n utfEncodeString,\n- filterOutLocationComponentFilters,\n+ persistableComponentFilters,\n } from 'react-devtools-shared\/src\/utils';\n import {\n formatConsoleArgumentsToSingleString,\n@@ -85,6 +86,7 @@ import {\n TREE_OPERATION_SET_SUBTREE_MODE,\n TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,\n TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+ TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,\n SUSPENSE_TREE_OPERATION_ADD,\n SUSPENSE_TREE_OPERATION_REMOVE,\n SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,\n@@ -170,6 +172,7 @@ import type {\n } from '..\/types';\n import type {\n ComponentFilter,\n+ ActivitySliceFilter,\n ElementType,\n Plugins,\n } from 'react-devtools-shared\/src\/frontend\/types';\n@@ -868,6 +871,9 @@ const idToDevToolsInstanceMap: Map<\n FiberInstance | VirtualInstance,\n > = new Map();\n \n+let focusedActivityID: null | FiberInstance['id'] = null;\n+let focusedActivity: null | Fiber = null;\n+\n const idToSuspenseNodeMap: Map = new Map();\n \n \/\/ Map of canonical HostInstances to the nearest parent DevToolsInstance.\n@@ -1435,16 +1441,25 @@ export function attach(\n const hideElementsWithPaths: Set = new Set();\n const hideElementsWithTypes: Set = new Set();\n const hideElementsWithEnvs: Set = new Set();\n+ let isInFocusedActivity: boolean = true;\n \n \/\/ Highlight updates\n let traceUpdatesEnabled: boolean = false;\n const traceUpdatesForNodes: Set = new Set();\n \n- function applyComponentFilters(componentFilters: Array) {\n+ function applyComponentFilters(\n+ componentFilters: Array,\n+ nextActivitySlice: null | Fiber,\n+ ) {\n hideElementsWithTypes.clear();\n hideElementsWithDisplayNames.clear();\n hideElementsWithPaths.clear();\n hideElementsWithEnvs.clear();\n+ const previousFocusedActivityID = focusedActivityID;\n+ focusedActivityID = null;\n+ focusedActivity = null;\n+ \/\/ Consider everything in the slice by default\n+ isInFocusedActivity = true;\n \n componentFilters.forEach(componentFilter => {\n if (!componentFilter.isEnabled) {\n@@ -1473,6 +1488,25 @@ export function attach(\n case ComponentFilterEnvironmentName:\n hideElementsWithEnvs.add(componentFilter.value);\n break;\n+ case ComponentFilterActivitySlice:\n+ if (\n+ nextActivitySlice !== null &&\n+ nextActivitySlice.tag === ActivityComponent\n+ ) {\n+ focusedActivity = nextActivitySlice;\n+ isInFocusedActivity = false;\n+ if (componentFilter.rendererID !== rendererID) {\n+ \/\/ We filtered an Activity from another renderer.\n+ \/\/ We need to restore the instance ID since we won't be mounting it\n+ \/\/ in this renderer.\n+ focusedActivityID = previousFocusedActivityID;\n+ }\n+ } else {\n+ \/\/ We're not filtering by activity slice after all.\n+ \/\/ Don't mark the filter as disabled here.\n+ \/\/ Otherwise updateComponentFilters() will think no enabled filter was changed.\n+ }\n+ break;\n default:\n console.warn(\n `Invalid component filter type \"${componentFilter.type}\"`,\n@@ -1486,11 +1520,9 @@ export function attach(\n \/\/ because they are stored in localStorage within the context of the extension.\n \/\/ Instead it relies on the extension to pass filters through.\n if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS != null) {\n- const componentFiltersWithoutLocationBasedOnes =\n- filterOutLocationComponentFilters(\n- window.REACT_DEVTOOLS_COMPONENT_FILTERS,\n- );\n- applyComponentFilters(componentFiltersWithoutLocationBasedOnes);\n+ const restoredComponentFilters: Array =\n+ persistableComponentFilters(window.REACT_DEVTOOLS_COMPONENT_FILTERS__);\n+ applyComponentFilters(restoredComponentFilters, null);\n } else {\n \/\/ Unfortunately this feature is not expected to work for React Native for now.\n \/\/ It would be annoying for us to spam YellowBox warnings with unactionable stuff,\n@@ -1498,7 +1530,7 @@ export function attach(\n \/\/console.warn('⚛ DevTools: Could not locate saved component filters');\n \n \/\/ Fallback to assuming the default filters in this case.\n- applyComponentFilters(getDefaultComponentFilters());\n+ applyComponentFilters(getDefaultComponentFilters(), null);\n }\n \n \/\/ If necessary, we can revisit optimizing this operation.\n@@ -1517,6 +1549,22 @@ export function attach(\n const previousForcedErrors =\n forceErrorForFibers.size > 0 ? new Map(forceErrorForFibers) : null;\n \n+ \/\/ The ID will be based on the old tree. We need to find the Fiber based on\n+ \/\/ that ID before we unmount everything. We set the activity slice ID once\n+ \/\/ we mount it again.\n+ let nextFocusedActivity: null | Fiber = null;\n+ let focusedActivityFilter: null | ActivitySliceFilter = null;\n+ for (let i = 0; i < componentFilters.length; i++) {\n+ const filter = componentFilters[i];\n+ if (filter.type === ComponentFilterActivitySlice && filter.isEnabled) {\n+ focusedActivityFilter = filter;\n+ const instance = idToDevToolsInstanceMap.get(filter.activityID);\n+ if (instance !== undefined && instance.kind === FIBER_INSTANCE) {\n+ nextFocusedActivity = instance.data;\n+ }\n+ }\n+ }\n+\n \/\/ Recursively unmount all roots.\n hook.getFiberRoots(rendererID).forEach(root => {\n const rootInstance = rootToFiberInstanceMap.get(root);\n@@ -1532,7 +1580,17 @@ export function attach(\n currentRoot = (null: any);\n });\n \n- applyComponentFilters(componentFilters);\n+ if (\n+ nextFocusedActivity !== focusedActivity &&\n+ (focusedActivityFilter === null ||\n+ focusedActivityFilter.rendererID === rendererID)\n+ ) {\n+ \/\/ When we find the applied instance during mount we will send the actual ID.\n+ \/\/ Otherwise 0 will indicate that we unfocused the activity slice.\n+ pushOperation(TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE);\n+ pushOperation(0);\n+ }\n+ applyComponentFilters(componentFilters, nextFocusedActivity);\n \n \/\/ Reset pseudo counters so that new path selections will be persisted.\n rootDisplayNameCounter.clear();\n@@ -1592,6 +1650,13 @@ export function attach(\n currentRoot = (null: any);\n });\n \n+ \/\/ We need to write back the new ID for the focused Fiber.\n+ \/\/ Otherwise subsequent filter applications will try to focus based on the old ID.\n+ \/\/ This is also relevant to filter across renderers.\n+ if (focusedActivityFilter !== null && focusedActivityID !== null) {\n+ focusedActivityFilter.activityID = focusedActivityID;\n+ }\n+\n flushPendingEvents();\n \n needsToFlushComponentLogs = false;\n@@ -1621,6 +1686,10 @@ export function attach(\n data: ReactComponentInfo,\n secondaryEnv: null | string,\n ): boolean {\n+ if (!isInFocusedActivity) {\n+ return true;\n+ }\n+\n \/\/ For purposes of filtering Server Components are always Function Components.\n \/\/ Environment will be used to filter Server vs Client.\n \/\/ Technically they can be forwardRef and memo too but those filters will go away\n@@ -1656,6 +1725,11 @@ export function attach(\n function shouldFilterFiber(fiber: Fiber): boolean {\n const {tag, type, key} = fiber;\n \n+ \/\/ It is never valid to filter the root element.\n+ if (tag !== HostRoot && !isInFocusedActivity) {\n+ return true;\n+ }\n+\n switch (tag) {\n case DehydratedSuspenseComponent:\n \/\/ TODO: ideally we would show dehydrated Suspense immediately.\n@@ -4020,11 +4094,23 @@ export function attach(\n fiber: Fiber,\n traceNearestHostComponentUpdate: boolean,\n ): void {\n+ const isFocusedActivityEntry =\n+ focusedActivity !== null &&\n+ (fiber === focusedActivity || fiber.alternate === focusedActivity);\n+ if (isFocusedActivityEntry) {\n+ isInFocusedActivity = true;\n+ }\n+\n const shouldIncludeInTree = !shouldFilterFiber(fiber);\n let newInstance = null;\n let newSuspenseNode = null;\n if (shouldIncludeInTree) {\n newInstance = recordMount(fiber, reconcilingParent);\n+ if (isFocusedActivityEntry) {\n+ focusedActivityID = newInstance.id;\n+ pushOperation(TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE);\n+ pushOperation(newInstance.id);\n+ }\n if (fiber.tag === SuspenseComponent || fiber.tag === HostRoot) {\n newSuspenseNode = createSuspenseNode(newInstance);\n \/\/ Measure this Suspense node. In general we shouldn't do this until we have\n@@ -4140,6 +4226,7 @@ export function attach(\n const stashedSuspenseParent = reconcilingParentSuspenseNode;\n const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;\n const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;\n+ const stashedIsInActivitySlice = isInFocusedActivity;\n if (newInstance !== null) {\n \/\/ Push a new DevTools instance parent while reconciling this subtree.\n reconcilingParent = newInstance;\n@@ -4153,6 +4240,17 @@ export function attach(\n remainingReconcilingChildrenSuspenseNodes = null;\n shouldPopSuspenseNode = true;\n }\n+ if (\n+ !isFocusedActivityEntry &&\n+ focusedActivity !== null &&\n+ fiber.tag === ActivityComponent\n+ ) {\n+ \/\/ We're not filtering how Activity within the focused activity.\n+ \/\/ We cut of the bottom in the Frontend if we want to just show the\n+ \/\/ Activity slice instead of all Activity descendants.\n+ \/\/ The filtering in the backend only happens because filtering out\n+ \/\/ everything above the focused Activity is hard to implement in the frontend.\n+ }\n try {\n if (traceUpdatesEnabled) {\n if (traceNearestHostComponentUpdate) {\n@@ -4280,6 +4378,7 @@ export function attach(\n }\n }\n } finally {\n+ isInFocusedActivity = stashedIsInActivitySlice;\n if (newInstance !== null) {\n reconcilingParent = stashedParent;\n previouslyReconciledSibling = stashedPrevious;\n@@ -4311,6 +4410,7 @@ export function attach(\n const stashedSuspenseParent = reconcilingParentSuspenseNode;\n const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;\n const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;\n+ const stashedIsInActivitySlice = isInFocusedActivity;\n const previousSuspendedBy = instance.suspendedBy;\n \/\/ Push a new DevTools instance parent while reconciling this subtree.\n reconcilingParent = instance;\n@@ -4329,6 +4429,19 @@ export function attach(\n shouldPopSuspenseNode = true;\n }\n \n+ if (focusedActivity !== null) {\n+ if (instance.id === focusedActivityID) {\n+ isInFocusedActivity = true;\n+ } else if (\n+ instance.kind === FIBER_INSTANCE &&\n+ instance.data !== null &&\n+ instance.data.tag === ActivityComponent\n+ ) {\n+ \/\/ Filtering nested Activity components inside the focused activity\n+ \/\/ is done in the frontend.\n+ }\n+ }\n+\n try {\n \/\/ Unmount the remaining set.\n if (\n@@ -4379,6 +4492,7 @@ export function attach(\n previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;\n remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;\n }\n+ isInFocusedActivity = stashedIsInActivitySlice;\n }\n if (instance.kind === FIBER_INSTANCE) {\n recordUnmount(instance);\n@@ -5059,6 +5173,7 @@ export function attach(\n const stashedSuspenseParent = reconcilingParentSuspenseNode;\n const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;\n const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;\n+ const stashedIsInActivitySlice = isInFocusedActivity;\n let updateFlags = NoUpdate;\n let shouldMeasureSuspenseNode = false;\n let shouldPopSuspenseNode = false;\n@@ -5098,6 +5213,15 @@ export function attach(\n shouldMeasureSuspenseNode = true;\n shouldPopSuspenseNode = true;\n }\n+\n+ if (focusedActivity !== null) {\n+ if (fiberInstance.id === focusedActivityID) {\n+ isInFocusedActivity = true;\n+ } else if (nextFiber.tag === ActivityComponent) {\n+ \/\/ Filtering nested Activity components inside the focused activity\n+ \/\/ is done in the frontend.\n+ }\n+ }\n }\n try {\n trackDebugInfoFromLazyType(nextFiber);\n@@ -5522,6 +5646,7 @@ export function attach(\n previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;\n remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;\n }\n+ isInFocusedActivity = stashedIsInActivitySlice;\n }\n }\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/constants.js b\/packages\/react-devtools-shared\/src\/constants.js\nindex c398e130d8..c965282e60 100644\n--- a\/packages\/react-devtools-shared\/src\/constants.js\n+++ b\/packages\/react-devtools-shared\/src\/constants.js\n@@ -29,6 +29,7 @@ export const SUSPENSE_TREE_OPERATION_REMOVE = 9;\n export const SUSPENSE_TREE_OPERATION_REORDER_CHILDREN = 10;\n export const SUSPENSE_TREE_OPERATION_RESIZE = 11;\n export const SUSPENSE_TREE_OPERATION_SUSPENDERS = 12;\n+export const TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE = 13;\n \n export const PROFILING_FLAG_BASIC_SUPPORT \/. \/ = 0b001;\n export const PROFILING_FLAG_TIMELINE_SUPPORT \/* *\/ = 0b010;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/store.js b\/packages\/react-devtools-shared\/src\/devtools\/store.js\nindex 5d84d12d1b..420817198b 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/store.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/store.js\n@@ -21,13 +21,18 @@ import {\n TREE_OPERATION_SET_SUBTREE_MODE,\n TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,\n TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+ TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,\n SUSPENSE_TREE_OPERATION_ADD,\n SUSPENSE_TREE_OPERATION_REMOVE,\n SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,\n SUSPENSE_TREE_OPERATION_RESIZE,\n SUSPENSE_TREE_OPERATION_SUSPENDERS,\n } from '..\/constants';\n-import {ElementTypeRoot} from '..\/frontend\/types';\n+import {\n+ ElementTypeRoot,\n+ ElementTypeActivity,\n+ ComponentFilterActivitySlice,\n+} from '..\/frontend\/types';\n import {\n getSavedComponentFilters,\n setSavedComponentFilters,\n@@ -144,7 +149,13 @@ export default class Store extends EventEmitter<{\n hookSettings: [$ReadOnly],\n hostInstanceSelected: [Element['id']],\n settingsUpdated: [$ReadOnly],\n- mutated: [[Array, Map]],\n+ mutated: [\n+ [\n+ Array,\n+ Map,\n+ Element['id'] | null,\n+ ],\n+ ],\n recordChangeDescriptions: [],\n roots: [],\n rootSupportsBasicProfiling: [],\n@@ -1156,7 +1167,7 @@ export default class Store extends EventEmitter<{\n \/\/ The Tree context's search reducer expects an explicit list of ids for nodes that were added or removed.\n \/\/ In this case, we can pass it empty arrays since nodes in a collapsed tree are still there (just hidden).\n \/\/ Updating the selected search index later may require auto-expanding a collapsed subtree though.\n- this.emit('mutated', [[], new Map()]);\n+ this.emit('mutated', [[], new Map(), null]);\n }\n }\n }\n@@ -1225,10 +1236,11 @@ export default class Store extends EventEmitter<{\n \n const addedElementIDs: Array = [];\n \/\/ This is a mapping of removed ID -> parent ID:\n+ \/\/ We'll use the parent ID to adjust selection if it gets deleted.\n const removedElementIDs: Map = new Map();\n const removedSuspenseIDs: Map =\n new Map();\n- \/\/ We'll use the parent ID to adjust selection if it gets deleted.\n+ let nextActivitySliceID = null;\n \n let i = 2;\n \n@@ -1962,6 +1974,11 @@ export default class Store extends EventEmitter<{\n \n break;\n }\n+ case TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE: {\n+ i++;\n+ nextActivitySliceID = operations[i++];\n+ break;\n+ }\n default:\n this._throwAndEmitError(\n new UnsupportedBridgeOperationError(\n@@ -2060,9 +2077,80 @@ export default class Store extends EventEmitter<{\n console.groupEnd();\n }\n \n- this.emit('mutated', [addedElementIDs, removedElementIDs]);\n+ if (nextActivitySliceID !== null && nextActivitySliceID !== 0) {\n+ let didCollapse = false;\n+ \/\/ The backend filtered everything above the Activity slice.\n+ \/\/ We need to hide everything below the Activity slice by collapsing\n+ \/\/ the Activities that are descendants of the next Activity slice.\n+ const nextActivitySlice = this._idToElement.get(nextActivitySliceID);\n+ if (nextActivitySlice === undefined) {\n+ throw new Error('Next Activity slice not found in Store.');\n+ }\n+\n+ for (let j = 0; j < nextActivitySlice.children.length; j++) {\n+ didCollapse ||= this._collapseActivitiesRecursively(\n+ nextActivitySlice.children[j],\n+ );\n+ }\n+\n+ if (didCollapse) {\n+ let weightAcrossRoots = 0;\n+ this._roots.forEach(rootID => {\n+ const {weight} = ((this.getElementByID(rootID): any): Element);\n+ weightAcrossRoots += weight;\n+ });\n+ this._weightAcrossRoots = weightAcrossRoots;\n+ }\n+ }\n+\n+ for (let j = 0; j < this._componentFilters.length; j++) {\n+ const filter = this._componentFilters[j];\n+ \/\/ If we're focusing an Activity, IDs may have changed.\n+ if (filter.type === ComponentFilterActivitySlice) {\n+ if (nextActivitySliceID === null || nextActivitySliceID === 0) {\n+ filter.isValid = false;\n+ } else {\n+ filter.activityID = nextActivitySliceID;\n+ }\n+ }\n+ }\n+\n+ this.emit('mutated', [\n+ addedElementIDs,\n+ removedElementIDs,\n+ nextActivitySliceID,\n+ ]);\n };\n \n+ _collapseActivitiesRecursively(elementID: number): boolean {\n+ let didMutate = false;\n+ const element = this._idToElement.get(elementID);\n+ if (element === undefined) {\n+ throw new Error('Element not found in Store.');\n+ }\n+\n+ if (element.type === ElementTypeActivity) {\n+ if (!element.isCollapsed) {\n+ element.isCollapsed = true;\n+\n+ const weightDelta = 1 - element.weight;\n+\n+ let parentElement = this._idToElement.get(element.parentID);\n+ while (parentElement !== undefined) {\n+ parentElement.weight += weightDelta;\n+ parentElement = this._idToElement.get(parentElement.parentID);\n+ }\n+ return true;\n+ }\n+ return false;\n+ }\n+\n+ for (let i = 0; i < element.children.length; i++) {\n+ didMutate ||= this._collapseActivitiesRecursively(element.children[i]);\n+ }\n+ return didMutate;\n+ }\n+\n \/\/ Certain backends save filters on a per-domain basis.\n \/\/ In order to prevent filter preferences and applied filters from being out of sync,\n \/\/ this message enables the backend to override the frontend's current (\"saved\") filters.\n@@ -2228,7 +2316,7 @@ export default class Store extends EventEmitter<{\n \n if (previousStatus !== status) {\n \/\/ Propagate to subscribers, although tree state has not changed\n- this.emit('mutated', [[], new Map()]);\n+ this.emit('mutated', [[], new Map(), null]);\n }\n }\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ActivitySlice.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ActivitySlice.css\nnew file mode 100644\nindex 0000000000..52ecc865e5\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ActivitySlice.css\n@@ -0,0 +1,28 @@\n+.ActivitySlice {\n+ max-width: 100%;\n+ overflow-x: auto;\n+ flex: 1;\n+ display: flex;\n+ align-items: center;\n+ position: relative;\n+}\n+\n+.ActivitySliceButton {\n+ color: var(--color-button-active);\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\n+\n+.Bar {\n+ display: flex;\n+ flex: 1 1 auto;\n+ overflow-x: auto;\n+}\n+\n+.VRule {\n+ flex: 0 0 auto;\n+ height: 20px;\n+ width: 1px;\n+ background-color: var(--color-border);\n+ margin: 0 0.5rem;\n+}\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ActivitySlice.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ActivitySlice.js\nnew file mode 100644\nindex 0000000000..707a5108c6\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/ActivitySlice.js\n@@ -0,0 +1,52 @@\n+\/**\n+ * Copyright (c) Meta Platforms, Inc. and affiliates.\n+ \n+ This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ \n+ @flow\n+ \/\n+import as React from 'react';\n+import {startTransition, useContext} from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import {StoreContext} from '..\/context';\n+import {useChangeActivitySliceAction} from '..\/SuspenseTab\/ActivityList';\n+import {TreeDispatcherContext, TreeStateContext} from '.\/TreeContext';\n+import styles from '.\/ActivitySlice.css';\n+\n+export default function ActivitySlice(): React.Node {\n+ const dispatch = useContext(TreeDispatcherContext);\n+ const {activityID} = useContext(TreeStateContext);\n+ const store = useContext(StoreContext);\n+\n+ const activity =\n+ activityID === null ? null : store.getElementByID(activityID);\n+ const name = activity ? activity.nameProp : null;\n+\n+ const changeActivitySliceAction = useChangeActivitySliceAction();\n+\n+ return (\n+
\n+
\n+ \n+ \"{name || 'Unknown'}\"\n+ <\/Button>\n+ <\/div>\n+
\n+ \n+ \n+ <\/Button>\n+ <\/div>\n+ );\n+}\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Element.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Element.js\nindex 24ce695cfc..43e611fd1b 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Element.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Element.js\n@@ -8,8 +8,9 @@\n \/\n \n import as React from 'react';\n-import {Fragment, useContext, useMemo, useState} from 'react';\n+import {Fragment, startTransition, useContext, useMemo, useState} from 'react';\n import Store from 'react-devtools-shared\/src\/devtools\/store';\n+import {ElementTypeActivity} from 'react-devtools-shared\/src\/frontend\/types';\n import ButtonIcon from '..\/ButtonIcon';\n import {TreeDispatcherContext, TreeStateContext} from '.\/TreeContext';\n import {StoreContext} from '..\/context';\n@@ -25,6 +26,7 @@ import styles from '.\/Element.css';\n import Icon from '..\/Icon';\n import {useChangeOwnerAction} from '.\/OwnersListContext';\n import Tooltip from '.\/reach-ui\/tooltip';\n+import {useChangeActivitySliceAction} from '..\/SuspenseTab\/ActivityList';\n \n type Props = {\n data: ItemData,\n@@ -65,6 +67,7 @@ export default function Element({data, index, style}: Props): React.Node {\n }>(errorsAndWarningsSubscription);\n \n const changeOwnerAction = useChangeOwnerAction();\n+ const changeActivitySliceAction = useChangeActivitySliceAction();\n \n \/\/ Handle elements that are removed from the tree while an async render is in progress.\n if (element == null) {\n@@ -75,9 +78,13 @@ export default function Element({data, index, style}: Props): React.Node {\n }\n \n const handleDoubleClick = () => {\n- if (id !== null) {\n- changeOwnerAction(id);\n- }\n+ startTransition(() => {\n+ if (element.type === ElementTypeActivity) {\n+ changeActivitySliceAction(element.id);\n+ } else {\n+ changeOwnerAction(element.id);\n+ }\n+ });\n };\n \n \/\/ $FlowFixMe[missing-local-annot]\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tree.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tree.js\nindex 8d763536e3..5623d507a3 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tree.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tree.js\n@@ -11,6 +11,7 @@ import * as React from 'react';\n import {\n Fragment,\n Suspense,\n+ startTransition,\n useCallback,\n useContext,\n useEffect,\n@@ -37,7 +38,10 @@ import ButtonIcon from '..\/ButtonIcon';\n import Button from '..\/Button';\n import {logEvent} from 'react-devtools-shared\/src\/Logger';\n import {useExtensionComponentsPanelVisibility} from 'react-devtools-shared\/src\/frontend\/hooks\/useExtensionComponentsPanelVisibility';\n+import {ElementTypeActivity} from 'react-devtools-shared\/src\/frontend\/types';\n import {useChangeOwnerAction} from '.\/OwnersListContext';\n+import {useChangeActivitySliceAction} from '..\/SuspenseTab\/ActivityList';\n+import ActivitySlice from '.\/ActivitySlice';\n \n \/\/ Indent for each node at level N, compared to node at level N - 1.\n const INDENTATION_SIZE = 10;\n@@ -72,6 +76,7 @@ function calculateInitialScrollOffset(\n export default function Tree(): React.Node {\n const dispatch = useContext(TreeDispatcherContext);\n const {\n+ activityID,\n numElements,\n ownerID,\n searchIndex,\n@@ -302,6 +307,7 @@ export default function Tree(): React.Node {\n const handleBlur = useCallback(() => setTreeFocused(false), []);\n const handleFocus = useCallback(() => setTreeFocused(true), []);\n \n+ const changeActivitySliceAction = useChangeActivitySliceAction();\n const changeOwnerAction = useChangeOwnerAction();\n const handleKeyPress = useCallback(\n (event: $FlowFixMe) => {\n@@ -309,7 +315,17 @@ export default function Tree(): React.Node {\n case 'Enter':\n case ' ':\n if (inspectedElementID !== null) {\n- changeOwnerAction(inspectedElementID);\n+ const inspectedElement = store.getElementByID(inspectedElementID);\n+ startTransition(() => {\n+ if (\n+ inspectedElement !== null &&\n+ inspectedElement.type === ElementTypeActivity\n+ ) {\n+ changeActivitySliceAction(inspectedElementID);\n+ } else {\n+ changeOwnerAction(inspectedElementID);\n+ }\n+ });\n }\n break;\n default:\n@@ -444,7 +460,13 @@ export default function Tree(): React.Node {\n <\/Fragment>\n )}\n }>\n- {ownerID !== null ? : }\n+ {ownerID !== null ? (\n+ \n+ ) : activityID !== null ? (\n+ \n+ ) : (\n+ \n+ )}\n <\/Suspense>\n {ownerID === null && (errors > 0 || warnings > 0) && (\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext.js\nindex 72556543f4..4ad28c3893 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext.js\n@@ -57,6 +57,9 @@ export type StateContext = {\n ownerID: number | null,\n ownerFlatTree: Array | null,\n \n+ \/\/ Activity slice\n+ activityID: Element['id'] | null,\n+\n \/\/ Inspection element panel\n inspectedElementID: number | null,\n inspectedElementIndex: number | null,\n@@ -70,7 +73,7 @@ type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {\n };\n type ACTION_HANDLE_STORE_MUTATION = {\n type: 'HANDLE_STORE_MUTATION',\n- payload: [Array, Map],\n+ payload: [Array, Map, null | Element['id']],\n };\n type ACTION_RESET_OWNER_STACK = {\n type: 'RESET_OWNER_STACK',\n@@ -167,6 +170,9 @@ type State = {\n ownerID: number | null,\n ownerFlatTree: Array | null,\n \n+ \/\/ Activity slice\n+ activityID: Element['id'] | null,\n+\n \/\/ Inspection element panel\n inspectedElementID: number | null,\n inspectedElementIndex: number | null,\n@@ -794,6 +800,33 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n };\n }\n \n+function reduceActivityState(\n+ store: Store,\n+ state: State,\n+ action: Action,\n+): State {\n+ switch (action.type) {\n+ case 'HANDLE_STORE_MUTATION':\n+ let {activityID} = state;\n+ const [, , activitySliceIDChange] = action.payload;\n+ if (activitySliceIDChange === 0 && activityID !== null) {\n+ activityID = null;\n+ } else if (\n+ activitySliceIDChange !== null &&\n+ activitySliceIDChange !== activityID\n+ ) {\n+ activityID = activitySliceIDChange;\n+ }\n+ if (activityID !== state.activityID) {\n+ return {\n+ ...state,\n+ activityID,\n+ };\n+ }\n+ }\n+ return state;\n+}\n+\n type Props = {\n children: React$Node,\n \n@@ -828,6 +861,9 @@ function getInitialState({\n ownerID: defaultOwnerID == null ? null : defaultOwnerID,\n ownerFlatTree: null,\n \n+ \/\/ Activity slice\n+ activityID: null,\n+\n \/\/ Inspection element panel\n inspectedElementID:\n defaultInspectedElementID != null\n@@ -882,6 +918,7 @@ function TreeContextController({\n state = reduceTreeState(store, state, action);\n state = reduceSearchState(store, state, action);\n state = reduceOwnersState(store, state, action);\n+ state = reduceActivityState(store, state, action);\n \n \/\/ TODO(hoxyq): review\n \/\/ If the selected ID is in a collapsed subtree, reset the selected index to null.\n@@ -950,13 +987,14 @@ function TreeContextController({\n \n \/\/ Mutations to the underlying tree may impact this context (e.g. search results, selection state).\n useEffect(() => {\n- const handleStoreMutated = ([addedElementIDs, removedElementIDs]: [\n- Array,\n- Map,\n- ]) => {\n+ const handleStoreMutated = ([\n+ addedElementIDs,\n+ removedElementIDs,\n+ activitySliceIDChange,\n+ ]: [Array, Map, null | Element['id']]) => {\n dispatch({\n type: 'HANDLE_STORE_MUTATION',\n- payload: [addedElementIDs, removedElementIDs],\n+ payload: [addedElementIDs, removedElementIDs, activitySliceIDChange],\n });\n };\n \n@@ -967,7 +1005,7 @@ function TreeContextController({\n \/\/ It would only impact the search state, which is unlikely to exist yet at this point.\n dispatch({\n type: 'HANDLE_STORE_MUTATION',\n- payload: [[], new Map()],\n+ payload: [[], new Map(), null],\n });\n }\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nindex d2226a183a..41c5c7a2c0 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -16,6 +16,7 @@ import {\n TREE_OPERATION_SET_SUBTREE_MODE,\n TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,\n+ TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,\n SUSPENSE_TREE_OPERATION_ADD,\n SUSPENSE_TREE_OPERATION_REMOVE,\n SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,\n@@ -475,6 +476,20 @@ function updateTree(\n break;\n }\n \n+ case TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE: {\n+ i++;\n+ const activitySliceIDChange = operations[i++];\n+ if (DEBUG) {\n+ debug(\n+ 'Applied activity slice change',\n+ activitySliceIDChange === 0\n+ ? 'Reset applied activity slice'\n+ : `Changed to activity slice ID ${activitySliceIDChange}`,\n+ );\n+ }\n+ break;\n+ }\n+\n default:\n throw Error(`Unsupported Bridge operation \"${operation}\"`);\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/ComponentsSettings.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/ComponentsSettings.js\nindex 33e98835bb..9b73e94942 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/ComponentsSettings.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/ComponentsSettings.js\n@@ -29,6 +29,7 @@ import {\n ComponentFilterHOC,\n ComponentFilterLocation,\n ComponentFilterEnvironmentName,\n+ ComponentFilterActivitySlice,\n ElementTypeClass,\n ElementTypeContext,\n ElementTypeFunction,\n@@ -171,6 +172,8 @@ export default function ComponentsSettings({\n isValid: true,\n value: 'Client',\n };\n+ } else if (type === ComponentFilterActivitySlice) {\n+ \/\/ TODO: Allow changing type\n }\n }\n return cloned;\n@@ -364,34 +367,39 @@ export default function ComponentsSettings({\n {componentFilters.map((componentFilter, index) => (\n \n \n- \n- toggleFilterIsEnabled(componentFilter, isEnabled)\n- }\n- title={\n- componentFilter.isValid === false\n- ? 'Filter invalid'\n- : componentFilter.isEnabled\n- ? 'Filter enabled'\n- : 'Filter disabled'\n- }>\n- \n- <\/Toggle>\n+ isChecked={componentFilter.isEnabled}\n+ onChange={isEnabled =>\n+ toggleFilterIsEnabled(componentFilter, isEnabled)\n+ }\n+ title={\n+ componentFilter.isValid === false\n+ ? 'Filter invalid'\n+ : componentFilter.isEnabled\n+ ? 'Filter enabled'\n+ : 'Filter disabled'\n+ }>\n+ \n+ <\/Toggle>\n+ )}\n <\/td>\n \n \n changeFilterType(\n@@ -413,6 +421,11 @@ export default function ComponentsSettings({\n environment\n <\/option>\n )}\n+ {componentFilter.type === ComponentFilterActivitySlice && (\n+

{title}<\/h1>\n+ {content}<\/p>\n+ <\/article>\n+ );\n+}\n+\n+function InnerSegment({children}: {children: React.Node}): React.Node {\n+ return (\n+ <>\n+

{title}<\/h1>\n+
{content}<\/p>\n+ <\/article>\n+ );\n+}\n+\n+function InnerSegment({children}: {children: React.Node}): React.Node {\n+ return (\n+ <>\n+

dillon1000/react

Files changed