chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

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

@@ -2,9 +2,8 @@
 // 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 '../../../../ui/kit/kit.js';
 import './Table.js';
-import './NodeLink.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {DOMSizeInsightModel} from '../../../../models/trace/insights/DOMSize.js';
@@ -14,7 +13,7 @@ import * as Lit from '../../../../ui/lit/lit.js';
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
 import {md} from './Helpers.js';
-import type * as NodeLink from './NodeLink.js';
+import {nodeLink} from './NodeLink.js';
 import type {TableData, TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.DOMSize;
@@ -22,7 +21,6 @@ const {UIStrings, i18nString} = Trace.Insights.Models.DOMSize;
 const {html} = Lit;
 
 export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-dom-size`;
   override internalName = 'dom-size';
 
   protected override hasAskAiSupport(): boolean {
@@ -34,33 +32,21 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
 
     if (domStatsData.maxDepth) {
       const {nodeId, nodeName} = domStatsData.maxDepth;
-      // clang-format off
-      const template = html`
-        <devtools-performance-node-link
-          .data=${{
-            backendNodeId: nodeId,
-            frame: domStatsData.frame,
-            fallbackText: nodeName,
-          } as NodeLink.NodeLinkData}>
-        </devtools-performance-node-link>
-      `;
-      // clang-format on
+      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;
-      // clang-format off
-      const template = html`
-        <devtools-performance-node-link
-          .data=${{
-            backendNodeId: nodeId,
-            frame: domStatsData.frame,
-            fallbackText: nodeName,
-          } as NodeLink.NodeLinkData}>
-        </devtools-performance-node-link>
-      `;
-      // clang-format on
+      const template = nodeLink({
+        backendNodeId: nodeId,
+        frame: domStatsData.frame,
+        fallbackText: nodeName,
+      });
       rows.push({values: [i18nString(UIStrings.maxChildren), template]});
     }
 
@@ -141,11 +127,3 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-dom-size': DOMSize;
-  }
-}
-
-customElements.define('devtools-performance-dom-size', DOMSize);

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

@@ -13,7 +13,6 @@ import {BaseInsightComponent} from './BaseInsightComponent.js';
 const {html} = Lit;
 
 export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-document-latency`;
   override internalName = 'document-latency';
 
   protected override hasAskAiSupport(): boolean {
@@ -34,11 +33,3 @@ export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsight
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-document-latency': DocumentLatency;
-  }
-}
-
-customElements.define('devtools-performance-document-latency', DocumentLatency);

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

@@ -21,7 +21,6 @@ const {UIStrings, i18nString} = Trace.Insights.Models.DuplicatedJavaScript;
 const {html} = Lit;
 
 export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScriptInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-duplicated-javascript`;
   override internalName = 'duplicated-javascript';
   #treemapData: Utils.Treemap.TreemapData|null = null;
 
@@ -118,11 +117,3 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScr
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-duplicated-javascript': DuplicatedJavaScript;
-  }
-}
-
-customElements.define('devtools-performance-duplicated-javascript', DuplicatedJavaScript);

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

@@ -1,19 +1,16 @@
 // 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.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import * as i18n from '../../../../core/i18n/i18n.js';
-import type * as Platform from '../../../../core/platform/platform.js';
-import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Trace from '../../../../models/trace/trace.js';
-import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 import * as Utils from '../../utils/utils.js';
 
 import baseInsightComponentStyles from './baseInsightComponent.css.js';
 
 const {html, Directives: {ifDefined}} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class EventReferenceClick extends Event {
   static readonly eventName = 'eventreferenceclick';
@@ -23,37 +20,62 @@ export class EventReferenceClick extends Event {
   }
 }
 
-class EventRef extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+interface ViewInput {
+  text: string;
+  event: Trace.Types.Events.Event;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    text,
+    event,
+  } = input;
+
+  // clang-format off
+  Lit.render(html`
+    <style>${baseInsightComponentStyles}</style>
+    <button type="button" class="timeline-link" @click=${(e: Event) => {
+      e.stopPropagation();
+      if (event) {
+        target.dispatchEvent(new EventReferenceClick(event));
+      }
+    }}>${text}</button>
+  `, target);
+  // clang-format on
+};
+
+class EventRef extends UI.Widget.Widget {
+  #view: View;
   #text: string|null = null;
   #event: Trace.Types.Events.Event|null = null;
 
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
   set text(text: string) {
     this.#text = text;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   set event(event: Trace.Types.Events.Event) {
     this.#event = event;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
-  #render(): void {
+  override performUpdate(): void {
     if (!this.#text || !this.#event) {
       return;
     }
 
-    // clang-format off
-    Lit.render(html`
-      <style>${baseInsightComponentStyles}</style>
-      <button type="button" class="timeline-link" @click=${(e: Event) => {
-        e.stopPropagation();
-        if (this.#event) {
-          this.dispatchEvent(new EventReferenceClick(this.#event));
-        }
-      }}>${this.#text}</button>
-    `, this.#shadow, {host: this});
-    // clang-format on
+    const input: ViewInput = {
+      text: this.#text,
+      event: this.#event,
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }
 
@@ -69,98 +91,14 @@ export function eventRef(
     text = event.name;
   }
 
-  return html`<devtools-performance-event-ref
-    .event=${event as Trace.Types.Events.Event}
-    .text=${text}
-    title=${ifDefined(title)}
-  ></devtools-performance-event-ref>`;
-}
-
-class ImageRef extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
-  #request?: Trace.Types.Events.SyntheticNetworkRequest;
-  #imageDataUrl?: string|null;
-
-  set request(request: Trace.Types.Events.SyntheticNetworkRequest) {
-    this.#request = request;
-    this.#imageDataUrl = undefined;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  /**
-   * This only returns a data url if the resource is currently present from the active
-   * inspected page.
-   */
-  async #getOrCreateImageDataUrl(): Promise<string|null> {
-    if (!this.#request) {
-      return null;
-    }
-
-    if (this.#imageDataUrl !== undefined) {
-      return this.#imageDataUrl;
-    }
-
-    const originalUrl = this.#request.args.data.url as Platform.DevToolsPath.UrlString;
-    const resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(originalUrl);
-    if (!resource) {
-      this.#imageDataUrl = null;
-      return this.#imageDataUrl;
-    }
-
-    const content = await resource.requestContentData();
-    if ('error' in content) {
-      this.#imageDataUrl = null;
-      return this.#imageDataUrl;
-    }
-
-    this.#imageDataUrl = content.asDataUrl();
-    return this.#imageDataUrl;
-  }
-
-  async #render(): Promise<void> {
-    if (!this.#request) {
-      return;
-    }
-
-    const url = this.#request.args.data.mimeType.includes('image') ? await this.#getOrCreateImageDataUrl() : null;
-    const img = url ? html`<img src=${url} class="element-img"/>` : Lit.nothing;
-
-    // clang-format off
-    Lit.render(html`
-      <style>${baseInsightComponentStyles}</style>
-      <div class="image-ref">
-        ${img}
-        <span class="element-img-details">
-          ${eventRef(this.#request)}
-          <span class="element-img-details-size">${
-            i18n.ByteUtilities.bytesToString(this.#request.args.data.decodedBodyLength ?? 0)
-          }</span>
-        </span>
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
-export function imageRef(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult {
-  return html`
-    <devtools-performance-image-ref
-      .request=${request}
-    ></devtools-performance-image-ref>
-  `;
+  return html`<devtools-widget title=${ifDefined(title)} .widgetConfig=${widgetConfig(EventRef, {
+    event,
+    text,
+  })}></devtools-widget>`;
 }
 
 declare global {
   interface GlobalEventHandlersEventMap {
     [EventReferenceClick.eventName]: EventReferenceClick;
   }
-
-  interface HTMLElementTagNameMap {
-    'devtools-performance-event-ref': EventRef;
-    'devtools-performance-image-ref': ImageRef;
-  }
 }
-
-customElements.define('devtools-performance-event-ref', EventRef);
-customElements.define('devtools-performance-image-ref', ImageRef);

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

@@ -18,7 +18,6 @@ const {UIStrings, i18nString} = Trace.Insights.Models.FontDisplay;
 const {html} = Lit;
 
 export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-font-display`;
   override internalName = 'font-display';
   #overlayForRequest = new Map<Trace.Types.Events.Event, Trace.Types.Overlays.Overlay>();
 
@@ -88,11 +87,3 @@ export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-font-display': FontDisplay;
-  }
-}
-
-customElements.define('devtools-performance-font-display', FontDisplay);

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

@@ -19,7 +19,6 @@ const {UIStrings, i18nString, createOverlayForEvents} = Trace.Insights.Models.Fo
 const {html, nothing} = Lit;
 
 export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-forced-reflow`;
   override internalName = 'forced-reflow';
 
   protected override hasAskAiSupport(): boolean {
@@ -113,11 +112,3 @@ export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel>
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-forced-reflow': ForcedReflow;
-  }
-}
-
-customElements.define('devtools-performance-forced-reflow', ForcedReflow);

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

@@ -17,7 +17,6 @@ const {UIStrings, i18nString, createOverlaysForSubpart} = Trace.Insights.Models.
 const {html} = Lit;
 
 export class INPBreakdown extends BaseInsightComponent<INPBreakdownInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-inp-breakdown`;
   override internalName = 'inp';
 
   protected override hasAskAiSupport(): boolean {
@@ -60,11 +59,3 @@ export class INPBreakdown extends BaseInsightComponent<INPBreakdownInsightModel>
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-inp-breakdown': INPBreakdown;
-  }
-}
-
-customElements.define('devtools-performance-inp-breakdown', INPBreakdown);

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

@@ -2,14 +2,14 @@
 // 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 '../../../../ui/kit/kit.js';
 
 import type {ImageDeliveryInsightModel} from '../../../../models/trace/insights/ImageDelivery.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
-import {imageRef} from './EventRef.js';
+import {imageRef} from './ImageRef.js';
 import {createLimitedRows, renderOthersLabel, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.ImageDelivery;
@@ -17,7 +17,6 @@ const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.I
 const {html} = Lit;
 
 export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-image-delivery`;
   override internalName = 'image-delivery';
 
   mapToRow(image: Trace.Insights.Models.ImageDelivery.OptimizableImage): TableDataRow {
@@ -69,11 +68,3 @@ export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightMode
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-image-delivery': ImageDelivery;
-  }
-}
-
-customElements.define('devtools-performance-image-delivery', ImageDelivery);

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

@@ -0,0 +1,112 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../../core/i18n/i18n.js';
+import type * as Platform from '../../../../core/platform/platform.js';
+import * as SDK from '../../../../core/sdk/sdk.js';
+import type * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
+import * as Lit from '../../../../ui/lit/lit.js';
+
+import baseInsightComponentStyles from './baseInsightComponent.css.js';
+import {eventRef} from './EventRef.js';
+
+const {html} = Lit;
+const {widgetConfig} = UI.Widget;
+
+interface ViewInput {
+  request: Trace.Types.Events.SyntheticNetworkRequest;
+  imageDataUrl: string|null;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    request,
+    imageDataUrl,
+  } = input;
+
+  const img = imageDataUrl ? html`<img src=${imageDataUrl} class="element-img"/>` : Lit.nothing;
+
+  // clang-format off
+  Lit.render(html`
+    <style>${baseInsightComponentStyles}</style>
+    <div class="image-ref">
+      ${img}
+      <span class="element-img-details">
+        ${eventRef(request)}
+        <span class="element-img-details-size">${
+          i18n.ByteUtilities.bytesToString(request.args.data.decodedBodyLength ?? 0)
+        }</span>
+      </span>
+    </div>
+`, target);
+  // clang-format on
+};
+
+class ImageRef extends UI.Widget.Widget {
+  #view: View;
+  #request?: Trace.Types.Events.SyntheticNetworkRequest;
+  #imageDataUrl?: string|null;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  set request(request: Trace.Types.Events.SyntheticNetworkRequest) {
+    this.#request = request;
+    this.#imageDataUrl = undefined;
+    this.requestUpdate();
+  }
+
+  /**
+   * This only returns a data url if the resource is currently present from the active
+   * inspected page.
+   */
+  async #getOrCreateImageDataUrl(): Promise<string|null> {
+    if (!this.#request) {
+      return null;
+    }
+
+    if (this.#imageDataUrl !== undefined) {
+      return this.#imageDataUrl;
+    }
+
+    const originalUrl = this.#request.args.data.url as Platform.DevToolsPath.UrlString;
+    const resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(originalUrl);
+    if (!resource) {
+      this.#imageDataUrl = null;
+      return this.#imageDataUrl;
+    }
+
+    const content = await resource.requestContentData();
+    if ('error' in content) {
+      this.#imageDataUrl = null;
+      return this.#imageDataUrl;
+    }
+
+    this.#imageDataUrl = content.asDataUrl();
+    return this.#imageDataUrl;
+  }
+
+  override async performUpdate(): Promise<void> {
+    if (!this.#request) {
+      return;
+    }
+
+    const input: ViewInput = {
+      request: this.#request,
+      imageDataUrl: await this.#getOrCreateImageDataUrl(),
+    };
+    this.#view(input, undefined, this.contentElement);
+  }
+}
+
+export function imageRef(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult {
+  return html`<devtools-widget .widgetConfig=${widgetConfig(ImageRef, {
+    request,
+  })}></devtools-widget>`;
+}

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

@@ -0,0 +1,91 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
+
+import type {BaseInsightComponent} from './BaseInsightComponent.js';
+import {Cache} from './Cache.js';
+import {CLSCulprits} from './CLSCulprits.js';
+import {DocumentLatency} from './DocumentLatency.js';
+import {DOMSize} from './DOMSize.js';
+import {DuplicatedJavaScript} from './DuplicatedJavaScript.js';
+import {FontDisplay} from './FontDisplay.js';
+import {ForcedReflow} from './ForcedReflow.js';
+import {ImageDelivery} from './ImageDelivery.js';
+import {INPBreakdown} from './INPBreakdown.js';
+import {LCPBreakdown} from './LCPBreakdown.js';
+import {LCPDiscovery} from './LCPDiscovery.js';
+import {LegacyJavaScript} from './LegacyJavaScript.js';
+import {ModernHTTP} from './ModernHTTP.js';
+import {NetworkDependencyTree} from './NetworkDependencyTree.js';
+import {RenderBlocking} from './RenderBlocking.js';
+import {SlowCSSSelector} from './SlowCSSSelector.js';
+import {ThirdParties} from './ThirdParties.js';
+import {Viewport} from './Viewport.js';
+
+const {widgetConfig} = UI.Widget;
+
+type InsightWidgetElement = UI.Widget.WidgetElement<BaseInsightComponent<Trace.Insights.Types.InsightModel>>;
+
+/**
+ * Every insight (INCLUDING experimental ones).
+ *
+ * Order does not matter (but keep alphabetized).
+ */
+const INSIGHT_NAME_TO_COMPONENT = {
+  Cache,
+  CLSCulprits,
+  DocumentLatency,
+  DOMSize,
+  DuplicatedJavaScript,
+  FontDisplay,
+  ForcedReflow,
+  ImageDelivery,
+  INPBreakdown,
+  LCPDiscovery,
+  LCPBreakdown,
+  LegacyJavaScript,
+  ModernHTTP,
+  NetworkDependencyTree,
+  RenderBlocking,
+  SlowCSSSelector,
+  ThirdParties,
+  Viewport,
+};
+
+export class InsightRenderer {
+  #insightWidgetCache = new WeakMap<Trace.Insights.Types.InsightModel, InsightWidgetElement>();
+
+  renderInsightToWidgetElement(
+      parsedTrace: Trace.TraceModel.ParsedTrace, insightSet: Trace.Insights.Types.InsightSet,
+      model: Trace.Insights.Types.InsightModel, insightName: string,
+      options: Partial<BaseInsightComponent<Trace.Insights.Types.InsightModel>>): InsightWidgetElement {
+    let widgetElement = this.#insightWidgetCache.get(model);
+    if (!widgetElement) {
+      widgetElement = document.createElement('devtools-widget') as InsightWidgetElement;
+
+      const componentClass = INSIGHT_NAME_TO_COMPONENT[insightName as keyof typeof INSIGHT_NAME_TO_COMPONENT];
+      const widget = new componentClass(widgetElement) as BaseInsightComponent<Trace.Insights.Types.InsightModel>;
+      widget.selected = false;
+      widget.parsedTrace = parsedTrace;
+      widget.model = model;
+      widget.bounds = insightSet.bounds;
+      widget.insightSetKey = insightSet.id;
+      Object.assign(widget, options);
+      widgetElement.widgetConfig = widgetConfig(() => {
+        return widget;
+      });
+
+      this.#insightWidgetCache.set(model, widgetElement);
+    }
+
+    const widget = widgetElement.getWidget();
+    if (widget) {
+      Object.assign(widget, options);
+    }
+
+    return widgetElement;
+  }
+}

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

@@ -18,7 +18,6 @@ const {UIStrings, i18nString} = Trace.Insights.Models.LCPBreakdown;
 const {html} = Lit;
 
 export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-lcp-breakdown`;
   override internalName = 'lcp-by-phase';
   #overlay: Trace.Types.Overlays.TimespanBreakdown|null = null;
 
@@ -136,11 +135,3 @@ export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel>
     return html`${sections}`;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-lcp-breakdown': LCPBreakdown;
-  }
-}
-
-customElements.define('devtools-performance-lcp-breakdown', LCPBreakdown);