Skip to content
This repository was archived by the owner on Sep 6, 2023. It is now read-only.

Commit 50264e7

Browse files
ggrachdevggrachdev
committed
Первый рабочий прототип, сделан красивый вывод данных
1 parent 2bd6c05 commit 50264e7

File tree

5 files changed

+171
-45
lines changed

5 files changed

+171
-45
lines changed

‎assets/DebugBar/js/initializer.js‎

Lines changed: 45 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,52 @@ var Ggrach = {
44
document.addEventListener('DOMContentLoaded', function () {
55
if (Ggrach.Utils.User.isAdmin())
66
{
7-
var $logsItems = document.querySelectorAll('[data-click="show_notice_panel"]');
8-
9-
if ($logsItems)
7+
if (Ggrach.Utils.Screen.isMobile())
8+
{
9+
document.querySelector('.ggrach__debug_bar').remove();
10+
} else
1011
{
11-
$logsItems.forEach(function (element) {
12-
element.addEventListener('click', function (e) {
13-
var type = e.target.dataset.typeNotice;
12+
var $logsItems = document.querySelectorAll('[data-click="show_notice_panel"]');
13+
14+
if ($logsItems)
15+
{
16+
$logsItems.forEach(function (element) {
17+
element.addEventListener('click', function (e) {
18+
var type = e.target.dataset.typeNotice;
19+
20+
document.querySelectorAll('.ggrach__debug_bar__log').forEach(function (element) {
21+
22+
element.scrollTop = 0;
23+
24+
if (element.dataset.typeNotice !== type)
25+
{
26+
element.style.display = 'none';
27+
}
28+
29+
});
1430

15-
document.querySelectorAll('.ggrach__debug_bar__log').forEach(function (element) {
31+
var $targetLogPanel = document.querySelector('.ggrach__debug_bar__log[data-type-notice="' + type + '"]');
1632

17-
element.scrollTop = 0;
18-
19-
if (element.dataset.typeNotice !== type)
33+
$logsItems.forEach(function (el) {
34+
el.classList.remove('active');
35+
});
36+
37+
if ($targetLogPanel.style.display === 'block')
38+
{
39+
e.target.classList.remove('active');
40+
document.querySelector('body').style.overflow = null;
41+
$targetLogPanel.style.display = 'none';
42+
document.querySelector('.ggrach__overlay').style.display = 'none';
43+
} else
2044
{
21-
element.style.display = 'none';
45+
e.target.classList.add('active');
46+
document.querySelector('body').style.overflow = 'hidden';
47+
$targetLogPanel.style.display = 'block';
48+
document.querySelector('.ggrach__overlay').style.display = 'block';
2249
}
23-
2450
});
25-
26-
var $targetLogPanel = document.querySelector('.ggrach__debug_bar__log[data-type-notice="' + type + '"]');
27-
28-
if ($targetLogPanel.style.display === 'block')
29-
{
30-
31-
document.querySelector('body').style.overflow = null;
32-
$targetLogPanel.style.display = 'none';
33-
} else
34-
{
35-
document.querySelector('body').style.overflow = 'hidden';
36-
$targetLogPanel.style.display = 'block';
37-
}
3851
});
39-
});
52+
}
4053
}
4154
}
4255
});
@@ -50,6 +63,12 @@ Ggrach.Utils = {
5063
return document.getElementById('panel') &&
5164
document.getElementById('bx-panel-admin-tab');
5265
}
66+
},
67+
68+
Screen: {
69+
isMobile: function () {
70+
return window.matchMedia("(max-width: 1100px)").matches;
71+
}
5372
}
5473
};
5574

‎assets/DebugBar/themes/general.css‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,19 @@
88
align-items: center !important;
99
}
1010

11+
.ggrach__overlay {
12+
position: fixed;
13+
top: 0;
14+
left: 0;
15+
width: 100%;
16+
height: 100%;
17+
background: #000000cc;
18+
z-index: 9998;
19+
}
20+
1121
.ggrach__debug_bar > .ggrach__debug_bar__item {
1222
display: flex !important;
13-
align-items: center !important;
23+
line-height: 33px !important;
1424
justify-content: center !important;
1525
padding-left: 5px;
1626
padding-right: 5px;
@@ -34,6 +44,7 @@
3444

3545
.ggrach__debug_bar__log > pre {
3646
padding: 10px !important;
47+
padding-bottom: 7px !important;
3748
border-bottom: 1px solid #c3c3c3 !important;
3849
font-size: 13px !important;
3950
line-height: 16px !important;
@@ -47,6 +58,10 @@
4758
border-bottom: unset !important;
4859
}
4960

61+
.ggrach__debug_bar__item.active {
62+
font-weight: bold !important;
63+
}
64+
5065
.type-notice-notice {
5166
background-color: #93c7ec !important;
5267
}

‎assets/DebugBar/themes/light/theme.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,9 @@
66

77
.ggrach__debug_bar__log {
88
border-top: 1px solid #b3b3b3 !important;
9+
}
10+
11+
.ggrach__debug_bar__log__line {
12+
font-size: 12px;
13+
color: darkgrey;
914
}

‎initializer.php‎

Lines changed: 96 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@
1717
"\GGrach\BitrixDebugger\Cache\RuntimeCache" => $ggrachDebuggerRootPath . "/src/BitrixDebugger/Cache/RuntimeCache.php",
1818
"\GGrach\BitrixDebugger\Validator\ShowModeDebuggerValidator" => $ggrachDebuggerRootPath . "/src/BitrixDebugger/Validator/ShowModeDebuggerValidator.php",
1919
"\GGrach\BitrixDebugger\Representer\DebugBarRepresenter" => $ggrachDebuggerRootPath . "/src/BitrixDebugger/Representer/DebugBarRepresenter.php",
20-
21-
2220
"\GGrach\Writer\FileWriter" => $ggrachDebuggerRootPath . "/src/Writer/FileWriter.php",
2321
"\GGrach\Writer\Contract\WritableContract" => $ggrachDebuggerRootPath . "/src/Writer/Contract/WritableContract.php"
2422
]);
@@ -45,10 +43,9 @@ function GD() {
4543
return $GD;
4644
}
4745

48-
4946
Asset::getInstance()->addJs($ggrachDebuggerRootPath . "/assets/DebugBar/js/initializer.js");
5047
Asset::getInstance()->addCss($ggrachDebuggerRootPath . '/assets/DebugBar/themes/general.css');
51-
Asset::getInstance()->addCss($ggrachDebuggerRootPath . '/assets/DebugBar/themes/'.$ggrachDebugBarConfigurator->getColorTheme().'/theme.css');
48+
Asset::getInstance()->addCss($ggrachDebuggerRootPath . '/assets/DebugBar/themes/' . $ggrachDebugBarConfigurator->getColorTheme() . '/theme.css');
5249

5350
/**
5451
* Пример дебага:
@@ -68,5 +65,100 @@ function GD() {
6865
include 'inizializer_alias.php';
6966

7067
if (\GGrach\BitrixDebugger\Validator\ShowModeDebuggerValidator::needShowInDebugBar($GD)) {
68+
69+
function ggrach_highlight_data($data = []) {
70+
71+
$viewResult = '';
72+
73+
$need_hide_blocks = true;
74+
75+
$ppr = function ($in, $opened, $margin = 5) use(&$ppr, $need_hide_blocks) {
76+
77+
$viewRes = '';
78+
79+
if (!\is_object($in) && !\is_array($in)) {
80+
return $in;
81+
}
82+
83+
if ($need_hide_blocks == true)
84+
$opened = '';
85+
86+
foreach ($in as $key => $value) {
87+
if (\is_object($value) || \is_array($value)) {
88+
$viewRes .= '<details style="margin-left:' . $margin . 'px" ' . $opened . '>';
89+
$viewRes .= '<summary style="cursor: pointer; margin-top: 5px; margin-bottom: 5px; text-decoration: underline;">';
90+
$viewRes .= (is_object($value)) ? $key . ' {' . count((array) $value) . '}' : $key . ' [' . count($value) . ']';
91+
$viewRes .= '</summary>';
92+
$viewRes .= $ppr($value, $opened, $margin + 5);
93+
$viewRes .= '</details>';
94+
} else {
95+
switch (gettype($value)) {
96+
case 'string':
97+
$bgc = 'red';
98+
99+
if (\strlen($value) > 500) {
100+
$value = '[Очень длинная строка]';
101+
}
102+
103+
break;
104+
case 'integer':
105+
$bgc = 'green';
106+
break;
107+
}
108+
$viewRes .= '<div style="margin-left:' . $margin . 'px">' . $key . ' : <span style="color:' . $bgc . '">' . $value . '</span> <span style="color: blue;">(' . gettype($value) . ')</span></div>';
109+
}
110+
}
111+
112+
return $viewRes;
113+
};
114+
115+
$pp = function ($in, $opened = true) use ($ppr) {
116+
117+
$view = '';
118+
119+
if ($opened) {
120+
$opened = ' open';
121+
}
122+
123+
124+
$view .= '<div>';
125+
126+
if (is_object($in) or is_array($in)) {
127+
$view .= '<details' . $opened . '>';
128+
$view .= '<summary style="cursor: pointer; margin-top: 5px; margin-bottom: 5px; text-decoration: underline;">';
129+
$view .= (is_object($in)) ? 'Object {' . count((array) $in) . '}' : 'Array [' . count($in) . ']';
130+
$view .= '</summary>';
131+
$view .= $ppr($in, $opened);
132+
$view .= '</details>';
133+
} else {
134+
switch (gettype($in)) {
135+
case 'string':
136+
$bgc = 'red';
137+
138+
if (\strlen($in) > 500) {
139+
$in = '[Очень длинная строка]';
140+
}
141+
142+
break;
143+
case 'integer':
144+
$bgc = 'green';
145+
break;
146+
}
147+
148+
$view .= '<div style="margin-left: 0px"><span style="color:' . $bgc . '">' . $in . '</span> <span style="color: blue;">(' . gettype($in) . ')</span></div>';
149+
}
150+
151+
152+
$view .= '</div>';
153+
154+
155+
return $view;
156+
};
157+
158+
$viewResult .= $pp($data, !$need_hide_blocks);
159+
160+
return $viewResult;
161+
}
162+
71163
include 'events.php';
72164
}

‎src/BitrixDebugger/Representer/DebugBarRepresenter.php‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,37 +14,32 @@ class DebugBarRepresenter {
1414
public static function render(Debugger $debugger): string {
1515

1616
$log = $debugger->getLog();
17-
18-
if(empty($log)) return '';
1917

20-
$view = '<section class="ggrach__debug_bar">';
18+
if (empty($log))
19+
return '';
20+
21+
$view = '<section class="ggrach__overlay" style="display: none;"></section><section class="ggrach__debug_bar">';
2122

2223
if (!empty($log)) {
2324
foreach ($log as $typeLog => $arLogs) {
2425
$view .= '<div class="ggrach__debug_bar__item type-notice-' . $typeLog . '" data-type-notice="' . $typeLog . '" data-click="show_notice_panel">';
25-
$view .= \sizeof($arLogs);
26+
$view .= \sizeof($arLogs['data']);
2627
$view .= '</div>';
2728

2829
$view .= '<div class="ggrach__debug_bar__log" data-type-notice="' . $typeLog . '" style="display: none;">';
29-
foreach ($arLogs as $logValue) {
30-
31-
$logValue = \strip_tags($logValue);
30+
foreach ($arLogs['data'] as $logValue) {
3231

33-
if (is_string($logValue)) {
34-
if (\strlen($logValue) > 200) {
35-
$logValue = '[String]';
36-
}
37-
}
32+
$lineView = '<a class="ggrach__debug_bar__log__line" target="_blank" href="/bitrix/admin/fileman_file_edit.php?path=' . str_replace($_SERVER['DOCUMENT_ROOT'], '', $arLogs['file']) . '&full_src=Y">' . $arLogs['file'] . ' on line ' . $arLogs['line'] . '</a>';
3833

39-
$view .= str_replace(['<span style="color: #0000BB">&lt;?</span>', '<span style="color: #0000BB">?&gt;</span>', '&lt;?', '?&gt;', '&lt;?php'], ['', '', '', ''], '<pre>' . \highlight_string('<?' . \var_export($logValue, true) . '?>', true) . '</pre>');
34+
$view .= str_replace(['<span style="color: #0000BB">&lt;?</span>', '<span style="color: #0000BB">?&gt;</span>', '&lt;?', '?&gt;', '&lt;?php'], ['', '', '', ''], '<pre>' . \ggrach_highlight_data($logValue) . $lineView . '</pre>');
4035
}
4136
$view .= '</div>';
4237
}
4338
}
4439

4540
$view .= '</section>';
4641

47-
$view .= '<script> var GgrachDebuggerLogProvider = ' . \CUtil::PhpToJSObject(GD()->getLog()) . '; </script>';
42+
// $view .= '<script> var GgrachDebuggerLogProvider = ' . \CUtil::PhpToJSObject(GD()->getLog()) . '; </script>';
4843

4944
return $view;
5045
}

0 commit comments

Comments
 (0)