CustomGradientPicker: glitchy interactions while adding color stops

[ciampo]

When clicking on the gradient bar to add a color stop:

• it's impossible to add a color stop in proximity of the pre-existing start/end color stops — the "+" simply doesn't appear and clicking doesn't do anything (although I'm not sure if this is by design)
• when the "+" icon appears on hover the gradient bar, I noticed that the icon's position doesn't track perfectly the cursor. This behaviour is more visible as the cursor moves away from the middle and towards the left or the right of the gradient bar. It gets to a point where the "+" icon appears, but clicking with the mouse doesn't fire on the icon (because of its offset)

customgradientpicker-clicking-color-stops.mp4

(originally reported while reviewing #41361 (review))

[andrewserong]

Fix for the icon positioning in #41492 — it doesn't address the logic of when to hide the inserter as in real world usage, that appears to be slightly less of a problem with interacting with the component. Happy to look at that one separately if we get the time 🙂 (it'll be slightly more complex to deal with because the threshold currently deals in percentages).

[ciampo]

Closing in favour of #42994