1850486 - devtools - make enter / tab autocomplete CSS value without going to next property

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[juraj.masiar]

Attachment: Recording 2023-08-29 095702.mp4

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0

Steps to reproduce:

The autocomplete for the CSS functions in the dev-tools is currently not very user friendly.
STR: see the attached video or do this:

1. write "filter" + Enter (or Tab)
2. write "hue" + Enter (or Tab)

Actual results:

Invalid style is auto-completed:

filter: hue-rotate;

Expected results:

filter: hue-rotate(<place_cursor_here>);

Currently both Tab and Enter keys will wrongly autocomplete function name without parameters or parentheses, thus creating invalid style.
The workarounds are:

• write whole function name without autocomplete
• press RIGHT arrow key (not reachable by any finger without moving your hand)

This would help A LOT, thank you :)

Comment 1

[Simona Badau, Desktop QA]

Moving this to DevTools > Inspector component to allow our engineers to examine it more closely. If this is not the right component, please move it to a more appropriate one. Thanks!

Comment 2

[Julian Descottes [:jdescottes]]

thanks for filing, overall it makes sense to avoid jumping to the next property if you are using an autocomplete on a value in the ruleview