On a web page, some elements are not just rectangles (SVG elements, inline text, css3 transformed elements, border-radius). The highlighter should be able to highlight correctly these elements.

This is an old bug, some of these things have been done: - the highlighter now highlights correctly line boxes for inline elements, - the highlighter also correctly highlights transformed elements (plus a special transform highlighter can be used from the rule-view), The el.getBoxQuads function helped a lot with those. About border-radius, I'm not so sure the highlighter should show this. If you take a rounded-corner floated div for example, the inline content will wrap around its margin-box, without taking the rounded-corner into account (unless shape-outside:margin-box is used, but css shapes aren't yet supported in firefox anyway). So that leaves us with SVG shapes, which I agree, the highlighter should be able to highlight correctly. So, repurposing this bug for SVG.

Note like in HTML's el.getBoxQuads() you can get the coordinates and dimensions of an SVG graphics element via el.getBBox(), so it should be relatively easy to create a highlighter for it. Sebastian

(In reply to Sebastian Zartner [:sebo] from comment #3) > Note like in HTML's el.getBoxQuads() you can get the coordinates and > dimensions of an SVG graphics element via el.getBBox(), so it should be > relatively easy to create a highlighter for it. Unfortunately, this seems to only return the coordinates of a rectangular box around the SVG element. I think the goal here is to highlight exactly the shape of SVG elements. el.getBoxQuads() is pretty cool because it gives us post-transform coordinates, but it always gives us a quadrilateral, it won't give us the post-transform coordinates of all of the SVG element's points (of course, that might not always be possible, if you have a skewed circle for instance).

(In reply to Patrick Brosset <:pbro> from comment #2) > About border-radius, I'm not so sure the highlighter should show this. If > you take a rounded-corner floated div for example, the inline content will > wrap around its margin-box, without taking the rounded-corner into account > (unless shape-outside:margin-box is used, but css shapes aren't yet > supported in firefox anyway). FWIW, previously I changed Firebug's inspector highlighter frame to take the border-radius into account in order to make it visually more appealing. Though there's to note that border-radius, shape-outside and Co. do *not* change the box model[1] (even not shape-outside:margin-box). So I think it's better to keep the highlighter as it is for those cases. In order to highlight SVG elements I see two solutions: 1. Introduce a function similar to el.getBoxQuads(), which returns the post-transform coordinates of all vertices of the shape. 2. Highlight the elements by cloning them into the highlighter, apply appropriate styles and transform them the same way as on the page. Sebastian [1] https://drafts.csswg.org/css-shapes/#relation-to-box-model-and-float-behavior