[RPP] Add descriptive empty state for all insights

https://screenshot.googleplex.com/3q5TSi5QT9pomTL

Bug: 382211674
Change-Id: I94493fdd4b7f04bd178ad86f07e07f1f97928a11
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6076300
Commit-Queue: Adam Raine <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>

Author: Adam Raine

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

@@ -47,6 +47,14 @@ const UIStrings = {
    * @description Text for a culprit type of Unsized images.
    */
   unsizedImages: 'Unsized Images',
+  /**
+   * @description Text status when there were no layout shifts detected.
+   */
+  noLayoutShifts: 'No layout shifts',
+  /**
+   * @description Text status when there no layout shifts culprits/root causes were found.
+   */
+  noCulprits: 'Could not detect any layout shift culprits',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/CLSCulprits.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -131,7 +139,7 @@ export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
     }
 
     if (!this.model.clusters.length || !this.model.worstCluster) {
-      return LitHtml.nothing;
+      return html`<div class="insight-section">${i18nString(UIStrings.noLayoutShifts)}</div>`;
     }
 
     const worstCluster = this.model.worstCluster;
@@ -140,7 +148,7 @@ export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
     // TODO: getTopCulprits needs to move to model.
     const culprits = this.getTopCulprits(worstCluster, culpritsByShift);
     if (culprits.length === 0) {
-      return LitHtml.nothing;
+      return html`<div class="insight-section">${i18nString(UIStrings.noCulprits)}</div>`;
     }
 
     const ts = Trace.Types.Timing.MicroSeconds(worstCluster.ts - this.bounds.min);

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

@@ -27,6 +27,10 @@ const UIStrings = {
    * @example {5} PH1
    */
   others: '{PH1} others',
+  /**
+   * @description Text status indicating that no potential optimizations were found for any image file
+   */
+  noOptimizableImages: 'No optimizable images',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/ImageDelivery.ts', UIStrings);
@@ -81,7 +85,7 @@ export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightMode
     }
 
     if (!rows.length) {
-      return LitHtml.nothing;
+      return html`<div class="insight-section">${i18nString(UIStrings.noOptimizableImages)}</div>`;
     }
 
     // clang-format off

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

@@ -38,6 +38,10 @@ const UIStrings = {
    *@description Text shown next to the interaction event's presentation delay time in the detail view.
    */
   presentationDelay: 'Presentation delay',
+  /**
+   * @description Text status indicating that no user interactions were detected.
+   */
+  noInteractions: 'No interactions detected',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/InteractionToNextPaint.ts', UIStrings);
@@ -97,7 +101,7 @@ export class InteractionToNextPaint extends BaseInsightComponent<INPInsightModel
   override renderContent(): LitHtml.LitTemplate {
     const event = this.model?.longestInteractionEvent;
     if (!event) {
-      return LitHtml.nothing;
+      return html`<div class="insight-section">${i18nString(UIStrings.noInteractions)}</div>`;
     }
 
     const time = (us: Trace.Types.Timing.MicroSeconds): string =>

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

@@ -43,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);
@@ -172,7 +180,10 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
 
     const imageData = getImageData(this.model);
     if (!imageData) {
-      return LitHtml.nothing;
+      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

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

@@ -40,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_);
@@ -192,6 +196,9 @@ export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
     }
 
     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);

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

@@ -25,6 +25,10 @@ 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);
@@ -63,7 +67,7 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
     const topRequests = this.model.renderBlockingRequests.slice(0, MAX_REQUESTS);
 
     if (!topRequests.length) {
-      return LitHtml.nothing;
+      return html`<div class="insight-section">${i18nString(UIStrings.noRenderBlocking)}</div>`;
     }
 
     // clang-format off

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

@@ -41,6 +41,11 @@ const UIStrings = {
    *@description Column name for a total sum.
    */
   total: 'Total',
+  /**
+   * @description Text status indicating that no CSS selector data was found.
+   */
+  enableSelectorData:
+      'No CSS selector data was found. CSS selector stats need to be enabled in the performance panel settings.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/SlowCSSSelector.ts', UIStrings);
@@ -126,6 +131,10 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
     const time = (us: Trace.Types.Timing.MicroSeconds): string =>
         i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(us));
 
+    if (!this.model.topMatchAttempts.length && !this.model.topElapsedMs.length) {
+      return html`<div class="insight-section">${i18nString(UIStrings.enableSelectorData)}</div>`;
+    }
+
     // clang-format off
     const sections = [html`
       <div class="insight-section">

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

@@ -22,6 +22,10 @@ const UIStrings = {
   columnTransferSize: 'Transfer size',
   /** Label for a table column that displays how much time each row spent blocking other work on the main thread, entries will be the number of milliseconds spent. */
   columnBlockingTime: 'Blocking time',
+  /**
+   * @description Text block indicating that no third party content was detected on the page
+   */
+  noThirdParties: 'No third parties found',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/ThirdParties.ts', UIStrings);
@@ -69,6 +73,9 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
     }
 
     const entries = [...this.model.summaryByEntity.entries()].filter(kv => kv[0] !== this.model?.firstPartyEntity);
+    if (!entries.length) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noThirdParties)}</div>`;
+    }
 
     const topTransferSizeEntries = entries.sort((a, b) => b[1].transferSize - a[1].transferSize).slice(0, 6);
     const topMainThreadTimeEntries = entries.sort((a, b) => b[1].mainThreadTime - a[1].mainThreadTime).slice(0, 6);