tree db8c8d25a07132d7ca00400d389db0a2efcb0323
parent 33f773352d26e75f5877f1c2dfeaeaf5749be5df
author Patrick Brosset <patrick.brosset@microsoft.com> 1614792490 -0800
committer Commit Bot <commit-bot@chromium.org> 1614794115 +0000

Highlight flex items on hover of flex/grow/shrink/basis properties

This extends the number of properties we highlight on hover in the
styles pane to flex, flex-grow, flex-shrink and flex-basis.

Now that we have a flex item overlay that shows an arrow indicating if
an item grew or shrank, we can use it to nicely inform users about what
these properties do when they hover over them in the styles pane.

To do this, the only necessary changes are the ones in StylesSidebarPane
and OverlayModel.

The rest of the code is for this one edge case: when an item is also a
container, we normally don't draw the item overlay. So in our case that
means we wouldn't draw the flexibility arrow when hovering over flex:1
if that element was also a flex container.
To avoid this, we check if there actually is any (non-transparent) flex
container config passed to the overlay. If there isn't, we can safely
draw the flex item overlay.

Demo: https://imgur.com/g7UtduW

Bug: 1173995
Change-Id: I6236e869ea88b889ba274dbf37601e90a8c94e84
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2729506
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>