mirror_php/php-debugbar
1
0
Fork 0
mirror of https://github.com/maximebf/php-debugbar.git synced 2025-03-15 11:50:01 +01:00
Code Issues Releases Wiki Activity

Add line number and line highlighting support to createCodeBlock (#337)

Browse Source 
When showing backtraces, it’s useful to:

1.  Show line numbers for each line of contextual code.

2.  Highlight the line from the backtrace.

This commit adds the functionality to widgets.js/css for doing this.
This commit is contained in:
James Johnston 2017-07-15 02:09:01 -07:00 committed by Barry vd. Heuvel
parent e6f0b5a48d
commit e7e0dba82b
2 changed files with 74 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/DebugBar/Resources/widgets.css
View File

@ -1,3 +1,36 @@
pre.phpdebugbar-widgets-code-block {
white-space: pre;
word-wrap: normal;
overflow: hidden;
}
pre.phpdebugbar-widgets-code-block code {
display: block;
overflow-x: auto;
overflow-y: hidden;
}
pre.phpdebugbar-widgets-code-block code.phpdebugbar-widgets-numbered-code {
padding: 5px;
}
pre.phpdebugbar-widgets-code-block code span.phpdebugbar-widgets-highlighted-line {
background: #800000;
color: #fff;
display: inline-block;
min-width: 100%;
}
pre.phpdebugbar-widgets-code-block code span.phpdebugbar-widgets-highlighted-line span {
background: none !important;
color: inherit !important;
}
pre.phpdebugbar-widgets-code-block ul {
float: left;
padding: 5px;
background: #cacaca;
border-right: 1px solid #aaa;
text-align: right;
}
/* -------------------------------------- */
ul.phpdebugbar-widgets-list {
margin: 0;
padding: 0;

47
src/DebugBar/Resources/widgets.js
View File

@ -11,6 +11,8 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/
PhpDebugBar.Widgets = {};
var csscls = PhpDebugBar.utils.makecsscls('phpdebugbar-widgets-');
/**
* Replaces spaces with &nbsp; and line breaks with <br>
*
@ -68,21 +70,54 @@ if (typeof(PhpDebugBar) == 'undefined') {
*
* @param {String} code
* @param {String} lang
* @param {Number} [firstLineNumber] If provided, shows line numbers beginning with the given value.
* @param {Number} [highlightedLine] If provided, the given line number will be highlighted.
* @return {String}
*/
var createCodeBlock = PhpDebugBar.Widgets.createCodeBlock = function(code, lang) {
var pre = $('<pre />');
$('<code />').text(code).appendTo(pre);
var createCodeBlock = PhpDebugBar.Widgets.createCodeBlock = function(code, lang, firstLineNumber, highlightedLine) {
var pre = $('<pre />').addClass(csscls('code-block'));
// Add a newline to prevent <code> element from vertically collapsing too far if the last
// code line was empty: that creates problems with the horizontal scrollbar being
// incorrectly positioned - most noticeable when line numbers are shown.
var codeElement = $('<code />').text(code + '\n').appendTo(pre);
// Add a span with a special class if we are supposed to highlight a line. highlight.js will
// still correctly format code even with existing markup in it.
if ($.isNumeric(highlightedLine)) {
if ($.isNumeric(firstLineNumber)) {
highlightedLine = highlightedLine - firstLineNumber + 1;
}
codeElement.html(function (index, html) {
var currentLine = 1;
return html.replace(/^.*$/gm, function(line) {
if (currentLine++ == highlightedLine) {
return '<span class="' + csscls('highlighted-line') + '">' + line + '</span>';
} else {
return line;
}
});
});
}
// Format the code
if (lang) {
pre.addClass("language-" + lang);
}
highlight(pre);
// Show line numbers in a list
if ($.isNumeric(firstLineNumber)) {
var lineCount = code.split('\n').length;
var $lineNumbers = $('<ul />').prependTo(pre);
pre.children().addClass(csscls('numbered-code'));
for (var i = firstLineNumber; i < firstLineNumber + lineCount; i++) {
$('<li />').text(i).appendTo($lineNumbers);
}
}
return pre;
};
var csscls = PhpDebugBar.utils.makecsscls('phpdebugbar-widgets-');
// ------------------------------------------------------------------
// Generic widgets
// ------------------------------------------------------------------