Firebug's Panel

I have always wondered how firebug implemented it's debugger panel. After some more code digging, I found out that it was defined as a ScriptPanel in debugger.js,

function ScriptPanel() {}

ScriptPanel.prototype = extend(Firebug.Panel,
{...
}

but the ScriptPanel is a child class of Panel. Hum... Where is the Panel defined? It turns out that Panel class is defined in firebug.js, and it has all of the basic methods that all firebug panel should have.

Firebug.Panel =
{...
}

However, it doesn't tell much about how exactly the things inside the panel is rendered, so I dug and dug... nothing particular is suggesting me how it is done...

So I launched DOM Inspector, and started to my my luck there. And...

There is a xul:browser ;-) So... there is a separate browser window there... It's got to be overlayed, and... if you search for xul:browser in firebug's source, guess what will you get?
bindings.xml:31

<binding id="panelBar">
<content>
<xul:hbox anonid="tabBox" class="panelTabBox" collapsed="true">
<children includes="panelTab"/>/>
<xul:spacer flex="1"/>
<children/>
<xul:toolbarbutton type="menu" class="toolbar-text-menubutton panelOptionsButton" label="&firebug.Options;">
<xul:menupopup anonid="optionsPopup"/>
</xul:toolbarbutton>
</xul:hbox>
<xul:deck anonid="deck" flex="1">
<xul:browser anonid="browser"
xbl:inherits="tooltip=paneltooltip,contextmenu=panelcontextmenu"/>
</xul:deck>
</content>

Haha! it's a browser which contains all of the dynamically generate debug contents!