chrome-devtools-frontend 1.0.1605390 → 1.0.1606789

package/front_end/panels/ai_assistance/components/ExportForAgentsDialog.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/spinners/spinners.js';
+
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
@@ -80,6 +82,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
       i18nString(UIStrings.generatingSummary) :
       (isPrompt ? input.state.promptText : input.state.conversationText);
   // clang-format off
+
   render(html`
     <style>${styles}</style>
     <div class="export-for-agents-dialog">
@@ -111,9 +114,15 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
         </label>
       </div>
       <main>
-        <textarea readonly .value=${exportText}></textarea>
+        ${input.state.isPromptLoading ? html`
+          <span class="prompt-loading">
+            <devtools-spinner></devtools-spinner>
+            ${i18nString(UIStrings.generatingSummary)}
+          </span>
+          ` : Lit.nothing}
+        <textarea readonly .value=${input.state.isPromptLoading ? '' : exportText}></textarea>
       </main>
-      ${isPrompt ? html`<div class="disclaimer">${i18nString(UIStrings.disclaimer)}</div>` : Lit.nothing}
+      <div class="disclaimer">${i18nString(UIStrings.disclaimer)}</div>
       <footer>
         <div class="right-buttons">
           <devtools-button
@@ -156,7 +165,7 @@ export class ExportForAgentsDialog extends UI.Widget.VBox {
     this.#onConversationSaveAs = options.onConversationSaveAs;
     this.#view = view;
 
-    if (options.promptText instanceof Promise) {
+    if (typeof options.promptText !== 'string') {
       void options.promptText.then(promptText => {
         this.#state.promptText = promptText;
         this.#state.isPromptLoading = false;

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -12,6 +12,7 @@
     justify-content: space-between;
     align-items: center;
     margin-block: calc(-1 * var(--sys-size-3));
+    margin-top: var(--sys-size-5);
 
     &.not-v2 {
       /* Can be removed when AIv2 ships */
@@ -126,6 +127,7 @@
   .user-query-wrapper {
     display: flex;
     justify-content: flex-end;
+    padding: 0 var(--sys-size-5);
     align-items: center;
   }
 
@@ -165,6 +167,10 @@
       border-bottom: none;
     }
 
+    .ai-css-change {
+      margin: var(--sys-size-6) 0;
+    }
+
     &.ai-v2 .answer-body-wrapper {
       @container(min-width: 700px) {
         /* Purposefully not using design system variables, this is a
@@ -437,6 +443,10 @@
 
     .widget-name {
       font: var(--sys-typescale-body4-regular);
+      max-width: 80%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; /* stop the titles going onto multiple lines */
     }
 
     .widget-reveal-container {

package/front_end/panels/ai_assistance/components/chatView.css

@@ -62,8 +62,6 @@
   }
 }
 
-
-
 .link {
   color: var(--text-link);
   text-decoration: underline;

package/front_end/panels/ai_assistance/components/exportForAgentsDialog.css

@@ -63,6 +63,19 @@
     border: none;
   }
 
+  main {
+    position: relative;
+  }
+
+  .prompt-loading {
+    position: absolute;
+    padding: var(--sys-size-5);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--sys-size-5);
+  }
+
   .export-for-agents-dialog .disclaimer {
     margin-top: var(--sys-size-5);
     font: var(--sys-typescale-body4-regular);

package/front_end/panels/application/WebMCPView.ts

@@ -11,8 +11,10 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as WebMCP from '../../models/web_mcp/web_mcp.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {
   Directives,
@@ -109,6 +111,26 @@ const UIStrings = {
    * @description Text for the status of a tool call that has failed
    */
   pending: 'In Progress',
+  /**
+   * @description Text for the total number of tool calls
+   * @example {2} PH1
+   */
+  totalCalls: '{PH1} Total calls',
+  /**
+   * @description Text for the number of failed tool calls
+   * @example {1} PH1
+   */
+  failed: '{PH1} Failed',
+  /**
+   * @description Text for the number of canceled tool calls
+   * @example {1} PH1
+   */
+  canceledCount: '{PH1} Canceled',
+  /**
+   * @description Text for the number of in progress tool calls
+   * @example {1} PH1
+   */
+  inProgressCount: '{PH1} In Progress',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -136,15 +158,16 @@ export interface FilterMenuButtons {
   statusTypes: FilterMenuButton;
 }
 export interface ViewInput {
-  tools: Protocol.WebMCP.Tool[];
+  tools: WebMCP.WebMCPModel.Tool[];
   filters: FilterState;
   filterButtons: FilterMenuButtons;
   onClearLogClick: () => void;
   onFilterChange: (filters: FilterState) => void;
-  toolCalls: SDK.WebMCPModel.Call[];
+  toolCalls: WebMCP.WebMCPModel.Call[];
 }
 
-export function filterToolCalls(toolCalls: SDK.WebMCPModel.Call[], filterState: FilterState): SDK.WebMCPModel.Call[] {
+export function filterToolCalls(
+    toolCalls: WebMCP.WebMCPModel.Call[], filterState: FilterState): WebMCP.WebMCPModel.Call[] {
   let filtered = [...toolCalls];
 
   const statusTypes = filterState.statusTypes;
@@ -168,11 +191,10 @@ export function filterToolCalls(toolCalls: SDK.WebMCPModel.Call[], filterState:
   if (toolTypes) {
     filtered = filtered.filter(call => {
       const {imperative, declarative} = toolTypes;
-      const isDeclarative = call.tool?.backendNodeId !== undefined;
-      if (imperative && !isDeclarative) {
+      if (imperative && !call.tool.isDeclarative) {
         return true;
       }
-      if (declarative && isDeclarative) {
+      if (declarative && call.tool.isDeclarative) {
         return true;
       }
       return false;
@@ -190,13 +212,71 @@ export function filterToolCalls(toolCalls: SDK.WebMCPModel.Call[], filterState:
 
   return filtered;
 }
-
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+function calculateToolStats(calls: WebMCP.WebMCPModel.Call[]):
+    {total: number, success: number, failed: number, canceled: number, inProgress: number} {
+  let total = 0, success = 0, failed = 0, canceled = 0, inProgress = 0;
+  for (const call of calls) {
+    total++;
+    if (call.result?.status === Protocol.WebMCP.InvocationStatus.Error) {
+      failed++;
+    } else if (call.result?.status === Protocol.WebMCP.InvocationStatus.Canceled) {
+      canceled++;
+    } else if (call.result?.status === Protocol.WebMCP.InvocationStatus.Success) {
+      success++;
+    } else if (call.result === undefined) {
+      inProgress++;
+    }
+  }
+  return {total, success, failed, canceled, inProgress};
+}
+
+function getIconGroupsFromStats(toolStats: ReturnType<typeof calculateToolStats>):
+    IconButton.IconButton.IconWithTextData[] {
+  const groups = [];
+  if (toolStats.success > 0) {
+    groups.push({
+      iconName: 'check-circle',
+      iconColor: 'var(--sys-color-green)',
+      iconWidth: '16px',
+      iconHeight: '16px',
+      text: String(toolStats.success),
+    });
+  }
+  if (toolStats.failed > 0) {
+    groups.push({
+      iconName: 'cross-circle-filled',
+      iconColor: 'var(--sys-color-error)',
+      iconWidth: '16px',
+      iconHeight: '16px',
+      text: String(toolStats.failed),
+    });
+  }
+  if (toolStats.canceled > 0) {
+    groups.push({
+      iconName: 'record-stop',
+      iconColor: 'var(--sys-color-on-surface-light)',
+      iconWidth: '16px',
+      iconHeight: '16px',
+      text: String(toolStats.canceled),
+    });
+  }
+  if (toolStats.inProgress > 0) {
+    groups.push({
+      iconName: 'dots-circle',
+      iconWidth: '16px',
+      iconHeight: '16px',
+      text: String(toolStats.inProgress),
+    });
+  }
+  return groups;
+}
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const tools = input.tools;
+  const stats = calculateToolStats(input.toolCalls);
   const isFilterActive =
       Boolean(input.filters.text) || Boolean(input.filters.toolTypes) || Boolean(input.filters.statusTypes);
-  const iconName = (call: SDK.WebMCPModel.Call): string => {
+  const iconName = (call: WebMCP.WebMCPModel.Call): string => {
     switch (call.result?.status) {
       case Protocol.WebMCP.InvocationStatus.Error:
         return 'cross-circle-filled';
@@ -208,7 +288,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         return '';
     }
   };
-  const statusString = (call: SDK.WebMCPModel.Call): string => {
+  const statusString = (call: WebMCP.WebMCPModel.Call): string => {
     switch (call.result?.status) {
       case Protocol.WebMCP.InvocationStatus.Error:
         return i18nString(UIStrings.error);
@@ -282,6 +362,18 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               `)}
               </table>
           </devtools-data-grid>
+          <div class="webmcp-toolbar-container" role="toolbar">
+            <devtools-toolbar class="webmcp-toolbar" role="presentation" wrappable>
+              <span class="toolbar-text">${i18nString(UIStrings.totalCalls, {PH1: stats.total})}</span>
+              <div class="toolbar-divider"></div>
+              <span class="toolbar-text status-error-text">${i18nString(UIStrings.failed, {PH1: stats.failed})}</span>
+              <div class="toolbar-divider"></div>
+              <span class="toolbar-text status-cancelled-text">${
+                  i18nString(UIStrings.canceledCount, {PH1: stats.canceled})}</span>
+              <div class="toolbar-divider"></div>
+              <span class="toolbar-text">${i18nString(UIStrings.inProgressCount, {PH1: stats.inProgress})}</span>
+            </devtools-toolbar>
+          </div>
         ` : html`
         ${UI.Widget.widget(UI.EmptyWidget.EmptyWidget, {header: i18nString(UIStrings.noCallsPlaceholderTitle),
                                                           text: i18nString(UIStrings.noCallsPlaceholder)})}
@@ -294,14 +386,20 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                                         text: i18nString(UIStrings.noToolsPlaceholder)})}
         ` : html`
           <devtools-list>
-            ${tools.map(tool => html`
+            ${tools.map(tool => {
+              const toolStats = calculateToolStats(input.toolCalls.filter(c => c.tool === tool));
+              const groups = getIconGroupsFromStats(toolStats);
+              return html`
                 <div class="tool-item">
                   <div class="tool-name-container">
                     <div class="tool-name source-code">${tool.name}</div>
+                    ${groups.length > 0 ? html`<icon-button .data=${
+                        {groups, compact: false} as IconButton.IconButton.IconButtonData}></icon-button>` : ''}
                   </div>
                   <div class="tool-description">${tool.description}</div>
                 </div>
-              `)}
+              `;
+            })}
           </devtools-list>
         `}
       </div>
@@ -361,9 +459,9 @@ export class WebMCPView extends UI.Widget.VBox {
         this.#showToolTypesContextMenu.bind(this),
         this.#showStatusTypesContextMenu.bind(this),
     );
-    SDK.TargetManager.TargetManager.instance().observeModels(SDK.WebMCPModel.WebMCPModel, {
-      modelAdded: (model: SDK.WebMCPModel.WebMCPModel) => this.#webMCPModelAdded(model),
-      modelRemoved: (model: SDK.WebMCPModel.WebMCPModel) => this.#webMCPModelRemoved(model),
+    SDK.TargetManager.TargetManager.instance().observeModels(WebMCP.WebMCPModel.WebMCPModel, {
+      modelAdded: (model: WebMCP.WebMCPModel.WebMCPModel) => this.#webMCPModelAdded(model),
+      modelRemoved: (model: WebMCP.WebMCPModel.WebMCPModel) => this.#webMCPModelRemoved(model),
     });
     this.requestUpdate();
   }
@@ -408,22 +506,22 @@ export class WebMCPView extends UI.Widget.VBox {
         i18nString(UIStrings.pending), () => toggle('pending'),
         {checked: this.#filterState.statusTypes?.['pending'] ?? false, jslogContext: 'webmcp.pending'});
   }
-  #webMCPModelAdded(model: SDK.WebMCPModel.WebMCPModel): void {
-    model.addEventListener(SDK.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
-    model.addEventListener(SDK.WebMCPModel.Events.TOOLS_REMOVED, this.requestUpdate, this);
-    model.addEventListener(SDK.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
-    model.addEventListener(SDK.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
+  #webMCPModelAdded(model: WebMCP.WebMCPModel.WebMCPModel): void {
+    model.addEventListener(WebMCP.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
+    model.addEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.requestUpdate, this);
+    model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
+    model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
   }
 
-  #webMCPModelRemoved(model: SDK.WebMCPModel.WebMCPModel): void {
-    model.removeEventListener(SDK.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
-    model.removeEventListener(SDK.WebMCPModel.Events.TOOLS_REMOVED, this.requestUpdate, this);
-    model.removeEventListener(SDK.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
-    model.removeEventListener(SDK.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
+  #webMCPModelRemoved(model: WebMCP.WebMCPModel.WebMCPModel): void {
+    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
+    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.requestUpdate, this);
+    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
+    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
   }
 
   #handleClearLogClick = (): void => {
-    const models = SDK.TargetManager.TargetManager.instance().models(SDK.WebMCPModel.WebMCPModel);
+    const models = SDK.TargetManager.TargetManager.instance().models(WebMCP.WebMCPModel.WebMCPModel);
     for (const model of models) {
       model.clearCalls();
     }
@@ -444,17 +542,15 @@ export class WebMCPView extends UI.Widget.VBox {
     this.requestUpdate();
   };
 
-  #getTools(): Protocol.WebMCP.Tool[] {
-    const models = SDK.TargetManager.TargetManager.instance().models(SDK.WebMCPModel.WebMCPModel);
+  #getTools(): WebMCP.WebMCPModel.Tool[] {
+    const models = SDK.TargetManager.TargetManager.instance().models(WebMCP.WebMCPModel.WebMCPModel);
     const tools = models.flatMap(model => model.tools.toArray());
     return tools.sort((a, b) => a.name.localeCompare(b.name));
   }
-
   override performUpdate(): void {
-    const models = SDK.TargetManager.TargetManager.instance().models(SDK.WebMCPModel.WebMCPModel);
+    const models = SDK.TargetManager.TargetManager.instance().models(WebMCP.WebMCPModel.WebMCPModel);
     const toolCalls = models.flatMap(model => model.toolCalls);
     const filteredCalls = filterToolCalls(toolCalls, this.#filterState);
-
     const input: ViewInput = {
       tools: this.#getTools(),
       toolCalls: filteredCalls,

package/front_end/panels/application/webMCPView.css

@@ -49,7 +49,9 @@
 
     devtools-list {
       flex: 1 1 auto;
-      margin: var(--sys-size-4);
+      margin: 0;
+      padding: var(--sys-size-4);
+      box-sizing: border-box;
     }
 
     .tool-item {
@@ -58,17 +60,33 @@
         padding: 8px 0;
         gap: 4px;
         width: 100%;
+        min-width: 0;
         border-bottom: 1px solid var(--sys-color-divider);
     }
 
     .tool-name-container {
         display: flex;
         justify-content: space-between;
-        align-items: center;
+        align-items: flex-start;
+        gap: 8px;
     }
 
     .tool-name.source-code {
         color: var(--sys-color-token-string);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 0;
+        flex: 1;
+    }
+
+    /* stylelint-disable-next-line selector-type-no-unknown */
+    .tool-name-container icon-button {
+        flex-shrink: 0;
+        height: 0;
+        overflow: visible;
+        display: flex;
+        align-items: center;
     }
 
     .tool-description {
@@ -87,4 +105,12 @@
     tr.status-cancelled {
       color: var(--sys-color-on-surface-light);
     }
+
+    .toolbar-text.status-error-text {
+      color: var(--sys-color-error);
+    }
+
+    .toolbar-text.status-cancelled-text {
+      color: var(--sys-color-on-surface-light);
+    }
 }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -878,7 +878,7 @@ function maybeRenderAdAdorner(input: ViewInput): Lit.TemplateResult|typeof nothi
   // clang-format off
   return html`
     <devtools-adorner
-      aria-describedby=${input.adTooltipId}
+      aria-details=${input.adTooltipId}
       aria-label=${i18nString(UIStrings.thisElementWasIdentifiedAsAnAd)}
       .name=${ElementsComponents.AdornerManager.RegisteredAdorners.AD}
       jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD)}

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -1075,10 +1075,6 @@ export class StylePropertiesSection {
 
   protected createContainerQueryElement(containerQuery: SDK.CSSContainerQuery.CSSContainerQuery):
       ElementsComponents.CSSQuery.CSSQuery|undefined {
-    if (!containerQuery.text) {
-      return;
-    }
-
     let onQueryTextClick;
     if (containerQuery.styleSheetId) {
       onQueryTextClick = this.handleQueryRuleClick.bind(this, containerQuery);

package/front_end/panels/elements/elements.ts

@@ -10,6 +10,7 @@ import './ElementsTreeElement.js';
 import './AdoptedStyleSheetTreeElement.js';
 import './TopLayerContainer.js';
 import './ElementsTreeOutline.js';
+import './ImagePreviewPopover.js';
 import './EventListenersWidget.js';
 import './MarkerDecorator.js';
 import './MetricsSidebarPane.js';
@@ -45,6 +46,7 @@ import * as ElementsTreeElement from './ElementsTreeElement.js';
 import * as ElementsTreeOutline from './ElementsTreeOutline.js';
 import * as ElementsTreeOutlineRenderer from './ElementsTreeOutlineRenderer.js';
 import * as EventListenersWidget from './EventListenersWidget.js';
+import * as ImagePreviewPopover from './ImagePreviewPopover.js';
 import * as InspectElementModeController from './InspectElementModeController.js';
 import * as LayersWidget from './LayersWidget.js';
 import * as LayoutPane from './LayoutPane.js';
@@ -82,6 +84,7 @@ export {
   ElementsTreeOutline,
   ElementsTreeOutlineRenderer,
   EventListenersWidget,
+  ImagePreviewPopover,
   InspectElementModeController,
   LayersWidget,
   LayoutPane,

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -21,6 +21,7 @@
   padding-left: 22px;
   white-space: normal;
   text-overflow: ellipsis;
+  overflow-wrap: break-word;
   cursor: auto;
   display: block;
 
@@ -74,6 +75,12 @@
     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
     white-space: normal !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 0;
+
+    /* Constrain the TextPrompt proxy span (display: inline-block) so that
+       long values wrap instead of overflowing the section. */
+    > span:has(> .text-prompt-root) {
+      max-width: 100%;
+    }
   }
 
   .info {

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -19,7 +19,7 @@ import {
   type PageWarningsChangedEvent
 } from './LighthouseController.js';
 import lighthousePanelStyles from './lighthousePanel.css.js';
-import {ProtocolService} from './LighthouseProtocolService.js';
+import {CancelledError, ProtocolService} from './LighthouseProtocolService.js';
 import {LighthouseReportRenderer} from './LighthouseReportRenderer.js';
 import {Item, ReportSelector} from './LighthouseReportSelector.js';
 import {StartView} from './LighthouseStartView.js';
@@ -176,6 +176,12 @@ export class LighthousePanel extends UI.Panel.Panel {
   }
 
   private handleError(err: unknown): void {
+    if (err instanceof CancelledError) {
+      // If the error was an explicit choice to cancel, we don't want to render
+      // the bug report view.
+      return;
+    }
+
     if (err instanceof Error) {
       this.statusView.renderBugReport(err);
     }

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -58,6 +58,12 @@ export interface LighthouseRun {
   isAIControlled?: boolean;
 }
 
+export class CancelledError extends Error {
+  constructor() {
+    super('Lighthouse run cancelled');
+  }
+}
+
 /**
  * ProtocolService manages a connection between the frontend (Lighthouse panel) and the Lighthouse worker.
  */
@@ -71,6 +77,14 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
   private configForTesting?: object;
   private connection?: ProtocolClient.CDPConnection.CDPConnection;
 
+  /**
+   * Tracks pending requests to the Lighthouse worker.
+   * Key: The message ID sent to the worker.
+   * Value: The rejection function for the corresponding promise.
+   * This is used to gracefully cancel hanging promises if the ProtocolService is detached before the worker replies.
+   */
+  readonly #pendingRequests = new Map<number, (reason: Error) => void>();
+
   async attach(): Promise<void> {
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets();
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
@@ -174,6 +188,10 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
   }
 
   async detach(): Promise<void> {
+    for (const reject of this.#pendingRequests.values()) {
+      reject(new CancelledError());
+    }
+    this.#pendingRequests.clear();
     const oldLighthouseWorker = this.lighthouseWorkerPromise;
     const oldRootTarget = this.rootTarget;
 
@@ -245,7 +263,7 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
     return this.lighthouseWorkerPromise;
   }
 
-  private async ensureWorkerExists(): Promise<Worker> {
+  async ensureWorkerExists(): Promise<Worker> {
     let worker: Worker;
     if (!this.lighthouseWorkerPromise) {
       worker = await this.initWorker();
@@ -293,16 +311,21 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
       Promise<LighthouseModel.ReporterTypes.RunnerResult> {
     const worker = await this.ensureWorkerExists();
     const messageId = lastId++;
-    const messageResult = new Promise<LighthouseModel.ReporterTypes.RunnerResult>(resolve => {
+    const messageResult = new Promise<LighthouseModel.ReporterTypes.RunnerResult>((resolve, reject) => {
       const workerListener = (event: MessageEvent): void => {
         const lighthouseMessage = event.data;
 
         if (lighthouseMessage.id === messageId) {
           worker.removeEventListener('message', workerListener);
+          this.#pendingRequests.delete(messageId);
           resolve(lighthouseMessage.result);
         }
       };
       worker.addEventListener('message', workerListener);
+      this.#pendingRequests.set(messageId, (err: Error) => {
+        worker.removeEventListener('message', workerListener);
+        reject(err);
+      });
     });
     worker.postMessage({id: messageId, action, args: {...args, id: messageId}});
 

package/front_end/panels/profiler/HeapSnapshotProxy.ts

@@ -23,9 +23,7 @@ export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<
   readonly eventHandler: (arg0: string, arg1: string) => void;
   nextObjectId = 1;
   nextCallId = 1;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  callbacks = new Map<number, (arg0: any) => void>();
+  callbacks = new Map<number, (...args: any[]) => void>();
   readonly previousCallbacks = new Set<number>();
   readonly worker: PlatformApi.HostRuntime.Worker;
   interval?: number;
@@ -53,9 +51,7 @@ export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<
 
   dispose(): void {
     this.worker.terminate();
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
+    clearInterval(this.interval);
   }
 
   disposeObject(objectId: number): void {