Show margin and padding of inspected element #666
Labels
enhancement
New feature or request
Comments
Closed
kmagiera
added a commit
that referenced
this issue
Nov 22, 2024
## Changes Fixes #692 This PR is also necessary for #666 This PR aims to fix the issue with inspector stack that not all ancestors of inspected elements are discovered. It turns out that the hierarchy returned by `getInspectorData()` is already missing these ancestors, so we have to traverse the component tree ourselves. The first node is the `closestInstance` in object returned by `getInspectorDataViewAtPoint`. To access parent node of a node, we look at `node.return`. This way we can simply traverse the whole path from first node up to the root. Along the way, we collect all necessary information and create a stack that is returned at the end. We use `getInspectorDataForInstance(node)` renderer function to obtain inspector data for given fiber node. This version is a lot more accurate, from my testing it returns all the most used visible components (like `<View>`, `<Text>`, `<Button>`), which is already an improvement compared to the current solution. ## Demos The following are demos how the inspect stack looks like before and after changes from this PR. The component hierarchy of the app consists of several nested components, which have border for visualization. #### Before https://github.com/user-attachments/assets/39501ea3-9c95-46bb-9a06-9b1db9c6123f #### After https://github.com/user-attachments/assets/414f43f8-62a6-429f-a25e-6ab374dfcab9 ### How Has This Been Tested: **Test 1:** - Open shared app - Expand step - Inspect (right-click) text in step - Make sure all components are in the trace (for example ScrollView) <img width="425" alt="step" src="https://github.com/user-attachments/assets/301fca24-dca9-4c76-a3f5-a869dec0b241"> **Test 2:** - Open shared app - Add after last `Step`: ``` <View> <View> <View> <Text>Nested texts</Text> </View> </View> </View> ``` - Inspect (right click) `Nested texts` - Make sure all 4 Views are visible <img width="377" alt="nested" src="https://github.com/user-attachments/assets/da385ba3-9cb5-43c6-98a9-de5264fbcbb1"> --------- Co-authored-by: Krzysztof Magiera <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This requires several steps
useInspectorThe text was updated successfully, but these errors were encountered: