Skip to content

1452: Clean up custom waterfall settings form #1535

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

Merged
tkadlec merged 5 commits into from
Sep 16, 2021
Merged

1452: Clean up custom waterfall settings form #1535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1a9dc99
wider viewport overlay styles. just one idea for the custom waterfall…
scottjehl Sep 15, 2021
301aca1
iterate on overlay. now settings are a toggle that collapses into a b…
scottjehl Sep 15, 2021
69f7d4f
set event listeners to update all fields on input/change. update styl…
scottjehl Sep 16, 2021
2fbef46
update the pill class to include a text color so it can be used outsi…
scottjehl Sep 16, 2021
da30d0f
gosh. I don't like this edit but Safari doesn't seem to want to apply…
scottjehl Sep 16, 2021
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
2 changes: 1 addition & 1 deletion www/common.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ if (!$privateInstall) {

// constants
define('VER_WEBPAGETEST', '21.07'); // webpagetest version
define('VER_CSS', 142); // version of the sitewide css file
define('VER_CSS', 143); // version of the sitewide css file
define('VER_JS', 40); // version of the sitewide javascript file
define('VER_JS_TEST', 47); // version of the javascript specific to the test pages
define('VER_JS_RUNNING', 1); // version of the javascript specific to the test running status page
Expand Down
78 changes: 44 additions & 34 deletions www/customWaterfall.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,11 @@
<?php $gaTemplate = 'Custom Waterfall'; include ('head.inc'); ?>
<style>
div.bar {
height:20px;
margin-top:auto;
margin-bottom:auto;
}
height:20px;
margin-top:auto;
margin-bottom:auto;
}

<?php include "waterfall.css";?>
</style>
</head>
Expand All @@ -38,28 +39,40 @@
$tab = null;
include 'header.inc';
?>
<h1>Generate a Custom Waterfall</h1>
<div class="box">
<form name="urlEntry" action="javascript:UpdateWaterfall();" method="GET">
Chart Type:
<label><input type="radio" name="type" value="waterfall" checked="checked">Waterfall</label>
&nbsp; <label><input type="radio" name="type" value="connection"> Connection View</label><br>
Chart Coloring:
<label><input type="radio" name="coloring" value="classic"> Classic</label>
&nbsp; <label><input type="radio" name="coloring" value="mime" checked="checked"> By MIME Type</label><br>
<label>Image Width: <input id="width" type="text" name="width" style="width:3em" value="930"> Pixels (300-2000)</label><br>
<label>Maximum Time: <input id="max" type="text" name="max" style="width:2em" value=""> Seconds (leave blank for automatic)</label><br>
<label>Requests (i.e. 1,2,3,4-9,8): <input id="requests" type="text" name="requests" style="width:20em" value=""></label>
<button id="update" onclick="javascript:UpdateWaterfall();">Update Waterfall</button><br>
<label><input id="showUT" type="checkbox" checked> Draw lines for User Timing Marks</label>
<label><input id="showCPU" type="checkbox" checked> Show CPU Utilization</label>
<label><input id="showBW" type="checkbox" checked> Show Bandwidth Utilization</label> <br>
<label><input id="showDots" type="checkbox" checked> Show Ellipsis (...) for missing items</label>
<label><input id="showLabels" type="checkbox" checked> Show Labels for requests (URL)</label>
<label><input id="showChunks" type="checkbox" checked> Show download chunks</label>
<label><input id="showJS" type="checkbox" checked> Show JS Execution chunks</label>
<label><input id="showWait" type="checkbox" checked> Show Wait Time</label>
</form>
<div class="customwaterfall_hed">
<h1>Generate a Custom Waterfall</h1>
<details open class="box customwaterfall_settings">
<summary id="customwaterfall_settings_title" class="customwaterfall_settings_hed"><span><i class="icon_plus"></i> <span>Waterfall Settings</span></span></summary>
<form aria-labelledby="customwaterfall_settings_title" name="urlEntry" 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>
</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>
</fieldset>
<fieldset>
<label>Image Width <em>(Pixels, 300-2000)</em>: <input id="width" type="text" name="width" style="width:3em" value="930"></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="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>
</fieldset>
<button id="update" onclick="javascript:UpdateWaterfall();">Update Waterfall</button><br>
</form>
</details>
</div>
<div class="box">

Expand All @@ -72,7 +85,9 @@
if( FRIENDLY_URLS )
$extension = 'png';
echo "<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&ut=1&mime=1&js=1&wait=1\">";
?>
echo "<p class=\"customwaterfall_download\"><a class=\"pill\" download href=\"/waterfall.$extension?test=$id&run=$run&cached=$cached&step=$step&cpu=1&bw=1&ut=1&mime=1&js=1&wait=1\">Download Waterfall Image</a></p>";

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

Expand All @@ -92,13 +107,8 @@
UpdateWaterfall();
});

$("input[name=coloring]").click(function(){
UpdateWaterfall();
});

$("input[type=checkbox]").click(function(){
UpdateWaterfall();
});
$("input[name=coloring], input[type=checkbox]").click( UpdateWaterfall );
$("input[type=text]").on( "input", UpdateWaterfall );

// reset the wait cursor when the image loads
$('#waterfallImage').load(function(){
Expand Down
1 change: 1 addition & 0 deletions www/pagestyle2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ a.pill{
padding: 0.6875em 1.4375em;
line-height: 1em;
text-decoration: none;
color: #fff;
}
.home a {color: #fff;}
img {border: none;}
Expand Down
131 changes: 131 additions & 0 deletions www/waterfall.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,4 +172,135 @@ div.bar {
}
#experimentSettings input[type="text"] {
margin-bottom: 1em;
}

/* custom waterfall settings */
.customwaterfall_settings_hed {
font-size: .9rem;
font-weight: bold;
cursor: pointer;
}
.customwaterfall_settings[open] .customwaterfall_settings_hed {
border-bottom: 1px solid rgba(255,255,255,.2);
margin: 0 0 .8rem;
padding: 0 0 .8em;
}
.customwaterfall_settings fieldset {
border: 0;
padding: .3rem 0 0;
margin: 0 0 1rem;
}
.customwaterfall_settings legend {
font-weight: bold;
margin: 0;
display: block;
padding: 0;
}
.customwaterfall_settings label,
.customwaterfall_settings label input[type=text] {
display: block;
margin-bottom: .5rem;
}
.customwaterfall_settings label input[type=text] {
margin: .2rem 0 1rem;
}
.customwaterfall_settings label em {
font-size: .8em;
}
.customwaterfall_settings label {
margin: .3rem 0 .5rem;
line-height: 1.2
}
.customwaterfall_settings button {
display: none; /* necessary button? does non-js work anyway? */
}
.customwaterfall_settings_hed {
list-style-type: none;
}
.customwaterfall_settings_hed::-webkit-details-marker {
display: none;
}
.customwaterfall_settings_hed > span {
position: relative;
display: flex;
gap: .5rem;
}
.customwaterfall_settings_hed .icon_plus {
background: rgba(255,255,255,1);
border-radius: 100%;
display: inline-block;
width: 1.3em;
height: 1.3em;
position: relative;
}
.customwaterfall_settings_hed .icon_plus:before {
content: '';
position: absolute;
top: 50%;
margin-top: -.1rem;
left: 25%;
right: 25%;
height: .2em;
background: #555;
}
.customwaterfall_settings_hed .icon_plus:after {
content: '';
position: absolute;
left: 50%;
margin-left: -.1rem;
top: 25%;
bottom: 25%;
width: .2em;
background: #555;
}
.customwaterfall_settings[open] > .customwaterfall_settings_hed .icon_plus {
transform: rotate(45deg);
position: absolute;
right: 0;
}
.customwaterfall_download {
margin: 3rem 0;
}
/* at 60em and up, the settings are displayed as a fixed panel */
@media (min-width: 60em) {
.customwaterfall_hed {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.customwaterfall_settings {
padding: 1rem 1.5rem;
transition: all .5s ease-out;
border: 1px solid transparent;
box-shadow: none;
background: transparent;
margin: 0;
font-size: .9rem;
}
.customwaterfall_settings:hover,
.customwaterfall_settings:focus-within {
border: 1px solid #2F80ED;
box-shadow: 0 0 30px rgb(47 128 237 / 50%);
}
.customwaterfall_settings:focus-within summary:focus {
outline: none;
}
.customwaterfall_settings[open] {
border: 1px solid #2F80ED;
box-shadow: 0 0 30px rgb(47 128 237 / 50%);
background: rgba(18, 29, 53, .9);
color: #fff;
min-height: 20rem;
position: fixed;
z-index: 999;
right: 2vw;
top: auto;
width: 20vw;
max-width: 20rem;
}
.customwaterfall_settings form {
overflow: auto;
max-height: 65vh;
min-height: 20rem;
}
}