Commit 8964d6ec by resurtm

Fixes (theoretically) #418 and #413.

parent 3c3324cb
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
*/ */
$context = $this->context; $context = $this->context;
?> ?>
<li class="<?php if (!$context->isCoreFile($file) || $index === 1) echo 'application'; ?> call-stack-item"> <li class="<?php if (!$context->isCoreFile($file) || $index === 1) echo 'application'; ?> call-stack-item"
data-line="<?php echo (int)($line - $begin - 1); ?>">
<div class="element-wrap"> <div class="element-wrap">
<div class="element"> <div class="element">
<span class="item-number"><?php echo (int)$index; ?>.</span> <span class="item-number"><?php echo (int)$index; ?>.</span>
...@@ -30,12 +31,10 @@ $context = $this->context; ...@@ -30,12 +31,10 @@ $context = $this->context;
</div> </div>
<?php if (!empty($lines)): ?> <?php if (!empty($lines)): ?>
<div class="code-wrap"> <div class="code-wrap">
<div class="error-line" style="top: <?php echo 18 * (int)($line - $begin); ?>px;"></div> <div class="error-line"></div>
<?php for ($i = $begin; $i <= $end; ++$i): ?> <?php for ($i = $begin; $i <= $end; ++$i): ?><div class="hover-line"></div><?php endfor; ?>
<div class="hover-line" style="top: <?php echo 18 * (int)($i - $begin); ?>px;"></div>
<?php endfor; ?>
<div class="code"> <div class="code">
<span class="lines"><?php for ($i = $begin; $i <= $end; ++$i) echo (int)$i . '<br/>'; ?></span> <?php for ($i = $begin; $i <= $end; ++$i): ?><span class="lines-item"><?php echo (int)($i + 1); ?></span><?php endfor; ?>
<pre><?php <pre><?php
// fill empty lines with a whitespace to avoid rendering problems in opera // fill empty lines with a whitespace to avoid rendering problems in opera
for ($i = $begin; $i <= $end; ++$i) { for ($i = $begin; $i <= $end; ++$i) {
......
...@@ -200,17 +200,20 @@ html,body{ ...@@ -200,17 +200,20 @@ html,body{
.call-stack ul li.application .code-wrap{ .call-stack ul li.application .code-wrap{
display: block; display: block;
} }
.call-stack ul li .error-line,.call-stack ul li .hover-line{ .call-stack ul li .error-line,
.call-stack ul li .hover-line{
background-color: #ffebeb; background-color: #ffebeb;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 18px; height: 18px;
z-index: 100; z-index: 100;
margin-top: -61px;
} }
.call-stack ul li .hover-line{ .call-stack ul li .hover-line{
background: none; background: none;
} }
.call-stack ul li .hover-line.hover,.call-stack ul li .hover-line:hover{ .call-stack ul li .hover-line.hover,
.call-stack ul li .hover-line:hover{
background: #edf9ff !important; background: #edf9ff !important;
} }
.call-stack ul li .code{ .call-stack ul li .code{
...@@ -219,32 +222,25 @@ html,body{ ...@@ -219,32 +222,25 @@ html,body{
padding: 0 50px; padding: 0 50px;
position: relative; position: relative;
} }
.call-stack ul li .code .lines{ .call-stack ul li .code .lines-item{
position: absolute; position: absolute;
z-index: 200; z-index: 200;
left: 50px; display: block;
color: #aaa;
line-height: 18px; line-height: 18px;
font-size: 14px; font-size: 14px;
vertical-align: middle; margin-top: -61px;
text-align: right;
font-family: Consolas, Courier New, monospace; font-family: Consolas, Courier New, monospace;
color: #aaa;
} }
.call-stack ul li .code pre{ .call-stack ul li .code pre{
position: relative; position: relative;
z-index: 200; z-index: 200;
left: 50px; left: 50px;
line-height: 18px; line-height: 17px;
font-size: 14px; font-size: 14px;
vertical-align: middle;
font-family: Consolas, Courier New, monospace; font-family: Consolas, Courier New, monospace;
display: inline; display: inline;
} }
@media screen and (-webkit-min-device-pixel-ratio:0){
.call-stack ul li .code pre{
line-height: 16px;
}
}
/* request */ /* request */
.request{ .request{
...@@ -266,11 +262,6 @@ html,body{ ...@@ -266,11 +262,6 @@ html,body{
display: inline; display: inline;
word-wrap: break-word; word-wrap: break-word;
} }
@media screen and (-webkit-min-device-pixel-ratio:0){
.request .code pre{
line-height: 16px;
}
}
/* footer */ /* footer */
.footer{ .footer{
...@@ -415,25 +406,25 @@ var hljs=new function(){function l(o){return o.replace(/&/gm,"&amp;").replace(/< ...@@ -415,25 +406,25 @@ var hljs=new function(){function l(o){return o.replace(/&/gm,"&amp;").replace(/<
<script type="text/javascript"> <script type="text/javascript">
window.onload = function() { window.onload = function() {
var i, imax, var codeBlocks = Sizzle('pre'),
codeBlocks = Sizzle('pre'),
callStackItems = Sizzle('.call-stack-item'); callStackItems = Sizzle('.call-stack-item');
// highlight code blocks // highlight code blocks
for (i = 0, imax = codeBlocks.length; i < imax; ++i) { for (var i = 0, imax = codeBlocks.length; i < imax; ++i) {
hljs.highlightBlock(codeBlocks[i], ' '); hljs.highlightBlock(codeBlocks[i], ' ');
} }
// code block hover line // code block hover line
document.onmousemove = function(e) { document.onmousemove = function(e) {
var lines, i, imax, j, jmax, k, kmax, var event = e || window.event,
event = e || window.event, clientY = event.clientY,
y = event.clientY, lineFound = false,
lineFound = false; hoverLines = Sizzle('.hover-line');
for (i = 0, imax = codeBlocks.length; i < imax; ++i) {
lines = codeBlocks[i].getClientRects(); for (var i = 0, imax = codeBlocks.length; i < imax; ++i) {
for (j = 0, jmax = lines.length; j < jmax; ++j) { var lines = codeBlocks[i].getClientRects();
if (y > lines[j].top && y < lines[j].bottom) { for (var j = 0, jmax = lines.length; j < jmax; ++j) {
if (clientY > lines[j].top && clientY < lines[j].bottom) {
lineFound = true; lineFound = true;
break; break;
} }
...@@ -442,8 +433,8 @@ window.onload = function() { ...@@ -442,8 +433,8 @@ window.onload = function() {
break; break;
} }
} }
var hoverLines = Sizzle('.hover-line');
for (k = 0, kmax = hoverLines.length; k < kmax; ++k) { for (var k = 0, kmax = hoverLines.length; k < kmax; ++k) {
hoverLines[k].className = 'hover-line'; hoverLines[k].className = 'hover-line';
} }
if (lineFound) { if (lineFound) {
...@@ -452,13 +443,34 @@ window.onload = function() { ...@@ -452,13 +443,34 @@ window.onload = function() {
line[0].className = 'hover-line hover'; line[0].className = 'hover-line hover';
} }
} }
} };
var refreshCallStackItemCode = function(callStackItem) {
var top = callStackItem.offsetTop - window.scrollY,
lines = Sizzle('pre', callStackItem)[0].getClientRects(),
lineNumbers = Sizzle('.lines-item', callStackItem),
errorLine = Sizzle('.error-line', callStackItem)[0],
hoverLines = Sizzle('.hover-line', callStackItem);
for (var i = 0, imax = lines.length; i < imax; ++i) {
lineNumbers[i].style.top = parseInt(lines[i].top - top) + 'px';
hoverLines[i].style.top = parseInt(lines[i].top - top) + 'px';
hoverLines[i].style.height = parseInt(lines[i].bottom - lines[i].top) + 'px';
if (parseInt(callStackItem.getAttribute('data-line')) == i) {
errorLine.style.top = parseInt(lines[i].top - top) + 'px';
errorLine.style.height = parseInt(lines[i].bottom - lines[i].top) + 'px';
}
}
};
for (var i = 0, imax = callStackItems.length; i < imax; ++i) {
refreshCallStackItemCode(callStackItems[i]);
// toggle code block visibility // toggle code block visibility
for (i = 0, imax = callStackItems.length; i < imax; i++) {
Sizzle('.element-wrap', callStackItems[i])[0].addEventListener('click', function() { Sizzle('.element-wrap', callStackItems[i])[0].addEventListener('click', function() {
var code = Sizzle('.code-wrap', this.parentNode)[0]; var callStackItem = this.parentNode,
code = Sizzle('.code-wrap', callStackItem)[0];
code.style.display = window.getComputedStyle(code).display == 'block' ? 'none' : 'block'; code.style.display = window.getComputedStyle(code).display == 'block' ? 'none' : 'block';
refreshCallStackItemCode(callStackItem);
}); });
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment