chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+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';
@@ -26,6 +27,8 @@ class InjectedScript {
   }
 }
 
+export type InteractionMap = Map<InteractionId, Interaction>;
+
 export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements SDK.TargetManager.Observer {
   #enabled = false;
   #target?: SDK.Target.Target;
@@ -34,7 +37,8 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #lcpValue?: LCPValue;
   #clsValue?: CLSValue;
   #inpValue?: INPValue;
-  #interactions: Interaction[] = [];
+  #interactions: InteractionMap = new Map();
+  #interactionsByGroupId = new Map<Spec.InteractionEntryGroupId, Interaction[]>();
   #layoutShifts: LayoutShift[] = [];
   #mutex = new Common.Mutex.Mutex();
 
@@ -64,7 +68,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.#inpValue;
   }
 
-  get interactions(): Interaction[] {
+  get interactions(): InteractionMap {
     return this.#interactions;
   }
 
@@ -72,6 +76,67 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.#layoutShifts;
   }
 
+  /**
+   * Will create a log message describing the interaction's LoAF scripts.
+   * Returns true if the message is successfully logged.
+   */
+  async logInteractionScripts(interaction: Interaction): Promise<boolean> {
+    if (!this.#target) {
+      return false;
+    }
+
+    const executionContextId = this.#lastResetContextId;
+    if (!executionContextId) {
+      return false;
+    }
+
+    const scriptsTable = [];
+    for (const loaf of interaction.longAnimationFrameTimings) {
+      for (const script of loaf.scripts) {
+        const scriptEndTime = script.startTime + script.duration;
+        if (scriptEndTime < interaction.startTime) {
+          continue;
+        }
+
+        const blockingDuration = Math.round(scriptEndTime - Math.max(interaction.startTime, script.startTime));
+
+        // TODO: Use translated strings for the table
+        scriptsTable.push({
+          'Blocking duration': blockingDuration,
+          'Invoker type': script.invokerType || null,
+          Invoker: script.invoker || null,
+          Function: script.sourceFunctionName || null,
+          Source: script.sourceURL || null,
+          'Char position': script.sourceCharPosition || null,
+        });
+      }
+    }
+
+    try {
+      const scriptsLimit = Spec.LOAF_LIMIT * Spec.SCRIPTS_PER_LOAF_LIMIT;
+      const scriptLimitText = scriptsTable.length === scriptsLimit ? ` (limited to ${scriptsLimit})` : '';
+      const loafLimitText = interaction.longAnimationFrameTimings.length === Spec.LOAF_LIMIT ?
+          ` (limited to last ${Spec.LOAF_LIMIT})` :
+          '';
+      await this.#target.runtimeAgent().invoke_evaluate({
+        expression: `
+          console.group('[DevTools] Long animation frames for ${interaction.duration}ms ${
+            interaction.interactionType} interaction');
+          console.log('Scripts${scriptLimitText}:');
+          console.table(${JSON.stringify(scriptsTable)});
+          console.log('Intersecting long animation frame events${loafLimitText}:', ${
+            JSON.stringify(interaction.longAnimationFrameTimings)});
+          console.groupEnd();
+        `,
+        contextId: executionContextId,
+      });
+    } catch {
+      return false;
+    }
+
+    return true;
+  }
+
   /**
    * DOM nodes can't be sent over a runtime binding, so we have to retrieve
    * them separately.
@@ -122,6 +187,15 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     });
   }
 
+  setStatusForTesting(status: StatusEvent): void {
+    this.#lcpValue = status.lcp;
+    this.#clsValue = status.cls;
+    this.#inpValue = status.inp;
+    this.#interactions = status.interactions;
+    this.#layoutShifts = status.layoutShifts;
+    this.#sendStatusUpdate();
+  }
+
   /**
    * If there is a document update then any node handles we have already resolved will be invalid.
    * This function should re-resolve any relevant DOM nodes after a document update.
@@ -131,7 +205,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
     const allLayoutAffectedNodes = this.#layoutShifts.flatMap(shift => shift.affectedNodes);
     const toRefresh: Array<{node?: SDK.DOMModel.DOMNode}> =
-        [this.#lcpValue || {}, ...this.#interactions, ...allLayoutAffectedNodes];
+        [this.#lcpValue || {}, ...this.#interactions.values(), ...allLayoutAffectedNodes];
 
     const allPromises = toRefresh.map(item => {
       const node = item.node;
@@ -184,21 +258,50 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         const inpEvent: INPValue = {
           value: webVitalsEvent.value,
           phases: webVitalsEvent.phases,
-          uniqueInteractionId: webVitalsEvent.uniqueInteractionId,
+          interactionId: `interaction-${webVitalsEvent.entryGroupId}-${webVitalsEvent.startTime}`,
         };
         this.#inpValue = inpEvent;
         break;
       }
-      case 'Interaction': {
-        const interaction = new Interaction(webVitalsEvent);
+      case 'InteractionEntry': {
+        const groupInteractions =
+            Platform.MapUtilities.getWithDefault(this.#interactionsByGroupId, webVitalsEvent.entryGroupId, () => []);
+
+        // `nextPaintTime` uses the event duration which is rounded to the nearest 8ms. The best we can do
+        // is check if the `nextPaintTime`s are within 8ms.
+        // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/duration#event
+        let interaction = groupInteractions.find(
+            interaction => Math.abs(interaction.nextPaintTime - webVitalsEvent.nextPaintTime) < 8);
+
+        if (!interaction) {
+          interaction = {
+            interactionId: `interaction-${webVitalsEvent.entryGroupId}-${webVitalsEvent.startTime}`,
+            interactionType: webVitalsEvent.interactionType,
+            duration: webVitalsEvent.duration,
+            eventNames: [],
+            phases: webVitalsEvent.phases,
+            startTime: webVitalsEvent.startTime,
+            nextPaintTime: webVitalsEvent.nextPaintTime,
+            longAnimationFrameTimings: webVitalsEvent.longAnimationFrameEntries,
+          };
+
+          groupInteractions.push(interaction);
+          this.#interactions.set(interaction.interactionId, interaction);
+        }
+
+        // We can get multiple instances of the first input interaction since web-vitals.js installs
+        // an extra listener for events of type `first-input`. This is a simple way to de-dupe those
+        // events without adding complexity to the injected code.
+        if (!interaction.eventNames.includes(webVitalsEvent.eventName)) {
+          interaction.eventNames.push(webVitalsEvent.eventName);
+        }
+
         if (webVitalsEvent.nodeIndex !== undefined) {
           const node = await this.#resolveDomNode(webVitalsEvent.nodeIndex, executionContextId);
           if (node) {
             interaction.node = node;
           }
         }
-
-        this.#interactions.push(interaction);
         break;
       }
       case 'LayoutShift': {
@@ -222,7 +325,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         this.#lcpValue = undefined;
         this.#clsValue = undefined;
         this.#inpValue = undefined;
-        this.#interactions = [];
+        this.#interactions.clear();
         this.#layoutShifts = [];
         break;
       }
@@ -231,15 +334,14 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.#sendStatusUpdate();
   }
 
-  #getFrameForExecutionContextId(executionContextId: Protocol.Runtime.ExecutionContextId):
-      SDK.ResourceTreeModel.ResourceTreeFrame|null {
+  async #getFrameForExecutionContextId(executionContextId: Protocol.Runtime.ExecutionContextId):
+      Promise<SDK.ResourceTreeModel.ResourceTreeFrame|null> {
     if (!this.#target) {
       return null;
     }
 
     const runtimeModel = this.#target.model(SDK.RuntimeModel.RuntimeModel);
-    const resourceTreeModel = this.#target.model(SDK.ResourceTreeModel.ResourceTreeModel);
-    if (!runtimeModel || !resourceTreeModel) {
+    if (!runtimeModel) {
       return null;
     }
 
@@ -253,12 +355,8 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       return null;
     }
 
-    const frame = resourceTreeModel.frameForId(frameId);
-    if (!frame) {
-      return null;
-    }
-
-    return frame;
+    const frameManager = SDK.FrameManager.FrameManager.instance();
+    return frameManager.getOrWaitForFrame(frameId);
   }
 
   async #onBindingCalled(event: {data: Protocol.Runtime.BindingCalledEvent}): Promise<void> {
@@ -267,25 +365,25 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       return;
     }
 
-    const frame = this.#getFrameForExecutionContextId(data.executionContextId);
-    if (!frame?.isMainFrame()) {
-      return;
-    }
-
-    const webVitalsEvent = JSON.parse(data.payload) as Spec.WebVitalsEvent;
-
-    // Previously injected scripts will persist if DevTools is closed and reopened.
-    // Ensure we only handle events from the same execution context as the most recent "reset" event.
-    // "reset" events are only emitted once when the script is injected.
-    if (webVitalsEvent.name === 'reset') {
-      this.#lastResetContextId = data.executionContextId;
-    } else if (this.#lastResetContextId !== data.executionContextId) {
-      return;
-    }
-
     // Async tasks can be performed while handling an event (e.g. resolving DOM node)
     // Use a mutex here to ensure the events are handled in the order they are received.
     await this.#mutex.run(async () => {
+      const frame = await this.#getFrameForExecutionContextId(data.executionContextId);
+      if (!frame?.isPrimaryFrame()) {
+        return;
+      }
+
+      const webVitalsEvent = JSON.parse(data.payload) as Spec.WebVitalsEvent;
+
+      // Previously injected scripts shouldn't persist, this is just a defensive measure.
+      // Ensure we only handle events from the same execution context as the most recent "reset" event.
+      // "reset" events are only emitted once when the script is injected or a bfcache restoration.
+      if (webVitalsEvent.name === 'reset') {
+        this.#lastResetContextId = data.executionContextId;
+      } else if (this.#lastResetContextId !== data.executionContextId) {
+        return;
+      }
+
       await this.#handleWebVitalsEvent(webVitalsEvent, data.executionContextId);
     });
   }
@@ -314,7 +412,12 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   clearInteractions(): void {
-    this.#interactions = [];
+    this.#interactions.clear();
+    this.#sendStatusUpdate();
+  }
+
+  clearLayoutShifts(): void {
+    this.#layoutShifts = [];
     this.#sendStatusUpdate();
   }
 
@@ -431,6 +534,8 @@ export const enum Events {
   STATUS = 'status',
 }
 
+export type InteractionId = `interaction-${number}-${number}`;
+
 export type MetricValue = Pick<Spec.MetricChangeEvent, 'value'>;
 
 export interface LCPValue extends MetricValue {
@@ -440,7 +545,7 @@ export interface LCPValue extends MetricValue {
 
 export interface INPValue extends MetricValue {
   phases: Spec.INPPhases;
-  uniqueInteractionId: Spec.UniqueInteractionId;
+  interactionId: InteractionId;
 }
 
 export interface CLSValue extends MetricValue {
@@ -453,24 +558,23 @@ export interface LayoutShift {
   affectedNodes: Array<{node: SDK.DOMModel.DOMNode}>;
 }
 
-export class Interaction {
-  interactionType: Spec.InteractionEvent['interactionType'];
-  duration: Spec.InteractionEvent['duration'];
-  uniqueInteractionId: Spec.UniqueInteractionId;
+export interface Interaction {
+  interactionId: InteractionId;
+  interactionType: Spec.InteractionEntryEvent['interactionType'];
+  eventNames: string[];
+  duration: number;
+  startTime: number;
+  nextPaintTime: number;
+  phases: Spec.INPPhases;
+  longAnimationFrameTimings: Spec.PerformanceLongAnimationFrameTimingJSON[];
   node?: SDK.DOMModel.DOMNode;
-
-  constructor(interactionEvent: Spec.InteractionEvent) {
-    this.interactionType = interactionEvent.interactionType;
-    this.duration = interactionEvent.duration;
-    this.uniqueInteractionId = interactionEvent.uniqueInteractionId;
-  }
 }
 
 export interface StatusEvent {
   lcp?: LCPValue;
   cls?: CLSValue;
   inp?: INPValue;
-  interactions: Interaction[];
+  interactions: InteractionMap;
   layoutShifts: LayoutShift[];
 }
 

package/front_end/models/live-metrics/web-vitals-injected/OnEachInteraction.ts

@@ -4,68 +4,31 @@
 
 /**
  * @fileoverview web-vitals.js doesn't provide a log of all interactions.
- * This was largely copied from the web vitals extension:
- * https://github.com/GoogleChrome/web-vitals-extension/blob/main/src/browser_action/on-each-interaction.js
+ * This solution is hacky but it was recommended by web-vitals devs:
+ * b/371052022
  */
 
-import type * as WebVitals from '../../../third_party/web-vitals/web-vitals.js';
-
-export interface InteractionWithAttribution {
-  attribution: {
-    interactionTargetElement: Node|null,
-    interactionType: WebVitals.INPAttribution['interactionType'],
-  };
-  entries: PerformanceEventTiming[];
-  value: number;
-}
-
-export function onEachInteraction(callback: (interaction: InteractionWithAttribution) => void): void {
-  const eventObserver = new PerformanceObserver(list => {
-    const entries = list.getEntries();
-    const interactions = new Map<number, PerformanceEventTiming[]>();
-
-    const performanceEventTimings = entries.filter((entry): entry is PerformanceEventTiming => 'interactionId' in entry)
-                                        .filter(entry => entry.interactionId);
-
-    for (const entry of performanceEventTimings) {
-      const interaction = interactions.get(entry.interactionId) || [];
-      interaction.push(entry);
-      interactions.set(entry.interactionId, interaction);
-    }
-
-    // Will report as a single interaction even if parts are in separate frames.
-    // Consider splitting by animation frame.
-    for (const interaction of interactions.values()) {
-      const longestEntry = interaction.reduce((prev, curr) => prev.duration >= curr.duration ? prev : curr);
-      const value = longestEntry.duration;
-
-      const firstEntryWithTarget = interaction.find(entry => entry.target);
-
-      callback({
-        attribution: {
-          interactionTargetElement: firstEntryWithTarget?.target ?? null,
-          interactionType: longestEntry.name.startsWith('key') ? 'keyboard' : 'pointer',
-        },
-        entries: interaction,
-        value,
-      });
-    }
-  });
-
-  eventObserver.observe({
-    type: 'first-input',
-    buffered: false,
-  });
-
-  eventObserver.observe({
-    type: 'event',
-    durationThreshold: 0,
-    // Interaction events can only be stored to the buffer if their duration is >=104ms.
-    // https://www.w3.org/TR/event-timing/#sec-events-exposed
-    //
-    // This means we can only collect a subset of interactions that happen before this observer is started.
-    // To avoid confusion, we only collect interactions that after this observer has started.
-    // Note: This DOES NOT affect the collection for the INP metric and so INP will still be restored from the buffer.
-    buffered: false,
+import * as WebVitals from '../../../third_party/web-vitals/web-vitals.js';
+
+export function onEachInteraction(onReport: (metric: WebVitals.INPMetricWithAttribution) => void): void {
+  WebVitals.entryPreProcessingCallbacks.push((entry: PerformanceEventTiming) => {
+    // Wait a microtask so this "pre" processing callback actually
+    // becomes a "post" processing callback.
+    void Promise.resolve().then(() => {
+      if (entry.interactionId) {
+        const interaction = WebVitals.attributeINP({
+          entries: [entry],
+          // The only value we really need for `attributeINP` is `entries`
+          // Everything else is included to fill out the type.
+          name: 'INP',
+          rating: 'good',
+          value: entry.duration,
+          delta: entry.duration,
+          navigationType: 'navigate',
+          id: 'N/A',
+        });
+        onReport(interaction);
+      }
+    });
   });
 }

package/front_end/models/live-metrics/web-vitals-injected/spec/spec.ts

@@ -2,31 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type INPAttribution, type MetricType} from '../../../../third_party/web-vitals/web-vitals.js';
+import type {INPAttribution, MetricType} from '../../../../third_party/web-vitals/web-vitals.js';
 
 export const EVENT_BINDING_NAME = '__chromium_devtools_metrics_reporter';
 export const INTERNAL_KILL_SWITCH = '__chromium_devtools_kill_live_metrics';
 
+export const SCRIPTS_PER_LOAF_LIMIT = 10;
+export const LOAF_LIMIT = 5;
+
 export type MetricChangeEvent = Pick<MetricType, 'name'|'value'>;
 
-export type UniqueInteractionId = `interaction-${number}-${number}`;
+export type InteractionEntryGroupId = number&{_tag: 'InteractionEntryGroupId'};
 export type UniqueLayoutShiftId = `layout-shift-${number}-${number}`;
 
-/**
- * An interaction can have multiple associated `PerformanceEventTiming`s.
- * The `interactionId` available on `PerformanceEventTiming` isn't guaranteed to be unique. (e.g. a `keyup` event issued long after a `keydown` event will have the same `interactionId`).
- * Double-keying with the start time of the longest entry should uniquely identify each interaction.
- */
-export function getUniqueInteractionId(entries: PerformanceEventTiming[]): UniqueInteractionId {
-  const longestEntry = entries.reduce((prev, curr) => {
-    if (prev.duration === curr.duration) {
-      return prev.startTime < curr.startTime ? prev : curr;
-    }
-    return prev.duration > curr.duration ? prev : curr;
-  });
-  return `interaction-${longestEntry.interactionId}-${longestEntry.startTime}`;
-}
-
 export function getUniqueLayoutShiftId(entry: LayoutShift): UniqueLayoutShiftId {
   return `layout-shift-${entry.value}-${entry.startTime}`;
 }
@@ -59,15 +47,54 @@ export interface INPChangeEvent extends MetricChangeEvent {
   name: 'INP';
   interactionType: INPAttribution['interactionType'];
   phases: INPPhases;
-  uniqueInteractionId: UniqueInteractionId;
+  startTime: number;
+  entryGroupId: InteractionEntryGroupId;
+}
+
+// These object keys will be user visible
+// TODO: Translate these keys before they are logged to console
+/* eslint-disable  @typescript-eslint/naming-convention */
+export interface LoAFScript {
+  'Duration': number;
+  'Invoker Type': string|null;
+  'Invoker': string|null;
+  'Function': string|null;
+  'Source': string|null;
+  'Char position': number|null;
 }
+/* eslint-enable  @typescript-eslint/naming-convention */
 
-export interface InteractionEvent {
-  name: 'Interaction';
+export interface PerformanceScriptTimingJSON {
+  startTime: number;
+  duration: number;
+  invoker?: string;
+  invokerType?: string;
+  sourceFunctionName?: string;
+  sourceURL?: string;
+  sourceCharPosition?: number;
+}
+
+export interface PerformanceLongAnimationFrameTimingJSON {
+  renderStart: DOMHighResTimeStamp;
+  duration: DOMHighResTimeStamp;
+  scripts: PerformanceScriptTimingJSON[];
+}
+
+/**
+ * This event is not 1:1 with the interactions that the user sees in the interactions log.
+ * It is 1:1 with a `PerformanceEventTiming` entry.
+ */
+export interface InteractionEntryEvent {
+  name: 'InteractionEntry';
   interactionType: INPAttribution['interactionType'];
-  uniqueInteractionId: UniqueInteractionId;
+  eventName: string;
+  entryGroupId: InteractionEntryGroupId;
+  startTime: number;
+  nextPaintTime: number;
   duration: number;
+  phases: INPPhases;
   nodeIndex?: number;
+  longAnimationFrameEntries: PerformanceLongAnimationFrameTimingJSON[];
 }
 
 export interface LayoutShiftEvent {
@@ -81,4 +108,5 @@ export interface ResetEvent {
   name: 'reset';
 }
 
-export type WebVitalsEvent = LCPChangeEvent|CLSChangeEvent|INPChangeEvent|InteractionEvent|LayoutShiftEvent|ResetEvent;
+export type WebVitalsEvent =
+    LCPChangeEvent|CLSChangeEvent|INPChangeEvent|InteractionEntryEvent|LayoutShiftEvent|ResetEvent;

package/front_end/models/live-metrics/web-vitals-injected/web-vitals-injected.ts

@@ -98,6 +98,29 @@ window.getNodeForIndex = (index: number): Node|undefined => {
   return nodeList[index];
 };
 
+function limitScripts(loafs: Spec.PerformanceLongAnimationFrameTimingJSON[]):
+    Spec.PerformanceLongAnimationFrameTimingJSON[] {
+  return loafs.map(loaf => {
+    const longestScripts: Spec.PerformanceScriptTimingJSON[] = [];
+    for (const script of loaf.scripts) {
+      if (longestScripts.length < Spec.SCRIPTS_PER_LOAF_LIMIT) {
+        longestScripts.push(script);
+        continue;
+      }
+
+      const shorterIndex = longestScripts.findIndex(s => s.duration < script.duration);
+      if (shorterIndex === -1) {
+        continue;
+      }
+
+      longestScripts[shorterIndex] = script;
+    }
+    longestScripts.sort((a, b) => a.startTime - b.startTime);
+    loaf.scripts = longestScripts;
+    return loaf;
+  });
+}
+
 function initialize(): void {
   sendEventToDevTools({name: 'reset'});
 
@@ -148,18 +171,33 @@ function initialize(): void {
         processingDuration: metric.attribution.processingDuration,
         presentationDelay: metric.attribution.presentationDelay,
       },
-      uniqueInteractionId: Spec.getUniqueInteractionId(metric.entries),
+      startTime: metric.entries[0].startTime,
+      entryGroupId: metric.entries[0].interactionId as Spec.InteractionEntryGroupId,
       interactionType: metric.attribution.interactionType,
     };
     sendEventToDevTools(event);
-  }, {reportAllChanges: true});
+  }, {reportAllChanges: true, durationThreshold: 0});
 
   onEachInteraction(interaction => {
-    const event: Spec.InteractionEvent = {
-      name: 'Interaction',
+    // Multiple `InteractionEntry` events can be emitted for the same `uniqueInteractionId`
+    // However, it is easier to combine these entries in the DevTools client rather than in
+    // this injected code.
+    const event: Spec.InteractionEntryEvent = {
+      name: 'InteractionEntry',
       duration: interaction.value,
-      uniqueInteractionId: Spec.getUniqueInteractionId(interaction.entries),
+      phases: {
+        inputDelay: interaction.attribution.inputDelay,
+        processingDuration: interaction.attribution.processingDuration,
+        presentationDelay: interaction.attribution.presentationDelay,
+      },
+      startTime: interaction.entries[0].startTime,
+      entryGroupId: interaction.entries[0].interactionId as Spec.InteractionEntryGroupId,
+      nextPaintTime: interaction.attribution.nextPaintTime,
       interactionType: interaction.attribution.interactionType,
+      eventName: interaction.entries[0].name,
+      // To limit the amount of events, just get the last 5 LoAFs
+      longAnimationFrameEntries: limitScripts(
+          interaction.attribution.longAnimationFrameEntries.slice(-Spec.LOAF_LIMIT).map(loaf => loaf.toJSON())),
     };
     const node = interaction.attribution.interactionTargetElement;
     if (node) {

package/front_end/models/persistence/EditFileSystemView.ts

@@ -35,7 +35,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import editFileSystemViewStyles from './editFileSystemView.css.js';
 import {Events, IsolatedFileSystemManager} from './IsolatedFileSystemManager.js';
-import {type PlatformFileSystem} from './PlatformFileSystem.js';
+import type {PlatformFileSystem} from './PlatformFileSystem.js';
 
 const UIStrings = {
   /**

package/front_end/models/persistence/FileSystemWorkspaceBinding.ts

@@ -34,10 +34,9 @@ import * as Platform from '../../core/platform/platform.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
-import {type IsolatedFileSystem} from './IsolatedFileSystem.js';
-
+import type {IsolatedFileSystem} from './IsolatedFileSystem.js';
 import {Events, type IsolatedFileSystemManager} from './IsolatedFileSystemManager.js';
-import {type PlatformFileSystem} from './PlatformFileSystem.js';
+import type {PlatformFileSystem} from './PlatformFileSystem.js';
 
 export class FileSystemWorkspaceBinding {
   readonly isolatedFileSystemManager: IsolatedFileSystemManager;

package/front_end/models/persistence/IsolatedFileSystemManager.ts

@@ -32,11 +32,10 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import {type FilesChangedData} from './FileSystemWorkspaceBinding.js';
 
+import type {FilesChangedData} from './FileSystemWorkspaceBinding.js';
 import {IsolatedFileSystem} from './IsolatedFileSystem.js';
-
-import {type PlatformFileSystem} from './PlatformFileSystem.js';
+import type {PlatformFileSystem} from './PlatformFileSystem.js';
 
 const UIStrings = {
   /**

package/front_end/models/persistence/WorkspaceSettingsTab.ts

@@ -8,11 +8,11 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {EditFileSystemView} from './EditFileSystemView.js';
-import {type FileSystem} from './FileSystemWorkspaceBinding.js';
+import type {FileSystem} from './FileSystemWorkspaceBinding.js';
 import {IsolatedFileSystem} from './IsolatedFileSystem.js';
 import {Events, IsolatedFileSystemManager} from './IsolatedFileSystemManager.js';
 import {NetworkPersistenceManager} from './NetworkPersistenceManager.js';
-import {type PlatformFileSystem} from './PlatformFileSystem.js';
+import type {PlatformFileSystem} from './PlatformFileSystem.js';
 import workspaceSettingsTabStyles from './workspaceSettingsTab.css.js';
 
 const UIStrings = {

package/front_end/models/text_utils/ContentProvider.ts

@@ -31,9 +31,9 @@
 import type * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
 
-import {type ContentDataOrError} from './ContentData.js';
-import {type StreamingContentDataOrError} from './StreamingContentData.js';
-import {type WasmDisassembly} from './WasmDisassembly.js';
+import type {ContentDataOrError} from './ContentData.js';
+import type {StreamingContentDataOrError} from './StreamingContentData.js';
+import type {WasmDisassembly} from './WasmDisassembly.js';
 
 export interface ContentProvider {
   contentURL(): Platform.DevToolsPath.UrlString;