Friday, March 17, 2006

Getting dev tools working with XULRunner

I've recently had a revived interest in Mozilla XUL. Last month I saw a blog about the new XULRunner tool, so I downloaded it a few days ago for a closer look. The first thing that became pretty obvious was that the normal suite of tools that I'm used to working with in Firefox/Mozilla don't really fit into XULRunner out of the box. These include things like the Extension Developer Extension, the Venkman JavaScript Debugger, and the DOM Inspector.
There are a few places that mention that it should be possible to get these things going, but I couldn't find any solid instructions on how to do so. I haven't gotten the DOM Inspector going yet, but see below for a method for getting the first two working in your XULRunner app.

First of all, I did all of this work using a custom built XULRunner on Linux from the XULRunner source drop. I have not tried this on the stock binaries but I think it should work. In any case, here are the configure options I used:

The Extension Developer Extension was pretty easy to hack into an XULRunner app. I just extracted the extensiondev.jar from the xpi and created an extensiondev.manifest that reflected what was in the install.js. I dropped both of these files into my app's chrome directory and was then able to specify the FireFox overlay on my main window (chrome://extensiondev/content/firefoxOverlay.xul). It worked after creating a menupopup with the id "menu_ToolsPopup", which follows the FireFox naming convention.

Venkman was trickier. I tried the same approach, ending up with a venkman.manifest and venkman.jar in my chrome directory. I then tried to overlay Venkman onto my main window (chrome://venkman/content/venkman-overlay.xul). The first hurdle is that the function toOpenWindowByType does not exist in the default XULRunner overlays. I just reimplemented it with the following:

function toOpenWindowByType(inType, uri)
{, "_blank", "chrome,extrachrome,menubar,resizable,scrollbars,status,toolbar");

Then the problem became that it just didn't work. I was using the venkman.jar that I extracted from the XULRunner build that I was using. I finally switched to the patched version of Venkman for Firefox 1.5 available from here. It worked like a charm. The main thing you have to do is uncheck the menu option Debug/Exclude Browser Files. Note that if you open more than one debugger window, the app crashes with a nasty segfault. My toOpenWindowByType stub should keep this from happening, but I haven't gotten to adding any logic for that.

I packaged the glue for these things up into an xulrunnerdev.jar that also adds a menu item to open the JavaScript Console (in lieu of having to pass the -jsconsole command line). Here are the exact steps to get it working in your XULRunner app:
  • Download the file from below and extract it to your application chrome directory.
  • Add a line to your application chrome.manifest for each of your application windows you would like to overlay with the tools. For example:

overlay chrome://testapp/content/startPage.xul chrome://xulrunnerdev/content/devOverlay.xul

  • Add an appropriate menupopup to the windows you want overlayed. For example:

<toolbox flex="1">
<menu label="Dev Tools">
<menupopup id="menu_ToolsPopup">

I have included a test application that includes all of this stuff below as well. There are certainly multiple ways to get this stuff to work. Hopefully this work can hold us over until more official support of the dev tools is included in XULRunner.



Blogger Daniel said...

Doesn't work : browsing a source in venkman triggers a "x-jsd protocol not registered" error.

2:47 AM  
Blogger TJ Laurenzo said...

That's odd. It worked for me. I'll have to retrace my steps and make sure I wrote everything down.

8:45 AM  
Blogger Ted Mielczarek said...

Cool! I've been thinking about throwing together a XULRunner app containing extensiondev for testing purposes, I just haven't had time. I do wonder if there's an easy way to provide an extensiondev package that you could install in your XULRunner app painlessly.

1:21 AM  
Blogger Kanst-production said...

how can i debug chrome (.xul + .js) with venkman ? thx

2:34 AM  
Blogger Leon Victor said...

Once you have a working XULRunner application, use the XUL tutorial to expand it into a fantastic XUL application.

2:57 AM  

Post a Comment

<< Home