chrome-devtools-frontend/front_end/panels/timeline/components/insights/DOMSize.ts

Chrome DevTools UI

// Copyright 2024 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import '../../../../ui/kit/kit.js';
import './Table.js';

import * as i18n from '../../../../core/i18n/i18n.js';
import type {DOMSizeInsightModel} from '../../../../models/trace/insights/DOMSize.js';
import * as Trace from '../../../../models/trace/trace.js';
import * as UI from '../../../../ui/legacy/legacy.js';
import * as Lit from '../../../../ui/lit/lit.js';

import {BaseInsightComponent} from './BaseInsightComponent.js';
import {eventRef} from './EventRef.js';
import {md} from './Helpers.js';
import {nodeLink} from './NodeLink.js';
import {Table, type TableDataRow} from './Table.js';

const {UIStrings, i18nString} = Trace.Insights.Models.DOMSize;

const {html} = Lit;
const {widgetConfig} = UI.Widget;

export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
  override internalName = 'dom-size';

  protected override hasAskAiSupport(): boolean {
    return true;
  }

  #renderNodeTable(domStatsData: Trace.Types.Events.DOMStats['args']['data']): Lit.LitTemplate {
    const rows: TableDataRow[] = [];

    if (domStatsData.maxDepth) {
      const {nodeId, nodeName} = domStatsData.maxDepth;
      const template = nodeLink({
        backendNodeId: nodeId,
        frame: domStatsData.frame,
        fallbackText: nodeName,
      });
      rows.push({values: [i18nString(UIStrings.maxDOMDepth), template]});
    }

    if (domStatsData.maxChildren) {
      const {nodeId, nodeName} = domStatsData.maxChildren;
      const template = nodeLink({
        backendNodeId: nodeId,
        frame: domStatsData.frame,
        fallbackText: nodeName,
      });
      rows.push({values: [i18nString(UIStrings.maxChildren), template]});
    }

    if (!rows.length) {
      return Lit.nothing;
    }

    // clang-format off
    return html`<div class="insight-section">
      <devtools-widget .widgetConfig=${widgetConfig(Table, {
        data: {
          insight: this,
          headers: [i18nString(UIStrings.statistic), i18nString(UIStrings.element)],
          rows,
        }})}>
      </devtools-widget>
    </div>`;
    // clang-format on
  }

  #renderLargeUpdatesTable(): Lit.LitTemplate|null {
    if (!this.model || !this.model.largeUpdates.length) {
      return null;
    }

    const rows: TableDataRow[] = this.model.largeUpdates.map(update => {
      return {
        values: [eventRef(update.event, {text: update.label}), i18n.TimeUtilities.millisToString(update.duration)],
        overlays: [{
          type: 'ENTRY_OUTLINE',
          entry: update.event,
          outlineReason: 'INFO',
        }],
      };
    });

    // clang-format off
    return html`<div class="insight-section">
      <div class="insight-description">${md(i18nString(UIStrings.topUpdatesDescription))}</div>
      <devtools-widget .widgetConfig=${widgetConfig(Table, {
        data: {
          insight: this,
          headers: ['', i18nString(UIStrings.duration)],
          rows,
        }})}>
      </devtools-widget>
    </div>`;
    // clang-format on
  }

  override renderContent(): Lit.LitTemplate {
    if (!this.model) {
      return Lit.nothing;
    }

    const domStatsData = this.model.maxDOMStats?.args.data;
    if (!domStatsData) {
      return Lit.nothing;
    }

    // clang-format off
    return html`<div class="insight-section">
      <devtools-widget
        .widgetConfig=${widgetConfig(Table, {
          data: {
            insight: this,
            headers: [i18nString(UIStrings.statistic), i18nString(UIStrings.value)],
            rows: [
              {values: [i18nString(UIStrings.totalElements), domStatsData.totalElements]},
              {values: [i18nString(UIStrings.maxDOMDepth), domStatsData.maxDepth?.depth ?? 0]},
              {values: [i18nString(UIStrings.maxChildren), domStatsData.maxChildren?.numChildren ?? 0]},
            ],
          },
        })}>
      </devtools-widget>
    </div>
    ${this.#renderNodeTable(domStatsData)}
    ${this.#renderLargeUpdatesTable()}
    `;
    // clang-format on
  }
}