RPP AI: add animation reasons to CLS output

Fixed: 413285103
Change-Id: Icafe03dbecfee9bb8e49a92924d779a2c2d5d13d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6976226
Commit-Queue: Jack Franklin <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Nikolay Vitkov <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>

Author: jackfranklin

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.snapshot.txt

@@ -338,6 +338,104 @@ Layout shifts in this cluster:
 - https://web.dev/articles/optimize-cls
 === end content
 
+Title: PerformanceInsightFormatter CLS serializes correctly when there are no layout shifts
+Content:
+## Insight Title: Layout shift culprits
+
+## Insight Summary:
+Cumulative Layout Shifts (CLS) is a measure of the largest burst of layout shifts for every unexpected layout shift that occurs during the lifecycle of a page. This is a Core Web Vital and the thresholds for categorizing a score are:
+- Good: 0.1 or less
+- Needs improvement: more than 0.1 and less than or equal to 0.25
+- Bad: over 0.25
+
+## Detailed analysis:
+No layout shifts were found.
+
+## Estimated savings: none
+
+## External resources:
+- https://wdeb.dev/articles/cls
+- https://web.dev/articles/optimize-cls
+=== end content
+
+Title: PerformanceInsightFormatter CLS outputs information on non-composited animations
+Content:
+## Insight Title: Layout shift culprits
+
+## Insight Summary:
+Cumulative Layout Shifts (CLS) is a measure of the largest burst of layout shifts for every unexpected layout shift that occurs during the lifecycle of a page. This is a Core Web Vital and the thresholds for categorizing a score are:
+- Good: 0.1 or less
+- Needs improvement: more than 0.1 and less than or equal to 0.25
+- Bad: over 0.25
+
+## Detailed analysis:
+The worst layout shift cluster was the cluster that started at 60 ms and ended at 1,243 ms, with a duration of 1,183 ms.
+The score for this cluster is 0.0140.
+
+Layout shifts in this cluster:
+### Layout shift 1:
+- Start time: 60 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 2:
+- Start time: 76 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 3:
+- Start time: 93 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 4:
+- Start time: 110 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 5:
+- Start time: 126 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 6:
+- Start time: 143 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 7:
+- Start time: 160 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 8:
+- Start time: 176 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 9:
+- Start time: 193 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 10:
+- Start time: 210 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 11:
+- Start time: 226 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 12:
+- Start time: 243 ms
+- Score: 0.0012
+- Potential root causes:
+  - A non-composited animation:
+- non-composited animation: `change-height`
+    Animation name: change-height
+    Unsupported CSS properties:
+    - height
+    Failure reasons:
+      - TARGET_HAS_INVALID_COMPOSITING_STATE, UNSUPPORTED_CSS_PROPERTY
+
+## Estimated savings: none
+
+## External resources:
+- https://wdeb.dev/articles/cls
+- https://web.dev/articles/optimize-cls
+=== end content
+
 Title: PerformanceInsightFormatter INP breakdown serializes the correct details
 Content:
 ## Insight Title: INP breakdown

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.test.ts

@@ -142,6 +142,31 @@ describeWithEnvironment('PerformanceInsightFormatter', () => {
       const output = formatter.formatInsight();
       snapshotTester.assert(this, output);
     });
+
+    it('serializes correctly when there are no layout shifts', async function() {
+      const parsedTrace = await TraceLoader.traceEngine(this, 'render-blocking-requests.json.gz');
+      assert.isOk(parsedTrace.insights);
+      const firstNav = getFirstOrError(parsedTrace.data.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('CLSCulprits', parsedTrace.insights, firstNav);
+      const focus = AgentFocus.fromParsedTrace(parsedTrace);
+
+      const formatter = new PerformanceInsightFormatter(focus, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
+
+    it('outputs information on non-composited animations', async function() {
+      const parsedTrace = await TraceLoader.traceEngine(this, 'layout-shifts-with-animation-culprit.json.gz');
+
+      assert.isOk(parsedTrace.insights);
+      const firstNav = getFirstOrError(parsedTrace.data.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('CLSCulprits', parsedTrace.insights, firstNav);
+      const focus = AgentFocus.fromParsedTrace(parsedTrace);
+
+      const formatter = new PerformanceInsightFormatter(focus, insight);
+      const output = formatter.formatInsight();
+      snapshotTester.assert(this, output);
+    });
   });
 
   describe('INP breakdown', () => {

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -304,7 +304,7 @@ ${rootCauseText}`;
   formatClsCulpritsInsight(insight: Trace.Insights.Models.CLSCulprits.CLSCulpritsInsightModel): string {
     const {worstCluster, shifts} = insight;
     if (!worstCluster) {
-      return '';
+      return 'No layout shifts were found.';
     }
 
     const baseTime = this.#parsedTrace.data.Meta.traceBounds.min;

front_end/panels/timeline/fixtures/traces/BUILD.gn

@@ -61,6 +61,7 @@ copy_to_gen("traces") {
     "large-profile.cpuprofile.gz",
     "large-recalc-style.json.gz",
     "layout-shifts-root-causes.json.gz",
+    "layout-shifts-with-animation-culprit.json.gz",
     "lcp-discovery-delay.json.gz",
     "lcp-fetchpriority-high.json.gz",
     "lcp-images-rasterizer.json.gz",

front_end/panels/timeline/fixtures/traces/README.md

@@ -355,3 +355,7 @@ https://chromium.googlesource.com/external/github.com/google/perfetto.git/+/aef6
 ### interaction-events-with-shared-ids
 
 A trace with lots of interactions generated from https://chromedevtools.github.io/performance-stories/long-interaction/index.html?x=30.
+
+### layout-shift-with-animation-culprit
+
+A trace that has a layout shift with a root cause that is a non-composited animation. Generated from https://github.com/ChromeDevTools/performance-stories/tree/main/layout-shift-animations.