diff --git a/www/about.php b/www/about.php index 1ea54e0178..471832c44a 100644 --- a/www/about.php +++ b/www/about.php @@ -14,9 +14,7 @@ - + > @@ -24,6 +22,7 @@ $tab = 'About'; include 'header.inc'; ?> +

About WebPageTest

Building high quality web experiences for users is at the core of all our efforts. With WebPageTest, @@ -52,6 +51,7 @@ contact us. If you are considering sending advertising opportunities, SEO/SEM solicitations, link sharing, etc....don't. We won't respond and will mark it as spam.

+
diff --git a/www/breakdown.php b/www/breakdown.php index 5c09192126..c9ef4dc692 100644 --- a/www/breakdown.php +++ b/www/breakdown.php @@ -29,63 +29,6 @@ WebPageTest Content Breakdown<?php echo $testLabel; ?> - > \n
\n"; } ?> -

Content breakdown by MIME type (First View)

+

Content breakdown by MIME type (First View)




-

Content breakdown by MIME type (Repeat View)

+

Content breakdown by MIME type (Repeat View)

WebPageTest Content Breakdown<?php echo $testLabel; ?> - + > - - - - - - - - - - - - - - - - - - - - - - - -
-

Main-thread processing breakdown

- Where the browser's main thread was busy, not including idle time waiting for resources Main-thread processing breakdown +

Where the browser's main thread was busy, not including idle time waiting for resources view timeline)"; - ?>. -

-
-
-
-
-
-
-
-
-

Main-thread time breakdown

- All of the main-thread activity including idle (waiting for resources usually) .

+ +
+
+
+
+
+
+
+
+
+
+ +

Main-thread time breakdown

+

All of the main-thread activity including idle (waiting for resources usually) view timeline)"; - ?>. -

-
-
-
-
-
-
-
-
+ ?>.

+ + +
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/www/common.inc b/www/common.inc index 884561b8c5..991ef6adc1 100644 --- a/www/common.inc +++ b/www/common.inc @@ -149,7 +149,7 @@ if (!$privateInstall) { // constants define('VER_WEBPAGETEST', '21.07'); // webpagetest version -define('VER_CSS', 150); // version of the sitewide css file +define('VER_CSS', 153.1); // 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 diff --git a/www/css/accordion.css b/www/css/accordion.css deleted file mode 100644 index e9a20ac6a0..0000000000 --- a/www/css/accordion.css +++ /dev/null @@ -1,62 +0,0 @@ -#quicklinks_table { - margin: 0 auto; - line-height: 1.5em; - border-collapse: collapse; -} -#quicklinks_table tr.even { - background: whitesmoke; -} -#quicklinks_table td, #quicklinks_table th { - border: 1px silver solid; - padding: 0.5em; -} -#quicklinks_table th { - font-weight: bold; - background: gainsboro; -} - -#back_to_top { - background:white; - position: fixed; - bottom:1em; - left:50%; - margin-left: 510px; /* 980px/2+20 */ - padding:1em; - display: none; -} - -.snippet_container { - display: none; - margin: 1em 0; -} -.snippet_container_requestHeaders { - text-align: left; - overflow: auto; - padding: 0 1em; -} -.accordion_block { - border: 1px solid #aaa; - border-radius: 5px; - width:930px; -} -.accordion_opener { - text-align: center; - cursor: pointer; - display: block; - padding: 0.2em; - background: no-repeat 10px 50% transparent; - font-size: 1.5em; - line-height: 1em; -} -.accordion_opener.jkActive { - background-color: whitesmoke; -} -.accordion_closed { - background-image: url(/images/accordion_closed.png); -} -.accordion_opened { - background-image: url(/images/accordion_opened.png); -} -.accordion_loading { - background-image: url(/images/activity_indicator.gif); -} \ No newline at end of file diff --git a/www/customWaterfall.php b/www/customWaterfall.php index fda52ef8cd..af82474b88 100644 --- a/www/customWaterfall.php +++ b/www/customWaterfall.php @@ -24,26 +24,17 @@ WebPageTest Custom Waterfall<?php echo $testLabel; ?> - - > + >

Generate a Custom Waterfall

-
- Waterfall Settings -
+
+ Waterfall Settings +
Chart Type @@ -84,7 +75,7 @@ $extension = 'php'; if( FRIENDLY_URLS ) $extension = 'png'; - echo "\"Waterfall\""; + echo "
\"Waterfall\"
"; echo "

Download Waterfall Image

"; ?> @@ -108,7 +99,9 @@ }); $("input[name=coloring], input[type=checkbox]").click( UpdateWaterfall ); - $("input[type=text]").on( "input", UpdateWaterfall ); + $("input[type=text]:not(#requests)").on( "input", UpdateWaterfall ); + $("input#requests").on( "change", UpdateWaterfall ); + // reset the wait cursor when the image loads $('#waterfallImage').load(function(){ diff --git a/www/custom_browsers.php b/www/custom_browsers.php index 2a99805855..ec3923112e 100644 --- a/www/custom_browsers.php +++ b/www/custom_browsers.php @@ -77,15 +77,6 @@ - >
diff --git a/www/custom_metrics.php b/www/custom_metrics.php index ca919c6f0b..26f1aea3fc 100644 --- a/www/custom_metrics.php +++ b/www/custom_metrics.php @@ -14,15 +14,8 @@ - - > + > Custom Metrics'; - echo ''; + echo '
'; foreach ($pageData[$run][$cached]['custom'] as $metric) { if (array_key_exists($metric, $pageData[$run][$cached])) { echo ''; } } - echo '
' . htmlspecialchars($metric) . ''; @@ -52,7 +45,7 @@ echo '
'; + echo '
'; } else { echo '

No custom metrics reported

'; } diff --git a/www/details.php b/www/details.php index e9eba8bc59..391ef010a5 100644 --- a/www/details.php +++ b/www/details.php @@ -60,94 +60,6 @@ function createForm($formName, $btnText, $callback, $id, $owner, $secret, $siteK - > create(); if (isset($testRunResults)) { + echo '
'; require_once(__DIR__ . '/include/CrUX.php'); if ($cached) { InsertCruxHTML(null, $testRunResults); } else { InsertCruxHTML($testRunResults, null); } + echo '
'; } ?> + + +
+

Individual Runs

+ + + - > + createUrlGenerator("", FRIENDLY_URLS); echo "getStepNumber() . "\">"; - echo "

" . $testStepResult->readableIdentifier() . "

"; + echo "

" . $testStepResult->readableIdentifier() . "

"; echo "
"; if ($fileHandler->dirExists($localPaths->videoDir())) { @@ -182,7 +182,7 @@ function printStep($fileHandler, $testInfo, $testStepResult, $useQuicklinks) { if ($screenShotUrl) { echo '

Fully Loaded

'; echo ''; - echo 'Screenshot'; + echo 'Screenshot'; echo ''; } @@ -201,21 +201,21 @@ function printStep($fileHandler, $testInfo, $testStepResult, $useQuicklinks) { if (isset($pageRunData) && isset($pageRunData['render'])) echo ' (' . number_format($pageRunData['render'] / 1000.0, 3) . ' sec)'; echo ''; - echo 'Start Render Screenshot'; + echo 'Start Render Screenshot'; } if ($fileHandler->fileExists($localPaths->additionalScreenShotFile("dom"))) { echo '

DOM Element'; if (isset($pageRunData) && isset($pageRunData['domTime'])) echo ' (' . number_format($pageRunData['domTime'] / 1000.0, 3) . ' sec)'; echo '

'; - echo 'DOM Element Screenshot'; + echo 'DOM Element Screenshot'; } if ($fileHandler->fileExists($localPaths->additionalScreenShotFile("doc"))) { echo '

Document Complete'; if (isset($pageRunData) && isset($pageRunData['docTime'])) echo ' (' . number_format($pageRunData['docTime'] / 1000.0, 3) . ' sec)'; echo '

'; - echo 'Document Complete Screenshot'; + echo 'Document Complete Screenshot'; } if ($fileHandler->fileExists($localPaths->aftDiagnosticImageFile())) { echo '

AFT Details'; @@ -223,11 +223,11 @@ function printStep($fileHandler, $testInfo, $testStepResult, $useQuicklinks) { echo ' (' . number_format($pageRunData['aft'] / 1000.0, 3) . ' sec)'; echo '

'; echo 'White = Stabilized Early, Blue = Dynamic, Red = Late Static (failed AFT), Green = AFT
'; - echo 'AFT Diagnostic image'; + echo 'AFT Diagnostic image'; } if ($fileHandler->fileExists($localPaths->additionalScreenShotFile("responsive"))) { echo '

Responsive Site Check

'; - echo 'Responsive Site Check image'; + echo 'Responsive Site Check image'; } // display all of the status messages @@ -247,7 +247,7 @@ function printStep($fileHandler, $testInfo, $testStepResult, $useQuicklinks) { $console_log = $testStepResult->getConsoleLog(); if (isset($console_log) && count($console_log)) { echo "\n

Console Log

\n"; - echo "\n"; + echo "
SourceLevelMessageURLLine
\n"; foreach ($console_log as &$log_entry) { $row++; $rowClass = ''; @@ -260,7 +260,7 @@ function printStep($fileHandler, $testInfo, $testStepResult, $useQuicklinks) { "\">" . htmlspecialchars($log_entry['url']) . "\n"; } - echo "
SourceLevelMessageURLLine
" . htmlspecialchars($log_entry['line']) . "
\n"; + echo "
\n"; } } diff --git a/www/terms.php b/www/terms.php index 8bb7befdc0..a3c1aaba4d 100644 --- a/www/terms.php +++ b/www/terms.php @@ -23,7 +23,7 @@ - > + WebPageTest - Test Log @@ -118,25 +118,30 @@ function check_it($val) { $tab = 'Test History'; include 'header.inc'; ?> +

Test History

-
+

Test history is available for up to 30 days as long as your storage isn’t cleared. By registering for a free account, you can keep test history for longer, compare tests, and review changes. Additionally, you will also be able to post on the WebPageTest Forum and contribute to the discussions there about features, test results and more.

Get Free Access
- +
+ - +
+ +
- +
- +
+
- + @@ -144,6 +149,7 @@ function check_it($val) {
CompareSelect to compare URL Run Date Run From
+
WebPageTest - Test Log -
- - + +
+ - + Label + '; - echo ''; echo '
Select to Compare Date/Time From URL
'; + echo ''; if( isset($guid) && $video && !( $url == "Bulk Test" || $url == "Multiple Locations test" ) ) { echo ""; if($repeat) { 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 '
'; + echo '
'; + if (count($tests) > 1 ) { + echo '

Filmstrip Comparison

'; + } + else { + echo '

Filmstrip View

'; + } + if (isset($location) && strlen($location)) { - echo "
Tested From: $location
"; + echo "

Tested From: $location

"; + } + //build out an expanded link if ($testResults->countRuns() > 1 && count($tests) == 1) { $link = '/video/compare.php?tests='; @@ -371,8 +381,40 @@ } while ($cnt <= $testResults->countRuns()); echo 'Compare all runs'; } + + echo '
'; + + echo '
'; + include 'video/filmstrip_settings.php'; + + + echo '
'; + + echo '
+

Filmstrip key:

+
    '; + if (isset($_REQUEST['highlightCLS']) && $_REQUEST['highlightCLS']) {?> +
  • * Shift impacts LCP Score
  • + Visual change +
  • Visual change + Layout Shift
  • +
  • Largest Contentful Paint
  • +
  • Largest Contentful Paint + Layout Shift
  • +
+
+
'; + ?> + + + '; 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 ''; // the actual video frames 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 '
 
'; @@ -517,6 +528,28 @@ function ScreenShotTable() $firstFrame = 0; $maxThumbWidth = 0; foreach($tests as &$test) { + // first, let's print a run label row + 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 "
"; + // 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 "
\n"; // end of the container table - echo "
\n"; + echo "
\n";?> - echo ''; - echo ""; - echo ''; - echo ""; - echo ""; - if (isset($_REQUEST['labelHeight']) && is_numeric($_REQUEST['labelHeight'])) - echo '"'; - if (isset($_REQUEST['timeHeight']) && is_numeric($_REQUEST['timeHeight'])) - echo '"'; - if (isset($location) && strlen($location)) { - echo ''; - } - echo '
'; - ?> -
    - -
  • *Layout shift occurs in the maximum shift window
  • - -
  • A visual change occurred in the frame.
  • -
  • Largest Contentful Paint occurred in the frame.
  • -
  • A visual change and a Layout Shift occurred in the frame.
  • -
  • Largest Contentful Paint and a Layout Shift occurred in the frame.
  • -
- "; - echo "Export filmstrip as an image..."; - echo "
"; - echo '


'; - echo ""; - echo '

Advanced customization options...'; - echo "
"; - if (!defined('EMBED')) { - ?> -
-
-
- \n"; - ?> -
-
- Filmstrip Options - "; - echo "
"; - } - if ($has_lcp_rect) { - $checked = ''; - if( isset($_REQUEST['highlightLCP']) && $_REQUEST['highlightLCP'] ) - $checked = ' checked=checked'; - echo ""; - echo "
"; - } - - $checked = ''; - if( isset($_REQUEST['sticky']) && $_REQUEST['sticky'] ) - $checked = ' checked=checked'; - echo ""; - echo ""; - - ?> -
- "; - echo "Thumbnail Size"; - $checked = ''; - if( $thumbSize <= 100 ) - $checked = ' checked=checked'; - echo "
"; - $checked = ''; - if( $thumbSize <= 150 && $thumbSize > 100 ) - $checked = ' checked=checked'; - echo "
"; - $checked = ''; - if( $thumbSize <= 200 && $thumbSize > 150 ) - $checked = ' checked=checked'; - echo "
"; - $checked = ''; - if( $thumbSize > 200) - $checked = ' checked=checked'; - echo " "; - echo "
"; - - // fill in the interval selection - echo "
"; - echo "Thumbnail Interval"; - if ($supports60fps) { - $checked = ''; - if( $interval < 100 ) - $checked = ' checked=checked'; - echo "
"; - } - $checked = ''; - if( ($supports60fps && $interval == 100) || (!$supports60fps && $interval < 500) ) - $checked = ' checked=checked'; - echo "
"; - $checked = ''; - if( $interval == 500 ) - $checked = ' checked=checked'; - echo "
"; - $checked = ''; - if( $interval == 1000 ) - $checked = ' checked=checked'; - echo "
"; - $checked = ''; - if( $interval > 1000 ) - $checked = ' checked=checked'; - echo "
"; - echo "
"; +
- // fill in the endpoint selection - echo "
"; - echo "Comparison Endpoint"; - if( !strcasecmp($endTime, 'aft') ) - $endTime = 'visual'; - $checked = ''; - if( !strcasecmp($endTime, 'visual') ) - $checked = ' checked=checked'; - echo "
"; - $checked = ''; - if( !strcasecmp($endTime, 'all') ) - $checked = ' checked=checked'; - echo "
"; - $checked = ''; - if( !strcasecmp($endTime, 'doc') ) - $checked = ' checked=checked'; - echo "
"; - $checked = ''; - if( !strcasecmp($endTime, 'full') ) - $checked = ' checked=checked'; - echo "
"; - echo "
"; - ?> -
- -
- getRequestsWithInfo(true, true)->getRequests(); - echo CreateWaterfallHtml('', $requests, $tests[0]['id'], $tests[0]['run'], $tests[0]['cached'], $stepResult->getRawResults(), - "&max=$end_seconds&mime=1&state=1&cpu=1&bw=1", $tests[0]['step']); - echo '

'; - } else { - $waterfalls = array(); - foreach ($tests as &$test) { - $waterfalls[] = array('id' => $test['id'], - 'label' => htmlspecialchars($test['name']), - 'run' => $test['run'], - 'step' => $test['step'], - 'cached' => $test['cached']); - } - $labels=''; - if (array_key_exists('hideurls', $_REQUEST) && $_REQUEST['hideurls']) - $labels = '&labels=0'; - InsertMultiWaterfall($waterfalls, "&max=$end_seconds&mime=1&state=1&cpu=1&bw=1$labels"); - } + getRequestsWithInfo(true, true)->getRequests(); + echo CreateWaterfallHtml('', $requests, $tests[0]['id'], $tests[0]['run'], $tests[0]['cached'], $stepResult->getRawResults(), + "&max=$end_seconds&mime=1&state=1&cpu=1&bw=1", $tests[0]['step']); + // echo '

'; + } else { + $waterfalls = array(); + foreach ($tests as &$test) { + $waterfalls[] = array('id' => $test['id'], + 'label' => htmlspecialchars($test['name']), + 'run' => $test['run'], + 'step' => $test['step'], + 'cached' => $test['cached']); + } + $labels=''; + if (array_key_exists('hideurls', $_REQUEST) && $_REQUEST['hideurls']) + $labels = '&labels=0'; + InsertMultiWaterfall($waterfalls, "&max=$end_seconds&mime=1&state=1&cpu=1&bw=1$labels"); + } ?> - + + + @@ -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')) { + ?> + +
+ \n"; + ?> +
+ Filmstrip Options + Highlight Layout Shifts"; + } + if ($has_lcp_rect) { + $checked = ''; + if( isset($_REQUEST['highlightLCP']) && $_REQUEST['highlightLCP'] ){ + $checked = ' checked=checked'; + } + echo ""; + } + + $checked = ''; + if( !$stickyFilmstrip ){ + $checked = ' checked=checked'; + } + echo ""; + + ?> +
+ "; + echo "Thumbnail Size"; + $checked = ''; + if( $thumbSize <= 100 ) + $checked = ' checked=checked'; + echo ""; + $checked = ''; + if( $thumbSize <= 150 && $thumbSize > 100 ) + $checked = ' checked=checked'; + echo ""; + $checked = ''; + if( $thumbSize <= 200 && $thumbSize > 150 ) + $checked = ' checked=checked'; + echo ""; + $checked = ''; + if( $thumbSize > 200) + $checked = ' checked=checked'; + echo ""; + echo ""; + + // fill in the interval selection + echo "
"; + echo "Thumbnail Interval"; + if ($supports60fps) { + $checked = ''; + if( $interval < 100 ) + $checked = ' checked=checked'; + echo ""; + } + $checked = ''; + if( ($supports60fps && $interval == 100) || (!$supports60fps && $interval < 500) ) + $checked = ' checked=checked'; + echo ""; + $checked = ''; + if( $interval == 500 ) + $checked = ' checked=checked'; + echo ""; + $checked = ''; + if( $interval == 1000 ) + $checked = ' checked=checked'; + echo ""; + $checked = ''; + if( $interval > 1000 ) + $checked = ' checked=checked'; + echo ""; + echo "
"; + + // fill in the endpoint selection + echo "
"; + echo "Comparison Endpoint"; + if( !strcasecmp($endTime, 'aft') ) + $endTime = 'visual'; + $checked = ''; + if( !strcasecmp($endTime, 'visual') ) + $checked = ' checked=checked'; + echo ""; + $checked = ''; + if( !strcasecmp($endTime, 'all') ) + $checked = ' checked=checked'; + echo ""; + $checked = ''; + if( !strcasecmp($endTime, 'doc') ) + $checked = ' checked=checked'; + echo ""; + $checked = ''; + if( !strcasecmp($endTime, 'full') ) + $checked = ' checked=checked'; + echo ""; + echo "
"; + ?> + Advanced options... + +
+ +
+ "; + echo ''; + echo ""; + echo ""; + if (isset($_REQUEST['labelHeight']) && is_numeric($_REQUEST['labelHeight'])) + echo '"'; + if (isset($_REQUEST['timeHeight']) && is_numeric($_REQUEST['timeHeight'])) + echo '"'; + if (isset($location) && strlen($location)) { + echo ''; + } + + echo "Download filmstrip image..."; + // echo "
"; + echo '
'; + echo "
"; + echo ""; ?> + + + + +
'; ?> + \ 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 = "
"; - html += "Label "; - html += "URL "; + html += " "; + html += " "; html += "Remove"; 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<?php echo $testLabel; ?> - >
-

Google Web Vitals Diagnostic Information

+

Google Web Vitals Diagnostic Information

LCP Event Summary'; echo '

See full details

'; - echo ''; + echo '
'; echo ""; echo ""; echo ""; @@ -529,7 +386,7 @@ function InsertWebVitalsHTML_LCP($stepResult) { echo htmlentities($lcp['element']['outerHTML']) . '...'; echo ""; echo ""; - echo '
Time{$lcp['time']} ms
Size{$lcp['size']}px²
Type{$lcp['type']}
'; + echo '
'; // 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 'Waterfall Opacity (Adjust the transparency of each run\'s waterfall)'; + echo '
'; if (count($waterfalls) == 2) { - echo "
"; + echo ""; + // echo ""; } else { foreach($waterfalls as $index => &$waterfall) { $o = $index ? $opacity : '1.0'; - echo ''; - echo ""; - echo ''; + //echo ''; + echo ""; + //echo ""; + // echo ''; } } - echo '
{$waterfalls[0]['label']}{$waterfalls[1]['label']}
{$waterfalls[0]['label']}{$waterfalls[1]['label']}
{$waterfall['label']}
{$waterfall['label']}
'; + 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) {