Clicking the swatch toggles the Shape Path Editor on and off — this is an outline around the shape generated by the CSS shape value, as seen in the browser viewport.
Each vertex of the shape has a drag handle over it — you can click and drag each drag handle to alter the shape — changing both the shape's visual output, and the corresponding CSS shape value in the Rules view.
If the shape is a
polygon(), you can also double-click any edge of the shape to create a new drag handle in that position, and double click an existing drag handle to remove it (and the corresponding vertex) from the shape.
The Shape Path Editor will be enabled by default in Firefox 60 for shapes generated via
clip-path (bug 1405339). You can also use it to edit shapes generated via
shape-outside, but only when you enable it via the