Installing the Document Inspector Gadget

Out of the box, the Firefox Installer has two installation modes: Standard and Custom. If you have already done a Standard installation,you will be missing a key hacking and programming component:the Document Inspector, or DOM Inspector. The Document Inspector extension is a development tool used to analyze the Document Object Model (DOM) of web pages or the Firefox interface,and is very useful in digging deeper into the core structure of web pages,the Firefox browser window, and browser elements.

Currently, this browser development tool is available only from Firefox's main installation process. Later in this chapter and throughout the book, you will begin to see how web page document model standards fit into Firefoxís interface customization. So you want to install the Document Inspector (also called the DOM Inspector), but you already have Firefox installed? No problem. Simply reinstall Firefox, but instead of choosing the Standard installation type, choose the Custom installation type. Follow the prompts until you get to the Select Components screen. Select Developer Tools, by clicking the checkbox as shown in Figure 1-1, to install the Document Inspector tool.

Once you have completed this installation or reinstallation, you will notice the DOM Inspector in your Tools menu is now available to all profiles on the system. You can use this tool as a resource for dissecting bits and pieces of web pages and the Firefox interface. Figure 1-2 shows the DOM Inspector view of a web page that is currently loaded in the main browser. Note that the hierarchy for the currently loaded web page is displayed in the left-hand panel, with each level or node grouped by the HTML-defined hierarchy and code. Additionally, details on the currently selected node are displayed in the right-hand panel;this panel becomes useful when hacking the Firefox interface.

 

FIGURE 1-2:DOM Inspector document tree and object properties

Occasionally, I have noticed that running the DOM Inspector on a fresh install or reinstall did not yield the desired results or did not work at all. To correct this, I have tried either uninstalling Firefox and then reinstalling with the Developer Tools option enabled,or creating a new Firefox profile. Unless you are running an older version of Firefox that prompts you if you want to delete all the program files, the Firefox uninstaller retains all the supporting plugins and other files that it might need. If prompted to delete all Firefox program files, do not confirm this prompt; doing so will require reinstallation of plugin support for features such as Macromedia Flash, Shockwave, QuickTime and/or RealPlayer. Historically,uninstalling and reinstalling and/or creating a new profile have been the two methods that I have used to resolve mysterious Firefox issues when I could not consistently reproduce them. For information on how to use the Profile Manager to create a new Firefox profile, visit the incredibly useful MozillaZine Knowledge Base at http://kb.mozillazine.org/Profile_Manager

While having a pretty hierarchy tree of your HTML is nice, the real benefit of the DOM Inspector is using it to hack Firefox itself. Firefox is built on a cross-platform extensible user interface language called XUL, which is based on XML standards and was created to support Mozilla applications. The user interfaces for the Mozilla Suite, Firefox, Thunderbird, and Sunbird all use XUL to create and display the user interface.This interface foundation is the core element that helps all these programs run on different operating systems. The interface is a collection of object definitions used to create each of the elements on the screen.