Labs/Bespin/DesignDocs/CodeCompletion

We want to help developers write code. One way to do so if to give them quick information on errors, and also options as they type.

Malte Ubl has created bespin.editor.codecompletion which currently analyzes the current source file (and knows about a few special chaps like "bespin") and uses that information to share possible code completion paths for you.

There are a few todo actions:

Add nice UI to completion

Here is a mockup of two forms of undo. Images for the implementation are provided at the bottom of this page!

First up is the scenario where there is one potential guess of what you are typing:

As you can see, there is a light grey completion inline, and if the user hits TAB it will complete.

What if there are multiple options?

Here a drop down shows the options available. The first option should be highlighted and UP and DOWN arrows can get you through the list. If the completion is a literal completion of the word that is being typed it should have the greyed out effect as the single option has above. This means that text can rotate as you go through the options.

However, if in the future we have more advanced completion where something like "gFB" shows a completion for "getFoobar" then we do NOT show the grey.

Completion Engine

As mentioned, we started off with a simple notion of completion, but in the future we would like to have metadata that is used to do more advanced completion. The project as a whole will publish analysis data into a metadata structure that is shared. This structure will allow the lookup engine to complete on an object that is created elsewhere.

We should look into how we can use hints to tell the system what is happening. Libraries are using various sources right now, such as SJDoc and OpenAjax has taken that on pretty much as is. This means that we can analyze the doc formats to grok libraries such as Dojo, Prototype, jQuery, and anything that is marked up.

We also want to experiment with real time analysis where we probe objects themselves to find out which methods they have.

Snippets

This work all ties into snippets, which will be spec'd out in a separate design document.

Images for Implementation

You will find the sliced images in the frontend/images directory with the prefix codecomp_*

This includes:

frontend/images/codecomp_btm-lft.png
frontend/images/codecomp_btm-mid.png
frontend/images/codecomp_btm-rt.png
frontend/images/codecomp_item-bg.png
frontend/images/codecomp_lft.png
frontend/images/codecomp_mid.png
frontend/images/codecomp_rt.png
frontend/images/codecomp_top-lft.png
frontend/images/codecomp_top-mid.png
frontend/images/codecomp_top-rt.png