Firebug's SourceText

Yesterday, I went through the source file loading between Firebug and Venkman. Firebug's approach seems to be much simpler, ;-) but I left some detail unexplored since it was already very late.

The function that I quoted from firebug's source showed how sourceBox was created and added into the panel, but didn't show exactly how source lines are added into the panel. Nothing with <div> or <a> or <span> tags were mentioned in that function.

Just for the heck of it, I inspected the firebug again using the dom inspector, and found the clue of where the magic might have been. ;-)

this.SourceText = domplate(Firebug.Rep,
{
tag:
DIV(
FOR("line", "$object|lineIterator",
DIV({class: "sourceRow"},
SPAN({class: "sourceLine"}, "$line.lineNo"),
SPAN({class: "sourceRowText"}, "$line.text")
)
)
),

lineIterator: function(sourceText)
{
var maxLineNoChars = (sourceText.lines.length + "").length;
var list = [];

for (var i = 0; i < sourceText.lines.length; ++i)
{
// Make sure all line numbers are the same width (with a fixed-width font)
var lineNo = (i+1) + "";
while (lineNo.length < maxLineNoChars)
lineNo = " " + lineNo;

list.push({lineNo: lineNo, text: sourceText.lines[i]});
}

return list;
},

getHTML: function(sourceText)
{
return getSourceLines(sourceText.lines);
}
});

Notice the use of domplate function! It's a sweet little templating system ;-)