chrome-devtools-frontend 1.0.1604514 → 1.0.1605219

package/front_end/core/sdk/DOMDebuggerModel.ts

@@ -4,7 +4,7 @@
 
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as Common from '../common/common.js';
+import type * as Common from '../common/common.js';
 import * as Platform from '../platform/platform.js';
 
 import {CategorizedBreakpoint, Category} from './CategorizedBreakpoint.js';
@@ -38,7 +38,7 @@ export class DOMDebuggerModel extends SDKModel<EventTypes> {
     this.#domModel.addEventListener(DOMModelEvents.NodeRemoved, this.nodeRemoved, this);
 
     this.#domBreakpoints = [];
-    this.#domBreakpointsSetting = Common.Settings.Settings.instance().createLocalSetting('dom-breakpoints', []);
+    this.#domBreakpointsSetting = this.target().targetManager().settings.createLocalSetting('dom-breakpoints', []);
     if (this.#domModel.existingDocument()) {
       void this.documentUpdated();
     }
@@ -498,9 +498,11 @@ export class CSPViolationBreakpoint extends CategorizedBreakpoint {
 
 export class DOMEventListenerBreakpoint extends CategorizedBreakpoint {
   readonly eventTargetNames: string[];
-  constructor(eventName: string, eventTargetNames: string[], category: Category) {
+  readonly #targetManager: TargetManager;
+  constructor(eventName: string, eventTargetNames: string[], category: Category, targetManager: TargetManager) {
     super(category, eventName);
     this.eventTargetNames = eventTargetNames;
+    this.#targetManager = targetManager;
   }
 
   override setEnabled(enabled: boolean): void {
@@ -508,7 +510,7 @@ export class DOMEventListenerBreakpoint extends CategorizedBreakpoint {
       return;
     }
     super.setEnabled(enabled);
-    for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
+    for (const model of this.#targetManager.models(DOMDebuggerModel)) {
       this.updateOnModel(model);
     }
   }
@@ -534,9 +536,11 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
 
   readonly #cspViolationsToBreakOn: CSPViolationBreakpoint[] = [];
   readonly #eventListenerBreakpoints: DOMEventListenerBreakpoint[] = [];
+  readonly #targetManager: TargetManager;
 
-  constructor() {
-    this.#xhrBreakpointsSetting = Common.Settings.Settings.instance().createLocalSetting('xhr-breakpoints', []);
+  constructor(targetManager: TargetManager = TargetManager.instance()) {
+    this.#targetManager = targetManager;
+    this.#xhrBreakpointsSetting = this.#targetManager.settings.createLocalSetting('xhr-breakpoints', []);
     for (const breakpoint of this.#xhrBreakpointsSetting.get()) {
       this.#xhrBreakpoints.set(breakpoint.url, breakpoint.enabled);
     }
@@ -659,15 +663,16 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
         Category.XHR, ['readystatechange', 'load', 'loadstart', 'loadend', 'abort', 'error', 'progress', 'timeout'],
         ['xmlhttprequest', 'xmlhttprequestupload']);
 
-    TargetManager.instance().observeModels(DOMDebuggerModel, this);
+    this.#targetManager.observeModels(DOMDebuggerModel, this);
   }
 
   static instance(opts: {
     forceNew: boolean|null,
+    targetManager?: TargetManager,
   } = {forceNew: null}): DOMDebuggerManager {
-    const {forceNew} = opts;
+    const {forceNew, targetManager} = opts;
     if (!domDebuggerManagerInstance || forceNew) {
-      domDebuggerManagerInstance = new DOMDebuggerManager();
+      domDebuggerManagerInstance = new DOMDebuggerManager(targetManager);
     }
 
     return domDebuggerManagerInstance;
@@ -679,7 +684,8 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
 
   private createEventListenerBreakpoints(category: Category, eventNames: string[], eventTargetNames: string[]): void {
     for (const eventName of eventNames) {
-      this.#eventListenerBreakpoints.push(new DOMEventListenerBreakpoint(eventName, eventTargetNames, category));
+      this.#eventListenerBreakpoints.push(
+          new DOMEventListenerBreakpoint(eventName, eventTargetNames, category, this.#targetManager));
     }
   }
 
@@ -710,7 +716,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
 
   updateCSPViolationBreakpoints(): void {
     const violationTypes = this.#cspViolationsToBreakOn.filter(v => v.enabled()).map(v => v.type());
-    for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
+    for (const model of this.#targetManager.models(DOMDebuggerModel)) {
       this.updateCSPViolationBreakpointsForModel(model, violationTypes);
     }
   }
@@ -735,7 +741,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
   addXHRBreakpoint(url: string, enabled: boolean): void {
     this.#xhrBreakpoints.set(url, enabled);
     if (enabled) {
-      for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
+      for (const model of this.#targetManager.models(DOMDebuggerModel)) {
         void model.agent.invoke_setXHRBreakpoint({url});
       }
     }
@@ -746,7 +752,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
     const enabled = this.#xhrBreakpoints.get(url);
     this.#xhrBreakpoints.delete(url);
     if (enabled) {
-      for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
+      for (const model of this.#targetManager.models(DOMDebuggerModel)) {
         void model.agent.invoke_removeXHRBreakpoint({url});
       }
     }
@@ -755,7 +761,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
 
   toggleXHRBreakpoint(url: string, enabled: boolean): void {
     this.#xhrBreakpoints.set(url, enabled);
-    for (const model of TargetManager.instance().models(DOMDebuggerModel)) {
+    for (const model of this.#targetManager.models(DOMDebuggerModel)) {
       if (enabled) {
         void model.agent.invoke_setXHRBreakpoint({url});
       } else {

package/front_end/core/sdk/DebuggerModel.ts

@@ -173,30 +173,19 @@ export class DebuggerModel extends SDKModel<EventTypes> {
         (compiledURL, sourceMappingURL, payload, script) =>
             new SourceMap(compiledURL, sourceMappingURL, payload, script));
 
-    Common.Settings.Settings.instance()
-        .moduleSetting('pause-on-exception-enabled')
-        .addChangeListener(this.pauseOnExceptionStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('pause-on-caught-exception')
-        .addChangeListener(this.pauseOnExceptionStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('pause-on-uncaught-exception')
-        .addChangeListener(this.pauseOnExceptionStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('disable-async-stack-traces')
-        .addChangeListener(this.asyncStackTracesStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('breakpoints-active')
-        .addChangeListener(this.breakpointsActiveChanged, this);
+    const settings = this.target().targetManager().settings;
+    settings.moduleSetting('pause-on-exception-enabled').addChangeListener(this.pauseOnExceptionStateChanged, this);
+    settings.moduleSetting('pause-on-caught-exception').addChangeListener(this.pauseOnExceptionStateChanged, this);
+    settings.moduleSetting('pause-on-uncaught-exception').addChangeListener(this.pauseOnExceptionStateChanged, this);
+    settings.moduleSetting('disable-async-stack-traces').addChangeListener(this.asyncStackTracesStateChanged, this);
+    settings.moduleSetting('breakpoints-active').addChangeListener(this.breakpointsActiveChanged, this);
 
     if (!target.suspended()) {
       void this.enableDebugger();
     }
 
-    this.#sourceMapManager.setEnabled(
-        Common.Settings.Settings.instance().moduleSetting('js-source-maps-enabled').get());
-    Common.Settings.Settings.instance()
-        .moduleSetting('js-source-maps-enabled')
+    this.#sourceMapManager.setEnabled(settings.moduleSetting('js-source-maps-enabled').get());
+    settings.moduleSetting('js-source-maps-enabled')
         .addChangeListener(event => this.#sourceMapManager.setEnabled((event.data as boolean)));
 
     const resourceTreeModel = (target.model(ResourceTreeModel) as ResourceTreeModel);
@@ -273,7 +262,8 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     }
     this.pauseOnExceptionStateChanged();
     void this.asyncStackTracesStateChanged();
-    if (!Common.Settings.Settings.instance().moduleSetting('breakpoints-active').get()) {
+    const settings = this.target().targetManager().settings;
+    if (!settings.moduleSetting('breakpoints-active').get()) {
       this.breakpointsActiveChanged();
     }
     this.dispatchEventToListeners(Events.DebuggerWasEnabled, this);
@@ -364,11 +354,11 @@ export class DebuggerModel extends SDKModel<EventTypes> {
   }
 
   private pauseOnExceptionStateChanged(): void {
-    const pauseOnCaughtEnabled = Common.Settings.Settings.instance().moduleSetting('pause-on-caught-exception').get();
+    const settings = this.target().targetManager().settings;
+    const pauseOnCaughtEnabled = settings.moduleSetting('pause-on-caught-exception').get();
     let state: Protocol.Debugger.SetPauseOnExceptionsRequestState;
 
-    const pauseOnUncaughtEnabled =
-        Common.Settings.Settings.instance().moduleSetting('pause-on-uncaught-exception').get();
+    const pauseOnUncaughtEnabled = settings.moduleSetting('pause-on-uncaught-exception').get();
     if (pauseOnCaughtEnabled && pauseOnUncaughtEnabled) {
       state = Protocol.Debugger.SetPauseOnExceptionsRequestState.All;
     } else if (pauseOnCaughtEnabled) {
@@ -383,15 +373,15 @@ export class DebuggerModel extends SDKModel<EventTypes> {
 
   private asyncStackTracesStateChanged(): Promise<Protocol.ProtocolResponseWithError> {
     const maxAsyncStackChainDepth = 32;
-    const enabled =
-        !Common.Settings.Settings.instance().moduleSetting('disable-async-stack-traces').get() && this.#debuggerEnabled;
+    const settings = this.target().targetManager().settings;
+    const enabled = !settings.moduleSetting('disable-async-stack-traces').get() && this.#debuggerEnabled;
     const maxDepth = enabled ? maxAsyncStackChainDepth : 0;
     return this.agent.invoke_setAsyncCallStackDepth({maxDepth});
   }
 
   private breakpointsActiveChanged(): void {
-    void this.agent.invoke_setBreakpointsActive(
-        {active: Common.Settings.Settings.instance().moduleSetting('breakpoints-active').get()});
+    const settings = this.target().targetManager().settings;
+    void this.agent.invoke_setBreakpointsActive({active: settings.moduleSetting('breakpoints-active').get()});
   }
 
   setComputeAutoStepRangesCallback(callback: ((arg0: StepMode, arg1: CallFrame) => Promise<LocationRange[]>)|null):
@@ -872,15 +862,10 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     if (this.#debuggerId) {
       debuggerIdToModel.delete(this.#debuggerId);
     }
-    Common.Settings.Settings.instance()
-        .moduleSetting('pause-on-exception-enabled')
-        .removeChangeListener(this.pauseOnExceptionStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('pause-on-caught-exception')
-        .removeChangeListener(this.pauseOnExceptionStateChanged, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('disable-async-stack-traces')
-        .removeChangeListener(this.asyncStackTracesStateChanged, this);
+    const settings = this.target().targetManager().settings;
+    settings.moduleSetting('pause-on-exception-enabled').removeChangeListener(this.pauseOnExceptionStateChanged, this);
+    settings.moduleSetting('pause-on-caught-exception').removeChangeListener(this.pauseOnExceptionStateChanged, this);
+    settings.moduleSetting('disable-async-stack-traces').removeChangeListener(this.asyncStackTracesStateChanged, this);
   }
 
   override async suspendModel(): Promise<void> {

package/front_end/core/sdk/EventBreakpointsModel.ts

@@ -56,12 +56,18 @@ export class EventBreakpointsModel extends SDKModel<void> {
  * instrumentation breakpoints in targets that run JS but do not have a DOM.
  **/
 class EventListenerBreakpoint extends CategorizedBreakpoint {
+  readonly #targetManager: TargetManager;
+  constructor(category: Category, name: string, targetManager: TargetManager) {
+    super(category, name);
+    this.#targetManager = targetManager;
+  }
+
   override setEnabled(enabled: boolean): void {
     if (this.enabled() === enabled) {
       return;
     }
     super.setEnabled(enabled);
-    for (const model of TargetManager.instance().models(EventBreakpointsModel)) {
+    for (const model of this.#targetManager.models(EventBreakpointsModel)) {
       this.updateOnModel(model);
     }
   }
@@ -81,8 +87,10 @@ let eventBreakpointManagerInstance: EventBreakpointsManager;
 
 export class EventBreakpointsManager implements SDKModelObserver<EventBreakpointsModel> {
   readonly #eventListenerBreakpoints: EventListenerBreakpoint[] = [];
+  readonly #targetManager: TargetManager;
 
-  constructor() {
+  constructor(targetManager: TargetManager = TargetManager.instance()) {
+    this.#targetManager = targetManager;
     this.createInstrumentationBreakpoints(Category.AUCTION_WORKLET, [
       InstrumentationNames.BEFORE_BIDDER_WORKLET_BIDDING_START,
       InstrumentationNames.BEFORE_BIDDER_WORKLET_REPORTING_START,
@@ -135,15 +143,16 @@ export class EventBreakpointsManager implements SDKModelObserver<EventBreakpoint
       InstrumentationNames.AUDIO_CONTEXT_SUSPENDED,
     ]);
 
-    TargetManager.instance().observeModels(EventBreakpointsModel, this);
+    this.#targetManager.observeModels(EventBreakpointsModel, this);
   }
 
   static instance(opts: {
     forceNew: boolean|null,
+    targetManager?: TargetManager,
   } = {forceNew: null}): EventBreakpointsManager {
-    const {forceNew} = opts;
+    const {forceNew, targetManager} = opts;
     if (!eventBreakpointManagerInstance || forceNew) {
-      eventBreakpointManagerInstance = new EventBreakpointsManager();
+      eventBreakpointManagerInstance = new EventBreakpointsManager(targetManager);
     }
 
     return eventBreakpointManagerInstance;
@@ -151,7 +160,8 @@ export class EventBreakpointsManager implements SDKModelObserver<EventBreakpoint
 
   private createInstrumentationBreakpoints(category: Category, instrumentationNames: InstrumentationNames[]): void {
     for (const instrumentationName of instrumentationNames) {
-      this.#eventListenerBreakpoints.push(new EventListenerBreakpoint(category, instrumentationName));
+      this.#eventListenerBreakpoints.push(
+          new EventListenerBreakpoint(category, instrumentationName, this.#targetManager));
     }
   }
 

package/front_end/core/sdk/IsolateManager.ts

@@ -19,18 +19,21 @@ export class IsolateManager extends Common.ObjectWrapper.ObjectWrapper<EventType
   #isolateIdByModel = new Map<RuntimeModel, string|null>();
   #observers = new Set<Observer>();
   #pollId = 0;
+  readonly #targetManager: TargetManager;
 
-  constructor() {
+  constructor(targetManager: TargetManager = TargetManager.instance()) {
     super();
+    this.#targetManager = targetManager;
 
-    TargetManager.instance().observeModels(RuntimeModel, this);
+    this.#targetManager.observeModels(RuntimeModel, this);
   }
 
-  static instance({forceNew}: {
+  static instance({forceNew, targetManager}: {
     forceNew: boolean,
+    targetManager?: TargetManager,
   } = {forceNew: false}): IsolateManager {
     if (!isolateManagerInstance || forceNew) {
-      isolateManagerInstance = new IsolateManager();
+      isolateManagerInstance = new IsolateManager(targetManager);
     }
 
     return isolateManagerInstance;
@@ -67,7 +70,7 @@ export class IsolateManager extends Common.ObjectWrapper.ObjectWrapper<EventType
     this.#isolateIdByModel.set(model, isolateId);
     let isolate = this.#isolates.get(isolateId);
     if (!isolate) {
-      isolate = new Isolate(isolateId);
+      isolate = new Isolate(isolateId, this);
       this.#isolates.set(isolateId, isolate);
     }
     isolate.models().add(model);
@@ -145,9 +148,11 @@ export class Isolate {
   readonly #models: Set<RuntimeModel>;
   #usedHeapSize: number;
   readonly #memoryTrend: MemoryTrend;
+  readonly #manager: IsolateManager;
 
-  constructor(id: string) {
+  constructor(id: string, manager: IsolateManager) {
     this.#id = id;
+    this.#manager = manager;
     this.#models = new Set();
     this.#usedHeapSize = 0;
     const count = MemoryTrendWindowMs / PollIntervalMs;
@@ -179,7 +184,7 @@ export class Isolate {
     }
     this.#usedHeapSize = usage.usedSize + (usage.embedderHeapUsedSize ?? 0) + (usage.backingStorageSize ?? 0);
     this.#memoryTrend.add(this.#usedHeapSize);
-    IsolateManager.instance().dispatchEventToListeners(Events.MEMORY_CHANGED, this);
+    this.#manager.dispatchEventToListeners(Events.MEMORY_CHANGED, this);
   }
 
   samplesCount(): number {

package/front_end/entrypoints/main/MainImpl.ts

@@ -397,10 +397,6 @@ export class MainImpl {
         Root.ExperimentNames.ExperimentName.FONT_EDITOR, 'New font editor in the Styles tab',
         'https://developer.chrome.com/blog/new-in-devtools-89/#font');
 
-    // New cookie features.
-    Root.Runtime.experiments.register(
-        Root.ExperimentNames.ExperimentName.EXPERIMENTAL_COOKIE_FEATURES, 'Experimental cookie features');
-
     Root.Runtime.experiments.registerHostExperiment({
       name: Root.ExperimentNames.ExperimentName.DURABLE_MESSAGES,
       title: 'Durable Messages',

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

@@ -82,7 +82,7 @@ Your primary goal is to provide actionable advice to web developers about their
 
 You will be provided a summary of a trace: some performance metrics; the most critical network requests; a bottom-up call graph summary; and a brief overview of available insights. Each insight has information about potential performance issues with the page.
 
-Don't mention anything about an insight or the actual LCP element without first getting more data about it by calling \`getInsightDetails\`.
+Always call getInsightDetails to gather more data on an insight or the actual LCP element BEFORE mentioning any specific details about them.
 
 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.
 
@@ -105,23 +105,41 @@ Note: if the user asks a specific question about the trace (such as "What is my
 
 ### Step 1: Determine a performance problem to investigate
 
+- If the trace summary indicates that the main performance metrics (LCP, INP, CLS) are all within good thresholds, acknowledge this to the user. In this case, let the user know that they can try recording a trace with mobile emulation and throttling options and show them how.
 - With help from the user, determine what performance problem to focus on.
-- If the user is not specific about what problem to investigate, help them by doing a investigation yourself. Present to the user options with 1-sentence summaries. Mention what performance metrics each option impacts. Call as many functions and confirm the data thoroughly: never present an option without being certain it is a real performance issue. Don't suggest solutions yet.
-- Rank the options from most impactful to least impactful, and present them to the user in that order.
-- Don't present more than 2 options.
+- If the user is not specific about what problem to investigate, help them by doing a investigation yourself focus on performance improvements for better LCP, INP and CLS. Present to the user options with 1-sentence summaries. Mention what performance metrics each option impacts. Call as many functions and confirm the data thoroughly: never present an option without being certain it is a real performance issue.
+- Focus on identifying the problem in Step 1 and save solution suggestions for Step 2.
 - Once a performance problem has been identified for investigation, move on to step 2.
 
+#### Response Structure
+
+- Rank the options from most impactful to least impactful, and present them to the user in that order.
+- Limit the number of performance problem options presented to the user to a maximum of 2.
+
 ### Step 2: Suggest solutions
 
 - Suggest solutions to remedy the identified performance problem. Be as specific as possible, using data from the trace via the provided functions to back up everything you say. You should prefer specific solutions, but absent any specific solution you may suggest general solutions (such as from an insight's documentation links).
 - If you are unsure, be honest and present information that can be helpful for further investigation.
 - A good first step to discover solutions is to consider the insights, but you should also validate all potential advice by analyzing the trace until you are confident about the root cause of a performance issue.
 
+#### Response Structure
+
+- If available, point out the root cause(s) of the problem.
+  - Example: "**Root Cause**: The page is slow because of [reason]."
+  - Example: "**Root Causes**:"
+    - [Reason 1]
+    - [Reason 2]
+- if applicable, list actionable solution suggestion(s) in order of impact:
+  - Example: "**Suggestion**: [Suggestion 1]
+  - Example: "**Suggestions**:"
+    - [Suggestion 1]
+    - [Suggestion 2]
+
 ## Guidelines
 
 - Use the provided functions to get detailed performance data. Prioritize functions that provide context relevant to the performance issue being investigated.
 - Before finalizing your advice, look over it and validate using any relevant functions. If something seems off, refine the advice before giving it to the user.
-- Do not rely on assumptions or incomplete information. Use the provided functions to get more data when needed.
+- Base your analysis and advice solely on the data retrieved through the provided functions. Always use the provided functions to gather sufficient data when needed.
 - Use the track summary functions to get high-level detail about portions of the trace. For the \`bounds\` parameter, default to using the bounds of the trace. Never specifically ask the user for a bounds. You can use more narrow bounds (such as the bounds relevant to a specific insight) when appropriate. Narrow the bounds given functions when possible.
 - Use \`getEventByKey\` to get data on a specific trace event. This is great for root-cause analysis or validating any assumptions.
 - Provide clear, actionable recommendations. Avoid technical jargon unless necessary, and explain any technical terms used.
@@ -147,15 +165,6 @@ Adhere to the following critical requirements:
 - If asked about sensitive topics (religion, race, politics, sexuality, gender, etc.), respond with: "My expertise is limited to website performance analysis. I cannot provide information on that topic.".
 - 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.
-
-## Response Structure
-
-- If available, point out the root cause of the problem. It may be a bullet point list.
-  - Example: "**Root Cause**: The page is slow because of [reason]."
-- if applicable, list actionable solution suggestion(s) in order of impact:
-  - Example: "**Suggestions**:
-    - [Suggestion 1]
-    - [Suggestion 2]
 `;
 };
 
@@ -166,7 +175,7 @@ When referring to a trace event that has a corresponding \`eventKey\`, annotate
 - When referring to a URL for which you know the eventKey of: [https://www.example.com](#s-1827)
 - Never show the eventKey (like "eventKey: s-1852"); instead, use a markdown link as described above.
 
-When asking the user to make a choice between multiple 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.
+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 => {
@@ -231,8 +240,13 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   }
 
   override getOrigin(): string {
-    const {min, max} = this.#focus.parsedTrace.data.Meta.traceBounds;
-    return `trace-${min}-${max}`;
+    try {
+      const url = new URL(this.#focus.parsedTrace.data.Meta.mainFrameURL);
+      return url.origin;
+    } catch {
+      const {min, max} = this.#focus.parsedTrace.data.Meta.traceBounds;
+      return `trace-${min}-${max}`;
+    }
   }
 
   override getItem(): AgentFocus {

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

@@ -226,7 +226,7 @@ Response headers
 
 The result of the checks for this insight are:
 - fetchpriority=high should be applied: FAILED
-- lazy load not applied: PASSED
+- LCP resources should not use loading=lazy: PASSED
 - Request is discoverable in initial document: PASSED
 
 ## Estimated savings: none

package/front_end/models/emulation/DeviceModeModel.ts

@@ -795,35 +795,30 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       overlayModel.setShowViewportSizeOnResize(false);
     }
 
-    const screenshot = await screenCaptureModel.captureScreenshot(
-        Protocol.Page.CaptureScreenshotRequestFormat.Png, 100, screenshotMode, clip);
-
-    const deviceMetrics: Protocol.Page.SetDeviceMetricsOverrideRequest = {
-      width: 0,
-      height: 0,
-      deviceScaleFactor: 0,
-      mobile: false,
-    };
-    if (fullSize && this.#emulationModel) {
-      if (this.#device && this.#mode) {
-        const orientation = this.#device.orientationByName(this.#mode.orientation);
-        deviceMetrics.width = orientation.width;
-        deviceMetrics.height = orientation.height;
-        const dispFeature = this.getDisplayFeature();
-        if (dispFeature) {
-          // @ts-expect-error: displayFeature isn't in protocol.ts but is an
-          // experimental flag:
-          // https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setDeviceMetricsOverride
-          deviceMetrics.displayFeature = dispFeature;
-        }
-      } else {
-        deviceMetrics.width = 0;
-        deviceMetrics.height = 0;
+    if (this.#emulationModel && this.#device && this.#mode) {
+      const orientation = this.#device.orientationByName(this.#mode.orientation);
+      const deviceMetrics: Protocol.Emulation.SetDeviceMetricsOverrideRequest = {
+        width: orientation.width,
+        height: orientation.height,
+        deviceScaleFactor: this.#device.deviceScaleFactor,
+        mobile: this.isMobile(),
+      };
+      const dispFeature = this.getDisplayFeature();
+      if (dispFeature) {
+        deviceMetrics.displayFeature = dispFeature;
       }
       await this.#emulationModel.emulateDevice(deviceMetrics);
     }
-    this.calculateAndEmulate(false);
-    return screenshot;
+
+    try {
+      const screenshot = await screenCaptureModel.captureScreenshot(
+          Protocol.Page.CaptureScreenshotRequestFormat.Png, 100, screenshotMode, clip);
+      return screenshot;
+    } finally {
+      await this.#emulationModel?.emulateDevice(null);
+      overlayModel?.setShowViewportSizeOnResize(this.#type === Type.None);
+      this.calculateAndEmulate(false);
+    }
   }
 
   private applyTouch(touchEnabled: boolean, mobile: boolean): void {

package/front_end/models/trace/insights/LCPDiscovery.ts

@@ -41,14 +41,18 @@ export const UIStrings = {
    * @description Text to tell the user that a fetchpriority property value of "high" should be applied to the LCP request.
    */
   fetchPriorityShouldBeApplied: 'fetchpriority=high should be applied',
+  /**
+   * @description Text to tell the user that a fetchpriority property value of "high" should be applied to the preload request that loads the LCP image.
+   */
+  fetchPriorityShouldBeAppliedToImagePreload: 'fetchpriority=high should be applied to the image preload request',
   /**
    * @description Text to tell the user that the LCP request is discoverable in the initial document.
    */
   requestDiscoverable: 'Request is discoverable in initial document',
   /**
-   * @description Text to tell the user that the LCP request does not have the lazy load property applied.
+   * @description Text to tell the user that LCP resources should avoid using loading=lazy.
    */
-  lazyLoadNotApplied: 'lazy load not applied',
+  lazyLoadNotApplied: 'LCP resources should not use loading=lazy',
   /**
    * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
    */
@@ -133,12 +137,17 @@ export function generateInsight(
       lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;
   const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;
 
-  const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;
   const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;
   // This is the earliest discovery time an LCP request could have - it's TTFB (as an absolute timestamp).
   const earliestDiscoveryTime = calculateDocFirstByteTs(docRequest);
 
   const priorityHintFound = imageFetchPriorityHint === 'high';
+  const missingPriorityHintLabel = lcpRequest.args.data.isLinkPreload ?
+      i18nString(UIStrings.fetchPriorityShouldBeAppliedToImagePreload) :
+      i18nString(UIStrings.fetchPriorityShouldBeApplied);
+  // A lazy-loaded LCP image can still be eagerly loaded when its request is
+  // initiated by a preload.
+  const lcpNotLazyLoaded = lcpEvent.args.data?.loadingAttr !== 'lazy' || lcpRequest.args.data.isLinkPreload;
 
   return finalize({
     lcpEvent,
@@ -146,12 +155,11 @@ export function generateInsight(
     earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.Micro(earliestDiscoveryTime) : undefined,
     checklist: {
       priorityHinted: {
-        label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) :
-                                   i18nString(UIStrings.fetchPriorityShouldBeApplied),
+        label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) : missingPriorityHintLabel,
         value: priorityHintFound
       },
       requestDiscoverable: {label: i18nString(UIStrings.requestDiscoverable), value: imgPreloadedOrFoundInHTML},
-      eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: imageLoadingAttr !== 'lazy'},
+      eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: lcpNotLazyLoaded},
     },
   });
 }

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -379,14 +379,6 @@ interface ToolbarViewInput {
   showChatActions: boolean;
   showActiveConversationActions: boolean;
   isLoading: boolean;
-
-  walkthrough: {
-    isExpanded: boolean,
-    isInlined: boolean,
-    onToggle: (isOpen: boolean, message: ModelChatMessage) => void,
-    activeSidebarMessage: ModelChatMessage|null,
-    inlineExpandedMessages: ModelChatMessage[],
-  };
 }
 
 export const enum ViewState {
@@ -514,7 +506,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
   if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled ||
     Greendev.Prototypes.instance().isEnabled('breakpointDebuggerAgent')) {
 
-    const shouldShowWalkthrough = input.state === ViewState.CHAT_VIEW && input.walkthrough.isExpanded;
+    const shouldShowWalkthrough = input.state === ViewState.CHAT_VIEW && input.props.walkthrough.isExpanded;
     /**
      * We want to mark the walkthrough as loading only if it's showing the last
      * message. Otherwise, a previous walkthrough will show as loading if we
@@ -535,7 +527,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
           name="ai-assistance-split-view-state"
           direction="column"
           sidebar-position="second"
-          sidebar-visibility=${shouldShowWalkthrough && !input.walkthrough.isInlined ? 'visible' : 'hidden'}
+          sidebar-visibility=${shouldShowWalkthrough && !input.props.walkthrough.isInlined ? 'visible' : 'hidden'}
           sidebar-initial-size=${WALKTHROUGH_SIDEBAR_INITIAL_WIDTH}
         >
           <div slot="main" class="main-view">
@@ -716,13 +708,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       onSettingsClick: () => {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
       },
-      walkthrough: {
-        isExpanded: this.#walkthrough.isExpanded,
-        isInlined: this.#walkthrough.isInlined,
-        onToggle: this.#toggleWalkthrough.bind(this),
-        activeSidebarMessage: this.#walkthrough.activeSidebarMessage,
-        inlineExpandedMessages: this.#walkthrough.inlineExpandedMessages,
-      }
     };
   }