A GUI for ps(1) Built with Mozilla

Give your command-line tasks a GUI with the Mozilla platform.

An XUL template is like a report template and not like a C++ template. It's the basis for repeated sets of data. The template starts with the <vbox> tag that has a datasources= attribute. The <action> part of the <template> is the content to be repeated for every record that the <conditions> part identifies in the trivial.rdf file. If you're an intermediate at make(1) or SQL or have touched Lisp, Scheme or Prolog, you should be able to grasp how the template system works. Listing 5 shows the trivial.rdf file that drives the display of Figure 2.

If this file is modified, Figure 2 can change even though Listing 4 hasn't been altered. That's a data-driven arrangement. This file is RDF, one of the harder W3C standards. Basically, it's a graph of nodes, each node holding three items of data. The items are called subject, predicate (or property) and object. Simple graphs are trees, so Listing 5 is a tree. Combine the <hbox> in Listing 4 with the <li> tags in Listing 5, and the result appears as illustrated in Figure 2. This is somewhat like an SQL join or join(1). For now, notice that the ref= attribute in Listing 4 matches the <Seq> tag in Listing 5. This is how the two are matched up in Mozilla's template processing logic. Mozilla support for RDF is basic rather than strict, so nearly all the URIs and URLs can be made up on the spot, as though they were variables or constants. That's done throughout this article. Try adding another <li> tag to Listing 5; restart Mozilla and display the page again.

A tree is a good way to display a hierarchical list of processes, and a <template> is a good way to drive the appearance of a tree direct from data. No RDF document is available to work with, though; instead, we have a JavaScript array of records. The solution is to put a <tree> and a <template> tag together and set the RDF file to rdf:null = no file. A script is used to create the RDF content directly from JavaScript data. Because of RDF's peculiar design, the content can be dumped into the template in a careless manner and everything simply works. That's a far cleaner but admittedly a more subtle solution than hand-building an XUL tree from JavaScript. Another clean aspect of RDF and templates is the tree can be updated anytime in a simple manner. This means the window can display ps(1) data dynamically, as though a GUI version of watch ps H were run. That dynamic step is beyond this article's scope, however.

If the <tree> and <template> tags are put together, the final XUL document is as shown in Figure 3 and Listing 6.

Figure 3. Final <tree> Widget with RDF Data Supplied from JavaScript

Again, you can spot the datasource= and ref= attributes and the <template> tag. The URLs beginning with rdf: indicate spots where RDF data should be put into the template. In the earlier example, variables started with a question mark. Two syntaxes are available to mark such spots. Not surprisingly, there's one such piece of data for every column and every row.

The <splitter> tag is simply friendly decoration; it allows the user to resize the columns. Doing so aids readability, as do the minwidth= and flex= attributes. Figure 3 shows how the displayed process hierarchy naturally fills the tree.

Near the top of Listing 6, a <script> tag includes all the code from Listing 2, plus more. When such scripts are included, there is an immediate security problem. The problem is Mozilla technology must ensure secure display of remotely located files and scripts, such as HTML pages. This is like the Java Server of Origin rule. xpcshell is entirely unsecured, but the main Mozilla binary has normal security. With an intensive configuration effort, security restrictions can be overcome, but it's simpler to register the script as a package. To do that, all the files have to be moved to the chrome, a directory inside the Mozilla install area where all security restrictions are lifted. How to do that is explained shortly, but first we finish the application with a script that moves the ps(1) data from a plain JavaScript data structure into an RDF datasource. This script replaces the static RDF file used earlier (Listing 7).



Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Support material for

Anonymous's picture

I'm the author. I've placed a download containing some notes and minor fixes on the Web to ease the process of experimentation a bit. Get them here.

- Nigel.

Re: A GUI for ps(1) Built with Mozilla

stoneknife's picture

For the most part I liked this article, particularly as I could use some of the theory behind it for a project of my own. I would like to point out, though, that neither the listings nor the text indicate directly what file names the listings might assume. Some of that can be figured out but it would have been nicer to have that available within the text.

When typed in, and also later downloaded from the archive sight, the code from the listings failed to output what is reported in the figures.. at least for the final. I'm no JavaScript programmer by any means but it appears that the initial definition of 'psdata' (listing 2) should not be 'null' but a new something, probably Array, as that has an attribute of 'push' (as used later in the code).

It would also have been nice for the second JavaScript excerpt (listing 7) to have some kind of indication that it should be inserted into the initial JavaScript (listing 2).

Ok... so I learned something in having to dig into the workings to get it working. It was a good start anyway aside from my frustration..

Re: A GUI for ps(1) Built with Mozilla

Anonymous's picture

Notice also that execute_ps has a full path to the executable specified. This has to be changed as well.

After making the recommended changes in the first reply, and the above mentioned change. It crashes in a miserable fashion. No clue what the error means. It appears that certain assumptions were made in navigating the data tree, and these aren't valid across versions of Mozilla.

I really like the potential of XUL and it's got enough excitement here at work, that they're talking about rolling out Mozilla to 1000 PC's if it works as promised. It's a pity that the example in this article can't be made to work simply.

Re: A GUI for ps(1) Built with Mozilla

BArchis's picture

I've been banging my head on this for a few days, and have been able to get it to work with Mozilla built from source, as well as a binary downloaded from mozilla.org. Some thoughts:

1. The package >>must<< be registered as chrome and the .xul file invoked as 'chrome://...' or it won't work: you'll get an empty form because the JavaScript security won't be satisfied. It's probably easier to set up the registration and the .../chrome/psviewer/content directory first and then start building the code inside it.

2. When you build Mozilla from source, you get xpcshell, which allows you to invoke JavaScript files from the command line. It can help in getting the portion of code in Listing 2 working, but will not help with the combined (Listing 2 and Listing 7) JavaScript, because the operating context (i.e. we invoked the JavaScript from an .xul document) is missing.

3. Combining Listings 2 and 7 is a little more involved than simply concatenating them. You want to have all the declarations, followed by all the mainline code, followed by all the functions. (Maybe they don't absolutely have to be in order: I'm not a JavaScript jock. But it's much easier to follow what's happening.)

4. If you'd like, you can put the JavaScript inside the .xul file.

So now I've got it working, almost: if I invoke it as:


(whether from the command line or in the address box)
it works (it even updates if I hit the Refresh button!), but if I invoke it as:


(or point File Open to the .xul file)
I get an empty form.

Why do I say 'almost'? Since I have this cool picture of the running processes on my screen, I'd really like to print it. But when I try to print it, the text disappears from the table, and when I try to do a Print Preview, Mozilla tosses its cookies with a segmentation fault.

Perhaps that's an exercise for another month....

Free Dummies Books
Continuous Engineering


  • What continuous engineering is
  • How to continuously improve complex product designs
  • How to anticipate and respond to markets and clients
  • How to get the most out of your engineering resources

Get your free book now

Sponsored by IBM

Free Dummies Books
Service Virtualization

Learn to:

  • Define service virtualization
  • Select the most beneficial services to virtualize
  • Improve your traditional approach to testing
  • Deliver higher-quality software faster

Get your free book now

Sponsored by IBM