chrome-devtools-frontend 1.0.1538523 → 1.0.1539728

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -6,16 +6,17 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
 /**
  * @file
- *                                                   ┌────────────┐
- *                                                   │CDP Backend │
- *                                                   └────────────┘
+ *                                                 ┌───────────────┐
+ *                                                 │ CDPConnection │
+ *                                                 └───────────────┘
  *                                                        │ ▲
- *                                                        │ │ parallelConnection
+ *                                                        │ │
  *                          ┌┐                            ▼ │                     ┌┐
  *                          ││   dispatchProtocolMessage     sendProtocolMessage  ││
  *                          ││                     │          ▲                   ││
@@ -28,7 +29,10 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
  *                          ││   onFrontendMessage      notifyFrontendViaWorkerMessage  ││
  *                          ││                   │       ▲                              ││
  *                          ││                   ▼       │                              ││
- *  LighthouseWorkerService ││          Either ConnectionProxy or LegacyPort            ││
+ *  LighthouseWorkerService ││               WorkerConnectionTransport                  ││
+ *                          ││                           │ ▲                            ││
+ *                          ││                           ▼ │                            ││
+ *                          ││                     CDPConnection                        ││
  *                          ││                           │ ▲                            ││
  *                          ││     ┌─────────────────────┼─┼───────────────────────┐    ││
  *                          ││     │  Lighthouse    ┌────▼──────┐                  │    ││
@@ -37,10 +41,10 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
  *                          └┘     └───────────────────────────────────────────────┘    └┘
  *
  * - All messages traversing the worker boundary are action-wrapped.
- * - All messages over the parallelConnection speak pure CDP.
- * - All messages within ConnectionProxy/LegacyPort speak pure CDP.
- * - The foundational CDP connection is `parallelConnection`.
- * - All connections within the worker are not actual ParallelConnection's.
+ * - All messages over the CDPConnection speak pure CDP.
+ * - Within the worker we also use a 'CDPConnection' but with a custom
+ *   transport called WorkerConnectionTransport.
+ * - All messages within WorkerConnectionTransport/LegacyPort speak pure CDP.
  */
 
 let lastId = 1;
@@ -57,14 +61,15 @@ export interface LighthouseRun {
 /**
  * ProtocolService manages a connection between the frontend (Lighthouse panel) and the Lighthouse worker.
  */
-export class ProtocolService {
-  private mainSessionId?: string;
+export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnectionObserver {
+  private mainSessionId?: Protocol.Target.SessionID;
   private rootTargetId?: string;
-  private parallelConnection?: ProtocolClient.ConnectionTransport.ConnectionTransport;
+  private rootTarget?: SDK.Target.Target;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);
   private removeDialogHandler?: () => void;
   private configForTesting?: object;
+  private connection?: ProtocolClient.CDPConnection.CDPConnection;
 
   async attach(): Promise<void> {
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets();
@@ -90,12 +95,15 @@ export class ProtocolService {
       throw new Error('Could not find the child target manager class for the root target');
     }
 
-    const {connection, sessionId} = await rootChildTargetManager.createParallelConnection(message => {
-      if (typeof message === 'string') {
-        message = JSON.parse(message);
-      }
-      this.dispatchProtocolMessage(message);
-    });
+    const router = rootTarget.router();
+    if (!router) {
+      throw new Error('Expected root target to have a session router');
+    }
+
+    const rootTargetId = await rootChildTargetManager.getParentTargetId();
+    const {sessionId} = await rootTarget.targetAgent().invoke_attachToTarget({targetId: rootTargetId, flatten: true});
+    this.connection = router;
+    this.connection.observe(this);
 
     // Lighthouse implements its own dialog handler like this, however its lifecycle ends when
     // the internal Lighthouse session is disposed.
@@ -114,8 +122,8 @@ export class ProtocolService {
     this.removeDialogHandler = () =>
         resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.JavaScriptDialogOpening, dialogHandler);
 
-    this.parallelConnection = connection;
-    this.rootTargetId = await rootChildTargetManager.getParentTargetId();
+    this.rootTargetId = rootTargetId;
+    this.rootTarget = rootTarget;
     this.mainSessionId = sessionId;
   }
 
@@ -166,20 +174,22 @@ export class ProtocolService {
 
   async detach(): Promise<void> {
     const oldLighthouseWorker = this.lighthouseWorkerPromise;
-    const oldParallelConnection = this.parallelConnection;
+    const oldRootTarget = this.rootTarget;
 
     // When detaching, make sure that we remove the old promises, before we
     // perform any async cleanups. That way, if there is a message coming from
     // lighthouse while we are in the process of cleaning up, we shouldn't deliver
     // them to the backend.
     this.lighthouseWorkerPromise = undefined;
-    this.parallelConnection = undefined;
+    this.rootTarget = undefined;
+    this.connection?.unobserve(this);
+    this.connection = undefined;
 
     if (oldLighthouseWorker) {
       (await oldLighthouseWorker).terminate();
     }
-    if (oldParallelConnection) {
-      await oldParallelConnection.disconnect();
+    if (oldRootTarget && this.mainSessionId) {
+      await oldRootTarget.targetAgent().invoke_detachFromTarget({sessionId: this.mainSessionId});
     }
     await SDK.TargetManager.TargetManager.instance().resumeAllTargets();
     this.removeDialogHandler?.();
@@ -189,7 +199,11 @@ export class ProtocolService {
     this.lighthouseMessageUpdateCallback = callback;
   }
 
-  private dispatchProtocolMessage(message: string|object): void {
+  onEvent<T extends ProtocolClient.CDPConnection.Event>(event: ProtocolClient.CDPConnection.CDPEvent<T>): void {
+    this.dispatchProtocolMessage(event);
+  }
+
+  private dispatchProtocolMessage(message: ProtocolClient.CDPConnection.CDPReceivableMessage): void {
     // A message without a sessionId is the main session of the main target (call it "Main session").
     // A parallel connection and session was made that connects to the same main target (call it "Lighthouse session").
     // Messages from the "Lighthouse session" have a sessionId.
@@ -199,15 +213,15 @@ export class ProtocolService {
     //   * the message has a sessionId (is not for the "Main session")
     //   * the message does not have a sessionId (is for the "Main session"), but only for the Target domain
     //     (to kickstart autoAttach in LH).
-    const protocolMessage = message as {
-      sessionId?: string,
-      method?: string,
-    };
-    if (protocolMessage.sessionId || (protocolMessage.method?.startsWith('Target'))) {
+    if (message.sessionId || ('method' in message && message.method?.startsWith('Target'))) {
       void this.send('dispatchProtocolMessage', {message});
     }
   }
 
+  onDisconnect(): void {
+    // Do nothing.
+  }
+
   private initWorker(): Promise<Worker> {
     this.lighthouseWorkerPromise = new Promise<Worker>(resolve => {
       const workerUrl = new URL('../../entrypoints/lighthouse_worker/lighthouse_worker.js', import.meta.url);
@@ -255,9 +269,19 @@ export class ProtocolService {
   }
 
   private sendProtocolMessage(message: string): void {
-    if (this.parallelConnection) {
-      this.parallelConnection.sendRawMessage(message);
-    }
+    const {id, method, params, sessionId} = JSON.parse(message);
+    // CDPConnection manages it's own message IDs and it's important, otherwise we'd clash
+    // with the rest of the DevTools traffic.
+    // Instead, we ignore the ID coming from the worker when sending the command, but
+    // patch it back in when sending the response back to the worker.
+    void this.connection?.send(method, params, sessionId).then(response => {
+      this.dispatchProtocolMessage({
+        id,
+        sessionId,
+        result: 'result' in response ? response.result : undefined,
+        error: 'error' in response ? response.error : undefined,
+      });
+    });
   }
 
   private async send(action: string, args: Record<string, string|string[]|object> = {}): Promise<void> {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -204,7 +204,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
         @endiannesschanged=${input.onEndiannessChanged}
         @jumptopointeraddress=${input.onJumpToAddress}
         >
-      </devtools-linear-memory-inspector-interpreter/>
+      </devtools-linear-memory-inspector-interpreter>
     </div>`}
     `,
          target);

package/front_end/panels/linear_memory_inspector/components/LinearMemoryNavigator.ts

@@ -163,13 +163,20 @@ export class LinearMemoryNavigator extends HTMLElement {
       'address-input': true,
       invalid: !this.#valid,
     };
-    return html`
-      <input class=${Lit.Directives.classMap(classMap)} data-input="true" .value=${this.#address}
-        jslog=${VisualLogging.textField('linear-memory-inspector.address').track({
+    return html`<input
+      class=${Lit.Directives.classMap(classMap)}
+      data-input="true"
+      .value=${this.#address}
+      jslog=${VisualLogging.textField('linear-memory-inspector.address').track({
       change: true,
     })}
-        title=${ifDefined(this.#valid ? i18nString(UIStrings.enterAddress) : this.#error)} @change=${
-        this.#onAddressChange.bind(this, Mode.SUBMITTED)} @input=${this.#onAddressChange.bind(this, Mode.EDIT)}/>`;
+      title=${
+        ifDefined(
+            this.#valid ? i18nString(UIStrings.enterAddress) : this.#error,
+            )}
+      @change=${this.#onAddressChange.bind(this, Mode.SUBMITTED)}
+      @input=${this.#onAddressChange.bind(this, Mode.EDIT)}
+    />`;
   }
 
   #onAddressChange(mode: Mode, event: Event): void {

package/front_end/panels/network/RequestInitiatorView.ts

@@ -56,7 +56,7 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
     const target = networkManager ? networkManager.target() : undefined;
     return new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target, linkifier, {stackTrace: initiator.stack, tabStops: focusableLink});
+        undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink});
   }
 
   private createTree(): UI.TreeOutline.TreeOutlineInShadow {

package/front_end/panels/network/components/EditableSpan.ts

@@ -75,7 +75,7 @@ export class EditableSpan extends HTMLElement {
         tabindex="0"
         .innerText=${this.#value}
         jslog=${VisualLogging.value('header-editor').track({change: true, keydown: 'Enter|Escape'})}
-      </span>`, this.#shadow, {host: this});
+        ></span>`, this.#shadow, {host: this});
     // clang-format on
   }
 

package/front_end/panels/recorder/components/StepView.ts

@@ -456,7 +456,7 @@ function viewFunction(input: ViewInput, _output: ViewOutput, target: HTMLElement
     } data-section-index=${
       input.sectionIndex
     } class=${Lit.Directives.classMap(stepClasses)}>
-      <svg slot="icon" width="24" height="24" height="100%" class="icon">
+      <svg slot="icon" width="24" height="24" class="icon">
         <circle class="circle-icon"/>
         <g class="error-icon">
           <path d="M1.5 1.5L6.5 6.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>

package/front_end/panels/recorder/models/RecordingPlayer.ts

@@ -104,23 +104,24 @@ export class RecordingPlayer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
 
     const rootChildTargetManager = rootTarget.model(SDK.ChildTargetManager.ChildTargetManager);
-
     if (!rootChildTargetManager) {
       throw new Error('Could not find the child target manager class for the root target');
     }
 
-    // Pass an empty message handler because it will be overwritten by puppeteer anyways.
-    const result = await rootChildTargetManager.createParallelConnection(() => {});
-    const connection = result.connection as SDK.Connections.ParallelConnectionInterface;
+    const router = rootTarget.router();
+    if (!router) {
+      throw new Error('Expected root target to have a router');
+    }
 
     const mainTargetId = await childTargetManager.getParentTargetId();
     const rootTargetId = await rootChildTargetManager.getParentTargetId();
-
+    const {sessionId} = await rootTarget.targetAgent().invoke_attachToTarget({targetId: rootTargetId, flatten: true});
     const {page, browser, puppeteerConnection} =
         await PuppeteerService.PuppeteerConnection.PuppeteerConnectionHelper.connectPuppeteerToConnectionViaTab(
             {
-              connection,
-              rootTargetId: rootTargetId as string,
+              connection: router,
+              targetId: rootTargetId,
+              sessionId,
               isPageTargetCallback: isPageTarget,
             },
         );

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -662,9 +662,9 @@ export class UserAgentClientHintsForm extends HTMLElement {
         change: true,
       })}
           />
-          <devtools-icon name="bin" class="medium"
+          <devtools-icon name="bin"
             title=${i18nString(UIStrings.brandUserAgentDelete)}
-            class="delete-icon"
+            class="medium delete-icon"
             tabindex="0"
             role="button"
             @click=${handleDeleteClick}
@@ -757,9 +757,9 @@ export class UserAgentClientHintsForm extends HTMLElement {
         change: true,
       })}
           />
-          <devtools-icon name="bin" class="medium"
+          <devtools-icon name="bin" 
             title=${i18nString(UIStrings.brandFullVersionListDelete)}
-            class="delete-icon"
+            class="medium delete-icon"
             tabindex="0"
             role="button"
             @click=${handleDeleteClick}

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -456,12 +456,12 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.#overlays.addEventListener(Overlays.Overlays.EventReferenceClick.eventName, event => {
       const eventRef = (event as Overlays.Overlays.EventReferenceClick);
       const fromTraceEvent = selectionFromEvent(eventRef.event);
-      this.openSelectionDetailsView(fromTraceEvent);
+      void this.openSelectionDetailsView(fromTraceEvent);
     });
 
     // This is for the detail view of layout shift.
     this.element.addEventListener(TimelineInsights.EventRef.EventReferenceClick.eventName, event => {
-      this.setSelectionAndReveal(selectionFromEvent(event.event));
+      void this.setSelectionAndReveal(selectionFromEvent(event.event));
     });
 
     this.element.addEventListener('keydown', this.#keydownHandler.bind(this));
@@ -1469,7 +1469,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
   }
 
-  setSelectionAndReveal(selection: TimelineSelection|null): void {
+  async setSelectionAndReveal(selection: TimelineSelection|null): Promise<void> {
     if (selection && this.#currentSelection && selectionsEqual(selection, this.#currentSelection)) {
       return;
     }
@@ -1507,8 +1507,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.networkFlameChart.setSelectedEntry(networkIndex);
 
     if (this.detailsView) {
-      // TODO(crbug.com/1459265):  Change to await after migration work.
-      void this.detailsView.setSelection(selection);
+      await this.detailsView.setSelection(selection);
     }
 
     // Create the entry selected overlay if the selection represents a trace event
@@ -1552,9 +1551,9 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   // Only opens the details view of a selection. This is used for Timing Markers. Timing markers replace
   // their entry with a new UI. Because of that, their entries can no longer be "selected" in the timings track,
   // so if clicked, we only open their details view.
-  openSelectionDetailsView(selection: TimelineSelection|null): void {
+  async openSelectionDetailsView(selection: TimelineSelection|null): Promise<void> {
     if (this.detailsView) {
-      void this.detailsView.setSelection(selection);
+      await this.detailsView.setSelection(selection);
     }
   }
 
@@ -1611,12 +1610,13 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.mainFlameChart.showAllGroups();
   }
 
-  private onAddEntryLabelAnnotation(
+  private async onAddEntryLabelAnnotation(
       dataProvider: TimelineFlameChartDataProvider|TimelineFlameChartNetworkDataProvider,
-      event: Common.EventTarget.EventTargetEvent<{entryIndex: number, withLinkCreationButton: boolean}>): void {
+      event: Common.EventTarget.EventTargetEvent<{entryIndex: number, withLinkCreationButton: boolean}>):
+      Promise<void> {
     const selection = dataProvider.createSelection(event.data.entryIndex);
     if (selectionIsEvent(selection)) {
-      this.setSelectionAndReveal(selection);
+      await this.setSelectionAndReveal(selection);
       ModificationsManager.activeManager()?.createAnnotation(
           {
             type: 'ENTRY_LABEL',

package/front_end/panels/timeline/TimelinePanel.ts

@@ -2130,7 +2130,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.flameChart.setModel(parsedTrace, this.#eventToRelatedInsights);
     this.flameChart.resizeToPreferredHeights();
     // Reset the visual selection as we've just swapped to a new trace.
-    this.flameChart.setSelectionAndReveal(null);
+    void this.flameChart.setSelectionAndReveal(null);
     this.#sideBar.setParsedTrace(parsedTrace);
 
     this.#searchableView.showWidget();
@@ -2964,7 +2964,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   select(selection: TimelineSelection|null): void {
     this.#announceSelectionToAria(this.selection, selection);
     this.selection = selection;
-    this.flameChart.setSelectionAndReveal(selection);
+    void this.flameChart.setSelectionAndReveal(selection);
   }
 
   selectEntryAtTime(events: Trace.Types.Events.Event[]|null, time: number): void {
@@ -3044,7 +3044,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   #openSummaryTab(): void {
     // If we have a selection, we should remove it.
-    this.flameChart.setSelectionAndReveal(null);
+    void this.flameChart.setSelectionAndReveal(null);
     this.flameChart.selectDetailsViewTab(Tab.Details, null);
   }
 

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -40,6 +40,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
@@ -1700,14 +1701,14 @@ export class TimelineUIUtils {
     const stackTraceForEvent = Trace.Extras.StackTraceForEvent.get(event, parsedTrace.data);
     if (stackTraceForEvent?.callFrames.length || stackTraceForEvent?.description || stackTraceForEvent?.parent) {
       contentHelper.addSection(i18nString(UIStrings.functionStack));
-      contentHelper.createChildStackTraceElement(stackTraceForEvent);
+      await contentHelper.createChildStackTraceElement(stackTraceForEvent);
       // TODO(andoli): also build stack trace component for other events
       // that have a stack trace using the StackTraceForEvent helper.
     } else {
       const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event);
       if (stackTrace?.length) {
         contentHelper.addSection(stackLabel);
-        contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
+        await contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
       }
     }
     switch (event.name) {
@@ -1740,12 +1741,7 @@ export class TimelineUIUtils {
       const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(initiator);
       if (stackTrace) {
         contentHelper.addSection(initiatorStackLabel);
-        contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace.map(frame => {
-          return {
-            ...frame,
-            scriptId: String(frame.scriptId) as Protocol.Runtime.ScriptId,
-          };
-        })));
+        await contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
       }
 
       const link = this.createEntryLink(initiator);
@@ -2455,29 +2451,30 @@ export class TimelineDetailsContentHelper {
     this.appendElementRow(title, locationContent);
   }
 
-  createChildStackTraceElement(stackTrace: Protocol.Runtime.StackTrace): void {
+  async createChildStackTraceElement(runtimeStackTrace: Protocol.Runtime.StackTrace): Promise<void> {
     if (!this.#linkifier) {
       return;
     }
 
-    // We resolve the original function name here. StackTracePreviewContent uses
-    // Linkifier to resolve the source code location.
-    const resolvedStackTrace: Protocol.Runtime.StackTrace = structuredClone(stackTrace);
-    let currentResolvedStackTrace: Protocol.Runtime.StackTrace|undefined = resolvedStackTrace;
-    while (currentResolvedStackTrace) {
-      currentResolvedStackTrace.callFrames = currentResolvedStackTrace.callFrames.map(
-          callFrame => ({
-            ...callFrame,
-            functionName: SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForCallFrame(callFrame)?.name ||
-                callFrame.functionName,
-          }));
-      currentResolvedStackTrace = currentResolvedStackTrace.parent;
+    let callFrameContents;
+    if (this.target) {
+      const stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+                             .createStackTraceFromProtocolRuntime(runtimeStackTrace, this.target);
+      callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent(
+          undefined, this.target ?? undefined, this.#linkifier, {stackTrace, tabStops: true, showColumnNumber: true});
+    } else {
+      // I _think_ this only happens during tests.
+      // See "TimelineFlameChartView > shows the details for a selected main thread event".
+      // For now, just defer to the still-supported legacy runtime stack trace. When
+      // that is removed, we could instead create a stub StackTrace ourselves, even
+      // without a `target`.
+      callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent(
+          undefined, this.target ?? undefined, this.#linkifier,
+          {runtimeStackTrace, tabStops: true, showColumnNumber: true});
     }
+
     const stackTraceElement =
         this.tableElement.createChild('div', 'timeline-details-view-row timeline-details-stack-values');
-    const callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent(
-        undefined, this.target ?? undefined, this.#linkifier,
-        {stackTrace: resolvedStackTrace, tabStops: true, showColumnNumber: true});
     callFrameContents.markAsRoot();
     callFrameContents.show(stackTraceElement);
   }

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

@@ -11,6 +11,7 @@ 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 Lit from '../../../ui/lit/lit.js';
+import {nothing} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import type {BaseInsightComponent} from './insights/BaseInsightComponent.js';
@@ -428,10 +429,10 @@ export class SidebarSingleInsightSet extends HTMLElement {
             this.#data.activeCategory,
         );
 
-    const renderInsightComponent = (insightData: CategorizedInsightData): Lit.TemplateResult => {
+    const renderInsightComponent = (insightData: CategorizedInsightData): Lit.LitTemplate => {
       const {componentClass, model} = insightData;
       if (!this.#data.parsedTrace?.insights) {
-        return html``;
+        return nothing;
       }
 
       const agentFocus = AIAssistance.AIContext.AgentFocus.fromInsight(this.#data.parsedTrace, model);

package/front_end/panels/utils/utils.ts

@@ -91,8 +91,10 @@ export class PanelUtils {
     if (request.hasThirdPartyCookiePhaseoutIssue()) {
       // clang-format off
       return html`<devtools-icon
-          class="icon" name="warning-filled" title=${i18nString(UIStrings.thirdPartyPhaseout)}
-        </devtools-icon>`;
+        class="icon"
+        name="warning-filled"
+        title=${i18nString(UIStrings.thirdPartyPhaseout)}
+      ></devtools-icon>`;
       // clang-format on
     }