Bug 22533 – different color for margin and padding in the Web Inspector

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

[Vincent van den Heuvel]

It would be very nice to have a different color for margin and padding in the Web Inspector, like Firefox does (only mac style)

[Bart S.]

To add to this, it would be nice if nothing got additional borders (besides borders themselves changing color, so I know they belong to that element). It ends up making it less obvious what the boundaries of the element and its margin/padding are with the extra pixels around them. And it also makes it hard to see when an element does have a border specified.

This is my #1 pet-peeve about Inspector over Firebug. I never feel comfortable using it for visual things because the boundaries of things feel imprecise and ambiguous.

[Bart S.]

Created attachment 79757 [details]
Firebug element highlighting

[Bart S.]

Created attachment 79758 [details]
Inspector element highlighting

[Bart S.]

I just downloaded a new nightly build and am surprised this is still not addressed. I attached screenshots showing the difference between Firebug and Inspector's element highlighting. In Firebug, the yellow is a margin (in this case negative top margin) and the purple is the padding. The boundaries of the element and its margins/padding/border are much clearer with the different colors and not having Inspector's outlines that make the element look a pixel wider than it really is.

[Bart S.]

Comment on attachment 79757 [details]
Firebug element highlighting

(Just a minor FYI, the same element in this screenshot is highlighted as in attachment 79758 [details]. I accidentally took this screenshot with the <a> selected but the highlights are for <header> like in the other screenshot. I don't have the option to swap out this image in Bugzilla in case that adds confusion...)

[Blaze Burg]

This is included in the new inspector. Cheers!