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)

49 Branch
enhancement

Tracking

(Not tracked)

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
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.
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P2
No longer blocks: 1242029
Product: Firefox → DevTools
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.