[compiler] Optimize props spread for common cases

As part of the new inference model we updated to (correctly) treat destructuring spread as creating a new mutable object. This had the unfortunate side-effect of reducing precision on destructuring of props, though:

```js
function Component({x, ...rest}) {
  const z = rest.z;
  identity(z);
  return <Stringify x={x} z={z} />;
}
```

Memoized as the following, where we don't realize that `z` is actually frozen:

```js
function Component(t0) {
  const $ = _c(6);
  let x;
  let z;
  if ($[0] !== t0) {
    const { x: t1, ...rest } = t0;
    x = t1;
    z = rest.z;
    identity(z);
...
```

#34341 was our first thought of how to do this (thanks @poteto for exploring this idea!). But during review it became clear that it was a bit more complicated than I had thought. So this PR explores a more conservative alternative. The idea is:

* Track known sources of frozen values: component props, hook params, and hook return values.
* Find all object spreads where the rvalue is a known frozen value.
* Look at how such objects are used, and if they are only used to access properties (PropertyLoad/Destructure), pass to hooks, or pass to jsx then we can be very confident the object is not mutated. We consider any such objects to be frozen, even though technically spread creates a new object.

See new fixtures for more examples.

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts

@@ -184,28 +184,25 @@ function validateNoContextVariableAssignment(
   fn: HIRFunction,
   errors: CompilerError,
 ): void {
-  const context = new Set(fn.context.map(place => place.identifier.id));
   for (const block of fn.body.blocks.values()) {
     for (const instr of block.instructions) {
       const value = instr.value;
       switch (value.kind) {
         case 'StoreContext': {
-          if (context.has(value.lvalue.place.identifier.id)) {
-            errors.pushDiagnostic(
-              CompilerDiagnostic.create({
-                category: ErrorCategory.UseMemo,
-                reason:
-                  'useMemo() callbacks may not reassign variables declared outside of the callback',
-                description:
-                  'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function',
-                suggestions: null,
-              }).withDetails({
-                kind: 'error',
-                loc: value.lvalue.place.loc,
-                message: 'Cannot reassign variable',
-              }),
-            );
-          }
+          errors.pushDiagnostic(
+            CompilerDiagnostic.create({
+              category: ErrorCategory.UseMemo,
+              reason:
+                'useMemo() callbacks may not reassign variables declared outside of the callback',
+              description:
+                'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function',
+              suggestions: null,
+            }).withDetails({
+              kind: 'error',
+              loc: value.lvalue.place.loc,
+              message: 'Cannot reassign variable',
+            }),
+          );
           break;
         }
       }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md

@@ -1,45 +0,0 @@
-
-## Input
-
-```javascript
-// @flow
-export hook useItemLanguage(items) {
-  return useMemo(() => {
-    let language: ?string = null;
-    items.forEach(item => {
-      if (item.language != null) {
-        language = item.language;
-      }
-    });
-    return language;
-  }, [items]);
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-export function useItemLanguage(items) {
-  const $ = _c(2);
-  let language;
-  if ($[0] !== items) {
-    language = null;
-    items.forEach((item) => {
-      if (item.language != null) {
-        language = item.language;
-      }
-    });
-    $[0] = items;
-    $[1] = language;
-  } else {
-    language = $[1];
-  }
-  return language;
-}
-
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js

@@ -1,12 +0,0 @@
-// @flow
-export hook useItemLanguage(items) {
-  return useMemo(() => {
-    let language: ?string = null;
-    items.forEach(item => {
-      if (item.language != null) {
-        language = item.language;
-      }
-    });
-    return language;
-  }, [items]);
-}

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

@@ -136,6 +136,8 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-timeline-text-dim-color': '#ccc',
     '--color-timeline-react-work-border': '#eeeeee',
     '--color-timebar-background': '#f6f6f6',
+    '--color-timespan-background': '#62bc6a',
+    '--color-timespan-background-errored': '#d57066',
     '--color-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
@@ -154,14 +156,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-warning-text-color': '#ffffff',
     '--color-warning-text-color-inverted': '#fd4d69',
 
-    '--color-suspense-default': '#0088fa',
-    '--color-transition-default': '#6a51b2',
-    '--color-suspense-server': '#62bc6a',
-    '--color-transition-server': '#3f7844',
-    '--color-suspense-other': '#f3ce49',
-    '--color-transition-other': '#917b2c',
-    '--color-suspense-errored': '#d57066',
-
     // The styles below should be kept in sync with 'root.css'
     // They are repeated there because they're used by e.g. tooltips or context menus
     // which get rendered outside of the DOM subtree (where normal theme/styles are written).
@@ -296,6 +290,8 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-timeline-text-dim-color': '#555b66',
     '--color-timeline-react-work-border': '#3d424a',
     '--color-timebar-background': '#1d2129',
+    '--color-timespan-background': '#62bc6a',
+    '--color-timespan-background-errored': '#d57066',
     '--color-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
@@ -315,14 +311,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-warning-text-color': '#ffffff',
     '--color-warning-text-color-inverted': '#ee1638',
 
-    '--color-suspense-default': '#61dafb',
-    '--color-transition-default': '#6a51b2',
-    '--color-suspense-server': '#62bc6a',
-    '--color-transition-server': '#3f7844',
-    '--color-suspense-other': '#f3ce49',
-    '--color-transition-other': '#917b2c',
-    '--color-suspense-errored': '#d57066',
-
     // The styles below should be kept in sync with 'root.css'
     // They are repeated there because they're used by e.g. tooltips or context menus
     // which get rendered outside of the DOM subtree (where normal theme/styles are written).

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

@@ -34,7 +34,6 @@ import {
   shallowDiffers,
   utfDecodeStringWithRanges,
   parseElementDisplayNameFromBackend,
-  unionOfTwoArrays,
 } from '../utils';
 import {localStorageGetItem, localStorageSetItem} from '../storage';
 import {__DEBUG__} from '../constants';
@@ -52,7 +51,6 @@ import type {
   ComponentFilter,
   ElementType,
   SuspenseNode,
-  SuspenseTimelineStep,
   Rect,
 } from 'react-devtools-shared/src/frontend/types';
 import type {
@@ -897,10 +895,13 @@ export default class Store extends EventEmitter<{
    */
   getSuspendableDocumentOrderSuspense(
     uniqueSuspendersOnly: boolean,
-  ): $ReadOnlyArray<SuspenseTimelineStep> {
-    const target: Array<SuspenseTimelineStep> = [];
+  ): $ReadOnlyArray<SuspenseNode['id']> {
     const roots = this.roots;
-    let rootStep: null | SuspenseTimelineStep = null;
+    if (roots.length === 0) {
+      return [];
+    }
+
+    const list: SuspenseNode['id'][] = [];
     for (let i = 0; i < roots.length; i++) {
       const rootID = roots[i];
       const root = this.getElementByID(rootID);
@@ -911,76 +912,44 @@ export default class Store extends EventEmitter<{
 
       const suspense = this.getSuspenseByID(rootID);
       if (suspense !== null) {
-        const environments = suspense.environments;
-        const environmentName =
-          environments.length > 0
-            ? environments[environments.length - 1]
-            : null;
-        if (rootStep === null) {
-          // Arbitrarily use the first root as the root step id.
-          rootStep = {
-            id: suspense.id,
-            environment: environmentName,
-          };
-          target.push(rootStep);
-        } else if (rootStep.environment === null) {
-          // If any root has an environment name, then let's use it.
-          rootStep.environment = environmentName;
+        if (list.length === 0) {
+          // start with an arbitrary root that will allow inspection of the Screen
+          list.push(suspense.id);
+        }
+
+        const stack = [suspense];
+        while (stack.length > 0) {
+          const current = stack.pop();
+          if (current === undefined) {
+            continue;
+          }
+          // Ignore any suspense boundaries that has no visual representation as this is not
+          // part of the visible loading sequence.
+          // TODO: Consider making visible meta data and other side-effects get virtual rects.
+          const hasRects =
+            current.rects !== null &&
+            current.rects.length > 0 &&
+            current.rects.some(isNonZeroRect);
+          if (
+            hasRects &&
+            (!uniqueSuspendersOnly || current.hasUniqueSuspenders) &&
+            // Roots are already included as part of the Screen
+            current.id !== rootID
+          ) {
+            list.push(current.id);
+          }
+          // Add children in reverse order to maintain document order
+          for (let j = current.children.length - 1; j >= 0; j--) {
+            const childSuspense = this.getSuspenseByID(current.children[j]);
+            if (childSuspense !== null) {
+              stack.push(childSuspense);
+            }
+          }
         }
-        this.pushTimelineStepsInDocumentOrder(
-          suspense.children,
-          target,
-          uniqueSuspendersOnly,
-          environments,
-        );
       }
     }
 
-    return target;
-  }
-
-  pushTimelineStepsInDocumentOrder(
-    children: Array<SuspenseNode['id']>,
-    target: Array<SuspenseTimelineStep>,
-    uniqueSuspendersOnly: boolean,
-    parentEnvironments: Array<string>,
-  ): void {
-    for (let i = 0; i < children.length; i++) {
-      const child = this.getSuspenseByID(children[i]);
-      if (child === null) {
-        continue;
-      }
-      // Ignore any suspense boundaries that has no visual representation as this is not
-      // part of the visible loading sequence.
-      // TODO: Consider making visible meta data and other side-effects get virtual rects.
-      const hasRects =
-        child.rects !== null &&
-        child.rects.length > 0 &&
-        child.rects.some(isNonZeroRect);
-      const childEnvironments = child.environments;
-      // Since children are blocked on the parent, they're also blocked by the parent environments.
-      // Only if we discover a novel environment do we add that and it becomes the name we use.
-      const unionEnvironments = unionOfTwoArrays(
-        parentEnvironments,
-        childEnvironments,
-      );
-      const environmentName =
-        unionEnvironments.length > 0
-          ? unionEnvironments[unionEnvironments.length - 1]
-          : null;
-      if (hasRects && (!uniqueSuspendersOnly || child.hasUniqueSuspenders)) {
-        target.push({
-          id: child.id,
-          environment: environmentName,
-        });
-      }
-      this.pushTimelineStepsInDocumentOrder(
-        child.children,
-        target,
-        uniqueSuspendersOnly,
-        unionEnvironments,
-      );
-    }
+    return list;
   }
 
   getRendererIDForElement(id: number): number | null {
@@ -1658,7 +1627,6 @@ export default class Store extends EventEmitter<{
             rects,
             hasUniqueSuspenders: false,
             isSuspended: isSuspended,
-            environments: [],
           });
 
           hasSuspenseTreeChanged = true;
@@ -1844,10 +1812,7 @@ export default class Store extends EventEmitter<{
               envIndex++
             ) {
               const environmentNameStringID = operations[i++];
-              const environmentName = stringTable[environmentNameStringID];
-              if (environmentName != null) {
-                environmentNames.push(environmentName);
-              }
+              environmentNames.push(stringTable[environmentNameStringID]);
             }
             const suspense = this._idToSuspense.get(id);
 
@@ -1871,7 +1836,7 @@ export default class Store extends EventEmitter<{
 
             suspense.hasUniqueSuspenders = hasUniqueSuspenders;
             suspense.isSuspended = isSuspended;
-            suspense.environments = environmentNames;
+            // TODO: Recompute the environment names.
           }
 
           hasSuspenseTreeChanged = true;

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

@@ -128,13 +128,13 @@
 .TimeBarSpan, .TimeBarSpanErrored {
   position: absolute;
   border-radius: 0.125rem;
-  background-color: var(--color-suspense);
+  background-color: var(--color-timespan-background);
   width: 100%;
   height: 100%;
 }
 
 .TimeBarSpanErrored {
-  background-color: var(--color-suspense-errored);
+  background-color: var(--color-timespan-background-errored);
 }
 
 .SmallHeader {

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

@@ -22,8 +22,6 @@ import OwnerView from './OwnerView';
 import {meta} from '../../../hydration';
 import useInferredName from '../useInferredName';
 
-import {getClassNameForEnvironment} from '../SuspenseTab/SuspenseEnvironmentColors.js';
-
 import type {
   InspectedElement,
   SerializedAsyncInfo,
@@ -171,7 +169,7 @@ function SuspendedByRow({
           type={isOpen ? 'expanded' : 'collapsed'}
         />
         <span className={styles.CollapsableHeaderTitle}>
-          {skipName && shortDescription !== '' ? shortDescription : name}
+          {skipName ? shortDescription : name}
         </span>
         {skipName || shortDescription === '' ? null : (
           <>
@@ -183,12 +181,7 @@ function SuspendedByRow({
           </>
         )}
         <div className={styles.CollapsableHeaderFiller} />
-        <div
-          className={
-            styles.TimeBarContainer +
-            ' ' +
-            getClassNameForEnvironment(ioInfo.env)
-          }>
+        <div className={styles.TimeBarContainer}>
           <div
             className={
               !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored
@@ -348,7 +341,6 @@ type GroupProps = {
   inspectedElement: InspectedElement,
   store: Store,
   name: string,
-  environment: null | string,
   suspendedBy: Array<{
     index: number,
     value: SerializedAsyncInfo,
@@ -363,7 +355,6 @@ function SuspendedByGroup({
   inspectedElement,
   store,
   name,
-  environment,
   suspendedBy,
   minTime,
   maxTime,
@@ -416,12 +407,7 @@ function SuspendedByGroup({
         <span className={styles.CollapsableHeaderTitle}>{pluralizedName}</span>
         <div className={styles.CollapsableHeaderFiller} />
         {isOpen ? null : (
-          <div
-            className={
-              styles.TimeBarContainer +
-              ' ' +
-              getClassNameForEnvironment(environment)
-            }>
+          <div className={styles.TimeBarContainer}>
             <div
               className={
                 !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored
@@ -516,21 +502,17 @@ export default function InspectedElementSuspendedBy({
   const groups = [];
   let currentGroup = null;
   let currentGroupName = null;
-  let currentGroupEnv = null;
   for (let i = 0; i < sortedSuspendedBy.length; i++) {
     const entry = sortedSuspendedBy[i];
     const name = entry.value.awaited.name;
-    const env = entry.value.awaited.env;
     if (
       currentGroupName !== name ||
-      currentGroupEnv !== env ||
       !name ||
       name === 'Promise' ||
       currentGroup === null
     ) {
       // Create a new group.
       currentGroupName = name;
-      currentGroupEnv = env;
       currentGroup = [];
       groups.push(currentGroup);
     }
@@ -609,7 +591,6 @@ export default function InspectedElementSuspendedBy({
               <SuspendedByGroup
                 key={entries[0].index}
                 name={entries[0].value.awaited.name}
-                environment={entries[0].value.awaited.env}
                 suspendedBy={entries}
                 bridge={bridge}
                 element={element}

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

@@ -1,14 +0,0 @@
-.SuspenseEnvironmentDefault {
-  --color-suspense: var(--color-suspense-default);
-  --color-transition: var(--color-transition-default);
-}
-
-.SuspenseEnvironmentServer {
-  --color-suspense: var(--color-suspense-server);
-  --color-transition: var(--color-transition-server);
-}
-
-.SuspenseEnvironmentOther {
-  --color-suspense: var(--color-suspense-other);
-  --color-transition: var(--color-transition-other);
-}

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

@@ -1,20 +0,0 @@
-/**
- * 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 styles from './SuspenseEnvironmentColors.css';
-
-export function getClassNameForEnvironment(environment: null | string): string {
-  if (environment === null) {
-    return styles.SuspenseEnvironmentDefault;
-  }
-  if (environment === 'Server') {
-    return styles.SuspenseEnvironmentServer;
-  }
-  return styles.SuspenseEnvironmentOther;
-}

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

@@ -1,25 +1,12 @@
 .SuspenseRectsContainer {
   padding: .25rem;
-  outline-color: transparent;
-  outline-style: solid;
-  outline-width: 1px;
+  cursor: pointer;
+  outline: 1px solid var(--color-component-name);
   border-radius: 0.25rem;
 }
 
 .SuspenseRectsContainer[data-highlighted='true'] {
-  outline-color: var(--color-transition);
-  outline-style: solid;
-  outline-width: 4px;
-}
-
-.SuspenseRectsRoot {
-  cursor: pointer;
-  outline-color: var(--color-transition);
-  background-color: color-mix(in srgb, var(--color-transition) 5%, transparent);
-}
-
-.SuspenseRectsRoot[data-hovered='true'] {
-  background-color: color-mix(in srgb, var(--color-transition) 15%, transparent);
+  background: var(--color-dimmest);
 }
 
 .SuspenseRectsViewBox {
@@ -28,11 +15,6 @@
 
 .SuspenseRectsBoundary {
   pointer-events: all;
-  border-radius: 0.125rem;
-}
-
-.SuspenseRectsBoundary[data-visible='false'] {
-  background-color: transparent;
 }
 
 .SuspenseRectsBoundaryChildren {
@@ -46,18 +28,15 @@
 .SuspenseRectsRect {
   box-shadow: var(--elevation-4);
   pointer-events: all;
-  cursor: pointer;
-  border-radius: 0.125rem;
-  background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 25%);
-  backdrop-filter: grayscale(100%);
-  transition: background-color 0.2s ease-in;
-  outline-color: var(--color-suspense);
   outline-style: solid;
   outline-width: 1px;
+  border-radius: 0.125rem;
+  cursor: pointer;
 }
 
 .SuspenseRectsScaledRect {
   position: absolute;
+  outline-color: var(--color-background-selected);
 }
 
 .SuspenseRectsScaledRect[data-visible='false'] {
@@ -65,28 +44,15 @@
   outline-width: 0;
 }
 
-.SuspenseRectsBoundary[data-suspended='true'] {
-  opacity: 0.33;
+.SuspenseRectsScaledRect[data-suspended='true'] {
+  opacity: 0.3;
 }
 
 /* highlight this boundary */
-.SuspenseRectsBoundary[data-hovered='true'] > .SuspenseRectsRect {
-  background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 50%);
-  transition: background-color 0.2s ease-out;
+.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect {
+  background-color: var(--color-background-hover);
 }
 
-.SuspenseRectsBoundary[data-selected='true'] {
-  box-shadow: var(--elevation-4);
-}
-
-.SuspenseRectOutline {
-  outline-color: var(--color-suspense);
-  outline-style: solid;
-  outline-width: 4px;
-  border-radius: 0.125rem;
-  pointer-events: none;
-}
-
-.SuspenseRectsBoundary[data-selected='true'] > .SuspenseRectsRect {
-   box-shadow: none;
+.SuspenseRectsRect[data-highlighted='true'] {
+  background-color: var(--color-selected-tree-highlight-active);
 }

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

@@ -30,15 +30,12 @@ import {
   SuspenseTreeStateContext,
   SuspenseTreeDispatcherContext,
 } from './SuspenseTreeContext';
-import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js';
 
 function ScaledRect({
   className,
   rect,
   visible,
   suspended,
-  selected,
-  hovered,
   adjust,
   ...props
 }: {
@@ -46,8 +43,6 @@ function ScaledRect({
   rect: Rect,
   visible: boolean,
   suspended: boolean,
-  selected?: boolean,
-  hovered?: boolean,
   adjust?: boolean,
   ...
 }): React$Node {
@@ -63,8 +58,6 @@ function ScaledRect({
       className={styles.SuspenseRectsScaledRect + ' ' + className}
       data-visible={visible}
       data-suspended={suspended}
-      data-selected={selected}
-      data-hovered={hovered}
       style={{
         // Shrink one pixel so that the bottom outline will line up with the top outline of the next one.
         width: adjust ? 'calc(' + width + ' - 1px)' : width,
@@ -84,9 +77,7 @@ function SuspenseRects({
   const store = useContext(StoreContext);
   const treeDispatch = useContext(TreeDispatcherContext);
   const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
-  const {uniqueSuspendersOnly, timeline, hoveredTimelineIndex} = useContext(
-    SuspenseTreeStateContext,
-  );
+  const {uniqueSuspendersOnly} = useContext(SuspenseTreeStateContext);
 
   const {inspectedElementID} = useContext(TreeStateContext);
 
@@ -154,33 +145,14 @@ function SuspenseRects({
   // TODO: Use the nearest Suspense boundary
   const selected = inspectedElementID === suspenseID;
 
-  const hovered =
-    hoveredTimelineIndex > -1 &&
-    timeline[hoveredTimelineIndex].id === suspenseID;
-
-  let environment: null | string = null;
-  for (let i = 0; i < timeline.length; i++) {
-    const timelineStep = timeline[i];
-    if (timelineStep.id === suspenseID) {
-      environment = timelineStep.environment;
-      break;
-    }
-  }
-
   const boundingBox = getBoundingBox(suspense.rects);
 
   return (
     <ScaledRect
       rect={boundingBox}
-      className={
-        styles.SuspenseRectsBoundary +
-        ' ' +
-        getClassNameForEnvironment(environment)
-      }
+      className={styles.SuspenseRectsBoundary}
       visible={visible}
-      selected={selected}
-      suspended={suspense.isSuspended}
-      hovered={hovered}>
+      suspended={suspense.isSuspended}>
       <ViewBox.Provider value={boundingBox}>
         {visible &&
           suspense.rects !== null &&
@@ -190,6 +162,7 @@ function SuspenseRects({
                 key={index}
                 className={styles.SuspenseRectsRect}
                 rect={rect}
+                data-highlighted={selected}
                 adjust={true}
                 onClick={handleClick}
                 onDoubleClick={handleDoubleClick}
@@ -209,13 +182,6 @@ function SuspenseRects({
             })}
           </ScaledRect>
         )}
-        {selected ? (
-          <ScaledRect
-            className={styles.SuspenseRectOutline}
-            rect={boundingBox}
-            adjust={true}
-          />
-        ) : null}
       </ViewBox.Provider>
     </ScaledRect>
   );
@@ -341,8 +307,7 @@ function SuspenseRectsContainer(): React$Node {
   const treeDispatch = useContext(TreeDispatcherContext);
   const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
   // TODO: This relies on a full re-render of all children when the Suspense tree changes.
-  const {roots, timeline, hoveredTimelineIndex, uniqueSuspendersOnly} =
-    useContext(SuspenseTreeStateContext);
+  const {roots} = useContext(SuspenseTreeStateContext);
 
   // TODO: bbox does not consider uniqueSuspendersOnly filter
   const boundingBox = getDocumentBoundingRect(store, roots);
@@ -386,37 +351,13 @@ function SuspenseRectsContainer(): React$Node {
   }
 
   const isRootSelected = roots.includes(inspectedElementID);
-  const isRootHovered = hoveredTimelineIndex === 0;
-
-  let hasRootSuspenders = false;
-  if (!uniqueSuspendersOnly) {
-    hasRootSuspenders = true;
-  } else {
-    for (let i = 0; i < roots.length; i++) {
-      const rootID = roots[i];
-      const root = store.getSuspenseByID(rootID);
-      if (root !== null && root.hasUniqueSuspenders) {
-        hasRootSuspenders = true;
-        break;
-      }
-    }
-  }
-
-  const rootEnvironment =
-    timeline.length === 0 ? null : timeline[0].environment;
 
   return (
     <div
-      className={
-        styles.SuspenseRectsContainer +
-        (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '') +
-        ' ' +
-        getClassNameForEnvironment(rootEnvironment)
-      }
+      className={styles.SuspenseRectsContainer}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
-      data-highlighted={isRootSelected}
-      data-hovered={isRootHovered}>
+      data-highlighted={isRootSelected}>
       <ViewBox.Provider value={boundingBox}>
         <div
           className={styles.SuspenseRectsViewBox}

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

@@ -40,21 +40,22 @@
 .SuspenseScrubberBead {
   flex: 1;
   height: 0.5rem;
+  background: var(--color-background-selected);
   border-radius: 0.5rem;
-  background: color-mix(in srgb, var(--color-suspense) 10%, transparent);
-  transition: all 0.3s ease-in;
+  background: var(--color-selected-tree-highlight-active);
+  transition: all 0.3s ease-in-out;
 }
 
 .SuspenseScrubberBeadSelected {
   height: 1rem;
-  background: var(--color-suspense);
+  background: var(--color-background-selected);
 }
 
 .SuspenseScrubberBeadTransition {
-  background: var(--color-transition);
+  background: var(--color-component-name);
 }
 
-.SuspenseScrubberStepHighlight > .SuspenseScrubberBead {
+.SuspenseScrubberStepHighlight > .SuspenseScrubberBead,
+.SuspenseScrubberStep:hover > .SuspenseScrubberBead {
   height: 0.75rem;
-  transition: all 0.3s ease-out;
 }

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

@@ -7,8 +7,6 @@
  * @flow
  */
 
-import type {SuspenseTimelineStep} from 'react-devtools-shared/src/frontend/types';
-
 import typeof {SyntheticEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 import * as React from 'react';
@@ -16,14 +14,11 @@ import {useRef} from 'react';
 
 import styles from './SuspenseScrubber.css';
 
-import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js';
-
 import Tooltip from '../Components/reach-ui/tooltip';
 
 export default function SuspenseScrubber({
   min,
   max,
-  timeline,
   value,
   highlight,
   onBlur,
@@ -34,7 +29,6 @@ export default function SuspenseScrubber({
 }: {
   min: number,
   max: number,
-  timeline: $ReadOnlyArray<SuspenseTimelineStep>,
   value: number,
   highlight: number,
   onBlur?: () => void,
@@ -60,18 +54,17 @@ export default function SuspenseScrubber({
   }
   const steps = [];
   for (let index = min; index <= max; index++) {
-    const environment = timeline[index].environment;
-    const label =
-      index === min
-        ? // The first step in the timeline is always a Transition (Initial Paint).
-          'Initial Paint' +
-          (environment === null ? '' : ' (' + environment + ')')
-        : // TODO: Consider adding the name of this specific boundary if this step has only one.
-          environment === null
-          ? 'Suspense'
-          : environment;
     steps.push(
-      <Tooltip key={index} label={label}>
+      <Tooltip
+        key={index}
+        label={
+          index === min
+            ? // The first step in the timeline is always a Transition (Initial Paint).
+              // TODO: Support multiple environments.
+              'Initial Paint'
+            : // TODO: Consider adding the name of this specific boundary if this step has only one.
+              'Suspense'
+        }>
         <div
           className={
             styles.SuspenseScrubberStep +
@@ -86,10 +79,9 @@ export default function SuspenseScrubber({
               styles.SuspenseScrubberBead +
               (index === min
                 ? // The first step in the timeline is always a Transition (Initial Paint).
+                  // TODO: Support multiple environments.
                   ' ' + styles.SuspenseScrubberBeadTransition
                 : '') +
-              ' ' +
-              getClassNameForEnvironment(environment) +
               (index <= value ? ' ' + styles.SuspenseScrubberBeadSelected : '')
             }
           />

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

@@ -34,7 +34,7 @@ function SuspenseTimelineInput() {
   const max = timeline.length > 0 ? timeline.length - 1 : 0;
 
   function switchSuspenseNode(nextTimelineIndex: number) {
-    const nextSelectedSuspenseID = timeline[nextTimelineIndex].id;
+    const nextSelectedSuspenseID = timeline[nextTimelineIndex];
     treeDispatch({
       type: 'SELECT_ELEMENT_BY_ID',
       payload: nextSelectedSuspenseID,
@@ -53,22 +53,13 @@ function SuspenseTimelineInput() {
     switchSuspenseNode(timelineIndex);
   }
 
-  function handleHoverSegment(hoveredIndex: number) {
-    const nextSelectedSuspenseID = timeline[hoveredIndex].id;
-    suspenseTreeDispatch({
-      type: 'HOVER_TIMELINE_FOR_ID',
-      payload: nextSelectedSuspenseID,
-    });
-  }
-  function handleUnhoverSegment() {
-    suspenseTreeDispatch({
-      type: 'HOVER_TIMELINE_FOR_ID',
-      payload: -1,
-    });
+  function handleHoverSegment(hoveredValue: number) {
+    // TODO: Consider highlighting the rect instead.
   }
+  function handleUnhoverSegment() {}
 
   function skipPrevious() {
-    const nextSelectedSuspenseID = timeline[timelineIndex - 1].id;
+    const nextSelectedSuspenseID = timeline[timelineIndex - 1];
     treeDispatch({
       type: 'SELECT_ELEMENT_BY_ID',
       payload: nextSelectedSuspenseID,
@@ -80,7 +71,7 @@ function SuspenseTimelineInput() {
   }
 
   function skipForward() {
-    const nextSelectedSuspenseID = timeline[timelineIndex + 1].id;
+    const nextSelectedSuspenseID = timeline[timelineIndex + 1];
     treeDispatch({
       type: 'SELECT_ELEMENT_BY_ID',
       payload: nextSelectedSuspenseID,
@@ -106,7 +97,7 @@ function SuspenseTimelineInput() {
     // anything suspended in the root. The step after that should have one less
     // thing suspended. I.e. the first suspense boundary should be unsuspended
     // when it's selected. This also lets you show everything in the last step.
-    const suspendedSet = timeline.slice(timelineIndex + 1).map(step => step.id);
+    const suspendedSet = timeline.slice(timelineIndex + 1);
     bridge.send('overrideSuspenseMilestone', {
       suspendedSet,
     });
@@ -173,7 +164,6 @@ function SuspenseTimelineInput() {
         <SuspenseScrubber
           min={min}
           max={max}
-          timeline={timeline}
           value={timelineIndex}
           highlight={hoveredTimelineIndex}
           onChange={handleChange}

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

@@ -7,10 +7,7 @@
  * @flow
  */
 import type {ReactContext} from 'shared/ReactTypes';
-import type {
-  SuspenseNode,
-  SuspenseTimelineStep,
-} from 'react-devtools-shared/src/frontend/types';
+import type {SuspenseNode} from 'react-devtools-shared/src/frontend/types';
 import type Store from '../../store';
 
 import * as React from 'react';
@@ -28,7 +25,7 @@ export type SuspenseTreeState = {
   lineage: $ReadOnlyArray<SuspenseNode['id']> | null,
   roots: $ReadOnlyArray<SuspenseNode['id']>,
   selectedSuspenseID: SuspenseNode['id'] | null,
-  timeline: $ReadOnlyArray<SuspenseTimelineStep>,
+  timeline: $ReadOnlyArray<SuspenseNode['id']>,
   timelineIndex: number | -1,
   hoveredTimelineIndex: number | -1,
   uniqueSuspendersOnly: boolean,
@@ -52,7 +49,7 @@ type ACTION_SELECT_SUSPENSE_BY_ID = {
 type ACTION_SET_SUSPENSE_TIMELINE = {
   type: 'SET_SUSPENSE_TIMELINE',
   payload: [
-    $ReadOnlyArray<SuspenseTimelineStep>,
+    $ReadOnlyArray<SuspenseNode['id']>,
     // The next Suspense ID to select in the timeline
     SuspenseNode['id'] | null,
     // Whether this timeline includes only unique suspenders
@@ -114,7 +111,7 @@ function getInitialState(store: Store): SuspenseTreeState {
     store.getSuspendableDocumentOrderSuspense(uniqueSuspendersOnly);
   const timelineIndex = timeline.length - 1;
   const selectedSuspenseID =
-    timelineIndex === -1 ? null : timeline[timelineIndex].id;
+    timelineIndex === -1 ? null : timeline[timelineIndex];
   const lineage =
     selectedSuspenseID !== null
       ? store.getSuspenseLineage(selectedSuspenseID)
@@ -167,18 +164,16 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               selectedSuspenseID = null;
             }
 
-            const selectedTimelineStep =
-              state.timeline === null || state.timelineIndex === -1
+            let selectedTimelineID =
+              state.timeline === null
                 ? null
                 : state.timeline[state.timelineIndex];
-            let selectedTimelineID: null | number = null;
-            if (selectedTimelineStep !== null) {
-              selectedTimelineID = selectedTimelineStep.id;
-              // $FlowFixMe
-              while (removedIDs.has(selectedTimelineID)) {
-                // $FlowFixMe
-                selectedTimelineID = removedIDs.get(selectedTimelineID);
-              }
+            while (
+              selectedTimelineID !== null &&
+              removedIDs.has(selectedTimelineID)
+            ) {
+              // $FlowExpectedError[incompatible-type]
+              selectedTimelineID = removedIDs.get(selectedTimelineID);
             }
 
             // TODO: Handle different timeline modes (e.g. random order)
@@ -186,25 +181,20 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               state.uniqueSuspendersOnly,
             );
 
-            let nextTimelineIndex = -1;
-            if (selectedTimelineID !== null && nextTimeline.length !== 0) {
-              for (let i = 0; i < nextTimeline.length; i++) {
-                if (nextTimeline[i].id === selectedTimelineID) {
-                  nextTimelineIndex = i;
-                  break;
-                }
-              }
-            }
+            let nextTimelineIndex =
+              selectedTimelineID === null || nextTimeline.length === 0
+                ? -1
+                : nextTimeline.indexOf(selectedTimelineID);
             if (
               nextTimeline.length > 0 &&
               (nextTimelineIndex === -1 || state.autoSelect)
             ) {
               nextTimelineIndex = nextTimeline.length - 1;
-              selectedSuspenseID = nextTimeline[nextTimelineIndex].id;
+              selectedSuspenseID = nextTimeline[nextTimelineIndex];
             }
 
             if (selectedSuspenseID === null && nextTimeline.length > 0) {
-              selectedSuspenseID = nextTimeline[nextTimeline.length - 1].id;
+              selectedSuspenseID = nextTimeline[nextTimeline.length - 1];
             }
 
             const nextLineage =
@@ -266,12 +256,12 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               nextMilestoneIndex = nextTimeline.indexOf(previousMilestoneID);
               if (nextMilestoneIndex === -1 && nextTimeline.length > 0) {
                 nextMilestoneIndex = nextTimeline.length - 1;
-                nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex].id;
+                nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex];
                 nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID);
               }
             } else if (nextRootID !== null) {
               nextMilestoneIndex = nextTimeline.length - 1;
-              nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex].id;
+              nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex];
               nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID);
             }
 
@@ -286,7 +276,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
           }
           case 'SUSPENSE_SET_TIMELINE_INDEX': {
             const nextTimelineIndex = action.payload;
-            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id;
+            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex];
             const nextLineage = store.getSuspenseLineage(
               nextSelectedSuspenseID,
             );
@@ -311,7 +301,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
             ) {
               return state;
             }
-            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id;
+            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex];
             const nextLineage = store.getSuspenseLineage(
               nextSelectedSuspenseID,
             );
@@ -339,7 +329,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
             ) {
               // If we're restarting at the end. Then loop around and start again from the beginning.
               nextTimelineIndex = 0;
-              nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id;
+              nextSelectedSuspenseID = state.timeline[nextTimelineIndex];
               nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID);
             }
 
@@ -362,7 +352,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
             if (nextTimelineIndex > state.timeline.length - 1) {
               return state;
             }
-            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id;
+            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex];
             const nextLineage = store.getSuspenseLineage(
               nextSelectedSuspenseID,
             );
@@ -379,14 +369,8 @@ function SuspenseTreeContextController({children}: Props): React.Node {
           }
           case 'TOGGLE_TIMELINE_FOR_ID': {
             const suspenseID = action.payload;
-
-            let timelineIndexForSuspenseID = -1;
-            for (let i = 0; i < state.timeline.length; i++) {
-              if (state.timeline[i].id === suspenseID) {
-                timelineIndexForSuspenseID = i;
-                break;
-              }
-            }
+            const timelineIndexForSuspenseID =
+              state.timeline.indexOf(suspenseID);
             if (timelineIndexForSuspenseID === -1) {
               // This boundary is no longer in the timeline.
               return state;
@@ -403,7 +387,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
                     timelineIndexForSuspenseID
                   : // Otherwise, if we're currently showing it, jump to right before to hide it.
                     timelineIndexForSuspenseID - 1;
-            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id;
+            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex];
             const nextLineage = store.getSuspenseLineage(
               nextSelectedSuspenseID,
             );
@@ -419,13 +403,8 @@ function SuspenseTreeContextController({children}: Props): React.Node {
           }
           case 'HOVER_TIMELINE_FOR_ID': {
             const suspenseID = action.payload;
-            let timelineIndexForSuspenseID = -1;
-            for (let i = 0; i < state.timeline.length; i++) {
-              if (state.timeline[i].id === suspenseID) {
-                timelineIndexForSuspenseID = i;
-                break;
-              }
-            }
+            const timelineIndexForSuspenseID =
+              state.timeline.indexOf(suspenseID);
             return {
               ...state,
               hoveredTimelineIndex: timelineIndexForSuspenseID,

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

@@ -193,11 +193,6 @@ export type Rect = {
   height: number,
 };
 
-export type SuspenseTimelineStep = {
-  id: SuspenseNode['id'], // TODO: Will become a group.
-  environment: null | string,
-};
-
 export type SuspenseNode = {
   id: Element['id'],
   parentID: SuspenseNode['id'] | 0,
@@ -206,7 +201,6 @@ export type SuspenseNode = {
   rects: null | Array<Rect>,
   hasUniqueSuspenders: boolean,
   isSuspended: boolean,
-  environments: Array<string>,
 };
 
 // Serialized version of ReactIOInfo

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

@@ -1305,18 +1305,3 @@ export function onReloadAndProfileFlagsReset(): void {
   sessionStorageRemoveItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY);
   sessionStorageRemoveItem(SESSION_STORAGE_RECORD_TIMELINE_KEY);
 }
-
-export function unionOfTwoArrays<T>(a: Array<T>, b: Array<T>): Array<T> {
-  let result = a;
-  for (let i = 0; i < b.length; i++) {
-    const value = b[i];
-    if (a.indexOf(value) === -1) {
-      if (result === a) {
-        // Lazily copy
-        result = a.slice(0);
-      }
-      result.push(value);
-    }
-  }
-  return result;
-}

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
-import fs from 'fs';
-import os from 'os';
-import path from 'path';
 import {patchSetImmediate} from '../../../../scripts/jest/patchSetImmediate';
 
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+
 let clientExports;
 let webpackMap;
 let webpackModules;
@@ -1136,37 +1136,4 @@ describe('ReactFlightDOMNode', () => {
       'Switched to client rendering because the server rendering errored:\n\nssr-throw',
     );
   });
-
-  // This is a regression test for a specific issue where byte Web Streams are
-  // detaching ArrayBuffers, which caused downstream issues (e.g. "Cannot
-  // perform Construct on a detached ArrayBuffer") for chunks that are using
-  // Node's internal Buffer pool.
-  it('should not corrupt the Node.js Buffer pool by detaching ArrayBuffers when using Web Streams', async () => {
-    // Create a temp file smaller than 4KB to ensure it uses the Buffer pool.
-    const file = path.join(os.tmpdir(), 'test.bin');
-    fs.writeFileSync(file, Buffer.alloc(4095));
-    const fileChunk = fs.readFileSync(file);
-    fs.unlinkSync(file);
-
-    // Verify this chunk uses the Buffer pool (8192 bytes for files < 4KB).
-    expect(fileChunk.buffer.byteLength).toBe(8192);
-
-    const readable = await serverAct(() =>
-      ReactServerDOMServer.renderToReadableStream(fileChunk, webpackMap),
-    );
-
-    // Create a Web Streams WritableStream that tries to use Buffer operations.
-    const writable = new WritableStream({
-      write(chunk) {
-        // Only write one byte to ensure Node.js is not creating a new Buffer
-        // pool. Typically, library code (e.g. a compression middleware) would
-        // call Buffer.from(chunk) or similar, instead of allocating a new
-        // Buffer directly. With that, the test file could only be ~2600 bytes.
-        Buffer.allocUnsafe(1);
-      },
-    });
-
-    // Must not throw an error.
-    await readable.pipeTo(writable);
-  });
 });

packages/react-server/src/ReactServerStreamConfigEdge.js

@@ -37,11 +37,7 @@ export function flushBuffered(destination: Destination) {
   // transform streams. https://github.com/whatwg/streams/issues/960
 }
 
-// Chunks larger than VIEW_SIZE are written directly, without copying into the
-// internal view buffer. This must be at least half of Node's internal Buffer
-// pool size (8192) to avoid corrupting the pool when using
-// renderToReadableStream, which uses a byte stream that detaches ArrayBuffers.
-const VIEW_SIZE = 4096;
+const VIEW_SIZE = 2048;
 let currentView = null;
 let writtenBytes = 0;
 
@@ -151,7 +147,14 @@ export function typedArrayToBinaryChunk(
   // If we passed through this straight to enqueue we wouldn't have to convert it but since
   // we need to copy the buffer in that case, we need to convert it to copy it.
   // When we copy it into another array using set() it needs to be a Uint8Array.
-  return new Uint8Array(content.buffer, content.byteOffset, content.byteLength);
+  const buffer = new Uint8Array(
+    content.buffer,
+    content.byteOffset,
+    content.byteLength,
+  );
+  // We clone large chunks so that we can transfer them when we write them.
+  // Others get copied into the target buffer.
+  return content.byteLength > VIEW_SIZE ? buffer.slice() : buffer;
 }
 
 export function byteLengthOfChunk(chunk: Chunk | PrecomputedChunk): number {

packages/react-server/src/ReactServerStreamConfigNode.js

@@ -38,11 +38,7 @@ export function flushBuffered(destination: Destination) {
   }
 }
 
-// Chunks larger than VIEW_SIZE are written directly, without copying into the
-// internal view buffer. This must be at least half of Node's internal Buffer
-// pool size (8192) to avoid corrupting the pool when using
-// renderToReadableStream, which uses a byte stream that detaches ArrayBuffers.
-const VIEW_SIZE = 4096;
+const VIEW_SIZE = 2048;
 let currentView = null;
 let writtenBytes = 0;
 let destinationHasCapacity = true;