Skip to content

Commit 3b1d8e3

Browse files
kenjiskenjis
authored
Merge pull request #8411 from YapsBridging/csp
fix: DebugBar block by CSP
2 parents 4c9bf0e + c563325 commit 3b1d8e3

File tree

8 files changed

+201
-54
lines changed

8 files changed

+201
-54
lines changed

‎admin/css/debug-toolbar/toolbar.scss

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,11 @@
398398
text-align: right;
399399
}
400400
}
401+
402+
// show tab
403+
&>.debug-bar-dblock {
404+
display: block;
405+
}
401406
}
402407

403408

@@ -467,7 +472,6 @@
467472
@import '_theme-light';
468473
}
469474

470-
471475
// LAYOUT HELPERS
472476
// ========================================================================== */
473477

@@ -510,3 +514,47 @@
510514
.debug-bar-noverflow {
511515
overflow: hidden;
512516
}
517+
518+
.debug-bar-dtableRow {
519+
display: table-row;
520+
}
521+
522+
.debug-bar-dinlineBlock {
523+
display: inline-block;
524+
}
525+
526+
.debug-bar-pointer {
527+
cursor: pointer;
528+
}
529+
530+
.debug-bar-mleft4 {
531+
margin-left: 4px;
532+
}
533+
534+
.debug-bar-level-0 {
535+
--level: 0;
536+
}
537+
538+
.debug-bar-level-1 {
539+
--level: 1;
540+
}
541+
542+
.debug-bar-level-2 {
543+
--level: 2;
544+
}
545+
546+
.debug-bar-level-3 {
547+
--level: 3;
548+
}
549+
550+
.debug-bar-level-4 {
551+
--level: 4;
552+
}
553+
554+
.debug-bar-level-5 {
555+
--level: 5;
556+
}
557+
558+
.debug-bar-level-6 {
559+
--level: 6;
560+
}

‎app/Views/welcome_message.php

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,11 @@
150150
.further h2:first-of-type {
151151
padding-top: 0;
152152
}
153+
.svg-stroke {
154+
fill: none;
155+
stroke: #000;
156+
stroke-width: 32px;
157+
}
153158
footer {
154159
background-color: rgba(221, 72, 20, .8);
155160
text-align: center;
@@ -206,7 +211,7 @@
206211
</a>
207212
</li>
208213
<li class="menu-toggle">
209-
<button onclick="toggleMenu();">&#9776;</button>
214+
<button id="menuToggle">&#9776;</button>
210215
</li>
211216
<li class="menu-item hidden"><a href="#">Home</a></li>
212217
<li class="menu-item hidden"><a href="https://codeigniter4.github.io/userguide/" target="_blank">Docs</a>
@@ -253,7 +258,7 @@
253258
<h1>Go further</h1>
254259

255260
<h2>
256-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='32' y='96' width='64' height='368' rx='16' ry='16' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/><line x1='112' y1='224' x2='240' y2='224' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line x1='112' y1='400' x2='240' y2='400' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect x='112' y='160' width='128' height='304' rx='16' ry='16' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/><rect x='256' y='48' width='96' height='416' rx='16' ry='16' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/><path d='M422.46,96.11l-40.4,4.25c-11.12,1.17-19.18,11.57-17.93,23.1l34.92,321.59c1.26,11.53,11.37,20,22.49,18.84l40.4-4.25c11.12-1.17,19.18-11.57,17.93-23.1L445,115C443.69,103.42,433.58,94.94,422.46,96.11Z' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/></svg>
261+
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='32' y='96' width='64' height='368' rx='16' ry='16' class="svg-stroke" /><line x1='112' y1='224' x2='240' y2='224' class="svg-stroke" /><line x1='112' y1='400' x2='240' y2='400' class="svg-stroke" /><rect x='112' y='160' width='128' height='304' rx='16' ry='16' class="svg-stroke" /><rect x='256' y='48' width='96' height='416' rx='16' ry='16' class="svg-stroke" /><path d='M422.46,96.11l-40.4,4.25c-11.12,1.17-19.18,11.57-17.93,23.1l34.92,321.59c1.26,11.53,11.37,20,22.49,18.84l40.4-4.25c11.12-1.17,19.18-11.57,17.93-23.1L445,115C443.69,103.42,433.58,94.94,422.46,96.11Z' class="svg-stroke"/></svg>
257262
Learn
258263
</h2>
259264

@@ -263,7 +268,7 @@
263268
target="_blank">User Guide</a> !</p>
264269

265270
<h2>
266-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M431,320.6c-1-3.6,1.2-8.6,3.3-12.2a33.68,33.68,0,0,1,2.1-3.1A162,162,0,0,0,464,215c.3-92.2-77.5-167-173.7-167C206.4,48,136.4,105.1,120,180.9a160.7,160.7,0,0,0-3.7,34.2c0,92.3,74.8,169.1,171,169.1,15.3,0,35.9-4.6,47.2-7.7s22.5-7.2,25.4-8.3a26.44,26.44,0,0,1,9.3-1.7,26,26,0,0,1,10.1,2L436,388.6a13.52,13.52,0,0,0,3.9,1,8,8,0,0,0,8-8,12.85,12.85,0,0,0-.5-2.7Z' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><path d='M66.46,232a146.23,146.23,0,0,0,6.39,152.67c2.31,3.49,3.61,6.19,3.21,8s-11.93,61.87-11.93,61.87a8,8,0,0,0,2.71,7.68A8.17,8.17,0,0,0,72,464a7.26,7.26,0,0,0,2.91-.6l56.21-22a15.7,15.7,0,0,1,12,.2c18.94,7.38,39.88,12,60.83,12A159.21,159.21,0,0,0,284,432.11' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>
271+
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M431,320.6c-1-3.6,1.2-8.6,3.3-12.2a33.68,33.68,0,0,1,2.1-3.1A162,162,0,0,0,464,215c.3-92.2-77.5-167-173.7-167C206.4,48,136.4,105.1,120,180.9a160.7,160.7,0,0,0-3.7,34.2c0,92.3,74.8,169.1,171,169.1,15.3,0,35.9-4.6,47.2-7.7s22.5-7.2,25.4-8.3a26.44,26.44,0,0,1,9.3-1.7,26,26,0,0,1,10.1,2L436,388.6a13.52,13.52,0,0,0,3.9,1,8,8,0,0,0,8-8,12.85,12.85,0,0,0-.5-2.7Z' class="svg-stroke" /><path d='M66.46,232a146.23,146.23,0,0,0,6.39,152.67c2.31,3.49,3.61,6.19,3.21,8s-11.93,61.87-11.93,61.87a8,8,0,0,0,2.71,7.68A8.17,8.17,0,0,0,72,464a7.26,7.26,0,0,0,2.91-.6l56.21-22a15.7,15.7,0,0,1,12,.2c18.94,7.38,39.88,12,60.83,12A159.21,159.21,0,0,0,284,432.11' class="svg-stroke" /></svg>
267272
Discuss
268273
</h2>
269274

@@ -274,7 +279,7 @@
274279
target="_blank">chat on Slack</a> !</p>
275280

276281
<h2>
277-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><line x1='176' y1='48' x2='336' y2='48' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='118' y1='304' x2='394' y2='304' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><path d='M208,48v93.48a64.09,64.09,0,0,1-9.88,34.18L73.21,373.49C48.4,412.78,76.63,464,123.08,464H388.92c46.45,0,74.68-51.22,49.87-90.51L313.87,175.66A64.09,64.09,0,0,1,304,141.48V48' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>
282+
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><line x1='176' y1='48' x2='336' y2='48' class="svg-stroke" /><line x1='118' y1='304' x2='394' y2='304' class="svg-stroke" /><path d='M208,48v93.48a64.09,64.09,0,0,1-9.88,34.18L73.21,373.49C48.4,412.78,76.63,464,123.08,464H388.92c46.45,0,74.68-51.22,49.87-90.51L313.87,175.66A64.09,64.09,0,0,1,304,141.48V48' class="svg-stroke" /></svg>
278283
Contribute
279284
</h2>
280285

@@ -309,7 +314,8 @@
309314

310315
<!-- SCRIPTS -->
311316

312-
<script>
317+
<script {csp-script-nonce}>
318+
document.getElementById("menuToggle").addEventListener('click', toggleMenu);
313319
function toggleMenu() {
314320
var menuItems = document.getElementsByClassName('menu-item');
315321
for (var i = 0; i < menuItems.length; i++) {

‎system/Debug/Toolbar.php

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -197,12 +197,12 @@ protected function renderTimelineRecursive(array $rows, float $startTime, int $s
197197
$open = $row['name'] === 'Controller';
198198

199199
if ($hasChildren || $isQuery) {
200-
$output .= '<tr class="timeline-parent' . ($open ? ' timeline-parent-open' : '') . '" id="timeline-' . $styleCount . '_parent" onclick="ciDebugBar.toggleChildRows(\'timeline-' . $styleCount . '\');">';
200+
$output .= '<tr class="timeline-parent' . ($open ? ' timeline-parent-open' : '') . '" id="timeline-' . $styleCount . '_parent" data-toggle="childrows" data-child="timeline-' . $styleCount . '">';
201201
} else {
202202
$output .= '<tr>';
203203
}
204204

205-
$output .= '<td class="' . ($isChild ? 'debug-bar-width30' : '') . '" style="--level: ' . $level . ';">' . ($hasChildren || $isQuery ? '<nav></nav>' : '') . $row['name'] . '</td>';
205+
$output .= '<td class="' . ($isChild ? 'debug-bar-width30' : '') . ' debug-bar-level-' . $level . '" >' . ($hasChildren || $isQuery ? '<nav></nav>' : '') . $row['name'] . '</td>';
206206
$output .= '<td class="' . ($isChild ? 'debug-bar-width10' : '') . '">' . $row['component'] . '</td>';
207207
$output .= '<td class="' . ($isChild ? 'debug-bar-width10 ' : '') . 'debug-bar-alignRight">' . number_format($row['duration'] * 1000, 2) . ' ms</td>';
208208
$output .= "<td class='debug-bar-noverflow' colspan='{$segmentCount}'>";
@@ -220,15 +220,15 @@ protected function renderTimelineRecursive(array $rows, float $startTime, int $s
220220

221221
// Add children if any
222222
if ($hasChildren || $isQuery) {
223-
$output .= '<tr class="child-row" id="timeline-' . ($styleCount - 1) . '_children" style="' . ($open ? '' : 'display: none;') . '">';
223+
$output .= '<tr class="child-row ' . ($open ? '' : ' debug-bar-ndisplay') . '" id="timeline-' . ($styleCount - 1) . '_children" >';
224224
$output .= '<td colspan="' . ($segmentCount + 3) . '" class="child-container">';
225225
$output .= '<table class="timeline">';
226226
$output .= '<tbody>';
227227

228228
if ($isQuery) {
229229
// Output query string if query
230230
$output .= '<tr>';
231-
$output .= '<td class="query-container" style="--level: ' . ($level + 1) . ';">' . $row['query'] . '</td>';
231+
$output .= '<td class="query-container debug-bar-level-' . ($level + 1) . '" >' . $row['query'] . '</td>';
232232
$output .= '</tr>';
233233
} else {
234234
// Recursively render children

‎system/Debug/Toolbar/Views/_database.tpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
<tr class="{class}" title="{hover}" data-toggle="{qid}-trace">
1111
<td class="narrow">{duration}</td>
1212
<td>{! sql !}</td>
13-
<td style="text-align: right"><strong>{trace-file}</strong></td>
13+
<td class="debug-bar-alignRight"><strong>{trace-file}</strong></td>
1414
</tr>
15-
<tr class="muted" id="{qid}-trace" style="display:none">
15+
<tr class="muted debug-bar-ndisplay" id="{qid}-trace">
1616
<td></td>
1717
<td colspan="2">
1818
{trace}

‎system/Debug/Toolbar/Views/toolbar.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,9 @@
288288
padding-left: 1em;
289289
text-align: right;
290290
}
291+
#debug-bar > .debug-bar-dblock {
292+
display: block;
293+
}
291294

292295
.debug-view.show-view {
293296
border: 1px solid;
@@ -804,3 +807,47 @@
804807
.debug-bar-noverflow {
805808
overflow: hidden;
806809
}
810+
811+
.debug-bar-dtableRow {
812+
display: table-row;
813+
}
814+
815+
.debug-bar-dinlineBlock {
816+
display: inline-block;
817+
}
818+
819+
.debug-bar-pointer {
820+
cursor: pointer;
821+
}
822+
823+
.debug-bar-mleft4 {
824+
margin-left: 4px;
825+
}
826+
827+
.debug-bar-level-0 {
828+
--level: 0;
829+
}
830+
831+
.debug-bar-level-1 {
832+
--level: 1;
833+
}
834+
835+
.debug-bar-level-2 {
836+
--level: 2;
837+
}
838+
839+
.debug-bar-level-3 {
840+
--level: 3;
841+
}
842+
843+
.debug-bar-level-4 {
844+
--level: 4;
845+
}
846+
847+
.debug-bar-level-5 {
848+
--level: 5;
849+
}
850+
851+
.debug-bar-level-6 {
852+
--level: 6;
853+
}

0 commit comments

Comments
 (0)