chrome-devtools-frontend 1.0.1618066 → 1.0.1621064

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

@@ -8,7 +8,6 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
-import type * as Protocol from '../../../generated/protocol.js';
 import * as Tracing from '../../../services/tracing/tracing.js';
 import * as Annotations from '../../annotations/annotations.js';
 import * as Logs from '../../logs/logs.js';
@@ -62,11 +61,10 @@ export type MainThreadSectionLabel = 'nav-to-lcp'|'lcp-ttfb'|'lcp-render-delay'|
  * chrome_preambles.gcl). Sync local changes with the server-side.
  */
 
-const greenDevAdditionalAnnotationsFunction = `
+const GREEN_DEV_ANNOTATIONS_INSTRUCTIONS = `
 - CRITICAL: You also have access to functions called addElementAnnotation and addNeworkRequestAnnotation,
-which should be used to highlight elements and network requests (respectively).`;
+which should be used to highlight elements and network requests (respectively).
 
-const greenDevAdditionalAnnotationsGuidelines = `
 - CRITICAL: Each time an element or a network request is mentioned, you MUST ALSO call the functions
   addElementAnnotation (for an element) or addNeworkRequestAnnotation (for a network request).
 - CRITICAL: Don't add more than one annotation per element or network request.
@@ -75,6 +73,24 @@ const greenDevAdditionalAnnotationsGuidelines = `
 - The annotationMessage should be descriptive and relevant to why the element or network request is being highlighted.
 `;
 
+const GREEN_DEV_FRESH_TRACE_ANNOTATIONS_INSTRUCTIONS = `
+When referring to an element for which you know the nodeId, always call the function addElementAnnotation, specifying
+the id and an annotation reason.
+When referring to a network request for which you know the eventKey for, always call the function
+addNetworkRequestAnnotation, specifying the id and an annotation reason.
+- CRITICAL: Each time you add an annotating link you MUST ALSO call the function addElementAnnotation.
+- CRITICAL: Each time you describe an element or network request as being problematic you MUST call the function
+addElementAnnotation and specify an annotation reason.
+- CRITICAL: Each time you describe a network request as being problematic you MUST call the function
+addNetworkRequestAnnotation and specify an annotation reason.
+- CRITICAL: If you spot ANY of the following problems:
+  - Render-blocking elements/network requests.
+  - Significant long task (especially on main thread).
+  - Layout shifts (e.g. due to unsized images).
+  ... then you MUST call addNetworkRequestAnnotation for ALL network requests and addaddElementAnnotation for all
+  elements described in your conclusion.
+`;
+
 /**
  * Preamble clocks in at ~1341 tokens.
  *   The prose is around 4.5 chars per token.
@@ -82,9 +98,7 @@ const greenDevAdditionalAnnotationsGuidelines = `
  *
  * Check token length in https://aistudio.google.com/
  */
-const buildPreamble = (): string => {
-  const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
-  return `You are an assistant, expert in web performance and highly skilled with Chrome DevTools.
+const preamble = `You are an assistant, expert in web performance and highly skilled with Chrome DevTools.
 
 Your primary goal is to provide actionable advice to web developers about their web page by using the Chrome Performance Panel and analyzing a trace. You may need to diagnose problems yourself, or you may be given direction for what to focus on by the user.
 
@@ -94,8 +108,6 @@ Always call getInsightDetails to gather more data on an insight or the actual LC
 
 You have functions available to learn more about the trace. Use these to confirm hypotheses, or to further explore the trace when diagnosing performance issues.
 
-${annotationsEnabled ? greenDevAdditionalAnnotationsFunction : ''}
-
 You will be given bounds representing a time range within the trace. Bounds include a min and a max time in microseconds. max is always bigger than min in a bounds.
 
 The 3 main performance metrics are:
@@ -167,8 +179,6 @@ Note: if the user asks a specific question about the trace (such as "What is my
 - Structure your response using markdown headings and bullet points for improved readability.
 - Be direct and to the point. Avoid unnecessary introductory phrases or filler content. Focus on delivering actionable advice efficiently.
 
-${annotationsEnabled ? greenDevAdditionalAnnotationsGuidelines : ''}
-
 ## Strict Constraints
 
 Adhere to the following critical requirements:
@@ -186,7 +196,6 @@ Adhere to the following critical requirements:
 - Do not provide answers on non-web-development topics, such as legal, financial, medical, or personal advice.
 - Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
 `;
-};
 
 const extraPreambleWhenNotExternal = `Additional notes:
 
@@ -198,38 +207,14 @@ When referring to a trace event that has a corresponding \`eventKey\`, annotate
 When asking the user to make a choice between options, output a list of choices at the end of your text response. The format is \`SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]\`. This MUST start on a newline, and be a single line.
 `;
 
-const buildExtraPreambleWhenFreshTrace = (): string => {
-  const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
-  const greenDevAdditionalGuidelineFreshTrace = `
-When referring to an element for which you know the nodeId, always call the function addElementAnnotation, specifying
-the id and an annotation reason.
-When referring to a network request for which you know the eventKey for, always call the function
-addNetworkRequestAnnotation, specifying the id and an annotation reason.
-- CRITICAL: Each time you add an annotating link you MUST ALSO call the function addElementAnnotation.
-- CRITICAL: Each time you describe an element or network request as being problematic you MUST call the function
-addElementAnnotation and specify an annotation reason.
-- CRITICAL: Each time you describe a network request as being problematic you MUST call the function
-addNetworkRequestAnnotation and specify an annotation reason.
-- CRITICAL: If you spot ANY of the following problems:
-  - Render-blocking elements/network requests.
-  - Significant long task (especially on main thread).
-  - Layout shifts (e.g. due to unsized images).
-  ... then you MUST call addNetworkRequestAnnotation for ALL network requests and addaddElementAnnotation for all
-  elements described in your conclusion.
-`;
-
-  const extraPreambleWhenFreshTrace = `Additional notes:
+const freshTracePreamble = `Additional notes:
 
 When referring to an element for which you know the nodeId, annotate your output using markdown link syntax:
 - For example, if nodeId is 23: [LCP element](#node-23)
 - This link will reveal the element in the Elements panel
 - Never mention node or nodeId when referring to the element, and especially not in the link text.
 - When referring to the LCP, it's useful to also mention what the LCP element is via its nodeId. Use the markdown link syntax to do so.
-
-${annotationsEnabled ? greenDevAdditionalGuidelineFreshTrace : ''}`;
-
-  return extraPreambleWhenFreshTrace;
-};
+`;
 
 enum ScorePriority {
   REQUIRED = 3,
@@ -406,6 +391,7 @@ export function getLabelName(label: MainThreadSectionLabel, focus: AgentFocus):
  * instance for a new conversation.
  */
 export class PerformanceAgent extends AiAgent<AgentFocus> {
+  readonly preamble = preamble;
   #formatter: PerformanceTraceFormatter|null = null;
   #lastEventForEnhancedQuery: Trace.Types.Events.Event|undefined;
   #lastInsightForEnhancedQuery: Trace.Insights.Types.InsightModel|undefined;
@@ -428,7 +414,15 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
   };
   #freshTraceExtraPreambleFact: Host.AidaClient.RequestFact = {
-    text: buildExtraPreambleWhenFreshTrace(),
+    text: freshTracePreamble,
+    metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
+  };
+  #greenDevAnnotationsFact: Host.AidaClient.RequestFact = {
+    text: GREEN_DEV_ANNOTATIONS_INSTRUCTIONS,
+    metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
+  };
+  #greenDevFreshTraceAnnotationsFact: Host.AidaClient.RequestFact = {
+    text: GREEN_DEV_FRESH_TRACE_ANNOTATIONS_INSTRUCTIONS,
     metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
   };
   #networkDataDescriptionFact: Host.AidaClient.RequestFact = {
@@ -450,6 +444,8 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     this.#networkDataDescriptionFact,
     this.#freshTraceExtraPreambleFact,
     this.#notExternalExtraPreambleFact,
+    this.#greenDevAnnotationsFact,
+    this.#greenDevFreshTraceAnnotationsFact,
   ]);
 
   /**
@@ -459,20 +455,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
    */
   #additionalSelectionsForQuery: string[] = [];
 
-  /**
-   * The CWV widget is shown when we analyze the trace summary, but we don't
-   * want to show it on every single "Analyzing data..." pill, as we show one
-   * after every prompt. So we make sure for a given Insight Set (which is based on navigation)
-   * we only show it once.
-   */
-  #hasShownWidgetForInsightSet = new WeakSet<Trace.Insights.Types.InsightSet>();
-  #hasShownWidgetForCallTree = new WeakSet<AICallTree>();
-  #hasShownWidgetForInsight = new WeakSet<Trace.Insights.Types.InsightModel>();
-
-  get preamble(): string {
-    return buildPreamble();
-  }
-
   get clientFeature(): Host.AidaClient.ClientFeature {
     return Host.AidaClient.ClientFeature.CHROME_PERFORMANCE_FULL_AGENT;
   }
@@ -531,35 +513,31 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
     // Case 1: Specific task (call tree) -> timeline summary & bottom up tree widgets
     if (focus.callTree) {
-      if (!this.#hasShownWidgetForCallTree.has(focus.callTree)) {
-        const event = focus.callTree.selectedNode?.event;
-        if (event) {
-          const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMicroSeconds(event);
-          const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(startTime, endTime);
-          widgets.push({
-            name: 'TIMELINE_RANGE_SUMMARY',
-            data: {
-              bounds,
-              parsedTrace: focus.parsedTrace,
-              track: 'main',
-            },
-          });
-          widgets.push({
-            name: 'BOTTOM_UP_TREE',
-            data: {
-              bounds,
-              parsedTrace: focus.parsedTrace,
-            },
-          });
-          this.#hasShownWidgetForCallTree.add(focus.callTree);
-        }
+      const event = focus.callTree.selectedNode?.event;
+      if (event) {
+        const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMicroSeconds(event);
+        const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(startTime, endTime);
+        widgets.push({
+          name: 'TIMELINE_RANGE_SUMMARY',
+          data: {
+            bounds,
+            parsedTrace: focus.parsedTrace,
+            track: 'main',
+          },
+        });
+        widgets.push({
+          name: 'BOTTOM_UP_TREE',
+          data: {
+            bounds,
+            parsedTrace: focus.parsedTrace,
+          },
+        });
       }
       return widgets;
     }
 
     // Case 2: LCP Insight -> LCP breakdown & CWV widgets
-    if (focus.insight && Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(focus.insight) &&
-        !this.#hasShownWidgetForInsight.has(focus.insight)) {
+    if (focus.insight && Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(focus.insight)) {
       widgets.push({
         name: 'PERF_INSIGHT',
         data: {
@@ -567,12 +545,11 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           insightData: focus.insight,
         },
       });
-      this.#hasShownWidgetForInsight.add(focus.insight);
     }
 
     // Case 3: Whole Trace or insight other than LCP -> CWV widget
     const primaryInsightSet = focus.primaryInsightSet;
-    if (primaryInsightSet && !this.#hasShownWidgetForInsightSet.has(primaryInsightSet)) {
+    if (primaryInsightSet) {
       widgets.push({
         name: 'CORE_VITALS',
         data: {
@@ -580,7 +557,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           insightSetKey: primaryInsightSet.id,
         },
       });
-      this.#hasShownWidgetForInsightSet.add(primaryInsightSet);
     }
 
     return widgets;
@@ -833,9 +809,17 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       this.addFact(this.#notExternalExtraPreambleFact);
     }
 
+    const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
+    if (annotationsEnabled) {
+      this.addFact(this.#greenDevAnnotationsFact);
+    }
+
     const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(focus.parsedTrace);
     if (isFresh) {
       this.addFact(this.#freshTraceExtraPreambleFact);
+      if (annotationsEnabled) {
+        this.addFact(this.#greenDevFreshTraceAnnotationsFact);
+      }
     }
 
     this.addFact(this.#callFrameDataDescriptionFact);
@@ -935,7 +919,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #declareFunctions(context: PerformanceTraceContext): void {
     const focus = context.getItem();
     const {parsedTrace} = focus;
-    const processedNodeIds = new Set<Protocol.DOM.BackendNodeId>();
 
     this.declareFunction<{insightSetId: string, insightName: string}, {details: string}>('getInsightDetails', {
       description:
@@ -992,9 +975,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           const lcpEvent = lcpMetric?.event;
           if (lcpEvent && Trace.Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
             const nodeId = lcpEvent.args.data?.nodeId;
-            // We want to show only one DOM tree widget per walkthrough per node.
-            // We do want to show the widget for the same node again, if it's within a new walkthrough.
-            if (nodeId && !processedNodeIds.has(nodeId)) {
+            if (nodeId) {
               const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
               const domModel = target?.model(SDK.DOMModel.DOMModel);
               if (domModel) {
@@ -1021,7 +1002,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
                       networkRequest,
                     },
                   });
-                  processedNodeIds.add(nodeId);
                 }
               }
             }

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

@@ -47,14 +47,7 @@ const UIStringsNotTranslate = {
 
 const lockedString = i18n.i18n.lockedString;
 
-function getPreamble(): string {
-  /**
-   * WARNING: preamble defined in code is only used when userTier is
-   * TESTERS. Otherwise, a server-side preamble is used (see
-   * chrome_preambles.gcl). Sync local changes with the server-side.
-   */
-  /* clang-format off */
-  let preamble = `You are the most advanced CSS/DOM/HTML debugging assistant integrated into Chrome DevTools.
+const preamble = `You are the most advanced CSS/DOM/HTML debugging assistant integrated into Chrome DevTools.
 You always suggest considering the best web development practices and the newest platform features such as view transitions.
 The user selected a DOM element in the browser's DevTools and sends a query about the page or the selected DOM element.
 First, examine the provided context, then use the functions to gather additional context and resolve the user request.
@@ -92,9 +85,7 @@ If the user asks a question that requires an investigation of a problem, use thi
       - [Suggestion 1]
       - [Suggestion 2]`;
 
-  const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
-  if (greenDevEmulationEnabled) {
-    preamble += `
+const emulationInstructions = `
 # Emulation and Screenshots
 
 * If asked to verify whether the page is visually broken or if there are display problems with specific devices, use the \`activateDeviceEmulation\` tool. This tool will activate emulation for a specified device and capture a screenshot.
@@ -127,10 +118,6 @@ When referring to an element for which you know the nodeId, annotate your output
 - Always prefix the nodeId with the 'node-' prefix when using the markdown syntax.
 - This link will reveal the element in the Elements panel
 - Never mention node or nodeId when referring to the element, and especially not in the link text.`;
-}
-
-  return preamble;
-}
 
 /* clang-format on */
 
@@ -242,7 +229,7 @@ export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
  * instance for a new conversation.
  */
 export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
-  preamble = getPreamble();
+  readonly preamble = preamble;
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_STYLING_AGENT;
   get userTier(): string|undefined {
     const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
@@ -278,6 +265,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   #createExtensionScope: CreateExtensionScopeFunction;
   #greenDevEmulationScreenshot: string|null = null;
   #greenDevEmulationAxTree: string|null = null;
+  #hasAddedEmulationInstructions = false;
   #currentTurnId = 0;
 
   constructor(opts: ExecuteJsAgentOptions) {
@@ -821,6 +809,11 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
       this.#greenDevEmulationAxTree = null;
     }
 
+    if (Greendev.Prototypes.instance().isEnabled('emulationCapabilities') && !this.#hasAddedEmulationInstructions) {
+      multimodalInputEnhancementQuery = emulationInstructions + '\n' + multimodalInputEnhancementQuery;
+      this.#hasAddedEmulationInstructions = true;
+    }
+
     const elementEnchancementQuery = selectedElement ?
         `# Inspected element\n\n${
             await StylingAgent.describeElement(selectedElement.getItem())}\n\n# User request\n\n` :

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -9,6 +9,7 @@ import * as BreakpointDebuggerAgent from './agents/BreakpointDebuggerAgent.js';
 import * as ContextSelectionAgent from './agents/ContextSelectionAgent.js';
 import * as ConversationSummaryAgent from './agents/ConversationSummaryAgent.js';
 import * as FileAgent from './agents/FileAgent.js';
+import * as GreenDevAgent from './agents/GreenDevAgent.js';
 import * as NetworkAgent from './agents/NetworkAgent.js';
 import * as PatchAgent from './agents/PatchAgent.js';
 import * as PerformanceAgent from './agents/PerformanceAgent.js';
@@ -53,6 +54,7 @@ export {
   ExtensionScope,
   FileAgent,
   FileFormatter,
+  GreenDevAgent,
   Injected,
   LighthouseFormatter,
   NetworkAgent,

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -7,7 +7,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import type * as StackTrace from '../stack_trace/stack_trace.js';
+import * as StackTrace from '../stack_trace/stack_trace.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import * as StackTraceImpl from '../stack_trace/stack_trace_impl.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
@@ -20,7 +20,12 @@ import {type LiveLocation, type LiveLocationPool, LiveLocationWithPool} from './
 import {NetworkProject} from './NetworkProject.js';
 import type {ResourceMapping} from './ResourceMapping.js';
 import {type ResourceScriptFile, ResourceScriptMapping} from './ResourceScriptMapping.js';
-import {SymbolizedError} from './SymbolizedError.js';
+import {
+  type SymbolizedError,
+  SymbolizedErrorObject,
+  SymbolizedSyntaxError,
+  UnparsableError
+} from './SymbolizedError.js';
 
 export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
   readonly resourceMapping: ResourceMapping;
@@ -233,6 +238,13 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
       fetchedExceptionDetails = details;
       causeRemoteObject = causeRemote;
 
+      if (remoteObject.className === 'SyntaxError' && fetchedExceptionDetails) {
+        const syntaxError = await SymbolizedSyntaxError.fromExceptionDetails(
+            remoteObject.runtimeModel().target(), this, fetchedExceptionDetails);
+        if (syntaxError) {
+          return syntaxError;
+        }
+      }
     } else if (remoteObject.type === 'string') {
       errorStack = remoteObject.description || '';
     } else {
@@ -245,12 +257,17 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
       causeRemoteObject ? this.createSymbolizedError(causeRemoteObject) : Promise.resolve(null),
     ]);
 
+    const issueSummary = fetchedExceptionDetails?.exceptionMetaData?.issueSummary;
+    if (typeof issueSummary === 'string') {
+      errorStack = StackTrace.ErrorStackParser.concatErrorDescriptionAndIssueSummary(errorStack, issueSummary);
+    }
+
     if (!stackTrace) {
-      return null;
+      return new UnparsableError(errorStack, cause);
     }
 
     const message = StackTraceImpl.DetailedErrorStackParser.parseMessage(errorStack);
-    return new SymbolizedError(message, stackTrace, cause);
+    return new SymbolizedErrorObject(message, stackTrace, cause);
   }
 
   async createLiveLocation(

package/front_end/models/bindings/SymbolizedError.ts

@@ -3,9 +3,28 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import * as StackTrace from '../stack_trace/stack_trace.js';
+import type * as Workspace from '../workspace/workspace.js';
 
-export class SymbolizedError extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+import type {DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
+import {type LiveLocation, LiveLocationPool} from './LiveLocation.js';
+
+export type SymbolizedError = SymbolizedErrorObject|SymbolizedSyntaxError|UnparsableError;
+
+export class UnparsableError extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+  readonly errorStack: string;
+  readonly cause: SymbolizedError|null;
+
+  constructor(errorStack: string, cause: SymbolizedError|null) {
+    super();
+    this.errorStack = errorStack;
+    this.cause = cause;
+  }
+}
+
+export class SymbolizedErrorObject extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly message: string;
   readonly stackTrace: StackTrace.StackTrace.ParsedErrorStackTrace;
   readonly cause: SymbolizedError|null;
@@ -23,7 +42,9 @@ export class SymbolizedError extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   dispose(): void {
     this.stackTrace.removeEventListener(StackTrace.StackTrace.Events.UPDATED, this.#fireUpdated, this);
     this.cause?.removeEventListener(Events.UPDATED, this.#fireUpdated, this);
-    this.cause?.dispose();
+    if (this.cause instanceof SymbolizedErrorObject) {
+      this.cause.dispose();
+    }
   }
 
   #fireUpdated(): void {
@@ -31,6 +52,52 @@ export class SymbolizedError extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 }
 
+export class SymbolizedSyntaxError extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+  readonly message: string;
+  #uiLocation: Workspace.UISourceCode.UILocation|null = null;
+
+  constructor(message: string) {
+    super();
+    this.message = message;
+  }
+
+  get uiLocation(): Workspace.UISourceCode.UILocation|null {
+    return this.#uiLocation;
+  }
+
+  static async fromExceptionDetails(
+      target: SDK.Target.Target, debuggerWorkspaceBinding: DebuggerWorkspaceBinding,
+      exceptionDetails: Protocol.Runtime.ExceptionDetails): Promise<SymbolizedSyntaxError|null> {
+    const {exception, scriptId, lineNumber, columnNumber} = exceptionDetails;
+    if (!exception || exception.subtype !== 'error' || exception.className !== 'SyntaxError') {
+      throw new Error('SymbolizedSyntaxError.fromExceptionDetails expects a SyntaxError');
+    }
+    if (!scriptId) {
+      return null;
+    }
+
+    const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+    if (!debuggerModel) {
+      return null;
+    }
+
+    const rawLocation = debuggerModel.createRawLocationByScriptId(scriptId, lineNumber, columnNumber);
+    const symbolizedSyntaxError = new SymbolizedSyntaxError(exception.description || '');
+
+    // We don't implement dispose here. We won't create many of these so a couple
+    // LiveLocationPools and SymbolizedSyntaxError instances leaking is fine.
+    await debuggerWorkspaceBinding.createLiveLocation(
+        rawLocation, symbolizedSyntaxError.#update.bind(symbolizedSyntaxError), new LiveLocationPool());
+
+    return symbolizedSyntaxError;
+  }
+
+  async #update(liveLocation: LiveLocation): Promise<void> {
+    this.#uiLocation = await liveLocation.uiLocation();
+    this.dispatchEventToListeners(Events.UPDATED);
+  }
+}
+
 export const enum Events {
   UPDATED = 'UPDATED',
 }

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -8339,7 +8339,7 @@ export const NativeFunctions = [
   },
   {
     name: "setConstraints",
-    signatures: [["constraints"]]
+    signatures: [["?constraints"]]
   },
   {
     name: "createContext",
@@ -9353,7 +9353,7 @@ export const NativeFunctions = [
   },
   {
     name: "copyElementImageToTexture",
-    signatures: [["source","destination"],["source","width","height","destination"],["source","sx","sy","swidth","sheight","destination"]]
+    signatures: [["source","destination"],["source","width","height","destination"],["source","sx","sy","swidth","sheight","destination"],["source","sx","sy","swidth","sheight","width","height","destination"]]
   },
   {
     name: "multiDrawIndirect",

package/front_end/models/stack_trace/DetailedErrorStackParser.ts

@@ -181,9 +181,17 @@ export function parseMessage(stack: string): string {
 export function augmentRawFramesWithScriptIds(
     rawFrames: RawFrame[], protocolStackTrace: Protocol.Runtime.StackTrace): void {
   for (const rawFrame of rawFrames) {
-    const protocolFrame = protocolStackTrace.callFrames.find(
-        frame => rawFrame.url === frame.url && rawFrame.lineNumber === frame.lineNumber &&
-            rawFrame.columnNumber === frame.columnNumber);
+    const isWasm = rawFrame.parsedFrameInfo?.isWasm;
+    const protocolFrame = protocolStackTrace.callFrames.find(frame => {
+      if (isWasm) {
+        // The parser parses Wasm offsets into the `columnNumber` field. The `lineNumber` is always -1.
+        // In the protocol trace, the `lineNumber` is 0 (for Wasm) and `columnNumber` is the bytecode offset.
+        return rawFrame.url === frame.url && rawFrame.columnNumber === frame.columnNumber;
+      }
+      return rawFrame.url === frame.url && rawFrame.lineNumber === frame.lineNumber &&
+          rawFrame.columnNumber === frame.columnNumber;
+    });
+
     if (protocolFrame) {
       // @ts-expect-error scriptId is a readonly property.
       rawFrame.scriptId = protocolFrame.scriptId;

package/front_end/models/stack_trace/ErrorStackParser.ts

@@ -21,6 +21,24 @@ export interface ParsedErrorFrame {
   };
 }
 
+/**
+ * Combines the error description (essentially the `Error#stack` property value)
+ * with the `issueSummary`.
+ *
+ * @param description the `description` property of the `Error` remote object.
+ * @param issueSummary the optional `issueSummary` of the `exceptionMetaData`.
+ * @returns the enriched description.
+ * @see https://goo.gle/devtools-reduce-network-noise-design
+ */
+export function concatErrorDescriptionAndIssueSummary(description: string, issueSummary: string): string {
+  // Insert the issue summary right after the error message.
+  const pos = description.indexOf('\n');
+  const prefix = pos === -1 ? description : description.substring(0, pos);
+  const suffix = pos === -1 ? '' : description.substring(pos);
+  description = `${prefix}. ${issueSummary}${suffix}`;
+  return description;
+}
+
 /**
  * Takes a V8 Error#stack string and extracts source position information.
  *