"Outline Renders" tool #967

jwajgelt · 2025-02-14T13:42:45Z

Adds the "Outline Renders" tool which highlights React components when they are rendered. Based on react-scan utility.

we reuse the react-scan implementation of drawing the outlines on the canvas. Accessing it from our frontend code required abstracting the renderer code and exporting it from the package. These changes are available and pulled from a public fork the react-scan repository. refactor: abstract outline rendering software-mansion-labs/react-scan#1
we use the bippy library for instrumenting the React rendering process. We include the built library code (extracted from the official release) in this repo in the packages/vscode-extension/lib/bippy directory and inject it into the RN Application bundle.
We do it this way because it needs to be included in the final extension package in order to be injected into the RN application, and only the lib directory is available to Metro.

How Has This Been Tested:

Open the "Tools" dropdown and toggle "Outline Renders".
Trigger component updates in the application.
The updated components should be briefly highlighted, with their names and update counter displayed.
Resizing the phone Preview should not break the outlines' positions.
The tool's enabled status should persist app, extension and IDE launches/reloads.

vercel · 2025-02-14T13:42:50Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
radon-ide	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 26, 2025 8:23am

Makes it possible to register tool plugins with no corresponding VSC panel. This is meant to be used by #967 ### How Has This Been Tested: Remove `openTool` method from one of the tool plugins and verify: - the project still typechecks - the tool dropdown does not display the "Open Panel" button

filip131311

I left some inline comments. I also have additional question regarding how this works:

If i click multiple tiems on something that changes UI (as in example video) the count will count all the renders of the element that shows up. My question is "when is onCommitFiberRoot triggered? if it counts those multiple changes as one commit? Is it something that is normal for react and i shouldn't be worried about it?

Screen.Recording.2025-02-18.at.14.55.33.mov

filip131311 · 2025-02-18T11:42:09Z

packages/vscode-extension/lib/instrumentation.js

+      height: screenHeight,
+    };
+  } else {
+    const { width: windowWidth, height: windowHeight } = Dimensions.get("window");


in Inspector code we use uniform:

function getInspectorDataForCoordinates(mainContainerRef, x, y, requestStack, callback) { const { width: screenWidth, height: screenHeight } = Dimensions.get("screen");

could you write up coments here explaining why it is different for different platforms?

To correct for the status bar on Android.
Dimensions returned from measureInWindow are relative to the window, so we should be using that, but because the canvas we use later to draw the overlays covers the entire screen, we need to translate the measurements from window coordinate space to screen.
On iOS it seems to be the same, but on Android you need to translate everything by the Status Bar height.

filip131311 · 2025-02-18T11:49:50Z

packages/vscode-extension/lib/instrumentation.js

+function getWindowRect() {
+  if (Platform.OS === "android") {
+    const { width: screenWidth, height: screenHeight } = Dimensions.get("screen");
+    const statusBarHeight = StatusBar.currentHeight || 0;


The StatusBar.currentHeight variable is not respected if the user uses react-native-screens and probably in more scenarios, I don't know if it wouldn't be better to ignore the misalignment here hoping that the problem will go away when android forces edge-to-edge instead of exposing ourselves to unpredictable bugs.

Alternatively we might try to find a better way to measure StatusBar for example by dumping native component hierarchy using adb (that would also fix inspector problems), but I Think solving that issue is outside of this PR scope.

It seems to work fine Bluesky which, as far as I can tell, uses screens (through native-stack). The app is rendered below the status bar though, so this might be why.
IMO it's better to have this solution, which seems to work for the examples I've checked, than ignore the status bar altogether and have the outlines always offset.

packages/vscode-extension/lib/instrumentation.js

packages/vscode-extension/lib/wrapper.js

filip131311

Thank you

kmagiera

I'd prefer that we actually use the name react-scan instead of "render outlines" given we rely on the tool.

We also want to have a bit more details about this setup with the extra repo. Specifically, we should put in the description how these different repositoreis are structured. What are the changes that we made. Why is bippy source pulled into the repo etc

packages/vscode-extension/package.json

jwajgelt · 2025-02-20T06:42:17Z

I'd prefer that we actually use the name react-scan instead of "render outlines" given we rely on the tool.

I'm not convinced that's a good idea.

The name is not very descriptive. That way the user needs to already be familiar with react-scan to know what our tool is supposed to do. Granted, "Outline Renders" might not be the best name in that metric either, something like "Outline Components when Rendered" might have been better.
I think it gives the wrong expectation to users. What we currently implement is a very small part of what the "real" react-scan does. If someone who uses react-scan on web tries to use our tool, they would probably be disappointed with how little they can do compared to it.

Allows tools to configure (via the `persist` boolean property) whether their enabled/disabled status should persist IDE restarts. This is motivated by the "Outline Renders" tool (PR #967), which shouldn't be enabled when the IDE starts. ### How Has This Been Tested: - change the `persist` value for one of the tool plugins to `false` - verify that when the extension is restarted: - tools which have `persist` set to `true` remember their status - tools which have `persist` set to `false` are disabled

packages/vscode-extension/src/webview/components/RenderOutlinesOverlay.tsx

packages/vscode-extension/src/webview/components/RenderOutlinesOverlay.css

packages/vscode-extension/src/webview/components/Preview.tsx

packages/vscode-extension/lib/wrapper.js

…l label

kmagiera

Looks good. As final thought I think we should add the license to ale be included in the notices file (one that we generate in buiild step).
I think that we can use submodules-NOTICES.json for this reason despite dippy not being in submodule. If we do that, we don't need LICENSE file in the source tree

jwajgelt requested a review from kmagiera February 14, 2025 13:42

jwajgelt self-assigned this Feb 14, 2025

jwajgelt force-pushed the @jwajgelt/render-outlines branch from 1543254 to ae7dfe3 Compare February 17, 2025 07:54

vercel bot deployed to Preview February 17, 2025 07:54 View deployment

jwajgelt mentioned this pull request Feb 17, 2025

Allow tool plugins with no tool panels #969

Merged

jwajgelt force-pushed the @jwajgelt/render-outlines branch from ae7dfe3 to cf04014 Compare February 17, 2025 10:34

vercel bot deployed to Preview February 17, 2025 10:35 View deployment

jwajgelt marked this pull request as ready for review February 17, 2025 11:46

vercel bot deployed to Preview February 17, 2025 12:16 View deployment

filip131311 self-requested a review February 18, 2025 11:02

filip131311 reviewed Feb 18, 2025

View reviewed changes

vercel bot deployed to Preview February 19, 2025 07:17 View deployment

jwajgelt force-pushed the @jwajgelt/render-outlines branch from 8591ff1 to e5f1c2c Compare February 19, 2025 07:17

vercel bot deployed to Preview February 19, 2025 07:18 View deployment

filip131311 approved these changes Feb 19, 2025

View reviewed changes

kmagiera requested changes Feb 19, 2025

View reviewed changes

packages/vscode-extension/package.json Outdated Show resolved Hide resolved

jwajgelt requested a review from kmagiera February 20, 2025 06:43

vercel bot deployed to Preview February 20, 2025 06:44 View deployment

jwajgelt force-pushed the @jwajgelt/render-outlines branch from a4f6a9e to d720247 Compare February 21, 2025 09:11

vercel bot deployed to Preview February 21, 2025 09:11 View deployment

jwajgelt mentioned this pull request Feb 21, 2025

Allow tools to not persist their status #982

Merged

jwajgelt force-pushed the @jwajgelt/render-outlines branch from d720247 to ea4a5f6 Compare February 21, 2025 13:04

vercel bot deployed to Preview February 21, 2025 13:04 View deployment

vercel bot deployed to Preview February 21, 2025 13:06 View deployment

kmagiera reviewed Feb 25, 2025

View reviewed changes

display outlines of rendered React components

520c619

jwajgelt added 16 commits February 25, 2025 15:57

add non-fabric support, block RN Core components

a9155d6

use CSS for styling

45a41a8

add some VirtualizedList components

2736087

use dep from github release

52aca54

format

2825158

add more RN components to blocklist

220e6d7

remove "Open Panel" button for "Outline Renders" tool, capitalize too…

8ccad3c

…l label

send final bounding rect only, fix scaling

fff7122

fix error on Paper when fiber changes between render and measure

d834965

ignore reanimated ignored components

59571be

code review changes

9a0cc88

move react-scan to a dev dependency

5fed939

don't persist Outline Renders tool state

46cc6be

remove empty dependencies field

dffa7fb

code review changes

2a0fe5d

use cleanup from react-scan

08ad7b4

jwajgelt force-pushed the @jwajgelt/render-outlines branch from 36e40bc to 08ad7b4 Compare February 25, 2025 14:57

vercel bot deployed to Preview February 25, 2025 14:57 View deployment

vercel bot deployed to Preview February 25, 2025 15:00 View deployment

update lock

3e88979

jwajgelt force-pushed the @jwajgelt/render-outlines branch from fb4e5da to 3e88979 Compare February 25, 2025 15:03

vercel bot deployed to Preview February 25, 2025 15:04 View deployment

kmagiera approved these changes Feb 25, 2025

View reviewed changes

vercel bot deployed to Preview February 26, 2025 08:22 View deployment

update submodule-NOTICES

d2a5525

jwajgelt force-pushed the @jwajgelt/render-outlines branch from a33dd66 to d2a5525 Compare February 26, 2025 08:23

vercel bot deployed to Preview February 26, 2025 08:23 View deployment

jwajgelt merged commit ec88b73 into main Feb 26, 2025
4 checks passed

jwajgelt deleted the @jwajgelt/render-outlines branch February 26, 2025 08:26

RobPruzan mentioned this pull request Mar 2, 2025

Plugin RFC aidenybai/react-scan#305

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"Outline Renders" tool #967

"Outline Renders" tool #967

jwajgelt commented Feb 14, 2025 •

edited

Loading

vercel bot commented Feb 14, 2025 •

edited

Loading

filip131311 left a comment

filip131311 Feb 18, 2025

jwajgelt Feb 18, 2025

filip131311 Feb 18, 2025

jwajgelt Feb 19, 2025

filip131311 left a comment

kmagiera left a comment

jwajgelt commented Feb 20, 2025

kmagiera left a comment

"Outline Renders" tool #967

"Outline Renders" tool #967

Conversation

jwajgelt commented Feb 14, 2025 • edited Loading

How Has This Been Tested:

vercel bot commented Feb 14, 2025 • edited Loading

filip131311 left a comment

Choose a reason for hiding this comment

filip131311 Feb 18, 2025

Choose a reason for hiding this comment

jwajgelt Feb 18, 2025

Choose a reason for hiding this comment

filip131311 Feb 18, 2025

Choose a reason for hiding this comment

jwajgelt Feb 19, 2025

Choose a reason for hiding this comment

filip131311 left a comment

Choose a reason for hiding this comment

kmagiera left a comment

Choose a reason for hiding this comment

jwajgelt commented Feb 20, 2025

kmagiera left a comment

Choose a reason for hiding this comment

jwajgelt commented Feb 14, 2025 •

edited

Loading

vercel bot commented Feb 14, 2025 •

edited

Loading