Use new HtmlVariableListWidget with collectors (php-debugbar#346)

Introduce a new HtmlVariableListWidget that is similar to
VariableListWidget but for variables with HTML contents.

Update the collectors that use the existing VariableListWidget to use
DebugBarVarDumper to dump the variables using the VarDumper HtmlDumper.
Because many debug bar users may not yet support inline static assets,
default to use the old VariableListWidget for now.

Updated collectors:

* ConfigCollector
* RequestDataCollector

Author: james-johnston-thumbtack

docs/base_collectors.md

@@ -90,16 +90,26 @@ If you want to see your PDO requests in the TimeDataCollector, you must add the
 
 ## RequestData
 
-Collects the data of PHP's global variables
+Collects the data of PHP's global variables.  You can call the `useHtmlVarDumper()` function to use
+VarDumper's interactive HTML dumper for rendering the variables.  If you do that, you must properly
+render [inline assets](rendering.html#assets) when rendering the debug bar in addition to the normal
+js/css static assets.
 
-    $debugbar->addCollector(new DebugBar\DataCollector\RequestDataCollector());
+    $requestDataCollector = new DebugBar\DataCollector\RequestDataCollector();
+    $requestDataCollector->useHtmlVarDumper();
+    $debugbar->addCollector($requestDataCollector);
 
 ## Config
 
-Used to display any key/value pairs array
+Used to display any key/value pairs array.  You can call the `useHtmlVarDumper()` function to use
+VarDumper's interactive HTML dumper for rendering the variables.  If you do that, you must properly
+render [inline assets](rendering.html#assets) when rendering the debug bar in addition to the normal
+js/css static assets.
 
     $data = array('foo' => 'bar');
-    $debugbar->addCollector(new DebugBar\DataCollector\ConfigCollector($data));
+    $configCollector = new DebugBar\DataCollector\ConfigCollector($data);
+    $configCollector->useHtmlVarDumper();
+    $debugbar->addCollector($configCollector);
 
 You can provide a different name for this collector in the second argument of the constructor.
 

src/DebugBar/DataCollector/ConfigCollector.php

@@ -13,12 +13,40 @@
 /**
  * Collects array data
  */
-class ConfigCollector extends DataCollector implements Renderable
+class ConfigCollector extends DataCollector implements Renderable, AssetProvider
 {
     protected $name;
 
     protected $data;
 
+    // The HTML var dumper requires debug bar users to support the new inline assets, which not all
+    // may support yet - so return false by default for now.
+    protected $useHtmlVarDumper = false;
+
+    /**
+     * Sets a flag indicating whether the Symfony HtmlDumper will be used to dump variables for
+     * rich variable rendering.
+     *
+     * @param bool $value
+     * @return $this
+     */
+    public function useHtmlVarDumper($value = true)
+    {
+        $this->useHtmlVarDumper = $value;
+        return $this;
+    }
+
+    /**
+     * Indicates whether the Symfony HtmlDumper will be used to dump variables for rich variable
+     * rendering.
+     *
+     * @return mixed
+     */
+    public function isHtmlVarDumperUsed()
+    {
+        return $this->useHtmlVarDumper;
+    }
+
     /**
      * @param array  $data
      * @param string $name
@@ -46,7 +74,9 @@ public function collect()
     {
         $data = array();
         foreach ($this->data as $k => $v) {
-            if (!is_string($v)) {
+            if ($this->isHtmlVarDumperUsed()) {
+                $v = $this->getVarDumper()->renderVar($v);
+            } else if (!is_string($v)) {
                 $v = $this->getDataFormatter()->formatVar($v);
             }
             $data[$k] = $v;
@@ -62,16 +92,26 @@ public function getName()
         return $this->name;
     }
 
+    /**
+     * @return array
+     */
+    public function getAssets() {
+        return $this->isHtmlVarDumperUsed() ? $this->getVarDumper()->getAssets() : array();
+    }
+
     /**
      * @return array
      */
     public function getWidgets()
     {
         $name = $this->getName();
+        $widget = $this->isHtmlVarDumperUsed()
+            ? "PhpDebugBar.Widgets.HtmlVariableListWidget"
+            : "PhpDebugBar.Widgets.VariableListWidget";
         return array(
             "$name" => array(
                 "icon" => "gear",
-                "widget" => "PhpDebugBar.Widgets.VariableListWidget",
+                "widget" => $widget,
                 "map" => "$name",
                 "default" => "{}"
             )

src/DebugBar/DataCollector/RequestDataCollector.php

@@ -13,8 +13,36 @@
 /**
  * Collects info about the current request
  */
-class RequestDataCollector extends DataCollector implements Renderable
+class RequestDataCollector extends DataCollector implements Renderable, AssetProvider
 {
+    // The HTML var dumper requires debug bar users to support the new inline assets, which not all
+    // may support yet - so return false by default for now.
+    protected $useHtmlVarDumper = false;
+
+    /**
+     * Sets a flag indicating whether the Symfony HtmlDumper will be used to dump variables for
+     * rich variable rendering.
+     *
+     * @param bool $value
+     * @return $this
+     */
+    public function useHtmlVarDumper($value = true)
+    {
+        $this->useHtmlVarDumper = $value;
+        return $this;
+    }
+
+    /**
+     * Indicates whether the Symfony HtmlDumper will be used to dump variables for rich variable
+     * rendering.
+     *
+     * @return mixed
+     */
+    public function isHtmlVarDumperUsed()
+    {
+        return $this->useHtmlVarDumper;
+    }
+
     /**
      * @return array
      */
@@ -25,7 +53,12 @@ public function collect()
 
         foreach ($vars as $var) {
             if (isset($GLOBALS[$var])) {
-                $data["$" . $var] = $this->getDataFormatter()->formatVar($GLOBALS[$var]);
+                $key = "$" . $var;
+                if ($this->isHtmlVarDumperUsed()) {
+                    $data[$key] = $this->getVarDumper()->renderVar($GLOBALS[$var]);
+                } else {
+                    $data[$key] = $this->getDataFormatter()->formatVar($GLOBALS[$var]);
+                }
             }
         }
 
@@ -40,15 +73,25 @@ public function getName()
         return 'request';
     }
 
+    /**
+     * @return array
+     */
+    public function getAssets() {
+        return $this->isHtmlVarDumperUsed() ? $this->getVarDumper()->getAssets() : array();
+    }
+
     /**
      * @return array
      */
     public function getWidgets()
     {
+        $widget = $this->isHtmlVarDumperUsed()
+            ? "PhpDebugBar.Widgets.HtmlVariableListWidget"
+            : "PhpDebugBar.Widgets.VariableListWidget";
         return array(
             "request" => array(
                 "icon" => "tags",
-                "widget" => "PhpDebugBar.Widgets.VariableListWidget",
+                "widget" => $widget,
                 "map" => "request",
                 "default" => "{}"
             )

src/DebugBar/Resources/widgets.css

@@ -149,9 +149,13 @@ dl.phpdebugbar-widgets-kvlist {
 
 /* -------------------------------------- */
 
-dl.phpdebugbar-widgets-varlist {
+dl.phpdebugbar-widgets-varlist,
+dl.phpdebugbar-widgets-htmlvarlist {
   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
 }
+  dl.phpdebugbar-widgets-htmlvarlist dd {
+    cursor: initial;
+  }
 
 /* -------------------------------------- */
 

src/DebugBar/Resources/widgets.js

@@ -249,7 +249,28 @@ if (typeof(PhpDebugBar) == 'undefined') {
     });
 
     // ------------------------------------------------------------------
-    
+
+    /**
+     * An extension of KVListWidget where the data represents a list
+     * of variables whose contents are HTML; this is useful for showing
+     * variable output from VarDumper's HtmlDumper.
+     *
+     * Options:
+     *  - data
+     */
+    var HtmlVariableListWidget = PhpDebugBar.Widgets.HtmlVariableListWidget = KVListWidget.extend({
+
+        className: csscls('kvlist htmlvarlist'),
+
+        itemRenderer: function(dt, dd, key, value) {
+            $('<span />').attr('title', key).text(key).appendTo(dt);
+            dd.html(value);
+        }
+
+    });
+
+    // ------------------------------------------------------------------
+
     /**
      * Iframe widget
      *

tests/DebugBar/Tests/DataCollector/ConfigCollectorTest.php

@@ -25,4 +25,32 @@ public function testName()
         $this->assertEquals('foo', $c->getName());
         $this->assertArrayHasKey('foo', $c->getWidgets());
     }
+
+    public function testAssets()
+    {
+        $c = new ConfigCollector();
+        $this->assertEmpty($c->getAssets());
+
+        $c->useHtmlVarDumper();
+        $this->assertNotEmpty($c->getAssets());
+    }
+
+    public function testHtmlRendering()
+    {
+        $c = new ConfigCollector(array('k' => array('one', 'two')));
+
+        $this->assertFalse($c->isHtmlVarDumperUsed());
+        $data = $c->collect();
+        $this->assertEquals(array('k'), array_keys($data));
+        $this->assertContains('one', $data['k']);
+        $this->assertContains('two', $data['k']);
+        $this->assertNotContains('span', $data['k']);
+
+        $c->useHtmlVarDumper();
+        $data = $c->collect();
+        $this->assertEquals(array('k'), array_keys($data));
+        $this->assertContains('one', $data['k']);
+        $this->assertContains('two', $data['k']);
+        $this->assertContains('span', $data['k']);
+    }
 }