chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

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

@@ -2,42 +2,10 @@
 // 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 {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 './Helpers.js';
-import sidebarInsightStyles from './sidebarInsight.css.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/SidebarInsight.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
 export interface InsightDetails {
   title: string;
   description: string;
@@ -51,8 +19,8 @@ export class InsightActivated extends Event {
   static readonly eventName = 'insightactivated';
 
   constructor(
-      public name: string, public insightSetKey: string, public overlays: Overlays.Overlays.TimelineOverlay[],
-      public relatedEvents: Trace.Types.Events.Event[]) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      public model: InsightModel<any>, public insightSetKey: string) {
     super(InsightActivated.eventName, {bubbles: true, composed: true});
   }
 }
@@ -88,15 +56,6 @@ export class InsightProvideOverlays extends Event {
   }
 }
 
-export class InsightProvideRelatedEvents extends Event {
-  static readonly eventName = 'insightproviderelatedevents';
-
-  constructor(
-      public label: string, public events: Array<Trace.Types.Events.Event>, public activateInsight: () => void) {
-    super(InsightProvideRelatedEvents.eventName, {bubbles: true, composed: true});
-  }
-}
-
 declare global {
   interface GlobalEventHandlersEventMap {
     [InsightActivated.eventName]: InsightActivated;
@@ -104,158 +63,5 @@ declare global {
     [InsightSetHovered.eventName]: InsightSetHovered;
     [InsightSetZoom.eventName]: InsightSetZoom;
     [InsightProvideOverlays.eventName]: InsightProvideOverlays;
-    [InsightProvideRelatedEvents.eventName]: InsightProvideRelatedEvents;
   }
 }
-
-export class SidebarInsight extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #boundRender = this.#render.bind(this);
-
-  #insightTitle: string = '';
-  #insightDescription: string = '';
-  #insightInternalName: string = '';
-  #expanded: boolean = false;
-  #estimatedSavingsTime: Trace.Types.Timing.MilliSeconds|undefined = undefined;
-  #estimatedSavingsBytes: number|undefined = undefined;
-
-  set data(data: InsightDetails) {
-    this.#insightTitle = data.title;
-    this.#insightDescription = data.description;
-    this.#insightInternalName = data.internalName;
-    this.#expanded = data.expanded;
-    this.#estimatedSavingsTime = data.estimatedSavingsTime;
-    this.#estimatedSavingsBytes = data.estimatedSavingsBytes;
-
-    // Used for testing.
-    this.dataset.insightTitle = data.title;
-    if (data.expanded) {
-      this.dataset.insightExpanded = '';
-    } else {
-      delete this.dataset.insightExpanded;
-    }
-
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [sidebarInsightStyles];
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-
-  #dispatchInsightToggle(): void {
-    this.dispatchEvent(new CustomEvent('insighttoggleclick'));
-  }
-
-  #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();
-    }
-  }
-
-  #getEstimatedSavingsString(): string|null {
-    let timeString, bytesString;
-    if (this.#estimatedSavingsTime !== undefined && this.#estimatedSavingsTime > 0) {
-      timeString = i18n.TimeUtilities.millisToString(this.#estimatedSavingsTime);
-    }
-    if (this.#estimatedSavingsBytes !== undefined && this.#estimatedSavingsBytes > 0) {
-      bytesString = i18n.ByteUtilities.bytesToString(this.#estimatedSavingsBytes);
-    }
-
-    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;
-  }
-
-  #render(): void {
-    const containerClasses = LitHtml.Directives.classMap({
-      insight: true,
-      closed: !this.#expanded,
-    });
-    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.#insightInternalName}`).track({click: true})}
-          tabIndex="0"
-          role="button"
-          aria-expanded=${this.#expanded}
-          aria-label=${i18nString(UIStrings.viewDetails, {PH1: this.#insightTitle})}
-        >
-          ${this.#renderHoverIcon(this.#expanded)}
-          <h3 class="insight-title">${this.#insightTitle}</h3>
-          ${estimatedSavingsString ?
-            html`
-            <slot name="insight-savings" class="insight-savings">
-              ${estimatedSavingsString}
-            </slot>
-          </div>`
-          : LitHtml.nothing}
-        </header>
-        ${this.#expanded ? html`
-          <div class="insight-body">
-            <div class="insight-description">${this.#insightDescription ? md(this.#insightDescription) : LitHtml.nothing}</div>
-            <div class="insight-content">
-              <slot name="insight-content"></slot>
-            </div>
-          </div>`
-          : LitHtml.nothing
-        }
-      </div>
-    `;
-    // clang-format on
-    LitHtml.render(output, this.#shadow, {host: this});
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-sidebar-insight': SidebarInsight;
-  }
-}
-
-customElements.define('devtools-performance-sidebar-insight', SidebarInsight);

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

@@ -15,10 +15,8 @@ import type * as Linkifier from '../../../../ui/components/linkifier/linkifier.j
 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;
 
@@ -50,7 +48,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-slow-css-selector`;
-  override insightCategory: Category = Category.ALL;
   override internalName: string = 'slow-css-selector';
   #selectorLocations: Map<string, Protocol.CSS.SourceRange[]> = new Map();
 
@@ -119,7 +116,7 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
     return links;
   }
 
-  renderSlowCSSSelector(): LitHtml.LitTemplate {
+  #renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
@@ -131,80 +128,60 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
 
     // 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">
-            <div class="insight-section">
-              ${html`<devtools-performance-table
-                .data=${{
-                  insight: this,
-                  headers: [i18nString(UIStrings.total), ''],
-                  rows: [
-                    {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.model.totalElapsedMs)]},
-                    {values: [i18nString(UIStrings.matchAttempts), this.model.totalMatchAttempts]},
-                    {values: [i18nString(UIStrings.matchCount), this.model.totalMatchCount]},
-                  ],
-                } as TableData}>
-              </devtools-performance-table>`}
-            </div>
-            <div class="insight-section">
-              ${html`<devtools-performance-table
-                .data=${{
-                  insight: this,
-                  headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.elapsed)],
-                  rows: this.model.topElapsedMs.map(selector => {
-                    return {
-                      values: [
-                      html`${selector.selector} ${LitHtml.Directives.until(this.getSelectorLinks(cssModel, selector))}`,
-                      time(Trace.Types.Timing.MicroSeconds(selector['elapsed (us)']))],
-                    };
-                  }),
-                } as TableData}>
-              </devtools-performance-table>`}
-            </div>
-            <div class="insight-section">
-              ${html`<devtools-performance-table
-                .data=${{
-                  insight: this,
-                  headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.matchAttempts)],
-                  rows: this.model.topMatchAttempts.map(selector => {
-                    return {
-                      values: [
-                      html`${selector.selector} ${LitHtml.Directives.until(this.getSelectorLinks(cssModel, selector))}` as unknown as string,
-                      selector['match_attempts']],
-                    };
-                  }),
-                } as TableData}>
-              </devtools-performance-table>`}
-            </div>
-          </div>
-        </devtools-performance-sidebar-insight>
+      <div>
+        <div class="insight-section">
+          ${html`<devtools-performance-table
+            .data=${{
+              insight: this,
+              headers: [i18nString(UIStrings.total), ''],
+              rows: [
+                {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.model.totalElapsedMs)]},
+                {values: [i18nString(UIStrings.matchAttempts), this.model.totalMatchAttempts]},
+                {values: [i18nString(UIStrings.matchCount), this.model.totalMatchCount]},
+              ],
+            } as TableData}>
+          </devtools-performance-table>`}
+        </div>
+        <div class="insight-section">
+          ${html`<devtools-performance-table
+            .data=${{
+              insight: this,
+              headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.elapsed)],
+              rows: this.model.topElapsedMs.map(selector => {
+                return {
+                  values: [
+                  html`${selector.selector} ${LitHtml.Directives.until(this.getSelectorLinks(cssModel, selector))}`,
+                  time(Trace.Types.Timing.MicroSeconds(selector['elapsed (us)']))],
+                };
+              }),
+            } as TableData}>
+          </devtools-performance-table>`}
+        </div>
+        <div class="insight-section">
+          ${html`<devtools-performance-table
+            .data=${{
+              insight: this,
+              headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.matchAttempts)],
+              rows: this.model.topMatchAttempts.map(selector => {
+                return {
+                  values: [
+                  html`${selector.selector} ${LitHtml.Directives.until(this.getSelectorLinks(cssModel, selector))}` as unknown as string,
+                  selector['match_attempts']],
+                };
+              }),
+            } as TableData}>
+          </devtools-performance-table>`}
+        </div>
       </div>`;
     // clang-format on
   }
 
-  #hasDataToRender(): boolean {
-    return this.model !== null && this.model.topElapsedMs.length !== 0 && this.model.topMatchAttempts.length !== 0;
-  }
-
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    return this.model?.relatedEvents ?? [];
-  }
-
   override render(): void {
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const shouldRender = matchesCategory && this.#hasDataToRender();
-    const output = shouldRender ? this.renderSlowCSSSelector() : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    if (!this.model) {
+      return;
+    }
+
+    this.renderWithContent(this.#renderContent());
   }
 }
 

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

@@ -2,15 +2,18 @@
 // 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 ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import type {BaseInsightComponent} from './Helpers.js';
+import type * as BaseInsightComponent from './BaseInsightComponent.js';
 import tableStyles from './table.css.js';
 
 const {html} = LitHtml;
 
+type BaseInsightComponent = BaseInsightComponent.BaseInsightComponent<Trace.Insights.Types.InsightModel<{}>>;
+
 /**
  * @fileoverview An interactive table component.
  *
@@ -33,8 +36,7 @@ export type TableState = {
 };
 
 export interface TableData {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  insight: BaseInsightComponent<any>;
+  insight: BaseInsightComponent;
   headers: string[];
   rows: TableDataRow[];
 }
@@ -48,8 +50,7 @@ export class Table extends HTMLElement {
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  #insight?: BaseInsightComponent<any>;
+  #insight?: BaseInsightComponent;
   #state?: TableState;
   #headers?: string[];
   #rows?: TableDataRow[];

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

@@ -11,8 +11,7 @@ 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, shouldRenderForCategory} from './Helpers.js';
-import {Category} from './types.js';
+import {BaseInsightComponent} from './BaseInsightComponent.js';
 
 const {html} = LitHtml;
 
@@ -35,7 +34,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-third-parties`;
-  override insightCategory: Category = Category.ALL;
   override internalName: string = 'third-parties';
 
   #overlaysForEntity = new Map<Trace.Extras.ThirdParties.Entity, Overlays.Overlays.TimelineOverlay[]>();
@@ -70,7 +68,7 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
     return overlays;
   }
 
-  #render(entries: ThirdPartiesEntries): LitHtml.LitTemplate {
+  #renderContent(entries: ThirdPartiesEntries): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
@@ -80,67 +78,49 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
 
     // 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">
-                  <div class="insight-section">
-                    ${html`<devtools-performance-table
-                      .data=${{
-                        insight: this,
-                        headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnTransferSize)],
-                        rows: topTransferSizeEntries.map(([entity, summary]) => ({
-                          values: [
-                            entity.name,
-                            i18n.ByteUtilities.bytesToString(summary.transferSize),
-                          ],
-                          overlays: this.#overlaysForEntity.get(entity),
-                        })),
-                      }}>
-                    </devtools-performance-table>`}
-                  </div>
-
-                  <div class="insight-section">
-                    ${html`<devtools-performance-table
-                      .data=${{
-                        insight: this,
-                        headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnBlockingTime)],
-                        rows: topMainThreadTimeEntries.map(([entity, summary]) => ({
-                          values: [
-                            entity.name,
-                            i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(summary.mainThreadTime)),
-                          ],
-                          overlays: this.#overlaysForEntity.get(entity),
-                        })),
-                      }}>
-                    </devtools-performance-table>`}
-                  </div>
-                </div>
-            </devtools-performance-sidebar-insight>
-        </div>`;
+      <div>
+        <div class="insight-section">
+          ${html`<devtools-performance-table
+            .data=${{
+              insight: this,
+              headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnTransferSize)],
+              rows: topTransferSizeEntries.map(([entity, summary]) => ({
+                values: [
+                  entity.name,
+                  i18n.ByteUtilities.bytesToString(summary.transferSize),
+                ],
+                overlays: this.#overlaysForEntity.get(entity),
+              })),
+            }}>
+          </devtools-performance-table>`}
+        </div>
+
+        <div class="insight-section">
+          ${html`<devtools-performance-table
+            .data=${{
+              insight: this,
+              headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnBlockingTime)],
+              rows: topMainThreadTimeEntries.map(([entity, summary]) => ({
+                values: [
+                  entity.name,
+                  i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(summary.mainThreadTime)),
+                ],
+                overlays: this.#overlaysForEntity.get(entity),
+              })),
+            }}>
+          </devtools-performance-table>`}
+        </div>
+      </div>`;
     // clang-format on
   }
 
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    return this.model?.relatedEvents ?? [];
-  }
-
   override render(): void {
-    const model = this.model;
-    const entries = model && [...model.summaryByEntity.entries()].filter(kv => kv[0] !== model.firstPartyEntity);
-    const shouldShow = entries?.length;
-
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = shouldShow && matchesCategory ? this.#render(entries) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    if (!this.model) {
+      return;
+    }
+
+    const entries = [...this.model.summaryByEntity.entries()].filter(kv => kv[0] !== this.model?.firstPartyEntity);
+    this.renderWithContent(this.#renderContent(entries));
   }
 }
 

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

@@ -9,14 +9,12 @@ 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, shouldRenderForCategory} from './Helpers.js';
-import {Category} from './types.js';
+import {BaseInsightComponent} from './BaseInsightComponent.js';
 
 const {html} = LitHtml;
 
 export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-viewport`;
-  override insightCategory: Category = Category.INP;
   override internalName: string = 'viewport';
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
@@ -24,45 +22,36 @@ export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
     return [];
   }
 
-  #render(insight: Trace.Insights.Types.InsightModels['Viewport']): LitHtml.LitTemplate {
+  override getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return this.model?.metricSavings?.INP ?? null;
+  }
+
+  #renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
 
-    const backendNodeId = insight.viewportEvent?.args.data.node_id;
+    const backendNodeId = this.model.viewportEvent?.args.data.node_id;
 
     // 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: insight.metricSavings?.INP,
-            }}
-            @insighttoggleclick=${this.onSidebarClick}>
-              ${backendNodeId !== undefined ? html`<devtools-performance-node-link
-                .data=${{
-                  backendNodeId,
-                  options: {tooltip: insight.viewportEvent?.args.data.content},
-                }}>
-              </devtools-performance-node-link>` : LitHtml.nothing}
-            </devtools-performance-sidebar-insight>
-        </div>`;
-              // clang-format on
+      <div>
+        ${backendNodeId !== undefined ? html`<devtools-performance-node-link
+          .data=${{
+            backendNodeId,
+            options: {tooltip: this.model.viewportEvent?.args.data.content},
+          }}>
+        </devtools-performance-node-link>` : LitHtml.nothing}
+      </div>`;
+    // clang-format on
   }
 
   override render(): void {
-    const model = this.model;
-    const shouldShow = model && model.mobileOptimized === false;
+    if (!this.model) {
+      return;
+    }
 
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = shouldShow && matchesCategory ? this.#render(model) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    this.renderWithContent(this.#renderContent());
   }
 }