945167 - CSS border-radius highlighter

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

Attachment: Screen Shot 2013-12-02 at 10.09.27 AM.png

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: 
http://people.mozilla.org/~pbrosset/border-radius-highlighter.mov

Comment 1

[Patrick Brosset <:pbro>]

Courtesy of Lea Verou for the element used in both the image and video (http://lea.verou.me/humble-border-radius/)

Comment 2

[Patrick Brosset <:pbro>]

Attachment: WIP patch

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.

Comment 3

[Patrick Brosset <:pbro>]

Attachment: 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.

Comment 4

[Patrick Brosset <:pbro>]

Attachment: bug945167-border-radius-highlighter WIP 2.patch

Comment 5

[Patrick Brosset <:pbro>]

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

Comment 6

[Patrick Brosset <:pbro>]

Attachment: Screen Shot 2013-12-20 at 9.46.38 AM.png

Here's another example of the border-radius highlighter actually helping to understand how border-radius works

Comment 7

[Jeff Griffiths (:canuckistani) (:⚡︎)]

*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 8

[Tim Nguyen :ntim]

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).

Comment 9

[Patrick Brosset <:pbro>]

(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!

Comment 10

[Joe Walker [:jwalker]]

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: http://www.aps.anl.gov/APS_Engineering_Support_Division/Design_and_Drafting/DDStandards/fig6_1.gif

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.

Comment 11

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 12

[Patrick Brosset <:pbro>]

Unassigned myself as I'm not working on this.