1552606 - DevTools rules-view arbitrarily expands my hand-typed `font:` rules to say `font-size:` instead - it unexpectedly interprets ':' as a signal to accept the autocomplete suggestion

Status: NEW

(DevTools :: Inspector: Rules, defect, P2)

Description

[Daniel Holbert [:dholbert]]

What were you doing?

1. Visit any page, e.g. http://www.example.org/ , and inspect an element.
2. In "Rules" DevTools view, click into a rule (e.g. the element { } rule)
3. Type the following text, exactly:
   font: inherit
   (you can use any valid font property-value, e.g. font: 10px serif etc)

What happened?

When I type the : character, the property-name suddenly & unexpectedly expands from "font" to "font-size". So DevTools ends up showing my input as font-size: inherit which is not what I typed.

What should have happened?

Devtools should have accepted the property/value combination that I typed (which was "font", not "font-size")

NOTE: Initially I was guessing that this might affect every shorthand property, but it does not seem to. For example, I can type "border:" or "background:" and DevTools accepts those just fine. It's only "font:" that gets unexpectedly expanded.

I'm using Nightly 68.0a1 (2019-05-17) (64-bit)

Comment 1

[Daniel Holbert [:dholbert]]

Regression range:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=d5d53a3b4e50b94cdf85d20690526e5a00d5b63e&tochange=494289c72ba3997183e7b5beaca3e0447ecaf96d

In that range, I'm guessing this is a regression from:

https://hg.mozilla.org/mozilla-central/rev/7aacc3495dc8b9d93c3ee3421c6ce1326ad36e11
Julian Descottes — Bug 1168246 - part1: CSS autocomplete picks most popular prop;r=pbrosset

It looks like this is autocomplete trying to be helpful, but in fact getting in my way when I really just want to ignore its suggestions and directly type a property:value declaration.

Comment 2

[Daniel Holbert [:dholbert]]

For comparison: in Chrome's devtools, the autocomplete dropdown suggests font-size while I'm typing the word font. But I have to hit Enter or Tab in order to accept that autocomplete suggestion. A colon character, :, does not accept the suggestion there in the way that it does in Firefox's devtools.

Comment 3

[Julian Descottes [:jdescottes]]

This is related to the advanceChars feature of the inplace-editor. For most CSS autocompletes we create inplace-editor instances with advanceChars: ":". The advanceChars handling is at https://searchfox.org/mozilla-central/rev/0078b9e7d42c366b102d7aec918caf64fed1d574/devtools/client/shared/inplace-editor.js#1132-1188

Note that advanceChars can also be a function in case it helps (we use it apparently to handle ";" at https://searchfox.org/mozilla-central/rev/0078b9e7d42c366b102d7aec918caf64fed1d574/devtools/client/inspector/shared/utils.js#32

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: bug1552606.wip.patch

Just a hint for a possible fix. Have not looked at existing test failures, I am sure we would have some. The main issue is that the inplace editor always puts the selected suggestion as the input value. So the issue is not that we "accept" the suggestion on ":", but rather that we don't "undo" the autocompletion.

The patch aboves has the following behavior:

• typing "font:" will create "font:" and move to the CSS value field
• typing "fo:" will create "fo:" and move to the CSS value field
• using ";" in the CSS value field will still accept the completion

I tried to mimic Chrome's behavior here, although the third point seems a bit weird to me. If we are not going to validate-but-not-autocomplete for ":", I think we should do the same for ";".