Open Bug 1451740 Opened 6 years ago Updated 2 years ago

Make moving a circle/ellipse shapes less confusing when its radius is implicitly set to closest/farthest-side

Categories

(DevTools :: Inspector, enhancement, P2)

enhancement

Tracking

(Not tracked)

People

(Reporter: pbro, Unassigned)

References

(Blocks 1 open bug)

Details

STR:
- go to http://labs.jensimmons.com/2016/examples/shapes-1.html
- open the inspector and inspect the tomato image
- enable the shape editor with the icon next to the shape-outside property
- grab the center point in the page and move the shape around

==> The circle's radius changes, which is expected because no radius was set on the shape and therefore it's radius is implicitly defaulting to closest-side.

The goal of this bug is to avoid people being confused by this, giving them a chance to understand how css shapes work.

The idea discussed so far is:
show the radius somehow in the shape. This could either be a label that follows the mouse around while moving the center point. Or a radius line drawn in the circle, with a label showing the radius value.

Whatever we choose, the important bit is giving the user the current value for the radius: so either its actual value when there is one explicitly defined, or "closest-side" when there isn't.
A low hanging-fruit fix would be to populate the implicit radius in the rule view as explicit "closest-side". This doesn't fix the expectation from the highlighter, but it draws attention to the value in the rule view.
Product: Firefox → DevTools
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.