[RFC] Autocomplete Design

[nangtrongvuon]

Xi-Mac Autocomplete

At its core, autocomplete will serve as a guide to the code that the user wishes to type. It should look and feel minimal while not distracting from the coding process. The assumption is most of the time, the user already knows what they’re trying to type - Autocomplete suggestions would then reassure the user of what they’re typing or nudge them slightly to add details to their partial input, so relevant suggestions may keep appearing.

Prominent designs from other editors that feature autocomplete:

VSCode

IntelliSense presents a very minimal yet functional autocomplete interface. The current top result is highlighted, while also providing brief information related to that suggestion and only that suggestion.

The suggestions are colored according to the current input - in the image above, the “l” is colored because the current input has an “l”.

Results also have an accessory view that can be clicked on to expand the autocomplete further, if the user would like to see more information.

For other suggestions, a small icon representing what that suggestion represents is also shown. However, what the icons mean isn’t inherently obvious to the user, and would require a reference on the IntelliSense page or experience with that specific language before it can be made sense of.

Atom

Like VSCode, Atom also has a minimal autocomplete view available. There is less additional info available in results, but it is seen in all results rather than just the current highlight. Instead of icons, an initial for the suggestion type is given (so “V” would be for “variable”, etc)

Suggestions also have their characters highlighted according to the current input, but it is only highlighted with a bold (and not color), which can look very similar to non-highlighted characters at a glance.

With the Java plugin, the autocomplete exposes a lot of information related to that suggestion. This is helpful in Java which is one of the most well known OOP languages. Methods that have the same name may come from very different classes, and letting the user know that distinction is very important.

Sublime Text

Sublime opts for just the list of suggestions. Characters are highlighted to the input, but it looks more noticeable here as compared to Atom due to the black on gray contrast.

Unlike the aforementioned editors, a scroll bar is visible to scroll through more of the suggestions if there are too many. The scroll bar serves as a hint that the current input may be too broad, but it does also add a bit of unnecessary noise to a minimalistic design.

XCode

XCode serves as a primary influence for Xi-Mac designs due to its status as a native Apple product that focuses on development.

Here, the highlighted suggestion has a small information tab below it to guide users on what the document for that completion is. The scrollbar in this image isn’t inherently visible, but there are more results to be seen on scroll.

The type of the suggestion (for example, M for Method), the return type and the method signature is all provided to the user through the autocomplete.

Xi-Mac

So what would Xi-Mac’s autocomplete look like? I believe there’s merits to both the informative design and the minimalistic design presented by various editors above. As such, I’ve decided to go for both approaches.

(Excuse my figma skills, I'm still figuring this out)

Xi-Mac expose a config variable (similar to united_titlebars), called minimal_autocomplete. If it’s true, the more minimal of the design will be chosen, and vice versa. I believe this would open up many possibilities for customization while keeping our aesthetics clean.

The most important features for our autocomplete would be:

• Customizable number of suggestions shown
• Keyboard navigation
• Hidden scroll
• Contrasting colorful design, playing nicely with macOS guidelines

Comments

As always, feedback is very much appreciated 😄 . What do you think of the design, and what would you like to see Xi-Mac autocomplete be like?

[jansol]

NetBeans also has some rather neat code completion / reference features, which I believe deserve being brought up here.

In general I'm very much a fan of what XCode does and approve of the (so far) similar design for xi. Just a couple of notes:

• Add symbol type icons at least to the extended view. Everything besides sublime seems to use them and they do make it much easier to glance over the suggestions
• Stay as consistent as possible with the hover view. After all, inconsistency is the root of all evil

[cmyr]

This looks good @nangtrongvuon!

A few notes:

you'll notice that in all of your screenshots, the start of the current symbol lines up with the start of each item in the suggestions list. You'll even notice that on Xcode, they adjust whitespace to the left in order to ensure that this alignment is consistent. I think this is an important visual cue that we will want to maintain.

I would check out the LSP documentation for completion items; seeing what we get back from language servers may influence our design.

I would check out https://github.com/google/xi-editor/issues/734, which talks about how this will be implemented in core; that may influence some of your thinking as well.

I think it would make the most sense to pick one design first (probably the more full-featured one?) and then to get that working well, and then afterwards we can add the option for a minimal mode.

[ryanbloom]

The white background looks Mac-native, but I also like how Atom and VSCode change it based on the theme. Maybe the theme could control the autocomplete menu when the unified_titlebar preference is enabled?

Ideally themes would have a separate field for the autocomplete menu, but (correct me if I'm wrong) I don't think xi-core can support that yet. An interim solution is to re-use one of the existing colors, like background or gutter.