From 6362b5c7118f925acbee884e61ab0fd0b8f14c20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Sun, 9 Nov 2025 15:03:31 -0500 Subject: [PATCH 1/2] [DevTools] Special case the selected root outline (#35071) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When I moved the outline to above all other rects, I thought it was clever to unify with the root so that the outline was also used for the root selection. But the root outline is not drawn like the other rects. It's outside the padding and doesn't have the 1px adjustment which leads the overlay to be slightly inside the other rect instead of above it. This goes back to just having the selected root be drawn by the root element. Before: Screenshot 2025-11-07 at 11 39 28 AM After: Screenshot 2025-11-07 at 11 44 01 AM --- .../src/devtools/views/SuspenseTab/SuspenseRects.css | 9 +++++---- .../src/devtools/views/SuspenseTab/SuspenseRects.js | 3 +-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index aadb6a0fba0..6b43f873ae8 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -12,6 +12,11 @@ background-color: color-mix(in srgb, var(--color-transition) 5%, transparent); } +.SuspenseRectsRootOutline { + outline-width: 4px; + border-radius: 0.125rem; +} + .SuspenseRectsRoot[data-hovered='true'] { background-color: color-mix(in srgb, var(--color-transition) 15%, transparent); } @@ -100,10 +105,6 @@ pointer-events: none; } -.SuspenseRectOutlineRoot { - outline-color: var(--color-transition); -} - .SuspenseRectsBoundary[data-selected='true'] > .SuspenseRectsRect { box-shadow: none; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index e08cdc41736..221a6c90f82 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -510,7 +510,6 @@ function SuspenseRectsContainer({ let selectedBoundingBox = null; let selectedEnvironment = null; if (isRootSelected) { - selectedBoundingBox = boundingBox; selectedEnvironment = rootEnvironment; } else if (inspectedElementID !== null) { const selectedSuspenseNode = store.getSuspenseByID(inspectedElementID); @@ -534,6 +533,7 @@ function SuspenseRectsContainer({ className={ styles.SuspenseRectsContainer + (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '') + + (isRootSelected ? ' ' + styles.SuspenseRectsRootOutline : '') + ' ' + getClassNameForEnvironment(rootEnvironment) } @@ -551,7 +551,6 @@ function SuspenseRectsContainer({ Date: Sun, 9 Nov 2025 15:19:43 -0500 Subject: [PATCH 2/2] [Fizz] Simplify createSuspenseBoundary path (#35087) Small follow up to #35068. Since this is now a single argument we can simplify the creation branching a bit and make sure it's const. --- packages/react-server/src/ReactFizzServer.js | 50 ++++++-------------- 1 file changed, 14 insertions(+), 36 deletions(-) diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 3a92a173773..4f0ece3f985 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -1291,24 +1291,13 @@ function renderSuspenseBoundary( const defer: boolean = enableCPUSuspense && props.defer === true; const fallbackAbortSet: Set = new Set(); - let newBoundary: SuspenseBoundary; - if (canHavePreamble(task.formatContext)) { - newBoundary = createSuspenseBoundary( - request, - task.row, - fallbackAbortSet, - createPreamble(), - defer, - ); - } else { - newBoundary = createSuspenseBoundary( - request, - task.row, - fallbackAbortSet, - null, - defer, - ); - } + const newBoundary = createSuspenseBoundary( + request, + task.row, + fallbackAbortSet, + canHavePreamble(task.formatContext) ? createPreamble() : null, + defer, + ); const insertionIndex = parentSegment.chunks.length; // The children of the boundary segment is actually the fallback. @@ -1603,24 +1592,13 @@ function replaySuspenseBoundary( const defer: boolean = enableCPUSuspense && props.defer === true; const fallbackAbortSet: Set = new Set(); - let resumedBoundary: SuspenseBoundary; - if (canHavePreamble(task.formatContext)) { - resumedBoundary = createSuspenseBoundary( - request, - task.row, - fallbackAbortSet, - createPreamble(), - defer, - ); - } else { - resumedBoundary = createSuspenseBoundary( - request, - task.row, - fallbackAbortSet, - null, - defer, - ); - } + const resumedBoundary = createSuspenseBoundary( + request, + task.row, + fallbackAbortSet, + canHavePreamble(task.formatContext) ? createPreamble() : null, + defer, + ); resumedBoundary.parentFlushed = true; // We restore the same id of this boundary as was used during prerender. resumedBoundary.rootSegmentID = id;