From 836050cea5494468d5889941b61415f7831963a9 Mon Sep 17 00:00:00 2001
From: maximebf <maxime.bouroumeau@gmail.com>
Date: Thu, 13 Jun 2013 18:48:23 +0800
Subject: [PATCH] huge refactoring, comments and docs

---
 LICENSE                                       |  19 +
 README.md                                     |  84 +++-
 composer.json                                 |  19 +
 demo/bootstrap.php                            |   3 +-
 demo/demo.php                                 |   5 +-
 demo/demo_ajax.php                            |   3 +-
 demo/demo_ajax_exception.php                  |   3 +-
 docs/data_collectors.md                       |  80 +++
 docs/javascript_bar.md                        | 120 +++++
 docs/manifest.json                            |  10 +
 docs/rendering.md                             | 117 +++++
 docs/screenshot.png                           | Bin 0 -> 15430 bytes
 src/DebugBar/DataCollector/DataCollector.php  |  17 +
 .../DataCollector/DataCollectorInterface.php  |  25 +-
 .../DataCollector/DependencyCollector.php     |  24 +-
 .../DataCollector/MemoryCollector.php         |  59 ++-
 .../DataCollector/MessagesCollector.php       |  50 +-
 .../DataCollector/PhpInfoCollector.php        |  27 +-
 src/DebugBar/DataCollector/Renderable.php     |  25 +
 .../DataCollector/RequestDataCollector.php    |  43 +-
 ...imeCollector.php => TimeDataCollector.php} | 116 ++++-
 src/DebugBar/DebugBar.php                     | 109 ++++-
 src/DebugBar/DebugBarException.php            |   8 +
 src/DebugBar/JavascriptRenderer.php           | 407 ++++++++++++++++
 src/DebugBar/Renderer/JavascriptRenderer.php  | 159 ------
 src/DebugBar/StandardDebugBar.php             |  18 +-
 tests/DebugBar/Tests/DebugBarTestCase.php     |   8 +
 web/debugbar.css                              | 338 +++++++------
 web/debugbar.js                               | 461 +++++++++++++++---
 web/standard-debugbar.js                      |  30 --
 web/widgets.js                                | 266 +++++++---
 31 files changed, 2082 insertions(+), 571 deletions(-)
 create mode 100644 LICENSE
 create mode 100644 composer.json
 create mode 100644 docs/data_collectors.md
 create mode 100644 docs/javascript_bar.md
 create mode 100644 docs/manifest.json
 create mode 100644 docs/rendering.md
 create mode 100644 docs/screenshot.png
 create mode 100644 src/DebugBar/DataCollector/Renderable.php
 rename src/DebugBar/DataCollector/{TimeCollector.php => TimeDataCollector.php} (53%)
 create mode 100644 src/DebugBar/JavascriptRenderer.php
 delete mode 100644 src/DebugBar/Renderer/JavascriptRenderer.php
 create mode 100644 tests/DebugBar/Tests/DebugBarTestCase.php
 delete mode 100644 web/standard-debugbar.js

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..1344c98
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,19 @@
+Copyright (C) 2013 Maxime Bouroumeau-Fuseau
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index f7dbcbe..d3aaba7 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,83 @@
-# Debug bar for PHP
+# PHP Debug Bar
 
-Displays a debug bar in the browser with information from php
\ No newline at end of file
+Displays a debug bar in the browser with information from php.
+No more `var_dump()` in your code!
+
+![Screenshot](docs/screenshot.png)
+
+**Features:**
+
+ - Generic debug bar with no other dependencies
+ - Easy to integrate with any project
+ - Clean, fast and easy to use interface
+ - Handles AJAX request
+ - Includes generic data collectors and collectors for well known libraries
+ - The client side bar is 100% coded in javascript
+ - Easily create your own collectors and their associated view in the bar
+
+
+## Installation
+
+The easiest way to install DebugBar is using [Composer](https://github.com/composer/composer)
+with the following requirement:
+
+    {
+        "require": {
+            "maximebf/debugbar": ">=1.0.0"
+        }
+    }
+
+Alternatively, you can [download the archive](https://github.com/maximebf/php-debugbar/zipball/master) 
+and add the src/ folder to PHP's include path:
+
+    set_include_path('/path/to/src' . PATH_SEPARATOR . get_include_path());
+
+DebugBar does not provide an autoloader but follows the [PSR-0 convention](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-0.md).  
+You can use the following snippet to autoload ConsoleKit classes:
+
+    spl_autoload_register(function($className) {
+        if (substr($className, 0, 8) === 'DebugBar') {
+            $filename = str_replace('\\', DIRECTORY_SEPARATOR, trim($className, '\\')) . '.php';
+            require_once $filename;
+        }
+    });
+
+## Quick start
+
+DebugBar is very easy to use and you can add it to any of your projets in no time.
+The easiest way is using the `render()` functions
+
+    <?php
+    use DebugBar\StandardDebugBar;
+    use DebugBar\Renderer\JavascriptRenderer;
+
+    $debugbar = new StandardDebugBar();
+    $debugbarRenderer = $debugbar->getJavascriptRenderer();
+
+    $debugbar["messages"]->addMessage("hello world!");
+    ?>
+    <html>
+        <head>
+            <?php echo $debugbarRenderer->renderHead() ?>
+        </head>
+        <body>
+            ...
+            <?php echo $debugbarRenderer->render() ?>
+        </body>
+    </html>
+
+The DebugBar uses DataCollectors to collect data from your PHP code. Some of them are
+automated but others are manual. Use the `DebugBar` like an array where keys are the
+collector names. In our previous example, we add a message to the `MessagesCollector`:
+
+    $debugbar["messages"]->addMessage("hello world!");
+
+`StandardDebugBar` activates all bundled collectors:
+
+ - `MemoryCollector` (*memory*)
+ - `MessagesCollector` (*messages*)
+ - `PhpInfoCollector` (*php*)
+ - `RequestDataCollector` (*request*)
+ - `TimeDataCollector` (*time*)
+
+Learn more about DebugBar in the [docs](http://maximebf.github.io/php-debugbar).
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..30bbadc
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,19 @@
+{
+    "name": "maximebf/debugbar",
+    "description": "Debug bar in the browser for php application",
+    "keywords": ["debug"],
+    "homepage": "https://github.com/maximebf/php-debugbar",
+    "type": "library",
+    "license": "MIT",
+    "authors": [{
+        "name": "Maxime Bouroumeau-Fuseau",
+        "email": "maxime.bouroumeau@gmail.com",
+        "homepage": "http://maximebf.com"
+    }],
+    "require": {
+        "php": ">=5.3.0"
+    },
+    "autoload": {
+        "psr-0": {"DebugBar": "src/"}
+    }
+}
diff --git a/demo/bootstrap.php b/demo/bootstrap.php
index dd18b36..771a0c8 100644
--- a/demo/bootstrap.php
+++ b/demo/bootstrap.php
@@ -3,7 +3,6 @@
 include '../tests/bootstrap.php';
 
 use DebugBar\StandardDebugBar;
-use DebugBar\Renderer\JavascriptRenderer;
 
 $debugbar = new StandardDebugBar();
-$debugbarRenderer = new JavascriptRenderer($debugbar, '../web/');
+$debugbarRenderer = $debugbar->getJavascriptRenderer()->setBaseUrl('../web');
diff --git a/demo/demo.php b/demo/demo.php
index 97cd42e..3c637ce 100644
--- a/demo/demo.php
+++ b/demo/demo.php
@@ -20,7 +20,7 @@ $debugbar['time']->startMeasure('render');
 ?>
 <html>
     <head>
-        <?php echo $debugbarRenderer->renderIncludes() ?>
+        <?php echo $debugbarRenderer->renderHead() ?>
         <script type="text/javascript">
             $(function() {
                 $('.ajax').click(function() {
@@ -39,8 +39,7 @@ $debugbar['time']->startMeasure('render');
         <p><a href="demo_ajax_exception.php" class="ajax">load ajax content with exception</a></p>
         <?php
             usleep(100);
-            $debugbar->collect();
-            echo $debugbarRenderer->renderToolbar();
+            echo $debugbarRenderer->render();
         ?>
     </body>
 </html>
diff --git a/demo/demo_ajax.php b/demo/demo_ajax.php
index f560dc2..dddb82d 100644
--- a/demo/demo_ajax.php
+++ b/demo/demo_ajax.php
@@ -6,6 +6,5 @@ $debugbar['messages']->addMessage('hello from ajax');
 ?>
 hello from AJAX
 <?php
-    $debugbar->collect();
-    echo $debugbarRenderer->renderAjaxToolbar();
+    echo $debugbarRenderer->render(false);
 ?>
diff --git a/demo/demo_ajax_exception.php b/demo/demo_ajax_exception.php
index 8be9c70..bf7884e 100644
--- a/demo/demo_ajax_exception.php
+++ b/demo/demo_ajax_exception.php
@@ -11,6 +11,5 @@ try {
 ?>
 error from AJAX
 <?php
-    $debugbar->collect();
-    echo $debugbarRenderer->renderAjaxToolbar();
+    echo $debugbarRenderer->render(false);
 ?>
diff --git a/docs/data_collectors.md b/docs/data_collectors.md
new file mode 100644
index 0000000..ca2dfd7
--- /dev/null
+++ b/docs/data_collectors.md
@@ -0,0 +1,80 @@
+# Collecting Data
+
+## Using collectors
+
+Collectors can be added to your debug bar using `addCollector()`. 
+
+    $debugbar = new DebugBar();
+    $debugbar->addCollector(new DataCollector\RequestDataCollector());
+
+Each collector as a unique name as defined by its `getName()` method. You can 
+access collectors using `getCollector($name)`.
+
+    $debugbar->addCollector(new DataCollector\MessagesCollector());
+    $debugbar->getCollector('messages')->addMessage("foobar");
+    // or:
+    $debugbar['messages']->addMessage("foobar");
+
+Data will be collected from them when the debug bar is rendered. You can however
+collect the data earlier using `collect()`.
+
+    $debugbar->collect();
+
+## Creating collectors
+
+Collectors must implement the `DebugBar\DataCollector\DataCollectorInterface`. They
+may subclass `DebugBar\DataCollector\DataCollector` which provides utility methods.
+
+Collectors must provide a `getName()` function returning their unique name and a
+`collect()` function returning some json-encodable data. The latter will be called at the
+same time the `DebugBar::collect()` method is called.
+
+    class MyDataCollector extends DebugBar\DataCollector\DataCollector
+    {
+        public function collect()
+        {
+            return array("uniqid" => uniqid());
+        }
+
+        public function getName()
+        {
+            return 'mycollector';
+        }
+    }
+
+    $debugbar->addCollector(new MyDataCollector());
+
+This however won't show anything in the debug bar as no information are provided
+on how to display these data. You could do that manually as you'll see in later chapter
+or implement the `DebugBar\DataSource\Renderable` interface. 
+
+To implement it, you must define a `getWidgets()` function which returns an array
+of key/value pairs where key are control names and values control options as defined
+in `JavascriptRenderer::addControl($name, $options)` (see Rendering chapter).
+
+    class MyDataCollector extends DebugBar\DataCollector\DataCollector implements DebugBar\DataCollector\Renderable
+    {
+        // ...
+
+        public function getWidgets()
+        {
+            return array(
+                "mycollector" => array(
+                    "icon" => "cogs",
+                    "tooltip" => "uniqid()",
+                    "map" => "uniqid",
+                    "default" => "''"
+                )
+            );
+        }
+    }
+
+This will have the result of adding a new indicator to the debug bar.
+
+## Included collectors
+
+ - `MemoryCollector` (*memory*)
+ - `MessagesCollector` (*messages*)
+ - `PhpInfoCollector` (*php*)
+ - `RequestDataCollector` (*request*)
+ - `TimeDataCollector` (*time*)
diff --git a/docs/javascript_bar.md b/docs/javascript_bar.md
new file mode 100644
index 0000000..8ea09ba
--- /dev/null
+++ b/docs/javascript_bar.md
@@ -0,0 +1,120 @@
+# Javascript Bar
+
+The default client side implementation of the debug bar is made
+entirely in Javascript and is located in the *debugbar.js* file. 
+
+It adds a bottom-anchored bar which can have tabs and indicators. 
+The bar can be in an open or close state. When open, the tab panel is
+visible.
+An indicator is a piece of information displayed in the always-visible 
+part of the bar.
+
+The bar handles multiple datasets by displaying a select box
+which allows you to switch between them.
+
+The state of the bar (height, visibilty, active panel) can be saved
+between requests (enabled in the standard bar).
+
+Each panel is composed of a widget which is used to display the
+data from a data collector. Some common widgets are provided in
+the *widgets.js* file.
+
+The `PhpDebugBar` namespace is used for all objects and the only
+dependencies are *jQuery*, *jquery-drag* and *FontAwesome* (css).
+
+The main class is `PhpDebugBar.DebugBar`. It provides the infrastructure
+to manage tabs, indicators and datasets.
+
+When initialized, the `DebugBar` class adds itself to the `<body>` of the
+page. It is empty by default.
+
+## Tabs and indicators
+
+Controls (ie. tabs and indicators) are uniquely named. You can check if
+a control exists using `isControl(name)`.
+
+Tabs can be added using the `createTab(name, widget, title)` function.
+The third argument is optional and will be computed from the name if not
+provided.
+
+    var debugbar = new PhpDebugBar.DebugBar();
+    debugbar.createTab("messages", new PhpDebugBar.Widgets.MessagesWidget());
+
+Indicators can be added using `createIndicator(name, icon, tooltip, position)`.
+Only `name` is required in this case. `icon` should be the name of a FontAwesome
+icon. `position` can either by *right* (default) or *left*.
+
+    debugbar.createIndicator("time", "cogs", "Request duration");
+
+You may have noticed that the data to use inside these controls is not
+specified at the moment. Although it could be specified when initialized, it
+is better to use data mapping to support dynamically changing the data set.
+
+## Data mapping
+
+To enable dynamically changing the data sets, we need to specify which values
+should be feed into which controls. This can be done using `setDataMap(map)`
+which takes as argument an object where properties are control names. Values
+should be arrays where the first item is the property from the data set and 
+the second a default value.
+
+    debugbar.setDataMap({
+        "messages": ["messages", []],
+        "time": ["time.duration_str", "0ms"]
+    });
+
+You can notice that nested properties can also be accessed using the dot
+notation.
+
+In this mapping, `data["messages"]` will be fed to the *messages* tab
+and `data["time"]["duration_str"]` will be fed to the *time* indicator.
+
+Note: you can append mapping info using `addDataMap(map)`
+
+## Datasets
+
+Although you shouldn't have to do anything regarding managing datasets,
+it is interesting to know a few functions related to them.
+
+`addDataSet(data, id)` adds a dataset to the bar. The select box that
+allows to swtich between sets is only displayed if more than one are added.
+`id` is optional and will be auto-generated if not specified.
+
+`showDataSet(id)` allows you to switch to a specific dataset.
+
+## Widgets
+
+A widget is a javascript object which must contain at least an `element`
+property. `element`'s value will be appended to the tab panel.
+
+Widgets should provide a `setData()` function so they can be used with
+the data mapper.
+
+    var MyWidget = function() {
+        this.element = $('<div class="mywidget" />');
+    };
+
+    MyWidget.prototype.setData = function(text) {
+        this.element.text(text);
+    };
+
+    // ----
+
+    debugbar.createTab("mytab", new MyWidget());
+    debugbar.addDataMap({"mytab": ["mydata", ""]});
+
+Widgets for bundled data collectors are included as well as more generic
+widgets that you can build on top of. They are located in *widgets.js* in
+the `PhpDebugBar.Widgets` namespace.
+
+Generic widgets:
+
+ - `ListWidget`: renders an array as a UL list
+ - `KVListWidget`: renders a hash as a DL list
+ - `VariablesListWidget`: an extension of `KVListWidget` to display a list of variables
+ - `IFrameWidget`: renders an iframe
+
+Data collectors related widgets:
+
+ - `MessagesWidget`: for the `MessagesCollector`
+ - `TimelineWidget`: for the `TimeDataCollector`
diff --git a/docs/manifest.json b/docs/manifest.json
new file mode 100644
index 0000000..7c156f4
--- /dev/null
+++ b/docs/manifest.json
@@ -0,0 +1,10 @@
+{
+    "title": "PHP Debug Bar",
+    "home": "../README.md",
+    "files": [
+        "../README.md",
+        "data_collectors.md",
+        "rendering.md",
+        "javascript_bar.md"
+    ]
+}
diff --git a/docs/rendering.md b/docs/rendering.md
new file mode 100644
index 0000000..4b31566
--- /dev/null
+++ b/docs/rendering.md
@@ -0,0 +1,117 @@
+# Rendering
+
+Rendering is performed using the `DebugBar\JavascriptRenderer̀ class. It contains
+all the useful functions to included the needed assets and generate a debug bar.
+
+    $renderer = $debugbar->getJavascriptRenderer();
+
+## Assets
+
+The debug bar relies on some css and javascript files which needs to be included
+into your webpage. This can be done in two ways:
+
+ - Using `JavascriptRenderer::renderHead()` which will returns a string with
+   the needed script and link tags
+ - Using [Assetic](https://github.com/kriswallsmith/assetic) and 
+   `JavascriptRenderer::getAsseticCollection()`
+
+I would recommend using the second method as Assetic is a very powerful asset
+manager but the first method is provided to quickly integrate the debug bar
+into any projets.
+
+You can define the base url of your assets using `setBaseUrl()`. This is needed
+in 99% of cases. If you are using Assetic, you may have to change the base path
+of the assets if you moved the folder. This can be done using `setBasePath()`.
+
+Using `renderHead()`:
+
+    <html>
+        <head>
+            ...
+            <?php echo $renderer->renderHead() ?>
+            ...
+        </head>
+        ...
+    </html>
+
+Using Assetic:
+
+    list($cssCollection, $jsCollection) = $renderer->getAsseticCollection();
+
+Note that you can only use the debug bar assets and manage the dependencies by yourself
+using `$renderer->setIncludeVendors(false)`.
+
+## The javascript object
+
+The renderer will generate all the needed code for your debug bar. This means
+initializing the DebugBar js object, adding tabs and indicators, defining a data map, etc...
+
+Data collectors can provide their own controls when implementing the 
+`DebugBar\DataCollector\Renderable` interface as explained in the Collecting Data chapter.
+
+Thus in almost all cases, you should only have to use `render()` right away:
+
+    <html>
+        ...
+        <body>
+            <?php echo $renderer->render() ?>
+        </body>
+    </html>
+
+This will print the initilization code for the toolbar and the dataset for the request.
+When you are performing AJAX requests, you do not want to initialize a new toolbar but
+add the dataset to the existing one. You can disable initialization using ̀false` as
+the first argument of ̀render()`.
+
+    <p>my ajax content</p>
+    <?php echo $renderer->render(false) ?>
+
+### Controlling object initialization
+
+You can further control the initialization of the javascript object using `setInitialization()`.
+It takes a bitwise value made out of the constants ̀INITIALIZE_CONSTRUCTOR` and `INITIALIZE_CONTROLS`.
+The first one controls whether to initialize the variable (ie. `var debugbar = new DebugBar()`). The
+second one whether to initialize all the controls (ie. adding tab and indicators as well as data mapping).
+
+You can also control the class name of the object using `setJavascriptClass()` and the name of
+the instance variable using `setVariableName()`.
+
+Let's say you have subclassed `PhpDebugBar.DebugBar` in javascript to do your own initilization.
+Your new object is called `MyDebugBar`.
+
+    $renderer->setJavascriptClass("MyDebugBar");
+    $renderer->setInitialization(JavascriptRenderer::INITIALIZE_CONSTRUCTOR);
+    // ...
+    echo $renderer->render();
+
+This has the result of printing:
+
+    <script type="text/javascript">
+    var phpdebugbar = new MyDebugBar();
+    phpdebugbar.addDataSet({ ... });
+    </script>
+
+Using `setInitialization(0)` will only render the addDataSet part.
+
+### Defining controls
+
+Controls can be manually added to the debug bar using `addControl($name, $options)`. You should read
+the Javascript bar chapter before this section.
+
+`$name` will be the name of your control and `$options` is a key/value pair array with these
+possible values:
+
+- *icon*: icon name
+- *tooltip*: string
+- *widget*: widget class name
+- *map*: a property name from the data to map the control to
+- *default*: a js string, default value of the data map
+
+At least *icon* or *widget* are needed. If *widget* is specified, a tab will be created, otherwise
+an indicator.
+
+    $renderer->addControl('messages', array(
+        "widget" => "PhpDebugBar.Widgets.MessagesWidget",
+        "map" => "messages",
+        "default" => "[]"
+    ));
diff --git a/docs/screenshot.png b/docs/screenshot.png
new file mode 100644
index 0000000000000000000000000000000000000000..adddef1936c3fdbc83b2ef3ce33e7fbbc2c0e4cc
GIT binary patch
literal 15430
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

literal 0
HcmV?d00001

diff --git a/src/DebugBar/DataCollector/DataCollector.php b/src/DebugBar/DataCollector/DataCollector.php
index 2ed92db..21806d7 100644
--- a/src/DebugBar/DataCollector/DataCollector.php
+++ b/src/DebugBar/DataCollector/DataCollector.php
@@ -1,9 +1,26 @@
 <?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
 namespace DebugBar\DataCollector;
 
+/**
+ * Abstract class for data collectors
+ */
 abstract class DataCollector implements DataCollectorInterface
 {
+    /**
+     * Transforms a PHP variable to a string representation
+     * 
+     * @param mixed $var
+     * @return string
+     */
     public function varToString($var)
     {
         return print_r($var, true);
diff --git a/src/DebugBar/DataCollector/DataCollectorInterface.php b/src/DebugBar/DataCollector/DataCollectorInterface.php
index ba8dfc3..43c942f 100644
--- a/src/DebugBar/DataCollector/DataCollectorInterface.php
+++ b/src/DebugBar/DataCollector/DataCollectorInterface.php
@@ -1,10 +1,31 @@
 <?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
 namespace DebugBar\DataCollector;
 
+/**
+ * DataCollector Interface
+ */
 interface DataCollectorInterface
 {
-    function getName();
-
+    /**
+     * Called by the DebugBar when data needs to be collected
+     *
+     * @return array Collected data
+     */
     function collect();
+
+    /**
+     * Returns the unique name of the collector
+     * 
+     * @return string
+     */
+    function getName();
 }
diff --git a/src/DebugBar/DataCollector/DependencyCollector.php b/src/DebugBar/DataCollector/DependencyCollector.php
index c9988fb..9159a83 100644
--- a/src/DebugBar/DataCollector/DependencyCollector.php
+++ b/src/DebugBar/DataCollector/DependencyCollector.php
@@ -1,16 +1,30 @@
 <?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
 namespace DebugBar\DataCollector;
 
 class DependencyCollector extends DataCollector
 {
-    public function getName()
-    {
-        return 'dependency';
-    }
-
+    /**
+     * {@inheritDoc}
+     */
     public function collect()
     {
         return array();
     }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getName()
+    {
+        return 'dependency';
+    }
 }
diff --git a/src/DebugBar/DataCollector/MemoryCollector.php b/src/DebugBar/DataCollector/MemoryCollector.php
index 587155c..197d97f 100644
--- a/src/DebugBar/DataCollector/MemoryCollector.php
+++ b/src/DebugBar/DataCollector/MemoryCollector.php
@@ -1,26 +1,47 @@
 <?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
 namespace DebugBar\DataCollector;
 
-class MemoryCollector extends DataCollector
+/**
+ * Collects info about memory usage
+ */
+class MemoryCollector extends DataCollector implements Renderable
 {
     protected $peakUsage = 0;
 
-    public function getName()
-    {
-        return 'memory';
-    }
-
+    /**
+     * Returns the peak memory usage
+     * 
+     * @return integer
+     */
     public function getPeakUsage()
     {
         return $this->peakUsage;
     }
 
+    /**
+     * Updates the peak memory usage value
+     */
     public function updatePeakUsage()
     {
         $this->peakUsage = memory_get_peak_usage(true);
     }
 
+    /**
+     * Transforms a size in bytes to a human readable string
+     * 
+     * @param string $size
+     * @param integer $precision
+     * @return string
+     */
     public function toReadableString($size, $precision = 2)
     {
         $base = log($size) / log(1024);
@@ -28,6 +49,9 @@ class MemoryCollector extends DataCollector
         return round(pow(1024, $base - floor($base)), $precision) . $suffixes[floor($base)]; 
     }
 
+    /**
+     * {@inheritDoc}
+     */
     public function collect()
     {
         $this->updatePeakUsage();
@@ -36,4 +60,27 @@ class MemoryCollector extends DataCollector
             'peak_usage_str' => $this->toReadableString($this->peakUsage)
         );
     }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getName()
+    {
+        return 'memory';
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getWidgets()
+    {
+        return array(
+            "memory" => array(
+                "icon" => "cogs", 
+                "tooltip" => "Memory Usage", 
+                "map" => "peak_usage_str", 
+                "default" => "'0B'"
+            )
+        );
+    }
 }
diff --git a/src/DebugBar/DataCollector/MessagesCollector.php b/src/DebugBar/DataCollector/MessagesCollector.php
index 9880529..92b88d4 100644
--- a/src/DebugBar/DataCollector/MessagesCollector.php
+++ b/src/DebugBar/DataCollector/MessagesCollector.php
@@ -1,11 +1,30 @@
 <?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
 namespace DebugBar\DataCollector;
 
-class MessagesCollector extends DataCollector
+/**
+ * Provides a way to log messages
+ */
+class MessagesCollector extends DataCollector implements Renderable
 {
     protected $messages = array();
 
+    /**
+     * Adds a message
+     *
+     * A message can be anything from an object to a string
+     * 
+     * @param mixed $message
+     * @param string $label
+     */
     public function addMessage($message, $label = 'info')
     {
         $this->messages[] = array(
@@ -18,18 +37,43 @@ class MessagesCollector extends DataCollector
         );
     }
 
+    /**
+     * Returns all messages
+     * 
+     * @return array
+     */
     public function getMessages()
     {
         return $this->messages;
     }
 
+    /**
+     * {@inheritDoc}
+     */
+    public function collect()
+    {
+        return $this->messages;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
     public function getName()
     {
         return 'messages';
     }
 
-    public function collect()
+    /**
+     * {@inheritDoc}
+     */
+    public function getWidgets()
     {
-        return $this->messages;
+        return array(
+            "messages" => array(
+                "widget" => "PhpDebugBar.Widgets.MessagesWidget", 
+                "map" => "messages", 
+                "default" => "[]"
+            )
+        );
     }
 }
diff --git a/src/DebugBar/DataCollector/PhpInfoCollector.php b/src/DebugBar/DataCollector/PhpInfoCollector.php
index d81ff66..a88a966 100644
--- a/src/DebugBar/DataCollector/PhpInfoCollector.php
+++ b/src/DebugBar/DataCollector/PhpInfoCollector.php
@@ -1,18 +1,35 @@
 <?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
 namespace DebugBar\DataCollector;
 
+/**
+ * Collects info about PHP
+ */
 class PhpInfoCollector extends DataCollector
 {
-    public function getName()
-    {
-        return 'php';
-    }
-
+    /**
+     * {@inheritDoc}
+     */
     public function collect()
     {
         return array(
             'version' => PHP_VERSION
         );
     }
+    
+    /**
+     * {@inheritDoc}
+     */
+    public function getName()
+    {
+        return 'php';
+    }
 }
diff --git a/src/DebugBar/DataCollector/Renderable.php b/src/DebugBar/DataCollector/Renderable.php
new file mode 100644
index 0000000..9b2bbc5
--- /dev/null
+++ b/src/DebugBar/DataCollector/Renderable.php
@@ -0,0 +1,25 @@
+<?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace DebugBar\DataCollector;
+
+/**
+ * Indicates that a DataCollector is renderable using JavascriptRenderer
+ */
+interface Renderable
+{
+    /**
+     * Returns a hash where keys are control names and their values
+     * an array of options as defined in {@see DebugBar\JavascriptRenderer::addControl()}
+     * 
+     * @return array
+     */
+    function getWidgets();
+}
diff --git a/src/DebugBar/DataCollector/RequestDataCollector.php b/src/DebugBar/DataCollector/RequestDataCollector.php
index f9246bd..1785808 100644
--- a/src/DebugBar/DataCollector/RequestDataCollector.php
+++ b/src/DebugBar/DataCollector/RequestDataCollector.php
@@ -1,14 +1,23 @@
 <?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
 namespace DebugBar\DataCollector;
 
-class RequestDataCollector extends DataCollector
+/**
+ * Collects info about the current request
+ */
+class RequestDataCollector extends DataCollector implements Renderable
 {
-    public function getName()
-    {
-        return 'request';
-    }
-
+    /**
+     * {@inheritDoc}
+     */
     public function collect()
     {
         $vars = array('_GET', '_POST', '_SESSION', '_COOKIE', '_SERVER');
@@ -22,4 +31,26 @@ class RequestDataCollector extends DataCollector
 
         return $data;
     }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getName()
+    {
+        return 'request';
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getWidgets()
+    {
+        return array(
+            "request" => array(
+                "widget" => "PhpDebugBar.Widgets.VariableListWidget", 
+                "map" => "request", 
+                "default" => "{}"
+            )
+        );
+    }
 }
diff --git a/src/DebugBar/DataCollector/TimeCollector.php b/src/DebugBar/DataCollector/TimeDataCollector.php
similarity index 53%
rename from src/DebugBar/DataCollector/TimeCollector.php
rename to src/DebugBar/DataCollector/TimeDataCollector.php
index d12da39..93e8a5c 100644
--- a/src/DebugBar/DataCollector/TimeCollector.php
+++ b/src/DebugBar/DataCollector/TimeDataCollector.php
@@ -1,16 +1,30 @@
 <?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
 namespace DebugBar\DataCollector;
 
-class TimeCollector extends DataCollector
+/**
+ * Collects info about the request duration as well as providing
+ * a way to log duration of any operations
+ */
+class TimeDataCollector extends DataCollector implements Renderable
 {
-
     protected $requestStartTime;
 
     protected $requestEndTime;
 
     protected $measures = array();
 
+    /**
+     * @param float $requestStartTime
+     */
     public function __construct($requestStartTime = null)
     {
         if ($requestStartTime === null) {
@@ -23,6 +37,12 @@ class TimeCollector extends DataCollector
         $this->requestStartTime = $requestStartTime;
     }
 
+    /**
+     * Starts a measure
+     * 
+     * @param string $name Internal name, used to stop the measure
+     * @param string $label Public name
+     */
     public function startMeasure($name, $label = null)
     {
         $start = microtime(true);
@@ -33,6 +53,11 @@ class TimeCollector extends DataCollector
         );
     }
 
+    /**
+     * Stops a measure
+     * 
+     * @param string $name
+     */
     public function stopMeasure($name)
     {
         $end = microtime(true);
@@ -42,16 +67,54 @@ class TimeCollector extends DataCollector
         $this->measures[$name]['duration_str'] = $this->toReadableString($this->measures[$name]['duration']);
     }
 
+    /**
+     * Utility function to measure the execution of a Closure
+     * 
+     * @param Closure $closure
+     */
+    public function measure(\Closure $closure)
+    {
+        $name = spl_object_hash($closure);
+        $this->startMeasure($name, $closure);
+        $closure();
+        $this->stopMeasure($name);
+    }
+
+    /**
+     * Returns an array of all measures
+     * 
+     * @return array
+     */
+    public function getMeasures()
+    {
+        return $this->measures;
+    }
+
+    /**
+     * Returns the request start time
+     * 
+     * @return float
+     */
     public function getRequestStartTime()
     {
         return $this->requestStartTime;
     }
 
+    /**
+     * Returns the request end time
+     * 
+     * @return float
+     */
     public function getRequestEndTime()
     {
         return $this->requestEndTime;
     }
 
+    /**
+     * Returns the duration of a request
+     * 
+     * @return float
+     */
     public function getRequestDuration()
     {
         if ($this->requestEndTime !== null) {
@@ -60,21 +123,20 @@ class TimeCollector extends DataCollector
         return microtime(true) - $this->requestStartTime;
     }
 
-    public function getMeasures()
-    {
-        return $this->measures;
-    }
-
+    /**
+     * Transforms a duration in seconds in a readable string
+     * 
+     * @param float $value
+     * @return string
+     */
     public function toReadableString($value)
     {
-        return round($value / 1000) . 'ms';
-    }
-
-    public function getName()
-    {
-        return 'time';
+        return round($value * 1000) . 'ms';
     }
 
+    /**
+     * {@inheritDoc}
+     */
     public function collect()
     {
         $this->requestEndTime = microtime(true);
@@ -92,4 +154,32 @@ class TimeCollector extends DataCollector
             'measures' => array_values($this->measures)
         );
     }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getName()
+    {
+        return 'time';
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function getWidgets()
+    {
+        return array(
+            "time" => array(
+                "icon" => "time", 
+                "tooltip" => "Request Duration", 
+                "map" => "time.duration_str", 
+                "default" => "'0ms'"
+            ),
+            "timeline" => array(
+                "widget" => "PhpDebugBar.Widgets.TimelineWidget", 
+                "map" => "time", 
+                "default" => "{}"
+            )
+        );
+    }
 }
diff --git a/src/DebugBar/DebugBar.php b/src/DebugBar/DebugBar.php
index 6d462e8..08cc789 100644
--- a/src/DebugBar/DebugBar.php
+++ b/src/DebugBar/DebugBar.php
@@ -1,28 +1,69 @@
 <?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
 namespace DebugBar;
 
 use ArrayAccess;
 use DebugBar\DataCollector\DataCollector;
-use DebugBar\Renderer\Renderer;
-use DebugBar\Renderer\JavascriptRenderer;
 
+/**
+ * Main DebugBar object
+ *
+ * Mananges data collectors. DebugBar provides an array-like access
+ * to collectors by name.
+ *
+ * <code>
+ *     $debugbar = new DebugBar();
+ *     $debugbar->addCollector(new DataCollector\MessagesCollector());
+ *     $debugbar['messages']->addMessage("foobar");
+ * </code>
+ */
 class DebugBar implements ArrayAccess
 {
     protected $collectors = array();
 
     protected $data;
+    
+    protected $jsRenderer;
 
+    /**
+     * Adds a data collector
+     * 
+     * @param DataCollector $collector
+     */
     public function addCollector(DataCollector $collector)
     {
+        if (isset($this->collectors[$collector->getName()])) {
+            throw new DebugBarException("'$name' is already a registered collector");
+        }
         $this->collectors[$collector->getName()] = $collector;
+        return $this;
     }
 
+    /**
+     * Checks if a data collector has been added
+     * 
+     * @param string $name
+     * @return boolean
+     */
     public function hasCollector($name)
     {
         return isset($this->collectors[$name]);
     }
 
+    /**
+     * Returns a data collector
+     * 
+     * @param string $name
+     * @return DataCollector
+     */
     public function getCollector($name)
     {
         if (!isset($this->collectors[$name])) {
@@ -31,11 +72,61 @@ class DebugBar implements ArrayAccess
         return $this->collectors[$name];
     }
 
+    /**
+     * Returns an array of all data collectors
+     * 
+     * @return array[DataCollector]
+     */
     public function getCollectors()
     {
         return $this->collectors;
     }
 
+    /**
+     * Collects the data from the collectors
+     * 
+     * @return array
+     */
+    public function collect()
+    {
+        $this->data = array();
+        foreach ($this->collectors as $name => $collector) {
+            $this->data[$name] = $collector->collect();
+        }
+        return $this->data;
+    }
+
+    /**
+     * Returns collected data
+     *
+     * Will collect the data if none have been collected yet
+     * 
+     * @return array
+     */
+    public function getData()
+    {
+        if ($this->data === null) {
+            $this->collect();
+        }
+        return $this->data;
+    }
+
+    /**
+     * Returns a JavascriptRenderer for this instance
+     * 
+     * @return JavascriptRenderer
+     */
+    public function getJavascriptRenderer()
+    {
+        if ($this->jsRenderer === null) {
+            $this->jsRenderer = new JavascriptRenderer($this);
+        }
+        return $this->jsRenderer;
+    }
+
+    // --------------------------------------------
+    // ArrayAccess implementation
+
     public function offsetSet($key, $value)
     {
         throw new DebugBarException("DebugBar[] is read-only");
@@ -55,18 +146,4 @@ class DebugBar implements ArrayAccess
     {
         throw new DebugBarException("DebugBar[] is read-only");
     }
-
-    public function collect()
-    {
-        $this->data = array();
-        foreach ($this->collectors as $name => $collector) {
-            $this->data[$name] = $collector->collect();
-        }
-        return $this->data;
-    }
-
-    public function getData()
-    {
-        return $this->data;
-    }
 }
diff --git a/src/DebugBar/DebugBarException.php b/src/DebugBar/DebugBarException.php
index 3f2a904..f887a08 100644
--- a/src/DebugBar/DebugBarException.php
+++ b/src/DebugBar/DebugBarException.php
@@ -1,4 +1,12 @@
 <?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
 namespace DebugBar;
 
diff --git a/src/DebugBar/JavascriptRenderer.php b/src/DebugBar/JavascriptRenderer.php
new file mode 100644
index 0000000..171314f
--- /dev/null
+++ b/src/DebugBar/JavascriptRenderer.php
@@ -0,0 +1,407 @@
+<?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace DebugBar;
+
+use DebugBar\DataCollector\Renderable;
+
+/**
+ * Renders the debug bar using the client side javascript implementation
+ *
+ * Generates all the needed initialization code of controls
+ */
+class JavascriptRenderer
+{
+    const INITIALIZE_CONSTRUCTOR = 2;
+
+    const INITIALIZE_CONTROLS = 4;
+
+    protected $debugBar;
+
+    protected $baseUrl;
+
+    protected $basePath;
+
+    protected $cssVendors = array('vendor/font-awesome/css/font-awesome.css');
+
+    protected $jsVendors = array('vendor/jquery-1.8.3.min.js', 'vendor/jquery.event.drag-2.2.js');
+
+    protected $includeVendors = true;
+
+    protected $cssFiles = array('debugbar.css');
+
+    protected $jsFiles = array('debugbar.js', 'widgets.js');
+
+    protected $javascriptClass = 'PhpDebugBar.DebugBar';
+
+    protected $variableName = 'phpdebugbar';
+
+    protected $initialization;
+
+    protected $controls = array();
+
+    /**
+     * @param DebugBar $debugBar
+     * @param string $baseUrl
+     * @param string $basePath
+     */
+    public function __construct(DebugBar $debugBar, $baseUrl = '/debugbar', $basePath = null)
+    {
+        $this->debugBar = $debugBar;
+        $this->baseUrl = $baseUrl;
+
+        if ($basePath === null) {
+            $basePath = __DIR__ . DIRECTORY_SEPARATOR . implode(DIRECTORY_SEPARATOR, array('..', '..', '..', 'web'));
+        }
+        $this->basePath = $basePath;
+
+        // bitwise operations cannot be done in class definition :(
+        $this->initialization = self::INITIALIZE_CONSTRUCTOR | self::INITIALIZE_CONTROLS;
+    }
+
+    /**
+     * Sets the path which assets are relative to
+     * 
+     * @param string $path
+     */
+    public function setBasePath($path)
+    {
+        $this->basePath = $path;
+        return $this;
+    }
+
+    /**
+     * Returns the path which assets are relative to
+     * 
+     * @return string
+     */
+    public function getBasePath()
+    {
+        return $this->basePath;
+    }
+
+    /**
+     * Sets the base URL from which assets will be served
+     * 
+     * @param string $url
+     */
+    public function setBaseUrl($url)
+    {
+        $this->baseUrl = $url;
+        return $this;
+    }
+
+    /**
+     * Returns the base URL from which assets will be served
+     * 
+     * @return string
+     */
+    public function getBaseUrl()
+    {
+        return $this->baseUrl;
+    }
+
+    /**
+     * Whether to include vendor assets
+     * 
+     * @param boolean $enabled
+     */
+    public function setIncludeVendors($enabled = true)
+    {
+        $this->includeVendors = $enabled;
+        return $this;
+    }
+
+    /**
+     * Checks if vendors assets are included
+     * 
+     * @return boolean
+     */
+    public function areVendorsIncluded()
+    {
+        return $this->includeVendors;
+    }
+
+    /**
+     * Sets the javascript class name
+     * 
+     * @param string $className
+     */
+    public function setJavascriptClass($className)
+    {
+        $this->javascriptClass = $className;
+        return $this;
+    }
+
+    /**
+     * Returns the javascript class name
+     * 
+     * @return string
+     */
+    public function getJavascriptClass()
+    {
+        return $this->javascriptClass;
+    }
+
+    /**
+     * Sets the variable name of the class instance
+     * 
+     * @param string $name
+     */
+    public function setVariableName($name)
+    {
+        $this->variableName = $name;
+        return $this;
+    }
+
+    /**
+     * Returns the variable name of the class instance
+     * 
+     * @return string
+     */
+    public function getVariableName()
+    {
+        return $this->variableName;
+    }
+
+    /**
+     * Sets what should be initialized
+     *
+     *  - INITIALIZE_CONSTRUCTOR: only initializes the instance
+     *  - INITIALIZE_CONTROLS: initializes the controls and data mapping
+     *  - INITIALIZE_CONSTRUCTOR | INITIALIZE_CONTROLS: initialize everything (default)
+     * 
+     * @param integer $init
+     */
+    public function setInitialization($init)
+    {
+        $this->initialization = $init;
+        return $this;
+    }
+
+    /**
+     * Returns what should be initialized
+     * 
+     * @return integer
+     */
+    public function getInitialization()
+    {
+        return $this->initialization;
+    }
+
+    /**
+     * Adds a control to initialize
+     *
+     * Possible options:
+     *  - icon: icon name
+     *  - tooltip: string
+     *  - widget: widget class name
+     *  - map: a property name from the data to map the control to
+     *  - default: a js string, default value of the data map
+     *
+     * "icon" or "widget" are at least needed
+     * 
+     * @param string $name
+     * @param array $options
+     */
+    public function addControl($name, $options)
+    {
+        if (!isset($options['icon']) || !isset($options['widget'])) {
+            throw new DebugBarException("Missing 'icon' or 'widget' option for control '$name'");
+        }
+        $this->controls[$name] = $options;
+        return $this;
+    }
+
+    /**
+     * Returns the list of asset files
+     * 
+     * @return array
+     */
+    protected function getAssetFiles()
+    {
+        $cssFiles = $this->cssFiles;
+        $jsFiles = $this->jsFiles;
+
+        if ($this->includeVendors) {
+            $cssFiles = array_merge($this->cssVendors, $cssFiles);
+            $jsFiles = array_merge($this->jsVendors, $jsFiles);
+        }
+
+        return array($cssFiles, $jsFiles);
+    }
+
+    /**
+     * Returns a tuple where the both items are Assetic AssetCollection,
+     * the first one being css files and the second js files
+     *
+     * @return array or \Assetic\Asset\AssetCollection
+     */
+    public function getAsseticCollection()
+    {
+        list($cssFiles, $jsFiles) = $this->getAssetFiles();
+        return array(
+            $this->createAsseticCollection($cssFiles),
+            $this->createAsseticCollection($jsFiles)
+        );
+    }
+
+    /**
+     * Create an Assetic AssetCollection with the given files.
+     * Filenames will be converted to absolute path using
+     * the base path.
+     * 
+     * @param array $files
+     * @return \Assetic\Asset\AssetCollection
+     */
+    protected function createAsseticCollection($files)
+    {
+        $assets = array();
+        foreach ($files as $file) {
+            $assets[] = new \Assetic\Asset\FileAsset($this->makeUriRelativeTo($file, $this->basePath));
+        }
+        return new \Assetic\Asset\AssetCollection($assets);
+    }
+
+    /**
+     * Renders the html to include needed assets
+     *
+     * Only useful if Assetic is not used
+     *
+     * @return string
+     */
+    public function renderHead()
+    {
+        list($cssFiles, $jsFiles) = $this->getAssetFiles();
+        $html = '';
+
+        foreach ($cssFiles as $file) {
+            $html .= sprintf('<link rel="stylesheet" type="text/css" href="%s">' . "\n", 
+                $this->makeUriRelativeTo($file, $this->baseUrl));
+        }
+
+        foreach ($jsFiles as $file) {
+            $html .= sprintf('<script type"text/javascript" src="%s"></script>' . "\n", 
+                $this->makeUriRelativeTo($file, $this->baseUrl));
+        }
+
+        return $html;
+    }
+
+    /**
+     * Makes a URI relative to another
+     * 
+     * @param string $uri
+     * @param string $root
+     * @return string
+     */
+    protected function makeUriRelativeTo($uri, $root)
+    {
+        if (substr($uri, 0, 1) === '/' || preg_match('/^([a-z]+:\/\/|[a-zA-Z]:\/)/', $uri)) {
+            return $uri;
+        }
+        return rtrim($root, '/') . "/$uri";
+    }
+
+    /**
+     * Returns the code needed to display the debug bar
+     *
+     * AJAX request should not render the initialization code.
+     * 
+     * @param boolean $initialize Whether to render the de bug bar initialization code
+     * @return string
+     */
+    public function render($initialize = true)
+    {
+        $js = '';
+
+        if ($initialize) {
+            $js = $this->getJsInitializationCode();
+        }
+        
+        $js .= sprintf("%s.addDataSet(%s);\n", $this->variableName, json_encode($this->debugBar->getData()));
+        return "<script type=\"text/javascript\">\n$js\n</script>\n";
+    }
+
+    /**
+     * Returns the js code needed to initialize the debug bar
+     * 
+     * @return string
+     */
+    protected function getJsInitializationCode()
+    {
+        $js = '';
+
+        if (($this->initialization & self::INITIALIZE_CONSTRUCTOR) === self::INITIALIZE_CONSTRUCTOR) {
+            $js = sprintf("var %s = new %s();\n", $this->variableName, $this->javascriptClass);
+        }
+
+        if (($this->initialization & self::INITIALIZE_CONTROLS) === self::INITIALIZE_CONTROLS) {
+            $js .= $this->getJsControlsDefinitionCode($this->variableName);
+        }
+
+        return $js;
+    }
+
+    /**
+     * Returns the js code needed to initialized the controls and data mapping of the debug bar
+     *
+     * Controls can be defined by collectors themselves or using {@see addControl()}
+     * 
+     * @param string $varname Debug bar's variable name
+     * @return string
+     */
+    protected function getJsControlsDefinitionCode($varname)
+    {
+        $js = '';
+        $dataMap = array();
+        $controls = $this->controls;
+
+        // finds controls provided by collectors
+        foreach ($this->debugBar->getCollectors() as $collector) {
+            if ($collector instanceof Renderable) {
+                $controls = array_merge($controls, $collector->getWidgets());
+            }
+        }
+
+        foreach ($controls as $name => $options) {
+            if (isset($options['widget'])) {
+                $js .= sprintf("%s.createTab(\"%s\", new %s());\n", 
+                    $varname,
+                    $name, 
+                    $options['widget']
+                );
+            } else {
+                $js .= sprintf("%s.createIndicator(\"%s\", \"%s\", \"%s\");\n", 
+                    $varname,
+                    $name,
+                    isset($options['icon']) ? $options['icon'] : 'null', 
+                    isset($options['tooltip']) ? $options['tooltip'] : 'null'
+                );
+            }
+
+            if (isset($options['map']) && isset($options['default'])) {
+                $dataMap[$name] = array($options['map'], $options['default']);
+            }
+        }
+
+        // creates the data mapping object
+        $mapJson = array();
+        foreach ($dataMap as $name => $values) {
+            $mapJson[] = sprintf('"%s": ["%s", %s]', $name, $values[0], $values[1]);
+        }
+        $js .= sprintf("%s.setDataMap({\n%s\n});\n", $varname, implode(",\n", $mapJson));
+
+        // activate state restauration
+        $js .= sprintf("%s.restoreState();\n", $varname);
+
+        return $js;
+    }
+}
diff --git a/src/DebugBar/Renderer/JavascriptRenderer.php b/src/DebugBar/Renderer/JavascriptRenderer.php
deleted file mode 100644
index 07e3556..0000000
--- a/src/DebugBar/Renderer/JavascriptRenderer.php
+++ /dev/null
@@ -1,159 +0,0 @@
-<?php
-
-namespace DebugBar\Renderer;
-
-use DebugBar\DebugBar;
-
-class JavascriptRenderer
-{
-    protected $baseUrl = '/';
-
-    protected $cssVendors = array('vendor/font-awesome/css/font-awesome.css');
-
-    protected $jsVendors = array('vendor/jquery-1.8.3.min.js', 'vendor/jquery.event.drag-2.2.js');
-
-    protected $cssFiles = array('debugbar.css');
-
-    protected $jsFiles = array('debugbar.js', 'widgets.js');
-
-    protected $includeVendors = true;
-
-    protected $includeFiles = true;
-
-    protected $toolbarFile = 'standard-debugbar.js';
-
-    protected $toolbarClass = 'StandardPhpDebugBar';
-
-    protected $toolbarVariableName = 'phpdebugbar';
-
-    /**
-     * @param \DebugBar\DebugBar $debugBar
-     * @param string $baseUrl
-     * 
-     * @Inject(debugBar="debugBar", baseUrl="$[debugBarRenderer][baseUrl]")
-     */
-    public function __construct(DebugBar $debugBar, $baseUrl = '/')
-    {
-        $this->debugBar = $debugBar;
-        $this->setBaseUrl($baseUrl);
-    }
-
-    public function setBaseUrl($url)
-    {
-        $this->baseUrl = $url;
-        return $this;
-    }
-
-    public function getBaseUrl()
-    {
-        return $this->baseUrl;
-    }
-
-    public function setIncludeVendors($enabled = true)
-    {
-        $this->includeVendors = $enabled;
-        return $this;
-    }
-
-    public function areVendorsIncluded()
-    {
-        return $this->includeVendors;
-    }
-
-    public function setIncludeFiles($enabled = true)
-    {
-        $this->includeFiles = $enabled;
-        return $this;
-    }
-
-    public function areFilesIncluded()
-    {
-        return $this->includeFiles;
-    }
-
-    public function setToolbarFile($file)
-    {
-        $this->toolbarFile = $file;
-        return $this;
-    }
-
-    public function getToolbarFile()
-    {
-        return $this->toolbarFile;
-    }
-
-    public function setToolbarClass($className)
-    {
-        $this->toolbarClass = $className;
-        return $this;
-    }
-
-    public function getToolbarClass()
-    {
-        return $this->toolbarClass;
-    }
-
-    public function setToolbarVariableName($name)
-    {
-        $this->toolbarVariableName = $name;
-    }
-
-    public function getToolbarVariableName()
-    {
-        return $this->toolbarVariableName;
-    }
-
-    public function renderIncludes()
-    {
-        $cssFiles = array();
-        $jsFiles = array();
-
-        if ($this->includeVendors) {
-            $cssFiles = array_merge($cssFiles, $this->cssVendors);
-            $jsFiles = array_merge($jsFiles, $this->jsVendors);
-        }
-
-        if ($this->includeFiles) {
-            $cssFiles = array_merge($cssFiles, $this->cssFiles);
-            $jsFiles = array_merge($jsFiles, $this->jsFiles);
-        }
-
-        $jsFiles[] = $this->toolbarFile;
-
-        $html = '';
-        foreach ($cssFiles as $file) {
-            $html .= sprintf('<link rel="stylesheet" type="text/css" href="%s">' . "\n",
-                $this->makeUrlRelativeTo($file, $this->baseUrl));
-        }
-        foreach ($jsFiles as $file) {
-            $html .= sprintf('<script type"text/javascript" src="%s"></script>' . "\n", 
-                $this->makeUrlRelativeTo($file, $this->baseUrl));
-        }
-        return $html;
-    }
-
-    public function renderToolbar()
-    {
-        return sprintf('<script type="text/javascript">var %s = new %s(%s);</script>' . "\n",
-            $this->toolbarVariableName, $this->toolbarClass, json_encode($this->debugBar->getData()));
-    }
-
-    public function renderAjaxToolbar()
-    {
-        return sprintf('<script type="text/javascript">%s.addDataStack(%s);</script>' . "\n",
-            $this->toolbarVariableName, json_encode($this->debugBar->getData()));
-    }
-
-    public function renderAll()
-    {
-        return $this->renderIncludes() . $this->renderToolbar();
-    }
-
-    protected function makeUrlRelativeTo($url, $root)
-    {
-        if (substr($url, 0, 1) === '/' || preg_match('/^[a-z]+:\/\//', $url)) {
-            return $url;
-        }
-        return rtrim($root, '/') . "/$url";
-    }
-}
diff --git a/src/DebugBar/StandardDebugBar.php b/src/DebugBar/StandardDebugBar.php
index 4172a9a..d697b1e 100644
--- a/src/DebugBar/StandardDebugBar.php
+++ b/src/DebugBar/StandardDebugBar.php
@@ -1,21 +1,35 @@
 <?php
+/*
+ * This file is part of the DebugBar package.
+ *
+ * (c) 2013 Maxime Bouroumeau-Fuseau
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
 namespace DebugBar;
 
 use DebugBar\DataCollector\PhpInfoCollector;
 use DebugBar\DataCollector\MessagesCollector;
-use DebugBar\DataCollector\TimeCollector;
+use DebugBar\DataCollector\TimeDataCollector;
 use DebugBar\DataCollector\RequestDataCollector;
 use DebugBar\DataCollector\MemoryCollector;
 
+/**
+ * Debug bar subclass which adds all included collectors
+ */
 class StandardDebugBar extends DebugBar
 {
+    /**
+     * {@inheritDoc}
+     */
     public function __construct()
     {
         $this->addCollector(new PhpInfoCollector());
         $this->addCollector(new MessagesCollector());
-        $this->addCollector(new TimeCollector());
         $this->addCollector(new RequestDataCollector());
+        $this->addCollector(new TimeDataCollector());
         $this->addCollector(new MemoryCollector());
     }
 }
diff --git a/tests/DebugBar/Tests/DebugBarTestCase.php b/tests/DebugBar/Tests/DebugBarTestCase.php
new file mode 100644
index 0000000..491d6c2
--- /dev/null
+++ b/tests/DebugBar/Tests/DebugBarTestCase.php
@@ -0,0 +1,8 @@
+<?php
+
+namespace DebugBar\Tests;
+
+abstract class DebugBarTestCase extends \PHPUnit_Framework_TestCase
+{
+    
+}
diff --git a/web/debugbar.css b/web/debugbar.css
index 85dece0..728795e 100644
--- a/web/debugbar.css
+++ b/web/debugbar.css
@@ -1,27 +1,27 @@
 .phpdebugbar {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    border-top: 1px solid #ccc;
-    font-family: arial;
-    background: #fff;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-top: 1px solid #ccc;
+  font-family: arial;
+  background: #fff;
 }
 
 /* -------------------------------------- */
 
 .phpdebugbar-header {
-    background: #efefef url(php-icon.png) no-repeat 5px 4px;
-    padding-left: 29px;
-    min-height: 26px;
+  background: #efefef url(php-icon.png) no-repeat 5px 4px;
+  padding-left: 29px;
+  min-height: 26px;
 }
 .phpdebugbar-header:before, .phpdebugbar-header:after {
-    display: table;
-    line-height: 0;
-    content: "";
+  display: table;
+  line-height: 0;
+  content: "";
 }
 .phpdebugbar-header:after {
-    clear: both;
+  clear: both;
 }
 
 /* -------------------------------------- */
@@ -29,79 +29,70 @@
 .phpdebugbar-tab,
 .phpdebugbar-indicator,
 .phpdebugbar-close-btn {
-    float: left;
-    padding: 5px 8px;
-    font-size: 14px;
-    color: #555;
-    text-decoration: none;
+  float: left;
+  padding: 5px 8px;
+  font-size: 14px;
+  color: #555;
+  text-decoration: none;
 }
 .phpdebugbar-indicator,
 .phpdebugbar-close-btn {
-    float: right;
-    border-right: 1px solid #ddd;
+  float: right;
+  border-right: 1px solid #ddd;
 }
 
 .phpdebugbar-tab.active {
-    background: #ccc;
-    color: #444;
-    background-image: linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
-    background-image: -o-linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
-    background-image: -moz-linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
-    background-image: -webkit-linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
-    background-image: -ms-linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
-
-    background-image: -webkit-gradient(
-        linear,
-        left bottom,
-        left top,
-        color-stop(0.41, rgb(173,173,173)),
-        color-stop(0.71, rgb(209,209,209))
-    );
+  background: #ccc;
+  color: #444;
+  background-image: linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
+  background-image: -o-linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
+  background-image: -moz-linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
+  background-image: -webkit-linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
+  background-image: -ms-linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.41, rgb(173,173,173)), color-stop(0.71, rgb(209,209,209)));
 }
 
 .phpdebugbar-close-btn {
-    display: none;
+  display: none;
 }
 
 .phpdebugbar-indicator {
-    position: relative;
+  position: relative;
 }
-    .phpdebugbar-indicator .text {
-        margin-left: 5px;
-    }
-    .phpdebugbar-indicator .tooltip {
-        display: none;
-        position: absolute;
-        top: -30px;
-        background: #efefef;
-        opacity: .7;
-        border: 1px solid #ccc;
-        color: #555;
-        font-size: 11px;
-        padding: 2px 3px;
-        z-index: 1000;
-    }
-
-    .phpdebugbar-indicator:hover .tooltip {
-        display: block;
-    }
-
-.phpdebugbar-data-stacks {
-    float: right;
+  .phpdebugbar-indicator .text {
+    margin-left: 5px;
+  }
+  .phpdebugbar-indicator .tooltip {
     display: none;
-    margin: 2px 0 0 7px;
+    position: absolute;
+    top: -30px;
+    background: #efefef;
+    opacity: .7;
+    border: 1px solid #ccc;
+    color: #555;
+    font-size: 11px;
+    padding: 2px 3px;
+    z-index: 1000;
+  }
+  .phpdebugbar-indicator:hover .tooltip {
+    display: block;
+  }
+
+.phpdebugbar-datasets-switcher {
+  float: right;
+  display: none;
+  margin: 2px 0 0 7px;
 }
 
 /* -------------------------------------- */
 
 .phpdebugbar-body {
-    border-top: 1px solid #ccc;
-    display: none;
-    position: relative;
-    height: 300px;
+  border-top: 1px solid #ccc;
+  display: none;
+  position: relative;
+  height: 300px;
 }
-
-.phpdebugbar-resize-handle {
+  .phpdebugbar-resize-handle {
     display: none;
     height: 4px;
     width: 100%;
@@ -110,148 +101,151 @@
     cursor: move;
     position: absolute;
     top: -33px;
-}
+  }
 
 /* -------------------------------------- */
 
 .phpdebugbar-panel {
-    display: none;
-    height: 100%;
-    overflow: auto;
-    width: 100%;
+  display: none;
+  height: 100%;
+  overflow: auto;
+  width: 100%;
 }
 .phpdebugbar-panel.active {
-    display: block;
+  display: block;
 }
 
 /* -------------------------------------- */
 
 .phpdebugbar-widgets-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    font-family: monospace;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: monospace;
 }
-    .phpdebugbar-widgets-list .list-item {
-        padding: 3px 6px;
-        border-bottom: 1px solid #eee;
-    }
-    .phpdebugbar-widgets-list .list-item:hover {
-        background: #fafafa;
-    }
+  .phpdebugbar-widgets-list .list-item {
+    padding: 3px 6px;
+    border-bottom: 1px solid #eee;
+  }
+  .phpdebugbar-widgets-list .list-item:hover {
+    background: #fafafa;
+  }
 
 /* -------------------------------------- */
 
 .phpdebugbar-widgets-messages {
-    position: relative;
-    height: 100%;
+  position: relative;
+  height: 100%;
 }
-    .phpdebugbar-widgets-messages .list-item .value.warn:before {
-        font-family: FontAwesome;
-        content: "\f071";
-        margin-right: 8px;
-        font-size: 11px;
-        color: #ecb03d;
+  .phpdebugbar-widgets-messages .list-item .value.warn:before {
+    font-family: FontAwesome;
+    content: "\f071";
+    margin-right: 8px;
+    font-size: 11px;
+    color: #ecb03d;
+  }
+  .phpdebugbar-widgets-messages .list-item .value.error {
+    color: red;
+  }
+  .phpdebugbar-widgets-messages .list-item .value.error:before {
+    font-family: FontAwesome;
+    content: "\f057";
+    margin-right: 8px;
+    font-size: 11px;
+    color: red;
+  }
+  .phpdebugbar-widgets-messages .list-item .backtrace,
+  .phpdebugbar-widgets-messages .list-item .label {
+    float: right;
+    font-size: 12px;
+    padding: 2px 4px;
+    color: #888;
+    margin: 0 2px;
+    text-decoration: none;
+  }
+  .phpdebugbar-widgets-messages .toolbar {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+  }
+    .phpdebugbar-widgets-messages .toolbar input {
+      border: 0;
+      margin-left: 7px;
+      width: 50%;
     }
-    .phpdebugbar-widgets-messages .list-item .value.error {
-        color: red;
+    .phpdebugbar-widgets-messages .toolbar input:focus {
+      outline: none;
     }
-    .phpdebugbar-widgets-messages .list-item .value.error:before {
-        font-family: FontAwesome;
-        content: "\f057";
-        margin-right: 8px;
-        font-size: 11px;
-        color: red;
-    }
-    .phpdebugbar-widgets-messages .list-item .backtrace,
-    .phpdebugbar-widgets-messages .list-item .label {
+      .phpdebugbar-widgets-messages .toolbar .filter {
         float: right;
         font-size: 12px;
         padding: 2px 4px;
-        color: #888;
+        background: #7cacd5;
         margin: 0 2px;
+        border-radius: 4px;
+        color: #fff;
         text-decoration: none;
-    }
-    .phpdebugbar-widgets-messages .toolbar {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        background: #fff;
-    }
-        .phpdebugbar-widgets-messages .toolbar input {
-            border: 0;
-            margin-left: 7px;
-            width: 50%;
-        }
-        .phpdebugbar-widgets-messages .toolbar input:focus {
-            outline: none;
-        }
-        .phpdebugbar-widgets-messages .toolbar .filter {
-            float: right;
-            font-size: 12px;
-            padding: 2px 4px;
-            background: #7cacd5;
-            margin: 0 2px;
-            border-radius: 4px;
-            color: #fff;
-            text-decoration: none;
-        }
-        .phpdebugbar-widgets-messages .toolbar .filter.disabled {
-            background: #eee;
-            color: #888;
-        }
+      }
+      .phpdebugbar-widgets-messages .toolbar .filter.disabled {
+        background: #eee;
+        color: #888;
+      }
 
 /* -------------------------------------- */
 
 .phpdebugbar-widgets-kvlist {
-    margin: 0;
+  margin: 0;
 }
-    .phpdebugbar-widgets-kvlist dt {
-        float: left;
-        width: 140px;
-        padding: 5px;
-        border-top: 1px solid #eee;
-        font-weight: bold;
-        clear: both;
-    }
-    .phpdebugbar-widgets-kvlist dd {
-        margin-left: 150px;
-        padding: 5px;
-        border-top: 1px solid #eee;
-        cursor: pointer;
-    }
+  .phpdebugbar-widgets-kvlist dt {
+    float: left;
+    width: 140px;
+    padding: 5px;
+    border-top: 1px solid #eee;
+    font-weight: bold;
+    clear: both;
+  }
+  .phpdebugbar-widgets-kvlist dd {
+    margin-left: 150px;
+    padding: 5px;
+    border-top: 1px solid #eee;
+    cursor: pointer;
+  }
 
 /* -------------------------------------- */
 
 .phpdebugbar-widgets-varlist {
-    font-family: monospace;
+  font-family: monospace;
 }
 
 /* -------------------------------------- */
 
 .phpdebugbar-widgets-timeline {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-    .phpdebugbar-widgets-timeline li {
-        height: 20px;
-        position: relative;
-        border-bottom: 1px solid #eee;
+  .phpdebugbar-widgets-timeline li {
+    height: 20px;
+    position: relative;
+    border-bottom: 1px solid #eee;
+  }
+  .phpdebugbar-widgets-timeline li:hover {
+    background: #fafafa;
+  }
+    .phpdebugbar-widgets-timeline li .label {
+      position: absolute;
+      font-size: 12px;
+      font-family: monospace;
+      color: #555;
+      top: 4px;
+      left: 5px;
+    }
+    .phpdebugbar-widgets-timeline li .value {
+      display: block; 
+      position: absolute;
+      height: 10px;
+      background: #3db9ec;
+      top: 5px;
+      border-radius: 2px;
     }
-        .phpdebugbar-widgets-timeline li .label {
-            position: absolute;
-            font-size: 12px;
-            font-family: monospace;
-            color: #555;
-            top: 4px;
-            left: 5px;
-        }
-        .phpdebugbar-widgets-timeline li .value {
-            display: block; 
-            position: absolute;
-            height: 10px;
-            background: #3db9ec;
-            top: 5px;
-            border-radius: 2px;
-        }
diff --git a/web/debugbar.js b/web/debugbar.js
index 7248ac0..2955158 100644
--- a/web/debugbar.js
+++ b/web/debugbar.js
@@ -1,41 +1,176 @@
 if (typeof(PhpDebugBar) == 'undefined') {
+    // namespace
     var PhpDebugBar = {};
 }
 
 if (typeof(localStorage) == 'undefined') {
+    // provide mock localStorage object for dumb browsers
     var localStorage = {
         setItem: function(key, value) {},
         getItem: function(key) { return null; }
     };
 }
 
+/**
+ * DebugBar
+ *
+ * Creates a bar that appends itself to the body of your page
+ * and sticks to the bottom.
+ *
+ * The bar can be customized by adding tabs and indicators.
+ * A data map is used to fill those controls with data provided
+ * from datasets.
+ * 
+ * @constructor
+ */
 PhpDebugBar.DebugBar = (function($) {
 
-    function getDictValue(dict, key, def) {
+    /**
+     * Returns the value from an object property.
+     * Using dots in the key, it is possible to retreive nested property values
+     * 
+     * @param {Object} dict
+     * @param {String} key
+     * @param {Object} default_value
+     * @return {Object}
+     */
+    function getDictValue(dict, key, default_value) {
         var d = dict, parts = key.split('.');
         for (var i = 0; i < parts.length; i++) {
             if (!d[parts[i]]) {
-                return def;
+                return default_value;
             }
             d = d[parts[i]];
         }
         return d;
     }
 
+    // ------------------------------------------------------------------
+
+    /**
+     * Tab
+     * 
+     * A tab is composed of a tab label which is always visible and
+     * a tab panel which is visible only when the tab is active.
+     *
+     * The panel must contain a widget. A widget is an object which has
+     * an element property containing something appendable to a jQuery object.
+     *
+     * @this {Tab}
+     * @constructor
+     * @param {String} title
+     * @param {Object} widget
+     */
+    var Tab = function(title, widget) {
+        this.tab = $('<a href="javascript:" class="phpdebugbar-tab" />').text(title);
+        this.panel = $('<div class="phpdebugbar-panel" />');
+        this.replaceWidget(widget);
+    };
+
+    /**
+     * Sets the title of the tab
+     *
+     * @this {Tab}
+     * @param {String} text
+     */
+    Tab.prototype.setTitle = function(text) {
+        this.tab.text(text);
+    };
+
+    /**
+     * Replaces the widget inside the panel
+     * 
+     * @this {Tab}
+     * @param {Object} new_widget
+     */
+    Tab.prototype.replaceWidget = function(new_widget) {
+        this.panel.empty().append(new_widget.element);
+        this.widget = new_widget;
+    };
+
+    // ------------------------------------------------------------------
+
+    /**
+     * Indicator
+     *
+     * An indicator is a text and an icon to display single value information
+     * right inside the always visible part of the debug bar
+     * 
+     * @this {Indicator}
+     * @constructor
+     * @param {String} icon
+     * @param {String} tooltip
+     * @param {String} position "right" or "left", default is "right"
+     */
+    var Indicator = function(icon, tooltip, position) {
+        if (!position) {
+            position = 'right'
+        }
+
+        this.position = position;
+        this.element = $('<span class="phpdebugbar-indicator" />').css('float', position);
+        this.label = $('<span class="text" />').appendTo(this.element);
+
+        if (icon) {
+            $('<i class="icon-' + icon + '" />').insertBefore(this.label);
+        }
+        if (tooltip) {
+            this.element.append($('<span class="tooltip" />').text(tooltip));
+        }
+    };
+
+    /**
+     * Sets the text of the indicator
+     *
+     * @this {Indicator}
+     * @param {String} text
+     */
+    Indicator.prototype.setText = function(text) {
+        this.element.find('.text').text(text);
+    };
+
+    /**
+     * Sets the tooltip of the indicator
+     *
+     * @this {Indicator}
+     * @param {String} text
+     */
+    Indicator.prototype.setTooltip = function(text) {
+        this.element.find('.tooltip').text(text);
+    };
+
+    // ------------------------------------------------------------------
+
+
+    /**
+     * DebugBar
+     *
+     * @this {DebugBar}
+     * @constructor
+     */
     var DebugBar = function() {
         this.controls = {};
         this.dataMap = {};
+        this.datasets = {};
         this.initUI();
         this.init();
-        this.restoreState();
     };
 
+    /**
+     * Initialiazes the UI
+     *
+     * @this {DebugBar}
+     */
     DebugBar.prototype.initUI = function() {
+        var self = this;
         this.element = $('<div class="phpdebugbar" />').appendTo('body');
         this.header = $('<div class="phpdebugbar-header" />').appendTo(this.element);
         this.body = $('<div class="phpdebugbar-body" />').appendTo(this.element);
         this.resizeHandle = $('<div class="phpdebugbar-resize-handle" />').appendTo(this.body);
+        this.firstPanelName = null;
+        this.activePanelName = null;
 
+        // allow resizing by dragging handle
         this.body.drag('start', function(e, dd) {
             dd.height = $(this).height();
         }).drag(function(e, dd) {
@@ -44,21 +179,35 @@ PhpDebugBar.DebugBar = (function($) {
             localStorage.setItem('phpdebugbar-height', h);
         }, {handle: '.phpdebugbar-resize-handle'});
         
+        // close button
         this.closeButton = $('<a class="phpdebugbar-close-btn" href="javascript:"><i class="icon-remove"></i></a>').appendTo(this.header);
-        var self = this;
         this.closeButton.click(function() {
             self.hidePanels();
         });
 
-        this.stackSelectBox = $('<select class="phpdebugbar-data-stacks" />').appendTo(this.header);
-        this.stackSelectBox.change(function() {
-            self.dataChangeHandler(self.stacks[this.value]);
+        // select box for data sets
+        this.datasetSelectBox = $('<select class="phpdebugbar-datasets-switcher" />').appendTo(this.header);
+        this.datasetSelectBox.change(function() {
+            self.dataChangeHandler(self.datasets[this.value]);
         });
     };
 
+    /**
+     * Custom initialiaze function for subsclasses
+     *
+     * @this {DebugBar}
+     */
     DebugBar.prototype.init = function() {};
 
+    /**
+     * Restores the state of the DebugBar using localStorage
+     * This is not called by default in the constructor and
+     * needs to be called by subclasses in their init() method
+     *
+     * @this {DebugBar}
+     */
     DebugBar.prototype.restoreState = function() {
+        // bar height
         var height = localStorage.getItem('phpdebugbar-height');
         if (height) {
             this.body.css('height', height);
@@ -66,86 +215,171 @@ PhpDebugBar.DebugBar = (function($) {
             localStorage.setItem('phpdebugbar-height', this.body.height());
         }
 
+        // bar visibility
         var visible = localStorage.getItem('phpdebugbar-visible');
         if (visible && visible == '1') {
             this.showPanel(localStorage.getItem('phpdebugbar-panel'));
         }
     };
 
+    /**
+     * Creates and adds a new tab
+     *
+     * @this {DebugBar}
+     * @param {String} name Internal name
+     * @param {Object} widget A widget object with an element property
+     * @param {String} title The text in the tab, if not specified, name will be used
+     * @return {Tab}
+     */
     DebugBar.prototype.createTab = function(name, widget, title) {
+        var tab = new Tab(title || (name.replace(/[_\-]/g, ' ').charAt(0).toUpperCase() + name.slice(1)), widget);
+        return this.addTab(name, tab);
+    };
+
+    /**
+     * Adds a new tab
+     *
+     * @this {DebugBar}
+     * @param {String} name Internal name
+     * @param {Tab} tab Tab object
+     * @return {Tab}
+     */
+    DebugBar.prototype.addTab = function(name, tab) {
         if (this.isControl(name)) {
             throw new Exception(name + ' already exists');
         }
 
-        var tab = $('<a href="javascript:" class="phpdebugbar-tab" />').text(title || (name.charAt(0).toUpperCase() + name.slice(1))),
-            panel = $('<div class="phpdebugbar-panel" data-id="' + name + '" />'),
-            self = this;
+        var self = this;
+        tab.tab.appendTo(this.header).click(function() { self.showPanel(name); });
+        tab.panel.appendTo(this.body);
 
-        tab.appendTo(this.header).click(function() { self.showPanel(name); });
-        panel.appendTo(this.body).append(widget.element);
-
-        this.controls[name] = {type: "tab", tab: tab, panel: panel, widget: widget};
-        return widget;
+        this.controls[name] = tab;
+        if (this.firstPanelName == null) {
+            this.firstPanelName = name;
+        }
+        return tab;
     };
 
-    DebugBar.prototype.setTabTitle = function(name, title) {
+    /**
+     * Returns a Tab object
+     * 
+     * @this {DebugBar}
+     * @param {String} name
+     * @return {Tab}
+     */
+    DebugBar.prototype.getTab = function(name) {
         if (this.isTab(name)) {
-            this.controls[name].tab.text(title);
-        }
-    };
-
-    DebugBar.prototype.getTabWidget = function(name) {
-        if (this.isTab(name)) {
-            return this.controls[name].widget;
+            return this.controls[name];
         }
     };
 
+    /**
+     * Creates and adds an indicator
+     *
+     * @this {DebugBar}
+     * @param {String} name Internal name
+     * @param {String} icon
+     * @param {String} tooltip
+     * @param {String} position "right" or "left", default is "right"
+     * @return {Indicator}
+     */
     DebugBar.prototype.createIndicator = function(name, icon, tooltip, position) {
+        var indicator = new Indicator(icon, tooltip, position);
+        return this.addIndicator(name, indicator);
+    };
+
+    /**
+     * Adds an indicator
+     * 
+     * @this {DebugBar}
+     * @param {String} name Internal name
+     * @param {Indicator} indicator Indicator object
+     * @return {Indicator}
+     */
+    DebugBar.prototype.addIndicator = function(name, indicator) {
         if (this.isControl(name)) {
             throw new Exception(name + ' already exists');
         }
-        if (!position) {
-            position = 'right'
-        }
 
-        var indicator = $('<span class="phpdebugbar-indicator" />').css('float', position),
-            text = $('<span class="text" />').appendTo(indicator);
-
-        if (icon) {
-            $('<i class="icon-' + icon + '" />').insertBefore(text);
-        }
-        if (tooltip) {
-            indicator.append($('<span class="tooltip" />').text(tooltip));
-        }
-
-        if (position == 'right') {
-            indicator.appendTo(this.header);
+        if (indicator.position == 'right') {
+            indicator.element.appendTo(this.header);
         } else {
-            indicator.insertBefore(this.header.children().first())
+            indicator.element.insertBefore(this.header.children().first())
         }
 
-        this.controls[name] = {type: "indicator", indicator: indicator};
-        return text;
+        this.controls[name] = indicator;
+        return indicator;
     };
 
-    DebugBar.prototype.setIndicatorText = function(name, text) {
+    /**
+     * Returns an Indicator object
+     * 
+     * @this {DebugBar}
+     * @param {String} name
+     * @return {Indicator}
+     */
+    DebugBar.prototype.getIndicator = function(name) {
         if (this.isIndicator(name)) {
-            this.controls[name].indicator.find('.text').text(text);
+            return this.controls[name];
         }
     };
 
+    /**
+     * Adds a control
+     * 
+     * @param {String} name
+     * @param {Object} control
+     * @return {Object}
+     */
+    DebugBar.prototype.addControl = function(name, control) {
+        if (control instanceof Tab) {
+            this.addTab(name, control);
+        } else if (control instanceof Indicator) {
+            this.addIndicator(name, control);
+        } else {
+            throw new Exception("Unknown type of control");
+        }
+        return control;
+    };
+
+    /**
+     * Checks if there's a control under the specified name
+     * 
+     * @this {DebugBar}
+     * @param {String} name
+     * @return {Boolean}
+     */
     DebugBar.prototype.isControl = function(name) {
         return typeof(this.controls[name]) != 'undefined';
     };
 
+    /**
+     * Checks if a tab with the specified name exists
+     * 
+     * @this {DebugBar}
+     * @param {String} name
+     * @return {Boolean}
+     */
     DebugBar.prototype.isTab = function(name) {
-        return typeof(this.controls[name]) != 'undefined' && this.controls[name].type === 'tab';
+        return this.isControl(name) && this.controls[name] instanceof Tab;
     };
 
+    /**
+     * Checks if an indicator with the specified name exists
+     * 
+     * @this {DebugBar}
+     * @param {String} name
+     * @return {Boolean}
+     */
     DebugBar.prototype.isIndicator = function(name) {
-        return this.isControl(name) && this.controls[name].type === 'indicator';
+        return this.isControl(name) && this.controls[name] instanceof Indicator;
     };
 
+    /**
+     * Removes all tabs and indicators from the debug bar and hides it
+     * 
+     * @this {DebugBar}
+     */
     DebugBar.prototype.reset = function() {
         this.hidePanels();
         this.body.find('.phpdebugbar-panel').remove();
@@ -153,17 +387,22 @@ PhpDebugBar.DebugBar = (function($) {
         this.controls = {};
     };
 
+    /**
+     * Open the debug bar and display a specified panel
+     * 
+     * @this {DebugBar}
+     * @param {String} name If not specified, display the first panel
+     */
     DebugBar.prototype.showPanel = function(name) {
         this.resizeHandle.show();
         this.body.show();
         this.closeButton.show();
 
         if (!name) {
-            activePanel = this.body.find('.phpdebugbar-panel.active');
-            if (activePanel.length > 0) {
-                name = activePanel.data('id');
+            if (this.activePanelName) {
+                name = this.activePanelName;
             } else {
-                name = this.body.find('.phpdebugbar-panel').first().data('id');
+                name = this.firstPanelName;
             }
         }
 
@@ -173,15 +412,26 @@ PhpDebugBar.DebugBar = (function($) {
         if (this.isTab(name)) {
             this.controls[name].tab.addClass('active');
             this.controls[name].panel.addClass('active').show();
+            this.activePanelName = name;
         }
         localStorage.setItem('phpdebugbar-visible', '1');
         localStorage.setItem('phpdebugbar-panel', name);
     };
 
+    /**
+     * Shows the first panel
+     * 
+     * @this {DebugBar}
+     */
     DebugBar.prototype.showFirstPanel = function() {
-        this.showPanel(this.body.find('.phpdebugbar-panel').first().data('id'));
+        this.showPanel(this.firstPanelName);
     };
 
+    /**
+     * Hide panels and "close" the debug bar
+     *
+     * @this {DebugBar}
+     */
     DebugBar.prototype.hidePanels = function() {
         this.header.find('.phpdebugbar-tab.active').removeClass('active');
         this.body.hide();
@@ -190,40 +440,121 @@ PhpDebugBar.DebugBar = (function($) {
         localStorage.setItem('phpdebugbar-visible', '0');
     };
 
-    DebugBar.prototype.setData = function(data) {
-        this.stacks = {};
-        this.addDataStack(data);
+    /**
+     * Sets the data map used by dataChangeHandler to populate
+     * indicators and widgets
+     *
+     * A data map is an object where properties are control names.
+     * The value of each property should be an array where the first
+     * item is the name of a property from the data object (nested properties
+     * can be specified) and the second item the default value.
+     *
+     * Example:
+     *     {"memory": ["memory.peak_usage_str", "0B"]}
+     * 
+     * @this {DebugBar}
+     * @param {Object} map
+     */
+    DebugBar.prototype.setDataMap = function(map) {
+        this.dataMap = map;
     };
 
-    DebugBar.prototype.addDataStack = function(data, id) {
-        id = id || ("Request #" + (Object.keys(this.stacks).length + 1));
-        this.stacks[id] = data;
+    /**
+     * Same as setDataMap() but appends to the existing map
+     * rather than replacing it
+     *
+     * @this {DebugBar}
+     * @param {Object} map
+     */
+    DebugBar.prototype.addDataMap = function(map) {
+        $.extend(this.dataMap, map);
+    };
 
-        this.stackSelectBox.append($('<option value="' + id + '">' + id + '</option>'));
-        if (Object.keys(this.stacks).length > 1) {
-            this.stackSelectBox.show();
+    /**
+     * Resets datasets and add one set of data
+     *
+     * For this method to be usefull, you need to specify
+     * a dataMap using setDataMap()
+     * 
+     * @this {DebugBar}
+     * @param {Object} data
+     * @return {String} Dataset's id
+     */
+    DebugBar.prototype.setData = function(data) {
+        this.datasets = {};
+        return this.addDataSet(data);
+    };
+
+    /**
+     * Adds a dataset
+     *
+     * If more than one dataset are added, the dataset selector
+     * will be displayed.
+     * 
+     * For this method to be usefull, you need to specify
+     * a dataMap using setDataMap()
+     * 
+     * @this {DebugBar}
+     * @param {Object} data
+     * @param {String} id The name of this set, optional
+     * @return {String} Dataset's id
+     */
+    DebugBar.prototype.addDataSet = function(data, id) {
+        id = id || ("Request #" + (Object.keys(this.datasets).length + 1));
+        this.datasets[id] = data;
+
+        this.datasetSelectBox.append($('<option value="' + id + '">' + id + '</option>'));
+        if (Object.keys(this.datasets).length > 1) {
+            this.datasetSelectBox.show();
         }
 
-        this.switchDataStack(id);
+        this.showDataSet(id);
+        return id;
     };
 
-    DebugBar.prototype.switchDataStack = function(id) {
-        this.dataChangeHandler(this.stacks[id]);
-        this.stackSelectBox.val(id);
+    /**
+     * Returns the data from a dataset
+     * 
+     * @this {DebugBar}
+     * @param {String} id
+     * @return {Object}
+     */
+    DebugBar.prototype.getDataSet = function(id) {
+        return this.datasets[id];
     };
 
+    /**
+     * Switch the currently displayed dataset
+     * 
+     * @this {DebugBar}
+     * @param {String} id
+     */
+    DebugBar.prototype.showDataSet = function(id) {
+        this.dataChangeHandler(this.datasets[id]);
+        this.datasetSelectBox.val(id);
+    };
+
+    /**
+     * Called when the current dataset is modified.
+     * 
+     * @this {DebugBar}
+     * @param {Object} data
+     */
     DebugBar.prototype.dataChangeHandler = function(data) {
         var self = this;
         $.each(this.dataMap, function(key, def) {
             var d = getDictValue(data, def[0], def[1]);
             if (self.isIndicator(key)) {
-                self.setIndicatorText(key, d);
+                self.getIndicator(key).setText(d);
             } else {
-                self.getTabWidget(key).setData(d);
+                self.getTab(key).widget.setData(d);
             }
         });
     };
 
+    DebugBar.Tab = Tab;
+    DebugBar.Indicator = Indicator;
+
     return DebugBar;
 
 })(jQuery);
diff --git a/web/standard-debugbar.js b/web/standard-debugbar.js
deleted file mode 100644
index e74ff04..0000000
--- a/web/standard-debugbar.js
+++ /dev/null
@@ -1,30 +0,0 @@
-
-var StandardPhpDebugBar = (function() {
-
-    var DebugBar = function(data) {
-        PhpDebugBar.DebugBar.apply(this);
-        this.setData(data);
-    };
-
-    DebugBar.prototype = new PhpDebugBar.DebugBar();
-
-    DebugBar.prototype.init = function() {
-        this.createIndicator('memory', 'cogs', 'Memory Usage');
-        this.createIndicator('time', 'time', 'Request duration');
-        
-        this.createTab('messages', new PhpDebugBar.Widgets.MessagesWidget());
-        this.createTab('request', new PhpDebugBar.Widgets.VariableListWidget());
-        this.createTab('timeline', new PhpDebugBar.Widgets.TimelineWidget());
-
-        this.dataMap = {
-            "memory": ["memory.peak_usage_str", "0B"],
-            "time": ["time.duration_str", "0ms"],
-            "messages": ["messages", []],
-            "request": ["request", {}],
-            "timeline": ["time", {}]
-        };
-    };
-
-    return DebugBar;
-
-})();
diff --git a/web/widgets.js b/web/widgets.js
index abcd6ae..523e6ae 100644
--- a/web/widgets.js
+++ b/web/widgets.js
@@ -1,15 +1,35 @@
 if (typeof(PhpDebugBar) == 'undefined') {
+    // namespace
     var PhpDebugBar = {};
 }
 
+/**
+ * @namespace
+ */
 PhpDebugBar.Widgets = (function($) {
 
     var widgets = {};
 
+    /**
+     * Replaces spaces with &nbsp; and line breaks with <br>
+     * 
+     * @param {String} text
+     * @return {String}
+     */
     var htmlize = function(text) {
         return text.replace(/\n/g, '<br>').replace(/\s/g, "&nbsp;")
     };
 
+    widgets.htmlize = htmlize;
+
+    /**
+     * Returns a string representation of value, using JSON.stringify
+     * if it's an object.
+     * 
+     * @param {Object} value
+     * @param {Boolean} prettify Uses htmlize() if true
+     * @return {String}
+     */
     var renderValue = function(value, prettify) {
         if (typeof(value) !== 'string') {
             if (prettify) {
@@ -20,8 +40,21 @@ PhpDebugBar.Widgets = (function($) {
         return value;
     };
 
-    // ------------------------------------------
+    widgets.renderValue = renderValue;
 
+
+    // ------------------------------------------------------------------
+    // Generic widgets
+    // ------------------------------------------------------------------
+
+    /**
+     * Displays array element in a <ul> list
+     *
+     * @this {ListWidget}
+     * @constructor
+     * @param {Array} data
+     * @param {Function} itemRenderer Optional
+     */
     var ListWidget = function(data, itemRenderer) {
         this.element = $('<ul class="phpdebugbar-widgets-list" />');
         if (itemRenderer) {
@@ -32,6 +65,12 @@ PhpDebugBar.Widgets = (function($) {
         }
     };
 
+    /**
+     * Sets the data and updates the list
+     *
+     * @this {ListWidget}
+     * @param {Array} data
+     */
     ListWidget.prototype.setData = function(data) {
         this.element.empty();
         for (var i = 0; i < data.length; i++) {
@@ -40,14 +79,154 @@ PhpDebugBar.Widgets = (function($) {
         }
     };
 
+    /**
+     * Renders the content of a <li> element
+     *
+     * @this {ListWidget}
+     * @param {jQuery} li The <li> element as a jQuery Object
+     * @param {Object} value An item from the data array
+     */
     ListWidget.prototype.itemRenderer = function(li, value) {
         li.html(renderValue(value));
     };
 
     widgets.ListWidget = ListWidget;
 
-    // ------------------------------------------
+    // ------------------------------------------------------------------
 
+    /**
+     * Displays object property/value paris in a <dl> list
+     *
+     * @this {KVListWidget}
+     * @constructor
+     * @param {Object} data
+     * @param {Function} itemRenderer Optional
+     */
+    var KVListWidget = function(data, itemRenderer) {
+        this.element = $('<dl class="phpdebugbar-widgets-kvlist" />');
+        if (itemRenderer) {
+            this.itemRenderer = itemRenderer;
+        }
+        if (data) {
+            this.setData(data);
+        }
+    };
+
+    /**
+     * Sets the data and updates the list
+     *
+     * @this {KVListWidget}
+     * @param {Object} data
+     */
+    KVListWidget.prototype.setData = function(data) {
+        var self = this;
+        this.element.empty();
+        $.each(data, function(key, value) {
+            var dt = $('<dt class="key" />').appendTo(self.element);
+            var dd = $('<dd class="value" />').appendTo(self.element);
+            self.itemRenderer(dt, dd, key, value);
+        });
+    };
+
+    /**
+     * Renders the content of the <dt> and <dd> elements
+     *
+     * @this {KVListWidget}
+     * @param {jQuery} dt The <dt> element as a jQuery Object
+     * @param {jQuery} dd The <dd> element as a jQuery Object
+     * @param {String} key Property name
+     * @param {Object} value Property value
+     */
+    KVListWidget.prototype.itemRenderer = function(dt, dd, key, value) {
+        dt.text(key);
+        dd.html(htmlize(value));
+    };
+
+    widgets.KVListWidget = KVListWidget;
+
+    // ------------------------------------------------------------------
+    
+    /**
+     * An extension of KVListWidget where the data represents a list
+     * of variables
+     * 
+     * @this {VariableListWidget}
+     * @constructor
+     * @param {Object} data
+     */
+    var VariableListWidget = function(data) {
+        KVListWidget.apply(this, [data]);
+        this.element.addClass('phpdebugbar-widgets-varlist');
+    };
+
+    VariableListWidget.prototype = new KVListWidget();
+    VariableListWidget.constructor = VariableListWidget;
+
+    VariableListWidget.prototype.itemRenderer = function(dt, dd, key, value) {
+        dt.text(key);
+
+        var v = value;
+        if (v.length > 100) {
+            v = v.substr(0, 100) + "...";
+        }
+        dd.text(v).click(function() {
+            if (dd.hasClass('pretty')) {
+                dd.text(v).removeClass('pretty');
+            } else {
+                dd.html(htmlize(value)).addClass('pretty');
+            }
+        });
+    };
+
+    widgets.VariableListWidget = VariableListWidget;
+
+    // ------------------------------------------------------------------
+    
+    /**
+     * Iframe widget
+     *
+     * @this {IFrameWidget}
+     * @constructor
+     * @param {String} url
+     */
+    var IFrameWidget = function(url) {
+        this.element = $('<iframe src="" class="phpdebugbar-widgets-iframe" seamless="seamless" border="0" width="100%" height="100%" />');
+        if (url) {
+            this.setData(url);
+        }
+    };
+
+    /**
+     * Sets the iframe url
+     *
+     * @this {IFrameWidget}
+     * @param {String} url
+     */
+    IFrameWidget.prototype.setUrl = function(url) {
+        this.element.attr('src', url);
+    };
+
+    // for compatibility with data mapping
+    IFrameWidget.prototype.setData = function(url) {
+        this.setUrl(url);
+    };
+
+    widgets.IFrameWidget = IFrameWidget;
+
+
+    // ------------------------------------------------------------------
+    // Collector specific widgets
+    // ------------------------------------------------------------------
+
+    /**
+     * Widget for the MessagesCollector
+     *
+     * Uses ListWidget under the hood
+     *
+     * @this {MessagesWidget}
+     * @constructor
+     * @param {Array} data
+     */
     var MessagesWidget = function(data) {
         this.element = $('<div class="phpdebugbar-widgets-messages" />');
 
@@ -142,80 +321,15 @@ PhpDebugBar.Widgets = (function($) {
 
     widgets.MessagesWidget = MessagesWidget;
 
-    // ------------------------------------------
-
-    var KVListWidget = function(data, itemRenderer) {
-        this.element = $('<dl class="phpdebugbar-widgets-kvlist" />');
-        if (itemRenderer) {
-            this.itemRenderer = itemRenderer;
-        }
-        if (data) {
-            this.setData(data);
-        }
-    };
-
-    KVListWidget.prototype.setData = function(data) {
-        var self = this;
-        this.element.empty();
-        $.each(data, function(key, value) {
-            var dt = $('<dt class="key" />').appendTo(self.element);
-            var dd = $('<dd class="value" />').appendTo(self.element);
-            self.itemRenderer(dt, dd, key, value);
-        });
-    };
-
-    KVListWidget.prototype.itemRenderer = function(dt, dd, key, value) {
-        dt.text(key);
-        dd.html(htmlize(value));
-    };
-
-    widgets.KVListWidget = KVListWidget;
-
-    // ------------------------------------------
-    
-    var VariableListWidget = function(data) {
-        KVListWidget.apply(this, [data]);
-        this.element.addClass('phpdebugbar-widgets-varlist');
-    };
-
-    VariableListWidget.prototype = new KVListWidget();
-    VariableListWidget.constructor = VariableListWidget;
-
-    VariableListWidget.prototype.itemRenderer = function(dt, dd, key, value) {
-        dt.text(key);
-
-        var v = value;
-        if (v.length > 100) {
-            v = v.substr(0, 100) + "...";
-        }
-        dd.text(v).click(function() {
-            if (dd.hasClass('pretty')) {
-                dd.text(v).removeClass('pretty');
-            } else {
-                dd.html(htmlize(value)).addClass('pretty');
-            }
-        });
-    };
-
-    widgets.VariableListWidget = VariableListWidget;
-
-    // ------------------------------------------
-    
-    var IFrameWidget = function(url) {
-        this.element = $('<iframe src="" class="phpdebugbar-widgets-iframe" seamless="seamless" border="0" width="100%" height="100%" />');
-        if (url) {
-            this.setData(url);
-        }
-    };
-
-    IFrameWidget.prototype.setData = function(url) {
-        this.element.attr('src', url);
-    };
-
-    widgets.IFrameWidget = IFrameWidget;
-
-    // ------------------------------------------
+    // ------------------------------------------------------------------
 
+    /**
+     * Widget for the TimeDataCollector
+     *
+     * @this {TimelineWidget}
+     * @constructor
+     * @param {Object} data
+     */
     var TimelineWidget = function(data) {
         this.element = $('<ul class="phpdebugbar-widgets-timeline" />');
         if (data) {
@@ -240,7 +354,7 @@ PhpDebugBar.Widgets = (function($) {
 
     widgets.TimelineWidget = TimelineWidget;
 
-    // ------------------------------------------
+    // ------------------------------------------------------------------
 
     return widgets;