Merge pull request #1552 from WPO-Foundation/master

Update prod with Element Timing
catchpoint · Sep 24, 2021 · 05cd869 · 05cd869
2 parents 17888e8 + b4ea00d
commit 05cd869
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 12 deletions.
diff --git a/www/graph_page_data.php b/www/graph_page_data.php
@@ -228,6 +228,7 @@
             );
             $customMetrics = null;
             $userTimings = null;
+            $elementTimings = null;
             $userMeasures = null;
             foreach ($pagesData as &$pageData) {
               foreach ($pageData as &$pageRun)
@@ -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);
                 }
@@ -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) {

diff --git a/www/include/UserTimingHtmlTable.php b/www/include/UserTimingHtmlTable.php
@@ -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])) {

diff --git a/www/include/WaterfallViewHtmlSnippet.php b/www/include/WaterfallViewHtmlSnippet.php
@@ -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";

diff --git a/www/page_data.inc b/www/page_data.inc
@@ -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());
@@ -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;

diff --git a/www/waterfall.inc b/www/waterfall.inc
@@ -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;
+            }
           }
         }
       }