From 8ac9c36eb1f0e088f2b9b5aafd70f157948593bc Mon Sep 17 00:00:00 2001
From: Peter Hedenskog <peter@soulgalore.com>
Date: Sun, 2 May 2021 12:21:22 +0200
Subject: [PATCH] Show more valuable info for LCP (#3367)

---
 .../html/templates/url/metrics/index.pug      |  4 +-
 .../html/templates/url/metrics/lcp.pug        | 88 +++++++++++--------
 2 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/lib/plugins/html/templates/url/metrics/index.pug b/lib/plugins/html/templates/url/metrics/index.pug
index 10b0976ba..e60593d1f 100644
--- a/lib/plugins/html/templates/url/metrics/index.pug
+++ b/lib/plugins/html/templates/url/metrics/index.pug
@@ -141,11 +141,11 @@ if browsertime
           if (timings.largestContentfulPaint) 
             tr
               td
-                a(href=baseHelpURL + 'largestContentfulPaint') Largest Contentful Paint (LCP)
+                a(href='#largestContentfulPaint') Largest Contentful Paint (LCP)
               td.number #{h.time.ms(Math.max(timings.largestContentfulPaint.loadTime,timings.largestContentfulPaint.renderTime, timings.largestContentfulPaint.loadTime,timings.largestContentfulPaint.loadTime))}
           tr
             td
-              a(href=baseHelpURL + 'cumulativeLayoutShift') Cumulative Layout Shift (CLS)
+              a(href='#cumulativeLayoutShift') Cumulative Layout Shift (CLS)
             td.number #{browsertime.pageinfo.cumulativeLayoutShift.toFixed(2)}
           if browsertime.timings.firstInput !== undefined
             tr 
diff --git a/lib/plugins/html/templates/url/metrics/lcp.pug b/lib/plugins/html/templates/url/metrics/lcp.pug
index 5e765cebb..036a69b3c 100644
--- a/lib/plugins/html/templates/url/metrics/lcp.pug
+++ b/lib/plugins/html/templates/url/metrics/lcp.pug
@@ -1,41 +1,53 @@
 if timings.largestContentfulPaint
-   a#largestContentfulPaint
-   h3 Largest Contentful Paint
-   p Read more about 
+  a#largestContentfulPaint
+  h3 Largest Contentful Paint
+  p When in time the page main content is rendered (collected using the Largest Contentful Paint API). Read more about 
     a(href='https://web.dev/largest-contentful-paint') Largest Contentful Paint
     | .
-   table
-      tr
-        if timings.largestContentfulPaint.id !== ''
-          th Id
-        if timings.largestContentfulPaint.url !== ''  
-          th URL
-          th Image
-        else
-          th Element
-        if timings.largestContentfulPaint.tagName  
-          th Tag 
-        th Render time
-        th Load time
-        if timings.largestContentfulPaint.size
-          th Size
-      tr
-        if timings.largestContentfulPaint.id !== ''
-          td  #{timings.largestContentfulPaint.id}
-        if timings.largestContentfulPaint.url !== ''    
-          td  
-            a(href=timings.largestContentfulPaint.url) #{timings.largestContentfulPaint.url}
-          td 
-            a(href=timings.largestContentfulPaint.url)
-              img.screenshot(src=timings.largestContentfulPaint.url, alt='LCP', style='width:200px')
-        else 
-          td 
-            - const screenshotNo = medianRun ? medianRun.runIndex : 1
-            - const screenshotName = 'data/screenshots/' + screenshotNo + '/largestContentfulPaint.' + screenShotType
-              a(href=screenshotName)
-                img.screenshot(src=screenshotName, alt='LCP', style='width:200px')
-        if timings.largestContentfulPaint.tagName 
-          td #{timings.largestContentfulPaint.tagName}
-        td  #{h.time.ms(timings.largestContentfulPaint.renderTime)}
-        td  #{h.time.ms(timings.largestContentfulPaint.loadTime)}  
-        td  #{h.size.format(timings.largestContentfulPaint.size)}
+  .row
+    .one-half.column
+        table
+            if timings.largestContentfulPaint.tagName 
+              tr
+                td 
+                  b Element/tag
+                td #{timings.largestContentfulPaint.tagName}
+            tr
+              td 
+                b Render time 
+              td #{h.time.ms(timings.largestContentfulPaint.renderTime)}
+            if timings.largestContentfulPaint.id !== ''
+              tr 
+                td 
+                  b Element id
+                td #{timings.largestContentfulPaint.id}
+            tr
+              td 
+                b Load time
+              td #{h.time.ms(timings.largestContentfulPaint.loadTime)}
+            if timings.largestContentfulPaint.url !== ''  
+              tr 
+                td 
+                  b URL 
+                td 
+                  a(href=timings.largestContentfulPaint.url) #{h.shortAsset(timings.largestContentfulPaint.url)}
+              tr 
+                td(colspan='2')
+                  img.screenshot(src=timings.largestContentfulPaint.url, alt='LCP', style='width:200px')
+            if timings.largestContentfulPaint.size
+              tr 
+                td 
+                  b Size (width*height)
+                td #{timings.largestContentfulPaint.size}
+            tr
+              td(colspan='2')
+               b DOM path
+            tr
+              td(colspan='2')
+                #{timings.largestContentfulPaint.domPath}
+    .one-half.column
+      - const screenshotNo = medianRun ? medianRun.runIndex : 1
+      - const screenshotName = 'data/screenshots/' + screenshotNo + '/largestContentfulPaint.' + screenShotType
+      a(href=screenshotName)
+        img.screenshot(src=screenshotName, alt='LCP', style='max-width:100%; height: auto')
+      p.small The largest contentful paint is highlighted in the image. If no element is highlighted the element was removed before the screenshot or the LCP API couldn't find the element.