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

Update prod with Element Timing #1552

Merged
merged 8 commits into from
Sep 24, 2021
Merged

Update prod with Element Timing #1552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bc8a773
Grab the element timing api info from the trace events and add it to …
tkadlec Sep 18, 2021
68fdfa4
Merge pull request #1549 from WPO-Foundation/prod
tkadlec Sep 23, 2021
4464bfa
Merge branch 'master' into 1533
tkadlec Sep 24, 2021
18cbbe7
updating element timing to be top-level metrics
tkadlec Sep 24, 2021
d75e5e6
Element Timing shows up on Graph Full Results
tkadlec Sep 24, 2021
b35dd19
add element timing to html summary tables
tkadlec Sep 24, 2021
f262d3b
add element timing to the custom waterfall image
tkadlec Sep 24, 2021
b4ea00d
Merge pull request #1551 from WPO-Foundation/1533
scottjehl Sep 24, 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
13 changes: 13 additions & 0 deletions www/graph_page_data.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@
);
$customMetrics = null;
$userTimings = null;
$elementTimings = null;
$userMeasures = null;
foreach ($pagesData as &$pageData) {
foreach ($pageData as &$pageRun)
Expand All @@ -251,8 +252,14 @@
if (!isset($userMeasures))
$userMeasures = array();
$userMeasures[$metric] = 'User Timing Measure - ' . substr($metric, 18);
} else if (substr($metric, 0, 14) == 'elementTiming.') {
if (!isset($elementTimings))
$elementTimings = array();
$elementTimings[$metric] = 'Element Timing - ' . substr($metric,14);
}
}

$elementTimingCount = count($elementTimings);
$timingCount = count($userTimings);
$measuresCount = count($userMeasures);
}
Expand All @@ -271,6 +278,12 @@
InsertChart($metric, $label);
}
}
if (isset($elementTimings) && is_array($elementTimings) && count($elementTimings)) {
echo '<h1 id="ElementTiming"><a href="https://wicg.github.io/element-timing/" target="_blank" rel="noopener">Element Timings</a></h1>';
foreach($elementTimings as $metric => $label) {
InsertChart($metric, $label);
}
}
if (isset($userTimings) && is_array($userTimings) && count($userTimings)) {
echo '<h1 id="UserTiming"><a href="http://www.w3.org/TR/user-timing/" target="_blank" rel="noopener">W3C User Timing marks</a></h1>';
foreach($userTimings as $metric => $label) {
Expand Down
9 changes: 7 additions & 2 deletions www/include/UserTimingHtmlTable.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,14 @@ private function _initUserTimings() {
private function _userTimingsForStep($stepResult) {
$data = $stepResult->getRawResults();
$userTimings = array();
foreach($data as $metric => $value)
if (substr($metric, 0, 9) == 'userTime.')
foreach($data as $metric => $value) {
if (substr($metric, 0, 9) == 'userTime.') {
$userTimings[substr($metric, 9)] = number_format($value / 1000, 3) . 's';
}
if (substr($metric, 0, 14) == 'elementTiming.') {
$userTimings[substr($metric, 14)] = number_format($value / 1000, 3) . 's';
}
}
if (isset($data['custom']) && count($data['custom'])) {
foreach($data['custom'] as $metric) {
if (isset($data[$metric]) && !is_array($data[$metric])) {
Expand Down
4 changes: 2 additions & 2 deletions www/include/WaterfallViewHtmlSnippet.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,8 @@ private function _createLegend($waterfall_options = '') {
if ((float)$this->stepResult->getMetric("loadEventStart"))
$out .= $this->_legendBarTableCell("#C0C0FF", "On Load", 15);
$out .= $this->_legendBarTableCell("#0000FF", "Document Complete", 4);
if ($show_ut && $this->stepResult->getMetric('userTime'))
$out .= '<td><div class="arrow-down"></div>User Timings</td>';
if ($show_ut && ($this->stepResult->getMetric('userTime') || $this->stepResult->getMetric('elementTiming')))
$out .= '<td><div class="arrow-down"></div>User & Element Timings</td>';
$out .= "</tr>\n</table>\n<br>";
$out .= '<table class="waterfall-legend" cellspacing="0">';
$out .= "\n<tr>\n";
Expand Down
20 changes: 19 additions & 1 deletion www/page_data.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ function loadPageStepData($localPaths, $testInfo = null) {
}
//set top level FCP
TopLevelFCP($ret);

if (!empty($ret) && !$basic_results) {
$startOffset = array_key_exists('testStartOffset', $ret) ? intval(round($ret['testStartOffset'])) : 0;
loadUserTimingData($ret, $localPaths->userTimedEventsFile());
Expand Down Expand Up @@ -1091,6 +1090,25 @@ function ParseUserTiming($file, $browser_version, &$layout_shifts, &$page_data)
}
}
}
//let's grab the element timing stuff while we're here to avoid a separate loop
if (is_array($event) &&
isset($event['name']) &&
isset($event['ts']) &&
isset($event['args']['frame']) && in_array($event['args']['frame'], $main_frames) &&
$event['name'] === 'PerformanceElementTiming') {
if (!isset($page_data['elementTiming'])) {
$page_data['elementTiming'] = array();
}
$elementTimingArr = array();
$elementTimingArr['identifier'] = $event['args']['data']['identifier'];
$elementTimingArr['time'] = $event['args']['data']['renderTime'];
$elementTimingArr['elementType'] = $event['args']['data']['elementType'];
$elementTimingArr['url'] = $event['args']['data']['url'];

$page_data['elementTiming'][] = $elementTimingArr;
$page_data['elementTiming.' . $event['args']['data']['identifier']] = $event['args']['data']['renderTime'];

}
}

$total_layout_shift = null;
Expand Down
21 changes: 14 additions & 7 deletions www/waterfall.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,13 +319,20 @@ function _GetMapOrImage($rows, $url, $page_events, $options, $is_image_map, $pag

// get any user timings
if (!isset($options['show_user_timing']) || $options['show_user_timing']) {
if (isset($page_data) && array_key_exists('userTime', $page_data)) {
foreach ($page_data as $key => $value) {
if (substr($key, 0, 9) == 'userTime.') {
$label = substr($key, 9);
if (!isset($user_times))
$user_times = array();
$user_times[$label] = $value;
if (isset($page_data)) {
if (array_key_exists('userTime', $page_data) || array_key_exists('elementTiming', $page_data)) {
foreach ($page_data as $key => $value) {
if (substr($key, 0, 9) == 'userTime.') {
$label = substr($key, 9);
if (!isset($user_times))
$user_times = array();
$user_times[$label] = $value;
} else if (substr($key, 0, 14) == 'elementTiming.') {
$label = substr($key, 14);
if (!isset($user_times))
$user_times = array();
$user_times[$label] = $value;
}
}
}
}
Expand Down