Add affordance for selected activity slice in Components tab

Author: eps1lon

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

@@ -86,6 +86,7 @@ import {
   TREE_OPERATION_SET_SUBTREE_MODE,
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
   SUSPENSE_TREE_OPERATION_ADD,
   SUSPENSE_TREE_OPERATION_REMOVE,
   SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,
@@ -1566,6 +1567,12 @@ export function attach(
       currentRoot = (null: any);
     });
 
+    if (nextActivitySlice !== activitySlice) {
+      // Set the applied slice to 0 for now.
+      // When we find the applied instance during mount we will send the actual ID.
+      pushOperation(TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE);
+      pushOperation(0);
+    }
     applyComponentFilters(componentFilters, nextActivitySlice);
 
     // Reset pseudo counters so that new path selections will be persisted.
@@ -4018,6 +4025,8 @@ export function attach(
       newInstance = recordMount(fiber, reconcilingParent);
       if (isActivitySliceEntry) {
         activitySliceID = newInstance.id;
+        pushOperation(TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE);
+        pushOperation(newInstance.id);
       }
       if (fiber.tag === SuspenseComponent || fiber.tag === HostRoot) {
         newSuspenseNode = createSuspenseNode(newInstance);

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

@@ -29,6 +29,7 @@ export const SUSPENSE_TREE_OPERATION_REMOVE = 9;
 export const SUSPENSE_TREE_OPERATION_REORDER_CHILDREN = 10;
 export const SUSPENSE_TREE_OPERATION_RESIZE = 11;
 export const SUSPENSE_TREE_OPERATION_SUSPENDERS = 12;
+export const TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE = 13;
 
 export const PROFILING_FLAG_BASIC_SUPPORT /*.             */ = 0b001;
 export const PROFILING_FLAG_TIMELINE_SUPPORT /*           */ = 0b010;

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

@@ -21,6 +21,7 @@ import {
   TREE_OPERATION_SET_SUBTREE_MODE,
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
   SUSPENSE_TREE_OPERATION_ADD,
   SUSPENSE_TREE_OPERATION_REMOVE,
   SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,
@@ -144,7 +145,13 @@ export default class Store extends EventEmitter<{
   hookSettings: [$ReadOnly<DevToolsHookSettings>],
   hostInstanceSelected: [Element['id']],
   settingsUpdated: [$ReadOnly<DevToolsHookSettings>],
-  mutated: [[Array<Element['id']>, Map<Element['id'], Element['id']>]],
+  mutated: [
+    [
+      Array<Element['id']>,
+      Map<Element['id'], Element['id']>,
+      Element['id'] | null,
+    ],
+  ],
   recordChangeDescriptions: [],
   roots: [],
   rootSupportsBasicProfiling: [],
@@ -1124,7 +1131,7 @@ export default class Store extends EventEmitter<{
         // The Tree context's search reducer expects an explicit list of ids for nodes that were added or removed.
         // In this  case, we can pass it empty arrays since nodes in a collapsed tree are still there (just hidden).
         // Updating the selected search index later may require auto-expanding a collapsed subtree though.
-        this.emit('mutated', [[], new Map()]);
+        this.emit('mutated', [[], new Map(), null]);
       }
     }
   }
@@ -1193,10 +1200,11 @@ export default class Store extends EventEmitter<{
 
     const addedElementIDs: Array<number> = [];
     // This is a mapping of removed ID -> parent ID:
+    // We'll use the parent ID to adjust selection if it gets deleted.
     const removedElementIDs: Map<number, number> = new Map();
     const removedSuspenseIDs: Map<SuspenseNode['id'], SuspenseNode['id']> =
       new Map();
-    // We'll use the parent ID to adjust selection if it gets deleted.
+    let nextActivitySliceID = null;
 
     let i = 2;
 
@@ -1927,6 +1935,11 @@ export default class Store extends EventEmitter<{
 
           break;
         }
+        case TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE: {
+          i++;
+          nextActivitySliceID = operations[i++];
+          break;
+        }
         default:
           this._throwAndEmitError(
             new UnsupportedBridgeOperationError(
@@ -2025,7 +2038,11 @@ export default class Store extends EventEmitter<{
       console.groupEnd();
     }
 
-    this.emit('mutated', [addedElementIDs, removedElementIDs]);
+    this.emit('mutated', [
+      addedElementIDs,
+      removedElementIDs,
+      nextActivitySliceID,
+    ]);
   };
 
   // Certain backends save filters on a per-domain basis.
@@ -2193,7 +2210,7 @@ export default class Store extends EventEmitter<{
 
     if (previousStatus !== status) {
       // Propagate to subscribers, although tree state has not changed
-      this.emit('mutated', [[], new Map()]);
+      this.emit('mutated', [[], new Map(), null]);
     }
   }
 

packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.css

@@ -0,0 +1,28 @@
+.ActivitySlice {
+  max-width: 100%;
+  overflow-x: auto;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.ActivitySliceButton {
+  color: var(--color-button-active);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.Bar {
+  display: flex;
+  flex: 1 1 auto;
+  overflow-x: auto;
+}
+
+.VRule {
+  flex: 0 0 auto;
+  height: 20px;
+  width: 1px;
+  background-color: var(--color-border);
+  margin: 0 0.5rem;
+}

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

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import * as React from 'react';
+import {startTransition, useContext} from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import {StoreContext} from '../context';
+import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import styles from './ActivitySlice.css';
+
+export default function ActivitySlice(): React.Node {
+  const dispatch = useContext(TreeDispatcherContext);
+  const {activityID} = useContext(TreeStateContext);
+  const store = useContext(StoreContext);
+
+  const activity =
+    activityID === null ? null : store.getElementByID(activityID);
+  const name = activity ? activity.nameProp : null;
+
+  const changeActivitySliceAction = useChangeActivitySliceAction();
+
+  return (
+    <div className={styles.ActivitySlice}>
+      <div className={styles.Bar}>
+        <Button
+          className={styles.ActivitySliceButton}
+          onClick={dispatch.bind(null, {
+            type: 'SELECT_ELEMENT_BY_ID',
+            payload: activityID,
+          })}>
+          "{name || 'Unknown'}"
+        </Button>
+      </div>
+      <div className={styles.VRule} />
+      <Button
+        onClick={startTransition.bind(
+          null,
+          changeActivitySliceAction.bind(null, null),
+        )}
+        title="Back to tree view">
+        <ButtonIcon type="close" />
+      </Button>
+    </div>
+  );
+}

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

@@ -41,6 +41,7 @@ import {useExtensionComponentsPanelVisibility} from 'react-devtools-shared/src/f
 import {ElementTypeActivity} from 'react-devtools-shared/src/frontend/types';
 import {useChangeOwnerAction} from './OwnersListContext';
 import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
+import ActivitySlice from './ActivitySlice';
 
 // Indent for each node at level N, compared to node at level N - 1.
 const INDENTATION_SIZE = 10;
@@ -75,6 +76,7 @@ function calculateInitialScrollOffset(
 export default function Tree(): React.Node {
   const dispatch = useContext(TreeDispatcherContext);
   const {
+    activityID,
     numElements,
     ownerID,
     searchIndex,
@@ -458,7 +460,13 @@ export default function Tree(): React.Node {
             </Fragment>
           )}
           <Suspense fallback={<Loading />}>
-            {ownerID !== null ? <OwnersStack /> : <ComponentSearchInput />}
+            {ownerID !== null ? (
+              <OwnersStack />
+            ) : activityID !== null ? (
+              <ActivitySlice />
+            ) : (
+              <ComponentSearchInput />
+            )}
           </Suspense>
           {ownerID === null && (errors > 0 || warnings > 0) && (
             <React.Fragment>

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

@@ -57,6 +57,9 @@ export type StateContext = {
   ownerID: number | null,
   ownerFlatTree: Array<Element> | null,
 
+  // Activity slice
+  activityID: Element['id'] | null,
+
   // Inspection element panel
   inspectedElementID: number | null,
   inspectedElementIndex: number | null,
@@ -70,7 +73,7 @@ type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {
 };
 type ACTION_HANDLE_STORE_MUTATION = {
   type: 'HANDLE_STORE_MUTATION',
-  payload: [Array<number>, Map<number, number>],
+  payload: [Array<number>, Map<number, number>, null | Element['id']],
 };
 type ACTION_RESET_OWNER_STACK = {
   type: 'RESET_OWNER_STACK',
@@ -167,6 +170,9 @@ type State = {
   ownerID: number | null,
   ownerFlatTree: Array<Element> | null,
 
+  // Activity slice
+  activityID: Element['id'] | null,
+
   // Inspection element panel
   inspectedElementID: number | null,
   inspectedElementIndex: number | null,
@@ -794,6 +800,33 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   };
 }
 
+function reduceActivityState(
+  store: Store,
+  state: State,
+  action: Action,
+): State {
+  switch (action.type) {
+    case 'HANDLE_STORE_MUTATION':
+      let {activityID} = state;
+      const [, , activitySliceIDChange] = action.payload;
+      if (activitySliceIDChange === 0 && activityID !== null) {
+        activityID = null;
+      } else if (
+        activitySliceIDChange !== null &&
+        activitySliceIDChange !== activityID
+      ) {
+        activityID = activitySliceIDChange;
+      }
+      if (activityID !== state.activityID) {
+        return {
+          ...state,
+          activityID,
+        };
+      }
+  }
+  return state;
+}
+
 type Props = {
   children: React$Node,
 
@@ -828,6 +861,9 @@ function getInitialState({
     ownerID: defaultOwnerID == null ? null : defaultOwnerID,
     ownerFlatTree: null,
 
+    // Activity slice
+    activityID: null,
+
     // Inspection element panel
     inspectedElementID:
       defaultInspectedElementID != null
@@ -882,6 +918,7 @@ function TreeContextController({
             state = reduceTreeState(store, state, action);
             state = reduceSearchState(store, state, action);
             state = reduceOwnersState(store, state, action);
+            state = reduceActivityState(store, state, action);
 
             // TODO(hoxyq): review
             // If the selected ID is in a collapsed subtree, reset the selected index to null.
@@ -950,13 +987,14 @@ function TreeContextController({
 
   // Mutations to the underlying tree may impact this context (e.g. search results, selection state).
   useEffect(() => {
-    const handleStoreMutated = ([addedElementIDs, removedElementIDs]: [
-      Array<number>,
-      Map<number, number>,
-    ]) => {
+    const handleStoreMutated = ([
+      addedElementIDs,
+      removedElementIDs,
+      activitySliceIDChange,
+    ]: [Array<number>, Map<number, number>, null | Element['id']]) => {
       dispatch({
         type: 'HANDLE_STORE_MUTATION',
-        payload: [addedElementIDs, removedElementIDs],
+        payload: [addedElementIDs, removedElementIDs, activitySliceIDChange],
       });
     };
 
@@ -967,7 +1005,7 @@ function TreeContextController({
       // It would only impact the search state, which is unlikely to exist yet at this point.
       dispatch({
         type: 'HANDLE_STORE_MUTATION',
-        payload: [[], new Map()],
+        payload: [[], new Map(), null],
       });
     }
 

packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js

@@ -16,6 +16,7 @@ import {
   TREE_OPERATION_SET_SUBTREE_MODE,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
+  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
   SUSPENSE_TREE_OPERATION_ADD,
   SUSPENSE_TREE_OPERATION_REMOVE,
   SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,
@@ -474,6 +475,20 @@ function updateTree(
         break;
       }
 
+      case TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE: {
+        i++;
+        const activitySliceIDChange = operations[i++];
+        if (__DEBUG__) {
+          debug(
+            'Applied activity slice change',
+            activitySliceIDChange === 0
+              ? 'Reset applied activity slice'
+              : `Changed to activity slice ID ${activitySliceIDChange}`,
+          );
+        }
+        break;
+      }
+
       default:
         throw Error(`Unsupported Bridge operation "${operation}"`);
     }