+
-
+ Select to Compare
Date/Time
From
Label
URL
+
';
- echo '';
+ echo ' ';
if( isset($guid) && $video && !( $url == "Bulk Test" || $url == "Multiple Locations test" ) ) {
echo " ";
if($repeat) {
echo " ";
}
}
- echo '';
+ echo ' ';
echo '';
if( $private )
echo '';
diff --git a/www/video/compare.php b/www/video/compare.php
index 6813318c4f..99c8be83cd 100644
--- a/www/video/compare.php
+++ b/www/video/compare.php
@@ -68,6 +68,12 @@
$labels .= htmlspecialchars($test['name']);
}
}
+
+ $stickyFilmstrip = true;
+ if( array_key_exists('filmstripScrollWithPage', $_GET) && strlen($_GET['filmstripScrollWithPage'])) {
+ $stickyFilmstrip = false;
+ }
+
if( strlen($labels) )
$title .= ' - ' . $labels;
?>
@@ -95,8 +101,8 @@
?>
- $error";
} elseif( $ready ) {
+ echo '';
+ echo '';
+ ?>
+
+
+ ';
DisplayGraphs();
+ echo '
';
+ echo '
';
} else {
DisplayStatus();
}
@@ -405,6 +447,7 @@ function UpdateScrollPosition() {
?>
var marker = parseInt(padLeft + ((position / width) * (1012 - padLeft)));
$('.waterfall_marker').css('left', marker + 'px');
+ $('.waterfall_marker').parent()[0].scrollTo( {left: marker - (viewable - 50) } )
}
UpdateScrollPosition();
@@ -432,7 +475,13 @@ function ScreenShotTable()
global $bgcolor;
global $supports60fps;
global $location;
+
$has_layout_shifts = false;
+
+
+
+
+
$endTime = 'visual';
if( array_key_exists('end', $_REQUEST) && strlen($_REQUEST['end']) )
$endTime = htmlspecialchars(trim($_REQUEST['end']));
@@ -455,51 +504,13 @@ function ScreenShotTable()
$end = $test['video']['end'];
}
- if (!defined('EMBED')) {
- echo ' ';
- }
+ // if (!defined('EMBED')) {
+ // echo ' ';
+ // }
echo '';
- // build a table with the labels
- echo ' ';
- foreach( $tests as &$test ) {
- // figure out the height of this video
- $height = 100;
- if( $test['video']['width'] && $test['video']['height'] ) {
- if( $test['video']['width'] > $test['video']['height'] ) {
- $height = 22 + (int)(((float)$thumbSize / (float)$test['video']['width']) * (float)$test['video']['height']);
- } else {
- $height = 22 + $thumbSize;
- }
- }
-
- $break = '';
- if( !strpos($test['name'], ' ') )
- $break = ' style="word-break: break-all;"';
- echo "";
-
- // Print the index outside of the link tag
- echo $test['index'] . ': ';
-
- if (!defined('EMBED')) {
- $urlGenerator = UrlGenerator::create(FRIENDLY_URLS, "", $test['id'], $test['run'], $test['cached'], $test['step']);
- $href = $urlGenerator->resultPage("details") . "#waterfall_view_step" . $test['step'];
- echo "" . WrapableString(htmlspecialchars($test['name'])) . ' ';
- } else {
- echo WrapableString(htmlspecialchars($test['name']));
- }
-
- // Print out a link to edit the test
- echo ' ';
- echo '';
- if (class_exists("SQLite3"))
- echo '(Edit)';
- echo ' ';
- echo " \n";
- }
- echo '
';
// the actual video frames
echo '';
@@ -517,6 +528,28 @@ function ScreenShotTable()
$firstFrame = 0;
$maxThumbWidth = 0;
foreach($tests as &$test) {
+ // first, let's print a run label row
+ echo " ";
+ // Print the index outside of the link tag
+ echo $test['index'] . ': ';
+
+ if (!defined('EMBED')) {
+ $urlGenerator = UrlGenerator::create(FRIENDLY_URLS, "", $test['id'], $test['run'], $test['cached'], $test['step']);
+ $href = $urlGenerator->resultPage("details") . "#waterfall_view_step" . $test['step'];
+ echo " " . WrapableString(htmlspecialchars($test['name'])) . ' ';
+ } else {
+ echo WrapableString(htmlspecialchars($test['name']));
+ }
+
+ // Print out a link to edit the test
+ echo ' ';
+ if (class_exists("SQLite3"))
+ echo '(Edit title)';
+ echo ' ';
+
+ echo " ";
+
+
$aft = (int)$test['aft'] / 100;
$hasStepResult = isset($test['stepResult']) && is_a($test['stepResult'], "TestStepResult");
$lcp = null;
@@ -592,6 +625,7 @@ function ScreenShotTable()
}
}
$maxThumbWidth = max($maxThumbWidth, $width);
+
echo "";
$testEnd = ceil($test['video']['end'] / $interval) * $interval;
@@ -676,7 +710,8 @@ function ScreenShotTable()
count($shift['rects']) &&
isset($shift['score']) &&
$shift['score'] > 0) {
- $has_layout_shifts = true;
+ $has_layout_shifts = true;
+
// Figure out the x,y,width,height as a fraction of the viewport (3 decimal places as an integer)
foreach($shift['rects'] as $rect) {
if (is_array($rect) && count($rect) == 4) {
@@ -782,205 +817,41 @@ function ScreenShotTable()
echo "
\n";
// end of the container table
- echo "
\n";
+ echo "
\n";?>
- echo '
-
+
@@ -1135,36 +1006,36 @@ function DisplayGraphs() {
}
if ($progress_end % 100)
$progress_end = intval((intval($progress_end / 100) + 1) * 100);
- echo '
';
+ echo '
';
}
if ($layout_shifts_end) {
if ($layout_shifts_end % 100)
$layout_shifts_end = intval((intval($layout_shifts_end / 100) + 1) * 100);
}
if (count($tests) <= 4) {
- echo '
';
+ echo '
';
if ($has_cls) {
- echo '
';
+ echo '
';
}
if ($layout_shifts_end) {
- echo '
';
+ echo '
';
}
- echo '
';
- echo '
';
+ echo '
';
+ echo '
';
} else {
foreach($timeMetrics as $metric => $label) {
$metricKey = str_replace('.', '', $metric);
- echo "
";
+ echo "
";
}
if ($has_cls) {
- echo '
';
+ echo '
';
}
if ($layout_shifts_end) {
- echo '
';
+ echo '
';
}
foreach($mimeTypes as $type) {
- echo "
";
- echo "
";
+ echo "
";
+ echo "
";
}
}
?>
@@ -1357,17 +1228,25 @@ function drawCharts() {
}
getMetric('LayoutShifts');
+ if (isset($layout_shifts) && is_array($layout_shifts) && count($layout_shifts)) {
+ $has_layout_shifts = true;
+ }
+}
+
+
+
+$has_lcp_rect = false;
+$lcp = null;
+if (isset($test['stepResult']) && is_a($test['stepResult'], "TestStepResult")) {
+ $lcp = $test['stepResult']->getMetric('chromeUserTiming.LargestContentfulPaint');
+}
+if (isset($lcp)) {
+ $lcp_time = $lcp;
+ $paint_events = $test['stepResult']->getMetric('largestPaints');
+ if (isset($paint_events) && is_array($paint_events) && count($paint_events)) {
+ foreach($paint_events as $paint) {
+ if (isset($paint['event']) &&
+ $paint['event'] == 'LargestContentfulPaint' &&
+ isset($paint['time']) &&
+ isset($paint['element']['boundingRect'])) {
+ if ($paint['time'] == $lcp) {
+ $has_lcp_rect = true;
+ }
+ }
+ }
+ }
+}
+
+echo '
+ Adjust Filmstrip Settings
+
+ ';
+
+
+ // START TIMELINE OPTIONS
+ if (!defined('EMBED')) {
+ ?>
+
+
+
+
";
+ echo ' Slow Motion ';
+ echo "
";
+ echo ""; ?>
+
+
+
+
Advanced Visual Comparison Configuration
+
There are additional customizations that can be done by modifying the tests parameter in the comparison URL directly.
+
URL structure: ...compare.php?tests=<Test 1 ID>,<Test 2 ID>...
+
The tests are displayed in the order listed and can be customized with options:
+
+
+
You can also customize the background and text color by passing HTML color values to bg and text query parameters.
+
Examples:
+
+ Customizing labels:
+ https://www.webpagetest.org/video/compare.php?tests=110606_MJ_RZEY-l:Original,110606_AE_RZN5-l:No+JS
+ Compare First vs. Repeat view:
+ https://www.webpagetest.org/video/compare.php?tests=110606_MJ_RZEY, 110606_MJ_RZEY-c:1
+ Second step of first run vs. Second step of second run:
+ https://www.webpagetest.org/video/compare.php?tests=110606_MJ_RZEY-r:1-s:2,110606_MJ_RZEY-r:2-s:2
+ White background with black text:
+ https://www.webpagetest.org/video/compare.php?tests=110606_MJ_RZEY, 110606_MJ_RZEY-c:1&bg=ffffff&text=000000
+
+
+
+
+ '; ?>
+
\ No newline at end of file
diff --git a/www/video/videotest.js b/www/video/videotest.js
index e30b49d859..34afff3eb2 100644
--- a/www/video/videotest.js
+++ b/www/video/videotest.js
@@ -1,26 +1,23 @@
-function ValidateInput(form)
-{
+function ValidateInput(form) {
return true;
}
-function AddUrl()
-{
+function AddUrl() {
var id = parseInt($("#nextid").val(), 10);
-
+
var html = "
";
$("#urls").append(html);
-
+
$("#nextid").val(id + 1);
-
+
return false;
}
-function RemoveUrl(id)
-{
+function RemoveUrl(id) {
$(id).remove();
return false;
-}
+}
\ No newline at end of file
diff --git a/www/video/view.php b/www/video/view.php
index e7976eb40f..00a31a9ad7 100644
--- a/www/video/view.php
+++ b/www/video/view.php
@@ -306,7 +306,7 @@ function ShowEmbed() {
}
- >
+
+
+
+
Video of page loading process
+
+
+
Web Vitals Details
-
>
';
// Trimmed waterfall
$label = $stepResult->readableIdentifier($testInfo->getUrl());
diff --git a/www/waterfall.css b/www/waterfall.css
deleted file mode 100644
index 276f640453..0000000000
--- a/www/waterfall.css
+++ /dev/null
@@ -1,306 +0,0 @@
-
-div.waterfall-container {position: relative; left: 0; top: 0; clear:both;text-align: left; width: 1012px; margin:auto;}
-img.waterfall-image {position: relative; left: 0; top: 0; width: 100%;}
-div.request-overlay {cursor:pointer; padding: 0; margin: 0; width: 1010px; left: 1px; background-color: #FFF; overflow: hidden; opacity:0.9; filter:alpha(opacity=90);}
-div.request-overlay.selected {opacity:0.4; mix-blend-mode: multiply; background-color: #1151bb;}
-div.request-overlay.lcp-request {opacity:0.4; mix-blend-mode: multiply; background-color: #008000;}
-div.transparent {opacity:0.0; filter:alpha(opacity=0);}
-div.dialog-title {display: inline;}
-div.dialog-title a {color: #fff;}
-div.request-dialog-radio {display:inline; padding-left: 20px; font-weight: normal; }
-.request-headers, .response-headers, .response-body, .request-raw-details, .experiment {display:none;}
-.request-details a {word-break: break-all;}
-.jqmWindow {display: none; position: fixed; top: 17%; left: 50%; margin-left: -300px; width: 600px; background-color: #dfdfdf; color: #333; border: 1px solid black; padding: 12px; }
-.jqmOverlay { background-color: #000; }
-div.jqDrag {cursor: move;}
-.jqResize {width: 100%; height: 3px; background: #dfdfdf; border-top: 1px solid #a3a3a3; border-bottom: 1px solid #a3a3a3; cursor: ns-resize;}
-div.jqmDialog {display: none; position: absolute; top: 17%; right: 20px; width: 800px; height: 500px;
- font-size: smaller; line-height: 1.5em;
- overflow: hidden; font-family:verdana,tahoma,helvetica;
- color: #000; background: #fff; border: 1px solid #000; text-align: left;}
-div.jqmDialog pre {font-size: medium; line-height: 1.25em;}
-div.jqmdTC { background: #303030; color: #000; height: 25px; padding: 7px 22px 5px 5px; font-family:"sans serif",verdana,tahoma,helvetica; font-weight: bold; zoom: 1; cursor: move;}
-div.jqmdBC { height: 450px; padding: 7px 7px 7px; overflow: auto;}
-div.jqmdX { position: absolute; right: 7px; top: 8px; padding: 0 0 0 16px; height: 16px; width: 0px; background: url(/images/dialog-close.png) no-repeat 0px -16px; overflow: hidden;}
-div.jqmdX:hover {background-position: 0px 0px;}
-div.jqmdBC button {margin: 8px 10px 4px 10px; color: #777; background-color: #fff; cursor: pointer; }
-
-/* Jquery UI */
-.ui-helper-hidden { display: none; }
-.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
-.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
-.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
-.ui-helper-clearfix:after { clear: both; }
-.ui-helper-clearfix { zoom: 1; }
-.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
-.ui-state-disabled { cursor: default !important; }
-.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
-.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
-.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
-.ui-widget .ui-widget { font-size: 1em; }
-.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
-.ui-widget-content { border: 1px solid #dddddd; background-color: #eeeeee; color: #333333; }
-.ui-widget-content a { color: #333333; }
-.ui-widget-header { border: 1px solid #e78f08; background-color: #f6a828; color: #ffffff; font-weight: bold; }
-.ui-widget-header a { color: #ffffff; }
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cccccc; background-color: #cccccc; font-weight: bold; color: #1c94c4; }
-.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; }
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hovers { border: 1px solid #cccccc; background-color: #f6f6f6; font-weight: bold; color: #c77405; }
-.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #C00; background-color: #ffffff; font-weight: bold; color: #c00; }
-.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; text-decoration: none; }
-.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; }
-.ui-widget :active { outline: none; }
-.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fed22f; background: #ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x; color: #363636; }
-.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
-.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; color: #ffffff; }
-.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; }
-.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; }
-.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
-.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
-.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
-.ui-icon { width: 16px; height: 16px; background-image: url(/images/ui-icons_222222_256x240.png); }
-.ui-widget-content .ui-icon {background-image: url(/images/ui-icons_222222_256x240.png); }
-.ui-widget-header .ui-icon {background-image: url(/images/ui-icons_ffffff_256x240.png); }
-.ui-state-default .ui-icon { background-image: url(/images/ui-icons_ef8c08_256x240.png); }
-.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(/images/ui-icons_ef8c08_256x240.png); }
-.ui-state-active .ui-icon {background-image: url(/images/ui-icons_ef8c08_256x240.png); }
-.ui-state-highlight .ui-icon {background-image: url(/images/ui-icons_228ef1_256x240.png); }
-.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(/images/ui-icons_ffd27a_256x240.png); }
-
-/* jQuery UI Button 1.8.17
- *
- * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- *
- * http://docs.jquery.com/UI/Button#theming
- */
-.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
-.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
-button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
-.ui-button-icons-only { width: 3.4em; }
-button.ui-button-icons-only { width: 3.7em; }
-.ui-button .ui-button-text { display: block; line-height: 1.1; }
-.ui-button-text-only .ui-button-text { padding: 2px 5px; }
-.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
-.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
-.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
-.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
-input.ui-button { padding: .4em 1em; }
-.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
-.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
-.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
-.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
-.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
-.ui-buttonset { margin-right: 7px; }
-.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
-button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
-.ui-slider { position: relative; text-align: left; }
-.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
-.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
-.ui-slider-horizontal { height: .8em; }
-.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
-.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
-.ui-slider-horizontal .ui-slider-range-min { left: 0; }
-.ui-slider-horizontal .ui-slider-range-max { right: 0; }
-.ui-slider-vertical { width: .8em; height: 100px; }
-.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
-.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
-.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
-.ui-slider-vertical .ui-slider-range-max { top: 0; }
-div.bar {
- height:20px;
- margin-top:auto;
- margin-bottom:auto;
-}
-
-#experimentSettings{
- position: fixed;
- bottom: 1.5em;
- left: 1.5em;
- background: #121D35;
- max-width: 25em;
- color: #fff;
- padding: 1em;
- border-radius: 3px;
- font-size: .9em;
- box-shadow: 0px 6.4px 14.4px rgb(0 0 0 / 13%), 0px 1.2px 3.6px rgb(0 0 0 / 11%);
-}
-#experimentSettings.inactive{
- display: none;
-}
-#experimentSettings h2{
- font-size: 1em;
-}
-#experimentSettings ul + h2{
- margin-top: 2em;
-}
-#experimentSettings li{
- word-break: break-word;
- font-size: .9em;
-}
-#experimentSettings button{
- border: 0;
- border-radius: 4px;
- padding: 0.6875em 2.625em;
- background: #F9D856;
- font-size: 1em;
- cursor: pointer;
- color: #111;
- text-decoration: none;
-
-}
-#experimentForm{
- margin-top: 2em;
-}
-#experimentSettings a[data-remove-field]{
- color: #fff;
- text-decoration: none;
- font-weight: bold;
- margin-right: 1em;
- display: inline-block;
-}
-#experimentSettings .remove-block:hover{
- text-decoration: underline;
-}
-.experiments{
- margin-bottom: 2em;
-}
-#experimentSettings label{
- display: block;
- font-weight: bold;
-}
-#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;
- }
-}
\ No newline at end of file
diff --git a/www/waterfall.inc b/www/waterfall.inc
index ec3f242332..3472391857 100644
--- a/www/waterfall.inc
+++ b/www/waterfall.inc
@@ -1552,20 +1552,22 @@ EOT;
function InsertMultiWaterfall(&$waterfalls, $waterfall_options) {
require_once('./object_detail.inc');
$opacity = number_format(1.0 / count($waterfalls), 2, '.', '');
- echo '
';
- echo 'Waterfall Opacity (adjust sliders to adjust the transparency of the given waterfall):
';
- echo '
';
+ echo '
';
echo '
';
$row_count = 0;
@@ -1586,18 +1588,18 @@ function InsertMultiWaterfall(&$waterfalls, $waterfall_options) {
$data_header_height = intval($row_height * 3 / 2);
$data_footer_height = $row_height * 3;
$height = ($data_header_height + ($row_height * $row_count) +
- $data_footer_height + 2) + 100;
+ $data_footer_height + 2) + 150;
$height += (2 * $row_height) + 2;
$height_style = "height:{$height}px;";
}
- echo "
";
+ echo "
";
foreach($waterfalls as $index => &$waterfall) {
$o = $index ? $opacity : '1.0';
$waterfallUrl = "/waterfall.php?test={$waterfall['id']}&run={$waterfall['run']}&cached={$waterfall['cached']}&step={$waterfall['step']}&rowcount=$row_count$waterfall_options";
echo "
";
}
echo '
';
- echo '
';
+ echo '
';
}
function LoadPcapSlices($slices_file, $max_bw) {