[DevTools] flatten all Suspense boundaries into a single timeline

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

@@ -974,12 +974,8 @@ describe('Store', () => {
             <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
       `);
 
-      const rendererID = getRendererID();
-      const rootID = store.getRootIDForElement(store.getElementIDAtIndex(0));
       await actAsync(() => {
         agent.overrideSuspenseMilestone({
-          rendererID,
-          rootID,
           suspendedSet: [
             store.getElementIDAtIndex(4),
             store.getElementIDAtIndex(8),
@@ -1009,8 +1005,6 @@ describe('Store', () => {
 
       await actAsync(() => {
         agent.overrideSuspenseMilestone({
-          rendererID,
-          rootID,
           suspendedSet: [],
         });
       });

packages/react-devtools-shared/src/backend/agent.js

@@ -131,8 +131,6 @@ type OverrideSuspenseParams = {
 };
 
 type OverrideSuspenseMilestoneParams = {
-  rendererID: number,
-  rootID: number,
   suspendedSet: Array<number>,
 };
 
@@ -567,17 +565,13 @@ export default class Agent extends EventEmitter<{
   };
 
   overrideSuspenseMilestone: OverrideSuspenseMilestoneParams => void = ({
-    rendererID,
-    rootID,
     suspendedSet,
   }) => {
-    const renderer = this._rendererInterfaces[rendererID];
-    if (renderer == null) {
-      console.warn(
-        `Invalid renderer id "${rendererID}" to override suspense milestone`,
-      );
-    } else {
-      renderer.overrideSuspenseMilestone(rootID, suspendedSet);
+    for (const rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.overrideSuspenseMilestone(suspendedSet);
     }
   };
 

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

@@ -7756,10 +7756,7 @@ export function attach(
    * @param rootID The root that contains this milestone
    * @param suspendedSet List of IDs of SuspenseComponent Fibers
    */
-  function overrideSuspenseMilestone(
-    rootID: FiberInstance['id'],
-    suspendedSet: Array<FiberInstance['id']>,
-  ) {
+  function overrideSuspenseMilestone(suspendedSet: Array<FiberInstance['id']>) {
     if (
       typeof setSuspenseHandler !== 'function' ||
       typeof scheduleUpdate !== 'function'
@@ -7769,7 +7766,6 @@ export function attach(
       );
     }
 
-    // TODO: Allow overriding the timeline for the specified root.
     forceFallbackForFibers.forEach(fiber => {
       scheduleUpdate(fiber);
     });
@@ -7778,9 +7774,7 @@ export function attach(
     for (let i = 0; i < suspendedSet.length; ++i) {
       const instance = idToDevToolsInstanceMap.get(suspendedSet[i]);
       if (instance === undefined) {
-        console.warn(
-          `Could not suspend ID '${suspendedSet[i]}' since the instance can't be found.`,
-        );
+        // this is an ID from a different root or even renderer.
         continue;
       }
 

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

@@ -437,10 +437,7 @@ export type RendererInterface = {
   onErrorOrWarning?: OnErrorOrWarning,
   overrideError: (id: number, forceError: boolean) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
-  overrideSuspenseMilestone: (
-    rootID: number,
-    suspendedSet: Array<number>,
-  ) => void,
+  overrideSuspenseMilestone: (suspendedSet: Array<number>) => void,
   overrideValueAtPath: (
     type: Type,
     id: number,

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

@@ -141,8 +141,6 @@ type OverrideSuspense = {
 };
 
 type OverrideSuspenseMilestone = {
-  rendererID: number,
-  rootID: number,
   suspendedSet: Array<number>,
 };
 

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

@@ -885,38 +885,39 @@ export default class Store extends EventEmitter<{
    * @param uniqueSuspendersOnly Filters out boundaries without unique suspenders
    */
   getSuspendableDocumentOrderSuspense(
-    rootID: Element['id'] | void,
     uniqueSuspendersOnly: boolean,
   ): $ReadOnlyArray<SuspenseNode['id']> {
-    if (rootID === undefined) {
-      return [];
-    }
-    const root = this.getElementByID(rootID);
-    if (root === null) {
-      return [];
-    }
-    if (!this.supportsTogglingSuspense(rootID)) {
-      return [];
-    }
     const list: SuspenseNode['id'][] = [];
-    const suspense = this.getSuspenseByID(rootID);
-    if (suspense !== null) {
-      const stack = [suspense];
-      while (stack.length > 0) {
-        const current = stack.pop();
-        if (current === undefined) {
-          continue;
-        }
-        // Include the root even if we won't show it suspended (because that's just blank).
-        // You should be able to see what suspended the shell.
-        if (!uniqueSuspendersOnly || current.hasUniqueSuspenders) {
-          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);
+    // Arbitrarily pick the order in which roots were committed as document-order.
+    for (let i = 0; i < this._roots.length; i++) {
+      const rootID = this._roots[i];
+      const root = this.getElementByID(rootID);
+
+      if (root === null) {
+        return [];
+      }
+      if (!this.supportsTogglingSuspense(rootID)) {
+        return [];
+      }
+      const suspense = this.getSuspenseByID(rootID);
+      if (suspense !== null) {
+        const stack = [suspense];
+        while (stack.length > 0) {
+          const current = stack.pop();
+          if (current === undefined) {
+            continue;
+          }
+          // Include the root even if we won't show it suspended (because that's just blank).
+          // You should be able to see what suspended the shell.
+          if (!uniqueSuspendersOnly || current.hasUniqueSuspenders) {
+            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);
+            }
           }
         }
       }

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

@@ -52,7 +52,7 @@ type Props = {
   type: IconType,
 };
 
-const panelIcons = '0 -960 960 820';
+const panelIconsViewBox = '144 -816 672 672';
 export default function ButtonIcon({className = '', type}: Props): React.Node {
   let pathData = null;
   let viewBox = '0 0 24 24';
@@ -131,27 +131,27 @@ export default function ButtonIcon({className = '', type}: Props): React.Node {
       break;
     case 'panel-left-close':
       pathData = PATH_MATERIAL_PANEL_LEFT_CLOSE;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'panel-left-open':
       pathData = PATH_MATERIAL_PANEL_LEFT_OPEN;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'panel-right-close':
       pathData = PATH_MATERIAL_PANEL_RIGHT_CLOSE;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'panel-right-open':
       pathData = PATH_MATERIAL_PANEL_RIGHT_OPEN;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'panel-bottom-open':
       pathData = PATH_MATERIAL_PANEL_BOTTOM_OPEN;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'panel-bottom-close':
       pathData = PATH_MATERIAL_PANEL_BOTTOM_CLOSE;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'suspend':
       pathData = PATH_SUSPEND;

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

@@ -53,6 +53,12 @@
   display: none;
 }
 
+
+.TogglePanelIcon {
+  width: 16px;
+  height: 16px;
+}
+
 @container devtools (width < 600px) {
   .SuspenseTab {
     flex-direction: column;
@@ -111,14 +117,24 @@
 
 .SuspenseTreeViewHeader {
   padding: 0.25rem;
-  display: grid;
+   display: grid;
   grid-template-columns: auto 1fr auto;
-  align-items: flex-start;
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    "toggle-left timeline toggle-right"
+    ". breadcrumbs breadcrumbs";
 }
 
-.SuspenseTreeViewHeaderMain {
-  display: grid;
-  grid-template-rows: auto auto;
+.ToggleTreeList {
+  grid-area: toggle-left;
+}
+
+.SuspenseTimeline {
+  grid-area: timeline;
+}
+
+.ToggleInspectedElement {
+  grid-area: toggle-right;;
 }
 
 .SuspenseBreadcrumbs {
@@ -127,4 +143,5 @@
    * OwnerStack has more constraints that make it easier so it won't be a 1:1 port.
    */
   overflow-x: auto;
+  grid-area: breadcrumbs;
 }

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

@@ -57,6 +57,7 @@ function ToggleTreeList({
 }) {
   return (
     <Button
+      className={styles.ToggleTreeList}
       onClick={() =>
         dispatch({
           type: 'ACTION_SET_TREE_LIST_TOGGLE',
@@ -65,6 +66,7 @@ function ToggleTreeList({
       }
       title={state.treeListHidden ? 'Show Tree List' : 'Hide Tree List'}>
       <ButtonIcon
+        className={styles.TogglePanelIcon}
         type={state.treeListHidden ? 'panel-left-open' : 'panel-left-close'}
       />
     </Button>
@@ -105,7 +107,7 @@ function ToggleInspectedElement({
           ? 'Show Inspected Element'
           : 'Hide Inspected Element'
       }>
-      <ButtonIcon type={iconType} />
+      <ButtonIcon className={styles.TogglePanelIcon} type={iconType} />
     </Button>
   );
 }
@@ -307,13 +309,11 @@ function SuspenseTab(_: {}) {
         <div className={styles.TreeView}>
           <div className={styles.SuspenseTreeViewHeader}>
             <ToggleTreeList dispatch={dispatch} state={state} />
-            <div className={styles.SuspenseTreeViewHeaderMain}>
-              <div className={styles.SuspenseTimeline}>
-                <SuspenseTimeline />
-              </div>
-              <div className={styles.SuspenseBreadcrumbs}>
-                <SuspenseBreadcrumbs />
-              </div>
+            <div className={styles.SuspenseTimeline}>
+              <SuspenseTimeline />
+            </div>
+            <div className={styles.SuspenseBreadcrumbs}>
+              <SuspenseBreadcrumbs />
             </div>
             <ToggleInspectedElement
               dispatch={dispatch}