chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

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

@@ -5,28 +5,17 @@
 import '../../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Platform from '../../../../core/platform/platform.js';
+import type {LCPDiscoveryInsightModel} from '../../../../models/trace/insights/LCPDiscovery.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {eventRef} from './EventRef.js';
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import type * as SidebarInsight from './SidebarInsight.js';
-import {Category} from './types.js';
+import {BaseInsightComponent} from './BaseInsightComponent.js';
+import {imageRef} from './EventRef.js';
 
 const {html} = LitHtml;
 
 const UIStrings = {
-  /**
-   *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
-   */
-  title: 'LCP request discovery',
-  /**
-   *@description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.
-   */
-  description:
-      'Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)',
   /**
    * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.
    * @example {401ms} PH1
@@ -54,7 +43,6 @@ const UIStrings = {
    *@example {Server response time} PH1
    */
   failedAriaLabel: 'Insight check failed: {PH1}',
-
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/LCPDiscovery.ts', UIStrings);
@@ -69,20 +57,14 @@ interface LCPImageDiscoveryData {
   estimatedSavings: Trace.Types.Timing.MilliSeconds|null;
 }
 
-function getImageData(
-    insights: Trace.Insights.Types.TraceInsightSets|null, insightSetKey: string|null): LCPImageDiscoveryData|null {
-  const insight = Trace.Insights.Common.getInsight('LargestContentfulPaint', insights, insightSetKey);
-  if (!insight) {
-    return null;
-  }
-
-  if (insight.lcpRequest === undefined) {
+function getImageData(model: LCPDiscoveryInsightModel): LCPImageDiscoveryData|null {
+  if (model.lcpRequest === undefined) {
     return null;
   }
 
-  const shouldIncreasePriorityHint = insight.shouldIncreasePriorityHint;
-  const shouldPreloadImage = insight.shouldPreloadImage;
-  const shouldRemoveLazyLoading = insight.shouldRemoveLazyLoading;
+  const shouldIncreasePriorityHint = model.shouldIncreasePriorityHint;
+  const shouldPreloadImage = model.shouldPreloadImage;
+  const shouldRemoveLazyLoading = model.shouldRemoveLazyLoading;
 
   const imageLCP = shouldIncreasePriorityHint !== undefined && shouldPreloadImage !== undefined &&
       shouldRemoveLazyLoading !== undefined;
@@ -96,25 +78,22 @@ function getImageData(
     shouldIncreasePriorityHint,
     shouldPreloadImage,
     shouldRemoveLazyLoading,
-    request: insight.lcpRequest,
+    request: model.lcpRequest,
     discoveryDelay: null,
-    estimatedSavings: insight.metricSavings?.LCP ?? null,
+    estimatedSavings: model.metricSavings?.LCP ?? null,
   };
 
-  if (insight.earliestDiscoveryTimeTs && insight.lcpRequest) {
-    const discoveryDelay = insight.lcpRequest.ts - insight.earliestDiscoveryTimeTs;
+  if (model.earliestDiscoveryTimeTs && model.lcpRequest) {
+    const discoveryDelay = model.lcpRequest.ts - model.earliestDiscoveryTimeTs;
     data.discoveryDelay = Trace.Types.Timing.MicroSeconds(discoveryDelay);
   }
 
   return data;
 }
 
-export class LCPDiscovery extends BaseInsight {
+export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-lcp-discovery`;
-  override insightCategory: Category = Category.LCP;
   override internalName: string = 'lcp-discovery';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   #adviceIcon(didFail: boolean, label: string): LitHtml.TemplateResult {
     const icon = didFail ? 'clear' : 'check-circle';
@@ -138,7 +117,11 @@ export class LCPDiscovery extends BaseInsight {
   }
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    const imageResults = getImageData(this.data.insights, this.data.insightSetKey);
+    if (!this.model) {
+      return [];
+    }
+
+    const imageResults = getImageData(this.model);
     if (!imageResults || !imageResults.discoveryDelay) {
       return [];
     }
@@ -174,85 +157,51 @@ export class LCPDiscovery extends BaseInsight {
     ];
   }
 
-  #handleBadImage(event: Event): void {
-    const img = event.target as HTMLImageElement;
-    img.style.display = 'none';
-  }
+  override getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    if (!this.model) {
+      return null;
+    }
 
-  #renderImage(imageData: LCPImageDiscoveryData): LitHtml.TemplateResult {
-    // clang-format off
-    return html`
-      <div class="lcp-element">
-        ${imageData.request.args.data.mimeType.includes('image') ?
-          html`
-        <img
-          class="element-img"
-          src=${imageData.request.args.data.url}
-          @error=${this.#handleBadImage}
-           />`: LitHtml.nothing}
-        <span class="element-img-details">
-          ${eventRef(imageData.request)}
-          <span class="element-img-details-size">${Platform.NumberUtilities.bytesToString(imageData.request.args.data.decodedBodyLength ?? 0)}</span>
-        </span>
-      </div>`;
-    // clang-format on
+    return getImageData(this.model)?.estimatedSavings ?? null;
   }
 
-  #renderDiscovery(imageData: LCPImageDiscoveryData): LitHtml.TemplateResult {
+  #renderContent(imageData: LCPImageDiscoveryData): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     // clang-format off
     return html`
-        <div class="insights">
-          <devtools-performance-sidebar-insight .data=${{
-            title: this.userVisibleTitle,
-            description: this.description,
-            internalName: this.internalName,
-            expanded: this.isActive(),
-            estimatedSavingsTime: imageData.estimatedSavings,
-          } as SidebarInsight.InsightDetails}
-          @insighttoggleclick=${this.onSidebarClick}>
-            <div slot="insight-content" class="insight-section">
-              <div class="insight-results">
-                <ul class="insight-icon-results">
-                  <li class="insight-entry">
-                    ${this.#adviceIcon(imageData.shouldIncreasePriorityHint, i18nString(UIStrings.fetchPriorityApplied))}
-                    <span>${i18nString(UIStrings.fetchPriorityApplied)}</span>
-                  </li>
-                  <li class="insight-entry">
-                    ${this.#adviceIcon(imageData.shouldPreloadImage, i18nString(UIStrings.requestDiscoverable))}
-                    <span>${i18nString(UIStrings.requestDiscoverable)}</span>
-                  </li>
-                  <li class="insight-entry">
-                    ${this.#adviceIcon(imageData.shouldRemoveLazyLoading, i18nString(UIStrings.lazyLoadNotApplied))}
-                    <span>${i18nString(UIStrings.lazyLoadNotApplied)}</span>
-                  </li>
-                </ul>
-              </div>
-              ${this.#renderImage(imageData)}
-            </div>
-          </devtools-performance-sidebar-insight>
+      <div class="insight-section">
+        <div class="insight-results">
+          <ul class="insight-icon-results">
+            <li class="insight-entry">
+              ${this.#adviceIcon(imageData.shouldIncreasePriorityHint, i18nString(UIStrings.fetchPriorityApplied))}
+              <span>${i18nString(UIStrings.fetchPriorityApplied)}</span>
+            </li>
+            <li class="insight-entry">
+              ${this.#adviceIcon(imageData.shouldPreloadImage, i18nString(UIStrings.requestDiscoverable))}
+              <span>${i18nString(UIStrings.requestDiscoverable)}</span>
+            </li>
+            <li class="insight-entry">
+              ${this.#adviceIcon(imageData.shouldRemoveLazyLoading, i18nString(UIStrings.lazyLoadNotApplied))}
+              <span>${i18nString(UIStrings.lazyLoadNotApplied)}</span>
+            </li>
+          </ul>
+        </div>
+        ${imageRef(imageData.request)}
       </div>`;
     // clang-format on
   }
 
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight =
-        Trace.Insights.Common.getInsight('LargestContentfulPaint', this.data.insights, this.data.insightSetKey);
-    if (!insight?.lcpEvent || !insight?.lcpRequest) {
-      return [];
+  override render(): void {
+    if (!this.model) {
+      return;
     }
 
-    // TODO: add entire request initiator chain?
-    return [insight.lcpEvent, insight.lcpRequest];
-  }
-
-  override render(): void {
-    const imageResults = getImageData(this.data.insights, this.data.insightSetKey);
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = imageResults && matchesCategory ? this.#renderDiscovery(imageResults) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    const imageResults = getImageData(this.model);
+    const output = imageResults ? this.#renderContent(imageResults) : LitHtml.nothing;
+    this.renderWithContent(output);
   }
 }
 

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

@@ -5,28 +5,17 @@
 import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type {LCPPhasesInsightModel} from '../../../../models/trace/insights/LCPPhases.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import type * as SidebarInsight from './SidebarInsight.js';
+import {BaseInsightComponent} from './BaseInsightComponent.js';
 import type {TableData} from './Table.js';
-import {Category} from './types.js';
 
 const {html} = LitHtml;
 
 const UIStrings = {
-  /**
-   *@description Title of an insight that provides details about the LCP metric, broken down by phases / parts.
-   */
-  title: 'LCP by phase',
-  /**
-   * @description Description of a DevTools insight that presents a breakdown for the LCP metric by phases.
-   * This is displayed after a user expands the section to see more. No character length limits.
-   */
-  description:
-      'Each [phase has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',
   /**
    *@description Time to first byte title for the Largest Contentful Paint's phases timespan breakdown.
    */
@@ -61,29 +50,18 @@ interface PhaseData {
   percent: string;
 }
 
-export class LCPPhases extends BaseInsight {
+export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-lcp-by-phases`;
-  override insightCategory: Category = Category.LCP;
   override internalName: string = 'lcp-by-phase';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
   #overlay: Overlays.Overlays.TimespanBreakdown|null = null;
 
-  #getPhaseData(insights: Trace.Insights.Types.TraceInsightSets|null, navigationId: string|null): PhaseData[] {
-    if (!insights || !navigationId) {
-      return [];
-    }
-    const insightsByNavigation = insights.get(navigationId);
-    if (!insightsByNavigation) {
-      return [];
-    }
-    const lcpInsight = insightsByNavigation.data.LargestContentfulPaint;
-    if (lcpInsight instanceof Error) {
+  #getPhaseData(): PhaseData[] {
+    if (!this.model) {
       return [];
     }
 
-    const timing = lcpInsight.lcpMs;
-    const phases = lcpInsight.phases;
+    const timing = this.model.lcpMs;
+    const phases = this.model.phases;
 
     if (!timing || !phases) {
       return [];
@@ -128,31 +106,20 @@ export class LCPPhases extends BaseInsight {
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     this.#overlay = null;
 
-    if (!this.data.insights || !this.data.insightSetKey) {
-      return [];
-    }
-    const {insightSetKey: navigationId, insights} = this.data;
-
-    const insightsByNavigation = insights.get(navigationId);
-    if (!insightsByNavigation) {
-      return [];
-    }
-
-    const lcpInsight = insightsByNavigation.data.LargestContentfulPaint;
-    if (lcpInsight instanceof Error) {
+    if (!this.model) {
       return [];
     }
 
-    const phases = lcpInsight.phases;
-    const lcpTs = lcpInsight.lcpTs;
+    const phases = this.model.phases;
+    const lcpTs = this.model.lcpTs;
     if (!phases || !lcpTs) {
       return [];
     }
     const lcpMicroseconds = Trace.Types.Timing.MicroSeconds(Trace.Helpers.Timing.millisecondsToMicroseconds(lcpTs));
 
     const overlays: Overlays.Overlays.TimelineOverlay[] = [];
-    if (lcpInsight.lcpRequest) {
-      overlays.push({type: 'ENTRY_OUTLINE', entry: lcpInsight.lcpRequest, outlineReason: 'INFO'});
+    if (this.model.lcpRequest) {
+      overlays.push({type: 'ENTRY_OUTLINE', entry: this.model.lcpRequest, outlineReason: 'INFO'});
     }
 
     const sections = [];
@@ -219,7 +186,11 @@ export class LCPPhases extends BaseInsight {
     return overlays;
   }
 
-  #renderLCPPhases(phaseData: PhaseData[]): LitHtml.LitTemplate {
+  #renderContent(phaseData: PhaseData[]): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const rows = phaseData.map(({phase, percent}) => {
       const section = this.#overlay?.sections.find(section => phase === section.label);
       return {
@@ -233,57 +204,25 @@ export class LCPPhases extends BaseInsight {
 
     // clang-format off
     return html`
-    <div class="insights">
-      <devtools-performance-sidebar-insight .data=${{
-            title: this.userVisibleTitle,
-            description: this.description,
-            internalName: this.internalName,
-            expanded: this.isActive(),
-        } as SidebarInsight.InsightDetails}
-        @insighttoggleclick=${this.onSidebarClick}
-      >
-        <div slot="insight-content" class="insight-section">
-          ${html`<devtools-performance-table
-            .data=${{
-              insight: this,
-              headers: [i18nString(UIStrings.phase), i18nString(UIStrings.percentLCP)],
-              rows,
-            } as TableData}>
-          </devtools-performance-table>`}
-        </div>
-      </devtools-performance-sidebar-insight>
-    </div>`;
+      <div class="insight-section">
+        ${html`<devtools-performance-table
+          .data=${{
+            insight: this,
+            headers: [i18nString(UIStrings.phase), i18nString(UIStrings.percentLCP)],
+            rows,
+          } as TableData}>
+        </devtools-performance-table>`}
+      </div>`;
     // clang-format on
   }
 
-  #hasDataToRender(phaseData: PhaseData[]): boolean {
-    return phaseData ? phaseData.length > 0 : false;
-  }
-
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight =
-        Trace.Insights.Common.getInsight('LargestContentfulPaint', this.data.insights, this.data.insightSetKey);
-    if (!insight?.lcpEvent) {
-      return [];
-    }
-
-    const relatedEvents: Trace.Types.Events.Event[] = [insight.lcpEvent];
-    if (insight.lcpRequest) {
-      relatedEvents.push(insight.lcpRequest);
+  override render(): void {
+    if (!this.model) {
+      return;
     }
 
-    return relatedEvents;
-  }
-
-  override render(): void {
-    const phaseData = this.#getPhaseData(this.data.insights, this.data.insightSetKey);
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const shouldRender = matchesCategory && this.#hasDataToRender(phaseData);
-    const output = shouldRender ? this.#renderLCPPhases(phaseData) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    const phaseData = this.#getPhaseData();
+    this.renderWithContent(this.#renderContent(phaseData));
   }
 }
 

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

@@ -6,27 +6,17 @@ import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
-import * as Trace from '../../../../models/trace/trace.js';
+import type {RenderBlockingInsightModel} from '../../../../models/trace/insights/RenderBlocking.js';
+import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
+import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import {Category} from './types.js';
 
 const {html} = LitHtml;
 
 const UIStrings = {
-  /**
-   * @description Title of an insight that provides the user with the list of network requests that blocked and therefore slowed down the page rendering and becoming visible to the user.
-   */
-  title: 'Render blocking requests',
-  /**
-   * @description Text to describe that there are requests blocking rendering, which may affect LCP.
-   */
-  description: 'Requests are blocking the page\'s initial render, which may delay LCP. ' +
-      '[Deferring or inlining](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources/) ' +
-      'can move these network requests out of the critical path.',
   /**
    * @description Label to describe a network request (that happens to be render-blocking).
    */
@@ -40,20 +30,16 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/RenderBlocking.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class RenderBlockingRequests extends BaseInsight {
+export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-render-blocking-requests`;
-  override insightCategory: Category = Category.LCP;
   override internalName: string = 'render-blocking-requests';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    const insight = Trace.Insights.Common.getInsight('RenderBlocking', this.data.insights, this.data.insightSetKey);
-    if (!insight) {
+    if (!this.model) {
       return [];
     }
 
-    return insight.renderBlockingRequests.map(request => this.#createOverlayForRequest(request));
+    return this.model.renderBlockingRequests.map(request => this.#createOverlayForRequest(request));
   }
 
   #createOverlayForRequest(request: Trace.Types.Events.SyntheticNetworkRequest): Overlays.Overlays.EntryOutline {
@@ -64,63 +50,51 @@ export class RenderBlockingRequests extends BaseInsight {
     };
   }
 
-  #renderRenderBlocking(insightResult: Trace.Insights.Types.InsightResults['RenderBlocking']): LitHtml.TemplateResult {
-    const estimatedSavings = insightResult.metricSavings?.FCP;
+  override getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return this.model?.metricSavings?.FCP ?? null;
+  }
+
+  #renderContent(): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const MAX_REQUESTS = 3;
-    const topRequests = insightResult.renderBlockingRequests.slice(0, MAX_REQUESTS);
+    const topRequests = this.model.renderBlockingRequests.slice(0, MAX_REQUESTS);
 
     // clang-format off
     return html`
-        <div class="insights">
-          <devtools-performance-sidebar-insight .data=${{
-            title: this.userVisibleTitle,
-            description: this.description,
-            internalName: this.internalName,
-            expanded: this.isActive(),
-            estimatedSavingsTime: estimatedSavings,
-          }}
-          @insighttoggleclick=${this.onSidebarClick} >
-            <div slot="insight-content" class="insight-section">
-              ${html`<devtools-performance-table
-                .data=${{
-                  insight: this,
-                  headers: [i18nString(UIStrings.renderBlockingRequest), i18nString(UIStrings.duration)],
-                  rows: topRequests.map(request => ({
-                    values: [
-                      eventRef(request),
-                      i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(request.dur)),
-                    ],
-                    overlays: [this.#createOverlayForRequest(request)],
-                  })),
-                }}>
-              </devtools-performance-table>`}
-            </div>
-          </devtools-performance-sidebar-insight>
+      <div class="insight-section">
+        ${html`<devtools-performance-table
+          .data=${{
+            insight: this,
+            headers: [i18nString(UIStrings.renderBlockingRequest), i18nString(UIStrings.duration)],
+            rows: topRequests.map(request => ({
+              values: [
+                eventRef(request),
+                i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(request.dur)),
+              ],
+              overlays: [this.#createOverlayForRequest(request)],
+            })),
+          }}>
+        </devtools-performance-table>`}
       </div>`;
-            // clang-format on
-  }
-
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('RenderBlocking', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    // clang-format on
   }
 
   override render(): void {
-    const insight = Trace.Insights.Common.getInsight('RenderBlocking', this.data.insights, this.data.insightSetKey);
-    const hasBlockingRequests = insight?.renderBlockingRequests && insight.renderBlockingRequests.length > 0;
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = hasBlockingRequests && matchesCategory ? this.#renderRenderBlocking(insight) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    if (!this.model) {
+      return;
+    }
+
+    this.renderWithContent(this.#renderContent());
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'devtools-performance-render-blocking-requests': RenderBlockingRequests;
+    'devtools-performance-render-blocking-requests': RenderBlocking;
   }
 }
 
-customElements.define('devtools-performance-render-blocking-requests', RenderBlockingRequests);
+customElements.define('devtools-performance-render-blocking-requests', RenderBlocking);