Fixes #5089: Added asset debugger panel

composer.json

@@ -84,7 +84,7 @@
         "bower-asset/punycode": ">=1.3.0",
         "bower-asset/yii2-pjax": ">=2.0.0",
         "bower-asset/bootstrap": ">=3.0.0",
-        "bower-asset/jquery.ui": ">=1.10.0"
+        "bower-asset/jquery-ui": ">=1.10.0"
     },
     "require-dev": {
         "phpunit/phpunit": "3.7.*",

extensions/debug/CHANGELOG.md

@@ -13,6 +13,7 @@ Yii Framework 2 debug extension Change Log
 - Enh #3108: Added `yii\debug\Module::enableDebugLogs` to disable logging debug logs by default (qiangxue)
 - Enh #3810: Added "Latest" button on panels page (thiagotalma)
 - Enh #4031: Http status codes were hardcoded in filter (sdkiller)
+- Enh #5089: Added asset debugger panel (arturf, qiangxue)
 
 2.0.0-beta April 13, 2014
 -------------------------

extensions/debug/Module.php

@@ -209,8 +209,8 @@ class Module extends \yii\base\Module implements BootstrapInterface
             'log' => ['class' => 'yii\debug\panels\LogPanel'],
             'profiling' => ['class' => 'yii\debug\panels\ProfilingPanel'],
             'db' => ['class' => 'yii\debug\panels\DbPanel'],
-            'mail' => ['class' => 'yii\debug\panels\MailPanel'],
             'assets' => ['class' => 'yii\debug\panels\AssetPanel'],
+            'mail' => ['class' => 'yii\debug\panels\MailPanel'],
         ];
     }
 }

extensions/debug/assets/main.css

@@ -11,6 +11,13 @@ ul.trace {
     white-space: normal;
 }
 
+ul.assets {
+    margin: 2px 0 0 0;
+    padding: 0;
+    list-style: none;
+    white-space: normal;
+}
+
 .callout-danger {
     background-color: #fcf2f2;
     border-color: #dFb5b4;

extensions/debug/panels/AssetPanel.php

@@ -24,34 +24,11 @@ use yii\web\AssetManager;
 class AssetPanel extends Panel
 {
     /**
-     * @var integer
-     */
-    private $cssCount = 0;
-    /**
-     * @var integer
-     */
-    private $jsCount = 0;
-    /**
-     * @var AssetBundle[]
-     */
-    private $bundles = [];
-    
-    /**
-     * @inheritdoc
-     */
-    public function init()
-    {
-        parent::init();
-        Event::on(Application::className(), Application::EVENT_AFTER_ACTION, function () {
-            $this->bundles = $this->format(Yii::$app->view->assetManager->bundles);
-        });
-    }
-    /**
      * @inheritdoc
      */
     public function getName()
     {
-        return 'Asset bundles';
+        return 'Asset Bundles';
     }
 
     /**
@@ -75,6 +52,42 @@ class AssetPanel extends Panel
      */
     public function save()
     {
+        $bundles = Yii::$app->view->assetManager->bundles;
+        if (empty($bundles)) {
+            return [];
+        }
+        $data = [];
+        foreach ($bundles as $name => $bundle) {
+            if ($bundle instanceof AssetBundle) {
+                $data[$name] = (array) $bundle;
+            }
+        }
+        return $data;
+
+        $cssCount = 0;
+        $jsCount = 0;
+        foreach ($bundles as $bundle) {
+
+            $cssCount += count($bundle->css);
+            $jsCount += count($bundle->js);
+
+            array_walk($bundle->css, function(&$file, $key, $data) {
+                $file = Html::a($file, $data->baseUrl . '/' . $file, ['target' => '_blank']);
+            }, $bundle);
+
+            array_walk($bundle->js, function(&$file, $key, $data) {
+                $file = Html::a($file, $data->baseUrl . '/' . $file, ['target' => '_blank']);
+            }, $bundle);
+
+            array_walk($bundle->depends, function(&$depend) {
+                $depend = Html::a($depend, '#' . $depend);
+            });
+
+            $this->formatOptions($bundle->publishOptions);
+            $this->formatOptions($bundle->jsOptions);
+            $this->formatOptions($bundle->cssOptions);
+        }
+
         $data = [
             'totalBundles' => count($this->bundles),
             'totalCssFiles' => $this->cssCount,

extensions/debug/views/default/panels/assets/detail.php

 <?php
 /* @var $panel yii\debug\panels\AssetPanel */
-/* @var $bundles \yii\web\AssetBundle[] array */
 
 use yii\helpers\Html;
+use yii\helpers\Inflector;
 ?>
-<h1>Asset bundles</h1>
-
+<h1>Asset Bundles</h1>
 
+<?php if (empty($panel->data)) {
+    echo '<p>No asset bundle was used.</p>';
+    return;
+} ?>
 <table class="table table-striped table-bordered">
     <caption>
-        <p><b>Total bundles: <?= $panel->data['totalBundles'] ?></b>.</p>
-        <p>CSS files: <?= $panel->data['totalCssFiles'] ?>, JS files: <?= $panel->data['totalJsFiles'] ?></p>
+        <p>Total <b><?= count($panel->data) ?></b> asset bundles were loaded.</p>
     </caption>
 <?php
-foreach ($panel->data['bundles'] as $key => $bundle) {
+foreach ($panel->data as $name => $bundle) {
 ?>
     <thead>
         <tr>
-            <td colspan="2"><h3 id="<?= $key ?>"><?= $key ?></h3></td>
+            <td colspan="2"><h3 id="<?= Inflector::camel2id($name) ?>"><?= $name ?></h3></td>
         </tr>
     </thead>
     <tbody>
         <tr>
             <th>sourcePath</th>
-            <td><?= Html::ul([$bundle->sourcePath], ['class' => 'trace', 'encode' => false]) ?></td>
-        </tr>
-        <tr>
-            <th>css</th>
-            <td><?= Html::ul($bundle->css, ['class' => 'trace', 'encode' => false]) ?></td>
-        </tr>
-        <tr>
-            <th>js</th>
-            <td><?= Html::ul($bundle->js, ['class' => 'trace', 'encode' => false]) ?></td>
-        </tr>
-        <tr>
-            <th>depends</th>
-            <td><?= Html::ul($bundle->depends, ['class' => 'trace', 'encode' => false]) ?></td>
-        </tr>
-        <tr>
-            <th>publishOptions</th>
-            <td><?= Html::ul($bundle->publishOptions, ['class' => 'trace', 'encode' => false]) ?></td>
+            <td><?= Html::encode($bundle['sourcePath'] !== null ? $bundle['sourcePath'] : $bundle['basePath']) ?></td>
         </tr>
+        <?php if ($bundle['basePath'] !== null): ?>
             <tr>
                 <th>basePath</th>
-            <td><?= Html::ul([$bundle->basePath], ['class' => 'trace', 'encode' => false]) ?></td>
+                <td><?= Html::encode($bundle['basePath']) ?></td>
             </tr>
+        <?php endif; ?>
+        <?php if ($bundle['baseUrl'] !== null): ?>
             <tr>
                 <th>baseUrl</th>
-            <td><?= Html::ul([$bundle->baseUrl], ['class' => 'trace', 'encode' => false]) ?></td>
+                <td><?= Html::encode($bundle['baseUrl']) ?></td>
+            </tr>
+        <?php endif; ?>
+        <?php if (!empty($bundle['css'])): ?>
+        <tr>
+            <th>css</th>
+            <td><?= Html::ul($bundle['css'], ['class' => 'assets']) ?></td>
         </tr>
+        <?php endif; ?>
+        <?php if (!empty($bundle['js'])): ?>
         <tr>
-            <th>jsOptions</th>
-            <td><?= Html::ul($bundle->jsOptions, ['class' => 'trace']) ?></td>
+            <th>js</th>
+            <td><?= Html::ul($bundle['js'], ['class' => 'assets']) ?></td>
         </tr>
+        <?php endif; ?>
+        <?php if (!empty($bundle['depends'])): ?>
         <tr>
-            <th>cssOptions</th>
-            <td><?= Html::ul($bundle->cssOptions, ['class' => 'trace']) ?></td>
+            <th>depends</th>
+            <td><ul class="assets">
+                <?php foreach ($bundle['depends'] as $depend): ?>
+                    <li><?= Html::a($depend, '#' . Inflector::camel2id($depend)) ?></li>
+                <?php endforeach; ?>
+            </ul></td>
         </tr>
+        <?php endif; ?>
     </tbody>
 <?php
 }

extensions/debug/views/default/panels/assets/summary.php

 <?php
 /* @var $panel yii\debug\panels\AssetPanel */
+if (!empty($panel->data)):
 ?>
 <div class="yii-debug-toolbar-block">
-    <a href="<?= $panel->getUrl() ?>" title="Asset bundles count">Asset bundles <span class="label label-info"><?= $panel->data['totalBundles'] ?></span></a>
+    <a href="<?= $panel->getUrl() ?>" title="Number of asset bundles loaded">Asset Bundles <span class="label label-info"><?= count($panel->data) ?></span></a>
 </div>
+<?php endif; ?>

framework/CHANGELOG.md

@@ -212,6 +212,7 @@ Yii Framework 2 Change Log
 - Enh #4740: Added `yii\web\Session::addFlash()` (restyler)
 - Enh #4897: Added `yii\helpers\FileHelper::mimeMagicFile` (qiangxue)
 - Enh #5058: Added `$pageSize` parameter to `Pagination::createUrl()` to allow creating URLs with arbitrary page sizes (cdcchen, qiangxue)
+- Enh #5089: Added asset debugger panel (arturf, qiangxue)
 - Enh: Added support for using sub-queries when building a DB query with `IN` condition (qiangxue)
 - Enh: Supported adding a new response formatter without the need to reconfigure existing formatters (qiangxue)
 - Enh: Added `yii\web\UrlManager::addRules()` to simplify adding new URL rules (qiangxue)