Question

I’ve written a Eclipse plug-in for live coding in Python that adds a display column to the PyDev editor. In that column, it shows how variable values change as the code runs, including multiple columns for loops or repeated function calls. The display is updated as you edit the code.

My question is this: how can I cleanly extend the PyDev editor to add this extra column that will scroll vertically with the source code, and scroll horizontally to show many columns in a long-running loop? My vision is to create something like the window you get when you compare two text files, but still let the user edit the Python code and use the PyDev editor’s syntax highlighting. For now, I’m only displaying text, but I’d also like to be able to display graphics in this column.

My current hack to get the first release working is to subclass the line number ruler and replace the line numbers with my own text. That’s really ugly, particularly the way I implemented horizontal scrolling.

If anyone on the PyDev team is interested in merging the feature or exposing some extension points to make it work better, I’m happy to do the grunt work and make a pull request. I do need some guidance, though.

The idea came from Bret Victor’s talk, Inventing on Principle, particularly the section at 17:30-21:30. If you want to see what I’ve implemented so far, I posted a demo video, as well as a walk-through.

Here’s an example display for a binary search algorithm. (The display is on the left, the code is on the right.)

                        # echo on                               
                        # echo width 40
n = 4 a = [1, 2, 4]     def search(n, a):
low = 0                     low = 0
high = 2                    high = len(a) - 1
        |                   while low <= high:
mid = 1 | mid = 2               mid = (low + high) / 2
v = 2   | v = 4                 v = a[mid]
        |                       if n == v:
        | return 2                  return mid
        |                       if n < v:
        |                           high = mid - 1
        |                       else:
low = 2 |                           low = mid + 1
                            return -1

i = 2                   i = search(4, [1, 2, 4])

Answer 1

After some helpful hints from Ingo and Fabio on the PyDev team, I’ve made some progress. The main hint was to create an extension for org.python.pydev.pydev_pyedit_listener and register for the onCreatePartControl event, then wrap another composite around the regular PyEdit control. The SWT widgets reference was helpful for learning how to build the extended interface.

Another challenge was synchronizing the two scroll bars. It seems like you have to register for the onCreateSourceViewer event, and then register a view port listener.

I posted a sample project on github to demonstrate the technique.