Skip to content

Commit

Permalink
remove inline style debugbar,welcome_message for CSP
Browse files Browse the repository at this point in the history
  • Loading branch information
@YapsBridging
YapsBridging committed Jan 12, 2024
1 parent a42449e commit 389a71c
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 54 deletions.
33 changes: 28 additions & 5 deletions app/Views/welcome_message.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,28 @@
.further h2:first-of-type {
padding-top: 0;
}
.f1 {
fill: none;
stroke: #000;
stroke-linejoin: round;
stroke-width: 32px;
}

.f2 {
fill: none;
stroke: #000;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 32px;
}

.f3 {
fill: none;
stroke: #000;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 32px;
}
footer {
background-color: rgba(221, 72, 20, .8);
text-align: center;
Expand Down Expand Up @@ -206,7 +228,7 @@
</a>
</li>
<li class="menu-toggle">
<button onclick="toggleMenu();">&#9776;</button>
<button id="menuToggle">&#9776;</button>
</li>
<li class="menu-item hidden"><a href="#">Home</a></li>
<li class="menu-item hidden"><a href="https://codeigniter4.github.io/userguide/" target="_blank">Docs</a>
Expand Down Expand Up @@ -253,7 +275,7 @@
<h1>Go further</h1>

<h2>
<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>
<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="f1" /><line x1='112' y1='224' x2='240' y2='224' class="f2" /><line x1='112' y1='400' x2='240' y2='400' class="f2" /><rect x='112' y='160' width='128' height='304' rx='16' ry='16' class="f1" /><rect x='256' y='48' width='96' height='416' rx='16' ry='16' class="f1" /><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="f1"/></svg>
Learn
</h2>

Expand All @@ -263,7 +285,7 @@
target="_blank">User Guide</a> !</p>

<h2>
<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>
<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="f3" /><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="f3" /></svg>
Discuss
</h2>

Expand All @@ -274,7 +296,7 @@
target="_blank">chat on Slack</a> !</p>

<h2>
<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>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><line x1='176' y1='48' x2='336' y2='48' class="f3" /><line x1='118' y1='304' x2='394' y2='304' class="f3" /><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="f3" /></svg>
Contribute
</h2>

Expand Down Expand Up @@ -309,7 +331,8 @@

<!-- SCRIPTS -->

<script>
<script {csp-script-nonce}>
document.getElementById("menuToggle").addEventListener('click',toggleMenu);
function toggleMenu() {
var menuItems = document.getElementsByClassName('menu-item');
for (var i = 0; i < menuItems.length; i++) {
Expand Down
8 changes: 4 additions & 4 deletions system/Debug/Toolbar.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,12 +197,12 @@ protected function renderTimelineRecursive(array $rows, float $startTime, int $s
$open = $row['name'] === 'Controller';

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

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

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

if ($isQuery) {
// Output query string if query
$output .= '<tr>';
$output .= '<td class="query-container" style="--level: ' . ($level + 1) . ';">' . $row['query'] . '</td>';
$output .= '<td class="query-container level-' . ($level + 1) . '" >' . $row['query'] . '</td>';
$output .= '</tr>';
} else {
// Recursively render children
Expand Down
4 changes: 2 additions & 2 deletions system/Debug/Toolbar/Views/_database.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
<tr class="{class}" title="{hover}" data-toggle="{qid}-trace">
<td class="narrow">{duration}</td>
<td>{! sql !}</td>
<td style="text-align: right"><strong>{trace-file}</strong></td>
<td class="debug-bar-alignRight"><strong>{trace-file}</strong></td>
</tr>
<tr class="muted" id="{qid}-trace" style="display:none">
<tr class="muted debug-bar-ndisplay" id="{qid}-trace">
<td></td>
<td colspan="2">
{trace}
Expand Down
95 changes: 69 additions & 26 deletions system/Debug/Toolbar/Views/toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ var ciDebugBar = {
var tab = ciDebugBar.readCookie("debug-bar-tab");
if (document.getElementById(tab)) {
var el = document.getElementById(tab);
el.style.display = "block";
ciDebugBar.switchClass(el,"debug-bar-ndisplay","debug-bar-dblock");
ciDebugBar.addClass(el, "active");
tab = document.querySelector("[data-tab=" + tab + "]");
if (tab) {
Expand All @@ -70,7 +70,24 @@ var ciDebugBar = {
// Hook up generic toggle via data attributes `data-toggle="foo"`
var links = this.toolbar.querySelectorAll("[data-toggle]");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", ciDebugBar.toggleRows, true);
let toggleData = links[i].getAttribute("data-toggle");
if(toggleData=="datatable"){

let datatable = links[i].getAttribute("data-table");
links[i].addEventListener("click", function(){
ciDebugBar.toggleDataTable(datatable)
}, true);

}else if(toggleData=="childrows"){

let child = links[i].getAttribute("data-child");
links[i].addEventListener("click", function(){
ciDebugBar.toggleChildRows(child)
}, true);

}else{
links[i].addEventListener("click", ciDebugBar.toggleRows, true);
}
}
},

Expand All @@ -79,21 +96,21 @@ var ciDebugBar = {
var tab = document.getElementById(this.getAttribute("data-tab"));

// If the label have not a tab stops here
if (!tab) {
if (! tab) {
return;
}

// Remove debug-bar-tab cookie
ciDebugBar.createCookie("debug-bar-tab", "", -1);

// Check our current state.
var state = tab.style.display;
var state = tab.classList.contains("debug-bar-dblock");

// Hide all tabs
var tabs = document.querySelectorAll("#debug-bar .tab");

for (var i = 0; i < tabs.length; i++) {
tabs[i].style.display = "none";
ciDebugBar.switchClass(tabs[i],"debug-bar-dblock","debug-bar-ndisplay");
}

// Mark all labels as inactive
Expand All @@ -104,8 +121,8 @@ var ciDebugBar = {
}

// Show/hide the selected tab
if (state != "block") {
tab.style.display = "block";
if (! state) {
ciDebugBar.switchClass(tab,"debug-bar-ndisplay","debug-bar-dblock");
ciDebugBar.addClass(this.parentNode, "active");
// Create debug-bar-tab cookie to persistent state
ciDebugBar.createCookie(
Expand Down Expand Up @@ -138,6 +155,11 @@ var ciDebugBar = {
}
},

switchClass : function(el,classFrom,classTo){
ciDebugBar.removeClass(el,classFrom);
ciDebugBar.addClass(el,classTo);
},

/**
* Toggle display of another object based on
* the data-toggle value of this object
Expand All @@ -150,8 +172,12 @@ var ciDebugBar = {
let target = document.getElementById(
row.getAttribute("data-toggle")
);
target.style.display =
target.style.display === "none" ? "table-row" : "none";

if(target.classList.contains("debug-bar-ndisplay")) {
ciDebugBar.switchClass(target,"debug-bar-ndisplay","debug-bar-dtableRow");
}else{
ciDebugBar.switchClass(target,"debug-bar-dtableRow","debug-bar-ndisplay");
}
}
},

Expand All @@ -166,7 +192,11 @@ var ciDebugBar = {
}

if (obj) {
obj.style.display = obj.style.display === "none" ? "block" : "none";
if(obj.classList.contains("debug-bar-ndisplay")){
ciDebugBar.switchClass(obj,"debug-bar-ndisplay","debug-bar-dblock");
}else{
ciDebugBar.switchClass(obj,"debug-bar-dblock","debug-bar-ndisplay");
}
}
},

Expand All @@ -182,7 +212,13 @@ var ciDebugBar = {
}

if (par && obj) {
obj.style.display = obj.style.display === "none" ? "" : "none";

if(obj.classList.contains("debug-bar-ndisplay")){
ciDebugBar.removeClass(obj,"debug-bar-ndisplay");
}else{
ciDebugBar.addClass(obj,"debug-bar-ndisplay");
}

par.classList.toggle("timeline-parent-open");
}
},
Expand All @@ -193,11 +229,15 @@ var ciDebugBar = {
* Toggle tool bar from full to icon and icon to full
*/
toggleToolbar: function () {
var open = ciDebugBar.toolbar.style.display != "none";

ciDebugBar.icon.style.display = open == true ? "inline-block" : "none";
ciDebugBar.toolbar.style.display =
open == false ? "inline-block" : "none";
var open = ! ciDebugBar.toolbar.classList.contains("debug-bar-ndisplay");

if(open){
ciDebugBar.switchClass(ciDebugBar.icon,"debug-bar-ndisplay","debug-bar-dinlineBlock");
ciDebugBar.switchClass(ciDebugBar.toolbar,"debug-bar-dinlineBlock","debug-bar-ndisplay");
}else{
ciDebugBar.switchClass(ciDebugBar.icon,"debug-bar-dinlineBlock","debug-bar-ndisplay");
ciDebugBar.switchClass(ciDebugBar.toolbar,"debug-bar-ndisplay","debug-bar-dinlineBlock");
}

// Remember it for other page loads on this site
ciDebugBar.createCookie("debug-bar-state", "", -1);
Expand All @@ -215,10 +255,13 @@ var ciDebugBar = {
setToolbarState: function () {
var open = ciDebugBar.readCookie("debug-bar-state");

ciDebugBar.icon.style.display =
open != "open" ? "inline-block" : "none";
ciDebugBar.toolbar.style.display =
open == "open" ? "inline-block" : "none";
if(open !="open"){
ciDebugBar.switchClass(ciDebugBar.icon,"debug-bar-ndisplay","debug-bar-dinlineBlock");
ciDebugBar.switchClass(ciDebugBar.toolbar,"debug-bar-dinlineBlock","debug-bar-ndisplay");
}else{
ciDebugBar.switchClass(ciDebugBar.icon,"debug-bar-dinlineBlock","debug-bar-ndisplay");
ciDebugBar.switchClass(ciDebugBar.toolbar,"debug-bar-ndisplay","debug-bar-dinlineBlock");
}
},

toggleViewsHints: function () {
Expand Down Expand Up @@ -494,7 +537,7 @@ var ciDebugBar = {
var btn = document.querySelector("[data-tab=ci-views]");

// If the Views Collector is inactive stops here
if (!btn) {
if (! btn) {
return;
}

Expand Down Expand Up @@ -527,7 +570,7 @@ var ciDebugBar = {

ciDebugBar.createCookie("debug-bar-position", "", -1);

if (!position || position === "bottom") {
if (! position || position === "bottom") {
ciDebugBar.createCookie("debug-bar-position", "top", 365);
ciDebugBar.addClass(ciDebugBar.icon, "fixed-top");
ciDebugBar.addClass(ciDebugBar.toolbar, "fixed-top");
Expand Down Expand Up @@ -569,7 +612,7 @@ var ciDebugBar = {
var theme = ciDebugBar.readCookie("debug-bar-theme");

if (
!theme &&
! theme &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
// If there is no cookie, and "prefers-color-scheme" is set to "dark"
Expand Down Expand Up @@ -617,7 +660,7 @@ var ciDebugBar = {
var eventSource;

// If the Hot Reload Collector is inactive stops here
if (!btn) {
if (! btn) {
return;
}

Expand Down Expand Up @@ -716,7 +759,7 @@ var ciDebugBar = {
for (var i = 0; i < rowGet.length; i++) {
row = rowGet[i];
if (!/\/\(.+?\)/.test(rowGet[i].innerText)) {
row.style = "cursor: pointer;";
ciDebugBar.addClass(row,"debug-bar-pointer");
row.setAttribute(
"title",
location.origin + "/" + ciDebugBar.trimSlash(row.innerText)
Expand All @@ -741,7 +784,7 @@ var ciDebugBar = {
patt,
'<input type="text" placeholder="$1">'
) +
'<input type="submit" value="Go" style="margin-left: 4px;">' +
'<input type="submit" value="Go" class="debug-bar-mleft4">' +
"</form>";
}
}
Expand Down
Loading

0 comments on commit 389a71c

Please sign in to comment.