From eceb91e19da5b0cd4b88faf8b35da2315450205b Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Tue, 3 Sep 2024 22:09:24 -0400
Subject: [PATCH] Track if inside suspense or error boundary to highlight the
 buttons

---
 .../src/backend/fiber/renderer.js             | 49 ++++++++++++-------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index a3f1543c5667f..0e888e75f0744 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -4350,9 +4350,6 @@ export function attach(
     const owners: null | Array<SerializedElement> =
       getOwnersListFromInstance(fiberInstance);
 
-    const isTimedOutSuspense =
-      tag === SuspenseComponent && memoizedState !== null;
-
     let hooks = null;
     if (usesHooks) {
       const originalConsoleMethods: {[string]: $FlowFixMe} = {};
@@ -4382,14 +4379,25 @@ export function attach(
 
     let rootType = null;
     let current = fiber;
+    let hasErrorBoundary = false;
+    let hasSuspenseBoundary = false;
     while (current.return !== null) {
+      const temp = current;
       current = current.return;
+      if (temp.tag === SuspenseComponent) {
+        hasSuspenseBoundary = true;
+      } else if (isErrorBoundary(temp)) {
+        hasErrorBoundary = true;
+      }
     }
     const fiberRoot = current.stateNode;
     if (fiberRoot != null && fiberRoot._debugRootType !== null) {
       rootType = fiberRoot._debugRootType;
     }
 
+    const isTimedOutSuspense =
+      tag === SuspenseComponent && memoizedState !== null;
+
     let isErrored = false;
     if (isErrorBoundary(fiber)) {
       // if the current inspected element is an error boundary,
@@ -4440,12 +4448,13 @@ export function attach(
       canEditFunctionPropsRenamePaths:
         typeof overridePropsRenamePath === 'function',
 
-      canToggleError: supportsTogglingError,
+      canToggleError: supportsTogglingError && hasErrorBoundary,
       // Is this error boundary in error state.
       isErrored,
 
       canToggleSuspense:
         supportsTogglingSuspense &&
+        hasSuspenseBoundary &&
         // If it's showing the real content, we can always flip fallback.
         (!isTimedOutSuspense ||
           // If it's showing fallback because we previously forced it to,
@@ -4506,20 +4515,24 @@ export function attach(
       getOwnersListFromInstance(virtualInstance);
 
     let rootType = null;
-    let parent = virtualInstance.parent;
-    while (parent !== null) {
-      if (parent.kind !== VIRTUAL_INSTANCE) {
-        let current = parent.data;
-        while (current.return !== null) {
-          current = current.return;
-        }
-        const fiberRoot = current.stateNode;
-        if (fiberRoot != null && fiberRoot._debugRootType !== null) {
-          rootType = fiberRoot._debugRootType;
+    let hasErrorBoundary = false;
+    let hasSuspenseBoundary = false;
+    const nearestFiber = getNearestFiber(virtualInstance);
+    if (nearestFiber !== null) {
+      let current = nearestFiber;
+      while (current.return !== null) {
+        const temp = current;
+        current = current.return;
+        if (temp.tag === SuspenseComponent) {
+          hasSuspenseBoundary = true;
+        } else if (isErrorBoundary(temp)) {
+          hasErrorBoundary = true;
         }
-        break;
       }
-      parent = parent.parent;
+      const fiberRoot = current.stateNode;
+      if (fiberRoot != null && fiberRoot._debugRootType !== null) {
+        rootType = fiberRoot._debugRootType;
+      }
     }
 
     const plugins: Plugins = {
@@ -4537,10 +4550,10 @@ export function attach(
       canEditFunctionPropsDeletePaths: false,
       canEditFunctionPropsRenamePaths: false,
 
-      canToggleError: supportsTogglingError,
+      canToggleError: supportsTogglingError && hasErrorBoundary,
       isErrored: false,
 
-      canToggleSuspense: supportsTogglingSuspense,
+      canToggleSuspense: supportsTogglingSuspense && hasSuspenseBoundary,
 
       // Can view component source location.
       canViewSource,