Node highlight should show node metrics

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Adam Roben (:aroben)]

The node highlight should show the highlighted node's metrics overlaid on top of the node. Firebug uses different colors to show the different boxes. It might be nice to show the actual numbers as well, if we can keep them from obscuring things too much.

[Adam Roben (:aroben)]

<rdar://problem/5732822>

[Adam Roben (:aroben)]

Created attachment 19911 [details]
Show content/padding/border/margin boxes for blocks

Here's a patch that changes our node highlight pretty drastically (screenshot coming). We now outline the content/padding/border/margin boxes for blocks. We don't yet show padding/border/margins for inlines.

[Adam Roben (:aroben)]

Created attachment 19912 [details]
Screenshot of new highlight

Here's what the highlight implemented by attachment 19911 [details] looks like. I think we'll want to tweak this a bit more, at least to make the different boxes more distinguishable. Firebug uses some high-contrast colors that get the job done, but are a bit ugly.

[Adam Roben (:aroben)]

Created attachment 19913 [details]
Firebug's highlight

Here's Firebug's highlight, for reference

[Timothy Hatcher]

Created attachment 19914 [details]
Xyle scope's highlight

[Adam Roben (:aroben)]

Comment on attachment 19911 [details]
Show content/padding/border/margin boxes for blocks

Committed in r31189

[Adam Roben (:aroben)]

Reopening as we may want to show numeric metrics in the node highlight as well.

[Alexander Pavlov (apavlov)]

We've had numeric metrics displayed as a tooltip for a while. Bug 37768 patch slightly changed the appearance of the tooltip but it still contains the element renderer's dimensions. Please reopen if you envision something specific that should be implemented.