chrome-devtools-frontend 1.0.971140 → 1.0.973253

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -14,6 +14,7 @@ import * as Emulation from '../emulation/emulation.js';
 import type {AuditProgressChangedEvent, PageAuditabilityChangedEvent, PageWarningsChangedEvent} from './LighthouseController.js';
 import {Events, LighthouseController} from './LighthouseController.js';
 import lighthousePanelStyles from './lighthousePanel.css.js';
+import type {LighthouseRun} from './LighthouseProtocolService.js';
 import {ProtocolService} from './LighthouseProtocolService.js';
 
 import type {ReportJSON, RunnerResultArtifacts} from './LighthouseReporterTypes.js';
@@ -23,6 +24,7 @@ import {Item, ReportSelector} from './LighthouseReportSelector.js';
 import {StartView} from './LighthouseStartView.js';
 import {StartViewFR} from './LighthouseStartViewFR.js';
 import {StatusView} from './LighthouseStatusView.js';
+import {TimespanView} from './LighthouseTimespanView.js';
 
 const UIStrings = {
   /**
@@ -65,6 +67,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   private readonly controller: LighthouseController;
   private readonly startView: StartView;
   private readonly statusView: StatusView;
+  private readonly timespanView: TimespanView|null;
   private warningText: Nullable<string>;
   private unauditableExplanation: Nullable<string>;
   private readonly cachedRenderedReports: Map<ReportJSON, HTMLElement>;
@@ -81,6 +84,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     network: {conditions: SDK.NetworkManager.Conditions},
   };
   private isLHAttached?: boolean;
+  private currentLighthouseRun?: LighthouseRun;
 
   private constructor() {
     super('lighthouse');
@@ -89,8 +93,10 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.controller = new LighthouseController(this.protocolService);
     if (Root.Runtime.experiments.isEnabled('lighthousePanelFR')) {
       this.startView = new StartViewFR(this.controller);
+      this.timespanView = new TimespanView(this.controller);
     } else {
       this.startView = new StartView(this.controller);
+      this.timespanView = null;
     }
     this.statusView = new StatusView(this.controller);
 
@@ -105,12 +111,10 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.controller.addEventListener(Events.PageAuditabilityChanged, this.refreshStartAuditUI.bind(this));
     this.controller.addEventListener(Events.PageWarningsChanged, this.refreshWarningsUI.bind(this));
     this.controller.addEventListener(Events.AuditProgressChanged, this.refreshStatusUI.bind(this));
-    this.controller.addEventListener(Events.RequestLighthouseStart, _event => {
-      void this.startLighthouse();
-    });
-    this.controller.addEventListener(Events.RequestLighthouseCancel, _event => {
-      void this.cancelLighthouse();
-    });
+    this.controller.addEventListener(Events.RequestLighthouseTimespanStart, this.onLighthouseTimespanStart.bind(this));
+    this.controller.addEventListener(Events.RequestLighthouseTimespanEnd, this.onLighthouseTimespanEnd.bind(this));
+    this.controller.addEventListener(Events.RequestLighthouseStart, this.onLighthouseStart.bind(this));
+    this.controller.addEventListener(Events.RequestLighthouseCancel, this.onLighthouseCancel.bind(this));
 
     this.renderToolbar();
     this.auditResultsElement = this.contentElement.createChild('div', 'lighthouse-results-container');
@@ -132,6 +136,27 @@ export class LighthousePanel extends UI.Panel.Panel {
     return Events;
   }
 
+  private async onLighthouseTimespanStart(): Promise<void> {
+    this.timespanView?.show(this.contentElement);
+    await this.startLighthouse();
+    this.timespanView?.ready();
+  }
+
+  private async onLighthouseTimespanEnd(): Promise<void> {
+    this.timespanView?.hide();
+    await this.collectLighthouseResults();
+  }
+
+  private async onLighthouseStart(): Promise<void> {
+    await this.startLighthouse();
+    await this.collectLighthouseResults();
+  }
+
+  private async onLighthouseCancel(): Promise<void> {
+    this.timespanView?.hide();
+    void this.cancelLighthouse();
+  }
+
   private refreshWarningsUI(evt: Common.EventTarget.EventTargetEvent<PageWarningsChangedEvent>): void {
     // PageWarningsChanged fires multiple times during an audit, which we want to ignore.
     if (this.isLHAttached) {
@@ -148,6 +173,8 @@ export class LighthousePanel extends UI.Panel.Panel {
       return;
     }
 
+    this.startView.updateStartButton();
+
     this.unauditableExplanation = evt.data.helpText;
     this.startView.setUnauditableExplanation(evt.data.helpText);
     this.startView.setStartButtonEnabled(!evt.data.helpText);
@@ -348,11 +375,30 @@ export class LighthousePanel extends UI.Panel.Panel {
       const categoryIDs = this.controller.getCategoryIDs();
       const flags = this.controller.getFlags();
 
+      this.currentLighthouseRun = {inspectedURL, categoryIDs, flags};
+
       await this.setupEmulationAndProtocolConnection();
 
-      this.renderStatusView(inspectedURL);
+      if (flags.mode === 'timespan') {
+        await this.protocolService.startTimespan(this.currentLighthouseRun);
+      }
+
+    } catch (err) {
+      await this.resetEmulationAndProtocolConnection();
+      if (err instanceof Error) {
+        this.statusView.renderBugReport(err);
+      }
+    }
+  }
+
+  private async collectLighthouseResults(): Promise<void> {
+    try {
+      if (!this.currentLighthouseRun) {
+        throw new Error('Lighthouse is not started');
+      }
+      this.renderStatusView(this.currentLighthouseRun.inspectedURL);
 
-      const lighthouseResponse = await this.protocolService.startLighthouse(inspectedURL, categoryIDs, flags);
+      const lighthouseResponse = await this.protocolService.collectLighthouseResults(this.currentLighthouseRun);
 
       if (lighthouseResponse && lighthouseResponse.fatal) {
         const error = new Error(lighthouseResponse.message);
@@ -375,10 +421,13 @@ export class LighthousePanel extends UI.Panel.Panel {
       if (err instanceof Error) {
         this.statusView.renderBugReport(err);
       }
+    } finally {
+      this.currentLighthouseRun = undefined;
     }
   }
 
   private async cancelLighthouse(): Promise<void> {
+    this.currentLighthouseRun = undefined;
     this.statusView.updateStatus(i18nString(UIStrings.cancelling));
     await this.resetEmulationAndProtocolConnection();
     this.renderStartView();

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -8,15 +8,58 @@ import * as SDK from '../../core/sdk/sdk.js';
 
 import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
+/**
+ * @overview
+                                                   ┌────────────┐
+                                                   │CDP Backend │
+                                                   └────────────┘
+                                                        │ ▲
+                                                        │ │ parallelConnection
+                          ┌┐                            ▼ │                     ┌┐
+                          ││   dispatchProtocolMessage     sendProtocolMessage  ││
+                          ││                     │          ▲                   ││
+          ProtocolService ││                     |          │                   ││
+                          ││    sendWithResponse ▼          │                   ││
+                          ││              │    send          onWorkerMessage    ││
+                          └┘              │    │                 ▲              └┘
+          worker boundary - - - - - - - - ┼ - -│- - - - - - - - -│- - - - - - - - - - - -
+                          ┌┐              ▼    ▼                 │                    ┌┐
+                          ││   onFrontendMessage      notifyFrontendViaWorkerMessage  ││
+                          ││                   │       ▲                              ││
+                          ││                   ▼       │                              ││
+LighthouseWorkerService   ││          Either ConnectionProxy or LegacyPort            ││
+                          ││                           │ ▲                            ││
+                          ││     ┌─────────────────────┼─┼───────────────────────┐    ││
+                          ││     │  Lighthouse    ┌────▼──────┐                  │    ││
+                          ││     │                │connection │                  │    ││
+                          ││     │                └───────────┘                  │    ││
+                          └┘     └───────────────────────────────────────────────┘    └┘
+
+ * 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.
+*/
+
 let lastId = 1;
 
+export interface LighthouseRun {
+  inspectedURL: string;
+  categoryIDs: string[];
+  flags: Record<string, Object|undefined>;
+}
+
+/**
+ * ProtocolService manages a connection between the frontend (Lighthouse panel) and the Lighthouse worker.
+ */
 export class ProtocolService {
   private targetInfo?: {
     mainSessionId: string,
     mainTargetId: string,
     mainFrameId: string,
   };
-  private rawConnection?: ProtocolClient.InspectorBackend.Connection;
+  private parallelConnection?: ProtocolClient.InspectorBackend.Connection;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);
 
@@ -46,7 +89,7 @@ export class ProtocolService {
       this.dispatchProtocolMessage(message);
     });
 
-    this.rawConnection = connection;
+    this.parallelConnection = connection;
     this.targetInfo = {
       mainTargetId: await childTargetManager.getParentTargetId(),
       mainFrameId: mainFrame.id,
@@ -58,19 +101,36 @@ export class ProtocolService {
     return [i18n.DevToolsLocale.DevToolsLocale.instance().locale];
   }
 
-  async startLighthouse(auditURL: string, categoryIDs: string[], flags: Record<string, Object|undefined>):
-      Promise<ReportRenderer.RunnerResult> {
+  async startTimespan(currentLighthouseRun: LighthouseRun): Promise<void> {
+    const {inspectedURL, categoryIDs, flags} = currentLighthouseRun;
+
+    if (!this.targetInfo) {
+      throw new Error('Unable to get target info required for Lighthouse');
+    }
+
+    await this.sendWithResponse('startTimespan', {
+      url: inspectedURL,
+      categoryIDs,
+      flags,
+      locales: this.getLocales(),
+      target: this.targetInfo,
+    });
+  }
+
+  async collectLighthouseResults(currentLighthouseRun: LighthouseRun): Promise<ReportRenderer.RunnerResult> {
+    const {inspectedURL, categoryIDs, flags} = currentLighthouseRun;
+
     if (!this.targetInfo) {
       throw new Error('Unable to get target info required for Lighthouse');
     }
 
     let mode = flags.mode as string;
-    if (mode === 'navigation' && flags.legacyNavigation) {
-      mode = 'legacyNavigation';
+    if (mode === 'timespan') {
+      mode = 'endTimespan';
     }
 
     return this.sendWithResponse(mode, {
-      url: auditURL,
+      url: inspectedURL,
       categoryIDs,
       flags,
       locales: this.getLocales(),
@@ -80,20 +140,20 @@ export class ProtocolService {
 
   async detach(): Promise<void> {
     const oldLighthouseWorker = this.lighthouseWorkerPromise;
-    const oldRawConnection = this.rawConnection;
+    const oldParallelConnection = this.parallelConnection;
 
     // 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.rawConnection = undefined;
+    this.parallelConnection = undefined;
 
     if (oldLighthouseWorker) {
       (await oldLighthouseWorker).terminate();
     }
-    if (oldRawConnection) {
-      await oldRawConnection.disconnect();
+    if (oldParallelConnection) {
+      await oldParallelConnection.disconnect();
     }
     await SDK.TargetManager.TargetManager.instance().resumeAllTargets();
   }
@@ -117,7 +177,7 @@ export class ProtocolService {
       method?: string,
     };
     if (protocolMessage.sessionId || (protocolMessage.method && protocolMessage.method.startsWith('Target'))) {
-      void this.sendWithoutResponse('dispatchProtocolMessage', {message: JSON.stringify(message)});
+      void this.send('dispatchProtocolMessage', {message: JSON.stringify(message)});
     }
   }
 
@@ -137,18 +197,7 @@ export class ProtocolService {
           return;
         }
 
-        const lighthouseMessage = JSON.parse(event.data);
-
-        if (lighthouseMessage.method === 'statusUpdate') {
-          if (this.lighthouseMessageUpdateCallback && lighthouseMessage.params &&
-              'message' in lighthouseMessage.params) {
-            this.lighthouseMessageUpdateCallback(lighthouseMessage.params.message as string);
-          }
-        } else if (lighthouseMessage.method === 'sendProtocolMessage') {
-          if (lighthouseMessage.params && 'message' in lighthouseMessage.params) {
-            this.sendProtocolMessage(lighthouseMessage.params.message as string);
-          }
-        }
+        this.onWorkerMessage(event);
       });
     });
     return this.lighthouseWorkerPromise;
@@ -164,19 +213,34 @@ export class ProtocolService {
     return worker;
   }
 
+  private onWorkerMessage(event: MessageEvent): void {
+    const lighthouseMessage = JSON.parse(event.data);
+
+    if (lighthouseMessage.action === 'statusUpdate') {
+      if (this.lighthouseMessageUpdateCallback && lighthouseMessage.args && 'message' in lighthouseMessage.args) {
+        this.lighthouseMessageUpdateCallback(lighthouseMessage.args.message as string);
+      }
+    } else if (lighthouseMessage.action === 'sendProtocolMessage') {
+      if (lighthouseMessage.args && 'message' in lighthouseMessage.args) {
+        this.sendProtocolMessage(lighthouseMessage.args.message as string);
+      }
+    }
+  }
+
   private sendProtocolMessage(message: string): void {
-    if (this.rawConnection) {
-      this.rawConnection.sendRawMessage(message);
+    if (this.parallelConnection) {
+      this.parallelConnection.sendRawMessage(message);
     }
   }
 
-  private async sendWithoutResponse(method: string, params: {[x: string]: string|string[]|Object} = {}): Promise<void> {
+  private async send(action: string, args: {[x: string]: string|string[]|Object} = {}): Promise<void> {
     const worker = await this.ensureWorkerExists();
     const messageId = lastId++;
-    worker.postMessage(JSON.stringify({id: messageId, method, params: {...params, id: messageId}}));
+    worker.postMessage(JSON.stringify({id: messageId, action, args: {...args, id: messageId}}));
   }
 
-  private async sendWithResponse(method: string, params: {[x: string]: string|string[]|Object} = {}):
+  /** sendWithResponse currently only handles the original startLighthouse request and LHR-filled response. */
+  private async sendWithResponse(action: string, args: {[x: string]: string|string[]|Object} = {}):
       Promise<ReportRenderer.RunnerResult> {
     const worker = await this.ensureWorkerExists();
     const messageId = lastId++;
@@ -191,7 +255,7 @@ export class ProtocolService {
       };
       worker.addEventListener('message', workerListener);
     });
-    worker.postMessage(JSON.stringify({id: messageId, method, params: {...params, id: messageId}}));
+    worker.postMessage(JSON.stringify({id: messageId, action, args: {...args, id: messageId}}));
 
     return messageResult;
   }

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -127,11 +127,6 @@ export class LighthouseReportRenderer extends LighthouseReport.ReportRenderer {
         showColumnNumber: false,
         inlineFrameIndex: 0,
         maxLength: MaxLengthForLinks,
-        bypassURLTrimming: undefined,
-        className: undefined,
-        preventClick: undefined,
-        tabStop: undefined,
-        text: undefined,
       });
       UI.Tooltip.Tooltip.install(origHTMLElement, '');
       origHTMLElement.textContent = '';

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -41,9 +41,9 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class StartView extends UI.Widget.Widget {
-  private controller: LighthouseController;
+  protected controller: LighthouseController;
   private readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
-  private startButton!: HTMLButtonElement;
+  protected startButton!: HTMLButtonElement;
   private helpText?: Element;
   private warningText?: Element;
   private shouldConfirm?: boolean;
@@ -173,6 +173,10 @@ export class StartView extends UI.Widget.Widget {
     this.contentElement.style.overflow = 'auto';
   }
 
+  updateStartButton(): void {
+    // Do nothing in default case.
+  }
+
   onResize(): void {
     const useNarrowLayout = this.contentElement.offsetWidth < 560;
     const startViewEl = this.contentElement.querySelector('.lighthouse-start-view');

package/front_end/panels/lighthouse/LighthouseStartViewFR.ts

@@ -4,14 +4,28 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type * as Platform from '../../core/platform/platform.js';
 
 import {StartView} from './LighthouseStartView.js';
+import {Events} from './LighthouseController.js';
 
 const UIStrings = {
   /**
    * @description Text that refers to the Lighthouse mode
    */
   mode: 'Mode',
+  /**
+   * @description Label for a button to start analyzing a page navigation with Lighthouse
+   */
+  analyzeNavigation: 'Analyze navigation',
+  /**
+   * @description Label for a button to start analyzing the current page state with Lighthouse
+   */
+  analyzeSnapshot: 'Analyze snapshot',
+  /**
+   * @description Label for a button that ends a Lighthouse timespan
+   */
+  startTimespan: 'Start timespan',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartViewFR.ts', UIStrings);
@@ -35,5 +49,52 @@ export class StartViewFR extends StartView {
 
     const form = this.contentElement.querySelector('form');
     form?.appendChild(fragment.element());
+    this.updateStartButton();
+  }
+
+  updateStartButton(): void {
+    const {mode} = this.controller.getFlags();
+
+    let label: Platform.UIString.LocalizedString;
+    let callback: () => void;
+
+    if (mode === 'timespan') {
+      label = i18nString(UIStrings.startTimespan);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseTimespanStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else if (mode === 'snapshot') {
+      label = i18nString(UIStrings.analyzeSnapshot);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else {
+      label = i18nString(UIStrings.analyzeNavigation);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    }
+
+    this.startButton = UI.UIUtils.createTextButton(
+        label,
+        callback,
+        /* className */ '',
+        /* primary */ true,
+    );
+
+    const startButtonContainer = this.contentElement.querySelector('.lighthouse-start-button-container');
+    if (startButtonContainer) {
+      startButtonContainer.textContent = '';
+      startButtonContainer.appendChild(this.startButton);
+    }
   }
 }

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -0,0 +1,99 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import type {LighthouseController} from './LighthouseController.js';
+import {Events} from './LighthouseController.js';
+import lighthouseDialogStyles from './lighthouseDialog.css.js';
+
+const UIStrings = {
+  /**
+   * @description Header indicating that a Lighthouse timespan is starting.
+   */
+  timespanStarting: 'Timespan starting…',
+  /**
+   * @description Header indicating that a Lighthouse timespan has started.
+   */
+  timespanStarted: 'Timespan started, interact with the page',
+  /**
+   * @description Label for a button that ends a Lighthouse timespan.
+   */
+  endTimespan: 'End timespan',
+  /**
+   * @description Label for a button that cancels a Lighthouse timespan.
+   */
+  cancel: 'Cancel',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseTimespanView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class TimespanView extends UI.Dialog.Dialog {
+  private controller: LighthouseController;
+  private statusHeader: Element|null;
+  private endButton: HTMLButtonElement|null;
+
+  constructor(controller: LighthouseController) {
+    super();
+    this.controller = controller;
+    this.statusHeader = null;
+    this.endButton = null;
+    this.setDimmed(true);
+    this.setCloseOnEscape(false);
+    this.setOutsideClickCallback(event => event.consume(true));
+    this.render();
+  }
+
+  show(dialogRenderElement: Element): void {
+    this.reset();
+    super.show(dialogRenderElement);
+  }
+
+  reset(): void {
+    if (this.statusHeader && this.endButton) {
+      this.statusHeader.textContent = i18nString(UIStrings.timespanStarting);
+      this.endButton.disabled = true;
+    }
+  }
+
+  ready(): void {
+    if (this.statusHeader && this.endButton) {
+      this.statusHeader.textContent = i18nString(UIStrings.timespanStarted);
+      this.endButton.disabled = false;
+      this.endButton.focus();
+    }
+  }
+
+  render(): void {
+    const dialogRoot = UI.Utils.createShadowRootWithCoreStyles(
+        this.contentElement, {cssFile: [lighthouseDialogStyles], delegatesFocus: undefined});
+
+    this.endButton = UI.UIUtils.createTextButton(i18nString(UIStrings.endTimespan), this.endTimespan.bind(this));
+    const cancelButton = UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), this.cancel.bind(this));
+    const fragment = UI.Fragment.Fragment.build`
+  <div class="lighthouse-view vbox">
+  <h2 $="status-header"></h2>
+  ${this.endButton}
+  ${cancelButton}
+  </div>
+  `;
+
+    this.statusHeader = fragment.$('status-header');
+    dialogRoot.appendChild(fragment.element());
+
+    this.setSizeBehavior(UI.GlassPane.SizeBehavior.SetExactWidthMaxHeight);
+    this.setMaxContentSize(new UI.Geometry.Size(500, 400));
+    this.reset();
+  }
+
+  private endTimespan(): void {
+    this.controller.dispatchEventToListeners(Events.RequestLighthouseTimespanEnd, false);
+  }
+
+  private cancel(): void {
+    this.controller.dispatchEventToListeners(Events.RequestLighthouseCancel);
+  }
+}

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1216,7 +1216,7 @@ export class NetworkRequestNode extends NetworkNode {
         } else {
           this.linkifiedInitiatorAnchor = linkifier.linkifyScriptLocation(
               networkManager.target(), initiator.scriptId, initiator.url, initiator.lineNumber,
-              {columnNumber: initiator.columnNumber, inlineFrameIndex: 0, className: undefined, tabStop: undefined});
+              {columnNumber: initiator.columnNumber, inlineFrameIndex: 0});
         }
         UI.Tooltip.Tooltip.install((this.linkifiedInitiatorAnchor), '');
         cell.appendChild(this.linkifiedInitiatorAnchor);

package/front_end/panels/profiler/CPUProfileView.ts

@@ -310,7 +310,7 @@ export class NodeFormatter implements Formatter {
   linkifyNode(node: ProfileDataGridNode): Element|null {
     const cpuProfilerModel = this.profileView.profileHeader.cpuProfilerModel;
     const target = cpuProfilerModel ? cpuProfilerModel.target() : null;
-    const options = {className: 'profile-node-file', columnNumber: undefined, inlineFrameIndex: 0, tabStop: undefined};
+    const options = {className: 'profile-node-file', inlineFrameIndex: 0};
     return this.profileView.linkifier().maybeLinkifyConsoleCallFrame(target, node.profileNode.callFrame, options);
   }
 }

package/front_end/panels/profiler/HeapProfileView.ts

@@ -620,9 +620,7 @@ export class NodeFormatter implements Formatter {
     const target = heapProfilerModel ? heapProfilerModel.target() : null;
     const options = {
       className: 'profile-node-file',
-      columnNumber: undefined,
       inlineFrameIndex: 0,
-      tabStop: undefined,
     };
     return this.profileView.linkifier().maybeLinkifyConsoleCallFrame(target, node.profileNode.callFrame, options);
   }

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -1301,7 +1301,6 @@ export class AllocationGridNode extends HeapSnapshotGridNode {
             columnNumber: allocationNode.column - 1,
             inlineFrameIndex: 0,
             className: 'profile-node-file',
-            tabStop: undefined,
           });
       urlElement.style.maxWidth = '75%';
       cell.insertBefore(urlElement, cell.firstChild);

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1887,10 +1887,9 @@ export class HeapAllocationStackView extends UI.Widget.Widget {
         continue;
       }
       const target = this.heapProfilerModel ? this.heapProfilerModel.target() : null;
-      const options = {columnNumber: frame.column - 1};
+      const options = {columnNumber: frame.column - 1, inlineFrameIndex: 0};
       const urlElement = this.linkifier.linkifyScriptLocation(
-          target, String(frame.scriptId) as Protocol.Runtime.ScriptId, frame.scriptName, frame.line - 1,
-          (options as Components.Linkifier.LinkifyOptions));
+          target, String(frame.scriptId) as Protocol.Runtime.ScriptId, frame.scriptName, frame.line - 1, options);
       frameDiv.appendChild(urlElement);
       stackFrameToURLElement.set(frameDiv, urlElement);
       frameDiv.addEventListener('contextmenu', this.onContextMenu.bind(this, urlElement));

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -126,7 +126,7 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
     return Common.ResourceType.resourceTypes.Script;
   }
 
-  tooltipForURL(url: string): string {
+  tooltipForURL(url: Platform.DevToolsPath.UrlString): string {
     return i18nString(UIStrings.linkedTo, {PH1: unescapeSnippetName(url.substring(this.path().length))});
   }