From 284199f08de5e927b58ed5dd2acf30f10462f034 Mon Sep 17 00:00:00 2001
From: Peter Hedenskog <peter@soulgalore.com>
Date: Sun, 7 Jan 2024 16:42:58 +0100
Subject: [PATCH] Show more interaction to next paint  info (#4050)

* Show more inp info
---
 .../html/templates/url/metrics/inp.pug        | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/lib/plugins/html/templates/url/metrics/inp.pug b/lib/plugins/html/templates/url/metrics/inp.pug
index 74d8e6f349..6f22399d65 100644
--- a/lib/plugins/html/templates/url/metrics/inp.pug
+++ b/lib/plugins/html/templates/url/metrics/inp.pug
@@ -1,11 +1,30 @@
 if browsertime.pageinfo && browsertime.pageinfo.interactionToNextPaintInfo!== undefined
   a#interactionToNextPaint
   h3 Interaction to Next Paint
-  p Interaction to Next Paint (INP) is a metric that try to measure responsiveness. It's useful if you are testing user journeys Read more about 
+  p Interaction to Next Paint (INP) is a metric that try to measure responsiveness. It's useful if you are testing user journeys. Read more about 
     a(href='https://web.dev/inp/') Interaction to Next Paint
     | .
   .row
-    p The measured latency was #{h.time.ms(browsertime.pageinfo.interactionToNextPaintInfo.latency)}. And the events that contributed to the latency was:
-      ul
-        each entry in browsertime.pageinfo.interactionToNextPaintInfo.entries
-          li #{entry.name} - #{h.time.ms(entry.duration)}
+    p The measured latency was #{h.time.ms(browsertime.pageinfo.interactionToNextPaintInfo.latency)}.
+    table
+      if timings.largestContentfulPaint.tagName 
+        tr 
+          td 
+            b Event type
+          td #{browsertime.pageinfo.interactionToNextPaintInfo.eventType}
+        tr
+          td 
+            b Element type
+          td #{browsertime.pageinfo.interactionToNextPaintInfo.tagName}
+        tr
+          td 
+            b Element class name
+          td #{browsertime.pageinfo.interactionToNextPaintInfo.className}
+        tr
+          td 
+            b Event target
+          td #{browsertime.pageinfo.interactionToNextPaintInfo.eventTarget}
+        tr
+          td 
+            b Load state when the event happened
+          td #{browsertime.pageinfo.interactionToNextPaintInfo.loadState}