Source Tree

Posted by icampana on 2008-02-21 16:10 |
Iván Campaña
Wed, 2011-03-23 18:18
  • : 4.0 - 6.*
  • : 4.0 - 6.*

This simple extension for Komodo Edit adds a new tab with the list of the functions, classes and methods of the current file, double clicking an item moves you to the line of that item. Can now also filter items on the tree.

This extension tries somehow to mimic the functionality available in Komodo-IDE, even though in a very basic way, it is not intended to replace it.

Finally now it has preferences to set it to be either on the left or on the right side tabs

Has support for Python source code with one level of subclassing, SQL support (thanks to Matt Keranen), CSS support and partial Javascript method identification(thanks to Jason Hendry), Perl support (thanks to mmueller), TCL support (thanks to dgroth), Ruby support (thanks to raldred), C++ (thanks to noop) and support for PHP and Javascript, comments are welcome.

Known bugs:

  • Functions in PHP should not have spaces on front of its definition.
  • Cannot parse multi-line declarations when the language uses braces.

Error reports and code contributions, please include them in this forum:

SourceTree Snapshot

adam | Tue, 2008-10-28 01:11

At first, thanks for cool extension. It's really useful.
I've installed and tested it and I have a few suggestions and questions:

1. Why it's on the right pane? It's more comfortable to have all extensions as tabs on left pane. Is this configurable and where?

2. It looks like don't like the Qwin extension. Don't work when both installed and strange things happend.

3. That would be really awesome to display also vars (like in Komodo IDE).

adam | Fri, 2008-11-07 01:54

I've discovered one more thing. It really slows down when I have lot of functions in my document (more than 20). When I have opened several files in komodo and try to switch between, it hangs up for good 3-6 seconds trying to view document with lot of functions.

icampana | Fri, 2008-11-07 11:14

I've been testing the extension against some big files(a PHP file 6153 lines of code, 200KB with at least a 100 functions) and it gets parsed in less than a second, maybe it is something with your files, remember that this extension has to parse the whole text be able to understand the functions and create the tree, if you have some more info I could try to figure out what's happening.



adam | Wed, 2008-11-19 02:00

This happend on Komodo Edit, version 5.0.1, build 2537, platform win32-x86. When I have opened two php files (e.g. cakephp controllers) with classes with lot of methods (more than 10 and more than 1000 lines of code) and I'm trying to switch beetwen this files cliclikng on tabs. It takes a few seconds to switch.
Maybe your extension interfere with other extension. I have such problems in past with another extensions (probably qwin, I don't remember).

Another problem is that the sourcetree extension doesn't work with JSTreedrive extension enabled (on my machine). Can anybody confirm that?

andybak | Thu, 2008-11-20 09:23

I can confirm that it doesn't work with JSTreeDrive but as other extensions also stop working when I enable this I would imagine it's the fault of JSTreeDrive

joker | Sat, 2008-11-22 09:17

Problem is that Komodo Edit no tabs "codebrowserviewbox"

You can fix it like this...

--- sourcetree.jar\content\overlay.xul
+++ sourcetree.jar\content\overlay.xul
@@ -32,11 +32,11 @@
 <!-- codebrowser_tab -->
     <tabs id="project_toolbox_tabs">
-        <tab id="sourcetree_tab" label="Source" insertafter="toolbox_tab"
+        <tab id="sourcetree_tab" label="Source" insertafter="project_tab"
              tooltiptext="Source Tree"/>
     <tabpanels id="project_toolbox_tabpanels">
-        <tabpanel flex="1" id="sourcetreeviewbox" insertafter="codebrowserviewbox">
+        <tabpanel flex="1" id="sourcetreeviewbox" insertafter="projectviewbox">
                <vbox flex="1" id="sourcetree-vbox">
                    <hbox align="center" id="sourcetree-tabpanel-hbox">

qwavel | Mon, 2008-12-01 14:39

I'm having the same problem - using Komodo Edit v5.0.2 with JSTreeDrive and Source Tree.

The fix described is a bit beyond me so I'll just wait for the next release.

Glad to see it mentioned though so I know that it's not something I'm doing wrong.

nathan | Sat, 2008-11-15 12:42

The new version seems to be on the left sidebar, I personally prefer having it on the right.. any way to configure this??

aaronott | Wed, 2008-11-19 11:05

I've found that it's much easier to use this extension when it's on the right sidebar. I use the left sidebar to open files and the right sidebar to view the source in the file. I understand there are conflicting views on this but if it were configurable, it'd make everybody happy.

icampana | Wed, 2008-11-19 11:10

I do want it to be configurable, but since my knowledge of XUL and its friends is pretty much basic (this is the first extension I ever do) I have to dig a little bit more, I have received some suggestions, but I'll have to test first and learn how to implement it.

I'll let everybody know when I get something sorted out

Following the falling stars

ctasada | Tue, 2008-11-25 10:53

Checking in the forums I found this url:

You only need to open the sourcetree.jar file and edit the /content/overlay.xul file.

There look for all the "project_toolbox_tabs" ids and replace them for "project_toolbox_tabs"

Restart Komodo and you're done :)

icampana | Tue, 2008-12-02 05:47

Finally now it has preferences to set it to be either on the left or on the right side tabs.

Also corrected the bug that made it fail with some extensions, please test.



adam | Thu, 2008-12-04 09:26

Works now wit JSTreeDrive, but still hangs for few seconds when switching open documents ;-(
Maybe it should cache once created structure?

adam | Fri, 2008-12-05 04:38

I've check it again and noticed that the slow switching is caused by class definitions. When I've got file with simple functions, it work fine, very fast, but when there is a class defined it slows. More methods in class - more time needed to refresh structure and to switch to this document.

persod | Thu, 2008-12-04 10:36

Thanks, really great extension. But now where do I find the preferences to change it to right side tab?

adam | Fri, 2008-12-05 04:27

Edit/Preferences/Appearance/Source Tree

persod | Fri, 2008-12-05 15:36

Thanks, perfect now!

ericthelin | Sun, 2009-01-11 11:21

The search box seems to be set to an exact size. This forces whichever pane that contains sourcetree to have a minimum size that is much larger than it would otherwise be. Would it be possible to change the code for input size to whatever the search box in the project and toolbox panes already use?

A second idea is to add keystroke bindings so that I can toggle between the original use of the pane and sourcetree. Or maybe there is a way that I can do this already. If so please tell me.

Btw. Sourcetree rocks!!

grbradt | Thu, 2009-01-29 14:43

Just downloaded, get nothing for .js files.

qwavel | Thu, 2009-03-05 15:14

It appears to sort functions in alphabetic order. I would prefer that they were listed in the same order that they appear in the file.

I haven't found an option to let me make this change, so I am requesting it as a new feature.


benw04 | Thu, 2009-03-26 17:08

> I haven't found an option to let me make this change, so I am requesting it as a new feature.

Edit -> Preferences -> Appearance -> Source Tree -> Ordering

Tick it to sort by alpha, and untick it to sort by file order.

Note that there's a bug in 0.7.2 that means functions don't appear at all if you've got sorting off; I've sent a patch to icampana that fixes that bug (amongst other things), so hopefully this will be fixed in the next release.

- Ben

ronny | Wed, 2009-03-18 00:10

Hi, downloaded this week. To get a list in my pure c file, I need to have the checkbox "order functions alphabetically" checked. Otherwise I get an empty list. I love the extension anyway, thanks a lot!

benw04 | Wed, 2009-03-25 23:42

OK, so, the lack of sorting on methods in the source tree was bugging me, so I've spent some time trying to get it running.

I reckon I've got method sorting working now (I haven't got Class sorting working, as it's a bit more complicated when method sorting is involved as well). I've also made the sort case-insensitive.

Is there somewhere I can contribute my code so other people can test it and play with it?

- Ben

benw04 | Wed, 2009-03-25 23:41

As well as the method sorting changes above, I've also made a couple of changes to the search box at the top of the sidebar panel.

It now expands with the width of the sidebar, and it's got the komodo-like styling (rounded corners with a magnifying-glass icon on the left-hand side).

Is there somewhere I can contribute my code so other people can test it and play with it?

- Ben

nathan | Thu, 2009-04-16 13:41

Error reports and code contributions, please include them in this forum:

meddington | Sat, 2009-05-23 19:10

Nice plugin, I'd like to see the classes sorted too. Some of my source files have 30 or more classes, easier to locate if they are sorted :)


mmitchell_riccagroup | Tue, 2009-06-23 07:09

Would it be possible to support the following JavaScript class structures. The first is a plain type of javascript class the second is one you could create with the protoptype.js framework. Komodo's built in code view recognizes the first style but not the second. This extension recognizes neither and it would be very helpful if it could.

// Supported by Komodo "code view"
// Not supported by the "source view"
var myClass = {
    property_1 : 'test',
    myFunction : function(arg1, arg2) {

// Not Supported by Komodo "code view"
// Not supported by the "source view"
var myProtoClass = Class.create({
    property_1 : 'test',
    myFunction : function(arg1, arg2) {

pfhat | Thu, 2009-08-27 09:54

I might be reading this wrong but technically myClass in the code above is an object, not a function. If you changed it to
function myClass(){...}
it should be recognized, and the javascript functionality should be the same as the difference between objects and functions is pretty blury in that context. I would do something like this

function MyClass(inID)
    this._privateID = inID;
MyClass.prototype.printId = function()
    console.log('' +this. _privateID);

and then something like

var myClassInstance = new MyClass('35');

davestewart | Wed, 2010-08-18 04:45

Hey, I was really interested to read this post, but unfortunately that doesn't really provide a very intuitive solution either.

The tree just shows:


When I would expect something like this:

 +- printId
 +- alertId

Also, the OP mentioned the Prototype style of creating collections of functions, which is pretty much the same way all the modern JavaScript libraries (jQuery, MooTools, etc) do it these days, with an object containing function literals:

var collection =
    func1: function() {},
    func2: function() {}

It would be really useful if that could be implemented!

Also, to think about is:

function Collection()
    this.func1= function(str)

But the first one is certainly most preferable.

It would be great to hear your thoughts,

machine | Fri, 2010-09-03 21:57

I think they are already implemented. At least in a version I use
I'm not sure about the style with opening brace in new line. I'll check this out and upload a fix when I'll have some time.

davestewart | Tue, 2010-10-12 02:41

Hey, thanks for the reply.

I just tried installing the extension from the link you supplied, in Komodo Edit 6.0 (which I downloaded yesterday) and although I get the panel, it's completely blank for all files.

Any ideas?


machine | Tue, 2010-10-12 05:57

A little more patience. I'm completely crazy working on brand new shiny

NST - New Source Tree, which will be uploaded here, at ActiveState.

I took only the XUL and config from the original one, the rest is completely rewritten to make impossible happen: full unlimited nesting in JavaScript support and more. If I only knew how much work will it take... I'd probably do it anyway :) For example PHP analyser is brain dead simple compared to this. Imagine - 14 sleek icons remade from Visual Studio to mark all those private, protected, public, and static stuff. Collapsible media queries in CSS, regular and jQuery prototype support :) Tree sorting by type / name, dynamic filtering... Geez - NST rocks, it just misses all those languages, but of course they are planned for future releases. Now there's JavaScript, PHP and CSS, just as "proof of concept". It's pretty usable right now.

davestewart | Wed, 2010-10-13 05:52

I'll keep my eye out for a release / url.

Sorry to say that my my kitten kill-count is probably pretty high today (have been developing in AS3) I do hope you can find it in your heart to forgive me!


machine | Wed, 2010-10-13 06:19

AS3 you say? You're killing me (it took me last 3 nights in a row to make NST) :) OK,, but, no AS3 yet, I'll add it in, let's say v0.21, since AS is so similar to JS the same line parser can be used, only different keywords and some syntax details. For now you can test it with JS, PHP, CSS, XML, HTML and XUL. Definately I'll have to add AS, C++ and Python soon. I don't 'speak' those languages, but I think they will be a lot easier to implement than JS with its closure based object freestyle voodoo. Python looks so tidy anytime I see a code, no matter who wrote it.

davestewart | Wed, 2010-10-13 08:32

I'm in the middle of writing a jQuery-style framework for it:

So your add-on is really very handy indeed. Looking forward to testing the files in a moment!


dimituri | Mon, 2009-07-06 06:33

Hi, loving your extension. It, along with JSTreeDrive, was the cornerstone of my decision to switch to Komodo Edit. :]

Just here to ask, if it's possible to properly support the display of CSS declarations other than these:

selector, selector {

I'm used to putting the curly bracket on the next line like so:


And this way I get a list of green-dotted empty items in the Source panel (currently using version 0.7.5).

Thanks in advance.

thesmaw | Thu, 2009-08-20 02:48

I've come across a similar error to the one mentioned above regarding conflicts with the JSTreeDrive extension.

This error occurs when the Source Tree panel is set to the live in the right panel of Komodo. If an additional panel is needed in the right panel area (e.g. kJSLint), it conflicts with Source Tree.

I believe the problem is at line 37 of Source Tree's overlay-right.xul:

Looking in komodo.xul, there is no tabpanel with the id="toolbox_tabpanel". Rather, I've managed to get the extension playing well with others in the right panel if I change line 37 to:

veryvito | Fri, 2009-08-21 14:58

Thesmaw's post above seems to be cut off, but unless I'm mistaken, line 37 should now include id="toolboxviewbox." I did this, and it seems to work well now (saving me from more hours of frustration).

Thanks for pointing me in the right direction, thesmaw! ;)

thesmaw | Mon, 2009-08-24 01:16

Sorry, didn't realise my post got cut off.

Nice one veryvito, that's exactly what I meant!

jeremy_c | Thu, 2009-12-10 10:42

When the source browser is on the right, is it possible to have the toolbox and source view opened at the same time? I am using Komodo Edit 5.2 and to switch between the two, I have to use a drop down arrow on the right side of the pane to select which I want to view, but cannot seem to stack them one on top of the other:

[ Toolbox ]
[ enties ]
[ enties ]
[ enties ]
[ enties ]
[ Source ]
[ enties ]
[ enties ]
[ enties ]


ActiveState Staff
Thu, 2009-12-10 12:20

This is a limitation in the sidebar UI Komodo inherits from Mozilla. As far as I know, this is not possible.

dhorne | Thu, 2010-04-08 08:25

Wow, unlike Komodo's native code browser, Source Tree recognizes Perl's MooseX::Declare methods. It'd be even cooler if it could grok method parameters too (hint!), but I'm happy that I can browse by method.



machine | Mon, 2010-06-21 09:10

I did some changes to the latest version:

- FIXED: conflict with Komodo 6.x,
- FIXED: unintended global uses (*_list names, new_class)
- REMOVED: redundant code (*_support - used if (*_tag) ... instead)
- REMOVED: long forgotten paches for already fixed bugs
- FIXED: parsing bugs (redundant passes, logical bugs),
- FIXED: JavaScript tags (ALL),
- FIXED: single click now focuses code window and centers first line!
- UNDER DEVELOPMENT: support for nested namespacing in JavaScript (cool, but hard to do, even NetBeans can't do it yet)

Nested namespacing is ultra-cool feature, really. For example if you have classes inside namespace - original version was unable to build the tree properly, new one will be able.

I'd like to contribute my changes to the extension, but I don't know where to post. Can I just fork this project? I'm doing and using forked version myself. Anyone interested?

icampana | Tue, 2010-06-22 13:35

If you want we can put together a new version and try to improve it, I really haven't tought too much about the extension latelly and it would require a code repository to keep track of the changes, I can set that up if you want.


machine | Fri, 2010-06-25 08:55

If you set up repository, I'll surely make good use of it :) I use Source Tree for my every day work. It's a massive time saver, definitely worth developing. I thought about reverse engineering Code Browser from Komodo IDE, but it could be only as good as Komodo CodeIntel is, and that uses to get lost more often than I do :) Your approach is more reliable and flexible. All we need is recursion in parser and tree expand handler.

My sample JavaScript code looks as follows:
I have a namespace with functions (static methods), which are properly parsed by current version. But in this namespace I have a class with a lots of methods, and those methods would be visible, if the class branch could be expanded (I've tried to do it, but there were bugs with repeating nodes). Beside that, every namespace can contain other namespaces, so that's why recursion is needed in JavaScript.

If we could do it, it would be the first program able to do it! Komodo IDE can't do it, NetBeans neither! :)

Here's my current version:

buckthron | Wed, 2010-07-14 07:49

Some of the items in the function or selector list aren't being drawn properly -- there's a thin horizontal gray line going through the entire width of the list item. This is on Mac OS X 10.6x. I can provide a screenshot if you like.

Thanks for such a useful extension! This functionality really ought to be built into K-Edit.

paedda | Mon, 2010-10-25 10:28

Hi there,

First, I love source tree. Awesome job! This is my most important extension for Komodo.
I there any chance to make this compatible with komodo 6.0? Source tree is the reason I am still on 5.2 because it's a giant time saver switching between methods in PHP.



icampana | Mon, 2010-10-25 10:51

Sorry for the delay in having it enabled for Komodo 6.0 it is not a really big change, but lately I haven't found too much free time to invest it on the project. Now it is ready, just download it and install it as you would regularly.

Hope you find it useful.

platinum | Fri, 2011-03-25 10:48

I just noticed there was a "new" source tree extension and it does exactly all 3 points below! Sorry about that, thanks again.

icampana, thanks for this addon! I've just started using komodo edit and like many others this addon is a necessity for me. If you have the time, some suggestions I have which are hopefully not too difficult to implement:

  • Case insensitive sorting? So searching for "user" could match "getUser"
  • Option to jump to the method definition by single click instead of double click?
  • Since jumping to a method won't always be in the same spot, it would be nice if the method name were highlighted when jumped, to make it that much quicker to find


stephenmorley | Wed, 2011-08-31 07:04

After installing Source Tree in Komodo Edit 6.1.2 under OS X 10.6.8, the Places option disappeared from the Tabs & Sidebars menu (the menu just started with a divider). In order to be able to use the add-on I had to uninstall it, click the (now visible) Places option to show the side bar, and then reinstall the add-on.