[pull] main from facebook:main

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

@@ -75,6 +75,10 @@
   display: flex;
 }
 
+.CollapsableHeader[data-pending="true"] {
+  cursor: progress;
+}
+
 .CollapsableHeaderIcon {
   flex: 0 0 1rem;
   margin-left: -0.25rem;

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

@@ -9,7 +9,7 @@
 
 import {copy} from 'clipboard-js';
 import * as React from 'react';
-import {useState} from 'react';
+import {useState, useTransition} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import KeyValue from './KeyValue';
@@ -101,6 +101,7 @@ function SuspendedByRow({
   maxTime,
 }: RowProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [openIsPending, startOpenTransition] = useTransition();
   const ioInfo = asyncInfo.awaited;
   const name = useInferredName(asyncInfo);
   const description = ioInfo.description;
@@ -144,7 +145,16 @@ function SuspendedByRow({
     <div className={styles.CollapsableRow}>
       <Button
         className={styles.CollapsableHeader}
-        onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}
+        // TODO: May be better to leave to React's default Transition indicator.
+        // Though no apps implement this option at the moment.
+        data-pending={openIsPending}
+        onClick={() => {
+          startOpenTransition(() => {
+            setIsOpen(prevIsOpen => !prevIsOpen);
+          });
+        }}
+        // Changing the title on pending transition will not be visible since
+        // (Reach?) tooltips are dismissed on activation.
         title={
           longName +
           ' — ' +

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

@@ -49,10 +49,6 @@
   cursor: ew-resize;
 }
 
-.TreeView footer {
-  display: none;
-}
-
 @container devtools (width < 600px) {
   .SuspenseTab {
     flex-direction: column;
@@ -76,13 +72,13 @@
     cursor: ns-resize;
   }
 
-  .TreeView footer {
-    display: flex;
-    justify-content: end;
-    border-top: 1px solid var(--color-border);
+  .ToggleInspectedElement[data-orientation="horizontal"] {
+    display: none;
   }
+}
 
-  .ToggleInspectedElement[data-orientation="horizontal"] {
+@container devtools (width >= 600px) {
+  .ToggleInspectedElement[data-orientation="vertical"] {
     display: none;
   }
 }
@@ -103,22 +99,18 @@
 }
 
 .Rects {
-  border-top: 1px solid var(--color-border);
   padding: 0.25rem;
   flex-grow: 1;
   overflow: auto;
 }
 
 .SuspenseTreeViewHeader {
-  padding: 0.25rem;
+  flex: 0 0 42px;
+  padding: 0.5rem;
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto 1fr auto auto auto;
   align-items: flex-start;
-}
-
-.SuspenseTreeViewHeaderMain {
-  display: grid;
-  grid-template-rows: auto auto;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .SuspenseBreadcrumbs {
@@ -128,3 +120,14 @@
    */
   overflow-x: auto;
 }
+
+.SuspenseTreeViewFooter {
+  flex: 0 0 42px;
+  display: flex;
+  justify-content: end;
+  border-top: 1px solid var(--color-border);
+  padding: 0.5rem;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: flex-start;
+}

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

@@ -8,7 +8,13 @@
  */
 
 import * as React from 'react';
-import {useEffect, useLayoutEffect, useReducer, useRef} from 'react';
+import {
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useReducer,
+  useRef,
+} from 'react';
 
 import {
   localStorageGetItem,
@@ -23,8 +29,18 @@ import SuspenseBreadcrumbs from './SuspenseBreadcrumbs';
 import SuspenseRects from './SuspenseRects';
 import SuspenseTimeline from './SuspenseTimeline';
 import SuspenseTreeList from './SuspenseTreeList';
+import {
+  SuspenseTreeDispatcherContext,
+  SuspenseTreeStateContext,
+} from './SuspenseTreeContext';
+import {StoreContext} from '../context';
+import {TreeDispatcherContext} from '../Components/TreeContext';
 import Button from '../Button';
-import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
+import Tooltip from '../Components/reach-ui/tooltip';
+import typeof {
+  SyntheticEvent,
+  SyntheticPointerEvent,
+} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 type Orientation = 'horizontal' | 'vertical';
 
@@ -48,6 +64,91 @@ type LayoutState = {
 };
 type LayoutDispatch = (action: LayoutAction) => void;
 
+function ToggleUniqueSuspenders() {
+  const store = useContext(StoreContext);
+  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
+
+  const {selectedRootID: rootID, uniqueSuspendersOnly} = useContext(
+    SuspenseTreeStateContext,
+  );
+
+  function handleToggleUniqueSuspenders(event: SyntheticEvent) {
+    const nextUniqueSuspendersOnly = (event.currentTarget as HTMLInputElement)
+      .checked;
+    const nextTimeline =
+      rootID === null
+        ? []
+        : // TODO: Handle different timeline modes (e.g. random order)
+          store.getSuspendableDocumentOrderSuspense(
+            rootID,
+            nextUniqueSuspendersOnly,
+          );
+    suspenseTreeDispatch({
+      type: 'SET_SUSPENSE_TIMELINE',
+      payload: [nextTimeline, null, nextUniqueSuspendersOnly],
+    });
+  }
+
+  return (
+    <Tooltip label="Only include boundaries with unique suspenders">
+      <input
+        checked={uniqueSuspendersOnly}
+        type="checkbox"
+        onChange={handleToggleUniqueSuspenders}
+      />
+    </Tooltip>
+  );
+}
+
+function SelectRoot() {
+  const store = useContext(StoreContext);
+  const {roots, selectedRootID, uniqueSuspendersOnly} = useContext(
+    SuspenseTreeStateContext,
+  );
+  const treeDispatch = useContext(TreeDispatcherContext);
+  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
+
+  function handleChange(event: SyntheticEvent) {
+    const newRootID = +event.currentTarget.value;
+    // TODO: scrollIntoView both suspense rects and host instance.
+    const nextTimeline = store.getSuspendableDocumentOrderSuspense(
+      newRootID,
+      uniqueSuspendersOnly,
+    );
+    suspenseTreeDispatch({
+      type: 'SET_SUSPENSE_TIMELINE',
+      payload: [nextTimeline, newRootID, uniqueSuspendersOnly],
+    });
+    if (nextTimeline.length > 0) {
+      const milestone = nextTimeline[nextTimeline.length - 1];
+      treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: milestone});
+    }
+  }
+  return (
+    roots.length > 0 && (
+      <select
+        aria-label="Select Suspense Root"
+        className={styles.SuspenseTimelineRootSwitcher}
+        onChange={handleChange}
+        value={selectedRootID === null ? -1 : selectedRootID}>
+        <option disabled={true} value={-1}>
+          ----
+        </option>
+        {roots.map(rootID => {
+          // TODO: Use name
+          const name = '#' + rootID;
+          // TODO: Highlight host on hover
+          return (
+            <option key={rootID} value={rootID}>
+              {name}
+            </option>
+          );
+        })}
+      </select>
+    )
+  );
+}
+
 function ToggleTreeList({
   dispatch,
   state,
@@ -314,30 +415,30 @@ function SuspenseTab(_: {}) {
           </div>
         )}
         <div className={styles.TreeView}>
-          <div className={styles.SuspenseTreeViewHeader}>
+          <header className={styles.SuspenseTreeViewHeader}>
             {treeListDisabled ? (
               <div />
             ) : (
               <ToggleTreeList dispatch={dispatch} state={state} />
             )}
-            <div className={styles.SuspenseTreeViewHeaderMain}>
-              <div className={styles.SuspenseTimeline}>
-                <SuspenseTimeline />
-              </div>
-              <div className={styles.SuspenseBreadcrumbs}>
-                <SuspenseBreadcrumbs />
-              </div>
+            <div className={styles.SuspenseBreadcrumbs}>
+              <SuspenseBreadcrumbs />
             </div>
+            <ToggleUniqueSuspenders />
+            <SelectRoot />
             <ToggleInspectedElement
               dispatch={dispatch}
               state={state}
               orientation="horizontal"
             />
-          </div>
+          </header>
           <div className={styles.Rects}>
             <SuspenseRects />
           </div>
-          <footer>
+          <footer className={styles.SuspenseTreeViewFooter}>
+            <div className={styles.SuspenseTimeline}>
+              <SuspenseTimeline />
+            </div>
             <ToggleInspectedElement
               dispatch={dispatch}
               state={state}

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

@@ -11,7 +11,6 @@ import * as React from 'react';
 import {useContext, useLayoutEffect, useRef} from 'react';
 import {BridgeContext, StoreContext} from '../context';
 import {TreeDispatcherContext} from '../Components/TreeContext';
-import Tooltip from '../Components/reach-ui/tooltip';
 import {useHighlightHostInstance} from '../hooks';
 import {
   SuspenseTreeDispatcherContext,
@@ -35,26 +34,8 @@ function SuspenseTimelineInput() {
     selectedRootID: rootID,
     timeline,
     timelineIndex,
-    uniqueSuspendersOnly,
   } = useContext(SuspenseTreeStateContext);
 
-  function handleToggleUniqueSuspenders(event: SyntheticEvent) {
-    const nextUniqueSuspendersOnly = (event.currentTarget as HTMLInputElement)
-      .checked;
-    const nextTimeline =
-      rootID === null
-        ? []
-        : // TODO: Handle different timeline modes (e.g. random order)
-          store.getSuspendableDocumentOrderSuspense(
-            rootID,
-            nextUniqueSuspendersOnly,
-          );
-    suspenseTreeDispatch({
-      type: 'SET_SUSPENSE_TIMELINE',
-      payload: [nextTimeline, null, nextUniqueSuspendersOnly],
-    });
-  }
-
   const inputRef = useRef<HTMLElement | null>(null);
   const inputBBox = useRef<ClientRect | null>(null);
   useLayoutEffect(() => {
@@ -190,66 +171,15 @@ function SuspenseTimelineInput() {
           ref={inputRef}
         />
       </div>
-      <Tooltip label="Only include boundaries with unique suspenders">
-        <input
-          checked={uniqueSuspendersOnly}
-          type="checkbox"
-          onChange={handleToggleUniqueSuspenders}
-        />
-      </Tooltip>
     </>
   );
 }
 
 export default function SuspenseTimeline(): React$Node {
-  const store = useContext(StoreContext);
-  const {roots, selectedRootID, uniqueSuspendersOnly} = useContext(
-    SuspenseTreeStateContext,
-  );
-  const treeDispatch = useContext(TreeDispatcherContext);
-  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
-
-  function handleChange(event: SyntheticEvent) {
-    const newRootID = +event.currentTarget.value;
-    // TODO: scrollIntoView both suspense rects and host instance.
-    const nextTimeline = store.getSuspendableDocumentOrderSuspense(
-      newRootID,
-      uniqueSuspendersOnly,
-    );
-    suspenseTreeDispatch({
-      type: 'SET_SUSPENSE_TIMELINE',
-      payload: [nextTimeline, newRootID, uniqueSuspendersOnly],
-    });
-    if (nextTimeline.length > 0) {
-      const milestone = nextTimeline[nextTimeline.length - 1];
-      treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: milestone});
-    }
-  }
-
+  const {selectedRootID} = useContext(SuspenseTreeStateContext);
   return (
     <div className={styles.SuspenseTimelineContainer}>
       <SuspenseTimelineInput key={selectedRootID} />
-      {roots.length > 0 && (
-        <select
-          aria-label="Select Suspense Root"
-          className={styles.SuspenseTimelineRootSwitcher}
-          onChange={handleChange}
-          value={selectedRootID === null ? -1 : selectedRootID}>
-          <option disabled={true} value={-1}>
-            ----
-          </option>
-          {roots.map(rootID => {
-            // TODO: Use name
-            const name = '#' + rootID;
-            // TODO: Highlight host on hover
-            return (
-              <option key={rootID} value={rootID}>
-                {name}
-              </option>
-            );
-          })}
-        </select>
-      )}
     </div>
   );
 }

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

@@ -3021,7 +3021,8 @@ describe('ReactFlightDOM', () => {
     expect(getMeaningfulChildren(container)).toEqual(<div>loading...</div>);
   });
 
-  // @gate enableHalt
+  // This could be a bug. Discovered while making enableAsyncDebugInfo dynamic for www.
+  // @gate experimental && (enableHalt || (enableAsyncDebugInfo && __DEV__))
   it('will leave async iterables in an incomplete state when halting', async () => {
     let resolve;
     const wait = new Promise(r => (resolve = r));