chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

package/front_end/panels/timeline/components/NetworkRequestTooltip.ts

@@ -1,7 +1,6 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/kit/kit.js';
 
@@ -10,6 +9,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as TimelineUtils from '../utils/utils.js';
 
@@ -59,32 +59,96 @@ const UIStrings = {
    */
   wasThrottled: 'Request was throttled ({PH1})',
 } as const;
+
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkRequestTooltip.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface NetworkTooltipData {
-  networkRequest: Trace.Types.Events.SyntheticNetworkRequest|null;
-  entityMapper: Trace.EntityMapper.EntityMapper|null;
+interface ViewInput {
+  networkRequest: Trace.Types.Events.SyntheticNetworkRequest;
+  entityMapper?: Trace.EntityMapper.EntityMapper;
+  throttlingTitle?: string;
 }
 
-export class NetworkRequestTooltip extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    networkRequest,
+    entityMapper,
+    throttlingTitle,
+  } = input;
+
+  const chipStyle = {
+    backgroundColor: `${colorForNetworkRequest(networkRequest)}`,
+  };
+  const url = new URL(networkRequest.args.data.url);
+  const entity = entityMapper ? entityMapper.entityForEvent(networkRequest) : null;
+  const originWithEntity = TimelineUtils.Helpers.formatOriginWithEntity(url, entity, true);
 
-  #data: NetworkTooltipData = {networkRequest: null, entityMapper: null};
+  const redirectsHtml = NetworkRequestTooltip.renderRedirects(networkRequest);
 
-  connectedCallback(): void {
-    this.#render();
+  // clang-format off
+  Lit.render(html`
+    <style>${networkRequestTooltipStyles}</style>
+    <div class="performance-card">
+      <div class="url">${Platform.StringUtilities.trimMiddle(url.href.replace(url.origin, ''), MAX_URL_LENGTH)}</div>
+      <div class="url url--host">${originWithEntity}</div>
+
+      <div class="divider"></div>
+      <div class="network-category">
+        <span class="network-category-chip" style=${Lit.Directives.styleMap(chipStyle)}>
+        </span>${networkResourceCategory(networkRequest)}
+      </div>
+      <div class="priority-row">${i18nString(UIStrings.priority)}: ${NetworkRequestTooltip.renderPriorityValue(networkRequest)}</div>
+      ${throttlingTitle ? html`
+        <div class="throttled-row">
+          ${i18nString(UIStrings.wasThrottled, {PH1: throttlingTitle})}
+        </div>` : nothing}
+      ${Trace.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(networkRequest) ?
+        html`<div class="render-blocking"> ${i18nString(UIStrings.renderBlocking)} </div>` :  Lit.nothing
+      }
+      <div class="divider"></div>
+
+      ${NetworkRequestTooltip.renderTimings(networkRequest)}
+
+      ${redirectsHtml ? html `
+        <div class="divider"></div>
+        ${redirectsHtml}
+      ` : Lit.nothing}
+    </div>
+  `, target);
+  // clang-format on
+};
+
+export class NetworkRequestTooltip extends UI.Widget.Widget {
+  static createWidgetElement(
+      request: Trace.Types.Events.SyntheticNetworkRequest,
+      entityMapper?: Trace.EntityMapper.EntityMapper): UI.Widget.WidgetElement<NetworkRequestTooltip> {
+    const widgetElement = document.createElement('devtools-widget') as UI.Widget.WidgetElement<NetworkRequestTooltip>;
+    widgetElement.widgetConfig = UI.Widget.widgetConfig(NetworkRequestTooltip, {
+      networkRequest: request,
+      entityMapper,
+    });
+    return widgetElement;
   }
 
-  set data(data: NetworkTooltipData) {
-    if (this.#data.networkRequest === data.networkRequest) {
-      return;
-    }
-    if (this.#data.entityMapper === data.entityMapper) {
-      return;
-    }
-    this.#data = {networkRequest: data.networkRequest, entityMapper: data.entityMapper};
-    this.#render();
+  #view: View;
+  #networkRequest?: Trace.Types.Events.SyntheticNetworkRequest;
+  #entityMapper?: Trace.EntityMapper.EntityMapper;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  set networkRequest(networkRequest: Trace.Types.Events.SyntheticNetworkRequest) {
+    this.#networkRequest = networkRequest;
+    this.requestUpdate();
+  }
+
+  set entityMapper(entityMapper: Trace.EntityMapper.EntityMapper|undefined) {
+    this.#entityMapper = entityMapper;
+    this.requestUpdate();
   }
 
   static renderPriorityValue(networkRequest: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult {
@@ -187,66 +251,27 @@ export class NetworkRequestTooltip extends HTMLElement {
     return null;
   }
 
-  #render(): void {
-    if (!this.#data.networkRequest) {
+  override performUpdate(): void {
+    if (!this.#networkRequest) {
       return;
     }
-    const chipStyle = {
-      backgroundColor: `${colorForNetworkRequest(this.#data.networkRequest)}`,
-    };
-    const url = new URL(this.#data.networkRequest.args.data.url);
-    const entity = (this.#data.entityMapper) ? this.#data.entityMapper.entityForEvent(this.#data.networkRequest) : null;
-    const originWithEntity = TimelineUtils.Helpers.formatOriginWithEntity(url, entity, true);
-
-    const redirectsHtml = NetworkRequestTooltip.renderRedirects(this.#data.networkRequest);
 
-    const sdkNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(this.#data.networkRequest);
-    const wasThrottled = sdkNetworkRequest &&
+    // TODO(crbug.com/466124088): Seems broken.
+    const sdkNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(this.#networkRequest);
+    const networkConditions = sdkNetworkRequest &&
         SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(
             sdkNetworkRequest.networkRequest);
+    let throttlingTitle: string|undefined = undefined;
+    if (networkConditions) {
+      throttlingTitle = typeof networkConditions.conditions.title === 'string' ? networkConditions.conditions.title :
+                                                                                 networkConditions.conditions.title();
+    }
 
-    // clang-format off
-    const output = html`
-      <style>${networkRequestTooltipStyles}</style>
-      <div class="performance-card">
-        <div class="url">${Platform.StringUtilities.trimMiddle(url.href.replace(url.origin, ''), MAX_URL_LENGTH)}</div>
-        <div class="url url--host">${originWithEntity}</div>
-
-        <div class="divider"></div>
-        <div class="network-category">
-          <span class="network-category-chip" style=${Lit.Directives.styleMap(chipStyle)}>
-          </span>${networkResourceCategory(this.#data.networkRequest)}
-        </div>
-        <div class="priority-row">${i18nString(UIStrings.priority)}: ${NetworkRequestTooltip.renderPriorityValue(this.#data.networkRequest)}</div>
-        ${wasThrottled ? html`
-        <div class="throttled-row">
-          ${i18nString(UIStrings.wasThrottled, {
-            PH1: typeof wasThrottled.conditions.title === 'string' ? wasThrottled.conditions.title :
-              wasThrottled.conditions.title()
-          })}
-        </div>` : nothing}
-        ${Trace.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#data.networkRequest) ?
-          html`<div class="render-blocking"> ${i18nString(UIStrings.renderBlocking)} </div>` :  Lit.nothing
-        }
-        <div class="divider"></div>
-
-        ${NetworkRequestTooltip.renderTimings(this.#data.networkRequest)}
-
-        ${redirectsHtml ? html `
-          <div class="divider"></div>
-          ${redirectsHtml}
-        ` : Lit.nothing}
-      </div>
-    `;
-    // clang-format on
-    Lit.render(output, this.#shadow, {host: this});
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-network-request-tooltip': NetworkRequestTooltip;
+    const input: ViewInput = {
+      networkRequest: this.#networkRequest,
+      entityMapper: this.#entityMapper,
+      throttlingTitle,
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }
-
-customElements.define('devtools-performance-network-request-tooltip', NetworkRequestTooltip);

package/front_end/panels/timeline/components/Sidebar.ts

@@ -4,7 +4,6 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import type * as Trace from '../../../models/trace/trace.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 
 import {InsightActivated, InsightDeactivated} from './insights/SidebarInsight.js';
@@ -156,7 +155,7 @@ export class SidebarWidget extends UI.Widget.VBox {
 }
 
 class InsightsView extends UI.Widget.VBox {
-  #component = new SidebarInsightsTab();
+  #component = SidebarInsightsTab.createWidgetElement();
 
   constructor() {
     super();
@@ -165,21 +164,31 @@ class InsightsView extends UI.Widget.VBox {
   }
 
   setParsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace|null): void {
-    this.#component.parsedTrace = parsedTrace;
+    this.#component.widgetConfig = UI.Widget.widgetConfig(SidebarInsightsTab, {parsedTrace});
   }
 
   getActiveInsight(): ActiveInsight|null {
-    return this.#component.activeInsight;
+    const widget = this.#component.getWidget();
+    if (widget) {
+      return widget.activeInsight;
+    }
+
+    return null;
   }
 
   setActiveInsight(active: ActiveInsight|null, opts: {highlight: boolean}): void {
-    this.#component.activeInsight = active;
+    const widget = this.#component.getWidget();
+    if (!widget) {
+      return;
+    }
+
+    widget.activeInsight = active;
     if (opts.highlight && active) {
       // Wait for the rendering of the component to be done, otherwise we
       // might highlight the wrong insight. The UI needs to be fully
       // re-rendered before we can highlight the newly-expanded insight.
-      void RenderCoordinator.done().then(() => {
-        this.#component.highlightActiveInsight();
+      void widget.updateComplete.then(() => {
+        widget.highlightActiveInsight();
       });
     }
   }

package/front_end/panels/timeline/components/SidebarInsightsTab.ts

@@ -1,25 +1,149 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
-import './SidebarSingleInsightSet.js';
 
 import * 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 UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as Utils from '../utils/utils.js';
 
 import * as Insights from './insights/insights.js';
 import type {ActiveInsight} from './Sidebar.js';
 import sidebarInsightsTabStyles from './sidebarInsightsTab.css.js';
-import type {SidebarSingleInsightSet, SidebarSingleInsightSetData} from './SidebarSingleInsightSet.js';
+import {SidebarSingleInsightSet, type SidebarSingleInsightSetData} from './SidebarSingleInsightSet.js';
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
+
+interface ViewInput {
+  parsedTrace: Trace.TraceModel.ParsedTrace;
+  labels: string[];
+  activeInsightSet: Trace.Insights.Types.InsightSet|null;
+  activeInsight: ActiveInsight|null;
+  selectedCategory: Trace.Insights.Types.InsightCategory;
+  onInsightSetToggled: (insightSet: Trace.Insights.Types.InsightSet) => void;
+  onInsightSetHovered: (insightSet: Trace.Insights.Types.InsightSet) => void;
+  onInsightSetUnhovered: () => void;
+  onZoomClick: (insightSet: Trace.Insights.Types.InsightSet) => void;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    parsedTrace,
+    labels,
+    activeInsightSet,
+    activeInsight,
+    selectedCategory,
+    onInsightSetToggled,
+    onInsightSetHovered,
+    onInsightSetUnhovered,
+    onZoomClick,
+  } = input;
+
+  const insights = parsedTrace.insights;
+  if (!insights) {
+    return;
+  }
 
-export class SidebarInsightsTab extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+  const hasMultipleInsightSets = insights.size > 1;
+
+  // clang-format off
+  Lit.render(html`
+    <style>${sidebarInsightsTabStyles}</style>
+    <div class="insight-sets-wrapper">
+      ${[...insights.values()].map((insightSet, index) => {
+        const {id, url} = insightSet;
+        const data: SidebarSingleInsightSetData = {
+          insightSetKey: id,
+          activeCategory: selectedCategory,
+          activeInsight,
+          parsedTrace,
+        };
+        const selected = insightSet === activeInsightSet;
+
+        const contents = html`
+          <devtools-widget
+            data-insight-set-key=${id}
+            .widgetConfig=${widgetConfig(SidebarSingleInsightSet, {data})}
+          ></devtools-widget>
+        `;
+
+        if (hasMultipleInsightSets) {
+          return html`<details ?open=${selected}>
+            <summary
+              @click=${() => onInsightSetToggled(insightSet)}
+              @mouseenter=${() => onInsightSetHovered(insightSet)}
+              @mouseleave=${() => onInsightSetUnhovered()}
+              title=${url.href}>
+              ${renderDropdownIcon(selected)}
+              <span>${labels[index]}</span>
+              <span class='zoom-button'
+                @click=${(event: Event) => {
+                  event.stopPropagation();
+                  onZoomClick(insightSet);
+                }}
+              >
+                ${renderZoomButton(selected)}
+              </span>
+            </summary>
+            ${contents}
+          </details>`;
+        }
+
+        return contents;
+      })}
+    </div>
+  `, target);
+  // clang-format on
+};
+
+function renderZoomButton(insightSetToggled: boolean): Lit.TemplateResult {
+  const classes = Lit.Directives.classMap({
+    'zoom-icon': true,
+    active: insightSetToggled,
+  });
+
+  // clang-format off
+  return html`
+  <div class=${classes}>
+      <devtools-button .data=${{
+        variant: Buttons.Button.Variant.ICON,
+        iconName: 'center-focus-weak',
+        size: Buttons.Button.Size.SMALL,
+      } as Buttons.Button.ButtonData}
+    ></devtools-button></div>`;
+  // clang-format on
+}
+
+function renderDropdownIcon(insightSetToggled: boolean): Lit.TemplateResult {
+  const containerClasses = Lit.Directives.classMap({
+    'dropdown-icon': true,
+    active: insightSetToggled,
+  });
+
+  // clang-format off
+  return html`
+    <div class=${containerClasses}>
+      <devtools-button .data=${{
+        variant: Buttons.Button.Variant.ICON,
+        iconName: 'chevron-right',
+        size: Buttons.Button.Size.SMALL,
+      } as Buttons.Button.ButtonData}
+    ></devtools-button></div>
+  `;
+  // clang-format on
+}
+
+export class SidebarInsightsTab extends UI.Widget.Widget {
+  static createWidgetElement(): UI.Widget.WidgetElement<SidebarInsightsTab> {
+    const widgetElement = document.createElement('devtools-widget') as UI.Widget.WidgetElement<SidebarInsightsTab>;
+    return widgetElement;
+  }
+
+  #view: View;
   #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
   #activeInsight: ActiveInsight|null = null;
   #selectedCategory = Trace.Insights.Types.InsightCategory.ALL;
@@ -27,9 +151,14 @@ export class SidebarInsightsTab extends HTMLElement {
    * When a trace has sets of insights, we show an accordion with each
    * set within. A set can be specific to a single navigation, or include the
    * beginning of the trace up to the first navigation.
-   * You can only have one of these open at any time, and we track it via this ID.
+   * You can only have one of these open at any time.
    */
-  #selectedInsightSetKey: string|null = null;
+  #selectedInsightSet: Trace.Insights.Types.InsightSet|null = null;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
 
   // TODO(paulirish): add back a disconnectedCallback() to avoid memory leaks that doesn't cause b/372943062
 
@@ -39,14 +168,14 @@ export class SidebarInsightsTab extends HTMLElement {
     }
 
     this.#parsedTrace = data;
-    this.#selectedInsightSetKey = null;
+    this.#selectedInsightSet = null;
 
     if (this.#parsedTrace?.insights) {
       /** Select the first set. Filtering out trivial sets was done back in {@link Trace.Processor.#computeInsightsForInitialTracePeriod} */
-      this.#selectedInsightSetKey = [...this.#parsedTrace.insights.keys()].at(0) ?? null;
+      this.#selectedInsightSet = [...this.#parsedTrace.insights.values()].at(0) ?? null;
     }
 
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   get activeInsight(): ActiveInsight|null {
@@ -57,161 +186,69 @@ export class SidebarInsightsTab extends HTMLElement {
     if (active === this.#activeInsight) {
       return;
     }
+
     this.#activeInsight = active;
 
-    // Only update the insightSetKey if there is an active insight. Otherwise, closing an insight
+    // Only update selectedInsightSet if there is an active insight. Otherwise, closing an insight
     // would also collapse the insight set. Usually the proper insight set is already set because
     // the user has it open already in order for this setter to be called, but insights can also
     // be activated by clicking on a insight chip in the Summary panel, which may require opening
     // a different insight set.
     if (this.#activeInsight) {
-      this.#selectedInsightSetKey = this.#activeInsight.insightSetKey;
+      this.#selectedInsightSet = this.#parsedTrace?.insights?.get(this.#activeInsight.insightSetKey) ?? null;
     }
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
-  #insightSetToggled(id: string): void {
-    this.#selectedInsightSetKey = this.#selectedInsightSetKey === id ? null : id;
+  #onInsightSetToggled(insightSet: Trace.Insights.Types.InsightSet): void {
+    this.#selectedInsightSet = this.#selectedInsightSet === insightSet ? null : insightSet;
     // Update the active insight set.
-    if (this.#selectedInsightSetKey !== this.#activeInsight?.insightSetKey) {
-      this.dispatchEvent(new Insights.SidebarInsight.InsightDeactivated());
+    if (this.#selectedInsightSet?.id !== this.#activeInsight?.insightSetKey) {
+      this.element.dispatchEvent(new Insights.SidebarInsight.InsightDeactivated());
     }
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
-  #insightSetHovered(id: string): void {
-    const data = this.#parsedTrace?.insights?.get(id);
-    data && this.dispatchEvent(new Insights.SidebarInsight.InsightSetHovered(data.bounds));
+  #onInsightSetHovered(insightSet: Trace.Insights.Types.InsightSet): void {
+    this.element.dispatchEvent(new Insights.SidebarInsight.InsightSetHovered(insightSet.bounds));
   }
 
-  #insightSetUnhovered(): void {
-    this.dispatchEvent(new Insights.SidebarInsight.InsightSetHovered());
+  #onInsightSetUnhovered(): void {
+    this.element.dispatchEvent(new Insights.SidebarInsight.InsightSetHovered());
   }
 
-  #onZoomClick(event: Event, id: string): void {
-    event.stopPropagation();
-    const data = this.#parsedTrace?.insights?.get(id);
-    if (!data) {
-      return;
-    }
-    this.dispatchEvent(new Insights.SidebarInsight.InsightSetZoom(data.bounds));
-  }
-
-  #renderZoomButton(insightSetToggled: boolean): Lit.TemplateResult {
-    const classes = Lit.Directives.classMap({
-      'zoom-icon': true,
-      active: insightSetToggled,
-    });
-
-    // clang-format off
-    return html`
-    <div class=${classes}>
-        <devtools-button .data=${{
-          variant: Buttons.Button.Variant.ICON,
-          iconName: 'center-focus-weak',
-          size: Buttons.Button.Size.SMALL,
-        } as Buttons.Button.ButtonData}
-      ></devtools-button></div>`;
-    // clang-format on
-  }
-
-  #renderDropdownIcon(insightSetToggled: boolean): Lit.TemplateResult {
-    const containerClasses = Lit.Directives.classMap({
-      'dropdown-icon': true,
-      active: insightSetToggled,
-    });
-
-    // clang-format off
-    return html`
-      <div class=${containerClasses}>
-        <devtools-button .data=${{
-          variant: Buttons.Button.Variant.ICON,
-          iconName: 'chevron-right',
-          size: Buttons.Button.Size.SMALL,
-        } as Buttons.Button.ButtonData}
-      ></devtools-button></div>
-    `;
-    // clang-format on
+  #onZoomClick(insightSet: Trace.Insights.Types.InsightSet): void {
+    this.element.dispatchEvent(new Insights.SidebarInsight.InsightSetZoom(insightSet.bounds));
   }
 
   highlightActiveInsight(): void {
     if (!this.#activeInsight) {
       return;
     }
+
     // Find the right set for this insight via the set key.
-    const set = this.#shadow?.querySelector<SidebarSingleInsightSet>(
-        `devtools-performance-sidebar-single-navigation[data-insight-set-key="${this.#activeInsight.insightSetKey}"]`);
-    if (!set) {
-      return;
-    }
-    set.highlightActiveInsight();
+    const set = this.element.shadowRoot?.querySelector<UI.Widget.WidgetElement<SidebarSingleInsightSet>>(
+        `[data-insight-set-key="${this.#activeInsight.insightSetKey}"]`);
+    set?.getWidget()?.highlightActiveInsight();
   }
 
-  #render(): void {
+  override performUpdate(): void {
     if (!this.#parsedTrace?.insights) {
-      Lit.render(Lit.nothing, this.#shadow, {host: this});
       return;
     }
 
-    const insights = this.#parsedTrace.insights;
-    const hasMultipleInsightSets = insights.size > 1;
-    const labels = Utils.Helpers.createUrlLabels([...insights.values()].map(({url}) => url));
-
-    const contents =
-        // clang-format off
-     html`
-      <style>${sidebarInsightsTabStyles}</style>
-      <div class="insight-sets-wrapper">
-        ${[...insights.values()].map(({id, url}, index) => {
-          const data: SidebarSingleInsightSetData = {
-            insightSetKey: id,
-            activeCategory: this.#selectedCategory,
-            activeInsight: this.#activeInsight,
-            parsedTrace: this.#parsedTrace,
-          };
-
-          const contents = html`
-            <devtools-performance-sidebar-single-navigation
-              data-insight-set-key=${id}
-              .data=${data}>
-            </devtools-performance-sidebar-single-navigation>
-          `;
-
-          if (hasMultipleInsightSets) {
-            return html`<details
-              ?open=${id === this.#selectedInsightSetKey}
-            >
-              <summary
-                @click=${() => this.#insightSetToggled(id)}
-                @mouseenter=${() => this.#insightSetHovered(id)}
-                @mouseleave=${() => this.#insightSetUnhovered()}
-                title=${url.href}>
-                ${this.#renderDropdownIcon(id === this.#selectedInsightSetKey)}
-                <span>${labels[index]}</span>
-                <span class='zoom-button' @click=${(event: Event) => this.#onZoomClick(event, id)}>${this.#renderZoomButton(id === this.#selectedInsightSetKey)}</span>
-              </summary>
-              ${contents}
-            </details>`;
-          }
-
-          return contents;
-        })}
-      </div>
-    `;
-    // clang-format on
-
-    // Insight components contain state, so to prevent insights from previous trace loads breaking things we use the parsedTrace
-    // as a render key.
-    // Note: newer Lit has `keyed`, but we don't have that, so we do it manually. https://lit.dev/docs/templates/directives/#keyed
-    const result = Lit.Directives.repeat([contents], () => this.#parsedTrace, template => template);
-    Lit.render(result, this.#shadow, {host: this});
-  }
-}
-
-customElements.define('devtools-performance-sidebar-insights', SidebarInsightsTab);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-sidebar-insights': SidebarInsightsTab;
+    const insightSets = [...this.#parsedTrace.insights.values()];
+    const input: ViewInput = {
+      parsedTrace: this.#parsedTrace,
+      labels: Utils.Helpers.createUrlLabels(insightSets.map(({url}) => url)),
+      activeInsightSet: this.#selectedInsightSet,
+      activeInsight: this.#activeInsight,
+      selectedCategory: this.#selectedCategory,
+      onInsightSetToggled: this.#onInsightSetToggled.bind(this),
+      onInsightSetHovered: this.#onInsightSetHovered.bind(this),
+      onInsightSetUnhovered: this.#onInsightSetUnhovered.bind(this),
+      onZoomClick: this.#onZoomClick.bind(this),
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }