Code Editors: Filter autocomplete suggestions

[melchoyce]

I noticed when playing with some CSS earlier than when you start writing a property, the value brings up an autocomplete panel (awesome!) but it autocompletes with literally every value you can use ever. Is there a way to filter those suggested values by relevance?

So, for example, I do text-transform. The autocomplete values should be uppercase, lowercase, capitalize, none, and full-width, plus inherit, initial, and unset.

Or, color should only suggest colors.

Unsure if this should only be a CSS editor thing or what.

[philipjohn]

We do appear to set some sort of association for this (see https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/codemirror/csslint.js#L3739) but either it's not intended to help with the autocomplete, or it is and it's broken. Needs more investigation, but I'm out of time right now.

[WraithKenny]

Proof of Concept, not stable.

[WraithKenny]

The proof of concept patch is a working patch showing what would be needed to achieve the functionality.

(To test the patch, please enable SCRIPT_DEBUG as it currently breaks the grunt build step because of the class syntax.)

The patch uses a couple utilities from Chrome's dev tools, most significantly, the CSSMetadata class, which does all of the work. (and a shim for Array.pushAll().)

It also copies out a few of CodeMirror's own utilities. (a helper function from the CSS mode, and the default bundled css-hint.js for modification.)

This is really raw code, and a number of improvements can be made to improve it:

• Trim out unneeded code from SDK.CSSMetadata
• Organize the new code into the main file better
• redo getPropertyName()
• maybe not show so many vendor-prefixed values

The code isn't fully complete either. We'd have to import more of the dev tools, specifically, wherever Common.Color is defined. (color based properties are erroring.)

Basically, this shows it can be done, it's just a lot of code.

[WraithKenny]

Note:
​https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/common/Color.js#L688
For teh color object

We'd also need to run the new chunk of code through a transpiler (forgot to mention it in the previous comment).

[westonruter]

This issue was reported upstream in CodeMirror: ​https://github.com/codemirror/CodeMirror/issues/3570

The code that is part of 42213.1.diff​ is adapted from code linked to from there.

Given the size and state of the patch and proximity we are to RC, I'm going to punt this to 4.9.1. Thanks for working out an initial proof of concept!

[afercia]

Or, color should only suggest colors.

Just to note I'm not sure the color hints are a good thing in the first place. CodeMirror suggests named colors: many of them are proprietary and not standardized and using them is generally considered a bad CSS practice.

[melchoyce]

5.0 is only going to include Gutenberg, so I'm punting this to a future release.