Open Bug 945167 Opened 7 years ago Updated 2 years ago

CSS border-radius highlighter


(DevTools :: Inspector, enhancement, P3)



(Not tracked)


(Reporter: pbro, Unassigned)


(Blocks 1 open bug)


(Whiteboard: [creative-tools])


(3 files, 2 obsolete files)

This is part of the meta bug 942176 which aims at providing information overlays for various CSS properties in order to explain how/why they apply.

This bug is for highlighting border-radius and especially explaining how the vertical and horizontal radii are applied.

See the attachment for a draft idea of what that could look like, and see the following video that shows it in action:
Blocks: 942176
Depends on: 916443
Courtesy of Lea Verou for the element used in both the image and video (
Attached patch WIP patch (obsolete) — Splinter Review
This is a work in progress patch to kind of works.
The highlighter is more or less fine, except for missing tests and it probably breaks in cases the page is scrolled or zoomed, ... 
It only works in the rule-view (computed-view should be done too).

This patch requires the patches from bug 916443 to be applied first.
Assignee: nobody → pbrosset
OS: Mac OS X → All
Hardware: x86 → All
Attached image border-highlight.jpg
I've worked a little bit more on the border-radius highlighter.

- arrows and labels are now on the exterior of the element, to ease readability
- arrows are 1px thick instead of 2px also to help readability
- now applied and computed border radii appear

@darrin: as you can see, the goal is to highlight information relative to the CSS border radius when you hover over a "border-radius: something" declaration in the devtools CSS rule view.
The screenshot shows both a simple "border-radius: 3px" declaration and a more complex one with separated vertical and horizontal radii, using several units.

It's in this second use case that this highlighter makes the most sense as it helps understanding where each value applies (it's easy to forget which corner comes first and if horizontal comes before vertical).

I wanted to include these 2 screenshots to ask for your UI/UX feedback as this both needs to look nice and be easy enough to extract information from.
Attachment #8340967 - Attachment is obsolete: true
Attachment #8350349 - Flags: feedback?(dhenein)
Attachment #8340971 - Attachment is obsolete: true
The previous patch misses the following things:

- tracking of the node while visible (scroll, zoom, paint)
- move the borderadius and boxmodel highlighters to separate files
- tests
- getAuthoredStyles doesn't work correctly when border-radius is overridden
- only works on hover of property in the rule-view, should also work with the computed-view
Here's another example of the border-radius highlighter actually helping to understand how border-radius works
*bump* this stuff is awesome, I'd love to see it move forward. Can we at least set a priority?

cc'ing Angelina for interest.
Comment on attachment 8350349 [details]

Looks great ! For the 3px case, I'd personally add a circle zooming in with the arrows showing (kinda like the eyedropper circle).
(In reply to Tim Nguyen [:ntim] from comment #8)
> Comment on attachment 8350349 [details]
> border-highlight.jpg
> Looks great ! For the 3px case, I'd personally add a circle zooming in with
> the arrows showing (kinda like the eyedropper circle).
Very interesting idea. Thanks!
I like the zoom idea. Other ideas:

When architects want to show a small gap they extrude the lines and do the arrows on the outside like this:

Also, we could draw the other 3 'sides' of the ellipse at each corner, which would give you a better idea of the overall symmetry of the corners.
Attachment #8350349 - Flags: feedback?(dhenein)
Whiteboard: [creative-tools]
Severity: normal → enhancement
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
Unassigned myself as I'm not working on this.
Assignee: pbrosset → nobody
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.