1

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?

NoBugs
  • 9,310
  • 13
  • 80
  • 146

1 Answers1

2

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.

Show 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.

Makyen
  • 31,849
  • 12
  • 86
  • 121
  • Yes, I saw that that is now an xhtml. Unfortunately you cannot overlay an html and extend it with an overlay. What is the url of the outer xul frame so I can add a script there? – NoBugs Oct 29 '16 at 16:05
  • But, you should be able to `override` it. I have added the `chrome:` URL for the toolbox container to the first paragraph. This is beginning to hint at being an [XY problem](https://www.google.com/search?as_q=XY+problem). Please edit your question to describe what you are actually trying to accomplish, not just how you are trying to accomplish it. – Makyen Oct 29 '16 at 16:25
  • If xhtml were possible to overlay with new controls, that would be an answer, but I don't think one can even inject a script to a xhtml from an addon with an xul and an entry in chrome.manifest. *Replacing* the xhtml doesn't seem like a great idea because no one else would be able to modify it at the same time, and updates to Firefox would leave it at an old version of that file. – NoBugs Oct 29 '16 at 16:47
  • By the way you don't need that DOM inspector addon, there is one in Firefox built-in Browser Toolbox now. – NoBugs Oct 29 '16 at 16:47
  • @noBugs, I appreciate you mentioning it. I find that both have their advantages and disadvantages. – Makyen Oct 29 '16 at 17:14
  • 1
    @NoBugs, You appeared to be looking for an XUL overlay/override methodology. While they do not appear to be what you were looking for, I have added the official APIs to the answer for completeness. – Makyen Oct 30 '16 at 18:44