1617543 - Autocomplete popup items are not lined-up with the text

Status: ASSIGNED

(DevTools :: Shared Components, task, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: image.png

Steps to reproduce

1. Open the console
2. Type d

Expected results

The ds of the items in the popup are aligned with the d in the console input

Actual results

They're not (see screenshot)

---

That's because in the code that should take care of this (devtools/client/shared/autocomplete-popup.js#80-90), we may compute the padding while the element isn't displayed.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Victoria, what do you think of this?
Julian says it finds it more disturbing to align the popup labels with the input text.

Comment 2

[Victoria Wang [:victoria]]

Ah, didn't this used to line up, at least in the Inspector Rules autocomplete? (CC Florens: somehow I remember you working on this before?)

See Atom for a nice example of lined up autocomplete text, where the edge of the popup is way to the left. Also I was expecting this type of alignment for the flex/grid alignment helper which will add icons to the left.

Comment 3

[Florens Verschelde :fvsch]

Don't feel strongly about this, aligning the border to the text or the text to the text both work for me, as long as we use one of those alignments and not a random one ^^

We could try it out and see how it feels.

we may compute the padding while the element isn't displayed

Can we hardcode it? If the padding is defined in something like em or ch, we could define it in pixels instead and offset the position by padding_width + border_width.