Remove visual and interaction issues in InlineEditorView.

Review Request #13206 — Created Aug. 12, 2023 and submitted — Latest diff uploaded

Information

Review Board
release-6.x

Reviewers

There have been two long-standing issues in our inline editors that have
impacted users in various ways over the years.

First, the act of hiding the edit icon could affect layout by a pixel or
two, depending on its container. We've previously attempted to account
for this by making sure the container with the edit icon was a
sufficient height, but this still didn't fully solve it.

To address this, we no longer outright hide the icon using display.
Instead, we set visibility. This ensures the icon's bounding boxes
remain, preventing any and all layout issues.

Second, sometimes when attempting to click a text field to edit it, the
editor would not open. A second click usually did the trick. This had
the effect of making the editor feel unresponsive.

The reason this happened was that we tried to prevent opening if there
was anything resembling a drag (mousemove in-between a mousedown
and mouseup). This had some problems, though. From testing, it was
possible to get a mousemove that didn't even report different
coordiantes from the mousedown. Also, it's not uncommon to simply move
the mouse slightly when clicking/releasing the mouse button or pressing
down/up on the trackpad.

We unfortunately can't use dragstart to let the browser decide what's
a drag and what's not, since this requires that we mark the editor as
draggable. So instead, we watch the mouse events and see if there's
sufficient movement away from the starting coordinates (over 3px in any
direction). If it's over 3 pixels, we consider it a drag nad cancel
going into edit mode. If it's less, we allow edit mode.

Tested going into and out of edit mode in some cases where I was noticing
sub-pixel jumps. Verified that those were gone.

Tested arbitrarily clicking around on text fields to go into edit mode.
It was reliable 100% of the time.

Tested dragging text and links, and had no trouble.

Tested very carefully dragging just one, two, three, and four pixels at
a time, verifying that the threshold was being met.

Commits

Files