Web Inspector: finish the Metrics pane

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

[Timothy Hatcher]

The metrics pane should include:
 * All rectangles that the node includes. This can be 1 or more, e.g. inline nodes that wrap would have a 
rectangle for each line box.
 * Padding, margins, and border sizes.
 * The ability to see the offset location from the parent or the root node in the Inspector popup-menu.
 * Maybe a diagram showing the various metrics point to places on a box.

[Timothy Hatcher]

This was improved in Bug 10168, but we can show more information still.

[Adam Roben (:aroben)]

<rdar://problem/5712922>

[Idan Gazit]

Another idea for the metrics panel: a display of the containing element's dimensions, and a button which jumps focus to the containing element in the inspector.

Without the information about the containing element's dimensions, a lot of mouse gymnastics are required to get this information, and every jump up the tree requires a lot of hunting through the element tree.

Both pieces make debugging the calculated dimensions of an element much easier — I have the necessary parent information handy where I am, and traversing up the tree becomes much more efficient.

[Timothy Hatcher]

Yep, I think that was originally planned, it was this bullet:

 * The ability to see the offset location from the parent or the root node in the Inspector popup-menu.

[Timothy Hatcher]

The "Inspector popup-menu" part was referencing the original HUD Web Inspector. But I think letting you see the offset location from the offset parent or the root element is important still.

[Rob Colburn]

It seems you can now adjust position which is probably the most useful part of offset metrics.  Still, it would be nice to see offsets as well - they get handy when debugging elements inside of overflows.

[Blaze Burg]

The Metrics panel corresponds to the metrics tab in the Styles detail sidebar panel in the new inspector. Please file new bugs for additional features (such as live editing).

[Timothy Hatcher]

Live editing is supported.