mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-09-30 09:17:09 +08:00
Changhao Han
12b3841881
This CL fixes the render flash of the metrics widget (box model) while changing inspected nodes in DevTools Elements tab. The issue is an inherent side effect of how the metrics widget and the matched styles widget are designed to render. They are separate widgets that are put together under the same parent widget, and no render timing is synced between. Whenever the inspected node is changed, they both will fire some CDP calls and re-render when the calls resolve. This means any one of them can be rendered first while the other waits for CDP calls, and usually the metrics widget wins. This issue did not exist before https://crrev.com/c/2562851 because it didn't clear previous matched styles sections while changing nodes. Now that previous styles sections are cleared, the metrics widget will re-render first while the styles section is empty, resulting in this render flash. This CL introduces a StylesUpdateCompleted event that fires when the Styles sections are re-populated, so that the render timing can be synced and thus ordered between the matched styles widget and the metrics widget. Fixed: chromium:1155456 Change-Id: I2f5d64dd046f39e483f7501a4b17d6358cd8d5df Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2577564 Commit-Queue: Changhao Han <changhaohan@chromium.org> Reviewed-by: Alex Rudenko <alexrudenko@chromium.org> Reviewed-by: Mathias Bynens <mathias@chromium.org>