UPDATE: This is now obsolete, with the adoption of WebExtensions.

Now that Firefox has built-in developer tools, it makes sense for developer add-ons integrate with them. MDN has some examples on creating a developer tools panel, but the examples do not look anything like the built-in tools, and do not offer any information on how to do so.

The examples use HTML/CSS/JavaScript to create the panel, however the built-in tools actually use XUL/CSS/JavaScript. Additionally the built-in tools depend on privileged JavaScript files to handle things like theme switching, such as theme-switching.js.

In order to make an add-on look just like the built-in tools, these are the technologies we will have to use.

I have just finished up creating a tutorial on how to do just that, which you can check out from my GitHub.