chrome-devtools-frontend 1.0.1598808 → 1.0.1599001

package/front_end/generated/protocol.ts

@@ -1071,9 +1071,9 @@ export namespace Audits {
   }
 
   export const enum SharedDictionaryError {
-    UseErrorCrossOriginNoCorsRequest = 'UseErrorCrossOriginNoCorsRequest',
     UseErrorDictionaryLoadFailure = 'UseErrorDictionaryLoadFailure',
     UseErrorMatchingDictionaryNotUsed = 'UseErrorMatchingDictionaryNotUsed',
+    UseErrorNoCorpCrossOriginNoCorsRequest = 'UseErrorNoCorpCrossOriginNoCorsRequest',
     UseErrorUnexpectedContentDictionaryHeader = 'UseErrorUnexpectedContentDictionaryHeader',
     WriteErrorCossOriginNoCorsRequest = 'WriteErrorCossOriginNoCorsRequest',
     WriteErrorDisallowedBySettings = 'WriteErrorDisallowedBySettings',
@@ -1084,6 +1084,7 @@ export namespace Audits {
     WriteErrorInvalidStructuredHeader = 'WriteErrorInvalidStructuredHeader',
     WriteErrorInvalidTTLField = 'WriteErrorInvalidTTLField',
     WriteErrorNavigationRequest = 'WriteErrorNavigationRequest',
+    WriteErrorNoCorpCossOriginNoCorsRequest = 'WriteErrorNoCorpCossOriginNoCorsRequest',
     WriteErrorNoMatchField = 'WriteErrorNoMatchField',
     WriteErrorNonIntegerTTLField = 'WriteErrorNonIntegerTTLField',
     WriteErrorNonListMatchDestField = 'WriteErrorNonListMatchDestField',

package/front_end/models/ai_assistance/AiConversation.ts

@@ -3,12 +3,14 @@
 // found in the LICENSE file.
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.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 Trace from '../../models/trace/trace.js';
 import * as Greendev from '../greendev/greendev.js';
 import type * as NetworkTimeCalculator from '../network_time_calculator/network_time_calculator.js';
 
+import {AccessibilityAgent, AccessibilityContext} from './agents/AccessibilityAgent.js';
 import {
   type AiAgent,
   type ContextDetail,
@@ -29,6 +31,7 @@ import {AiHistoryStorage, ConversationType, type SerializedConversation} from '.
 import type {ChangeManager} from './ChangeManager.js';
 
 export const NOT_FOUND_IMAGE_DATA = '';
+export const CONTEXT_TITLE = 'Analyzing data';
 const MAX_TITLE_LENGTH = 80;
 
 export function generateContextDetailsMarkdown(details: ContextDetail[]): string {
@@ -155,6 +158,8 @@ export class AiConversation {
         this.#updateAgent(ConversationType.NETWORK);
       } else if (updateContext instanceof PerformanceTraceContext) {
         this.#updateAgent(ConversationType.PERFORMANCE);
+      } else if (updateContext instanceof AccessibilityContext) {
+        this.#updateAgent(ConversationType.ACCESSIBILITY);
       }
     }
   }
@@ -205,7 +210,7 @@ export class AiConversation {
           break;
         }
         case ResponseType.CONTEXT: {
-          contentParts.push(`### ${item.title}`);
+          contentParts.push(`### ${CONTEXT_TITLE}`);
           if (item.details && item.details.length > 0) {
             contentParts.push(generateContextDetailsMarkdown(item.details));
           }
@@ -343,10 +348,16 @@ export class AiConversation {
         }
         break;
       }
+      case ConversationType.ACCESSIBILITY: {
+        this.#agent = new AccessibilityAgent(options);
+        break;
+      }
       case ConversationType.NONE: {
         this.#agent = new ContextSelectionAgent(options);
         break;
       }
+      default:
+        Platform.assertNever(type, 'Unknown conversation type');
     }
   }
 

package/front_end/models/ai_assistance/AiHistoryStorage.snapshot.txt

@@ -12,7 +12,7 @@ What is the color of the sky?
 
 ## AI
 
-### Analyzing context
+### Analyzing data
 
 **Detail 1:**
 ````

package/front_end/models/ai_assistance/AiHistoryStorage.ts

@@ -14,6 +14,7 @@ export const enum ConversationType {
   NETWORK = 'drjones-network-request',
   PERFORMANCE = 'drjones-performance-full',
   BREAKPOINT = 'breakpoint',
+  ACCESSIBILITY = 'accessibility',
 }
 
 export interface SerializedConversation {

package/front_end/models/ai_assistance/ConversationHandler.ts

@@ -19,7 +19,7 @@ import {
 import {NetworkAgent, RequestContext} from './agents/NetworkAgent.js';
 import type {PerformanceTraceContext} from './agents/PerformanceAgent.js';
 import {NodeContext, StylingAgent} from './agents/StylingAgent.js';
-import {AiConversation} from './AiConversation.js';
+import {AiConversation, CONTEXT_TITLE} from './AiConversation.js';
 import {
   ConversationType,
 } from './AiHistoryStorage.js';
@@ -235,12 +235,18 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
       if (data.type !== ResponseType.ANSWER || data.complete) {
         devToolsLogs.push(data);
       }
-      if (data.type === ResponseType.CONTEXT || data.type === ResponseType.TITLE) {
+      if (data.type === ResponseType.TITLE) {
         yield {
           type: ExternalRequestResponseType.NOTIFICATION,
           message: data.title,
         };
       }
+      if (data.type === ResponseType.CONTEXT) {
+        yield {
+          type: ExternalRequestResponseType.NOTIFICATION,
+          message: CONTEXT_TITLE,
+        };
+      }
       if (data.type === ResponseType.SIDE_EFFECT) {
         data.confirm(true);
       }

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Host from '../../../core/host/host.js';
-import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import type * as LHModel from '../../lighthouse/lighthouse.js';
 
@@ -23,26 +22,14 @@ import {
  */
 const preamble = `You are an accessibility agent.
 
+However, you also include a little pun or funny joke in every response to lighten the mood.
+
 # Considerations
 * Keep your analysis concise and focused, highlighting only the most critical aspects for a software engineer.
-* Answer questions directly, using the provided links whenever relevant.
-* Always double-check links to make sure they are complete and correct.
 * **CRITICAL** You are an accessibility agent. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, or any other non web-development topics.
 `;
 
-/*
-* Strings that don't need to be translated at this time.
-*/
-const UIStringsNotTranslate = {
-  /**
-   * @description Title for thinking step of the accessibility agent.
-   */
-  inspectingAudits: 'Inspecting audits',
-} as const;
-
-const lockedString = i18n.i18n.lockedString;
-
-export class Context extends ConversationContext<LHModel.ReporterTypes.ReportJSON> {
+export class AccessibilityContext extends ConversationContext<LHModel.ReporterTypes.ReportJSON> {
   #lh: LHModel.ReporterTypes.ReportJSON;
 
   constructor(report: LHModel.ReporterTypes.ReportJSON) {
@@ -76,7 +63,6 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_ACCESSIBILITY_AGENT;
 
   get userTier(): string|undefined {
-    // TODO(b/491772868): tidy up userTier & feature flags in the backend.
     return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
   }
 
@@ -100,7 +86,6 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
 
     yield {
       type: ResponseType.CONTEXT,
-      title: lockedString(UIStringsNotTranslate.inspectingAudits),
       details: createContextDetails(selectedFile),
     };
   }

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

@@ -70,7 +70,6 @@ export interface ContextDetail {
 }
 export interface ContextResponse {
   type: ResponseType.CONTEXT;
-  title: string;
   details: [ContextDetail, ...ContextDetail[]];
   widgets?: AiWidget[];
 }
@@ -102,6 +101,7 @@ export interface ContextChangeResponse {
    */
   description: string;
   context: ConversationContext<unknown>;
+  widgets?: AiWidget[];
 }
 
 interface SerializedSideEffectResponse extends Omit<SideEffectResponse, 'confirm'> {}
@@ -253,11 +253,33 @@ export interface DomTreeAiWidget {
   name: 'DOM_TREE';
   data: {
     root: SDK.DOMModel.DOMNodeSnapshot,
+    networkRequest?: {
+      url: string,
+      size: number,
+      resourceType: Protocol.Network.ResourceType,
+      mimeType: string,
+      imageUrl?: string,
+    },
+  };
+}
+
+export interface PerformanceTraceAiWidget {
+  name: 'PERFORMANCE_TRACE';
+  data: {
+    parsedTrace: Trace.TraceModel.ParsedTrace,
+  };
+}
+
+export interface LcpBreakdownAiWidget {
+  name: 'LCP_BREAKDOWN';
+  data: {
+    lcpData: Trace.Insights.Models.LCPBreakdown.LCPBreakdownInsightModel,
   };
 }
 
 // This type will grow as we add more widgets.
-export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget;
+export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget|
+    PerformanceTraceAiWidget|LcpBreakdownAiWidget;
 
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,
@@ -272,6 +294,7 @@ export type FunctionCallHandlerResult<Result> = {
 }|{
   context: ConversationContext<unknown>,
   description: string,
+  widgets?: AiWidget[],
 }|{
   error: string,
 };
@@ -692,6 +715,7 @@ export abstract class AiAgent<T> {
               type: ResponseType.CONTEXT_CHANGE,
               description: result.description,
               context: result.context,
+              widgets: result.widgets,
             };
 
             return;

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

@@ -608,7 +608,6 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
     }
     yield {
       type: ResponseType.CONTEXT,
-      title: 'Analyzing breakpoint location',
       details: [{title: 'Location', text: selectedBreakpoint.getTitle()}]
     };
   }

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

@@ -278,6 +278,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
         return {
           context: PerformanceTraceContext.fromParsedTrace(result),
           description: 'User recorded a performance trace',
+          widgets: [{name: 'PERFORMANCE_TRACE', data: {parsedTrace: result}}]
         };
       }
     });

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

@@ -82,7 +82,6 @@ export class ConversationSummaryAgent extends AiAgent<string> {
 
     yield {
       type: ResponseType.CONTEXT,
-      title: 'Summarizing conversation',
       details: [
         {
           title: 'Conversation transcript',

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Host from '../../../core/host/host.js';
-import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import type * as Workspace from '../../workspace/workspace.js';
 import {FileFormatter} from '../data_formatters/FileFormatter.js';
@@ -62,18 +61,6 @@ External Resources:
 MDN Web Docs: JavaScript Functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
 `;
 
-/*
-* Strings that don't need to be translated at this time.
-*/
-const UIStringsNotTranslate = {
-  /**
-   * @description Title for thinking step of File agent.
-   */
-  analyzingFile: 'Analyzing file',
-} as const;
-
-const lockedString = i18n.i18n.lockedString;
-
 export class FileContext extends ConversationContext<Workspace.UISourceCode.UISourceCode> {
   #file: Workspace.UISourceCode.UISourceCode;
 
@@ -118,7 +105,6 @@ export class FileAgent extends AiAgent<Workspace.UISourceCode.UISourceCode> {
       modelId,
     };
   }
-
   async *
       handleContextDetails(selectedFile: ConversationContext<Workspace.UISourceCode.UISourceCode>|null):
           AsyncGenerator<ContextResponse, void, void> {
@@ -128,7 +114,6 @@ export class FileAgent extends AiAgent<Workspace.UISourceCode.UISourceCode> {
 
     yield {
       type: ResponseType.CONTEXT,
-      title: lockedString(UIStringsNotTranslate.analyzingFile),
       details: createContextDetailsForFileAgent(selectedFile),
     };
   }

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

@@ -60,10 +60,6 @@ This request aims to retrieve a list of products matching the search query "lapt
 * Strings that don't need to be translated at this time.
 */
 const UIStringsNotTranslate = {
-  /**
-   * @description Title for thinking step of Network agent.
-   */
-  analyzingNetworkData: 'Analyzing network data',
   /**
    * @description Heading text for the block that shows the network request details.
    */
@@ -144,7 +140,6 @@ export class NetworkAgent extends AiAgent<SDK.NetworkRequest.NetworkRequest> {
 
     yield {
       type: ResponseType.CONTEXT,
-      title: lockedString(UIStringsNotTranslate.analyzingNetworkData),
       details: await createContextDetailsForNetworkAgent(selectedNetworkRequest),
     };
   }

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

@@ -11,7 +11,9 @@ 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';
 import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
+import * as TextUtils from '../../text_utils/text_utils.js';
 import * as Trace from '../../trace/trace.js';
 import {
   PerformanceInsightFormatter,
@@ -35,10 +37,6 @@ import {
 } from './AiAgent.js';
 
 const UIStringsNotTranslated = {
-  /**
-   *@description Shown when the agent is investigating a trace
-   */
-  analyzingTrace: 'Analyzing trace',
   /**
    * @description Shown when the agent is investigating network activity
    */
@@ -318,7 +316,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #formatter: PerformanceTraceFormatter|null = null;
   #lastEventForEnhancedQuery: Trace.Types.Events.Event|undefined;
   #lastInsightForEnhancedQuery: Trace.Insights.Types.InsightModel|undefined;
-  #hasShownAnalyzeTraceContext = false;
 
   /**
    * Cache of all function calls made by the agent. This allows us to include (as a
@@ -379,10 +376,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       return;
     }
 
-    if (this.#hasShownAnalyzeTraceContext) {
-      return;
-    }
-
     const widgets: AiWidget[] = [];
     const primaryInsightSet = context.getItem().primaryInsightSet;
     if (primaryInsightSet) {
@@ -397,7 +390,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
     yield {
       type: ResponseType.CONTEXT,
-      title: lockedString(UIStringsNotTranslated.analyzingTrace),
       details: [
         {
           title: 'Trace',
@@ -406,8 +398,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       ],
       widgets,
     };
-
-    this.#hasShownAnalyzeTraceContext = true;
   }
 
   #callTreeContextSet = new WeakSet();
@@ -752,7 +742,8 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         const details = new PerformanceInsightFormatter(focus, insight).formatInsight();
 
         const widgets: AiWidget[] = [];
-        if (params.insightName === 'LCPDiscovery' || params.insightName === 'LCPBreakdown') {
+        if (Trace.Insights.Models.LCPDiscovery.isLCPDiscoveryInsight(insight) ||
+            Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(insight)) {
           const lcpMetric = Trace.Insights.Common.getLCP(insightSet);
           const lcpEvent = lcpMetric?.event;
           if (lcpEvent && Trace.Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
@@ -767,15 +758,38 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
                 const node = nodeMap?.get(nodeId);
                 if (node) {
                   const snapshot = await node.takeSnapshot();
+                  let networkRequest;
+                  const lcpSyntheticRequest = insight.lcpRequest;
+                  if (lcpSyntheticRequest) {
+                    networkRequest = {
+                      url: lcpSyntheticRequest.args.data.url,
+                      size: lcpSyntheticRequest.args.data.decodedBodyLength ??
+                          lcpSyntheticRequest.args.data.encodedDataLength ?? 0,
+                      resourceType: lcpSyntheticRequest.args.data.resourceType,
+                      mimeType: lcpSyntheticRequest.args.data.mimeType ?? '',
+                      imageUrl: await this.#getNetworkRequestImageData(lcpSyntheticRequest),
+                    };
+                  }
                   widgets.push({
                     name: 'DOM_TREE',
-                    data: {root: snapshot},
+                    data: {
+                      root: snapshot,
+                      networkRequest,
+                    },
                   });
                   processedNodeIds.add(nodeId);
                 }
               }
             }
           }
+          if (params.insightName === 'LCPBreakdown') {
+            widgets.push({
+              name: 'LCP_BREAKDOWN',
+              data: {
+                lcpData: insight as Trace.Insights.Models.LCPBreakdown.LCPBreakdownInsightModel,
+              },
+            });
+          }
         }
 
         const key = `getInsightDetails('${params.insightSetId}', '${params.insightName}')`;
@@ -1258,4 +1272,24 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     Annotations.AnnotationRepository.instance().addNetworkRequestAnnotation(annotationMessage, requestId);
     return {result: {success: true}};
   }
+
+  async #getNetworkRequestImageData(lcpRequest: Trace.Types.Events.SyntheticNetworkRequest): Promise<string|undefined> {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const networkManager = target?.model(SDK.NetworkManager.NetworkManager);
+    if (!target || !networkManager) {
+      return undefined;
+    }
+
+    const networkLog = Logs.NetworkLog.NetworkLog.instance();
+    const requestId = lcpRequest.args.data.requestId;
+    const sdkRequest = networkLog.requestByManagerAndId(networkManager, requestId);
+
+    if (sdkRequest?.contentType().isImage()) {
+      const contentData = await sdkRequest.requestContentData();
+      if (!TextUtils.ContentData.ContentData.isError(contentData)) {
+        return contentData.asDataUrl() ?? undefined;
+      }
+    }
+    return undefined;
+  }
 }

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Host from '../../../core/host/host.js';
-import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import type {AICallTree} from '../performance/AICallTree.js';
 import type {AgentFocus} from '../performance/AIContext.js';
@@ -11,14 +10,6 @@ import type {AgentFocus} from '../performance/AIContext.js';
 import {AiAgent, type ContextResponse, type ConversationContext, type RequestOptions, ResponseType} from './AiAgent.js';
 import {PerformanceTraceContext} from './PerformanceAgent.js';
 
-const UIStringsNotTranslated = {
-  analyzingCallTree: 'Analyzing call tree',
-  /**
-   * @description Shown when the agent is investigating network activity
-   */
-} as const;
-const lockedString = i18n.i18n.lockedString;
-
 /**
  * Preamble clocks in at ~970 tokens.
  *   The prose is around 4.5 chars per token.
@@ -124,7 +115,6 @@ export class PerformanceAnnotationsAgent extends AiAgent<AgentFocus> {
 
     yield {
       type: ResponseType.CONTEXT,
-      title: lockedString(UIStringsNotTranslated.analyzingCallTree),
       details: [
         {
           title: 'Selected call tree',

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -216,7 +216,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",
@@ -296,7 +295,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",
@@ -321,7 +319,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",
@@ -349,7 +346,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",
@@ -374,7 +370,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",
@@ -397,7 +392,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",

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

@@ -37,10 +37,6 @@ import {
 * Strings that don't need to be translated at this time.
 */
 const UIStringsNotTranslate = {
-  /**
-   * @description Title for context details for Freestyler.
-   */
-  analyzingThePrompt: 'Analyzing the prompt',
   /**
    * @description Heading text for context details of Freestyler agent.
    */
@@ -1045,7 +1041,6 @@ const data = {
     }
     yield {
       type: ResponseType.CONTEXT,
-      title: lockedString(UIStringsNotTranslate.analyzingThePrompt),
       details: [{
         title: lockedString(UIStringsNotTranslate.dataUsed),
         text: await StylingAgent.describeElement(selectedElement.getItem()),

package/front_end/models/emulation/DeviceModeModel.ts

@@ -680,7 +680,11 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private applyUserAgent(userAgent: string, userAgentMetadata: Protocol.Emulation.UserAgentMetadata|null): void {
-    SDK.NetworkManager.MultitargetNetworkManager.instance().setUserAgentOverride(userAgent, userAgentMetadata);
+    // When the user agent string is empty (e.g. custom desktop device without
+    // a UA override), metadata must also be cleared. The backend rejects
+    // setUserAgentOverride calls that provide metadata without a UA string.
+    SDK.NetworkManager.MultitargetNetworkManager.instance().setUserAgentOverride(
+        userAgent, userAgent ? userAgentMetadata : null);
   }
 
   private applyDeviceMetrics(

package/front_end/models/emulation/EmulatedDevices.ts

@@ -201,7 +201,8 @@ export class EmulatedDevice {
       const rawUserAgent = (parseValue(json, 'user-agent', 'string') as string);
       result.userAgent = SDK.NetworkManager.MultitargetNetworkManager.patchUserAgentWithChromeVersion(rawUserAgent);
 
-      result.userAgentMetadata = parseValue(json, 'user-agent-metadata', 'object', null);
+      const userAgentMetadata = parseValue(json, 'user-agent-metadata', 'object', null);
+      result.userAgentMetadata = result.userAgent ? userAgentMetadata : null;
 
       const capabilities = parseValue(json, 'capabilities', 'object', []);
       if (!Array.isArray(capabilities)) {
@@ -366,7 +367,7 @@ export class EmulatedDevice {
     json['foldable-screen'] = this.isFoldableScreen;
     json['show'] = this.#show;
 
-    if (this.userAgentMetadata) {
+    if (this.userAgent && this.userAgentMetadata) {
       json['user-agent-metadata'] = this.userAgentMetadata;
     }
 

package/front_end/models/issues_manager/SharedDictionaryIssue.ts

@@ -23,7 +23,7 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/SharedDictionary
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 export const enum IssueCode {
-  USE_ERROR_CROSS_ORIGIN_NO_CORS_REQUEST = 'SharedDictionaryIssue::UseErrorCrossOriginNoCorsRequest',
+  USE_ERROR_NO_CORP_CROSS_ORIGIN_NO_CORS_REQUEST = 'SharedDictionaryIssue::UseErrorNoCorpCrossOriginNoCorsRequest',
   USE_ERROR_DICTIONARY_LOAD_FAILURE = 'SharedDictionaryIssue::UseErrorDictionaryLoadFailure',
   USE_ERROR_MATCHING_DICTIONARY_NOT_USED = 'SharedDictionaryIssue::UseErrorMatchingDictionaryNotUsed',
   USE_ERROR_UNEXPECTED_CONTENT_DICTIONARY_HEADER = 'SharedDictionaryIssue::UseErrorUnexpectedContentDictionaryHeader',
@@ -36,6 +36,7 @@ export const enum IssueCode {
   WRITE_ERROR_INVALID_STRUCTURED_HEADER = 'SharedDictionaryIssue::WriteErrorInvalidStructuredHeader',
   WRITE_ERROR_INVALID_TTL_FIELD = 'SharedDictionaryIssue::WriteErrorInvalidTTLField',
   WRITE_ERROR_NAVIGATION_REQUEST = 'SharedDictionaryIssue::WriteErrorNavigationRequest',
+  WRITE_ERROR_NO_CORP_COSS_ORIGIN_NO_CORS_REQUEST = 'SharedDictionaryIssue::WriteErrorNoCorpCossOriginNoCorsRequest',
   WRITE_ERROR_NO_MATCH_FIELD = 'SharedDictionaryIssue::WriteErrorNoMatchField',
   WRITE_ERROR_NON_INTEGER_TTL_FIELD = 'SharedDictionaryIssue::WriteErrorNonIntegerTTLField',
   WRITE_ERROR_NON_LIST_MATCH_DEST_FIELD = 'SharedDictionaryIssue::WriteErrorNonListMatchDestField',
@@ -53,8 +54,8 @@ export const enum IssueCode {
 
 function getIssueCode(details: Protocol.Audits.SharedDictionaryIssueDetails): IssueCode {
   switch (details.sharedDictionaryError) {
-    case Protocol.Audits.SharedDictionaryError.UseErrorCrossOriginNoCorsRequest:
-      return IssueCode.USE_ERROR_CROSS_ORIGIN_NO_CORS_REQUEST;
+    case Protocol.Audits.SharedDictionaryError.UseErrorNoCorpCrossOriginNoCorsRequest:
+      return IssueCode.USE_ERROR_NO_CORP_CROSS_ORIGIN_NO_CORS_REQUEST;
     case Protocol.Audits.SharedDictionaryError.UseErrorDictionaryLoadFailure:
       return IssueCode.USE_ERROR_DICTIONARY_LOAD_FAILURE;
     case Protocol.Audits.SharedDictionaryError.UseErrorMatchingDictionaryNotUsed:
@@ -79,6 +80,8 @@ function getIssueCode(details: Protocol.Audits.SharedDictionaryIssueDetails): Is
       return IssueCode.WRITE_ERROR_INVALID_TTL_FIELD;
     case Protocol.Audits.SharedDictionaryError.WriteErrorNavigationRequest:
       return IssueCode.WRITE_ERROR_NAVIGATION_REQUEST;
+    case Protocol.Audits.SharedDictionaryError.WriteErrorNoCorpCossOriginNoCorsRequest:
+      return IssueCode.WRITE_ERROR_NO_CORP_COSS_ORIGIN_NO_CORS_REQUEST;
     case Protocol.Audits.SharedDictionaryError.WriteErrorNoMatchField:
       return IssueCode.WRITE_ERROR_NO_MATCH_FIELD;
     case Protocol.Audits.SharedDictionaryError.WriteErrorNonIntegerTTLField:
@@ -168,9 +171,9 @@ const specLinks = [{
 const issueDescriptions = new Map<Protocol.Audits.SharedDictionaryError, LazyMarkdownIssueDescription>([
 
   [
-    Protocol.Audits.SharedDictionaryError.UseErrorCrossOriginNoCorsRequest,
+    Protocol.Audits.SharedDictionaryError.UseErrorNoCorpCrossOriginNoCorsRequest,
     {
-      file: 'sharedDictionaryUseErrorCrossOriginNoCorsRequest.md',
+      file: 'sharedDictionaryUseErrorNoCorpCrossOriginNoCorsRequest.md',
       links: specLinks,
     },
   ],
@@ -258,6 +261,13 @@ const issueDescriptions = new Map<Protocol.Audits.SharedDictionaryError, LazyMar
       links: specLinks,
     },
   ],
+  [
+    Protocol.Audits.SharedDictionaryError.WriteErrorNoCorpCossOriginNoCorsRequest,
+    {
+      file: 'sharedDictionaryWriteErrorNoCorpCossOriginNoCorsRequest.md',
+      links: specLinks,
+    },
+  ],
   [
     Protocol.Audits.SharedDictionaryError.WriteErrorNoMatchField,
     {

package/front_end/models/issues_manager/descriptions/sharedDictionaryUseErrorNoCorpCrossOriginNoCorsRequest.md

@@ -0,0 +1,3 @@
+# Dictionary compression cannot be used for cross-origin no-cors requests without a Cross-Origin-Resource-Policy response header
+
+To use dictionary compression for a cross-origin no-cors request, the response must have a `Cross-Origin-Resource-Policy: cross-origin` header. Without it, the response can not be decoded and will fail.

package/front_end/models/issues_manager/descriptions/sharedDictionaryWriteErrorNoCorpCossOriginNoCorsRequest.md

@@ -0,0 +1,3 @@
+# A cross-origin no-cors response cannot be stored as a shared dictionary for future requests without a Cross-Origin-Resource-Policy response header
+
+To store a response from a cross-origin no-cors request as a shared dictionary for future requests, the response must have a `Cross-Origin-Resource-Policy: cross-origin` header. Without it, the response will not be stored as a dictionary.