1488258 - Values in CSS variables autocomplete are cropped

Status: RESOLVED WORKSFORME

(DevTools :: Inspector, defect, P3)

Description

[Julian Descottes [:jdescottes]]

Attachment: autocomplete-values-cropped.png

STRs:
- go to about:newtab (or any page that has css variable)
- open inspector
- edit any CSS rule value
- type `var(--`

ER: Values should be fully visible
AR: Values are slightly cropped. 

This doesn't happen in 62, so regression from 63.

Comment 1

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1488258 - Avoid croping values in autocomplete list; Use intrinsic size for list width

Set the autocomplete list width to the maximum width used by its content (longest suggestion), but constrain it to the DevTools window viewport width. Skip computing it in JS.
Remove explicit width: 100% from the autocomplete item. This will fix the issue with cut-off swatches when suggesting CSS variables with colors. Alternatively, we could have kept the explicit width, but needed to set box-sizing: border-box to account for the swatch element dimensions from adding to the 100%).

The autocomplete list is used in a few parts of the DevTools (CSS Rules view, Markup view, Console, etc.) Please consider if these changes risk breaking the list elsewhere.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Looks the same issue as Bug 1621882, thanks for working on that Razvan :)

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Looks fixed now (maybe by Bug 1582400 ?)