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 to support WebKit

Some nights ago I downloaded the last version of WebKit and discovered inside the really cool new WebInspector, which I also saw came bundled with Google Chrome and is supposed to be included in futures releases of Safari.

I read on the WebKit blog that the inspector is written in Javascript, so I decided to dig inside and see what could be done to extend it... 

I discovered a neat code design that is virtually waiting there to be extended. The structure is easy to follow and is almost plug and play. With almost I mean that at this time there is a little hacking to do to plug something in, but anyway it looks promising. 

To state a proof of concept I ported parts of FireSymfony to Web Inspector as you can see in the screenshot below.

My idea is to continue the improvement of FireSymfony for both browser families because besides the neat interface of Web Inspector I think it will became a key tool for web page debugging since it is included on Chrome and probably on a future release of Safari.

Also after I get more experience on extending Web Inspector I plan to post some tutorials on how to do it.