Extending WebKit Web Inspector with Fun!

After being astonished by the code that won the ActionScript contest of 25lines.com I decided to see if it was possible to port it to Javascript. 

I created an html page to hold the game and then worked on the port. After some time, I had the game working on Firefox and Safari, which was more than enough. Then the crazy idea came into my mind... 

Why not to show how to extend WebKit Web Inspector with this game? -I can do a hello world example if you want.

So, to show you how to add a custom Panel to the Web Inspector, in a similar way in how Firebug allows to be extended, we will add the game. 

Here you can see an screenshot of the final project inside Web Inspector:

WebKit Web Inspector is easy to extend. First we need to find where it's installed. If you don't have it already, you can get it from here. In my Mac it resides in the following folder: 

/Applications/WebKit.app/Contents/Frameworks/10.5/WebCore.framework/Versions/A/Resources/inspector

There you will find the following files: inspector.html and inspector.js

Those files are the ones that we will modify to add our custom Panel with the game, but before we need to grab the code from the google project page -you will need to use svn-.

After you get the code, you will find two folders, inside jsport you can find the working HTML/Javascript example. Inside inspector there are the files for the panel. Copy game.css and  game.js to the folder where you have installed Web Inspector. Then edit inspector.html adding the following lines below the inspector.js include line:

 <script type="text/javascript" src="game.js"></script>

 <link rel="stylesheet" type="text/css" href="game.css">

Then open inspector.js and replace the following code:

    this.panels = {

        elements: new WebInspector.ElementsPanel(),

        resources: new WebInspector.ResourcesPanel(),

        scripts: new WebInspector.ScriptsPanel(),

        profiles: new WebInspector.ProfilesPanel(),

        databases: new WebInspector.DatabasesPanel()

    };

with the following one:

    this.panels = {

        elements: new WebInspector.ElementsPanel(),

        resources: new WebInspector.ResourcesPanel(),

        scripts: new WebInspector.ScriptsPanel(),

        profiles: new WebInspector.ProfilesPanel(),

        databases: new WebInspector.DatabasesPanel(),

        game: new WebInspector.GamePanel()

    };

What we did here was add our GamePanel to the hash of panels that Web Inspector will initialize.

Then If you see inside game.js you will find the following -I omitted some code for brevity-:

WebInspector.GamePanel = function()

{

WebInspector.Panel.call(this);

...

};

WebInspector.GamePanel.prototype = {

    toolbarItemClass: "scripts",

    get toolbarItemLabel()

    {

        ...

    },

    show: function()

    {

        WebInspector.Panel.prototype.show.call(this);

        

        ...

    },

    hide: function()

    {

        WebInspector.Panel.prototype.hide.call(this);

    }

};

WebInspector.GamePanel.prototype.__proto__ = WebInspector.Panel.prototype;

Those are the three basic parts of our Panel. First we declare it. Then we implement the interface of WebInspector.Panel and at the end we declare that our panel extends WebInspector.Panel

In the first part what we do is add a container for the game as a pre tag. This element is attached to this.element which is the base element of a WebPanel. By setting the id gameArea, we style the pre with the styles defined in game.css

Then on the second part I set the default css class for our panel as scripts. In this way, our button on the Web Inspector toolbar will have the same icon as the Scripts panel -if you want you can add a new style and define there a background image as you will do with CSS in a normal web page-.

For get toolbarItemLabel() we return Fun!. This will be the label for our Panel in the toolbar.

Then we implement show() where we draw the game. Here we can add the code that will initialize the contents of our Panel. Inside hide() We should implement all the logic to be run when the user switch to another panel, like removing unused objects, etc.

After we have everything in place. We restart WebKit, open the Web Inspector and enjoy our game.

NOTE 1: AFAIK, this technique should work for Google Chrome Web Inspector. The last time I checked the code, it was using the same code of WebKit.

NOTE 2: The drawback of this kind of extensions is that the next time you upgrade the browser, it will erase your Panel. Maybe in the future WebKit allows a more plug and play way of doing it. In this previous post I show some screenshots of  FireSymfony working inside Web Inspector.

NOTE 3: The original author of the ActionScript game is Marius Heil.

FireSymfony - First release is out

I'm happy to announce the release of both the FireSymfony extension for Firebug and the firesymfonyPlugin for symfony.

The extension can be downloaded from the mozilla add ons web site. The symfony plugin is available as a pear package from the framework plugins website.

So those that live on the edge can start testing this plugin.

I also created a google group where you can provide feedback and request new features, as well as have some discussions about it.

In a future post I will provide more details about upcoming features and roadmap.

Some screenshots:

FireSymfony - A Firebug extension for symfony

While developing websites is nice to have at hand the right tools to do the job effectively. One of the tools I like the most is Firebug for all it’s debugging capabilities. Also, because I develop websites using symfony, the web debug toolbar provided by the framework is very handy to know what was happening in the server while the request was processed.

But sometimes the toolbar position makes impossible to use some features of the layout of our website, like a link menu on the top right corner. It also happens that while we display a small popup with the resize functionality disabled it’s turns hard to access all the data displayed by the toolbar.

The solution I’ve came up with is to move all the data from the toolbar to Firebug, actually, to port the symfony web debug toolbar as a Firebug extension. This will remove the toolbar from the page html and will show it in a convenient place that almost every web developer is used to.

Taking advantage from the cool new features of symfony 1.2 I started a project to develop a symfony plugin to send the data to the Firebug extension. The later has been smartly called FireSymfony.

The roadmap I'm following is the next one:

1. Extend the sfWebDebug class and it’s panels to send JSON data to the browser and not html markup. (Thanks to the neat code design of symfony this task has been really easy).
   
2. Create the extension layout inside Firebug to present the same functionality provided by the web debug toolbar.
   
3. Add some CSS styles to make it look pretty.
   

Currently I’m finishing the second step and the idea is to release both the symfony plugin and the Firebug extension during october, so stay tuned.

Below I added a screenshot of the current state of the project. Please provide feedback about the idea so I can try to make it better and useful for everyone.