Javascript Source View - Firebug vs Venkman

Continuing from the last post, where I foud out how Firebug's panel works, I continued to drill down, and found out how firebug's source view is implemented.

Basically, inside the Panel, there is a standard browser, and panel is implemented using good old HTML ;-) Inside this HTML document, we have one <a> tag and one <span> tag to represent one line of loaded javascript code. The <a> tag contains the line number, and is hooked up with the debugger to enable user to set or unset break points, while the <span> tag contains the actual line of javascript code.

Ok, that's cool, but it's not using the normal xul elements, and having a separate browser object created for each tab in the tab browser seems a little expensive to me ;-(

That led me to question, how did the Venkman Javascript Debugger actually implemented its source view.

It turns out that Venkman's code is extremely well organized, and it didn't take long for me to find out how it implemented the source view.

Just search for the 'source view' in venkman-views.xul, and venkman-views.js, you will see that the script source view is actually implemented in XUL Tree!

      <!-- source view -->
  
      <floatingview id="source" title="&Source.label;" flex="1">
        <vbox id="source-view-content" flex="1">
          <toolbox>
            <toolbar id="source-header" grippytooltiptext="&SourceHeader.tip;">
              <label id="source-url" flex="1" crop="end"/>
            </toolbar>
          </toolbox>
          <tree id="source-tree" flex="1" persist="width"
            class="focusring"
            onclick="console.views.source.onClick(event);"
            onselect="console.views.source.onSelect(event);"
            context="context:source">
  
            <treecols>
              <treecol id="source:col-0" width="20px"
                display="&SourceCol0.display;" persist="hidden width"/>
              <splitter class="tree-splitter"/>
              <treecol id="source:col-1" width="50px"
                display="&SourceCol1.display;" persist="hidden width"/>
              <splitter class="tree-splitter"/>
              <treecol id="source:col-2" flex="1" display=""
                ignoreincolumnpicker="true" persist="hidden width"/>
            </treecols>
  
            <treechildren id="source-tree-body"/>
  
          </tree>
        </vbox>
      </floatingview>

Just for the heck of it, I wanted to see how xul tree can be implemented to represent a script source, I checked http://www.xulplanet.com/tutorials/xultu/treeview.html, and found out that xul tree is more like an advanced table with some of the UI tree's functionality if you choose to use them. Otherwise, we can treat it as if it is a table ;-)

That's awesome! It is probably going to save lots more memory! I guess what I will do next is to get a tree to load source code working ;-)