if ((double) $data['domTime'] > 0.0) {
?>
<td><table><tr><td><div class="bar" style="width:2px; background-color:#F28300"></div></td><td>DOM Element</td></tr></table></td>
<?php
}
?>
<td><table><tr><td><div class="bar" style="width:2px; background-color:#0000FF"></div></td><td>Document Complete</td></tr></table></td>
<td style="vertical-align:middle;"><div style="background-color:#FFFF00">3xx result</div></td>
<td style="vertical-align:middle;"><div style="background-color:#FF0000">4xx+ result</div></td>
</tr>
</table>
<br>
<map name="waterfall_map">
<?php
$options = array('id' => $id, 'path' => $testPath, 'run' => $run, 'cached' => $_GET["cached"], 'cpu' => true);
$map = drawWaterfall($url, $requests, $data, true, $options);
foreach ($map as $entry) {
if ($entry['request'] !== NULL) {
$index = $entry['request'] + 1;
$title = $index . ': ' . $entry['url'];
echo '<area href="#request' . $index . '" alt="' . $title . '" title="' . $title . '" shape=RECT coords="' . $entry['left'] . ',' . $entry['top'] . ',' . $entry['right'] . ',' . $entry['bottom'] . '">' . "\n";
} else {
echo '<area href="#request" alt="' . $entry['url'] . '" title="' . $entry['url'] . '" shape=RECT coords="' . $entry['left'] . ',' . $entry['top'] . ',' . $entry['right'] . ',' . $entry['bottom'] . '">' . "\n";
}
}
?>
</map>
<?php
$cached = '';
if ((int) $_GET["cached"] == 1) {
$cached = '_Cached';
/**
* Build a side-by-side table with the captured frames from each test
*
*/
function ScreenShotTable()
{
global $tests;
global $thumbSize;
global $interval;
global $maxCompare;
if (count($tests)) {
// figure out how many columns there are
$end = 0;
foreach ($tests as &$test) {
if ($test['video']['end'] > $end) {
$end = $test['video']['end'];
}
}
echo '<br/><form id="createForm" name="create" method="get" action="/video/create.php" onsubmit="return ValidateInput(this)"><table id="videoContainer"><tr>';
// build a table with the labels
echo '<td id="labelContainer"><table id="videoLabels"><tr><th> </th></tr>';
foreach ($tests as &$test) {
// figure out the height of this video
$height = 100;
if ($test['video']['width'] && $test['video']['height']) {
$height = 10 + (int) ((double) $thumbSize / (double) $test['video']['width'] * (double) $test['video']['height']);
}
$break = '';
if (!strpos($test['name'], ' ')) {
$break = ' style="word-break: break-all;"';
}
echo "<tr width=10% height={$height}px ><td{$break}>";
$name = urlencode($test['name']);
$cached = 0;
if ($test['cached']) {
$cached = 1;
}
echo "<input type=\"checkbox\" name=\"t[]\" value=\"{$test['id']},{$test['run']}," . $name . ",{$cached}\" checked=checked> ";
$cached = '';
if ($test['cached']) {
$cached = 'cached/';
}
echo "<a class=\"pagelink\" href=\"/result/{$test['id']}/{$test['run']}/details/{$cached}\" target=\"_blank\">";
echo WrapableString($test['name']);
echo "</a></td></tr>\n";
}
echo '</table></td>';
// the actual video frames
echo '<td><div id="videoDiv"><table id="video"><thead><tr>';
$skipped = $interval;
$last = $end + $interval - 1;
for ($frame = 0; $frame <= $last; $frame++) {
$skipped++;
if ($skipped >= $interval) {
$skipped = 0;
echo '<th>' . number_format((double) $frame / 10.0, 1) . 's</th>';
}
}
echo "</tr></thead><tbody>\n";
$firstFrame = 0;
foreach ($tests as &$test) {
// figure out the height of the image
$height = 0;
if ($test['video']['width'] && $test['video']['height']) {
$height = (int) ((double) $thumbSize / (double) $test['video']['width'] * (double) $test['video']['height']);
}
echo "<tr>";
$lastThumb = null;
$frameCount = 0;
$skipped = $interval;
$last = $end + $interval - 1;
for ($frame = 0; $frame <= $last; $frame++) {
$path = $test['video']['frames'][$frame];
if (isset($path)) {
$test['currentframe'] = $frame;
} else {
if (isset($test['currentframe'])) {
$path = $test['video']['frames'][$test['currentframe']];
} else {
$path = $test['video']['frames'][0];
}
}
if (!$lastThumb) {
$lastThumb = $path;
}
$skipped++;
if ($skipped >= $interval) {
$skipped = 0;
echo '<td>';
if ($frame - $interval + 1 <= $test['video']['end']) {
echo '';
$cached = '';
if ($test['cached']) {
$cached = '_cached';
}
$imgPath = GetTestPath($test['id']) . "/video_{$test['run']}{$cached}/{$path}";
echo "<a href=\"/{$imgPath}\">";
echo "<img title=\"{$test['name']}\"";
$class = 'thumb';
if ($lastThumb != $path) {
if (!$firstFrame || $frameCount < $firstFrame) {
$firstFrame = $frameCount;
}
$class = 'thumbChanged';
}
echo " class=\"{$class}\"";
echo " width=\"{$thumbSize}\"";
if ($height) {
echo " height=\"{$height}\"";
}
echo " src=\"/thumbnail.php?test={$test['id']}&width={$thumbSize}&file=video_{$test['run']}{$cached}/{$path}\"></a>";
$lastThumb = $path;
}
$frameCount++;
echo '</td>';
}
}
echo "</tr>\n";
}
echo "</tr>\n";
// end of the table
echo "</tbody></table></div>\n";
// end of the container table
echo "</td></tr></table>\n";
echo "<div id=\"image\">";
$ival = $interval * 100;
echo "<a class=\"pagelink\" href=\"filmstrip.php?tests={$_REQUEST['tests']}&thumbSize={$thumbSize}&ival={$ival}\">Export filmstrip as an image...</a>";
echo "</div>";
echo '<div id="bottom"><input type="checkbox" name="slow" value="1"> Slow Motion<br/><br/>';
echo "Select up to {$maxCompare} tests and <input id=\"SubmitBtn\" type=\"submit\" value=\"Create Video\"></div>";
echo "</form>";
?>
<div id="layout">
<form id="layoutForm" name="layout" method="get" action="/video/compare.php">
<?php
echo "<input type=\"hidden\" name=\"tests\" value=\"{$_REQUEST['tests']}\" />\n";
?>
<table id="layoutTable">
<tr><th>Thumbnail Size</th><th>Thumbnail Interval</th></tr>
<?php
// fill in the thumbnail size selection
echo "<tr><td>";
$checked = '';
if ($thumbSize <= 100) {
$checked = ' checked=checked';
}
echo "<input type=\"radio\" name=\"thumbSize\" value=\"100\"{$checked} onclick=\"this.form.submit();\"> Small<br>";
$checked = '';
if ($thumbSize <= 150 && $thumbSize > 100) {
$checked = ' checked=checked';
}
echo "<input type=\"radio\" name=\"thumbSize\" value=\"150\"{$checked} onclick=\"this.form.submit();\"> Medium<br>";
$checked = '';
if ($thumbSize > 150) {
$checked = ' checked=checked';
}
echo "<input type=\"radio\" name=\"thumbSize\" value=\"200\"{$checked} onclick=\"this.form.submit();\"> Large";
echo "</td>";
// fill in the interval selection
echo "<td>";
$checked = '';
if ($interval <= 1) {
$checked = ' checked=checked';
}
echo "<input type=\"radio\" name=\"ival\" value=\"100\"{$checked} onclick=\"this.form.submit();\"> 0.1 sec<br>";
$checked = '';
if ($interval == 5) {
$checked = ' checked=checked';
}
echo "<input type=\"radio\" name=\"ival\" value=\"500\"{$checked} onclick=\"this.form.submit();\"> 0.5 sec<br>";
$checked = '';
if ($interval == 10) {
$checked = ' checked=checked';
}
echo "<input type=\"radio\" name=\"ival\" value=\"1000\"{$checked} onclick=\"this.form.submit();\"> 1 sec<br>";
$checked = '';
if ($interval == 50) {
$checked = ' checked=checked';
}
echo "<input type=\"radio\" name=\"ival\" value=\"5000\"{$checked} onclick=\"this.form.submit();\"> 5 sec<br>";
echo "</td></tr>";
?>
</table>
</form>
</div>
<?php
// scroll the table to show the first thumbnail change
$scrollPos = $firstFrame * ($thumbSize + 8);
?>
<script language="javascript">
var scrollPos = <?php
echo "{$scrollPos};";
?>
document.getElementById("videoDiv").scrollLeft = scrollPos;
</script>
<?php
// display the waterfall if there is only one test
if (count($tests) == 1) {
?>
<div id="waterfall">
<map name="waterfall_map">
<?php
$data = loadPageRunData($tests[0]['path'], $tests[0]['run'], $tests[0]['cached']);
$secure = false;
$haveLocations = false;
$requests = getRequests($tests[0]['id'], $tests[0]['path'], $tests[0]['run'], $tests[0]['cached'], $secure, $haveLocations, false);
$options = array('id' => $tests[0]['id'], 'path' => $tests[0]['path'], 'run' => $tests[0]['run'], 'cached' => $tests[0]['cached'], 'cpu' => false);
$map = drawWaterfall($tests[0]['url'], $requests, $data, true, $options);
foreach ($map as $entry) {
if ($entry['request'] !== NULL) {
$index = $entry['request'] + 1;
$title = $index . ': ' . $entry['url'];
echo '<area alt="' . $title . '" title="' . $title . '" shape=RECT coords="' . $entry['left'] . ',' . $entry['top'] . ',' . $entry['right'] . ',' . $entry['bottom'] . '">' . "\n";
} else {
echo '<area alt="' . $entry['url'] . '" title="' . $entry['url'] . '" shape=RECT coords="' . $entry['left'] . ',' . $entry['top'] . ',' . $entry['right'] . ',' . $entry['bottom'] . '">' . "\n";
}
}
?>
</map>
<?php
echo "<img id=\"waterfallImage\" usemap=\"#waterfall_map\" border=\"0\" alt=\"Waterfall\" src=\"/waterfall.php?test={$tests[0]['id']}&run={$tests[0]['run']}&cached={$tests[0]['cached']}&cpu=0&bw=0\">";
?>
</div>
<?php
}
echo '<br/><br/>';
}
}
$haveLocations = false;
$requests = getRequests($id, $testPath, $run, $cached, $secure, $haveLocations, false);
$cpu = true;
if (isset($_REQUEST['cpu']) && $_REQUEST['cpu'] == 0) {
$cpu = false;
}
$bw = true;
if (isset($_REQUEST['bw']) && $_REQUEST['bw'] == 0) {
$bw = false;
}
$dots = true;
if (isset($_REQUEST['dots']) && $_REQUEST['dots'] == 0) {
$dots = false;
}
$options = array('id' => $id, 'path' => $testPath, 'run' => $run, 'cached' => $cached, 'cpu' => $cpu, 'bw' => $bw, 'dots' => $dots);
// see if we are doing a regular waterfall or a connection view
if ($_REQUEST['type'] == 'connection') {
require_once 'contentColors.inc';
require_once 'connectionView.inc';
// get the color codes for the mime types
$mimeColors = requestColors($requests);
$summary = array();
$connections = getConnections($requests, $summary);
$im = drawImage($connections, $summary, $url, $mime, $mimeColors, false, $pageData, $options);
} else {
require_once 'waterfall.inc';
$im = drawWaterfall($url, $requests, $pageData, false, $options);
}
// spit the image out to the browser
imagepng($im);
imagedestroy($im);
