[RPP] Add DOM size insight component to experimental insights

https://screenshot.googleplex.com/BmX2qvJFKCsgcLE

Bug: 372897811
Change-Id: I42007408c57a806fde1d379c1fbd004fd123e273
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6090118
Commit-Queue: Adam Raine <[email protected]>
Reviewed-by: Paul Irish <[email protected]>
Reviewed-by: Connor Clark <[email protected]>

Author: Adam Raine

config/gni/devtools_grd_files.gni

@@ -1846,6 +1846,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/ignoreListSetting.css.js",
   "front_end/panels/timeline/components/insights/BaseInsightComponent.js",
   "front_end/panels/timeline/components/insights/CLSCulprits.js",
+  "front_end/panels/timeline/components/insights/DOMSize.js",
   "front_end/panels/timeline/components/insights/DocumentLatency.js",
   "front_end/panels/timeline/components/insights/EventRef.js",
   "front_end/panels/timeline/components/insights/FontDisplay.js",

front_end/panels/timeline/components/SidebarSingleInsightSet.test.ts

@@ -153,6 +153,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'Render blocking requests',
       'Document request latency',
       'Optimize viewport for mobile',
+      'Optimize DOM size',
       'CSS Selector costs',
     ]);
 
@@ -164,6 +165,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'Render blocking requests',
       'Document request latency',
       'Optimize viewport for mobile',
+      'Optimize DOM size',
       'CSS Selector costs',
     ]);
   });

front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -47,6 +47,7 @@ export interface SidebarSingleInsightSetData {
  * users. */
 const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([
   'FontDisplay',
+  'DOMSize',
 ]);
 
 type InsightNameToComponentMapping =
@@ -59,6 +60,7 @@ type InsightNameToComponentMapping =
  */
 const INSIGHT_NAME_TO_COMPONENT: InsightNameToComponentMapping = {
   CLSCulprits: Insights.CLSCulprits.CLSCulprits,
+  DOMSize: Insights.DOMSize.DOMSize,
   DocumentLatency: Insights.DocumentLatency.DocumentLatency,
   FontDisplay: Insights.FontDisplay.FontDisplay,
   ImageDelivery: Insights.ImageDelivery.ImageDelivery,

front_end/panels/timeline/components/insights/BUILD.gn

@@ -18,6 +18,7 @@ devtools_module("insights") {
   sources = [
     "BaseInsightComponent.ts",
     "CLSCulprits.ts",
+    "DOMSize.ts",
     "DocumentLatency.ts",
     "EventRef.ts",
     "FontDisplay.ts",

front_end/panels/timeline/components/insights/DOMSize.ts

@@ -0,0 +1,62 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../../../../ui/components/icon_button/icon_button.js';
+
+import * as i18n from '../../../../core/i18n/i18n.js';
+import type {DOMSizeInsightModel} from '../../../../models/trace/insights/DOMSize.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import type * as Overlays from '../../overlays/overlays.js';
+
+import {BaseInsightComponent} from './BaseInsightComponent.js';
+
+const UIStrings = {
+  /**
+   * @description Text status indicating that browser operations to re-render the page were not impacted by the size of the DOM. "DOM" is an acronym and should not be translated.
+   */
+  noLargeRenderTasks: 'No rendering tasks impacted by DOM size',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/DOMSize.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {html} = LitHtml;
+
+export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
+  static override readonly litTagName = LitHtml.literal`devtools-performance-dom-size`;
+  override internalName: string = 'dom-size';
+
+  override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
+    if (!this.model) {
+      return [];
+    }
+
+    const entries = [...this.model.largeStyleRecalcs, ...this.model.largeLayoutUpdates];
+    return entries.map(entry => ({
+                         type: 'ENTRY_OUTLINE',
+                         entry,
+                         outlineReason: 'ERROR',
+                       }));
+  }
+
+  override renderContent(): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
+    if (!this.model.largeStyleRecalcs.length && !this.model.largeLayoutUpdates.length) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noLargeRenderTasks)}</div>`;
+    }
+
+    return LitHtml.nothing;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-performance-dom-size': DOMSize;
+  }
+}
+
+customElements.define('devtools-performance-dom-size', DOMSize);

front_end/panels/timeline/components/insights/insights.ts

@@ -5,6 +5,7 @@
 import * as BaseInsightComponent from './BaseInsightComponent.js';
 import * as CLSCulprits from './CLSCulprits.js';
 import * as DocumentLatency from './DocumentLatency.js';
+import * as DOMSize from './DOMSize.js';
 import * as EventRef from './EventRef.js';
 import * as FontDisplay from './FontDisplay.js';
 import * as Helpers from './Helpers.js';
@@ -25,6 +26,7 @@ export {
   BaseInsightComponent,
   CLSCulprits,
   DocumentLatency,
+  DOMSize,
   EventRef,
   FontDisplay,
   Helpers,