A GUI for ps(1) Built with Mozilla

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

The first part of this listing sets up some globals. The Components object is a pre-existing object that acts as a directory of all existing XPCOM objects, called components, and their supported interfaces (in the Java or COM sense). To get an XPCOM object, find the right component (named with a string called a Contract ID) and construct an interface object for it (also named by a string or by a property name; the latter is used here). It's common to reuse components, so once found, they're saved as handy property values on the klass object—class is a reserved word in JavaScript.

Two defined functions are run at the end of this listing. execute_ps() simply executes another process: the ps(1) wrapper script. For that it needs a file object (an nsILocalFile) and a process object (an nsIProcess). run() invokes the process using fork(). Mozilla is designed to do all this portably, but here only Linux is supported because the path of the executable is hard coded as a constant. The other function, read_raw_data(), sucks up the data. Mozilla uses stream, transport and channel concepts the same as do some high-level features of Java, but without the complexity of having to write any classes. A file object is needed for the data file dumped by ps(1). A stream object opens a content pathway to that file. A minor hack is required as well: a special scriptable stream object must wrap the basic stream. With one read() call the whole file is slurped up into a string. Next, some Perl-like regular expression wizardry breaks the content down into an array of lines and then further into an array of arrays. All data is treated as string data. To see if the data is processed correctly, try using the diagnostic and rudimentary print() method supplied with xpcshell. Alas, Mozilla currently does not support retrieving PIDs, so files named /tmp/psdata.$$ don't work yet. That support is nearly here, though.

Many XPCOM objects are in this script, so how are you to find the right ones? As with any programming library, there's reference material. Look for .IDL files in the Mozilla source code (or under mozilla/dist/idl), on the Web or read a book.

That's enough scripting to start with; scripting and tabular data are well understood in Linux. To build the GUI, Mozilla requires XML, specifically, XUL. That's a different world from the command line, and you have to be familiar with XUL to succeed. Here, the process is broken down into easy stages. First, Listing 3 and Figure 1 show an XUL <tree> widget.

Figure 1. Simple <tree> Widget with Static XUL Content

The tree looks nice because the <?xml-stylesheet?> processing instruction drags in the current Mozilla theme for free. Display this tree with the normal Mozilla executable, using the -chrome option to rip away the normal navigation buttons and other decorations:

mozilla -chrome static_tree.xul

The XML content (henceforth, the code) is a bit like an HTML <table> tag: both column headers and rows of data are specified. The <treeitem> tag is the tricky part; it can contain a <treechildren> tag, which allows the tree to have subtrees, rather than only depth 1 leaf nodes. As seen in Figure 1, the tree widget has a number of interactive features; subtrees can be opened and closed in the same manner as any file explorer application, including Nautilus or Windows Explorer. Columns can be added or deleted using the column picker, the small icon at the extreme right of the tree header that holds column names.

If we wanted, JavaScript scripts could be used to insert the ps(1) data into this XUL document dynamically. That's not hard, and all of the W3C's DOM interfaces are available to do the job. Start by adding Element objects or even use the .innerHTML property. This is an ambitious article, so instead you see a fully data-driven approach, one that avoids hand-constructing any tree.

Listing 4 and Figure 2 show an XUL GUI without a tree. This one has a <template> tag instead

Figure 2. Simple Templated GUI Based on Static RDF Content



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