DOM Inspector

Now that we've found the file to edit, we need to find the specific code within that file. Again, the DOM Inspector makes this easy. The "Document - DOM Nodes" pane on the left-hand side of the Inspector window displays a tree representation of the browser window's XUL file. When you select a node in the tree, a red border flashes for several seconds around the visual representation of that node in the browser window.

Scroll down the tree to the statusbar node and select it. Notice the flashing red border around the horizontal status bar at the bottom of the browser window. Click the plus sign next to the statusbar node in the DOM Inspector and select each statusbarpanel node in turn. Notice the flashing red border around each different section of the status bar.

Open the navigator.xul file in a text editor. Find the statusbar element within it. This is where we are going to add our tinderbox status UI.

InspectorWidget

The InspectorWidget extension adds a toolbar button and context menus for invoking the DOM Inspector (DOMi) for either chrome or content elements.Thus this makes it possible to save all the above DOM inspector user interface diggings.

As a side note it would be good if the InspectorWidget additions were integrated directly in DOMi, that would help everyone.

« PreviousNext »