Show arguments table by click

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 3.2.2 under development
 
+- Enh #117: Show arguments table by click (@xepozz)
 - Enh #116: Remove @anonymous postfix (@xepozz)
 - Bug #114: Stop `click` event on text selection (@xepozz)
 - Enh #114: Show full argument by click (@xepozz)

src/Renderer/HtmlRenderer.php

@@ -245,7 +245,16 @@ public function renderPreviousExceptions(Throwable $t): string
     public function renderCallStack(Throwable $t, array $trace = []): string
     {
         $application = $vendor = [];
-        $application[1] = $this->renderCallStackItem($t->getFile(), $t->getLine(), null, null, [], 1, false);
+        $application[1] = $this->renderCallStackItem(
+            $t->getFile(),
+            $t->getLine(),
+            null,
+            null,
+            [],
+            1,
+            false,
+            [],
+        );
 
         $length = count($trace);
         for ($i = 0; $i < $length; ++$i) {
@@ -254,18 +263,39 @@ public function renderCallStack(Throwable $t, array $trace = []): string
             $class = !empty($trace[$i]['class']) ? $trace[$i]['class'] : null;
             $args = !empty($trace[$i]['args']) ? $trace[$i]['args'] : [];
 
+            $parameters = [];
             $function = null;
             if (!empty($trace[$i]['function']) && $trace[$i]['function'] !== 'unknown') {
                 $function = $trace[$i]['function'];
+                if ($class !== null) {
+                    $parameters = (new \ReflectionMethod($class, $function))->getParameters();
+                }
             }
             $index = $i + 2;
 
-            if ($isVendor = $this->isVendorFile($file)) {
-                $vendor[$index] = $this->renderCallStackItem($file, $line, $class, $function, $args, $index, $isVendor);
-                continue;
+            if ($this->isVendorFile($file)) {
+                $vendor[$index] = $this->renderCallStackItem(
+                    $file,
+                    $line,
+                    $class,
+                    $function,
+                    $args,
+                    $index,
+                    true,
+                    $parameters,
+                );
+            } else {
+                $application[$index] = $this->renderCallStackItem(
+                    $file,
+                    $line,
+                    $class,
+                    $function,
+                    $args,
+                    $index,
+                    false,
+                    $parameters,
+                );
             }
-
-            $application[$index] = $this->renderCallStackItem($file, $line, $class, $function, $args, $index, $isVendor);
         }
 
         return $this->renderTemplate($this->defaultTemplatePath . '/_call-stack-items.php', [
@@ -302,7 +332,7 @@ public function argumentsToString(array $args, bool $truncate = true): string
             }
 
             if (is_object($value)) {
-                $args[$key] = '<span class="title">' . $this->htmlEncode($this->removeAnonymous($value::class)) . '</span>';
+                $args[$key] = '<span class="title">' . $this->htmlEncode($this->removeAnonymous($value::class) . '#' . spl_object_id($value)) . '</span>';
             } elseif (is_bool($value)) {
                 $args[$key] = '<span class="keyword">' . ($value ? 'true' : 'false') . '</span>';
             } elseif (is_string($value)) {
@@ -498,7 +528,8 @@ private function renderCallStackItem(
         ?string $function,
         array $args,
         int $index,
-        bool $isVendorFile
+        bool $isVendorFile,
+        array $reflectionParameters,
     ): string {
         $lines = [];
         $begin = $end = 0;
@@ -525,6 +556,7 @@ private function renderCallStackItem(
             'end' => $end,
             'args' => $args,
             'isVendorFile' => $isVendorFile,
+            'reflectionParameters' => $reflectionParameters,
         ]);
     }
 

templates/_call-stack-item.php

@@ -1,15 +1,23 @@
 <?php
-/* @var $file string|null */
-/* @var $line int|null */
-/* @var $class string|null */
-/* @var $function string|null */
-/* @var $index int */
-/* @var $lines string[] */
-/* @var $begin int */
-/* @var $end int */
-/* @var $args array */
-/* @var $isVendorFile bool */
-/* @var $this \Yiisoft\ErrorHandler\Renderer\HtmlRenderer */
+
+use Yiisoft\ErrorHandler\Renderer\HtmlRenderer;
+
+/**
+ * @var $file string|null
+ * @var $line int|null
+ * @var $class string|null
+ * @var $function string|null
+ * @var $index int
+ * @var $lines string[]
+ * @var $begin int
+ * @var $end int
+ * @var $args array
+ * @var $isVendorFile bool
+ * @var $reflectionParameters ReflectionMethod[]
+ * @var $this HtmlRenderer
+ */
+
+
 $icon = <<<HTML
 <svg class="external-link" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <title>Open the target page</title>
@@ -32,7 +40,7 @@
             <?php endif ?>
 
             <?php if ($function !== null): ?>
-                <span class="function-info">
+                <span class="function-info word-break">
                     <?php
                     echo $file === null ? "{$index}." : '&mdash;&nbsp;';
                     $function = $class === null ? $function : "{$this->removeAnonymous($class)}::$function";
@@ -48,9 +56,38 @@
         </div>
 
         <?php if ($line !== null): ?>
-            <div><?= sprintf('at line %d', $line + 1) ?></div>
+            <div class="flex flex-column">
+                <?= sprintf('at line %d', $line + 1) ?>
+                <?php if (!empty($args)): ?>
+                    <button class="show-arguments-toggle">arguments</button>
+                <?php endif ?>
+            </div>
         <?php endif ?>
     </div>
+    <div class="function-arguments-wrap hidden">
+        <?php
+        if ($function !== null) {
+            echo '<table class="table w-100">';
+            foreach ($args as $key => $argument) {
+                echo '<tr class="argument">';
+                $key = is_int($key) && isset($reflectionParameters[$key]) ? $reflectionParameters[$key]->getName() : $key;
+                echo '<td>';
+                echo '<span class="argument-key bold">$' . $this->htmlEncode($key) . '</span>';
+                echo '</td>';
+                echo '<td>';
+                echo '<span class="argument-value word-break">';
+                echo $this->argumentsToString(is_array($argument) ? $argument : [$argument]);
+                echo '</span>';
+                echo '<span class="argument-type">';
+                echo gettype($argument);
+                echo '</span>';
+                echo '</td>';
+                echo '</tr>';
+            }
+            echo '</table>';
+        }
+        ?>
+    </div>
     <?php if (!empty($lines)): ?>
         <div class="element-code-wrap">
             <div class="code-wrap">

templates/development.css

@@ -40,6 +40,70 @@ ul {
     --page-text-color: #505050;
     --icon-color: #505050;
     --icon-hover-color: #000;
+    --table-line-even-bg: #fff;
+    --table-line-even-color: #141414;
+    --table-line-odd-bg: #eee;
+    --table-line-odd-color: #141414;
+    --table-line-hover: #ccc;
+    --button-bg: #eee;
+    --button-color: #000;
+    --button-bg-hover: #d4d4d4;
+    --button-color-hover: #333;
+}
+
+.table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.table td, .table th {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+.table tr:nth-child(odd) {
+    border-color: var(--table-line-odd-bg);
+    background-color: var(--table-line-odd-bg);
+    color: var(--table-line-odd-color);
+}
+
+.table tr:nth-child(even) {
+    border-color: var(--table-line-even-bg);
+    background-color: var(--table-line-even-bg);
+    color: var(--table-line-even-color);
+}
+
+.table tr:hover {
+    background-color: var(--table-line-hover);
+}
+
+.argument-type {
+    padding-left: 4px;
+    opacity: 0.5;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    display: none;
+}
+
+.argument:hover .argument-type {
+    display: inline;
+}
+
+button.show-arguments-toggle {
+    padding: 4px;
+    font-size: 14px;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+    background: var(--button-bg);
+    color: var(--button-color)
+}
+
+button.show-arguments-toggle:hover {
+    border-color: var(--button-bg-hover);
+    background: var(--button-bg-hover);
+    color: var(--button-color-hover);
 }
 
 header {
@@ -381,6 +445,14 @@ main {
     display: none;
 }
 
+.flex {
+    display: flex;
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
 .flex-1 {
     flex: 1;
 }
@@ -389,6 +461,19 @@ main {
     max-width: 100%;
 }
 
+.w-100 {
+    width: 100%;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.word-break {
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
 /* call stack */
 .call-stack ul li,
 .request {
@@ -467,8 +552,6 @@ main {
 .call-stack ul li .element-wrap .function-info {
     display: inline-block;
     line-break: normal;
-    overflow-wrap: break-word;
-    word-break: break-word;
 }
 
 .call-stack ul li.application .element-wrap {
@@ -681,10 +764,21 @@ main {
 /* start dark-theme */
 
 .dark-theme {
-    --page-bg-color: rgba(46,46,46, 0.9);
+    --page-bg-color: rgba(46, 46, 46, 0.9);
     --page-text-color: #fff;
     --icon-color: #989898;
     --icon-hover-color: #fff;
+
+    --table-line-even-bg: #555;
+    --table-line-even-color: #eee;
+    --table-line-odd-bg: #999;
+    --table-line-odd-color: #eee;
+    --table-line-hover: #141414;
+
+    --button-bg: #666;
+    --button-color: #fff;
+    --button-bg-hover: #aaa;
+    --button-color-hover: #333;
 }
 
 .dark-theme header {