mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-10 21:54:47 +08:00
Sigurd Schneider
b15de2ee0a
The new icon component used a display: inline-block span in its shadow DOM to display the icon as background of said span. The problem is that inline elements have two heights: a line box and a content box. The content box is correctly sized, but the line height is dependent on other factors (some outside of the actual component) such as font selection and line leight. This resulted in the icon component getting a /different/ height that what was specified. See the screenshots at here for an example: https://imgur.com/a/reKweWU This alignment problem was mitigated in the code-base by all kinds of paddings and margin setting (some of which are undone in this CL). This CL changes the span in the shadow DOM that has the actual icon as background to a div by setting the display: block style. This ensures that the height of the icon component is computed as intended, and in turn, a bunch of "correction" values in a bunch of places can be removed. Screenshot: https://imgur.com/a/reKweWU Bug: chromium:1126031 Change-Id: Ibe26f81817e0ef6e9564553ace070e61d75006c4 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2629550 Commit-Queue: Sigurd Schneider <sigurds@chromium.org> Reviewed-by: Peter Marshall <petermarshall@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>