Clicking the swatch toggles the CSS shapes highlighter 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 CSS shapes highlighter was enabled by default in Firefox 58 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