chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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

@@ -0,0 +1,304 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../../../../ui/components/markdown_view/markdown_view.js';
+
+import * as i18n from '../../../../core/i18n/i18n.js';
+import type {InsightModel} from '../../../../models/trace/insights/types.js';
+import type * as Trace from '../../../../models/trace/trace.js';
+import * as Buttons from '../../../../ui/components/buttons/buttons.js';
+import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
+import type * as Overlays from '../../overlays/overlays.js';
+import {md} from '../../utils/Helpers.js';
+
+import baseInsightComponentStyles from './baseInsightComponent.css.js';
+import * as SidebarInsight from './SidebarInsight.js';
+import type {TableState} from './Table.js';
+
+const {html} = LitHtml;
+
+const UIStrings = {
+  /**
+   * @description Text to tell the user the estimated time or size savings for this insight. "&" means "and" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
+   * @example {401 ms} PH1
+   * @example {112 kB} PH1
+   */
+  estimatedSavings: 'Est savings: {PH1}',
+  /**
+   * @description Text to tell the user the estimated time and size savings for this insight. "&" means "and", "Est" means "Estimated" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
+   * @example {401 ms} PH1
+   * @example {112 kB} PH2
+   */
+  estimatedSavingsTimingAndBytes: 'Est savings: {PH1} & {PH2}',
+  /**
+   * @description Used for screen-readers as a label on the button to expand an insight to view details
+   * @example {LCP by phase} PH1
+   */
+  viewDetails: 'View details for {PH1}',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/BaseInsightComponent.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface BaseInsightData {
+  bounds: Trace.Types.Timing.TraceWindowMicroSeconds|null;
+  /** The key into `insights` that contains this particular insight. */
+  insightSetKey: string|null;
+}
+
+export abstract class BaseInsightComponent<T extends InsightModel<{}>> extends HTMLElement {
+  abstract internalName: string;
+  // So we can use the TypeScript BaseInsight class without getting warnings
+  // about litTagName. Every child should overrwrite this.
+  static readonly litTagName = LitHtml.StaticHtml.literal``;
+
+  readonly #shadowRoot = this.attachShadow({mode: 'open'});
+
+  #selected = false;
+  #model: T|null = null;
+
+  get model(): T|null {
+    return this.#model;
+  }
+
+  protected data: BaseInsightData = {
+    bounds: null,
+    insightSetKey: null,
+  };
+
+  // eslint-disable-next-line rulesdir/no-bound-component-methods
+  readonly #boundRender = this.#render.bind(this);
+  readonly sharedTableState: TableState = {
+    selectedRowEl: null,
+    selectionIsSticky: false,
+  };
+  #initialOverlays: Overlays.Overlays.TimelineOverlay[]|null = null;
+
+  protected scheduleRender(): void {
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  connectedCallback(): void {
+    this.#shadowRoot.adoptedStyleSheets.push(baseInsightComponentStyles);
+    this.setAttribute('jslog', `${VisualLogging.section(`timeline.insights.${this.internalName}`)}`);
+    // Used for unit test purposes when querying the DOM.
+    this.dataset.insightName = this.internalName;
+  }
+
+  set selected(selected: boolean) {
+    if (!this.#selected && selected) {
+      this.dispatchEvent(
+          new SidebarInsight.InsightProvideOverlays(this.getInitialOverlays(), {updateTraceWindow: true}));
+    }
+
+    this.#selected = selected;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  get selected(): boolean {
+    return this.#selected;
+  }
+
+  set model(model: T) {
+    this.#model = model;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set insightSetKey(insightSetKey: string|null) {
+    this.data.insightSetKey = insightSetKey;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  get bounds(): Trace.Types.Timing.TraceWindowMicroSeconds|null {
+    return this.data.bounds;
+  }
+
+  set bounds(bounds: Trace.Types.Timing.TraceWindowMicroSeconds|null) {
+    this.data.bounds = bounds;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #dispatchInsightToggle(): void {
+    if (this.#selected) {
+      this.dispatchEvent(new SidebarInsight.InsightDeactivated());
+      return;
+    }
+
+    if (!this.data.insightSetKey) {
+      // Shouldn't happen, but needed to satisfy TS.
+      return;
+    }
+
+    this.sharedTableState.selectedRowEl?.classList.remove('selected');
+    this.sharedTableState.selectedRowEl = null;
+    this.sharedTableState.selectionIsSticky = false;
+
+    this.dispatchEvent(new SidebarInsight.InsightActivated(this.model, this.data.insightSetKey));
+  }
+
+  #renderHoverIcon(insightIsActive: boolean): LitHtml.TemplateResult {
+    // clang-format off
+    const containerClasses = LitHtml.Directives.classMap({
+      'insight-hover-icon': true,
+      active: insightIsActive,
+    });
+    return html`
+      <div class=${containerClasses} inert>
+        <devtools-button .data=${{
+          variant: Buttons.Button.Variant.ICON,
+          iconName: 'chevron-down',
+          size: Buttons.Button.Size.SMALL,
+        } as Buttons.Button.ButtonData}
+      ></devtools-button>
+      </div>
+
+    `;
+    // clang-format on
+  }
+
+  /**
+   * Ensure that if the user presses enter or space on a header, we treat it
+   * like a click and toggle the insight.
+   */
+  #handleHeaderKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.#dispatchInsightToggle();
+    }
+  }
+
+  /**
+   * Replaces the initial insight overlays with the ones provided.
+   *
+   * If `overlays` is null, reverts back to the initial overlays.
+   *
+   * This allows insights to provide an initial set of overlays,
+   * and later temporarily replace all of those insights with a different set.
+   * This enables the hover/click table interactions.
+   */
+  toggleTemporaryOverlays(
+      overlays: Overlays.Overlays.TimelineOverlay[]|null, options: Overlays.Overlays.TimelineOverlaySetOptions): void {
+    if (!this.#selected) {
+      return;
+    }
+
+    this.dispatchEvent(new SidebarInsight.InsightProvideOverlays(overlays ?? this.getInitialOverlays(), options));
+  }
+
+  getInitialOverlays(): Overlays.Overlays.TimelineOverlay[] {
+    if (this.#initialOverlays) {
+      return this.#initialOverlays;
+    }
+
+    this.#initialOverlays = this.createOverlays();
+    return this.#initialOverlays;
+  }
+
+  protected abstract createOverlays(): Overlays.Overlays.TimelineOverlay[];
+
+  protected abstract renderContent(): LitHtml.LitTemplate;
+
+  #render(): void {
+    if (!this.model) {
+      return;
+    }
+
+    const output = this.renderContent();
+    this.#renderWithContent(output);
+  }
+
+  getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return null;
+  }
+
+  getEstimatedSavingsBytes(): number|null {
+    return null;
+  }
+
+  #getEstimatedSavingsString(): string|null {
+    const savingsTime = this.getEstimatedSavingsTime();
+    const savingsBytes = this.getEstimatedSavingsBytes();
+
+    let timeString, bytesString;
+    if (savingsTime) {
+      timeString = i18n.TimeUtilities.millisToString(savingsTime);
+    }
+    if (savingsBytes) {
+      bytesString = i18n.ByteUtilities.bytesToString(savingsBytes);
+    }
+
+    if (timeString && bytesString) {
+      return i18nString(UIStrings.estimatedSavingsTimingAndBytes, {
+        PH1: timeString,
+        PH2: bytesString,
+      });
+    }
+    if (timeString) {
+      return i18nString(UIStrings.estimatedSavings, {
+        PH1: timeString,
+      });
+    }
+    if (bytesString) {
+      return i18nString(UIStrings.estimatedSavings, {
+        PH1: bytesString,
+      });
+    }
+
+    return null;
+  }
+
+  #renderWithContent(content: LitHtml.LitTemplate): void {
+    if (!this.#model) {
+      LitHtml.render(LitHtml.nothing, this.#shadowRoot, {host: this});
+      return;
+    }
+
+    const containerClasses = LitHtml.Directives.classMap({
+      insight: true,
+      closed: !this.#selected,
+    });
+    const estimatedSavingsString = this.#getEstimatedSavingsString();
+
+    // clang-format off
+    const output = html`
+      <div class=${containerClasses}>
+        <header @click=${this.#dispatchInsightToggle}
+          @keydown=${this.#handleHeaderKeyDown}
+          jslog=${VisualLogging.action(`timeline.toggle-insight.${this.internalName}`).track({click: true})}
+          tabIndex="0"
+          role="button"
+          aria-expanded=${this.#selected}
+          aria-label=${i18nString(UIStrings.viewDetails, {PH1: this.#model.title})}
+        >
+          ${this.#renderHoverIcon(this.#selected)}
+          <h3 class="insight-title">${this.#model?.title}</h3>
+          ${estimatedSavingsString ?
+            html`
+            <slot name="insight-savings" class="insight-savings">
+              ${estimatedSavingsString}
+            </slot>
+          </div>`
+          : LitHtml.nothing}
+        </header>
+        ${this.#selected ? html`
+          <div class="insight-body">
+            <div class="insight-description">${md(this.#model.description)}</div>
+            <div class="insight-content">${content}</div>
+          </div>`
+          : LitHtml.nothing
+        }
+      </div>
+    `;
+    // clang-format on
+
+    LitHtml.render(output, this.#shadowRoot, {host: this});
+
+    if (this.#selected) {
+      requestAnimationFrame(() => requestAnimationFrame(() => this.scrollIntoViewIfNeeded()));
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {
+  getCleanTextContentFromElements,
+  getCleanTextContentFromSingleElement,
+  renderElementIntoDOM,
+} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../../testing/TraceLoader.js';
+import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
+
+import * as Insights from './insights.js';
+
+describeWithEnvironment('CLSCulprits component', () => {
+  it('renders unsized image culprits', async function() {
+    const traceData = await TraceLoader.traceEngine(this, 'unsized-images.json.gz');
+    const firstNavInsights = traceData.insights?.values().next()?.value;
+    assert.isOk(firstNavInsights);
+    const clsModel = firstNavInsights.model.CLSCulprits;
+    const component = new Insights.CLSCulprits.CLSCulprits();
+    component.model = clsModel;
+    component.insightSetKey = firstNavInsights.id;
+    component.bounds = traceData.parsedTrace.Meta.traceBounds;
+    component.selected = true;
+
+    renderElementIntoDOM(component);
+    await RenderCoordinator.done();
+    assert.isOk(component.shadowRoot);
+
+    const titleText = getCleanTextContentFromSingleElement(component.shadowRoot, '.insight-title');
+    assert.strictEqual(titleText, 'Layout shift culprits');
+
+    const worstClusterText = getCleanTextContentFromSingleElement(component.shadowRoot, '.worst-cluster');
+    assert.strictEqual(worstClusterText, 'Worst cluster: Layout shift cluster @ 1.37 s');
+
+    const culpritsList = component.shadowRoot.querySelector<HTMLUListElement>('.worst-culprits');
+    assert.isOk(culpritsList);
+    const culpritsText = getCleanTextContentFromElements(culpritsList, 'li');
+    // There are two shifts hence the two culprits.
+    assert.deepEqual(culpritsText, ['Unsized Images', 'Unsized Images']);
+  });
+});

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

@@ -8,9 +8,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} from './BaseInsightComponent.js';
 import {EventReferenceClick} from './EventRef.js';
-import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
-import {Category} from './types.js';
 
 const {html} = LitHtml;
 
@@ -48,13 +47,20 @@ 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_);
 
 export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
-  static override readonly litTagName = LitHtml.literal`devtools-performance-cls-culprits`;
-  override insightCategory: Category = Category.CLS;
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-cls-culprits`;
   override internalName: string = 'cls-culprits';
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
@@ -127,64 +133,41 @@ export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
     this.dispatchEvent(new EventReferenceClick(event));
   }
 
-  #render(culprits: Array<string>, worstCluster: Trace.Types.Events.SyntheticLayoutShiftCluster): LitHtml.LitTemplate {
-    if (!this.model) {
+  override renderContent(): LitHtml.LitTemplate {
+    if (!this.model || !this.bounds) {
       return LitHtml.nothing;
     }
 
-    const ts = Trace.Types.Timing.MicroSeconds(worstCluster.ts - (this.data.parsedTrace?.Meta.traceBounds.min ?? 0));
-    const clusterTs = i18n.TimeUtilities.formatMicroSecondsTime(ts);
-
-    // TODO(crbug.com/369102516): use Table for hover/click ux.
-    // 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(),
-            }}
-            @insighttoggleclick=${this.onSidebarClick}>
-                <div slot="insight-content" class="insight-section">
-                  <span class="worst-cluster">${i18nString(UIStrings.worstCluster)}: <button type="button" class="timeline-link" @click=${() => this.#clickEvent(worstCluster)}>${i18nString(UIStrings.layoutShiftCluster, {PH1: clusterTs})}</button></span>
-                    <p>${i18nString(UIStrings.topCulprits)}:</p>
-                        ${culprits.map(culprit => {
-                          return html `
-                            <li>${culprit}</li>
-                          `;
-                        })}
-                </div>
-            </devtools-performance-sidebar-insight>
-        </div>`;
-              // clang-format on
-  }
-
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    return this.model?.relatedEvents ?? [];
-  }
-
-  override render(): void {
-    if (!this.model) {
-      return;
+    if (!this.model.clusters.length || !this.model.worstCluster) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noLayoutShifts)}</div>`;
     }
 
+    const worstCluster = this.model.worstCluster;
     const culpritsByShift = this.model.shifts;
-    const clusters = this.model.clusters ?? [];
-    if (!clusters.length || !this.model.worstCluster) {
-      return;
-    }
 
-    const causes = this.getTopCulprits(this.model.worstCluster, culpritsByShift);
+    // TODO: getTopCulprits needs to move to model.
+    const culprits = this.getTopCulprits(worstCluster, culpritsByShift);
+    if (culprits.length === 0) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noCulprits)}</div>`;
+    }
 
-    const hasCulprits = causes.length > 0;
+    const ts = Trace.Types.Timing.MicroSeconds(worstCluster.ts - this.bounds.min);
+    const clusterTs = i18n.TimeUtilities.formatMicroSecondsTime(ts);
 
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = hasCulprits && matchesCategory ? this.#render(causes, this.model.worstCluster) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    // clang-format off
+    return html`
+      <div class="insight-section">
+        <span class="worst-cluster">${i18nString(UIStrings.worstCluster)}: <button type="button" class="timeline-link" @click=${() => this.#clickEvent(worstCluster)}>${i18nString(UIStrings.layoutShiftCluster, {PH1: clusterTs})}</button></span>
+          <p class="list-title">${i18nString(UIStrings.topCulprits)}:</p>
+          <ul class="worst-culprits">
+            ${culprits.map(culprit => {
+              return html `
+                <li>${culprit}</li>
+              `;
+            })}
+          </ul>
+      </div>`;
+    // clang-format on
   }
 }
 

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

@@ -0,0 +1,62 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// 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 * as i18n from '../../../../core/i18n/i18n.js';
+import type {DOMSizeInsightModel} from '../../../../models/trace/insights/DOMSize.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import type * as Overlays from '../../overlays/overlays.js';
+
+import {BaseInsightComponent} from './BaseInsightComponent.js';
+
+const UIStrings = {
+  /**
+   * @description Text status indicating that browser operations to re-render the page were not impacted by the size of the DOM. "DOM" is an acronym and should not be translated.
+   */
+  noLargeRenderTasks: 'No rendering tasks impacted by DOM size',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/DOMSize.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {html} = LitHtml;
+
+export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-dom-size`;
+  override internalName: string = 'dom-size';
+
+  override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
+    if (!this.model) {
+      return [];
+    }
+
+    const entries = [...this.model.largeStyleRecalcs, ...this.model.largeLayoutUpdates];
+    return entries.map(entry => ({
+                         type: 'ENTRY_OUTLINE',
+                         entry,
+                         outlineReason: 'ERROR',
+                       }));
+  }
+
+  override renderContent(): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
+    if (!this.model.largeStyleRecalcs.length && !this.model.largeLayoutUpdates.length) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noLargeRenderTasks)}</div>`;
+    }
+
+    return LitHtml.nothing;
+  }
+}
+
+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

@@ -10,8 +10,7 @@ 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 {Category} from './types.js';
+import {BaseInsightComponent} from './BaseInsightComponent.js';
 
 const {html} = LitHtml;
 
@@ -68,8 +67,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Do
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
-  static override readonly litTagName = LitHtml.literal`devtools-performance-document-latency`;
-  override insightCategory: Category = Category.ALL;
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-document-latency`;
   override internalName: string = 'document-latency';
 
   #check(didPass: boolean, good: string, bad: string): LitHtml.TemplateResult {
@@ -145,62 +143,38 @@ export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsight
     return overlays;
   }
 
-  #renderInsight(): LitHtml.LitTemplate {
-    if (!this.model?.data) {
-      return LitHtml.nothing;
-    }
-
-    // clang-format off
-    return html`
-    <div class="insights">
-      <devtools-performance-sidebar-insight .data=${{
-            title: this.model.title,
-            description: this.model.description,
-            expanded: this.isActive(),
-            internalName: this.internalName,
-            estimatedSavingsTime: this.model.metricSavings?.FCP,
-            estimatedSavingsBytes: this.model.data.uncompressedResponseBytes,
-        }}
-        @insighttoggleclick=${this.onSidebarClick}
-      >
-        <div slot="insight-content" class="insight-section">
-          <ul class="insight-results insight-icon-results">
-            <li class="insight-entry">
-              ${this.#check(this.model.data.redirectDuration === 0,
-                i18nString(UIStrings.passingRedirects), i18nString(UIStrings.failedRedirects))}
-            </li>
-            <li class="insight-entry">
-              ${this.#check(!this.model.data.serverResponseTooSlow,
-                i18nString(UIStrings.passingServerResponseTime), i18nString(UIStrings.failedServerResponseTime))}
-            </li>
-            <li class="insight-entry">
-              ${this.#check(this.model.data.uncompressedResponseBytes === 0,
-                i18nString(UIStrings.passingTextCompression), i18nString(UIStrings.failedTextCompression))}
-            </li>
-          </ul>
-        </div>
-      </devtools-performance-sidebar-insight>
-    </div>`;
-        // clang-format on
+  override getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return this.model?.metricSavings?.FCP ?? null;
   }
 
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    return this.model?.relatedEvents ?? [];
+  override getEstimatedSavingsBytes(): number|null {
+    return this.model?.data?.uncompressedResponseBytes ?? null;
   }
 
-  override render(): void {
-    if (this.model?.data === undefined) {
-      return;
+  override renderContent(): LitHtml.LitTemplate {
+    if (!this.model?.data) {
+      return LitHtml.nothing;
     }
 
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const hasFailure = this.model?.data?.redirectDuration > 0 || this.model?.data?.serverResponseTooSlow ||
-        this.model.data.uncompressedResponseBytes > 0;
-    const output = (matchesCategory && hasFailure) ? this.#renderInsight() : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    // clang-format off
+    return html`
+      <div class="insight-section">
+        <ul class="insight-results insight-icon-results">
+          <li class="insight-entry">
+            ${this.#check(this.model.data.redirectDuration === 0,
+              i18nString(UIStrings.passingRedirects), i18nString(UIStrings.failedRedirects))}
+          </li>
+          <li class="insight-entry">
+            ${this.#check(!this.model.data.serverResponseTooSlow,
+              i18nString(UIStrings.passingServerResponseTime), i18nString(UIStrings.failedServerResponseTime))}
+          </li>
+          <li class="insight-entry">
+            ${this.#check(this.model.data.uncompressedResponseBytes === 0,
+              i18nString(UIStrings.passingTextCompression), i18nString(UIStrings.failedTextCompression))}
+          </li>
+        </ul>
+      </div>`;
+    // clang-format on
   }
 }