Skip to content

Commit ee21ea1

Browse files
vjikvjik
authored
Improve arguments appearance + Fix bug (#120)
1 parent d30121b commit ee21ea1

File tree

5 files changed

+102
-79
lines changed

5 files changed

+102
-79
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## 3.2.2 under development
44

5-
- Enh #117: Show arguments table by click (@xepozz)
5+
- Enh #117, #120: Show arguments table by click (@xepozz, @vjik)
66
- Enh #116: Remove @anonymous postfix (@xepozz)
77
- Bug #114: Stop `click` event on text selection (@xepozz)
88
- Enh #114: Show full argument by click (@xepozz)

‎src/Renderer/HtmlRenderer.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ public function renderCallStack(Throwable $t, array $trace = []): string
267267
$function = null;
268268
if (!empty($trace[$i]['function']) && $trace[$i]['function'] !== 'unknown') {
269269
$function = $trace[$i]['function'];
270-
if ($class !== null) {
270+
if ($class !== null && !str_contains($function, '{closure}')) {
271271
$parameters = (new \ReflectionMethod($class, $function))->getParameters();
272272
}
273273
}

‎templates/_call-stack-item.php‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,20 @@
33
use Yiisoft\ErrorHandler\Renderer\HtmlRenderer;
44

55
/**
6-
* @var $file string|null
7-
* @var $line int|null
8-
* @var $class string|null
9-
* @var $function string|null
10-
* @var $index int
11-
* @var $lines string[]
12-
* @var $begin int
13-
* @var $end int
14-
* @var $args array
15-
* @var $isVendorFile bool
16-
* @var $reflectionParameters ReflectionMethod[]
17-
* @var $this HtmlRenderer
6+
* @var string|null $file
7+
* @var int|null $line
8+
* @var string|null $class
9+
* @var string|null $function
10+
* @var int $index
11+
* @var string[] $lines
12+
* @var int $begin
13+
* @var int $end
14+
* @var array $args
15+
* @var bool $isVendorFile
16+
* @var ReflectionMethod[] $reflectionParameters
17+
* @var HtmlRenderer $this
1818
*/
1919

20-
2120
$icon = <<<HTML
2221
<svg class="external-link" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2322
<title>Open the target page</title>
@@ -59,34 +58,36 @@
5958
<div class="flex flex-column">
6059
<?= sprintf('at line %d', $line + 1) ?>
6160
<?php if (!empty($args)): ?>
62-
<button class="show-arguments-toggle">arguments</button>
61+
<button class="button toggleFunctionArguments">arguments</button>
6362
<?php endif ?>
6463
</div>
6564
<?php endif ?>
6665
</div>
67-
<div class="function-arguments-wrap hidden">
68-
<?php
69-
if ($function !== null) {
70-
echo '<table class="table w-100">';
71-
foreach ($args as $key => $argument) {
72-
echo '<tr class="argument">';
73-
$key = is_int($key) && isset($reflectionParameters[$key]) ? $reflectionParameters[$key]->getName() : $key;
74-
echo '<td>';
75-
echo '<span class="argument-key bold">$' . $this->htmlEncode($key) . '</span>';
76-
echo '</td>';
77-
echo '<td>';
78-
echo '<span class="argument-value word-break">';
79-
echo $this->argumentsToString(is_array($argument) ? $argument : [$argument]);
80-
echo '</span>';
81-
echo '<span class="argument-type">';
82-
echo gettype($argument);
83-
echo '</span>';
84-
echo '</td>';
85-
echo '</tr>';
86-
}
87-
echo '</table>';
88-
}
89-
?>
66+
<div class="functionArguments hidden">
67+
<?php if ($function !== null) { ?>
68+
<div class="functionArguments_title">
69+
<?= $this->htmlEncode($function) ?> arguments:
70+
</div>
71+
<table>
72+
<?php foreach ($args as $key => $argument) { ?>
73+
<tr>
74+
<td class="functionArguments_key">
75+
$<?= $this->htmlEncode(
76+
is_int($key) && isset($reflectionParameters[$key])
77+
? $reflectionParameters[$key]->getName()
78+
: $key
79+
) ?>
80+
</td>
81+
<td class="functionArguments_type">
82+
<?= gettype($argument) ?>
83+
</td>
84+
<td class="functionArguments_value word-break">
85+
<?= $this->argumentsToString(is_array($argument) ? $argument : [$argument]) ?>
86+
</td>
87+
</tr>
88+
<?php } ?>
89+
</table>
90+
<?php } ?>
9091
</div>
9192
<?php if (!empty($lines)): ?>
9293
<div class="element-code-wrap">

‎templates/development.css‎

Lines changed: 60 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,22 @@ ul {
3434
}
3535
/* end reset */
3636

37+
3738
/* light theme */
3839
:root {
3940
--page-bg-color: #fff;
4041
--page-text-color: #505050;
42+
--page-text-muted-color: #888;
4143
--icon-color: #505050;
4244
--icon-hover-color: #000;
4345
--table-line-even-bg: #fff;
4446
--table-line-even-color: #141414;
4547
--table-line-odd-bg: #eee;
4648
--table-line-odd-color: #141414;
4749
--table-line-hover: #ccc;
48-
--button-bg: #eee;
49-
--button-color: #000;
50-
--button-bg-hover: #d4d4d4;
50+
--button-bg: #e3e5e7;
51+
--button-color: #333;
52+
--button-bg-hover: #c4c7cb;
5153
--button-color-hover: #333;
5254
}
5355

@@ -77,35 +79,65 @@ ul {
7779
background-color: var(--table-line-hover);
7880
}
7981

80-
.argument-type {
81-
padding-left: 4px;
82-
opacity: 0.5;
83-
user-select: none;
84-
-webkit-user-select: none;
85-
-moz-user-select: none;
86-
-ms-user-select: none;
87-
display: none;
88-
}
8982

90-
.argument:hover .argument-type {
91-
display: inline;
92-
}
93-
94-
button.show-arguments-toggle {
95-
padding: 4px;
83+
.button {
84+
padding: 4px 8px;
9685
font-size: 14px;
9786
box-sizing: border-box;
98-
border: 1px solid #ddd;
87+
border: 0;
9988
background: var(--button-bg);
100-
color: var(--button-color)
89+
color: var(--button-color);
90+
border-radius: 6px;
91+
cursor: pointer;
10192
}
102-
103-
button.show-arguments-toggle:hover {
104-
border-color: var(--button-bg-hover);
93+
.button:hover {
10594
background: var(--button-bg-hover);
10695
color: var(--button-color-hover);
10796
}
10897

98+
.functionArguments {
99+
padding: 20px 0;
100+
border-top: 1px solid var(--element-wrap-border-color);
101+
--function-arguments-bg: #f8f8f8;
102+
--function-arguments-border-color: #e3e3e3;
103+
}
104+
.dark-theme .functionArguments {
105+
--function-arguments-bg: #303030;
106+
--function-arguments-border-color: #272727;
107+
}
108+
.functionArguments_title {
109+
padding: 0 30px 12px;
110+
color: var(--page-text-muted-color);
111+
}
112+
.functionArguments table {
113+
padding: 4px 0;
114+
width: 100%;
115+
background: var(--function-arguments-bg);
116+
border-collapse: collapse;
117+
}
118+
.functionArguments td {
119+
padding: 12px 8px;
120+
border-top: 1px solid var(--function-arguments-border-color);
121+
}
122+
.functionArguments tr:first-child td {
123+
border-top: 0;
124+
}
125+
.functionArguments_key {
126+
padding-left: 30px !important;
127+
white-space: nowrap;
128+
}
129+
.functionArguments_type {
130+
color: var(--page-text-muted-color);
131+
white-space: nowrap;
132+
}
133+
.functionArguments_value {
134+
width: 100%;
135+
padding-right: 30px !important;
136+
}
137+
.toggleFunctionArguments {
138+
margin-top: 4px;
139+
}
140+
109141
header {
110142
--header-bg-color: #ededed;
111143
--previous-text-color: inherit;
@@ -554,10 +586,6 @@ main {
554586
line-break: normal;
555587
}
556588

557-
.call-stack ul li.application .element-wrap {
558-
border-bottom: 1px solid var(--element-wrap-border-color);
559-
}
560-
561589
.call-stack ul li a {
562590
color: var(--link-color);
563591
}
@@ -579,6 +607,7 @@ main {
579607
}
580608

581609
.call-stack ul li .element-code-wrap {
610+
border-top: 1px solid var(--element-wrap-border-color);
582611
overflow-x: auto;
583612
}
584613

@@ -766,6 +795,7 @@ main {
766795
.dark-theme {
767796
--page-bg-color: rgba(46, 46, 46, 0.9);
768797
--page-text-color: #fff;
798+
--page-text-muted-color: #aaa;
769799
--icon-color: #989898;
770800
--icon-hover-color: #fff;
771801

@@ -775,10 +805,10 @@ main {
775805
--table-line-odd-color: #eee;
776806
--table-line-hover: #141414;
777807

778-
--button-bg: #666;
808+
--button-bg: #6c757d;
779809
--button-color: #fff;
780-
--button-bg-hover: #aaa;
781-
--button-color-hover: #333;
810+
--button-bg-hover: #5c636a;
811+
--button-color-hover: #fff;
782812
}
783813

784814
.dark-theme header {

‎templates/development.php‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -253,9 +253,9 @@ class="copy-clipboard"
253253
refreshCallStackItemCode(stackItem);
254254

255255
// toggle code block visibility
256-
stackItem.querySelector('.show-arguments-toggle')?.addEventListener('click', function (e) {
256+
stackItem.querySelector('.toggleFunctionArguments')?.addEventListener('click', function (e) {
257257
e.stopPropagation();
258-
stackItem.getElementsByClassName('function-arguments-wrap')[0].classList.toggle('hidden');
258+
stackItem.getElementsByClassName('functionArguments')[0].classList.toggle('hidden');
259259
});
260260

261261
// toggle code block visibility
@@ -295,14 +295,6 @@ class="copy-clipboard"
295295

296296
if (typeof code !== 'undefined') {
297297
code.style.display = window.getComputedStyle(code).display === 'block' ? 'none' : 'block';
298-
if (code.style.display === 'block') {
299-
this.style.borderBottom = document.body.classList.contains('dark-theme')
300-
? '1px solid #141414'
301-
: '1px solid #d0d0d0'
302-
;
303-
} else {
304-
this.style.borderBottom = 'none';
305-
}
306298
refreshCallStackItemCode(callStackItem);
307299
}
308300
});

0 commit comments

Comments
 (0)