chrome-devtools-frontend 1.0.1522145 → 1.0.1524741

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

@@ -7,6 +7,7 @@ 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 {ChangeManager} from '../ChangeManager.js';
 import {debugLog} from '../debug.js';
 import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';
@@ -228,10 +229,6 @@ export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
   }
 }
 
-type Relation = 'currentElement'|'parentElement';
-
-const enableDedicatedStyleFunctions = false;
-
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
@@ -289,107 +286,57 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
         this,
     );
 
-    if (enableDedicatedStyleFunctions) {
-      this.declareFunction<{
-        relations: Relation[],
-        properties: string[],
-        thought: string,
-      }>('getComputedStyles', {
-        description:
-            'Call this function to get the computed styles for the current or the parent element. Use executeJavaScript for more complex queries.',
-        parameters: {
-          type: Host.AidaClient.ParametersTypes.OBJECT,
-          description: '',
-          nullable: false,
-          properties: {
-            thought: {
-              type: Host.AidaClient.ParametersTypes.STRING,
-              description: 'Explain why you want to get computed styles',
-            },
-            relations: {
-              type: Host.AidaClient.ParametersTypes.ARRAY,
-              description: 'A list of relations describing which elements to query.',
-              items: {
-                type: Host.AidaClient.ParametersTypes.STRING,
-                description: 'Which element to query. Either \'currentElement\' or \'parentElement\'',
-              }
-            },
-            properties: {
-              type: Host.AidaClient.ParametersTypes.ARRAY,
-              description: 'One or more style property names to fetch',
-              nullable: false,
-              items: {
-                type: Host.AidaClient.ParametersTypes.STRING,
-                description: 'A computed style property name to retrieve. For example, \'background-color\'.'
-              }
-            },
-          }
-        },
-        displayInfoFromArgs: params => {
-          return {
-            title: 'Reading computed styles',
-            thought: params.thought,
-            action: `getComputedStyles(${JSON.stringify(params.relations)}, ${JSON.stringify(params.properties)})`,
-          };
-        },
-        handler: async (
-            params,
-            options,
-            ) => {
-          return await this.getComputedStyles(params.relations, params.properties, options);
-        },
-      });
-
-      this.declareFunction<{
-        relations: Relation[],
-        properties: string[],
-        thought: string,
-      }>('getAuthoredStyles', {
-        description: 'Call this function to get the styles as specified by the page author.',
-        parameters: {
-          type: Host.AidaClient.ParametersTypes.OBJECT,
-          description: '',
-          nullable: false,
-          properties: {
-            thought: {
+    this.declareFunction<{
+      elements: string[],
+      styleProperties: string[],
+      explanation: string,
+    }>('getStyles', {
+      description:
+          `Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.
+
+**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.
+**CRITICAL** Always provide the explanation argument to explain what and why you query.`,
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          explanation: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'Explain why you want to get styles',
+            nullable: false,
+          },
+          elements: {
+            type: Host.AidaClient.ParametersTypes.ARRAY,
+            description: 'A list of element uids to get data for',
+            items: {type: Host.AidaClient.ParametersTypes.STRING, description: `An element uid.`},
+            nullable: false,
+          },
+          styleProperties: {
+            type: Host.AidaClient.ParametersTypes.ARRAY,
+            description: 'One or more CSS style property names to fetch.',
+            nullable: false,
+            items: {
               type: Host.AidaClient.ParametersTypes.STRING,
-              description: 'Explain why you want to get computed styles',
-            },
-            relations: {
-              type: Host.AidaClient.ParametersTypes.ARRAY,
-              description:
-                  'A list of relations describing which elements to query. Possible values: \'currentElement\', \'parentElement\'',
-              items: {
-                type: Host.AidaClient.ParametersTypes.STRING,
-                description: 'Which element to query. Either \'currentElement\' or \'parentElement\'',
-              }
-            },
-            properties: {
-              type: Host.AidaClient.ParametersTypes.ARRAY,
-              description: 'One or more style property names to fetch',
-              nullable: false,
-              items: {
-                type: Host.AidaClient.ParametersTypes.STRING,
-                description: 'A computed style property name to retrieve. For example, \'background-color\'.'
-              }
-            },
-          }
-        },
-        displayInfoFromArgs: params => {
-          return {
-            title: 'Reading authored styles',
-            thought: params.thought,
-            action: `getAuthoredStyles(${JSON.stringify(params.relations)}, ${JSON.stringify(params.properties)})`,
-          };
-        },
-        handler: async (
-            params,
-            options,
-            ) => {
-          return await this.getAuthoredStyles(params.relations, params.properties, options);
-        },
-      });
-    }
+              description: 'A CSS style property name to retrieve. For example, \'background-color\'.'
+            }
+          },
+        }
+      },
+      displayInfoFromArgs: params => {
+        return {
+          title: 'Reading computed and source styles',
+          thought: params.explanation,
+          action: `getStyles(${JSON.stringify(params.elements)}, ${JSON.stringify(params.styleProperties)})`,
+        };
+      },
+      handler: async (
+          params,
+          options,
+          ) => {
+        return await this.getStyles(params.elements, params.styleProperties, options);
+      },
+    });
 
     this.declareFunction<{
       title: string,
@@ -413,28 +360,10 @@ Call this function to gather additional information or modify the page state. Ca
 
 * To return data, define a top-level \`data\` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to \`data\`.
 * If you modify styles on an element, ALWAYS call the pre-defined global \`async setElementStyles(el: Element, styles: object)\` function. This function is an internal mechanism for you and should never be presented as a command/advice to the user.
-* Use \`window.getComputedStyle\` to gather **computed** styles and make sure that you take the distinction between authored styles and computed styles into account.
 * **CRITICAL** Only get styles that might be relevant to the user request.
-* **CRITICAL** Call \`window.getComputedStyle\` only once per element and store results into a local variable. Never try to return all the styles of the element in \`data\`.
 * **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.
 * **CRITICAL** Consider that \`data\` variable from the previous function calls are not available in a new function call.
 
-For example, the code to return basic styles:
-
-\`\`\`
-const styles = window.getComputedStyle($0);
-const data = {
-    display: styles['display'],
-    visibility: styles['visibility'],
-    position: styles['position'],
-    left: styles['right'],
-    top: styles['top'],
-    width: styles['width'],
-    height: styles['height'],
-    zIndex: styles['z-index']
-};
-\`\`\`
-
 For example, the code to change element styles:
 
 \`\`\`
@@ -443,59 +372,10 @@ await setElementStyles($0, {
 });
 \`\`\`
 
-For example, the code to get current and parent styles at once:
-
-\`\`\`
-const styles = window.getComputedStyle($0);
-const parentStyles = window.getComputedStyle($0.parentElement);
-const data = {
-    currentElementStyles: {
-      display: styles['display'],
-      visibility: styles['visibility'],
-      position: styles['position'],
-      left: styles['right'],
-      top: styles['top'],
-      width: styles['width'],
-      height: styles['height'],
-      zIndex: styles['z-index'],
-    },
-    parentElementStyles: {
-      display: parentStyles['display'],
-      visibility: parentStyles['visibility'],
-      position: parentStyles['position'],
-      left: parentStyles['right'],
-      top: parentStyles['top'],
-      width: parentStyles['width'],
-      height: parentStyles['height'],
-      zIndex: parentStyles['z-index'],
-    },
-};
-\`\`\`
-
-For example, the code to get check siblings and overlapping elements:
+For example, the code to get overlapping elements:
 
 \`\`\`
-const computedStyles = window.getComputedStyle($0);
-const parentComputedStyles = window.getComputedStyle($0.parentElement);
 const data = {
-  numberOfChildren: $0.children.length,
-  numberOfSiblings: $0.parentElement.children.length,
-  hasPreviousSibling: !!$0.previousElementSibling,
-  hasNextSibling: !!$0.nextElementSibling,
-  elementStyles: {
-    display: computedStyles['display'],
-    visibility: computedStyles['visibility'],
-    position: computedStyles['position'],
-    clipPath: computedStyles['clip-path'],
-    zIndex: computedStyles['z-index']
-  },
-  parentStyles: {
-    display: parentComputedStyles['display'],
-    visibility: parentComputedStyles['visibility'],
-    position: parentComputedStyles['position'],
-    clipPath: parentComputedStyles['clip-path'],
-    zIndex: parentComputedStyles['z-index']
-  },
   overlappingElements: Array.from(document.querySelectorAll('*'))
     .filter(el => {
       const rect = el.getBoundingClientRect();
@@ -611,7 +491,8 @@ const data = {
   }
 
   static async describeElement(element: SDK.DOMModel.DOMNode): Promise<string> {
-    let output = `* Its selector is \`${element.simpleSelector()}\``;
+    let output = `* Element's uid is ${element.backendNodeId()}.
+* Its selector is \`${element.simpleSelector()}\``;
     const childNodes = await element.getChildNodesPromise();
     if (childNodes) {
       const textChildNodes = childNodes.filter(childNode => childNode.nodeType() === Node.TEXT_NODE);
@@ -625,7 +506,7 @@ const data = {
           break;
         default:
           output += `\n* It has ${elementChildNodes.length} child element nodes: ${
-              elementChildNodes.map(node => `\`${node.simpleSelector()}\``).join(', ')}`;
+              elementChildNodes.map(node => `\`${node.simpleSelector()}\` (uid=${node.backendNodeId()})`).join(', ')}`;
       }
 
       switch (textChildNodes.length) {
@@ -641,14 +522,16 @@ const data = {
     }
 
     if (element.nextSibling) {
-      const elementOrNodeElementNodeText =
-          element.nextSibling.nodeType() === Node.ELEMENT_NODE ? 'an element' : 'a non element';
+      const elementOrNodeElementNodeText = element.nextSibling.nodeType() === Node.ELEMENT_NODE ?
+          `an element (uid=${element.nextSibling.backendNodeId()})` :
+          'a non element';
       output += `\n* It has a next sibling and it is ${elementOrNodeElementNodeText} node`;
     }
 
     if (element.previousSibling) {
-      const elementOrNodeElementNodeText =
-          element.previousSibling.nodeType() === Node.ELEMENT_NODE ? 'an element' : 'a non element';
+      const elementOrNodeElementNodeText = element.previousSibling.nodeType() === Node.ELEMENT_NODE ?
+          `an element (uid=${element.previousSibling.backendNodeId()})` :
+          'a non element';
       output += `\n* It has a previous sibling and it is ${elementOrNodeElementNodeText} node`;
     }
 
@@ -659,7 +542,7 @@ const data = {
     const parentNode = element.parentNode;
     if (parentNode) {
       const parentChildrenNodes = await parentNode.getChildNodesPromise();
-      output += `\n* Its parent's selector is \`${parentNode.simpleSelector()}\``;
+      output += `\n* Its parent's selector is \`${parentNode.simpleSelector()}\` (uid=${parentNode.backendNodeId()})`;
       const elementOrNodeElementNodeText = parentNode.nodeType() === Node.ELEMENT_NODE ? 'an element' : 'a non element';
       output += `\n* Its parent is ${elementOrNodeElementNodeText} node`;
       if (parentNode.isShadowRoot()) {
@@ -676,7 +559,8 @@ const data = {
             break;
           default:
             output += `\n* Its parent has ${childElementNodes.length} child element nodes: ${
-                childElementNodes.map(node => `\`${node.simpleSelector()}\``).join(', ')}`;
+                childElementNodes.map(node => `\`${node.simpleSelector()}\` (uid=${node.backendNodeId()})`)
+                    .join(', ')}`;
             break;
         }
 
@@ -702,58 +586,35 @@ const data = {
     return this.context?.getItem() ?? null;
   }
 
-  async getComputedStyles(relations: Relation[], properties: string[], _options?: {
+  async getStyles(elements: string[], properties: string[], _options?: {
     signal?: AbortSignal,
     approved?: boolean,
   }): Promise<FunctionCallHandlerResult<unknown>> {
-    const result: Record<string, Record<string, string|undefined>|undefined> = {};
-    for (const relation of relations) {
-      result[relation] = {};
-      debugLog(`Action to execute: ${relation}`);
-      let selectedNode = this.#getSelectedNode();
+    const result:
+        Record<string, {computed: Record<string, string|undefined>, authored: Record<string, string|undefined>}> = {};
+    for (const uid of elements) {
+      result[uid] = {computed: {}, authored: {}};
+      debugLog(`Action to execute: uid=${uid}`);
+      const selectedNode = this.#getSelectedNode();
       if (!selectedNode) {
         return {error: 'Error: Could not find the currently selected element.'};
       }
-      if (relation === 'parentElement') {
-        selectedNode = selectedNode.parentNode;
-      }
-      if (!selectedNode) {
-        return {error: 'Error: Could not find the parent element.'};
+      const node = new SDK.DOMModel.DeferredDOMNode(
+          selectedNode.domModel().target(), Number(uid) as unknown as Protocol.DOM.BackendNodeId);
+      const resolved = await node.resolvePromise();
+      if (!resolved) {
+        return {error: 'Error: Could not find the element with uid=' + uid};
       }
-      const styles = await selectedNode.domModel().cssModel().getComputedStyle(selectedNode.id);
+      const styles = await resolved.domModel().cssModel().getComputedStyle(resolved.id);
       if (!styles) {
         return {error: 'Error: Could not get computed styles.'};
       }
-      for (const prop of properties) {
-        result[relation][prop] = styles.get(prop);
-      }
-    }
-    return {
-      result: JSON.stringify(result, null, 2),
-    };
-  }
-
-  async getAuthoredStyles(relations: Relation[], properties: string[], _options?: {
-    signal?: AbortSignal,
-    approved?: boolean,
-  }): Promise<FunctionCallHandlerResult<unknown>> {
-    const result: Record<string, Record<string, string|undefined>|undefined> = {};
-    for (const relation of relations) {
-      result[relation] = {};
-      debugLog(`Action to execute: ${relation}`);
-      let selectedNode = this.#getSelectedNode();
-      if (!selectedNode) {
-        return {error: 'Error: Could not find the currently selected element.'};
-      }
-      if (relation === 'parentElement') {
-        selectedNode = selectedNode.parentNode;
-      }
-      if (!selectedNode) {
-        return {error: 'Error: Could not find the parent element.'};
-      }
-      const matchedStyles = await selectedNode.domModel().cssModel().getMatchedStyles(selectedNode.id);
+      const matchedStyles = await resolved.domModel().cssModel().getMatchedStyles(resolved.id);
       if (!matchedStyles) {
-        return {error: 'Error: Could not get computed styles.'};
+        return {error: 'Error: Could not get authored styles.'};
+      }
+      for (const prop of properties) {
+        result[uid].computed[prop] = styles.get(prop);
       }
       for (const style of matchedStyles.nodeStyles()) {
         for (const property of style.allProperties()) {
@@ -762,7 +623,7 @@ const data = {
           }
           const state = matchedStyles.propertyState(property);
           if (state === SDK.CSSMatchedStyles.PropertyState.ACTIVE) {
-            result[relation][property.name] = property.value;
+            result[uid].authored[property.name] = property.value;
           }
         }
       }

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

@@ -731,6 +731,29 @@ Available insights:
     example question: Which third parties are having the largest impact on my page performance?
 === end content
 
+Title: PerformanceTraceFormatter formatTraceSummary includes INP insight when there is no navigation
+Content:
+URL: https://b2607f8b04800100000289cb1c0a82ba72253000000000000000001.proxy.googlers.com/long-interaction/index.html?x=35
+Bounds: {min: 337943614456, max: 337947260898}
+CPU throttling: none
+Network throttling: none
+Metrics (lab / observed):
+  - INP: 139 ms, event: (eventKey: s-3347, ts: 337944870984)
+  - CLS: 0.00
+Metrics (field / real users): n/a – no data for this page in CrUX
+Available insights:
+  - insight name: INPBreakdown
+    description: Start investigating with the longest subpart. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.
+    relevant trace bounds: {min: 337944870984, max: 337945010222}
+    example question: Suggest fixes for my longest interaction
+    example question: Why is a large INP score problematic?
+    example question: What's the biggest contributor to my longest interaction?
+  - insight name: ThirdParties
+    description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
+    relevant trace bounds: {min: 337944792445, max: 337944809570}
+    example question: Which third parties are having the largest impact on my page performance?
+=== end content
+
 Title: PerformanceTraceFormatter formatNetworkRequests formats network requests that have redirects
 Content:
 ## Network request: http://localhost:3000/redirect3

package/front_end/models/ai_assistance/performance/AIContext.ts

@@ -16,11 +16,26 @@ interface AgentFocusData {
   insight: Trace.Insights.Types.InsightModel|null;
 }
 
+/**
+ * Gets the first, most relevant InsightSet to use, following the logic of:
+ * 1. If there is only one InsightSet, use that.
+ * 2. If there are more, prefer the first we find that has a navigation associated with it.
+ * 3. If none with a navigation are found, fallback to the first one.
+ * 4. Otherwise, return null.
+ *
+ * TODO(cjamcl): we should just give the agent the entire insight set, and give
+ * summary detail about all of them + the ability to query each.
+ */
 function getFirstInsightSet(insights: Trace.Insights.Types.TraceInsightSets): Trace.Insights.Types.InsightSet|null {
-  // Currently only support a single insight set. Pick the first one with a navigation.
-  // TODO(cjamcl): we should just give the agent the entire insight set, and give
-  // summary detail about all of them + the ability to query each.
-  return [...insights.values()].filter(insightSet => insightSet.navigation).at(0) ?? null;
+  const insightSets = Array.from(insights.values());
+  if (insightSets.length === 0) {
+    return null;
+  }
+  if (insightSets.length === 1) {
+    return insightSets[0];
+  }
+
+  return insightSets.filter(set => set.navigation).at(0) ?? insightSets.at(0) ?? null;
 }
 
 export class AgentFocus {

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -12,8 +12,10 @@ import {debugLog} from './debug.js';
 export const DELAY_BEFORE_SHOWING_RESPONSE_MS = 500;
 export const AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS = 200;
 
-// TODO(b/404796739): Remove these definitions of AgentOptions and RequestOptions and
-// use the existing ones which are used for AI assistance panel agents.
+/**
+ * TODO(b/404796739): Remove these definitions of AgentOptions and RequestOptions and
+ * use the existing ones which are used for AI assistance panel agents.
+ **/
 interface AgentOptions {
   aidaClient: Host.AidaClient.AidaClient;
   serverSideLoggingEnabled?: boolean;

package/front_end/models/autofill_manager/AutofillManager.ts

@@ -102,8 +102,10 @@ export class AutofillManager extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 }
 
-// A Match describes how the value of a filled field corresponds to a substring
-// of address from startIndex to endIndex.
+/**
+ * A Match describes how the value of a filled field corresponds to a substring
+ * of address from startIndex to endIndex.
+ **/
 export interface Match {
   startIndex: number;
   endIndex: number;

package/front_end/models/cpu_profile/CPUProfileDataModel.ts

@@ -552,7 +552,7 @@ export class CPUProfileDataModel extends ProfileTreeModel {
   }
 }
 
-// Format used by profiles coming from traces.
+/** Format used by profiles coming from traces. **/
 export type ExtendedProfileNode = Protocol.Profiler.ProfileNode&{parent?: number};
 export type ExtendedProfile = Protocol.Profiler.Profile&{
   nodes: Protocol.Profiler.ProfileNode[] | ExtendedProfileNode[],

package/front_end/models/crux-manager/CrUXManager.ts

@@ -103,7 +103,7 @@ export interface ConfigSetting {
 
 let cruxManagerInstance: CrUXManager;
 
-// TODO: Potentially support `TABLET`. Tablet field data will always be `null` until then.
+/** TODO: Potentially support `TABLET`. Tablet field data will always be `null` until then. **/
 export const DEVICE_SCOPE_LIST: DeviceScope[] = ['ALL', 'DESKTOP', 'PHONE'];
 
 const pageScopeList: PageScope[] = ['origin', 'url'];

package/front_end/models/extensions/HostUrlPattern.ts

@@ -82,7 +82,7 @@ function parseHostAndPort(pattern: string, scheme: string): {host: string, port:
     return undefined;
   }
 
-  // The URL constructor strips off the default port for the scheme, even if it was given explicitely
+  // The URL constructor strips off the default port for the scheme, even if it was given explicitly
   const httpPort = defaultPort('http');
   if (!httpPort) {
     return undefined;
@@ -100,8 +100,15 @@ function parseHostAndPort(pattern: string, scheme: string): {host: string, port:
   };
 }
 
-// HostUrlPatterns define permissions in for extensions in the form of `*://*.example.com:*/`. Since these aren't valid
-// URLs Common.ParsedURL can't handle them and we need a separate implementation.
+/**
+ * HostUrlPatterns define permissions in for extensions in the form of "<protocol>://<sub-domain>.example.com:<port>/".
+ * Where the respected parts can be patters like "*".
+ * Since these aren't valid {@link Common.ParsedURL.ParsedURL}
+ * can't handle them and we need a separate implementation.
+ *
+ * More information in the Chromium code base -
+ * {@link https://crsrc.org/c/chrome/browser/extensions/extension_management_internal.h;l=137 | here}.
+ */
 export class HostUrlPattern {
   static parse(pattern: string): HostUrlPattern|undefined {
     if (pattern === '<all_urls>') {
@@ -122,8 +129,9 @@ export class HostUrlPattern {
     return new HostUrlPattern({scheme, host, port, matchesAll: false});
   }
 
-  private constructor(readonly pattern: {matchesAll: true}|
-                      {readonly scheme: string, readonly host: string, readonly port: string, matchesAll: false}) {
+  private constructor(readonly pattern: {
+    matchesAll: true,
+  }|{readonly scheme: string, readonly host: string, readonly port: string, matchesAll: false}) {
   }
 
   get scheme(): string {

package/front_end/models/issues_manager/CookieDeprecationMetadataIssue.ts

@@ -18,7 +18,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/issues_manager/CookieDeprecationMetadataIssue.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// TODO(b/305738703): Move this issue into a warning on CookieIssue.
+/** TODO(b/305738703): Move this issue into a warning on CookieIssue. **/
 export class CookieDeprecationMetadataIssue extends Issue {
   readonly #issueDetails: Protocol.Audits.CookieDeprecationMetadataIssueDetails;
 

package/front_end/models/issues_manager/CookieIssue.ts

@@ -44,14 +44,14 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/issues_manager/CookieIssue.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-// The enum string values need to match the IssueExpanded enum values in UserMetrics.ts.
+/** The enum string values need to match the IssueExpanded enum values in UserMetrics.ts. **/
 export const enum CookieIssueSubCategory {
   GENERIC_COOKIE = 'GenericCookie',
   SAME_SITE_COOKIE = 'SameSiteCookie',
   THIRD_PARTY_PHASEOUT_COOKIE = 'ThirdPartyPhaseoutCookie',
 }
 
-// Enum to show cookie status from the security panel's third-party cookie report tool
+/** Enum to show cookie status from the security panel's third-party cookie report tool **/
 export const enum CookieStatus {
   BLOCKED = 0,
   ALLOWED = 1,

package/front_end/models/issues_manager/MarkdownIssueDescription.ts

@@ -129,7 +129,7 @@ export function substitutePlaceholders(markdown: string, substitutions?: Map<str
   return result;
 }
 
-// Ensure that all provided placeholders match the naming pattern.
+/** Ensure that all provided placeholders match the naming pattern. **/
 function validatePlaceholders(placeholders: Set<string>): void {
   const invalidPlaceholders = [...placeholders].filter(placeholder => !validPlaceholderNamePattern.test(placeholder));
   if (invalidPlaceholders.length > 0) {

package/front_end/models/issues_manager/SharedDictionaryIssue.ts

@@ -34,8 +34,10 @@ export const enum IssueCode {
   WRITE_ERROR_INSUFFICIENT_RESOURCES = 'SharedDictionaryIssue::WriteErrorInsufficientResources',
   WRITE_ERROR_INVALID_MATCH_FIELD = 'SharedDictionaryIssue::WriteErrorInvalidMatchField',
   WRITE_ERROR_INVALID_STRUCTURED_HEADER = 'SharedDictionaryIssue::WriteErrorInvalidStructuredHeader',
+  WRITE_ERROR_INVALID_TTL_FIELD = 'SharedDictionaryIssue::WriteErrorInvalidTTLField',
   WRITE_ERROR_NAVIGATION_REQUEST = 'SharedDictionaryIssue::WriteErrorNavigationRequest',
   WRITE_ERROR_NO_MATCH_FIELD = 'SharedDictionaryIssue::WriteErrorNoMatchField',
+  WRITE_ERROR_NON_INTEGER_TTL_FIELD = 'SharedDictionaryIssue::WriteErrorNonIntegerTTLField',
   WRITE_ERROR_NON_LIST_MATCH_DEST_FIELD = 'SharedDictionaryIssue::WriteErrorNonListMatchDestField',
   WRITE_ERROR_NON_SECURE_CONTEXT = 'SharedDictionaryIssue::WriteErrorNonSecureContext',
   WRITE_ERROR_NON_STRING_ID_FIELD = 'SharedDictionaryIssue::WriteErrorNonStringIdField',
@@ -73,10 +75,14 @@ function getIssueCode(details: Protocol.Audits.SharedDictionaryIssueDetails): Is
       return IssueCode.WRITE_ERROR_INVALID_MATCH_FIELD;
     case Protocol.Audits.SharedDictionaryError.WriteErrorInvalidStructuredHeader:
       return IssueCode.WRITE_ERROR_INVALID_STRUCTURED_HEADER;
+    case Protocol.Audits.SharedDictionaryError.WriteErrorInvalidTTLField:
+      return IssueCode.WRITE_ERROR_INVALID_TTL_FIELD;
     case Protocol.Audits.SharedDictionaryError.WriteErrorNavigationRequest:
       return IssueCode.WRITE_ERROR_NAVIGATION_REQUEST;
     case Protocol.Audits.SharedDictionaryError.WriteErrorNoMatchField:
       return IssueCode.WRITE_ERROR_NO_MATCH_FIELD;
+    case Protocol.Audits.SharedDictionaryError.WriteErrorNonIntegerTTLField:
+      return IssueCode.WRITE_ERROR_NON_INTEGER_TTL_FIELD;
     case Protocol.Audits.SharedDictionaryError.WriteErrorNonListMatchDestField:
       return IssueCode.WRITE_ERROR_NON_LIST_MATCH_DEST_FIELD;
     case Protocol.Audits.SharedDictionaryError.WriteErrorNonSecureContext:
@@ -243,6 +249,13 @@ const issueDescriptions = new Map<Protocol.Audits.SharedDictionaryError, LazyMar
       links: specLinks,
     },
   ],
+  [
+    Protocol.Audits.SharedDictionaryError.WriteErrorInvalidTTLField,
+    {
+      file: 'sharedDictionaryWriteErrorInvalidTTLField.md',
+      links: specLinks,
+    },
+  ],
   [
     Protocol.Audits.SharedDictionaryError.WriteErrorNavigationRequest,
     {
@@ -257,6 +270,13 @@ const issueDescriptions = new Map<Protocol.Audits.SharedDictionaryError, LazyMar
       links: specLinks,
     },
   ],
+  [
+    Protocol.Audits.SharedDictionaryError.WriteErrorNonIntegerTTLField,
+    {
+      file: 'sharedDictionaryWriteErrorNonIntegerTTLField.md',
+      links: specLinks,
+    },
+  ],
   [
     Protocol.Audits.SharedDictionaryError.WriteErrorNonListMatchDestField,
     {

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

@@ -0,0 +1 @@
+# The `ttl` field of the `Use-As-Dictionary` HTTP response header must be a positive integer