chrome-devtools-frontend 1.0.1537268 → 1.0.1537860

package/.env.template

@@ -0,0 +1,9 @@
+# This files is to be used when calling node script
+# Use --env-file-if-exists to make it optional
+DEVTOOLS_BROWSER=
+DEVTOOLS_UNSTABLE_FEATURES=
+DEVTOOLS_ENABLE_FEATURES=
+DEVTOOLS_AUTO_OPEN_DEVTOOLS=
+DEVTOOLS_REMOTE_DEBUGGING_PORT=
+DEVTOOLS_TARGET=
+DEVTOOLS_USER_DATA_DIR=

package/docs/get_the_code.md

@@ -100,6 +100,33 @@ sudo sysctl -p
 You may also need to pay attention to the values of `max_queued_events` and `max_user_instances`
 if you encounter any errors.
 
+### Using a `.env` file for default script options
+
+Many scripts, like `npm run build` and `npm start`, accept command-line flags to configure their behavior (e.g., `-t <target>`, `--browser=<name>`).
+
+To avoid typing these flags every time, you can set your preferred defaults in a .env file at the root of the devtools-frontend directory.
+
+The `.env.template` file lists all supported variables. Copy it to `.env` to get started.
+
+```bash
+cp .env.template .env
+```
+
+As mentioned earlier, you might create a fast build target. Instead of always typing `npm run build -- -t fast-build`, to remove the flag repetition you simple run `npm run build` you can set the following variable in your `.env` file:
+
+```shell
+DEVTOOLS_TARGET=fast-build
+```
+
+Another example - by default running `npm start` auto-opens DevTools for new Tabs.
+You may want to disable this so fewer pop-up happen while debugging, usually done via `--no-open` flag. Or with `.env` set the following value:
+
+```shell
+DEVTOOLS_AUTO_OPEN_DEVTOOLS=false
+```
+
+To use `.env` file from other script, refer to the helper in `scripts/env-utils.mjs`. That should provide the necessary helper to work with the config, and make maintenance simpler.
+
 ### Update to latest
 
 To update to latest tip of tree version:

package/front_end/core/common/SettingRegistration.ts

@@ -299,21 +299,24 @@ export interface SettingRegistration {
    * jump to the experiment. If a setting is not disabled, the experiment entry will be ignored.
    */
   deprecationNotice?: {disabled: boolean, warning: () => Platform.UIString.LocalizedString, experiment?: string};
-
   /**
-   * Optional information to learn more about the setting. If provided, a `(?)` icon will show next to the setting
-   * in the Settings panel with a link to learn more, and the `tooltip` will be presented to the user when hovering
-   * the `(?)` icon.
+   * See {@link LearnMore} for more info.
    */
   learnMore?: LearnMore;
 }
 
 /**
- * Metadata to learn more about a setting. The `url` will be used to construct
- * a `(?)` icon link and the `tooltip` will be shown when hovering the icon.
+ * Optional information to learn more about the setting.
+ *
+ * If tooltip is provided creates a (i) icon with rich tooltip with said tooltip
+ *
+ * If url is provided creates a (?) icon with a link to said url
+ *
+ * If both tooltip is provided creates a (i) icon with rich tooltip
+ * and a link inside the rich tool tip with text `Learn more`
  */
 export interface LearnMore {
-  tooltip: () => Platform.UIString.LocalizedString;
+  tooltip?: () => Platform.UIString.LocalizedString;
   url?: Platform.DevToolsPath.UrlString;
 }
 

package/front_end/core/common/Settings.ts

@@ -565,6 +565,9 @@ export class Setting<V> {
     return null;
   }
 
+  /**
+   * See {@link LearnMore} for more info
+   */
   learnMore(): LearnMore|null {
     return this.#registration?.learnMore ?? null;
   }

package/front_end/core/sdk/sdk-meta.ts

@@ -353,8 +353,11 @@ const UIStrings = {
   /**
    * @description Label of a checkbox in the DevTools settings UI.
    */
-  enableRemoteFileLoading:
-      'Allow `DevTools` to load resources, such as source maps, from remote file paths. Disabled by default for security reasons.',
+  enableRemoteFileLoading: 'Allow loading remote file path resources in DevTools',
+  /**
+   * @description Tooltip text for a setting that controls whether external resource can be loaded in DevTools.
+   */
+  remoteFileLoadingInfo: 'Example resource are source maps. Disabled by default for security reasons.',
   /**
    * @description Tooltip text for a setting that controls the network cache. Disabling the network cache can simulate the network connections of users that are visiting a page for the first time.
    */
@@ -1160,4 +1163,7 @@ Common.Settings.registerSettingExtension({
   settingName: 'network.enable-remote-file-loading',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: false,
+  learnMore: {
+    tooltip: i18nLazyString(UIStrings.remoteFileLoadingInfo),
+  }
 });

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -7,6 +7,7 @@
 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 SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -278,15 +279,15 @@ export class RenderingOptionsView extends UI.Widget.VBox {
 
   #appendCheckbox(
       label: Common.UIString.LocalizedString, subtitle: Common.UIString.LocalizedString,
-      setting: Common.Settings.Setting<boolean>, metric?: UI.SettingsUI.UserMetricOptions): UI.UIUtils.CheckboxLabel {
+      setting: Common.Settings.Setting<boolean>, metric?: UI.UIUtils.UserMetricOptions): UI.UIUtils.CheckboxLabel {
     const checkbox = UI.UIUtils.CheckboxLabel.create(label, false, subtitle, setting.name);
-    UI.SettingsUI.bindCheckbox(checkbox, setting, metric);
+    UI.UIUtils.bindCheckbox(checkbox, setting, metric);
     this.contentElement.appendChild(checkbox);
     return checkbox;
   }
 
   #appendSelect(label: string, setting: Common.Settings.Setting<unknown>): void {
-    const control = UI.SettingsUI.createControlForSetting(setting, label);
+    const control = SettingsUI.SettingsUI.createControlForSetting(setting, label);
     if (control) {
       this.contentElement.appendChild(control);
     }

package/front_end/generated/SupportedCSSProperties.js

@@ -519,6 +519,7 @@ export const generatedProperties = [
    "inset-block-start",
    "inset-inline-end",
    "inset-inline-start",
+   "interactivity",
    "interest-delay-end",
    "interest-delay-start",
    "interpolate-size",

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -627,19 +627,24 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #declareFunctions(context: PerformanceTraceContext): void {
     const focus = context.getItem();
     const {parsedTrace} = focus;
-    const insightSet = focus.primaryInsightSet;
 
-    this.declareFunction<{insightName: string}, {details: string}>('getInsightDetails', {
+    this.declareFunction<{insightSetId: string, insightName: string}, {details: string}>('getInsightDetails', {
       description:
-          'Returns detailed information about a specific insight. Use this before commenting on any specific issue to get more information.',
+          'Returns detailed information about a specific insight of an insight set. Use this before commenting on any specific issue to get more information.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
         nullable: false,
         properties: {
+          insightSetId: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description:
+                'The id for the specific insight set. Only use the ids given in the "Available insight sets" list.',
+            nullable: false,
+          },
           insightName: {
             type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'The name of the insight. Only use the insight names given in the Available Insights list.',
+            description: 'The name of the insight. Only use the insight names given in the "Available insights" list.',
             nullable: false,
           }
         },
@@ -647,19 +652,30 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       displayInfoFromArgs: params => {
         return {
           title: lockedString(`Investigating insight ${params.insightName}…`),
-          action: `getInsightDetails('${params.insightName}')`
+          action: `getInsightDetails('${params.insightSetId}', '${params.insightName}')`
         };
       },
       handler: async params => {
         debugLog('Function call: getInsightDetails', params);
+        const insightSet = parsedTrace.insights?.get(params.insightSetId);
+        if (!insightSet) {
+          const valid = ([...parsedTrace.insights?.values() ?? []])
+                            .map(
+                                insightSet => `id: ${insightSet.id}, url: ${insightSet.url}, bounds: ${
+                                    this.#formatter?.serializeBounds(insightSet.bounds)}`)
+                            .join('; ');
+          return {error: `Invalid insight set id. Valid insight set ids are: ${valid}`};
+        }
+
         const insight = insightSet?.model[params.insightName as keyof Trace.Insights.Types.InsightModels];
         if (!insight) {
-          return {error: 'No insight available'};
+          const valid = Object.keys(insightSet?.model).join(', ');
+          return {error: `No insight available. Valid insight names are: ${valid}`};
         }
 
         const details = new PerformanceInsightFormatter(focus, insight).formatInsight();
 
-        const key = `getInsightDetails('${params.insightName}')`;
+        const key = `getInsightDetails('${params.insightSetId}', '${params.insightName}')`;
         this.#cacheFunctionResult(focus, key, details);
         return {result: {details}};
       },

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt

@@ -504,9 +504,18 @@ IMPORTANT: Never show eventKey to the user.
 Title: PerformanceTraceFormatter formatTraceSummary web-dev.json.gz
 Content:
 URL: https://web.dev/cls/
-Bounds: {min: 1020034823047, max: 1020036087961}
+Trace bounds: {min: 1020034823047, max: 1020036087961}
 CPU throttling: none
 Network throttling: none
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: 86EB5E5C401E3E17ECE461B3FC627867
+
+URL: https://web.dev/cls/
+Bounds: {min: 1020034834921, max: 1020036087961}
 Metrics (lab / observed):
   - LCP: 118 ms, event: (eventKey: r-1802, ts: 1020034953358), nodeId: 209
   - LCP breakdown:
@@ -537,9 +546,18 @@ Available insights:
 Title: PerformanceTraceFormatter formatTraceSummary yahoo-news.json.gz
 Content:
 URL: https://news.yahoo.com/
-Bounds: {min: 157423484442, max: 157427277166}
+Trace bounds: {min: 157423484442, max: 157427277166}
 CPU throttling: none
 Network throttling: none
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: 513BDA1E9EC088611B53BFF7A859B5DD
+
+URL: https://news.yahoo.com/
+Bounds: {min: 157423488682, max: 157427277166}
 Metrics (lab / observed):
   - LCP: 464 ms, event: (eventKey: r-33210, ts: 157423953162), nodeId: 8
   - LCP breakdown:
@@ -596,12 +614,81 @@ Available insights:
     example question: How can I reduce the amount of legacy JavaScript on my page?
 === end content
 
+Title: PerformanceTraceFormatter formatTraceSummary multiple-navigations-render-blocking.json.gz
+Content:
+URL: http://localhost:8080/render-blocking
+Trace bounds: {min: 171605647473, max: 171616667355}
+CPU throttling: 1x
+Network throttling: Fast 3G
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: 8671F33ECE0C8DBAEFBC2F9A2D1D6107
+
+URL: http://localhost:8080/render-blocking
+Bounds: {min: 171607579779, max: 171613750571}
+Metrics (lab / observed):
+  - LCP: 1317 ms, event: (eventKey: r-6686, ts: 171608897210), nodeId: 10
+  - LCP breakdown:
+    - TTFB: 10 ms, bounds: {min: 171607579779, max: 171607589981.99997}
+    - Render delay: 1,307 ms, bounds: {min: 171607589981.99997, max: 171608897210}
+  - CLS: 0.00
+Metrics (field / real users): n/a – no data for this page in CrUX
+Available insights:
+  - insight name: LCPBreakdown
+    description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
+    relevant trace bounds: {min: 171607579779, max: 171608897210}
+    example question: Help me optimize my LCP score
+    example question: Which LCP phase was most problematic?
+    example question: What can I do to reduce the LCP time for this page load?
+  - insight name: RenderBlocking
+    description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) can move these network requests out of the critical path.
+    relevant trace bounds: {min: 171608170438, max: 171608877165}
+    example question: Show me the most impactful render blocking requests that I should focus on
+    example question: How can I reduce the number of render blocking requests?
+
+## insight set id: 1AE2016BBCC48AA090FDAE2CBBA01900
+
+URL: http://localhost:8080/render-blocking
+Bounds: {min: 171613750571, max: 171616667355}
+Metrics (lab / observed):
+  - LCP: 1310 ms, event: (eventKey: r-15639, ts: 171615060776), nodeId: 18
+  - LCP breakdown:
+    - TTFB: 3 ms, bounds: {min: 171613750571, max: 171613753188}
+    - Render delay: 1,308 ms, bounds: {min: 171613753188, max: 171615060776}
+  - CLS: 0.00
+Metrics (field / real users): n/a – no data for this page in CrUX
+Available insights:
+  - insight name: LCPBreakdown
+    description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
+    relevant trace bounds: {min: 171613750571, max: 171615060776}
+    example question: Help me optimize my LCP score
+    example question: Which LCP phase was most problematic?
+    example question: What can I do to reduce the LCP time for this page load?
+  - insight name: RenderBlocking
+    description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) can move these network requests out of the critical path.
+    relevant trace bounds: {min: 171614330544, max: 171615043224}
+    example question: Show me the most impactful render blocking requests that I should focus on
+    example question: How can I reduce the number of render blocking requests?
+=== end content
+
 Title: PerformanceTraceFormatter formatTraceSummary deals with CrUX manager errors
 Content:
 URL: http://localhost/image-delivery-cases.html
-Bounds: {min: 59728641874, max: 59734400108}
+Trace bounds: {min: 59728641874, max: 59734400108}
 CPU throttling: 1x
 Network throttling: No throttling
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: 9094E106056B51D078CE44F3356FE194
+
+URL: http://localhost/image-delivery-cases.html
+Bounds: {min: 59728649746, max: 59734400108}
 Metrics (lab / observed):
   - LCP: 663 ms, event: (eventKey: r-14753, ts: 59729312744), nodeId: 12
   - LCP breakdown:
@@ -663,9 +750,18 @@ Available insights:
 Title: PerformanceTraceFormatter formatTraceSummary image-delivery.json.gz
 Content:
 URL: http://localhost/image-delivery-cases.html
-Bounds: {min: 59728641874, max: 59734400108}
+Trace bounds: {min: 59728641874, max: 59734400108}
 CPU throttling: 1x
 Network throttling: No throttling
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: 9094E106056B51D078CE44F3356FE194
+
+URL: http://localhost/image-delivery-cases.html
+Bounds: {min: 59728649746, max: 59734400108}
 Metrics (lab / observed):
   - LCP: 663 ms, event: (eventKey: r-14753, ts: 59729312744), nodeId: 12
   - LCP breakdown:
@@ -734,9 +830,18 @@ Available insights:
 Title: PerformanceTraceFormatter formatTraceSummary includes INP insight when there is no navigation
 Content:
 URL: https://b2607f8b04800100000289cb1c0a82ba72253000000000000000001.proxy.googlers.com/long-interaction/index.html?x=35
-Bounds: {min: 337943614456, max: 337947260898}
+Trace bounds: {min: 337943614456, max: 337947260898}
 CPU throttling: none
 Network throttling: none
+
+# Available insight sets
+
+The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
+
+## insight set id: NO_NAVIGATION
+
+URL: https://b2607f8b04800100000289cb1c0a82ba72253000000000000000001.proxy.googlers.com/long-interaction/index.html?x=35
+Bounds: {min: 337943614456, max: 337947260898}
 Metrics (lab / observed):
   - INP: 139 ms, event: (eventKey: s-3347, ts: 337944870984)
   - CLS: 0.00

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -116,62 +116,69 @@ export class PerformanceTraceFormatter {
 
   formatTraceSummary(): string {
     const parsedTrace = this.#parsedTrace;
-    const insightSet = this.#insightSet;
     const traceMetadata = this.#parsedTrace.metadata;
     const data = parsedTrace.data;
 
     const parts = [];
 
-    const lcp = insightSet ? Trace.Insights.Common.getLCP(insightSet) : null;
-    const cls = insightSet ? Trace.Insights.Common.getCLS(insightSet) : null;
-    const inp = insightSet ? Trace.Insights.Common.getINP(insightSet) : null;
-
     parts.push(`URL: ${data.Meta.mainFrameURL}`);
-    parts.push(`Bounds: ${this.serializeBounds(data.Meta.traceBounds)}`);
+    parts.push(`Trace bounds: ${this.serializeBounds(data.Meta.traceBounds)}`);
     parts.push('CPU throttling: ' + (traceMetadata.cpuThrottling ? `${traceMetadata.cpuThrottling}x` : 'none'));
     parts.push(`Network throttling: ${traceMetadata.networkThrottling ?? 'none'}`);
-    if (lcp || cls || inp) {
-      parts.push('Metrics (lab / observed):');
-      if (lcp) {
-        const nodeId = insightSet?.model.LCPBreakdown.lcpEvent?.args.data?.nodeId;
-        const nodeIdText = nodeId !== undefined ? `, nodeId: ${nodeId}` : '';
-        parts.push(
-            `  - LCP: ${Math.round(lcp.value / 1000)} ms, event: ${this.serializeEvent(lcp.event)}${nodeIdText}`);
-        const subparts = insightSet?.model.LCPBreakdown.subparts;
-        if (subparts) {
-          const serializeSubpart = (subpart: Trace.Insights.Models.LCPBreakdown.Subpart): string => {
-            return `${micros(subpart.range)}, bounds: ${this.serializeBounds(subpart)}`;
-          };
-          parts.push('  - LCP breakdown:');
-          parts.push(`    - TTFB: ${serializeSubpart(subparts.ttfb)}`);
-          if (subparts.loadDelay !== undefined) {
-            parts.push(`    - Load delay: ${serializeSubpart(subparts.loadDelay)}`);
-          }
-          if (subparts.loadDuration !== undefined) {
-            parts.push(`    - Load duration: ${serializeSubpart(subparts.loadDuration)}`);
+
+    parts.push('\n# Available insight sets\n');
+    parts.push(
+        'The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.');
+
+    for (const insightSet of parsedTrace.insights?.values() ?? []) {
+      const lcp = insightSet ? Trace.Insights.Common.getLCP(insightSet) : null;
+      const cls = insightSet ? Trace.Insights.Common.getCLS(insightSet) : null;
+      const inp = insightSet ? Trace.Insights.Common.getINP(insightSet) : null;
+
+      parts.push(`\n## insight set id: ${insightSet.id}\n`);
+      parts.push(`URL: ${insightSet.url}`);
+      parts.push(`Bounds: ${this.serializeBounds(insightSet.bounds)}`);
+      if (lcp || cls || inp) {
+        parts.push('Metrics (lab / observed):');
+        if (lcp) {
+          const nodeId = insightSet?.model.LCPBreakdown.lcpEvent?.args.data?.nodeId;
+          const nodeIdText = nodeId !== undefined ? `, nodeId: ${nodeId}` : '';
+          parts.push(
+              `  - LCP: ${Math.round(lcp.value / 1000)} ms, event: ${this.serializeEvent(lcp.event)}${nodeIdText}`);
+          const subparts = insightSet?.model.LCPBreakdown.subparts;
+          if (subparts) {
+            const serializeSubpart = (subpart: Trace.Insights.Models.LCPBreakdown.Subpart): string => {
+              return `${micros(subpart.range)}, bounds: ${this.serializeBounds(subpart)}`;
+            };
+            parts.push('  - LCP breakdown:');
+            parts.push(`    - TTFB: ${serializeSubpart(subparts.ttfb)}`);
+            if (subparts.loadDelay !== undefined) {
+              parts.push(`    - Load delay: ${serializeSubpart(subparts.loadDelay)}`);
+            }
+            if (subparts.loadDuration !== undefined) {
+              parts.push(`    - Load duration: ${serializeSubpart(subparts.loadDuration)}`);
+            }
+            parts.push(`    - Render delay: ${serializeSubpart(subparts.renderDelay)}`);
           }
-          parts.push(`    - Render delay: ${serializeSubpart(subparts.renderDelay)}`);
         }
+        if (inp) {
+          parts.push(`  - INP: ${Math.round(inp.value / 1000)} ms, event: ${this.serializeEvent(inp.event)}`);
+        }
+        if (cls) {
+          const eventText = cls.worstClusterEvent ? `, event: ${this.serializeEvent(cls.worstClusterEvent)}` : '';
+          parts.push(`  - CLS: ${cls.value.toFixed(2)}${eventText}`);
+        }
+      } else {
+        parts.push('Metrics (lab / observed): n/a');
       }
-      if (inp) {
-        parts.push(`  - INP: ${Math.round(inp.value / 1000)} ms, event: ${this.serializeEvent(inp.event)}`);
-      }
-      if (cls) {
-        const eventText = cls.worstClusterEvent ? `, event: ${this.serializeEvent(cls.worstClusterEvent)}` : '';
-        parts.push(`  - CLS: ${cls.value.toFixed(2)}${eventText}`);
-      }
-    } else {
-      parts.push('Metrics (lab / observed): n/a');
-    }
 
-    const cruxParts = insightSet && this.#getCruxTraceSummary(insightSet);
-    if (cruxParts?.length) {
-      parts.push(...cruxParts);
-    } else {
-      parts.push('Metrics (field / real users): n/a – no data for this page in CrUX');
-    }
+      const cruxParts = insightSet && this.#getCruxTraceSummary(insightSet);
+      if (cruxParts?.length) {
+        parts.push(...cruxParts);
+      } else {
+        parts.push('Metrics (field / real users): n/a – no data for this page in CrUX');
+      }
 
-    if (insightSet) {
       parts.push('Available insights:');
       for (const [insightName, model] of Object.entries(insightSet.model)) {
         if (model.state === 'pass') {
@@ -202,8 +209,6 @@ export class PerformanceTraceFormatter {
         const insightPartsText = insightParts.join('\n    ');
         parts.push(`  - ${insightPartsText}`);
       }
-    } else {
-      parts.push('Available insights: none');
     }
 
     return parts.join('\n');

package/front_end/models/cpu_profile/ProfileTreeModel.ts

@@ -13,7 +13,7 @@ export class ProfileNode {
   id: number;
   parent: ProfileNode|null;
   children: this[];
-  functionName: string;
+  originalFunctionName: string|null = null;
   depth!: number;
   deoptReason!: string|null;
   constructor(callFrame: Protocol.Runtime.CallFrame) {
@@ -22,7 +22,6 @@ export class ProfileNode {
     this.self = 0;
     this.total = 0;
     this.id = 0;
-    this.functionName = callFrame.functionName;
     this.parent = null;
     this.children = [];
   }
@@ -43,11 +42,12 @@ export class ProfileNode {
     return this.callFrame.columnNumber;
   }
 
-  setFunctionName(name: string|null): void {
-    if (name === null) {
-      return;
-    }
-    this.functionName = name;
+  get functionName(): string {
+    return this.originalFunctionName ?? this.callFrame.functionName;
+  }
+
+  setOriginalFunctionName(name: string|null): void {
+    this.originalFunctionName = name;
   }
 }
 

package/front_end/models/trace_source_maps_resolver/SourceMapsResolver.ts

@@ -173,7 +173,7 @@ export class SourceMapsResolver extends EventTarget {
           const resolvedFunctionName =
               await SourceMapScopes.NamesResolver.resolveProfileFrameFunctionName(node.callFrame, target);
           updatedMappings ||= Boolean(resolvedFunctionName);
-          node.setFunctionName(resolvedFunctionName);
+          node.setOriginalFunctionName(resolvedFunctionName);
 
           const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
           const script = debuggerModel?.scriptForId(node.scriptId) || null;

package/front_end/panels/application/StorageView.ts

@@ -12,6 +12,7 @@ import type * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -207,7 +208,7 @@ export class StorageView extends UI.Widget.VBox {
     this.clearButton.id = 'storage-view-clear-button';
     clearButtonSection.appendChild(this.clearButton);
 
-    const includeThirdPartyCookiesCheckbox = UI.SettingsUI.createSettingCheckbox(
+    const includeThirdPartyCookiesCheckbox = SettingsUI.SettingsUI.createSettingCheckbox(
         i18nString(UIStrings.includingThirdPartyCookies), this.includeThirdPartyCookiesSetting);
     includeThirdPartyCookiesCheckbox.classList.add('include-third-party-cookies');
     clearButtonSection.appendChild(includeThirdPartyCookiesCheckbox);
@@ -280,7 +281,7 @@ export class StorageView extends UI.Widget.VBox {
     const row = section.appendRow();
     const setting = this.settings.get(settingName);
     if (setting) {
-      row.appendChild(UI.SettingsUI.createSettingCheckbox(title, setting));
+      row.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(title, setting));
     }
   }