In Firefox 50, what is the appropriate chrome:// URL to overlay and extend DevTools main window?

Question

Previously, you could extend/style Firefox DevTools at chrome://devtools/content/framework/toolbox-options.xul with an overlay.

Now, that seems to no longer exist in Firefox 50. The Developer toolbox shows about:devtools-toolbox as the URL. I'm not sure what the XUL URL of that is. What is an appropriate chrome:// URL to extend or restyle the Firefox DevTools?

Answer 1

The DevTools options moved to chrome://devtools/content/framework/toolbox-options.xhtml in Firefox 48. However, there are many files involved in making up the DevTools. Without detailed information as to what you are wanting to do, it is impossible to say that is the only file you will need to overlay or override. If you are looking for the overall container of for the DevTools toolbox container, it is chrome://devtools/content/framework/toolbox.xul.

As is normally the case for determining things like this, you can use the add-on DOM Inspector. I also install the Element Inspector extension, which enables you to open the DOM Inspector on any element with a Shift + right-click. You can also open the DOM Inspector from the Menu Bar->Tools->Web Developer->DOM Inspector.

Having both of those add-ons installed makes it easy to find out what the URL is for the DevTools options: just open the DevTools, F12; display the options; then open Dom Inspector by Shift + right-click within the DevTools options; then within the DOM Inspector select the topmost <document> and switch to the JavaScript Object view. The URL property will display the URL.

I also find it convenient to unpack the omni.ja files that come with Firefox. These are located in [Firefox install directory] and [Firefox install directory]/browser/. Prior to Firefox 48, there was also one in [Firefox install directory]/webapprt. I find that having these unpacked makes it easier to go exploring through the files and makes them easily available to grab a copy when needed for an override. Alternately, you can go looking through the source code. For the DevTools, they are in the browser/omni.ja file within the chrome/devtools directory.

Official APIs

The DevTools API:
The DevTools API is considered a work in progress. With this API it is possible to add tabs/tools to the DevTools panel, registerTool(toolDefinition), register a theme, registerTheme(themeDefinition), etc.

The Add-on SDK dev/panel API allows you to add a panel to the DevTools toolbox.