[DevTools] Adjust the rects size by one pixel smaller (#34876)
This ensures that the outline of a previous rectangle lines up on the same pixel as the next rectangle so that they appear consecutive. <img width="244" height="51" alt="Screenshot 2025-10-16 at 11 35 32 AM" src="https://github.com/user-attachments/assets/75ffde6f-8cc6-49c1-8855-3953569546b4" /> I don't love this implementation. There's probably a smarter way. Was trying to avoid adding another element.
Sebastian Markbåge committed
Oct 16, 2025 at 12:16 UTC
93f8593289538b0be7b0eefec85e9a6ca8f56738
1 file changed
+6
-2
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
+6
-2
@@ -36,12 +36,14 @@ function ScaledRect({
36
rect,
37
visible,
38
suspended,
39
+ adjust,
40
...props
41
}: {
42
className: string,
43
rect: Rect,
44
visible: boolean,
45
suspended: boolean,
46
+ adjust?: boolean,
47
...
48
}): React$Node {
49
const viewBox = useContext(ViewBox);
@@ -57,8 +59,9 @@ function ScaledRect({
59
data-visible={visible}
60
data-suspended={suspended}
61
style={{
60
- width,
61
- height,
62
+ // Shrink one pixel so that the bottom outline will line up with the top outline of the next one.
63
+ width: adjust ? 'calc(' + width + ' - 1px)' : width,
64
+ height: adjust ? 'calc(' + height + ' - 1px)' : height,
65
top: y,
66
left: x,
67
}}
@@ -160,6 +163,7 @@ function SuspenseRects({
163
className={styles.SuspenseRectsRect}
164
rect={rect}
165
data-highlighted={selected}
166
+ adjust={true}
167
onClick={handleClick}
168
onDoubleClick={handleDoubleClick}
169
onPointerOver={handlePointerOver}