Bug 17221 - Node highlight should show node metrics
Summary: Node highlight should show node metrics
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Enhancement
Assignee: Nobody
Keywords: InRadar
Depends on:
Blocks: 17777
  Show dependency treegraph
Reported: 2008-02-08 13:41 PST by Adam Roben (:aroben)
Modified: 2011-09-06 07:46 PDT (History)
2 users (show)

See Also:

Show content/padding/border/margin boxes for blocks (8.13 KB, patch)
2008-03-20 15:27 PDT, Adam Roben (:aroben)
no flags Details | Formatted Diff | Diff
Screenshot of new highlight (37.11 KB, image/png)
2008-03-20 15:28 PDT, Adam Roben (:aroben)
no flags Details
Firebug's highlight (11.19 KB, image/png)
2008-03-20 15:51 PDT, Adam Roben (:aroben)
no flags Details
Xyle scope's highlight (36.30 KB, image/png)
2008-03-20 15:56 PDT, Timothy Hatcher
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Adam Roben (:aroben) 2008-02-08 13:41:02 PST
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.
Comment 1 Adam Roben (:aroben) 2008-02-08 14:16:18 PST
Comment 2 Adam Roben (:aroben) 2008-03-20 15:27:13 PDT
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.
Comment 3 Adam Roben (:aroben) 2008-03-20 15:28:10 PDT
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.
Comment 4 Adam Roben (:aroben) 2008-03-20 15:51:16 PDT
Created attachment 19913 [details]
Firebug's highlight

Here's Firebug's highlight, for reference
Comment 5 Timothy Hatcher 2008-03-20 15:56:48 PDT
Created attachment 19914 [details]
Xyle scope's highlight
Comment 6 Adam Roben (:aroben) 2008-03-20 15:59:23 PDT
Comment on attachment 19911 [details]
Show content/padding/border/margin boxes for blocks

Committed in r31189
Comment 7 Adam Roben (:aroben) 2008-04-14 13:15:18 PDT
Reopening as we may want to show numeric metrics in the node highlight as well.
Comment 8 Alexander Pavlov (apavlov) 2011-09-06 07:46:58 PDT
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.