[debug-toolbar/display_source_code] add a pyramid view that display syntax highlighted python source file
This will be used for tool building for easier debugging.
Closes #17256791
<table id="sql-table" class="table table-striped table-condensed">
<thead>
<tr>
<th class="table-col-index">#</th>
<th class="table-col-time">Time (ms)</th>
<th class="table-col-sql">SQL</th>
<th class="table-col-rollback">Rollback?</th>
<th class="table-col-from-rql">From RQL</th>
<th class="table-col-stack">Stack</th>
</tr>
</thead>
<tbody>
% for i, query in enumerate(sql_queries):
<tr>
<th class="table-col-index">${1 + i}</th>
<td class="table-col-time">${'%.2f' % query["time"]}</td>
<td class="table-col-sql">${highlight(query["sql"], "SQL") | n}<br>${highlight(query["args"], "python3") | n}</td>
<td class="table-col-rollback">${query["rollback"]}</td>
<td class="table-col-from-rql">
% if query["from_rql_query"]:
${highlight(query["from_rql_query"]["rql"], "rql") | n}
% else:
<i>standalone query</i>
% endif
</td>
<td class="table-col-stack">
<button class="btn btn-default" id="sql-toggle-stack-${i}" onclick="javascript:toggle_sql_stack(${i})">show stack</a>
</td>
</tr>
<tr style="display: none" id="sql-stack-${i}">
<td colspan="6">
<pre>${highlight(query["callstack"], "py3tb", linenos="inline") | n}</pre>
</td>
</tr>
<tr style="display: none"></tr> <!-- css hack because of previous hidden tr for -stripped -->
% endfor
</tbody>
</table>
<script type="text/javascript" charset="utf-stack">
function toggle_sql_stack(stack_id) {
var stack = document.getElementById("sql-stack-" + stack_id);
var button = document.getElementById("sql-toggle-stack-" + stack_id);
// stack is hidden, display it
if (stack.style.getPropertyValue("display") == "none") {
stack.style.setProperty("display", "table-row");
button.innerHTML = "hide stack"
} else {
stack.style.setProperty("display", "none");
button.innerHTML = "show stack"
}
}
</script>
<style>
#sql-table {
table-layout: fixed;
}
#sql-table .table-col-index {
text-align: right;
width: 30px;
}
#sql-table .table-col-time {
white-space: nowrap;
width: 73px;
text-align: center;
}
#sql-table .table-col-rollback {
white-space: nowrap;
width: 73px;
text-align: center;
}
#sql-table .table-col-stack {
padding: 8px;
width: 110px;
text-align: center;
}
${generate_css() | n}
.highlight > pre {
word-break: unset;
border: none;
margin: 0;
padding: 0;
background-color: unset;
}
</style>