chrome-devtools-frontend 1.0.1681498 → 1.0.1682249

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/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 {

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

@@ -6,8 +6,6 @@ import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
-import type {
-  LegacyJavaScriptInsightModel, PatternMatchResult} from '../../../../models/trace/insights/LegacyJavaScript.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';
@@ -21,7 +19,8 @@ const {UIStrings, i18nString} = Trace.Insights.Models.LegacyJavaScript;
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsightModel> {
+export class LegacyJavaScript extends
+    BaseInsightComponent<Trace.Insights.Models.LegacyJavaScript.LegacyJavaScriptInsightModel> {
   override internalName = 'legacy-javascript';
 
   override getEstimatedSavingsTime(): Trace.Types.Timing.Milli|null {
@@ -32,7 +31,8 @@ export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsig
     return true;
   }
 
-  async #revealLocation(script: Trace.Handlers.ModelHandlers.Scripts.Script, match: PatternMatchResult): Promise<void> {
+  async #revealLocation(script: Trace.Handlers.ModelHandlers.Scripts.Script,
+                        match: Trace.Insights.Models.LegacyJavaScript.PatternMatchResult): Promise<void> {
     const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     if (!target) {
       return;

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

@@ -4,7 +4,6 @@
 
 import './Table.js';
 
-import type {ModernHTTPInsightModel} from '../../../../models/trace/insights/ModernHTTP.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.M
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class ModernHTTP extends BaseInsightComponent<ModernHTTPInsightModel> {
+export class ModernHTTP extends BaseInsightComponent<Trace.Insights.Models.ModernHTTP.ModernHTTPInsightModel> {
   override internalName = 'modern-http';
 
   protected override hasAskAiSupport(): boolean {

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

@@ -6,9 +6,6 @@ import './Table.js';
 import '../../../../ui/kit/kit.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {
-  CriticalRequestNode, NetworkDependencyTreeInsightModel} from
-  '../../../../models/trace/insights/NetworkDependencyTree.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';
@@ -27,7 +24,8 @@ const {widget} = UI.Widget;
 
 export const MAX_CHAINS_TO_SHOW = 5;
 
-export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependencyTreeInsightModel> {
+export class NetworkDependencyTree extends
+    BaseInsightComponent<Trace.Insights.Models.NetworkDependencyTree.NetworkDependencyTreeInsightModel> {
   override internalName = 'long-critical-network-tree';
 
   #relatedRequests: Set<Trace.Types.Events.SyntheticNetworkRequest>|null = null;
@@ -48,7 +46,7 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
     return overlays;
   }
 
-  #renderNetworkTreeRow(node: CriticalRequestNode): Lit.LitTemplate {
+  #renderNetworkTreeRow(node: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode): Lit.LitTemplate {
     const requestStyles = Lit.Directives.styleMap({
       display: 'flex',
       '--override-timeline-link-text-color': node.isLongest ? 'var(--sys-color-error)' : '',
@@ -71,7 +69,7 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
     // clang-format on
   }
 
-  mapNetworkDependencyToRow(node: CriticalRequestNode): TableDataRow|null {
+  mapNetworkDependencyToRow(node: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode): TableDataRow|null {
     // Check early if we've exceeded the maximum number of chains to show.
     // If so, and this is a leaf node, increment count and then skip rendering.
     // Otherwise, simply skip rendering.
@@ -93,11 +91,15 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
       values: [this.#renderNetworkTreeRow(node)],
       overlays: this.#createOverlayForChain(node.relatedRequests),
       // Filter out the empty rows otherwise the `Table`component will render a super short row
-      subRows: node.children.map(child => this.mapNetworkDependencyToRow(child)).filter(row => row !== null),
+      subRows: node.children
+                   .map((child: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode) =>
+                            this.mapNetworkDependencyToRow(child))
+                   .filter((row: TableDataRow|null) => row !== null),
     };
   }
 
-  #renderNetworkDependencyTree(nodes: CriticalRequestNode[]): Lit.LitTemplate|null {
+  #renderNetworkDependencyTree(nodes: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode[]):
+      Lit.LitTemplate|null {
     if (nodes.length === 0) {
       return null;
     }

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {RenderBlockingInsightModel} from '../../../../models/trace/insights/RenderBlocking.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,8 @@ const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.R
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
+export class RenderBlocking extends
+    BaseInsightComponent<Trace.Insights.Models.RenderBlocking.RenderBlockingInsightModel> {
   override internalName = 'render-blocking-requests';
 
   mapToRow(request: Trace.Types.Events.SyntheticNetworkRequest): TableDataRow {

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

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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 type * as Overlays from '../../overlays/overlays.js';
 
+type InsightModel = Insights.Types.InsightModel;
+
 export interface InsightDetails {
   title: string;
   description: string;