985951 - [box model] Start regions with some transparency and remove it when hovering each region

Status: RESOLVED WONTFIX

(DevTools :: Inspector, defect)

Description

[Brian Grinstead [:bgrins]]

When hovering padding, for instance, the padding region would become the fully opaque #66cc52, while when not hovered it would have a different color based on whether it is on the light theme or dark theme.

To get the starting colors for light and dark theme, we could just measure the computed color for each region when inspecting an element with the same BG color as the sidebar and use that hex value.

To trigger the correct hovered elements we will need JS so that it wouldn't also hover outer nodes (like when you hovered padding then margins and borders would also be :hover in CSS).

Comment 1

[Brian Grinstead [:bgrins]]

jsfiddle for measuring the hex value of an inspected element with sidebar background colors (screenshot incoming): http://jsfiddle.net/bgrins/2Rkun/

Comment 2

[Brian Grinstead [:bgrins]]

Attachment: hex-values-light-sidebar-bg.png

Comment 3

[Brian Grinstead [:bgrins]]

Attachment: hex-values-dark-sidebar-bg.png

Comment 4

[Brian Grinstead [:bgrins]]

Comment on attachment 8394321 [details]
hex-values-dark-sidebar-bg.png

Darrin, I think these seem a bit dark, but if anything that would be an argument to use more opacity than .4 on the page overlay.  You can see this by inspecting the dark element at http://jsfiddle.net/bgrins/2Rkun/.  If you think this is fine, all we need to do is eyedrop each region for this and the light theme screenshot to get the non-hovered bg colors for each region.

Comment 5

[Brian Grinstead [:bgrins]]

I think we need to actually to only highlight the relevant region when hovering the associated region in the box model panel.

Comment 6

[Brian Grinstead [:bgrins]]

Going to close this in lieu of bug 938188