autocomplete-popup is not aligned with the caret when editing multiline property value

NEW
Unassigned

Status

DevTools
CSS Rules Inspector
P3
normal
2 years ago
10 days ago

People

(Reporter: jdescottes, Unassigned)

Tracking

Trunk

Firefox Tracking Flags

(firefox50 affected)

Details

Attachments

(1 attachment)

Created attachment 8761115 [details]
multiline-autocomplete-popup-offset.png

The inplace editor for property values of the rule view can use several lines. As soon as the input takes more than one line, the autocomplete popup that can suggest values will be aligned to the left of the input; it will no longer follow the user's caret.

STRs:
1. open inspector on this page
2. in the rule view, create a color property
3. edit the color value with a long string "red blue red blue red blue red blue" until it wraps to a new line
4. start typing a new value to get the autocomplete popup

AR: the popup is aligned to the left
ER: the popup should be aligned with the caret
Our current approach to offset the popup is based on counting the characters in the input, and multiplying it by a measured char width. The offset is far from being pixel perfect already in single line. For multiline we can not even use this, unless we also want to predict where the line breaks. 

A better strategy for this would be to reuse a "measurement" element [1]. With a multiline span as a measurement element, we can use getBoxQuads() to know how long the last line actually is. At the moment we use a "pre" element as measurement element for multiline editors. I think we can use a span here instead. The position:absolute/fixed applied to the measurement element will also need to be handled differently, possibly via adding a container around the measurement element. 

[1] https://hg.mozilla.org/mozilla-central/file/ec20b463c04f57a4bfca1edb987fcb9e9707c364/devtools/client/shared/inplace-editor.js#l390
See Also: → bug 1270494
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3

Updated

10 days ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.