Open
Bug 1282712
Opened 8 years ago
Updated 2 years ago
Inline visual editor for shape-outside, shape-inside and clip-path
Categories
(DevTools :: Inspector: Rules, enhancement, P2)
Tracking
(Not tracked)
NEW
People
(Reporter: pbro, Unassigned)
Details
Part of meta bug 1242029 which aims at supporting CSS shapes in devtools. - an inline editor opens below corresponding properties, - the editor allows to create a new shape by choosing circle, ellipse, polygon, - the editor allows to switch to shape or point edition mode, - it also allows to choose url() (which expects an image with an alpha channel used to determine the shape), - related nice-to-have: highlight the image's alpha channel in the page, - for shape-outside, the reference box can be changed (margin, content, ...) - highlight the reference box in the page, - display points that are outside of the box differently and show the shape as clipped, - allow to change the reference box, - the editor can also be used for properties inside @keyframes rules in the rule-view, since css shapes are animatable. If the animation is running, the in-page overlay shouldn't move, it should just represent the shape at that particular keyframe, - the editor provides a way to change units used for the points' coordinates all at once: convert all coordinates from px to % for example, - nice-to-have: hovering over coordinates in the rule-view highlights the point in the page - nice-to-have: hovering over a point in the page highlights the coordinates in the rule-view
Reporter | ||
Comment 1•8 years ago
|
||
Comment 0 comes from bug 1242029 comment 14 and is here to provide context. It doesn't mean we should implement all of the bullet point items in this bug. In particular, I'll move the nice-to-haves to other bugs.
Updated•6 years ago
|
Product: Firefox → DevTools
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•