mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
53c9f81049
## Summary When using React DevTools to highlight component updates, the highlights would sometimes appear behind elements that use the browser's [top-layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer) (such as `<dialog>` elements or components using the Popover API). This made it difficult to see which components were updating when they were inside or behind top-layer elements. This PR fixes the issue by using the Popover API to ensure that highlighting appears on top of all content, including elements in the top-layer. The implementation maintains backward compatibility with browsers that don't support the Popover API. ## How did you test this change? I tested this change in the following ways: 1. Manually tested in Chrome (which supports the Popover API) with: - Created a test application with React components inside `<dialog>` elements and custom elements using the Popover API - Verified that component highlighting appears above these elements when they update - Confirmed that highlighting displays correctly for nested components within top-layer elements 2. Verified backward compatibility: - Tested in browsers without Popover API support to ensure fallback behavior works correctly - Confirmed that no errors occur and highlighting still functions as before 3. Ran the React DevTools test suite: - All tests pass successfully - No regressions were introduced [demo-page](https://devtools-toplayer-demo.vercel.app/) [demo-repo](https://github.com/yongsk0066/devtools-toplayer-demo) ### AS-IS https://github.com/user-attachments/assets/dc2e1281-969f-4f61-82c3-480153916969 ### TO-BE https://github.com/user-attachments/assets/dd52ce35-816c-42f0-819b-0d5d0a8a21e5 |
||
|---|---|---|
| .. | ||
| src | ||
| constants.js | ||
| e2e-regression.html | ||
| e2e.html | ||
| index.html | ||
| multi.html | ||
| package.json | ||
| perf-regression.html | ||
| README.md | ||
| webpack-server.js | ||
Harness for testing local changes to the react-devtools-inline and react-devtools-shared packages.
Development
This target should be run in parallel with the react-devtools-inline package. The first step then is to run that target following the instructions in the react-devtools-inline README's local development section.
The test harness can then be run as follows:
cd packages/react-devtools-shell
yarn start
Once you set both up, you can view the test harness with inlined devtools in browser at http://localhost:8080/