Software is hard

• Published:February 11th, 2011
• Comments:16 Comments
• Category:Extending Firebug Tutorial, Planet Mozilla

Firebug inspector is certainly one of the most valuable Firebug features and it also deserves more attention from extension developers. From this reason Firebug 1.7a10 introduces a new API that allows reusing this feature in Firebug extensions and customize its behavior.

This part of Firebug extension tutorial explains how to use this API in Firebug extensions.

Firebug Inspector

Let's see a quick overview of what is actually the Firebug inspector and how it works from the user perspective.

• Clicking on the inspector button starts an inspecting mode.
• As the user moves the mouse cursor over page elements, they are automatically highlighted.
• The HTML panel (selected by default) shows detailed information about the currently highlighted element.
• The inspecting mode can finished by clicking on the inspecting page element or canceled by pressing ESC key.

Inspector Listener

First simple option how to programatically watch the inspector in action is registering a listener and handle three events:

• onStartInspecting Called by the framework when the user starts inspecting.
• onInspectNode Called by the framework when inspecting is in progress and the user moves mouse over a new page element. This method is called in a timeout to avoid performance penalties when the user moves the mouse over the page elements too fast.
• onStopInspecting Called by the framework when the user stops inspecting.

context Context of the current page.
node Currently inspected page element.
canceled Set to true if the inspecting was canceled by pressing the Escape key.

Custom Inspector Panel

Another and more powerful method how to customize inspector's behavior is implementing a new panel that is used in the inspecting mode instead of the default HTML panel.

Let's imagine a simple example.

• There is a new Link Inspector panel
• If the user clicks the inspector button, Link Inspector panel stays selected.
• As the user inspects the page the panel displays own custom info about page elements (URL).
• Only <a> can be inspected, the inspector ignores the other elements.
• Green color is used to highlight a link to distinguish from the default inspector.
• If the user finishes inspecting by clicking on a link, the panel loads and displays the target URL.

You can install the extension and check out a test page. You can also get the source code.

Let's step by step go over the implementation. We need to define a new panel and register it.

There is a few things to note:

• The panel has an inspectable member set to true. This ensures that the panel is used for inspecting (if the user starts the inspector mode while having this panel selected) and the framework calls inspector related methods on it.
• The pane has an inspectHighlightColor member set to green. This is how the highlighter's color is customized.
• The panel implements/overrides three methods: startInspecting, inspectNode and stopInspecting. These methods have the same meaning as in case of the listener.
• inspectNode disables default selection mechanism (used e.g. by the HTML panel) by returning false. In this example, the method redraws panel content every time a new link is being inspected (using a Domplate template, see below).
• stopInspecting is executed when the user finishes the inspecting mode. In this example, it's purpose is to load/preview the target page. This is again done using a Domplate template and only if the inspection wasn't canceled.
• The panel implements a supportsObject method that is used to specify whether given node should be inspectable.
• Finally, the panel also implements show method that renders default panel's content.

Here is the Domplate template:

• defaultContent Default content of the panel rendered in show method.
• linkUrl Displays URL of the inspected link.
• linkPreview An IFRAME that loads the target page.

Table Inspector

Let's see yet one example that reimplements supportsObject method in order to only inspect tables.

This inspector ignores the entire inner structure of a table and focuses only on the <table> element. The content of the panel is consequently displaying only properties that are typical for tables.

I believe that Inspector API can encourage extension developers to create library specific inspectors that focus on complex page widgets instead of HTML markup (which is already done in the HTML panel anyway). You can see Illuminations for ExtJS as an example.

Please, let me know if you have any ideas about new inspector related features that could be implemented or if you have any ideas how the API could be yet improved!