chrome-devtools-frontend 1.0.1681091 → 1.0.1682249

package/front_end/panels/settings/components/SyncSection.ts

@@ -276,7 +276,7 @@ export class SyncSection extends UI.Widget.Widget {
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
-    this.#receiveBadgesSetting = Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges');
+    this.#receiveBadgesSetting = Common.Settings.Settings.instance().resolve(Badges.receiveGdpBadgesSettingDescriptor);
     this.#syncSetting =
         Common.Settings.Settings.instance().moduleSetting('sync-preferences') as Common.Settings.Setting<boolean>;
   }

package/front_end/panels/settings/emulation/DevicesSettingsTab.ts

@@ -438,7 +438,6 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     const verticalMode: EmulationModel.EmulatedDevices.Mode = {
       title: '',
       orientation: EmulationModel.EmulatedDevices.Vertical,
-      insets: new EmulationModel.DeviceModeModel.Insets(0, 0, 0, 0),
     };
     if (Root.Runtime.hostConfig.devToolsMobileSafeAreaEmulation?.enabled) {
       const safeAreaInsets = this.safeAreaInsetsFromEditor(editor);
@@ -454,8 +453,6 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     const horizontalMode: EmulationModel.EmulatedDevices.Mode = {
       title: '',
       orientation: EmulationModel.EmulatedDevices.Horizontal,
-      insets: new EmulationModel.DeviceModeModel.Insets(0, 0, 0, 0),
-
     };
     if (Root.Runtime.hostConfig.devToolsMobileSafeAreaEmulation?.enabled) {
       const landscapeSafeAreaInsets = this.safeAreaInsetsFromEditor(editor, 'landscape-');

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -163,17 +163,16 @@ export async function evaluateScriptSnippet(uiSourceCode: Workspace.UISourceCode
 
   const url = uiSourceCode.url();
 
-  const result = await executionContext.evaluate(
-      {
-        expression: `${expression}\n//# sourceURL=${url}`,
-        objectGroup: 'console',
-        silent: false,
-        includeCommandLineAPI: true,
-        returnByValue: false,
-        generatePreview: true,
-        replMode: true,
-      } as SDK.RuntimeModel.EvaluationOptions,
-      true, true);
+  const result = await executionContext.evaluateWithSelectedFrameFallback({
+    expression: `${expression}\n//# sourceURL=${url}`,
+    objectGroup: 'console',
+    silent: false,
+    includeCommandLineAPI: true,
+    returnByValue: false,
+    generatePreview: true,
+    replMode: true,
+  } as SDK.RuntimeModel.EvaluationOptions,
+                                                                          true, true);
 
   if ('exceptionDetails' in result && result.exceptionDetails) {
     consoleModel?.addMessage(SDK.ConsoleModel.ConsoleMessage.fromException(

package/front_end/panels/sources/NavigatorView.ts

@@ -1911,7 +1911,9 @@ export class NavigatorFolderTreeNode extends NavigatorTreeNode {
     const isOverrides =
         Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.fileSystemType(this.project) === 'overrides';
     const hasMappedFiles = isOverrides ?
-        Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled').get() :
+        Common.Settings.Settings.instance()
+            .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
+            .get() :
         Persistence.Persistence.PersistenceImpl.instance().filePathHasBindings(absoluteFileSystemPath);
     this.treeElement.listItemElement.classList.toggle('has-mapped-files', hasMappedFiles);
   }
@@ -2101,7 +2103,9 @@ export class NavigatorGroupTreeNode extends NavigatorTreeNode {
     const isOverrides =
         Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.fileSystemType(this.project) === 'overrides';
     const isActive = isOverrides ?
-        Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled').get() :
+        Common.Settings.Settings.instance()
+            .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
+            .get() :
         Persistence.Persistence.PersistenceImpl.instance().filePathHasBindings(fileSystemPath);
     if (wasActive === isActive) {
       return;

package/front_end/panels/sources/SourcesNavigator.ts

@@ -318,14 +318,16 @@ export class OverridesNavigatorView extends NavigatorView {
     this.toolbar.removeToolbarItems();
     const project = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().project();
     if (project) {
-      const enableCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
-          Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled'));
+      const enableCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(Common.Settings.Settings.instance().resolve(
+          Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor));
       this.toolbar.appendToolbarItem(enableCheckbox);
 
       this.toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSeparator(true));
       const clearButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearConfiguration), 'clear');
       clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
-        Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled').set(false);
+        Common.Settings.Settings.instance()
+            .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
+            .set(false);
         project.remove();
       });
       this.toolbar.appendToolbarItem(clearButton);
@@ -345,7 +347,9 @@ export class OverridesNavigatorView extends NavigatorView {
     if (!fileSystem) {
       return;
     }
-    Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled').set(true);
+    Common.Settings.Settings.instance()
+        .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
+        .set(true);
   }
 
   override sourceSelected(uiSourceCode: Workspace.UISourceCode.UISourceCode, focusSource: boolean): void {

package/front_end/panels/sources/SourcesPanel.ts

@@ -481,7 +481,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     window.focus();
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
     const withOverlay = UI.Context.Context.instance().flavor(SDK.Target.Target)?.model(SDK.OverlayModel.OverlayModel) &&
-        !Common.Settings.Settings.instance().moduleSetting('disable-paused-state-overlay').get();
+        !Common.Settings.Settings.instance().resolve(SDK.SDKSettings.disablePausedStateOverlaySettingDescriptor).get();
     if (withOverlay && !this.overlayLoggables) {
       this.overlayLoggables = {debuggerPausedMessage: {}, resumeButton: {}, stepOverButton: {}};
       VisualLogging.registerLoggable(
@@ -1317,7 +1317,9 @@ export class RevealingActionDelegate implements UI.ActionRegistration.ActionDele
         // Do not trigger a resume action, if: the shortcut was forwarded and the
         // paused overlay is enabled.
         const actionHandledInPausedOverlay = context.flavor(UI.ShortcutRegistry.ForwardedShortcut) &&
-            !Common.Settings.Settings.instance().moduleSetting('disable-paused-state-overlay').get();
+            !Common.Settings.Settings.instance()
+                 .resolve(SDK.SDKSettings.disablePausedStateOverlaySettingDescriptor)
+                 .get();
         if (actionHandledInPausedOverlay) {
           // Taken care of by inspector overlay: handled set to true to
           // register user metric.

package/front_end/panels/sources/SourcesSearchScope.ts

@@ -73,7 +73,9 @@ export class SourcesSearchScope implements Search.SearchScope.SearchScope {
     const searchInAnonymousAndContentScripts =
         Common.Settings.Settings.instance().moduleSetting('search-in-anonymous-and-content-scripts').get();
     const localOverridesEnabled =
-        Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled').get();
+        Common.Settings.Settings.instance()
+            .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
+            .get();
 
     return Workspace.Workspace.WorkspaceImpl.instance().projects().filter(project => {
       if (project.type() === Workspace.Workspace.projectTypes.Service) {

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -66,7 +66,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
     this.#boundOnBindingChanged = this.onBindingChanged.bind(this);
 
     Common.Settings.Settings.instance()
-        .moduleSetting('persistence-network-overrides-enabled')
+        .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
         .addChangeListener(this.onNetworkPersistenceChanged, this);
 
     this.#errorPopoverHelper = new UI.PopoverHelper.PopoverHelper(
@@ -428,7 +428,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
     this.textEditor.editor.destroy();
     this.detach();
     Common.Settings.Settings.instance()
-        .moduleSetting('persistence-network-overrides-enabled')
+        .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
         .removeChangeListener(this.onNetworkPersistenceChanged, this);
   }
 

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -663,7 +663,7 @@ export class WatchExpression {
     }
 
     try {
-      const result = await executionContext.evaluate({
+      const result = await executionContext.evaluateWithSelectedFrameFallback({
         expression,
         objectGroup: WatchExpression.watchObjectGroupId,
         includeCommandLineAPI: false,
@@ -671,8 +671,8 @@ export class WatchExpression {
         returnByValue: false,
         generatePreview: false,
       },
-                                                     /* userGesture */ false,
-                                                     /* awaitPromise */ false);
+                                                                              /* userGesture */ false,
+                                                                              /* awaitPromise */ false);
       if ('object' in result) {
         const objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(result.object, {
           readOnly: true,

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -174,19 +174,19 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
         'screenshot-loaded', () => this.dispatchEventToListeners(Events.DATA_CHANGED));
 
     Common.Settings.Settings.instance()
-        .moduleSetting('skip-stack-frames-pattern')
+        .resolve(Workspace.IgnoreListManager.skipStackFramesPatternSettingDescriptor)
         .addChangeListener(this.#onIgnoreListChanged.bind(this));
     Common.Settings.Settings.instance()
-        .moduleSetting('skip-content-scripts')
+        .resolve(Workspace.IgnoreListManager.skipContentScriptsSettingDescriptor)
         .addChangeListener(this.#onIgnoreListChanged.bind(this));
     Common.Settings.Settings.instance()
-        .moduleSetting('automatically-ignore-list-known-third-party-scripts')
+        .resolve(Workspace.IgnoreListManager.automaticallyIgnoreListKnownThirdPartyScriptsSettingDescriptor)
         .addChangeListener(this.#onIgnoreListChanged.bind(this));
     Common.Settings.Settings.instance()
-        .moduleSetting('enable-ignore-listing')
+        .resolve(Workspace.IgnoreListManager.enableIgnoreListingSettingDescriptor)
         .addChangeListener(this.#onIgnoreListChanged.bind(this));
     Common.Settings.Settings.instance()
-        .moduleSetting('skip-anonymous-scripts')
+        .resolve(Workspace.IgnoreListManager.skipAnonymousScriptsSettingDescriptor)
         .addChangeListener(this.#onIgnoreListChanged.bind(this));
   }
 

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

@@ -12,7 +12,6 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import cwvMetricsStyles from './cwvMetrics.css.js';
-import {md} from './insights/Helpers.js';
 import * as Insights from './insights/insights.js';
 import metricValueStyles from './metricValueStyles.css.js';
 import {isFieldWorseThanLocal, NumberWithUnit} from './Utils.js';
@@ -266,7 +265,7 @@ const CWV_METRICS_VIEW: MetricsView = (input, _output, target) => {
           .jslogContext=${'timeline.insights.dismiss-field-mismatch'}
           @click=${onDismisFieldMismatchNotice}
         ></devtools-button>
-        <div class="field-mismatch-notice__body">${md(i18nString(UIStrings.fieldMismatchNotice))}</div>
+        <div class="field-mismatch-notice__body">${Insights.Helpers.md(i18nString(UIStrings.fieldMismatchNotice))}</div>
       </div>
     `;
     // clang-format on

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

@@ -173,7 +173,7 @@ export class IgnoreListSetting extends UI.Widget.Widget {
 
   #view: View;
   readonly #ignoreListEnabled: Common.Settings.Setting<boolean> =
-      Common.Settings.Settings.instance().moduleSetting('enable-ignore-listing');
+      Common.Settings.Settings.instance().resolve(Workspace.IgnoreListManager.enableIgnoreListingSettingDescriptor);
   readonly #regexPatterns = this.#getSkipStackFramesPatternSetting().getAsArray();
   #newRegexValue = '';
   #newRegexChecked = false;
@@ -187,17 +187,17 @@ export class IgnoreListSetting extends UI.Widget.Widget {
     this.element.classList.remove('vbox', 'flex-auto');
 
     Common.Settings.Settings.instance()
-        .moduleSetting('skip-stack-frames-pattern')
+        .resolve(Workspace.IgnoreListManager.skipStackFramesPatternSettingDescriptor)
         .addChangeListener(this.requestUpdate.bind(this));
     Common.Settings.Settings.instance()
-        .moduleSetting('enable-ignore-listing')
+        .resolve(Workspace.IgnoreListManager.enableIgnoreListingSettingDescriptor)
         .addChangeListener(this.requestUpdate.bind(this));
     this.requestUpdate();
   }
 
   #getSkipStackFramesPatternSetting(): Common.Settings.RegExpSetting {
-    return Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as
-        Common.Settings.RegExpSetting;
+    return Common.Settings.Settings.instance().resolve(
+               Workspace.IgnoreListManager.skipStackFramesPatternSettingDescriptor) as Common.Settings.RegExpSetting;
   }
 
   #onNewRegexInputFocus(value: string): void {

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

@@ -15,7 +15,6 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as Insights from './insights/insights.js';
-import {nodeLink} from './insights/NodeLink.js';
 import layoutShiftDetailsStyles from './layoutShiftDetails.css.js';
 
 const {html, render} = Lit;
@@ -375,7 +374,7 @@ function renderShiftedElements(
     return html`
       ${elementsShifted?.map(el => {
         if (el.node_id !== undefined) {
-          return nodeLink({
+          return Insights.NodeLink.nodeLink({
             backendNodeId: el.node_id,
             frame: shift.args.frame,
             fallbackHtmlSnippet: el.debug_name,
@@ -406,7 +405,7 @@ function renderAnimation(
 
 function renderUnsizedImage(
     frame: string, unsizedImage: Trace.Insights.Models.CLSCulprits.UnsizedImage): Lit.LitTemplate {
-  const nodeLinkEl = nodeLink({
+  const nodeLinkEl = Insights.NodeLink.nodeLink({
     backendNodeId: unsizedImage.backendNodeId,
     frame,
     fallbackUrl: unsizedImage.paintImageEvent.args.data.url as Platform.DevToolsPath.UrlString | undefined,

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

@@ -28,7 +28,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../../common/common.js';
 import * as MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
 
-import {md} from './insights/Helpers.js';
+import * as Insights from './insights/insights.js';
 import liveMetricsViewStyles from './liveMetricsView.css.js';
 import type {MetricCardData} from './MetricCard.js';
 import metricValueStyles from './metricValueStyles.css.js';
@@ -633,7 +633,7 @@ function renderRecordingSettings(input: ViewInput): Lit.LitTemplate {
   // clang-format off
   return html`
     <h3 class="card-title">${i18nString(UIStrings.environmentSettings)}</h3>
-    <div class="device-toolbar-description">${md(i18nString(UIStrings.useDeviceToolbar))}</div>
+    <div class="device-toolbar-description">${Insights.Helpers.md(i18nString(UIStrings.useDeviceToolbar))}</div>
     ${fieldEnabled ? html`
       <ul class="environment-recs-list">
         <li>${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.device, {PH1: html`<span class="environment-rec">${deviceRec}</span>`})}</li>

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

@@ -7,7 +7,7 @@ import * as Common from '../../../core/common/common.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 
-import {InsightActivated, InsightDeactivated} from './insights/SidebarInsight.js';
+import * as Insights from './insights/insights.js';
 import {SidebarAnnotationsTab} from './SidebarAnnotationsTab.js';
 import {SidebarInsightsTab} from './SidebarInsightsTab.js';
 
@@ -107,7 +107,7 @@ export class SidebarWidget extends UI.Widget.VBox {
     this.#updateAnnotationsCountBadge();
 
     if (this.#insightToRestoreOnOpen) {
-      this.element.dispatchEvent(new InsightActivated(
+      this.element.dispatchEvent(new Insights.SidebarInsight.InsightActivated(
           this.#insightToRestoreOnOpen.model,
           this.#insightToRestoreOnOpen.insightSetKey,
           ));
@@ -129,7 +129,7 @@ export class SidebarWidget extends UI.Widget.VBox {
     this.#insightToRestoreOnOpen = currentlyActiveInsight;
 
     if (currentlyActiveInsight) {
-      this.element.dispatchEvent(new InsightDeactivated());
+      this.element.dispatchEvent(new Insights.SidebarInsight.InsightDeactivated());
     }
   }
 

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

@@ -9,7 +9,6 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import {CWVMetrics, getFieldMetrics} from './CWVMetrics.js';
-import {shouldRenderForCategory} from './insights/Helpers.js';
 import * as Insights from './insights/insights.js';
 import type {ActiveInsight} from './Sidebar.js';
 import sidebarSingleInsightSetStyles from './sidebarSingleInsightSet.css.js';
@@ -182,7 +181,7 @@ export class SidebarSingleInsightSet extends UI.Widget.Widget {
     const passedInsights: InsightData[] = [];
 
     for (const [insightName, model] of Object.entries(insightSet.model)) {
-      if (!model || !shouldRenderForCategory({activeCategory, insightCategory: model.category})) {
+      if (!model || !Insights.Helpers.shouldRenderForCategory({activeCategory, insightCategory: model.category})) {
         continue;
       }
 

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -8,7 +8,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Root from '../../../../core/root/root.js';
 import * as AIAssistance from '../../../../models/ai_assistance/ai_assistance.js';
 import * as Badges from '../../../../models/badges/badges.js';
-import type {InsightModel} from '../../../../models/trace/insights/types.js';
+import type * as Insights from '../../../../models/trace/insights/insights.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
@@ -21,6 +21,8 @@ import {md} from './Helpers.js';
 import * as SidebarInsight from './SidebarInsight.js';
 import type {TableState} from './Table.js';
 
+type InsightModel = Insights.Types.InsightModel;
+
 const {html} = Lit;
 
 const UIStrings = {

package/front_end/panels/timeline/components/insights/CLSCulprits.ts

@@ -4,7 +4,6 @@
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Platform from '../../../../core/platform/platform.js';
-import type {CLSCulpritsInsightModel} from '../../../../models/trace/insights/CLSCulprits.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
@@ -16,7 +15,7 @@ const {UIStrings, i18nString} = Trace.Insights.Models.CLSCulprits;
 
 const {html} = Lit;
 
-export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
+export class CLSCulprits extends BaseInsightComponent<Trace.Insights.Models.CLSCulprits.CLSCulpritsInsightModel> {
   override internalName = 'cls-culprits';
 
   protected override hasAskAiSupport(): boolean {

package/front_end/panels/timeline/components/insights/Cache.ts

@@ -5,7 +5,6 @@
 import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {CacheInsightModel} from '../../../../models/trace/insights/Cache.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -19,7 +18,7 @@ const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.C
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class Cache extends BaseInsightComponent<CacheInsightModel> {
+export class Cache extends BaseInsightComponent<Trace.Insights.Models.Cache.CacheInsightModel> {
   override internalName = 'cache';
 
   protected override hasAskAiSupport(): boolean {

package/front_end/panels/timeline/components/insights/CharacterSet.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type {CharacterSetInsightModel} from '../../../../models/trace/insights/CharacterSet.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -13,7 +12,7 @@ import {Checklist} from './Checklist.js';
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class CharacterSet extends BaseInsightComponent<CharacterSetInsightModel> {
+export class CharacterSet extends BaseInsightComponent<Trace.Insights.Models.CharacterSet.CharacterSetInsightModel> {
   override internalName = 'character-set';
 
   protected override hasAskAiSupport(): boolean {

package/front_end/panels/timeline/components/insights/DOMSize.ts

@@ -6,7 +6,6 @@ import '../../../../ui/kit/kit.js';
 import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {DOMSizeInsightModel} from '../../../../models/trace/insights/DOMSize.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -22,7 +21,7 @@ const {UIStrings, i18nString} = Trace.Insights.Models.DOMSize;
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
+export class DOMSize extends BaseInsightComponent<Trace.Insights.Models.DOMSize.DOMSizeInsightModel> {
   override internalName = 'dom-size';
 
   protected override hasAskAiSupport(): boolean {

package/front_end/panels/timeline/components/insights/DocumentLatency.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type {DocumentLatencyInsightModel} from '../../../../models/trace/insights/DocumentLatency.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -13,7 +12,8 @@ import {Checklist} from './Checklist.js';
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
+export class DocumentLatency extends
+    BaseInsightComponent<Trace.Insights.Models.DocumentLatency.DocumentLatencyInsightModel> {
   override internalName = 'document-latency';
 
   protected override hasAskAiSupport(): boolean {

package/front_end/panels/timeline/components/insights/DuplicatedJavaScript.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {DuplicatedJavaScriptInsightModel} from '../../../../models/trace/insights/DuplicatedJavaScript.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
@@ -20,7 +19,8 @@ const {UIStrings, i18nString} = Trace.Insights.Models.DuplicatedJavaScript;
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScriptInsightModel> {
+export class DuplicatedJavaScript extends
+    BaseInsightComponent<Trace.Insights.Models.DuplicatedJavaScript.DuplicatedJavaScriptInsightModel> {
   override internalName = 'duplicated-javascript';
   #treemapData: Utils.Treemap.TreemapData|null = null;
 

package/front_end/panels/timeline/components/insights/FontDisplay.ts

@@ -5,7 +5,6 @@
 import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {FontDisplayInsightModel} from '../../../../models/trace/insights/FontDisplay.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -19,7 +18,7 @@ const {UIStrings, i18nString} = Trace.Insights.Models.FontDisplay;
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
+export class FontDisplay extends BaseInsightComponent<Trace.Insights.Models.FontDisplay.FontDisplayInsightModel> {
   override internalName = 'font-display';
   #overlayForRequest = new Map<Trace.Types.Events.Event, Trace.Types.Overlays.Overlay>();
 

package/front_end/panels/timeline/components/insights/ForcedReflow.ts

@@ -6,7 +6,6 @@ import './Table.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import type * as Protocol from '../../../../generated/protocol.js';
-import type {ForcedReflowInsightModel} from '../../../../models/trace/insights/ForcedReflow.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LegacyComponents from '../../../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
@@ -20,7 +19,7 @@ const {UIStrings, i18nString, createOverlayForEvents} = Trace.Insights.Models.Fo
 const {html, nothing} = Lit;
 const {widget} = UI.Widget;
 
-export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel> {
+export class ForcedReflow extends BaseInsightComponent<Trace.Insights.Models.ForcedReflow.ForcedReflowInsightModel> {
   override internalName = 'forced-reflow';
 
   protected override hasAskAiSupport(): boolean {

package/front_end/panels/timeline/components/insights/INPBreakdown.ts

@@ -4,7 +4,6 @@
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
-import type {INPBreakdownInsightModel} from '../../../../models/trace/insights/INPBreakdown.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -17,7 +16,7 @@ const {UIStrings, i18nString, createOverlaysForSubpart} = Trace.Insights.Models.
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class INPBreakdown extends BaseInsightComponent<INPBreakdownInsightModel> {
+export class INPBreakdown extends BaseInsightComponent<Trace.Insights.Models.INPBreakdown.INPBreakdownInsightModel> {
   override internalName = 'inp';
 
   protected override hasAskAiSupport(): boolean {

package/front_end/panels/timeline/components/insights/ImageDelivery.ts

@@ -4,7 +4,6 @@
 
 import '../../../../ui/kit/kit.js';
 
-import type {ImageDeliveryInsightModel} from '../../../../models/trace/insights/ImageDelivery.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -18,7 +17,7 @@ const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.I
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightModel> {
+export class ImageDelivery extends BaseInsightComponent<Trace.Insights.Models.ImageDelivery.ImageDeliveryInsightModel> {
   override internalName = 'image-delivery';
 
   mapToRow(image: Trace.Insights.Models.ImageDelivery.OptimizableImage): TableDataRow {

package/front_end/panels/timeline/components/insights/LCPBreakdown.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {LCPBreakdownInsightModel} from '../../../../models/trace/insights/LCPBreakdown.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -17,7 +16,7 @@ const {UIStrings, i18nString} = Trace.Insights.Models.LCPBreakdown;
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel> {
+export class LCPBreakdown extends BaseInsightComponent<Trace.Insights.Models.LCPBreakdown.LCPBreakdownInsightModel> {
   override internalName = 'lcp-by-phase';
   #overlay: Trace.Types.Overlays.TimespanBreakdown|null = null;
 
@@ -100,17 +99,18 @@ export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel>
       return html`<div class="insight-section">${i18nString(UIStrings.noLcp)}</div>`;
     }
 
-    const rows: TableDataRow[] = Object.values(subparts).map((subpart: Trace.Insights.Models.LCPBreakdown.Subpart) => {
-      const section = this.#overlay?.sections.find(section => subpart.label === section.label);
-      const timing = Trace.Helpers.Timing.microToMilli(subpart.range);
-      return {
-        values: [subpart.label, i18n.TimeUtilities.preciseMillisToString(timing)],
-        overlays: section && [{
-                    type: 'TIMESPAN_BREAKDOWN',
-                    sections: [section],
-                  }],
-      };
-    });
+    const rows: TableDataRow[] =
+        (Object.values(subparts) as Trace.Insights.Models.LCPBreakdown.Subpart[]).map(subpart => {
+          const section = this.#overlay?.sections.find(section => subpart.label === section.label);
+          const timing = Trace.Helpers.Timing.microToMilli(subpart.range);
+          return {
+            values: [subpart.label, i18n.TimeUtilities.preciseMillisToString(timing)],
+            overlays: section && [{
+                        type: 'TIMESPAN_BREAKDOWN',
+                        sections: [section],
+                      }],
+          };
+        });
 
     // clang-format off
     const sections: Lit.LitTemplate[] = [html`

package/front_end/panels/timeline/components/insights/LCPDiscovery.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {LCPDiscoveryInsightModel} from '../../../../models/trace/insights/LCPDiscovery.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
@@ -22,7 +21,7 @@ const {html} = Lit;
 // eslint-disable-next-line @devtools/l10n-filename-matches
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPDiscovery.ts', UIStrings);
 
-export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel> {
+export class LCPDiscovery extends BaseInsightComponent<Trace.Insights.Models.LCPDiscovery.LCPDiscoveryInsightModel> {
   override internalName = 'lcp-discovery';
 
   protected override hasAskAiSupport(): boolean {