Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changed bar graph to show entire timeline and arrow. #1

Closed
wants to merge 2 commits into from
Closed

Changed bar graph to show entire timeline and arrow. #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0b3544d
Changed bar graph to show entire timeline and arrow.
Jun 13, 2013
3ce3e7f
Fixed some syntax
Jun 13, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 4 additions & 128 deletions media/cms/css/debug.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ div#system-debug {
background-color: #fff;
color: #000;
border: 1px dashed silver;
padding: 5px;
text-align: left;
padding: 10px;
}

#system-debug div.dbgHeader {
Expand All @@ -35,14 +34,8 @@ div#system-debug {
margin: 0px;
}

#system-debug a:hover,
#system-debug a:focus,
#system-debug a:active,
#system-debug a:link,
#system-debug a:visited {
background-color: #ddd;
color: #000;
text-decoration:none;
#system-debug .dbgerror a h3 {
background-color: red;
}

#system-debug a:hover h3,
Expand Down Expand Up @@ -127,123 +120,6 @@ div#system-debug {
}


/* Common CSS for system debug */

#system-debug {
background-color: #fff;
color: #000;
border: 1px dashed silver;
padding: 10px;
}

#system-debug div.dbgHeader {
background-color: #ddd;
border: 1px solid #eee;
font-size: 16px;
}

#system-debug h3 {
margin: 0;
}

#system-debug a h3 {
background-color: #ddd;
color: #000;
font-size: 14px;
padding: 5px;
text-decoration: none;
margin: 0px;
}

#system-debug .dbgerror a h3 {
background-color: red;
}

#system-debug a:hover,
#system-debug a:focus,
#system-debug a:active,
#system-debug a:link,
#system-debug a:visited {
background-color: #ddd;
color: #000;
text-decoration:none;
}

#system-debug a:hover h3,
#system-debug a:focus h3 {
background-color: #4d4d4d;
color: #ddd;
font-size: 14px;
cursor: pointer;
text-decoration:none;
}

#system-debug div.dbgContainer {
padding: 10px;
}

#system-debug span.dbgCommand {
color: blue;
font-weight: bold;
}

#system-debug span.dbgTable {
color: green;
font-weight: bold;
}

#system-debug b.dbgOperator {
color: red;
font-weight: bold;
}

#system-debug h1 {
background-color: #2c2c2c;
color: #fff;
padding: 10px;
margin: 0;
font-size: 16px;
line-height: 1em;
}

#system-debug h4 {
font-size: 14px;
font-weight:bold;
}

#system-debug h5 {
font-size: 13px;
font-weight:bold;
margin-top: 5px;
}

div#system-debug {
margin: 5px;
}

#system-debug ol {
margin-left: 25px;
margin-right: 25px;
}

#system-debug ul {
list-style: none;
}

#system-debug li {
font-size: 13px;
margin-bottom: 10px;
}

#system-debug code {
font-size: 13px;
text-align: left;
direction: ltr;
}

#system-debug p {
font-size: 13px;
}

#system-debug div.dbgHeader.dbgerror {
background-color: red;
Expand Down Expand Up @@ -279,4 +155,4 @@ table.dbgQueryTable th, table.dbgQueryTable td {
/* This is a workaround to allow popovers to have the needed width for our queries debug tables: */
.popover.top.fade.in {
width: auto;
}
}
180 changes: 98 additions & 82 deletions plugins/system/debug/debug.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -581,7 +581,84 @@ protected function displayQueries()
$totalBargraphTime = 1;
}

$hasTipCssClass = 'hasPopover'; // $hasTipCssClass = JFactory::getApplication()->isAdmin() ? 'hasTip' : 'hasToolTip';
$bars = array();
$info = array();
foreach ($log as $k => $query)
{
if ($timings && isset($timings[$k * 2 + 1]))
{
// Compute the query time:
$queryTime = ($timings[$k * 2 + 1] - $timings[$k * 2]) * 1000;

// Run an EXPLAIN EXTENDED query on the SQL query if possible:
$hasWarnings = false;
$hasWarningsInProfile = false;

if (isset($this->explains[$k]))
{
$explain = $this->tableToHtml($this->explains[$k], $hasWarnings);
}
else
{
$explain = 'Failed EXPLAIN on query: ' . htmlspecialchars($query);
}

// Run a SHOW PROFILE query:
$profile = '';
if (in_array($db->name, array('mysqli', 'mysql')))
{
if (isset($this->sqlShowProfileEach[$k]))
{
$profileTable = $this->sqlShowProfileEach[$k];
$profile = $this->tableToHtml($profileTable, $hasWarningsInProfile);
}
else
{
$profile = 'No SHOW PROFILE (maybe because more than 100 queries)';
}
}

// Determine color of bargraph depending on query speed and presence of warnings in EXPLAIN:
if ($queryTime < 4)
{
$barClass = $hasWarnings ? 'bar-warning' : 'bar-success';
$labelClass = 'label-success';
}
elseif ($queryTime > 10)
{
$barClass = 'bar-danger';
$labelClass = 'label-important';
}
else
{
$barClass = 'bar-warning';
$labelClass = 'label-warning';
}

// Computes bargraph as follows: Position begin and end of the bar relatively to whole execution time:
$barPrev = round($timing[$k]['1'] / ($totalBargraphTime * 10), 4);
$barWidth = round($timing[$k]['0'] / ($totalBargraphTime * 10), 4);

$bars[$k] = (object) array(
'class' => $barClass,
'width' => $barWidth,
'prev' => $barPrev,
'pos' => ($k && isset($bars[$k - 1])) ? $bars[$k - 1]->pos + $bars[$k - 1]->width + $barPrev : 0,
);
$info[$k] = (object) array(
'class' => $labelClass,
'explain' => $explain,
'profile' => $profile
);
}
}
$barhtml = array();
foreach ($bars as $i => $bar)
{
$barhtml[] = '<div class="bar" style="background:transparent; width:' . $bar->prev . '%;"></div>';
$barhtml[] = '<div class="bar ' . $bar->class . '" style="width: ' . $bar->width . '%;"></div>';
}
$barhtml = implode('', $barhtml);

$list = array();
foreach ($log as $k => $query)
Expand Down Expand Up @@ -630,80 +707,13 @@ protected function displayQueries()

$text = $this->highlightQuery($query);

if ($timings && isset($timings[$k*2+1]))
if ($timings && isset($timings[$k * 2 + 1]))
{
// Compute the query time:
$queryTime = ($timings[$k * 2 + 1]-$timings[$k * 2]) * 1000;

// Run an EXPLAIN EXTENDED query on the SQL query if possible:
$explain = null;
$hasWarnings = false;
$hasWarningsInProfile = false;

if (isset($this->explains[$k]))
{
$explain = $this->tableToHtml($this->explains[$k], $hasWarnings);
}
else
{
$explain = 'Failed EXPLAIN on query: ' . htmlspecialchars($query);
}
$tipExplain = htmlspecialchars($explain);

// Run a SHOW PROFILE query:
$profile = null;
if (in_array($db->name, array('mysqli','mysql')))
{
if (isset($this->sqlShowProfileEach[$k]))
{
$profileTable = $this->sqlShowProfileEach[$k];
$profile = $this->tableToHtml($profileTable, $hasWarningsInProfile);
}
else
{
$profile = 'No SHOW PROFILE (maybe because more than 100 queries)';
}
}
$tipProfile = htmlspecialchars($profile);

// Computes bargraph as follows: Position begin and end of the bar relatively to whole execution time:
$bargraphBeginPercents = round(100.0 * ($timings[$k * 2] - $startTime) / $totalBargraphTime, 1);
$bargraphWidthPercents = round(100.0 * ($timings[$k * 2 + 1] - $timings[$k * 2]) / $totalBargraphTime, 1);
if ($bargraphWidthPercents < 0.3)
{
$bargraphWidthPercents = 0.3;
}
if ($bargraphBeginPercents + $bargraphWidthPercents > 100)
{
$bargraphBeginPercents = 100 - $bargraphWidthPercents;
}

// Determine color of bargraph depending on query speed and presence of warnings in EXPLAIN:
if ($queryTime < 4)
{
if ($hasWarnings)
{
$bargraphColorCSS = 'bar-warning';
}
else
{
$bargraphColorCSS = 'bar-success';
}
$labelCSS = null;
}
elseif ($queryTime > 10)
{
$bargraphColorCSS = 'bar-danger';
$labelCSS = ' label-important';
}
else
{
$bargraphColorCSS = 'bar-warning';
$labelCSS = ' label-warning';
}
$queryTime = ($timings[$k * 2 + 1] - $timings[$k * 2]) * 1000;

// Formats the output for the query time with EXPLAIN query results as tooltip:
$htmlTiming = '<div style="margin: 0px 0 5px;">' . sprintf('Query Time: <span class="label' . $labelCSS . '">%.3f ms</span>', $timing[$k]['0']);
$htmlTiming = '<div style="margin: 0px 0 5px;">' . sprintf('Query Time: <span class="label ' . $info[$k]->class . '">%.3f ms</span>', $timing[$k]['0']);

if ($timing[$k]['1'])
{
Expand All @@ -712,10 +722,10 @@ protected function displayQueries()

$htmlTiming .= '</div>';

$htmlTiming .= '<div class="progress dbgQuery ' . $hasTipCssClass . '" style="margin: 0px 0 5px;" title="PROFILE QUERY" data-content="' . $tipProfile . '">'
. '<div class="bar" style="background: transparent; width: '. $bargraphBeginPercents .'%;"></div>'
. '<div class="bar ' . $bargraphColorCSS . '" style="width: '. $bargraphWidthPercents .'%;"></div>'
. '</div>';
$htmlTiming .= '<span class="icon-arrow-down" style="margin-left:-6.5px;padding-left:' . ($bars[$k]->pos + ($bars[$k]->width / 2)) . '%"></span>';

$htmlTiming .= '<div class="progress dbgQuery hasPopover" style="margin: 0px 0 5px;" title="PROFILE QUERY" data-content="' . htmlspecialchars($info[$k]->profile) . '">'
. $barhtml . '</div>';

// Backtrace/Called from:
$htmlCallStack = '';
Expand All @@ -724,24 +734,30 @@ protected function displayQueries()
$htmlCallStackElements = array();
foreach ($callStacks[$k] as $functionCall)
{
if (isset($functionCall['file']) && isset($functionCall['line']) && (strpos($functionCall['file'],'/libraries/joomla/database/') === false))
if (isset($functionCall['file']) && isset($functionCall['line']) && (strpos($functionCall['file'], '/libraries/joomla/database/') === false))
{
$htmlFile = htmlspecialchars($functionCall['file']);
$htmlLine = htmlspecialchars($functionCall['line']);
// $htmlCallStackElements[] = '<span class="dbgLogQueryCalledFrom"><a href="editor://open/?file=' . $htmlFile . '&line=' . $htmlLine . '"><code>' . $htmlFile . '</code></a>&nbsp;:&nbsp;' . $htmlLine . '</span>';
$htmlCallStackElements[] = '<span class="dbgLogQueryCalledFrom">' . $this->formatLink($htmlFile, $htmlLine). '</span>';
$htmlCallStackElements[] = '<span class="dbgLogQueryCalledFrom">' . $this->formatLink($htmlFile, $htmlLine) . '</span>';
}
}
$tipCallStack = htmlspecialchars('<div class="dbgQueryTable"><div>' . implode( '</div><div>', $htmlCallStackElements) . '</div></div>');
$tipCallStack = htmlspecialchars('<div class="dbgQueryTable"><div>' . implode('</div><div>', $htmlCallStackElements) . '</div></div>');
$firstfile = preg_replace('/<a.*>(.*)<\/a>/', '\1', $htmlCallStackElements[0]);
$callStackHelpText = ' (click to see call-stack' . ( $this->linkFormat ? '' : ', ' . '<a href="http://xdebug.org/docs/all_settings#file_link_format" target="_blank">' . 'configure for links' . '</a>') . ')';
$htmlCallStack = '<span class="dbgQueryCallStack ' . $hasTipCssClass . '" title="Call-Stack" data-content="' . $tipCallStack . '" data-trigger="click">' . $firstfile . ' ' . $callStackHelpText . '</span>';
$htmlCallStack = '<h4>Call Stack</h4>'
. $firstfile
. ' [<a href="javascript://Call-Stack" class="dbgQueryCallStack hasPopover" title="Call-Stack" data-content="' . $tipCallStack . '" data-trigger="click">More...</a>]';
if (!$this->linkFormat)
{
$htmlCallStack .= ' [<a href="http://xdebug.org/docs/all_settings#file_link_format" target="_blank">' . 'Config for Link Format' . '</a>]';
}
}

$list[] = $htmlTiming
. '<pre class="' . $hasTipCssClass . '" title="EXPLAIN" data-content="' . $tipExplain . '">' . $text . '</pre>'
. '<pre>' . $text . '</pre>'
. '<h4>EXPLAIN</h4>'
. $info[$k]->explain
. $htmlCallStack;

}
else
{
Expand Down