mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-08 20:58:24 +08:00
Patrick Brosset
1824faf288
There can be many grids on a single page, and therefore many adorners in the Elements tree and many checkboxes in the Layout panel. Users may want to turn several of these grids on so they can see visually in the page how they align. Right now, all grids share the same colors, this makes it hard to know which lines and which labels belong to which grids: Example: https://imgur.com/OqqeFGN.jpg This change introduces some logic to generate a new color for each grid overlay. Only the main color is generated, and an alpha value is used to derive the gap color from it. The labels already match the line colors provided, so no changes needed for this. Example: https://imgur.com/Kja5xNK.jpg To generate colors, we use the HSV format and set the S and V values so that we can go through the whole hue spectrum and keep some consistency between the colors. This does mean, however, that we are limited in how many different colors we can generate (we need to incremenet the H value quite a bit every time to make sure colors aren't too similar). Hence, after 10 colors or so, we circle back. Colors are attributed per nodeId, and stored in a map indexed by those ids. This means that colors are persistent in a user session. In a future CL, we'll make the swatches clickable so users can change the colors. Bug: 1123052 Change-Id: Ie9fa67432230473bcdd438f9b5adf3fce169d165 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2384794 Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com> Reviewed-by: Changhao Han <changhaohan@chromium.org> Reviewed-by: Mathias Bynens <mathias@chromium.org> Reviewed-by: Shane Clifford <shanejc@microsoft.com>
