Subscribe to RSS Feed

Extending Firebug, Activable Panel (Part IX.)

by Honza

It's been a while since I published the last part of my Extending Firebug Tutorial and it looks like it's time to continue.

I have been inspired by an interesting thread started recently on Firebug newsgroups and I decided to write a part related to Firebug Activable Panels and Modules.

The activation support is useful in cases when the user doesn't need specific Firebug features and disables them in order to avoid performance penalties. A simple example can be a web designer that doesn't need JavaScript debugger and so, keeps the Script panel disabled.

Disabled Script panel

There are two ways how to enable (or disable) a panel. The first option is to use the mini tab menu available next to the panel's label.

Disabled Script panel

Notice that all panel related options (if any) will be displayed underneath of these two menu items (see, how to provide such options in part III.)

The second possibility is to use the status bar icon menu (be careful this UI will most likely change in Firefox 4.0).

Disabled Script panel

So, if you are a Firebug/Extension developer read more about activable APIs and how to create an extension with an activation support.

Read more...

Scrollable Breadcrumbs

by Honza

I couldn't find a better label for a fix that landed in the latest Firebug 1.7 (and will be backported into 1.6), but I am sure that a few Firebug screenshots will clarify it well enough.

The bug has been reported for some time and it's related to panels that display breadcrumbs.

Here is what these breadcrumbs mean in context of a panel.

  • HTML displays XPath for the selected element.
  • Script shows the stack trace when hanging on a breakpoint.
  • DOM displays the position of the selected object within DOM hierarchy.

The problem appeared when the breadcrumb information was so long that it went off the screen. Here is an example of the Script panel with long stack trace.

Script panel without scrollable breadcrumbs.

See, the stack trace even pushed the debugger buttons of the panel and it's only possible to debug using keyboard.

Here is the fixed version.

Script panel with scrollable breadcrumbs.

The HTML (and DOM) panel is also fixed, in case of a deep hierarchy of elements (and long XPath) there are, again, a little arrow buttons that allow to scroll and see the entire value.

Script panel with scrollable breadcrumbs.

Note that scrolling can be done by:

  • clicking on the small arrow
  • moving mouse over the small arrow
  • using mouse wheel
  • using keyboard (you need to check Enable Accessibility Enhancements in Firebug options)