Domplate, Examples (part II.)

by admin

There is bunch of various possibilities how to generate UI using Domplate (remember entire Firebug UI is generated using Domplate - i.e. content of all panels) and so here is another set of how to examples that is trying to reveal some other useful aspect and patterns. Of course, all examples can be explored using Domplate Runner again.

See all posts about Domplate here.

Enjoy! ;-)

Read more...

Domplate, Examples (part I.)

by admin

There is still lack of documentation for Domplate (even if there are already some articles) and so, I have decided to put together set of how to examples. I believe that this kind of simple and focused examples is good start for everybody who wants to understand how Domplate works and use it for building HTML UI.

Each example consists usually from following parts:

  • Domplate Script: the script used to describe Domplate template
  • Input Data (object): input data for a dynamic template
  • CSS: set of CSS rules used by result DOM

Every example also contains a brief description and a Demo button that can be used to run the example with Domplate Runner and see/explore generated markup. Since the runner is based on Domplate, specifically on
JQuery Domplate Plugin (made by Christoph Dorn) and Domplate doesn't support other browsers yet, it runs only in Firefox. So, if you are not using Firefox, perhaps it's good time to install it now. ;-)

Read more...

nsITraceableChannel, Intercept HTTP Traffic

by admin

I have been waiting for a long time to write about this. Since Bug 430155 (new nsHttpChannel interface to allow examination of HTTP data before it is passed to the channel's creator) is now fixed, it's possible to intercept HTTP traffic from within a Firefox extension!

This fix should be part of Firefox 3.0.3.

This possibility is crucial for Firebug (and also Adblock Plus and Firekeeper can benefit from it) as one of its features is showing a response of any HTTP request made by a page. Until now, Firebug has been using Firefox cache and XHR monitoring to retrieve the response and display it to the user. While this worked quite fine for XHR (it's not that hard to monitor XHR responses) there was a big issue with monitoring all the other network requests. The most visible problem was probably submit of an HTTP form using POST method (known as double-load problem).

In some cases, the HTTP response isn't cached (and don't forget that Firefox cache can be disabled entirely) and Firebug had to fire a second request in order to get the response again and show it to the user. Of course, this was a big problem for every server that executed any (e.g. database) related actions (these have been executed twice). Uff...

Finally, I could implement new and reliable cache within Firebug 1.3 based on nsITraceableChannel. So, Firebug can use it anytime the response-source is needed without an additional request, e.g. if the user wants to see a network response in Firebug's Net panel...

Check it out, I am recommending latest Firebug 1.3 from SVN and till the Firefox 3.0.3 isn't available you can download latest trunk build from here. Any comments truly appreciated!

For those who are more interested, I have written an example that demonstrates how the nsITraceableChannel can be used.

Read more...

Firecookie 0.7 beta

by admin

I have got quite a lot of valuable feedback since Firecookie 0.6 release and so, I have decided to create a fresh new version. Thanks to all who took their time and helped to improve this Firebug extension!

Download Firecookie 0.7 beta for testing here (0.7beta9). If you would find any problems please report it here. The extension should work with all versions of Firebug and Firefox.

If you are interested, read more about all new features (with bunch of screen-shots attached) or read release notes and see what bugs have been actually fixed.

Read more...

Extending Prism

by admin

I was playing with Prism recently, exploring how hard is to write an extension for it (the real motivation was actually to adapt my existing extension). It turned out to be quite easy process and since I haven't found a tutorial (even if there are some wiki pages here and here) how to write a first Prism extension, I decided to put one on my blog.

So, take a look at Hello Prism! ;-)

Read more...

List of Firebug Extensions

by admin

Have you ever been interested in what extensions are available for Firebug? If yes, take a look at what I have found. Frankly, I was quite surprised how many Firebug extensions already exists out there.

  • YSlow
  • Firecookie
  • FirePHP
  • RainbowForFirebug
  • Jiffy
  • Firequark
  • LiveCoder
  • PixelPerfect
  • FirebugCodeCoverage
  • Firebug Net Panel History Overlay
  • Fireclipse
  • Chromebug

Read more...

Extending Firebug, Yahoo! Search (part VI.)

by admin

Even if this part is also about web services integration, the main purpose is actually to show another (and a bit more complex) example of Domplate usage. In this part I have used Yahoo! Search Web Services to track inbound links and demonstrate how Domplate can be used together with real data. Final extension in this part will discover what pages link to the current page in the browser.
Read more...

How to enable and disable Firebug 1.2

by admin

One of the most noticeable thing (apart from bunch of bug-fixes) of the upcoming Firebug 1.2beta4 (check AMO) is new UI for Firebug activation.

We have been hardworking on this (UI is hard), following carefully all the great user feedback on Firebug newsgroups, and this version has finally something, which looks like quite promising solution (I am curious about the next user feedback ;-).

In the previous version (Firebug 1.05 and 1.1), it was only possible to disabled/enable Firebug entirely (and/or for specific site). However, most of the Firebug features don't reduce Firefox performance and thus can be available and handy all the time. For instance, the DOM Inspector is indispensable tool for a lot of users and there is no performance penalty when using Firefox.

The solution we have chosen makes possible to independently enable/disable those features that can reduce Firefox performance (now disabled by default). The other features are just available and there is no reason to disable them.

So, the following panels are currently activable:

  • Console logging - Console panel
  • Javascript Debugger - Script panel
  • Network monitoring - Net panel

We have introduced a new menu, which is accessible directly from the panel's tab. See the following screen-shots. You can also notice that disabled tab label is grayed out (click the image to enlarge it).

Firebug activation menu

and...

Firebug activation menu

The menu is available for all activable panels (i.e. for those which can be enabled/disabled) and is displayed only for the currently selected tab so, the space on the tab-bar isn’t wasted. The menu target (the black-arrow) can’t be overlooked by the user, but it’s also not eye catching.

All the activable logic is behind these four options:

  1. Enabled – The panel is enabled for all sites.
  2. Disabled - The panel is disabled for all sites.
  3. Enable <panel>for <site> - The panel is enabled for specific site.
  4. Disable <panel> for <site> - The panel is enabled for specific site.

So, some users who use Firebug just occasionally can keep all activable panels disabled and perhaps enable them only for some specific sites. The others can enable all panels and perhaps disable them just for sites like e.g. gmail.

There is also additional Sites... option that displays list of sites for which the panel has been enabled or disabled.

List of enabled/disabled sites

You can see that in this case, Network Monitor has been enabled for www.google.cz.

Finally, the following page is displayed for a disabled panel (Net panel in this case). The page allows one click enablement of the panel and also activation of multiple panels at once. The user can just select appropriate panels and press Enable selected... button.

Firebug\'s panel disabled

The internal architecture of the UI is extensible so, possible Firebug extensions can utilize all the APIs and hook up into the UI as well. This will be useful especially for the user as the activation approach will be the same thorough entire Firebug IDE.

I welcome any new ideas about how to improve the UI!

Firecookie 0.6 compatible with Firefox 3

by admin

Just a quick update for all who just installed fresh new Firefox 3 and want to use latest compatible Firecookie extension.

Download Firecookie 0.6

I would also strongly recommend to  use Firebug 1.2 with Firefox 3.

Extending Firebug, domplate (part V.)

by admin

One of the most interesting parts of the Firebug framework is a template system called Domplate. This engine is used to generate HTML UI of Firebug (content of all FB's panels).

It's quite powerful template system and I would definitely recommend to use it when creating UI for Firebug extensions.

Domplate generates the result HTML markup according to templates written in JavaScript. These templates are internally evaluated into a text, which is consequently inserted into specified DOM element on the page through innerHTML property.

It's also possible to define DOM event listeners so, the template object can handle even the user interaction with the final UI.

Hello World! template

So, let's take a look at how to make up some HTML for our Hello World! extension. First of all, see the following piece of code that defines a simple Domplate template.

var helloWorldRep = domplate(
{
    myTag:
        DIV({class: "MyDiv"},
            "Hello World!"
        )
});

HTML generated from this template should look like as follows:

<DIV class="MyDiv">Hello World!</DIV>

The template object is created by domplate function and stored in helloWorldRep variable. This new object usually contains three type of properties:

  1. Tag - set of functions (constructors) that represent a markup template.
  2. Data provider - a function that is intended to provide dynamic data for the template during generation process.
  3. Event handler - a function that is intended to handle DOM events fired when the generated UI is used by the user.

In our case, we have only one tag that describes how the result markup should look like. Only static text will be generated so, no additional providers or handlers are necessary.

The next piece of code shows how to evaluate the template and append generated HTML into our panel. It's executed within onMyButton function, which is a handler for a toolbar button created in part II.

onMyButton: function(context)
{
    var panel = context.getPanel(panelName);
    var parentNode = panel.panelNode;
    var rootTemplateElement = helloWorldRep.myTag.append(
        {}, parentNode, helloWorldRep);
}

We are using panel's member variable panelNode, which represents content area of the panel - final HTML will be inserted into it. Notice that we are using getPanel function to get our panel for the current context (page) where panelName represents ID of the panel, see part II.

HTML is inserted into the panel by calling append method of the template tag. This method has three parameters. The first one is used to provide data for the template, it's just emp