chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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

@@ -10,10 +10,8 @@ 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 {BaseInsightComponent, 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;
 
@@ -45,6 +43,14 @@ const UIStrings = {
    *@example {Server response time} PH1
    */
   failedAriaLabel: 'Insight check failed: {PH1}',
+  /**
+   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
+   */
+  noLcp: 'No LCP detected',
+  /**
+   * @description Text status indicating that the Largest Contentful Paint (LCP) metric was text rather than an image. "LCP" is an acronym and should not be translated.
+   */
+  noLcpResource: 'No LCP resource detected because the LCP is not an image',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/LCPDiscovery.ts', UIStrings);
@@ -59,11 +65,7 @@ interface LCPImageDiscoveryData {
   estimatedSavings: Trace.Types.Timing.MilliSeconds|null;
 }
 
-function getImageData(model: LCPDiscoveryInsightModel|null): LCPImageDiscoveryData|null {
-  if (!model) {
-    return null;
-  }
-
+function getImageData(model: LCPDiscoveryInsightModel): LCPImageDiscoveryData|null {
   if (model.lcpRequest === undefined) {
     return null;
   }
@@ -98,8 +100,7 @@ function getImageData(model: LCPDiscoveryInsightModel|null): LCPImageDiscoveryDa
 }
 
 export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel> {
-  static override readonly litTagName = LitHtml.literal`devtools-performance-lcp-discovery`;
-  override insightCategory: Category = Category.LCP;
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-lcp-discovery`;
   override internalName: string = 'lcp-discovery';
 
   #adviceIcon(didFail: boolean, label: string): LitHtml.TemplateResult {
@@ -124,6 +125,10 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
   }
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
+    if (!this.model) {
+      return [];
+    }
+
     const imageResults = getImageData(this.model);
     if (!imageResults || !imageResults.discoveryDelay) {
       return [];
@@ -160,88 +165,50 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
     ];
   }
 
-  #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">${i18n.ByteUtilities.bytesToString(imageData.request.args.data.decodedBodyLength ?? 0)}</span>
-        </span>
-      </div>`;
-    // clang-format on
+    return getImageData(this.model)?.estimatedSavings ?? null;
   }
 
-  #renderDiscovery(imageData: LCPImageDiscoveryData): LitHtml.LitTemplate {
+  override renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
 
+    const imageData = getImageData(this.model);
+    if (!imageData) {
+      if (!this.model.lcpEvent) {
+        return html`<div class="insight-section">${i18nString(UIStrings.noLcp)}</div>`;
+      }
+      return html`<div class="insight-section">${i18nString(UIStrings.noLcpResource)}</div>`;
+    }
+
     // clang-format off
     return html`
-        <div class="insights">
-          <devtools-performance-sidebar-insight .data=${{
-            title: this.model.title,
-            description: this.model.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[] {
-    if (!this.model?.lcpEvent || !this.model?.lcpRequest) {
-      return [];
-    }
-
-    // TODO: add entire request initiator chain?
-    return [this.model.lcpEvent, this.model.lcpRequest];
-  }
-
-  override render(): void {
-    const imageResults = getImageData(this.model);
-    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});
-  }
 }
 
 declare global {

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

@@ -10,10 +10,8 @@ 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 {BaseInsightComponent, 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;
 
@@ -42,6 +40,10 @@ const UIStrings = {
    *@description Label used for the percentage a single phase/component/stage/section takes up of a larger duration.
    */
   percentLCP: '% of LCP',
+  /**
+   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
+   */
+  noLcp: 'No LCP detected',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/LCPPhases.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -53,8 +55,7 @@ interface PhaseData {
 }
 
 export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
-  static override readonly litTagName = LitHtml.literal`devtools-performance-lcp-by-phases`;
-  override insightCategory: Category = Category.LCP;
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-lcp-by-phases`;
   override internalName: string = 'lcp-by-phase';
   #overlay: Overlays.Overlays.TimespanBreakdown|null = null;
 
@@ -189,11 +190,16 @@ export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
     return overlays;
   }
 
-  #renderLCPPhases(phaseData: PhaseData[]): LitHtml.LitTemplate {
+  override renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
 
+    const phaseData = this.#getPhaseData();
+    if (!phaseData.length) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noLcp)}</div>`;
+    }
+
     const rows = phaseData.map(({phase, percent}) => {
       const section = this.#overlay?.sections.find(section => phase === section.label);
       return {
@@ -207,57 +213,17 @@ export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
 
     // clang-format off
     return html`
-    <div class="insights">
-      <devtools-performance-sidebar-insight .data=${{
-            title: this.model.title,
-            description: this.model.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 = this.model;
-    if (!insight?.lcpEvent) {
-      return [];
-    }
-
-    const relatedEvents: Trace.Types.Events.Event[] = [insight.lcpEvent];
-    if (insight.lcpRequest) {
-      relatedEvents.push(insight.lcpRequest);
-    }
-
-    return relatedEvents;
-  }
-
-  override render(): void {
-    const phaseData = this.#getPhaseData();
-    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});
-  }
 }
 
 declare global {

package/front_end/panels/timeline/components/insights/README.md

@@ -24,42 +24,28 @@ You will have to define 4 properties on your component:
 
 > Note that in most components, we use private methods and variables for storing this data, but because we are extending a base class, these are all `protected` instead.
 
-## 2. override the `render` method
+## 2. override the `renderContent` method
 
-You should then use `override render(): void` to implement the render method and follow the usual patterns of all our custom elements.
+You should then use `override renderContent(): LitHtml.LitTemplate` to implement the render method and follow the usual patterns of all our custom elements.
 
 You can use the `shouldRenderForCategory` helper method to determine if the insight should even be shown or not. If it should not, you can render nothing:
 
 ```ts
-override render(): void {
+override renderContent(): LitHtml.LitTemplate {
   const matchesCategory = shouldRenderForCategory({
     activeCategory: this.data.activeCategory,
     insightCategory: this.insightCategory,
   });
-  const output = matchesCategory ? this.#renderMyInsight() : LitHtml.nothing;
-  LitHtml.render(output, this.shadow, {host: this});
-}
-```
-
-Within your `renderMyInsight` method (please choose a better name!), you should use the `SidebarInsight` component and use its `slot`s to place your content in. You also have access to the `this.isActive()` method to determine if this insight is expanded or not.
+  if (!matchesCategory) {
+    return LitHtml.nothing;
+  }
 
-```ts
-<${SidebarInsight.SidebarInsight.litTagName} .data=${{
-  title: this.userVisibleTitle,
-  description: this.description,
-  expanded: this.isActive(),
-}}
-@insighttoggleclick=${this.onSidebarClick}
->
-  <div slot="insight-content" class="insight-section">
-    <!-- this content will be shown below the border in expanded mode -->
-  </div>
-</${SidebarInsight.SidebarInsight}>
+  return LitHtml.html`
+    <div class="insight-section">Insight content goes here</div>
+  `;
+}
 ```
 
-If the content of your insight has multiple sections, remove `class="insight-section"` from the slot and place each section
-in its own `<div class="insight-section">` inside the slot.
-
 ## 3. Override the `createOverlays()` method
 
 If your component should render overlays when it is expanded, you will need to define those in the `createOverlays` method.

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

@@ -11,9 +11,8 @@ 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 {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
-import {Category} from './types.js';
 
 const {html} = LitHtml;
 
@@ -26,14 +25,17 @@ const UIStrings = {
    *@description Label used for a time duration.
    */
   duration: 'Duration',
+  /**
+   * @description Text status indicating that no requests blocked the initial render of a navigation
+   */
+  noRenderBlocking: 'No render blocking requests for this navigation',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/RenderBlocking.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
-  static override readonly litTagName = LitHtml.literal`devtools-performance-render-blocking-requests`;
-  override insightCategory: Category = Category.LCP;
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-render-blocking-requests`;
   override internalName: string = 'render-blocking-requests';
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
@@ -52,59 +54,41 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
     };
   }
 
-  #renderRenderBlocking(insightResult: Trace.Insights.Types.InsightModels['RenderBlocking']): LitHtml.LitTemplate {
+  override getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return this.model?.metricSavings?.FCP ?? null;
+  }
+
+  override renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
 
-    const estimatedSavings = insightResult.metricSavings?.FCP;
     const MAX_REQUESTS = 3;
-    const topRequests = insightResult.renderBlockingRequests.slice(0, MAX_REQUESTS);
+    const topRequests = this.model.renderBlockingRequests.slice(0, MAX_REQUESTS);
+
+    if (!topRequests.length) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noRenderBlocking)}</div>`;
+    }
 
     // clang-format off
     return html`
-        <div class="insights">
-          <devtools-performance-sidebar-insight .data=${{
-            title: this.model.title,
-            description: this.model.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>`;
-            // clang-format on
-  }
-
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    return this.model?.relatedEvents ?? [];
-  }
-
-  override render(): void {
-    const model = this.model;
-    const hasBlockingRequests = model?.renderBlockingRequests && model.renderBlockingRequests.length > 0;
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = hasBlockingRequests && matchesCategory ? this.#renderRenderBlocking(model) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+      <div class="insight-section">
+        <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
   }
 }