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

Jump to bottom

Read/write waterfall customizations to a permalink #2345

Merged
merged 3 commits into from
Sep 13, 2022
Merged

Read/write waterfall customizations to a permalink #2345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c48c3cb
Read/write waterfall customizations to a permalink
Sep 12, 2022
3292148
Remove forgotten console.log and new lines
Sep 12, 2022
a6ee009
buh-bye jQuery and other finishing touches
Sep 13, 2022
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
5 changes: 0 additions & 5 deletions www/assets/css/pagestyle2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8764,11 +8764,6 @@ div.bar {
margin: 1rem 0;
}

.details_panel button {
display: none;
/* necessary button? does non-js work anyway? */
}

.customwaterfall_hed {
padding: 0 1.5rem;
}
Expand Down
212 changes: 107 additions & 105 deletions www/customWaterfall.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,148 +38,150 @@
<h1>Generate a Custom Waterfall</h1>
<details open class="box details_panel">
<summary class="details_panel_hed"><span><i class="icon_plus"></i> <span>Waterfall Settings</span></span></summary>
<form class="details_panel_content" name="urlEntry" action="javascript:UpdateWaterfall();" method="GET">
<form class="details_panel_content" id="details_form" action="javascript:updateWaterfall();" method="GET">
<fieldset>
<legend>Chart Type</legend>
<label><input type="radio" name="type" value="waterfall" checked>Waterfall</label>
<label><input type="radio" name="type" value="connection"> Connection View</label>
<label><input type="radio" name="type" value="connection">Connection View</label>
</fieldset>
<fieldset>
<legend>Chart Coloring</legend>
<label><input type="radio" name="coloring" value="classic"> Classic</label>
<label><input type="radio" name="coloring" value="mime" checked="checked"> By MIME Type</label>
<label><input type="radio" name="mime" value="0"> Classic</label>
<label><input type="radio" name="mime" value="1" checked="checked"> By MIME Type</label>
</fieldset>
<fieldset>
<label>Image Width <em>(Pixels, 300-2000)</em>: <input id="width" type="text" name="width" style="width:3em" value="930"></label>
<label>Image Width <em>(Pixels, 300-2000)</em>: <input id="width" type="text" name="width" style="width:3em" value="1012"></label>
<label>Maximum Time <em>(In seconds, leave blank for automatic)</em>: <input id="max" type="text" name="max" style="width:2em" value=""></label>
<label>Requests <em>(i.e. 1,2,3,4-9,8)</em>: <input id="requests" type="text" name="requests" value=""></label>
</fieldset>
<fieldset>
<legend>Show/Hide Extras</legend>
<label><input id="showUT" type="checkbox" checked>Lines for User Timing Marks</label>
<label><input id="showCPU" type="checkbox" checked>CPU Utilization</label>
<label><input id="showBW" type="checkbox" checked>Bandwidth Utilization</label>
<label><input id="showLT" type="checkbox" checked>Long tasks</label>
<label><input id="showDots" type="checkbox" checked>Ellipsis (...) for missing items</label>
<label><input id="showLabels" type="checkbox" checked>Labels for requests (URL)</label>
<label><input id="showChunks" type="checkbox" checked>Download chunks</label>
<label><input id="showJS" type="checkbox" checked>JS Execution chunks</label>
<label><input id="showWait" type="checkbox" checked>Wait Time</label>
<label><input id="ut" type="checkbox" checked>Lines for User Timing Marks</label>
<label><input id="cpu" type="checkbox" checked>CPU Utilization</label>
<label><input id="bw" type="checkbox" checked>Bandwidth Utilization</label>
<label><input id="lt" type="checkbox" checked>Long tasks</label>
<label><input id="dots" type="checkbox" checked>Ellipsis (...) for missing items</label>
<label><input id="labels" type="checkbox" checked>Labels for requests (URL)</label>
<label><input id="chunks" type="checkbox" checked>Download chunks</label>
<label><input id="js" type="checkbox" checked>JS Execution chunks</label>
<label><input id="wait" type="checkbox" checked>Wait Time</label>
</fieldset>
<button id="update" onclick="javascript:UpdateWaterfall();">Update Waterfall</button><br>
<a href="#" id="customized-permalink">Permalink to this waterfall page</a>
</form>
</details>
</div>
<div class="box">

<?php

$uri_params = [
'max' => '',
'width' => 1012,
'type' => 'waterfall',
'mime' => 1,
'ut' => 1,
'cpu' => 1,
'bw' => 1,
'lt' => 1,
'dots' => 1,
'labels' => 1,
'chunks' => 1,
'js' => 1,
'wait' => 1,
'requests' => '',
];
$server_params = [
'test' => $id,
'run' => $run,
'cached' => $cached,
'step' => $step,
];
$request_params = [];
foreach ($server_params as $key => $default) {
$request_params[$key] = $default;
if (array_key_exists($param, $_REQUEST)) {
$request_params[$param] = $_REQUEST[$param];
}
}
foreach ($uri_params as $key => $default) {
$request_params[$key] = $default;
if (array_key_exists($key, $_REQUEST)) {
$request_params[$key] = $_REQUEST[$key];
}
}
$query_string = http_build_query($request_params);
$waterfallSnippet = new WaterfallViewHtmlSnippet($testInfo, $testRunResults->getStepResult(1));
echo $waterfallSnippet->create(true, '&cpu=1&bw=1&lt=1&ut=1&mime=1&js=1&wait=1');
echo $waterfallSnippet->create(true, $query_string);

$extension = 'php';
if (FRIENDLY_URLS) {
$extension = 'png';
}
echo "<div class=\"waterfall-container\"><img id=\"waterfallImage\" style=\"display: block; margin-left: auto; margin-right: auto;\" alt=\"Waterfall\" src=\"/waterfall.$extension?test=$id&run=$run&cached=$cached&step=$step&cpu=1&bw=1&lt=1&ut=1&mime=1&js=1&wait=1\"></div>";
echo "<p class=\"customwaterfall_download\"><a class=\"pill\" download href=\"/waterfall.$extension?test=$id&run=$run&cached=$cached&step=$step&cpu=1&bw=1&lt=1&ut=1&mime=1&js=1&wait=1\">Download Waterfall Image</a></p>";
echo "<div class=\"waterfall-container\"><img id=\"waterfallImage\" style=\"display: block; margin-left: auto; margin-right: auto;\" alt=\"Waterfall\" src=\"/waterfall.$extension?$query_string\"></div>";
echo "<p class=\"customwaterfall_download\"><a id=\"waterfallImageLink\" class=\"pill\" download href=\"/waterfall.$extension?$query_string\">Download Waterfall Image</a></p>";

?>
</div>
<?php include('footer.inc'); ?>


<script>
$(document).ready(function() {

// handle when the selection changes for the location
$("input[name=type]").click(function() {
// disable the requests for connection view
var type = $('input[name=type]:checked').val();
if (type == 'connection')
$('#requests').attr("disabled", "disabled");
else
$('#requests').removeAttr("disabled");

UpdateWaterfall();
});
const details_form = document.getElementById('details_form');
const permalink = document.getElementById('customized-permalink');
permalink.href = location.origin + location.pathname + '?<?php echo $query_string; ?>';

const formInputs = ['<?php echo implode("', '", array_keys($uri_params));?>'];
const serverData = {
test: '<?php echo $id; ?>',
run: <?php echo (int)$run; ?>,
cached: <?php echo (int)$cached; ?>,
step: <?php echo (int)$step; ?>,
};
const requestParams = <?php echo json_encode($request_params); ?>;

formInputs.forEach(i => {
const inputElement = details_form[i];
if (inputElement.type === 'checkbox') {
inputElement.checked = requestParams[i] == 1;
} else {
inputElement.value = requestParams[i];
}
});
details_form.requests.disabled = details_form.type.value === 'connection';

// event isteners
details_form.addEventListener('input', updateWaterfall);
document.getElementById('waterfallImage').addEventListener('load', () => {
document.body.style.cursor = 'default';
});

$("input[name=coloring], input[type=checkbox]").click(UpdateWaterfall);
$("input[type=text]:not(#requests)").on("input", UpdateWaterfall);
$("input#requests").on("change", UpdateWaterfall);
function getFormParams() {
const params = {};
Object.keys(serverData).forEach(k => params[k] = serverData[k]);
formInputs.forEach(i => {
const inputElement = details_form[i];
if (inputElement.type === 'checkbox') {
params[i] = inputElement.checked === true ? 1 : 0;
} else {
params[i] = inputElement.value;
}
});
return params;
}

function updateWaterfall() {
document.body.style.cursor = 'wait';
details_form.requests.disabled = details_form.type.value === 'connection';

// reset the wait cursor when the image loads
$('#waterfallImage').load(function() {
$('body').css('cursor', 'default');
const params = getFormParams();
let search = '?';
Object.keys(params).forEach(param => {
search += param + '=' + encodeURIComponent(params[param]) + '&';
});
});

function UpdateWaterfall() {
$('body').css('cursor', 'wait');
var type = $('input[name=type]:checked').val();
var coloring = $('input[name=coloring]:checked').val();
var mime = 0;
if (coloring == 'mime')
mime = 1;
var width = $('#width').val();
var max = $('#max').val();
var requests = $('#requests').val();
var showUT = 0;
if ($('#showUT').attr('checked'))
showUT = 1;
var showCPU = 0;
if ($('#showCPU').attr('checked'))
showCPU = 1;
var showBW = 0;
if ($('#showBW').attr('checked'))
showBW = 1;
var showLT = 0;
if ($('#showLT').attr('checked'))
showLT = 1;
var showDots = 0;
if ($('#showDots').attr('checked'))
showDots = 1;
var showLabels = 0;
if ($('#showLabels').attr('checked'))
showLabels = 1;
var showChunks = 0;
if ($('#showChunks').attr('checked'))
showChunks = 1;
var showJS = 0;
if ($('#showJS').attr('checked'))
showJS = 1;
var showWait = 0;
if ($('#showWait').attr('checked'))
showWait = 1;
<?php
echo "var testId='$id';\n";
echo "var testRun='$run';\n";
echo "var cached='$cached';\n";
echo "var extension='$extension';\n";
echo "var step='$step';\n";
?>

var src = '/waterfall.' + extension + '?test=' + testId +
'&run=' + testRun +
'&cached=' + cached +
'&step=' + step +
'&max=' + max +
'&width=' + width +
'&type=' + type +
'&mime=' + mime +
'&ut=' + showUT +
'&cpu=' + showCPU +
'&bw=' + showBW +
'&lt=' + showLT +
'&dots=' + showDots +
'&labels=' + showLabels +
'&chunks=' + showChunks +
'&js=' + showJS +
'&wait=' + showWait +
'&requests=' + requests;
$('#waterfallImage').attr("src", src);
$('.customwaterfall_download a').attr("href", src);
const extension = '<?php echo $extension; ?>';
const src = '/waterfall.' + extension + search;
document.getElementById('waterfallImage').src = src;
document.getElementById('waterfallImageLink').href = src;
permalink.href = location.origin + location.pathname + search;
};
</script>
</body>
Expand Down