chrome-devtools-frontend 1.0.1566234 → 1.0.1567721

package/docs/contributing/performance.md

@@ -0,0 +1,24 @@
+# Performance testing
+
+Performance tests run in Chromium infra to measure panel loading times. The `devtools_frontend` Crossbench benchmark collects the load time for the five major panels (elements, console, network, sources, resources) against three pages: [blank](about:blank), [speedometertests](https://chromium-workloads.web.app/speedometer/v3.1/?iterationCount=1&startAutomatically&suites=TodoMVC-Angular-Complex-DOM,TodoMVC-JavaScript-ES5-Complex-DOM,TodoMVC-React-Complex-DOM), and [dailybroadcast](https://browserben.ch/speedometer/v3.1/resources/newssite/news-next/dist/index.html).
+
+Official results can be viewed on this [Skia-perf page](https://chrome-perf.corp.goog/m?begin=1767637318&end=1768242118&shortcut=53b911343bb42697c4a8e9f750aa421d&totalGraphs=1).
+
+## How to run perf benchmark locally
+
+Crossbench is available within the Chromium repository at `./tools/perf` and is kept up-to-date by running `gclient sync`. Alternatively you can clone the Crossbench [repo](sso://chromium/crossbench). The Crossbench executable is named `cb.py`.
+
+To execute the full DevTools benchmark:
+`./cb.py devtools_frontend --repeat=N`.
+When --repeat argument is missing we run every scenario 2 times.
+
+To execute the benchmark against a subset of panels and/or sites:
+`./cb.py devtools_frontend --panels=elements,resources --sites=blank,dailybroadcast`
+
+To run the benchmark against a local Chromium build, specify the path to your browser executable:
+`./cb.py devtools_frontend --browser=path/to/chrome`
+
+To run the benchmark against your local DevTools build:
+`./cb.py devtools-frontend --browser=path/to/chrome -- --custom-devtools-frontend=file://$(realpath ./path/to/devtools)`
+
+At the end of each run, Crossbench generates a report and outputs its path. Review the `devtools_frontend_load_time.json` file in the report folder and compare your numbers with the official performance runs.

package/front_end/core/common/Base64.ts

@@ -32,13 +32,32 @@ export function decode(input: string): Uint8Array<ArrayBuffer> {
   return bytes;
 }
 
+/**
+ * Note: if input can be very large (larger than the max string size), callers should
+ * expect this to throw an error.
+ */
 export function encode(input: BlobPart): Promise<string> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
-    reader.onerror = () => reject(new Error('failed to convert to base64'));
+    reader.onerror = () => reject(new Error('failed to convert to base64: internal error'));
     reader.onload = () => {
+      // The input was too large to encode as a string. The caller should anticipate
+      // this and use a workaround. See TimelinePanel.ts innerSaveToFile for an example.
+      // For more information, see crbug.com/436482118.
+      if (reader.result === '') {
+        reject(new Error('failed to convert to base64: input too large to encode as base64 string'));
+        return;
+      }
+
+      // This string can be very large, so take care to not double memory. `split`
+      // was used here before, which always results in new strings in V8. By using
+      // slice instead, we leverage the sliced string optimization in V8 and avoid
+      // doubling the memory requirement (even if temporarily: that is a potential
+      // source of OOM crashes given large enough input, such as is common with
+      // Performance traces).
       const blobAsUrl = reader.result as string;
-      const [, base64] = blobAsUrl.split(',', 2);
+      const index = blobAsUrl.indexOf(',');
+      const base64 = blobAsUrl.slice(index + 1);
       resolve(base64);
     };
 

package/front_end/core/common/ResourceType.ts

@@ -250,6 +250,13 @@ export class ResourceType {
     return regex.test(contentType) ? 'application/json' : contentType;
   }
 
+  /**
+   * Checks whether the given MIME type represents JavaScript content.
+   */
+  static isJavaScriptMimeType(mimeType: string): boolean {
+    return mimeType === 'application/javascript' || mimeType === 'text/javascript';
+  }
+
   /**
    * Adds suffixes iff the mimeType is 'text/javascript' to denote whether the JS is minified or from
    * a source map.

package/front_end/core/host/InspectorFrontendHostStub.ts

@@ -147,6 +147,9 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
   }
 
   inspectedURLChanged(url: Platform.DevToolsPath.UrlString): void {
+    if (!('document' in globalThis)) {
+      return;
+    }
     document.title = i18nString(UIStrings.devtoolsS, {PH1: url.replace(/^https?:\/\//, '')});
   }
 

package/front_end/core/host/UserMetrics.ts

@@ -317,6 +317,26 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordPerformanceHistogram(
         'DevTools.Insights.TeaserFirstChunkGenerationTime', timeInMilliseconds);
   }
+
+  consoleInsightTeaserAbortedAfterFirstCharacter(timeInMilliseconds: number): void {
+    InspectorFrontendHostInstance.recordPerformanceHistogram(
+        'DevTools.Insights.TeaserAfterFirstCharacterAbortionTime', timeInMilliseconds);
+  }
+
+  consoleInsightTeaserAbortedBeforeFirstCharacter(timeInMilliseconds: number): void {
+    InspectorFrontendHostInstance.recordPerformanceHistogram(
+        'DevTools.Insights.TeaserBeforeFirstCharacterAbortionTime', timeInMilliseconds);
+  }
+
+  consoleInsightLongTeaserGenerated(timeInMilliseconds: number): void {
+    InspectorFrontendHostInstance.recordPerformanceHistogram(
+        'DevTools.Insights.LongTeaserGenerationTime', timeInMilliseconds);
+  }
+
+  consoleInsightShortTeaserGenerated(timeInMilliseconds: number): void {
+    InspectorFrontendHostInstance.recordPerformanceHistogram(
+        'DevTools.Insights.ShortTeaserGenerationTime', timeInMilliseconds);
+  }
 }
 
 /**

package/front_end/core/sdk/NetworkManager.ts

@@ -1913,10 +1913,10 @@ export class RequestConditions extends Common.ObjectWrapper.ObjectWrapper<Reques
             matchedNetworkConditions.push({ruleIds, urlPattern, conditions});
           }
         }
+      }
 
-        if (globalConditions) {
-          matchedNetworkConditions.push({conditions: globalConditions});
-        }
+      if (globalConditions) {
+        matchedNetworkConditions.push({conditions: globalConditions});
       }
 
       const promises: Array<Promise<unknown>> = [];

package/front_end/entrypoints/main/MainImpl.ts

@@ -971,7 +971,6 @@ export class MainMenuItem implements UI.Toolbar.Provider {
       const persistence = viewExtension.persistence();
       const title = viewExtension.title();
       const id = viewExtension.viewId();
-      const promotionId = viewExtension.featurePromotionId();
 
       if (id === 'issues-pane') {
         moreTools.defaultSection().appendItem(title, () => {
@@ -988,14 +987,9 @@ export class MainMenuItem implements UI.Toolbar.Provider {
         continue;
       }
 
-      let additionalElement = undefined;
-      if (promotionId) {
-        additionalElement = UI.UIUtils.maybeCreateNewBadge(promotionId);
-      }
-
       moreTools.defaultSection().appendItem(title, () => {
         void UI.ViewManager.ViewManager.instance().showView(id, true, false);
-      }, {additionalElement, isPreviewFeature: viewExtension.isPreviewFeature(), jslogContext: id});
+      }, {isPreviewFeature: viewExtension.isPreviewFeature(), jslogContext: id});
     }
 
     const helpSubMenu = contextMenu.footerSection().appendSubMenuItem(i18nString(UIStrings.help), false, 'help');

package/front_end/generated/Deprecation.ts

@@ -242,10 +242,6 @@ export const UIStrings = {
    * @description Warning displayed to developers. It is shown when the `XMLHttpRequest` API is used in a way that it slows down the page load of the next page. The `main thread` refers to an operating systems thread used to run most of the processing of HTML documents, so please use a consistent wording.
    */
   XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload: "Synchronous `XMLHttpRequest` on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.",
-  /**
-   * @description Warning displayed to developers that they are using externally loaded entities in an XML document that constitutes a part of the web page. Externally loaded entities are a technical concept of XML document processing.
-   */
-  XMLNoExternalEntities: "Externally loaded entities in XML parsing have been deprecated and will be removed from this browser soon.",
   /**
    * @description Warning displayed to developers that they are using either the XSLTProcessor API, or XSLT processing instructions, both of which have been deprecated and are scheduled to be removed.
    */
@@ -374,10 +370,6 @@ export const DEPRECATIONS_METADATA: Partial<Record<string, DeprecationDescriptor
   "XHRJSONEncodingDetection": {
     "milestone": 93
   },
-  "XMLNoExternalEntities": {
-    "chromeStatusFeature": 6734457763659776,
-    "milestone": 144
-  },
   "XSLT": {
     "chromeStatusFeature": 4709671889534976,
     "milestone": 143

package/front_end/generated/InspectorBackendCommands.ts

@@ -857,7 +857,7 @@ inspectorBackend.registerCommand("Network.getAllCookies", [], ["cookies"], "Retu
 inspectorBackend.registerCommand("Network.getCertificate", [{"name": "origin", "type": "string", "optional": false, "description": "Origin to get certificate for.", "typeRef": null}], ["tableNames"], "Returns the DER-encoded certificate.");
 inspectorBackend.registerCommand("Network.getCookies", [{"name": "urls", "type": "array", "optional": true, "description": "The list of URLs for which applicable cookies will be fetched. If not specified, it's assumed to be set to the list containing the URLs of the page and all of its subframes.", "typeRef": "string"}], ["cookies"], "Returns all browser cookies for the current URL. Depending on the backend support, will return detailed cookie information in the `cookies` field.");
 inspectorBackend.registerCommand("Network.getResponseBody", [{"name": "requestId", "type": "string", "optional": false, "description": "Identifier of the network request to get content for.", "typeRef": "Network.RequestId"}], ["body", "base64Encoded"], "Returns content served for the given request.");
-inspectorBackend.registerCommand("Network.getRequestPostData", [{"name": "requestId", "type": "string", "optional": false, "description": "Identifier of the network request to get content for.", "typeRef": "Network.RequestId"}], ["postData"], "Returns post data sent with the request. Returns an error when no data was sent with the request.");
+inspectorBackend.registerCommand("Network.getRequestPostData", [{"name": "requestId", "type": "string", "optional": false, "description": "Identifier of the network request to get content for.", "typeRef": "Network.RequestId"}], ["postData", "base64Encoded"], "Returns post data sent with the request. Returns an error when no data was sent with the request.");
 inspectorBackend.registerCommand("Network.getResponseBodyForInterception", [{"name": "interceptionId", "type": "string", "optional": false, "description": "Identifier for the intercepted request to get body for.", "typeRef": "Network.InterceptionId"}], ["body", "base64Encoded"], "Returns content served for the given currently intercepted request.");
 inspectorBackend.registerCommand("Network.takeResponseBodyForInterceptionAsStream", [{"name": "interceptionId", "type": "string", "optional": false, "description": "", "typeRef": "Network.InterceptionId"}], ["stream"], "Returns a handle to the stream representing the response body. Note that after this command, the intercepted request can't be continued as is -- you either need to cancel it or to provide the response body. The stream only supports sequential read, IO.read will fail if the position is specified.");
 inspectorBackend.registerCommand("Network.replayXHR", [{"name": "requestId", "type": "string", "optional": false, "description": "Identifier of XHR to replay.", "typeRef": "Network.RequestId"}], [], "This method sends a new XMLHttpRequest which is identical to the original one. The following parameters should be identical: method, url, async, request body, extra headers, withCredentials attribute, user, password.");

package/front_end/generated/SupportedCSSProperties.js

@@ -505,6 +505,7 @@ export const generatedProperties = [
    "grid-column-end",
    "grid-column-start",
    "grid-lanes-direction",
+   "grid-lanes-pack",
    "grid-row-end",
    "grid-row-start",
    "grid-template-areas",
@@ -603,12 +604,10 @@ export const generatedProperties = [
    "overflow-y",
    "overlay",
    "override-colors",
-   "overscroll-area",
    "overscroll-behavior-block",
    "overscroll-behavior-inline",
    "overscroll-behavior-x",
    "overscroll-behavior-y",
-   "overscroll-position",
    "pad",
    "padding-block-end",
    "padding-block-start",
@@ -747,11 +746,11 @@ export const generatedProperties = [
    "text-wrap-mode",
    "text-wrap-style",
    "timeline-scope",
-   "timeline-trigger-exit-range-end",
-   "timeline-trigger-exit-range-start",
+   "timeline-trigger-active-range-end",
+   "timeline-trigger-active-range-start",
+   "timeline-trigger-entry-range-end",
+   "timeline-trigger-entry-range-start",
    "timeline-trigger-name",
-   "timeline-trigger-range-end",
-   "timeline-trigger-range-start",
    "timeline-trigger-source",
    "top",
    "touch-action",
@@ -2682,12 +2681,19 @@ export const generatedProperties = [
   "keywords": [
    "normal",
    "row",
-   "row-reverse",
    "column",
-   "column-reverse"
+   "fill-reverse",
+   "track-reverse"
   ],
   "name": "grid-lanes-direction"
  },
+ {
+  "keywords": [
+   "normal",
+   "dense"
+  ],
+  "name": "grid-lanes-pack"
+ },
  {
   "longhands": [
    "grid-row-start",
@@ -3414,12 +3420,6 @@ export const generatedProperties = [
  {
   "name": "override-colors"
  },
- {
-  "keywords": [
-   "none"
-  ],
-  "name": "overscroll-area"
- },
  {
   "longhands": [
    "overscroll-behavior-x",
@@ -3449,12 +3449,6 @@ export const generatedProperties = [
   ],
   "name": "overscroll-behavior-y"
  },
- {
-  "keywords": [
-   "none"
-  ],
-  "name": "overscroll-position"
- },
  {
   "name": "pad"
  },
@@ -4587,41 +4581,41 @@ export const generatedProperties = [
   "longhands": [
    "timeline-trigger-name",
    "timeline-trigger-source",
-   "timeline-trigger-range-start",
-   "timeline-trigger-range-end",
-   "timeline-trigger-exit-range-start",
-   "timeline-trigger-exit-range-end"
+   "timeline-trigger-entry-range-start",
+   "timeline-trigger-entry-range-end",
+   "timeline-trigger-active-range-start",
+   "timeline-trigger-active-range-end"
   ],
   "name": "timeline-trigger"
  },
  {
   "longhands": [
-   "timeline-trigger-exit-range-start",
-   "timeline-trigger-exit-range-end"
+   "timeline-trigger-active-range-start",
+   "timeline-trigger-active-range-end"
   ],
-  "name": "timeline-trigger-exit-range"
+  "name": "timeline-trigger-active-range"
  },
  {
-  "name": "timeline-trigger-exit-range-end"
+  "name": "timeline-trigger-active-range-end"
  },
  {
-  "name": "timeline-trigger-exit-range-start"
- },
- {
-  "name": "timeline-trigger-name"
+  "name": "timeline-trigger-active-range-start"
  },
  {
   "longhands": [
-   "timeline-trigger-range-start",
-   "timeline-trigger-range-end"
+   "timeline-trigger-entry-range-start",
+   "timeline-trigger-entry-range-end"
   ],
-  "name": "timeline-trigger-range"
+  "name": "timeline-trigger-entry-range"
  },
  {
-  "name": "timeline-trigger-range-end"
+  "name": "timeline-trigger-entry-range-end"
  },
  {
-  "name": "timeline-trigger-range-start"
+  "name": "timeline-trigger-entry-range-start"
+ },
+ {
+  "name": "timeline-trigger-name"
  },
  {
   "keywords": [
@@ -6067,9 +6061,15 @@ export const generatedPropertyValues = {
   "values": [
    "normal",
    "row",
-   "row-reverse",
    "column",
-   "column-reverse"
+   "fill-reverse",
+   "track-reverse"
+  ]
+ },
+ "grid-lanes-pack": {
+  "values": [
+   "normal",
+   "dense"
   ]
  },
  "grid-row-end": {
@@ -6463,11 +6463,6 @@ export const generatedPropertyValues = {
    "auto"
   ]
  },
- "overscroll-area": {
-  "values": [
-   "none"
-  ]
- },
  "overscroll-behavior-x": {
   "values": [
    "auto",
@@ -6482,11 +6477,6 @@ export const generatedPropertyValues = {
    "none"
   ]
  },
- "overscroll-position": {
-  "values": [
-   "none"
-  ]
- },
  "page": {
   "values": [
    "auto"

package/front_end/generated/protocol.ts

@@ -11954,6 +11954,10 @@ export namespace Network {
      * Request body string, omitting files from multipart requests
      */
     postData: string;
+    /**
+     * True, if content was sent as base64.
+     */
+    base64Encoded: boolean;
   }
 
   export interface GetResponseBodyForInterceptionRequest {

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

@@ -601,7 +601,8 @@ export abstract class AiAgent<T> {
             },
           };
           request = this.buildRequest(query, Host.AidaClient.Role.ROLE_UNSPECIFIED);
-        } catch {
+        } catch (err) {
+          debugLog('Error handling function call', err);
           yield this.#createErrorResponse(ErrorType.UNKNOWN);
           break;
         }

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

@@ -77,37 +77,29 @@ const getGreenDevAdditionalWidgetGuidelines = (): string => {
 
   if (widgetsFromFunctionCalls) {
     return `
-- CRITICAL: You have access to three functions for adding rich, interactive widgets to your response:
-  \`addInsightWidget\`, \`addNetworkRequestWidget\`, and \`addFlameChartWidget\`.
-  You MUST use these functions whenever you refer to a corresponding entity.
-
-- **\`addInsightWidget({insightType: '...'})\`**:
-  - **When to use**: Call this function every time you mention a specific performance insight (e.g., LCP, INP,
-    CLS culprits).
-  - **Purpose**: It embeds an interactive widget that provides a detailed breakdown and visualization of the
-    insight.
-  - **Example**: If you are explaining the causes of a poor LCP score, you MUST also call
-    \`addInsightWidget({insightType: 'LCPBreakdown'})\`. This provides the user with the data to explore
-    alongside your explanation.
-- **\`addNetworkRequestWidget({eventKey: '...'})\`**:
+- CRITICAL: You have access to a function for adding rich, interactive widgets to your response: \`addWidget\`.
+  You MUST use this function whenever you refer to a corresponding entity.
+
+- **\`addWidget({widget: {type: 'insight', insightType: '...'}})\`**:
+  - **When to use**: Call this function every time you mention a specific performance insight (e.g., LCP, INP, CLS culprits).
+  - **Purpose**: It embeds an interactive widget that provides a detailed breakdown and visualization of the insight.
+  - **Example**: If you are explaining the causes of a poor LCP score, you MUST also call \`addWidget({widget: {type: 'insight', insightType: 'LCPBreakdown'}})\`.
+
+- **\`addWidget({widget: {type: 'network-request', eventKey: '...'}})\`**:
   - **When to use**: Call this function whenever you discuss a specific network request.
-  - **Purpose**: It adds a widget displaying the full details of the network request, such as its timing,
-    headers, and priority.
-  - **Critical**: The eventKey should be the trace event key (only the number, no letters prefix or -) of that
-    script's network request.
-  - **Example**: If you identify a render-blocking script, you MUST also call
-    \`addNetworkRequestWidget({eventKey: '...'})\` with the trace event key (only the number, no letters prefix
-    or -) of that script's network request.
-- **\`addFlameChartWidget({start: ..., end: ...})\`**:
-  - **When to use**: Call this function to highlight a specific time range within the trace, especially when
-    discussing long tasks, specific events, or periods of high activity.
+  - **Purpose**: It adds a widget displaying the full details of the network request, such as its timing, headers, and priority.
+  - **Critical**: The eventKey should be the trace event key (only the number, no letters prefix or -) of that script's network request.
+  - **Example**: If you identify a render-blocking script, you MUST also call \`addWidget({widget: {type: 'network-request', eventKey: '...'}})\`.
+
+- **\`addWidget({widget: {type: 'flamechart', start: ..., end: ...}})\`**:
+  - **When to use**: Call this function to highlight a specific time range within the trace, especially when discussing long tasks, specific events, or periods of high activity.
     - **Purpose**: It embeds a focused flame chart visualization for the given time range (in microseconds).
-    - **Example**: If you find a long task that is blocking the main thread, you MUST also call
-      \`addFlameChartWidget({start: 123456, end: 789012})\`. This provides the user with the data to explore
-      alongside your explanation.
+    - **Example**: If you find a long task that is blocking the main thread, you MUST also call \`addWidget({widget: {type: 'flamechart', start: 123456, end: 789012}})\`.
+
 - **General Rules**:
-  - You MUST call these functions as soon as you identify the entity you are discussing.
+  - You MUST call this function as soon as you identify the entity you are discussing.
   - Do NOT add more than one widget for the same insight, network request, or time range to avoid redundancy.
+  - If you have already shown a widget for any specific insight, network request, or time range, do not show it again.
 `;
   }
 
@@ -1247,104 +1239,105 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     }
 
     if (Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
-      this.declareFunction<{insightType: Trace.Insights.Types.InsightKeys}>('addInsightWidget', {
+      this.declareFunction<
+          {
+            type: 'insight' | 'network-request' | 'flamechart',
+            insightType?: Trace.Insights.Types.InsightKeys,
+            eventKey?: number,
+            start?: number,
+            end?: number,
+          },
+          object|{error: string}>('addWidget', {
         description:
-            'Adds an insight widget to the response. When mentioning an insight, call this function to also display an appropriate widget.',
+            'Adds an insight widget to the response. When mentioning an insight, call this function to also display an appropriate widget. Use this as much as possible to provide a better user experience.',
         parameters: {
           type: Host.AidaClient.ParametersTypes.OBJECT,
           description: '',
           nullable: false,
           properties: {
-            insightType: {
+            type: {
               type: Host.AidaClient.ParametersTypes.STRING,
-              description:
-                  'The name of the insight. Only use the insight names given in the "Available insights" list.',
+              description: 'The type of the widget to add. Possible values: insight, network-request, flamechart',
               nullable: false,
             },
-          },
-        },
-        handler: async _params => {
-          ArtifactsManager.instance().addArtifact({type: 'insight', insightType: _params.insightType});
-          return {result: {success: true}};
-        },
-      });
-
-      this.declareFunction<{eventKey: string}, object|{error: string}>('addNetworkRequestWidget', {
-        description:
-            'Adds a network request widget to the response. When mentioning a network request, call this function with its trace event key.',
-        parameters: {
-          type: Host.AidaClient.ParametersTypes.OBJECT,
-          description: '',
-          nullable: false,
-          properties: {
+            insightType: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The type of the insight widget. Include for insight widgets.',
+              nullable: true,
+            },
             eventKey: {
               type: Host.AidaClient.ParametersTypes.STRING,
-              description: 'The trace event key for the network request.',
-              nullable: false,
+              description: 'The event key for the network request widget. Include for network request widgets.',
+              nullable: true,
             },
-          },
-        },
-        handler: async _params => {
-          const rawTraceEvent =
-              Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents().at(
-                  Number(_params.eventKey));
-          // Get the trace event object if it is available.
-          // If the trace is uploaded, we need to use the synthetic event.
-          if (rawTraceEvent && Trace.Types.Events.isSyntheticNetworkRequest(rawTraceEvent)) {
-            const rawTraceEventId = rawTraceEvent?.args?.data?.requestId;
-            const rawTraceEventUrl = rawTraceEvent?.args?.data?.url;
-            const networkRequest = rawTraceEvent ? Logs.NetworkLog.NetworkLog.instance()
-                                                       .requestsForId(rawTraceEventId)
-                                                       .find(r => r.url() === rawTraceEventUrl) :
-                                                   null;
-            if (networkRequest) {
-              ArtifactsManager.instance().addArtifact({type: 'network-request', request: networkRequest});
-              return {result: {success: true}};
-            }
-          }
-
-          const syntheticRequest =
-              Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().syntheticEventForRawEventIndex(
-                  Number(_params.eventKey));
-
-          if (syntheticRequest && Trace.Types.Events.isSyntheticNetworkRequest(syntheticRequest)) {
-            ArtifactsManager.instance().addArtifact({
-              type: 'network-request',
-              request: syntheticRequest,
-            });
-            return {result: {success: true}};
-          }
-
-          return {result: {error: 'Could not find network request'}};
-        },
-      });
-
-      this.declareFunction<{start: number, end: number}, object|{error: string}>('addFlameChartWidget', {
-        description: 'Adds a flame chart widget to the response.',
-        parameters: {
-          type: Host.AidaClient.ParametersTypes.OBJECT,
-          description: '',
-          nullable: false,
-          properties: {
             start: {
               type: Host.AidaClient.ParametersTypes.INTEGER,
-              description: 'The start time of the flame chart in microseconds.',
-              nullable: false,
+              description: 'The start time for the flame chart widget. Include for flame chart widgets.',
+              nullable: true,
             },
             end: {
               type: Host.AidaClient.ParametersTypes.INTEGER,
-              description: 'The end time of the flame chart in microseconds.',
-              nullable: false,
+              description: 'The end time for the flame chart widget. Include for flame chart widgets.',
+              nullable: true,
             },
           },
         },
-        handler: async _params => {
-          ArtifactsManager.instance().addArtifact({
-            type: 'flamechart',
-            start: Trace.Types.Timing.Micro(_params.start),
-            end: Trace.Types.Timing.Micro(_params.end),
-          });
-          return {result: {success: true}};
+        handler: async params => {
+          switch (params.type) {
+            case 'insight':
+              if (!params.insightType) {
+                return {error: 'Missing insightType for insight widget'};
+              }
+              ArtifactsManager.instance().addArtifact({type: 'insight', insightType: params.insightType});
+              return {result: {success: true}};
+            case 'network-request': {
+              if (!params.eventKey) {
+                return {error: 'Missing eventKey for network-request widget'};
+              }
+              const rawTraceEvent =
+                  Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents().at(
+                      Number(params.eventKey));
+              // Get the trace event object if it is available.
+              // If the trace is uploaded, we need to use the synthetic event.
+              if (rawTraceEvent && Trace.Types.Events.isSyntheticNetworkRequest(rawTraceEvent)) {
+                const rawTraceEventId = rawTraceEvent?.args?.data?.requestId;
+                const rawTraceEventUrl = rawTraceEvent?.args?.data?.url;
+                const networkRequest = rawTraceEvent ? Logs.NetworkLog.NetworkLog.instance()
+                                                           .requestsForId(rawTraceEventId)
+                                                           .find(r => r.url() === rawTraceEventUrl) :
+                                                       null;
+                if (networkRequest) {
+                  ArtifactsManager.instance().addArtifact({type: 'network-request', request: networkRequest});
+                  return {result: {success: true}};
+                }
+              }
+
+              const syntheticRequest = Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager()
+                                           .syntheticEventForRawEventIndex(Number(params.eventKey));
+
+              if (syntheticRequest && Trace.Types.Events.isSyntheticNetworkRequest(syntheticRequest)) {
+                ArtifactsManager.instance().addArtifact({
+                  type: 'network-request',
+                  request: syntheticRequest,
+                });
+                return {result: {success: true}};
+              }
+
+              return {result: {error: 'Could not find network request'}};
+            }
+            case 'flamechart':
+              if (params.start === undefined || params.end === undefined) {
+                return {error: 'Missing start or end for flamechart widget'};
+              }
+              ArtifactsManager.instance().addArtifact({
+                type: 'flamechart',
+                start: Trace.Types.Timing.Micro(params.start),
+                end: Trace.Types.Timing.Micro(params.end),
+              });
+              return {result: {success: true}};
+            default:
+              return {error: 'Invalid widget type'};
+          }
         },
       });
     }

package/front_end/models/emulation/DeviceModeModel.ts

@@ -122,7 +122,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#preferredSize = new Geometry.Size(1, 1);
     this.#initialized = false;
     this.#appliedDeviceSize = new Geometry.Size(1, 1);
-    this.#appliedDeviceScaleFactor = window.devicePixelRatio;
+    this.#appliedDeviceScaleFactor = globalThis.devicePixelRatio;
     this.#appliedUserAgentType = UA.DESKTOP;
 
     this.#scaleSetting = Common.Settings.Settings.instance().createSetting('emulation.device-scale', 1);