Subscribe to RSS Feed

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.

Activable Panel

I have already explained how to create new Firebug panel and as you can see below - definition of an activable panel isn't much different from it.

Firebug.MyActivablePanel = function MyActivablePanel() {}
Firebug.MyActivablePanel.prototype = extend(Firebug.ActivablePanel,
{
    name: "myActivablePanel",
    title: "Activable",
});
Firebug.registerPanel(Firebug.MyActivablePanel);

The only difference is actually the base panel object: Firebug.ActivablePanel. If you install such extension, you should see a new panel in the UI.

Disabled Script panel

The panel is disabled by default and in order to make it enableable you need to define a following preference (within defaults/preferences directory of your extension).

pref("extensions.firebug.myActivablePanel.enableSites", false);

The myActivablePanel part of the name must be the same as the name of our panel. It's set to false by default and so, the panel will be disabled by default.

Now if you change panel's state it'll be remembered across the browser restarts.

In order to handle an activation-change event you need to implement onActivationChange method.

Firebug.MyActivablePanel.prototype = extend(Firebug.ActivablePanel,
{
    name: "myActivablePanel",
    title: "Activable",

    onActivationChanged: function(enable)
    {
        if (enable)
        {
            // panel has been enabled
        }
        else
        {
            // panel has been disabled
        }
    }
});

Activable Module

We already know that a panel (in Firebug architecture context) is responsible for presenting data (the view in MVC), but there is also a module, which represents the service that is providing some data. Just to note that the context object (Firebug.TabContext) represents a document here.

It's actually the service that should be usually disabled so, the user can profit and avoid performance issues. E.g. in case of the mentioned Script panel - it's JSD (JavaScript Debugger Service) that should be switched off.

So, if there is such service for your panel, you should disabled it (through the module abstraction) as soon as the panel is disabled (or as soon as there is no other panel that would use it).

Let's see an example of an activable module.

Firebug.MyActivableModule = extend(Firebug.ActivableModule,
{
    onObserverChange: function(observer)
    {
        if (this.hasObservers())
        {
            // There are observers (panels) using this model,
            // let's activate necessary service/server hooks.
        }
        else
        {
            // There are no observer using this model, let's clean up
            // registered hooks.
        }
    }
});

Firebug.registerActivableModule(Firebug.MyActivableModule);

  • There is just one method implemented - onObserverChange. This method is called every time an observer (a panel) is attached or detached.
  • The module object is derived from Firebug.ActivableModule.
  • The module object is registered by Firebug.registerActivableModule.

Now let's modify our Firebug.MyActivablePanel.onActivationChanged method.

onActivationChanged: function(enable)
{
    if (enable)
        Firebug.MyActivableModule.addObserver(this);
    else
        Firebug.MyActivableModule.removeObserver(this);
}

This way we can register our panel as the module observer and trigger module/service activation. The module can also (later) dispatch events to all registered observers to notify them e.g. about changes.

Downlad an example extension with all the code above (+ tracing) here.

You need Firebug 1.6+ to support these activation APIs.


Rss Commenti

7 Comments

  1. Why present a static message and the require a complex UI interaction, via a drop down menu?

    Why not just a quick and simple button, "Enable Script Panel"

    #1 zac spitzer
  2. [...] Software is hard | Extending Firebug, Activable Panel (Part IX.) [...]

    #2 19 great Firefox plugins for developers | Beastx's Blog
  3. @zac spitzer: I recall that we already had such button, but it was removed from some reason (not sure why now). Anyway I agree, it would be easier to enable...
    Could you please report this here: http://code.google.com/p/fbug/issues/list
    Thanks!

    #3 Honza
  4. [...] Software is hard | Extending Firebug, Activable Panel (Part IX.) [...]

    #4 Gmail Firefox Extension, Nitro Quattro, Free Illustrations, Firebug, Blog Advice 8-18-08 | Articlewrap.com
  5. [...] Software is hard | Extending Firebug, Activable Panel (Part IX.) [...]

    #5 Professional JavaScript for Web Developers (Wrox Programmer to Programmer) | Web Developers and Hot Internet Marketing
  6. really a great solution thanks a lot for your useful post

    #6 ccna
  7. you are an amazing man , that's tutorial help me a lot while updating flashfirebug extension , i convert it to activable panel/module right now

    thank you ;)

    #7 Fareed Al-Namrouti

Sorry, the comment form is closed at this time.