Subscribe to RSS Feed

Firebug 1.7 (currently beta 1 available) improves API related to Infotips. These Infotips are used in Firebug UI for displaying additional information.

They are similar to tooltips but can provide a richer content (comparing to those in HTML). The content doesn't have to be only a text but any HTML. In fact, the content is usually generated using Domplate.

Let's see how to utilize these Infotips in Firebug extensions.

Infotip in Firebug UI

First, see how infotips actually look like. Since they are implemented in HTML and Firebug uses HTML only for panel content (so far) they appear in panels.

The first image comes from the Script panel. The mouse is hovering over a variable and the infotip shows its value.

The next infotip is displayed within the Net panel. It shows detailed timing info for selected (note the gray background) HTTP request entry.

And the last example shows preview of an image when the user hovers mouse over a CSS property with background URL.

Infotip API

Now let's take a look at the first simplest example that show the API usage.

function MyPanel() {}
MyPanel.prototype = extend(Firebug.Panel,
{
    name: "mypanel",
    title: "My Panel",

    showInfoTip: function(infoTip, target, x, y)
    {
        infoTip.innerHTML = "Hello from an info tip!";
        return true;
    }
});

Firebug.registerPanel(MyPanel);

  • All we need to do is creating a panel and override/implement showInfoTip method.

The parent element for our infotip content is already created by the framework and passed into our function as the infoTip argument. The method returns true, which translates to Yes, I am the one displaying an infotip now! Note that there can be just one infotip displayed at a time.

As soon as the user moves mouse over the panel content, the infotip is displayed.

See how the same would be achieved using Domplate. We'd define a simple template...

var MyInfoTip = domplate(Firebug.Rep,
{
    tag:
        DIV("Hello from an info tip!"),
});

... and use it within the showInfoTip.

showInfoTip: function(infoTip, target, x, y)
{
    MyInfoTip.tag.replace({}, infoTip);
    return true;
}

The previous example shows the infotip for entire panel content. The next one checks the target element under the mouse passed in as target argument.

First, create a template for our panel content.

var MyPanelContent = domplate(Firebug.Rep,
{
    tag:
        SPAN({"class": "helloWorld"},
            "Hello World!"
        ),
});

And here is new panel implementation (we are reusing MyInfoTip object from the previous example).

function MyPanel() {}
MyPanel.prototype = extend(Firebug.Panel,
{
    name: "mypanel",
    title: "My Panel",

    show: function(state)
    {
        MyPanelContent.tag.replace({}, this.panelNode);
    },

    showInfoTip: function(infoTip, target, x, y)
    {
        if (hasClass(target, "helloWorld"))
        {
            MyInfoTip.tag.replace({}, infoTip);
            return true;
        }

        return false;
    }
});

The infotip is displayed only if the mouse moves over the text HelloWorld!

In cases where rendering of the infotip is complex we want to avoid it if the mouse is hovering over the same target. This depends on specific implementation, but important is that content of the infotip is not removed by the framework - it's always removed by a custom handler that rerenders its content. That's why the examples above use tag.replace and not tag.append.

A little optimization in our case would look like as follows:

showInfoTip: function(infoTip, target, x, y)
{
    if (hasClass(target, "helloWorld"))
    {
        if (this.infoTipClass == "helloWorld")
            return true;

        MyInfoTip.tag.replace({}, infoTip);
        this.infoTipClass = "helloWorld";

        return true;
    }

    delete this.infoTipClass;
    return false;
}

  • The same infotip is displayed for all targets with class == helloWorld.
  • Infotip's content is generated only for the first time the mouse enters such target.
  • A new member infoTipClass is initialized indicating that the mouse is within a target
  • The member is removed as soon as the mouse leaves the target.

This optimization avoid flickering of infotip's content when the user moves the cursor within the same target.

Infotip Listener

In cases where the infotip can't be handler by a custom panel itself, you can register a listener. This allows creating additional infotips for existing panels/targets and extend existing Firebug UI.

Such listener can be registered by a custom module object.

Firebug.MyModule = extend(Firebug.Module,
{
    initialize: function()
    {
        Firebug.NetMonitor.NetInfoBody.addListener(this);
        Firebug.InfoTip.addListener(MyInfoTip);
    },

    shutdown: function()
    {
        Firebug.NetMonitor.NetInfoBody.removeListener(this);
        Firebug.InfoTip.removeListener(MyInfoTip);
    },
});

And our infotip object would be extended to handle one event.

var MyInfoTip = domplate(Firebug.Rep,
{
    tag:
        DIV("Hello from an info tip!"),

    // InfoTip listener
    showInfoTip: function(infoTip, target, x, y)
    {
        if (!hasClass(target, "helloWorld"))
            return false;

        FBTrace.sysout("showInfoTip", target);

        this.tag.replace({}, infoTip);
        return true;
    }
});

showInfoTip(infoTip, target, x, y)

  • infoTip Infotip container. Content of the infotip must be inserted into it.
  • target An element that is currently under the mouse.
  • x X client coordinate (event.clientX)
  • y Y client coordiate (event.clientY)

Example extension that shows this technique is available in Firebug source tree.

See some other info about this infotip extension point on Firebug wiki.


Rss Commenti

6 Comments

  1. Extending Firebug Infotip Part Xi...

    [...]Leave a coment. Name Email (never displayed) URI Your Coment: Search: About Jan Odvarko. About Me ? LinkedIn ?[...]...

    #1 Pro Blogger News
  2. [...] API for Firebug [...]

    #2 Getfirebug Blog » Blog Archive » Firebug 1.7.0
  3. [...] API for Firebug [...]

    #3 Firebug 1.7 正式版发布,支持 Firefox 4 | IT News
  4. [...] API for reusing Firebug Infotips in other [...]

    #4 Firebug 1.7 New Features ✩ Mozilla Hacks – the Web developer blog
  5. [...] API for Firebug [...]

    #5 Firebug 1.7 正式版发布,支持 Firefox 4 – WordPress一站式服务
  6. [...] API for reusing Firebug Infotips in other [...]

    #6 Firebug 1.7 New Features | All 4 Social Media Blog

Sorry, the comment form is closed at this time.