chrome-devtools-frontend 1.0.951410 → 1.0.952713

package/front_end/entrypoints/node_app/NodeConnectionsPanel.ts

@@ -38,8 +38,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let nodeConnectionsPanelInstance: NodeConnectionsPanel;
 
 export class NodeConnectionsPanel extends UI.Panel.Panel {
-  private config!: Adb.Config;
-  private readonly networkDiscoveryView: NodeConnectionsView;
+  #config!: Adb.Config;
+  readonly #networkDiscoveryView: NodeConnectionsView;
   private constructor() {
     super('node-connection');
 
@@ -51,7 +51,7 @@ export class NodeConnectionsPanel extends UI.Panel.Panel {
     image.src = 'https://nodejs.org/static/images/logos/nodejs-new-pantone-black.svg';
 
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this.devicesDiscoveryConfigChanged, this);
+        Host.InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this.#devicesDiscoveryConfigChanged, this);
 
     this.contentElement.tabIndex = 0;
     this.setDefaultFocusedElement(this.contentElement);
@@ -60,11 +60,11 @@ export class NodeConnectionsPanel extends UI.Panel.Panel {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.setDevicesUpdatesEnabled(false);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.setDevicesUpdatesEnabled(true);
 
-    this.networkDiscoveryView = new NodeConnectionsView(config => {
-      this.config.networkDiscoveryConfig = config;
-      Host.InspectorFrontendHost.InspectorFrontendHostInstance.setDevicesDiscoveryConfig(this.config);
+    this.#networkDiscoveryView = new NodeConnectionsView(config => {
+      this.#config.networkDiscoveryConfig = config;
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.setDevicesDiscoveryConfig(this.#config);
     });
-    this.networkDiscoveryView.show(container);
+    this.#networkDiscoveryView.show(container);
   }
 
   static instance(opts: {
@@ -78,9 +78,9 @@ export class NodeConnectionsPanel extends UI.Panel.Panel {
     return nodeConnectionsPanelInstance;
   }
 
-  private devicesDiscoveryConfigChanged({data: config}: Common.EventTarget.EventTargetEvent<Adb.Config>): void {
-    this.config = config;
-    this.networkDiscoveryView.discoveryConfigChanged(this.config.networkDiscoveryConfig);
+  #devicesDiscoveryConfigChanged({data: config}: Common.EventTarget.EventTargetEvent<Adb.Config>): void {
+    this.#config = config;
+    this.#networkDiscoveryView.discoveryConfigChanged(this.#config.networkDiscoveryConfig);
   }
   wasShown(): void {
     super.wasShown();
@@ -89,15 +89,15 @@ export class NodeConnectionsPanel extends UI.Panel.Panel {
 }
 
 export class NodeConnectionsView extends UI.Widget.VBox implements UI.ListWidget.Delegate<Adb.PortForwardingRule> {
-  private readonly callback: (arg0: Adb.NetworkDiscoveryConfig) => void;
-  private readonly list: UI.ListWidget.ListWidget<Adb.PortForwardingRule>;
-  private editor: UI.ListWidget.Editor<Adb.PortForwardingRule>|null;
-  private networkDiscoveryConfig: {
+  readonly #callback: (arg0: Adb.NetworkDiscoveryConfig) => void;
+  readonly #list: UI.ListWidget.ListWidget<Adb.PortForwardingRule>;
+  #editor: UI.ListWidget.Editor<Adb.PortForwardingRule>|null;
+  #networkDiscoveryConfig: {
     address: string,
   }[];
   constructor(callback: (arg0: Adb.NetworkDiscoveryConfig) => void) {
     super();
-    this.callback = callback;
+    this.#callback = callback;
     this.element.classList.add('network-discovery-view');
 
     const networkDiscoveryFooter = this.element.createChild('div', 'network-discovery-footer');
@@ -106,42 +106,42 @@ export class NodeConnectionsView extends UI.Widget.VBox implements UI.ListWidget
     networkDiscoveryFooter.appendChild(
         i18n.i18n.getFormatLocalizedString(str_, UIStrings.specifyNetworkEndpointAnd, {PH1: documentationLink}));
 
-    this.list = new UI.ListWidget.ListWidget(this);
+    this.#list = new UI.ListWidget.ListWidget(this);
 
-    this.list.element.classList.add('network-discovery-list');
+    this.#list.element.classList.add('network-discovery-list');
     const placeholder = document.createElement('div');
     placeholder.classList.add('network-discovery-list-empty');
     placeholder.textContent = i18nString(UIStrings.noConnectionsSpecified);
-    this.list.setEmptyPlaceholder(placeholder);
-    this.list.show(this.element);
-    this.editor = null;
+    this.#list.setEmptyPlaceholder(placeholder);
+    this.#list.show(this.element);
+    this.#editor = null;
 
     const addButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.addConnection), this.addNetworkTargetButtonClicked.bind(this), 'add-network-target-button',
-        true /* primary */);
+        i18nString(UIStrings.addConnection), this.#addNetworkTargetButtonClicked.bind(this),
+        'add-network-target-button', true /* primary */);
     this.element.appendChild(addButton);
 
-    this.networkDiscoveryConfig = [];
+    this.#networkDiscoveryConfig = [];
 
     this.element.classList.add('node-frontend');
   }
 
-  private update(): void {
-    const config = this.networkDiscoveryConfig.map(item => item.address);
-    this.callback.call(null, config);
+  #update(): void {
+    const config = this.#networkDiscoveryConfig.map(item => item.address);
+    this.#callback.call(null, config);
   }
 
-  private addNetworkTargetButtonClicked(): void {
-    this.list.addNewItem(this.networkDiscoveryConfig.length, {address: '', port: ''});
+  #addNetworkTargetButtonClicked(): void {
+    this.#list.addNewItem(this.#networkDiscoveryConfig.length, {address: '', port: ''});
   }
 
   discoveryConfigChanged(networkDiscoveryConfig: Adb.NetworkDiscoveryConfig): void {
-    this.networkDiscoveryConfig = [];
-    this.list.clear();
+    this.#networkDiscoveryConfig = [];
+    this.#list.clear();
     for (const address of networkDiscoveryConfig) {
       const item = {address: address, port: ''};
-      this.networkDiscoveryConfig.push(item);
-      this.list.appendItem(item, true);
+      this.#networkDiscoveryConfig.push(item);
+      this.#list.appendItem(item, true);
     }
   }
 
@@ -153,32 +153,32 @@ export class NodeConnectionsView extends UI.Widget.VBox implements UI.ListWidget
   }
 
   removeItemRequested(rule: Adb.PortForwardingRule, index: number): void {
-    this.networkDiscoveryConfig.splice(index, 1);
-    this.list.removeItem(index);
-    this.update();
+    this.#networkDiscoveryConfig.splice(index, 1);
+    this.#list.removeItem(index);
+    this.#update();
   }
 
   commitEdit(rule: Adb.PortForwardingRule, editor: UI.ListWidget.Editor<Adb.PortForwardingRule>, isNew: boolean): void {
     rule.address = editor.control('address').value.trim();
     if (isNew) {
-      this.networkDiscoveryConfig.push(rule);
+      this.#networkDiscoveryConfig.push(rule);
     }
-    this.update();
+    this.#update();
   }
 
   beginEdit(rule: Adb.PortForwardingRule): UI.ListWidget.Editor<Adb.PortForwardingRule> {
-    const editor = this.createEditor();
+    const editor = this.#createEditor();
     editor.control('address').value = rule.address;
     return editor;
   }
 
-  private createEditor(): UI.ListWidget.Editor<Adb.PortForwardingRule> {
-    if (this.editor) {
-      return this.editor;
+  #createEditor(): UI.ListWidget.Editor<Adb.PortForwardingRule> {
+    if (this.#editor) {
+      return this.#editor;
     }
 
     const editor = new UI.ListWidget.Editor<Adb.PortForwardingRule>();
-    this.editor = editor;
+    this.#editor = editor;
     const content = editor.contentElement();
     const fields = content.createChild('div', 'network-discovery-edit-row');
     const input =
@@ -204,6 +204,6 @@ export class NodeConnectionsView extends UI.Widget.VBox implements UI.ListWidget
   }
   wasShown(): void {
     super.wasShown();
-    this.list.registerCSSFiles([nodeConnectionsPanelStyles]);
+    this.#list.registerCSSFiles([nodeConnectionsPanelStyles]);
   }
 }

package/front_end/entrypoints/node_app/NodeMain.ts

@@ -46,29 +46,29 @@ export class NodeMainImpl implements Common.Runnable.Runnable {
 }
 
 export class NodeChildTargetManager extends SDK.SDKModel.SDKModel<void> implements ProtocolProxyApi.TargetDispatcher {
-  private readonly targetManager: SDK.TargetManager.TargetManager;
-  private readonly parentTarget: SDK.Target.Target;
-  private readonly targetAgent: ProtocolProxyApi.TargetApi;
-  private readonly childTargets: Map<Protocol.Target.SessionID, SDK.Target.Target>;
-  private readonly childConnections: Map<string, NodeConnection>;
+  readonly #targetManager: SDK.TargetManager.TargetManager;
+  readonly #parentTarget: SDK.Target.Target;
+  readonly #targetAgent: ProtocolProxyApi.TargetApi;
+  readonly #childTargets: Map<Protocol.Target.SessionID, SDK.Target.Target>;
+  readonly #childConnections: Map<string, NodeConnection>;
   constructor(parentTarget: SDK.Target.Target) {
     super(parentTarget);
-    this.targetManager = parentTarget.targetManager();
-    this.parentTarget = parentTarget;
-    this.targetAgent = parentTarget.targetAgent();
-    this.childTargets = new Map();
-    this.childConnections = new Map();
+    this.#targetManager = parentTarget.targetManager();
+    this.#parentTarget = parentTarget;
+    this.#targetAgent = parentTarget.targetAgent();
+    this.#childTargets = new Map();
+    this.#childConnections = new Map();
 
     parentTarget.registerTargetDispatcher(this);
-    this.targetAgent.invoke_setDiscoverTargets({discover: true});
+    this.#targetAgent.invoke_setDiscoverTargets({discover: true});
 
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this.devicesDiscoveryConfigChanged, this);
+        Host.InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this.#devicesDiscoveryConfigChanged, this);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.setDevicesUpdatesEnabled(false);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.setDevicesUpdatesEnabled(true);
   }
 
-  private devicesDiscoveryConfigChanged({data: config}: Common.EventTarget.EventTargetEvent<Adb.Config>): void {
+  #devicesDiscoveryConfigChanged({data: config}: Common.EventTarget.EventTargetEvent<Adb.Config>): void {
     const locations = [];
     for (const address of config.networkDiscoveryConfig) {
       const parts = address.split(':');
@@ -77,21 +77,21 @@ export class NodeChildTargetManager extends SDK.SDKModel.SDKModel<void> implemen
         locations.push({host: parts[0], port: port});
       }
     }
-    this.targetAgent.invoke_setRemoteLocations({locations});
+    this.#targetAgent.invoke_setRemoteLocations({locations});
   }
 
   dispose(): void {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this.devicesDiscoveryConfigChanged, this);
+        Host.InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this.#devicesDiscoveryConfigChanged, this);
 
-    for (const sessionId of this.childTargets.keys()) {
+    for (const sessionId of this.#childTargets.keys()) {
       this.detachedFromTarget({sessionId});
     }
   }
 
   targetCreated({targetInfo}: Protocol.Target.TargetCreatedEvent): void {
     if (targetInfo.type === 'node' && !targetInfo.attached) {
-      this.targetAgent.invoke_attachToTarget({targetId: targetInfo.targetId, flatten: false});
+      this.#targetAgent.invoke_attachToTarget({targetId: targetInfo.targetId, flatten: false});
     }
   }
 
@@ -103,25 +103,25 @@ export class NodeChildTargetManager extends SDK.SDKModel.SDKModel<void> implemen
 
   attachedToTarget({sessionId, targetInfo}: Protocol.Target.AttachedToTargetEvent): void {
     const name = i18nString(UIStrings.nodejsS, {PH1: targetInfo.url});
-    const connection = new NodeConnection(this.targetAgent, sessionId);
-    this.childConnections.set(sessionId, connection);
-    const target = this.targetManager.createTarget(
-        targetInfo.targetId, name, SDK.Target.Type.Node, this.parentTarget, undefined, undefined, connection);
-    this.childTargets.set(sessionId, target);
+    const connection = new NodeConnection(this.#targetAgent, sessionId);
+    this.#childConnections.set(sessionId, connection);
+    const target = this.#targetManager.createTarget(
+        targetInfo.targetId, name, SDK.Target.Type.Node, this.#parentTarget, undefined, undefined, connection);
+    this.#childTargets.set(sessionId, target);
     target.runtimeAgent().invoke_runIfWaitingForDebugger();
   }
 
   detachedFromTarget({sessionId}: Protocol.Target.DetachedFromTargetEvent): void {
-    const childTarget = this.childTargets.get(sessionId);
+    const childTarget = this.#childTargets.get(sessionId);
     if (childTarget) {
       childTarget.dispose('target terminated');
     }
-    this.childTargets.delete(sessionId);
-    this.childConnections.delete(sessionId);
+    this.#childTargets.delete(sessionId);
+    this.#childConnections.delete(sessionId);
   }
 
   receivedMessageFromTarget({sessionId, message}: Protocol.Target.ReceivedMessageFromTargetEvent): void {
-    const connection = this.childConnections.get(sessionId);
+    const connection = this.#childConnections.get(sessionId);
     const onMessage = connection ? connection.onMessage : null;
     if (onMessage) {
       onMessage.call(null, message);
@@ -133,15 +133,15 @@ export class NodeChildTargetManager extends SDK.SDKModel.SDKModel<void> implemen
 }
 
 export class NodeConnection implements ProtocolClient.InspectorBackend.Connection {
-  private readonly targetAgent: ProtocolProxyApi.TargetApi;
-  private readonly sessionId: Protocol.Target.SessionID;
+  readonly #targetAgent: ProtocolProxyApi.TargetApi;
+  readonly #sessionId: Protocol.Target.SessionID;
   onMessage: ((arg0: (Object|string)) => void)|null;
-  private onDisconnect: ((arg0: string) => void)|null;
+  #onDisconnect: ((arg0: string) => void)|null;
   constructor(targetAgent: ProtocolProxyApi.TargetApi, sessionId: Protocol.Target.SessionID) {
-    this.targetAgent = targetAgent;
-    this.sessionId = sessionId;
+    this.#targetAgent = targetAgent;
+    this.#sessionId = sessionId;
     this.onMessage = null;
-    this.onDisconnect = null;
+    this.#onDisconnect = null;
   }
 
   setOnMessage(onMessage: (arg0: (Object|string)) => void): void {
@@ -149,20 +149,20 @@ export class NodeConnection implements ProtocolClient.InspectorBackend.Connectio
   }
 
   setOnDisconnect(onDisconnect: (arg0: string) => void): void {
-    this.onDisconnect = onDisconnect;
+    this.#onDisconnect = onDisconnect;
   }
 
   sendRawMessage(message: string): void {
-    this.targetAgent.invoke_sendMessageToTarget({message, sessionId: this.sessionId});
+    this.#targetAgent.invoke_sendMessageToTarget({message, sessionId: this.#sessionId});
   }
 
   async disconnect(): Promise<void> {
-    if (this.onDisconnect) {
-      this.onDisconnect.call(null, 'force disconnect');
+    if (this.#onDisconnect) {
+      this.#onDisconnect.call(null, 'force disconnect');
     }
-    this.onDisconnect = null;
+    this.#onDisconnect = null;
     this.onMessage = null;
-    await this.targetAgent.invoke_detachFromTarget({sessionId: this.sessionId});
+    await this.#targetAgent.invoke_detachFromTarget({sessionId: this.#sessionId});
   }
 }
 

package/front_end/generated/InspectorBackendCommands.js

@@ -279,6 +279,9 @@ export function registerCommands(inspectorBackend) {
   });
   inspectorBackend.registerEnum(
       'Audits.GenericIssueErrorType', {CrossOriginPortalPostMessageError: 'CrossOriginPortalPostMessageError'});
+  inspectorBackend.registerEnum(
+      'Audits.ClientHintIssueReason',
+      {MetaTagAllowListInvalidOrigin: 'MetaTagAllowListInvalidOrigin', MetaTagModifiedHTML: 'MetaTagModifiedHTML'});
   inspectorBackend.registerEnum('Audits.InspectorIssueCode', {
     SameSiteCookieIssue: 'SameSiteCookieIssue',
     MixedContentIssue: 'MixedContentIssue',
@@ -294,7 +297,8 @@ export function registerCommands(inspectorBackend) {
     NavigatorUserAgentIssue: 'NavigatorUserAgentIssue',
     WasmCrossOriginModuleSharingIssue: 'WasmCrossOriginModuleSharingIssue',
     GenericIssue: 'GenericIssue',
-    DeprecationIssue: 'DeprecationIssue'
+    DeprecationIssue: 'DeprecationIssue',
+    ClientHintIssue: 'ClientHintIssue'
   });
   inspectorBackend.registerEvent('Audits.issueAdded', ['issue']);
   inspectorBackend.registerEnum('Audits.GetEncodedResponseRequestEncoding', {Webp: 'webp', Jpeg: 'jpeg', Png: 'png'});

package/front_end/generated/protocol.d.ts

@@ -1049,6 +1049,20 @@ declare namespace Protocol {
       message?: string;
     }
 
+    export const enum ClientHintIssueReason {
+      MetaTagAllowListInvalidOrigin = 'MetaTagAllowListInvalidOrigin',
+      MetaTagModifiedHTML = 'MetaTagModifiedHTML',
+    }
+
+    /**
+     * This issue tracks client hints related issues. It's used to deprecate old
+     * features, encourage the use of new ones, and provide general guidance.
+     */
+    export interface ClientHintIssueDetails {
+      sourceCodeLocation: SourceCodeLocation;
+      clientHintIssueReason: ClientHintIssueReason;
+    }
+
     /**
      * A unique identifier for the type of issue. Each type may use one of the
      * optional fields in InspectorIssueDetails to convey more specific
@@ -1070,6 +1084,7 @@ declare namespace Protocol {
       WasmCrossOriginModuleSharingIssue = 'WasmCrossOriginModuleSharingIssue',
       GenericIssue = 'GenericIssue',
       DeprecationIssue = 'DeprecationIssue',
+      ClientHintIssue = 'ClientHintIssue',
     }
 
     /**
@@ -1093,6 +1108,7 @@ declare namespace Protocol {
       wasmCrossOriginModuleSharingIssue?: WasmCrossOriginModuleSharingIssueDetails;
       genericIssueDetails?: GenericIssueDetails;
       deprecationIssueDetails?: DeprecationIssueDetails;
+      clientHintIssueDetails?: ClientHintIssueDetails;
     }
 
     /**

package/front_end/legacy/legacy-defs.d.ts

@@ -2,14 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-interface Window {
-  UI: {themeSupport: unknown}
-}
-
-interface RegExp {
-  __fromRegExpQuery: boolean;
-}
-
 declare class AnchorBox {
   x: number;
   y: number;
@@ -123,19 +115,6 @@ declare function isEnterOrSpaceKey(event: Event): boolean;
 declare function isEscKey(event: Event): boolean;
 declare function onInvokeElement(element: Element, callback: (event: Event) => void): void;
 
-interface ServicePort {
-  setHandlers(messageHandler: (arg: string) => void, closeHandler: () => void): void;
-
-  send(message: string): Promise<boolean>;
-
-  close(): Promise<boolean>;
-}
-
-declare class diff_match_patch {
-  diff_main(text1: string, text2: string): Array<{0: number, 1: string}>;
-  diff_cleanupSemantic(diff: Array<{0: number, 1: string}>): void;
-}
-
 // The following types exist in Chrome but were removed for various reasons
 // from the TypeScript DOM library.
 //

package/front_end/models/bindings/CSSWorkspaceBinding.ts

@@ -152,9 +152,6 @@ export class CSSWorkspaceBinding implements SDK.TargetManager.SDKModelObserver<S
   }
 }
 
-/**
- * @interface
- */
 export interface SourceMapping {
   rawLocationToUILocation(rawLocation: SDK.CSSModel.CSSLocation): Workspace.UISourceCode.UILocation|null;
 

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -561,9 +561,6 @@ export interface RawLocationRange {
   end: SDK.DebuggerModel.Location;
 }
 
-/**
- * @interface
- */
 export interface DebuggerSourceMapping {
   rawLocationToUILocation(rawLocation: SDK.DebuggerModel.Location): Workspace.UISourceCode.UILocation|null;
 

package/front_end/models/bindings/FileUtils.ts

@@ -31,9 +31,6 @@
 import type * as Common from '../../core/common/common.js';
 import * as Workspace from '../workspace/workspace.js';
 
-/**
- * @interface
- */
 export interface ChunkedReader {
   fileSize(): number;
 

package/front_end/models/extensions/ExtensionAPI.ts

@@ -304,8 +304,9 @@ namespace APIImpl {
   // We cannot use the stronger `unknown` type in place of `any` in the following type definition. The type is used as
   // the right-hand side of `extends` in a few places, which doesn't narrow `unknown`. Without narrowing, overload
   // resolution and meaningful type inference of arguments break, for example.
+  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  export type Callable = (...args: any) => any;
+  export type Callable = (...args: any) => void;
 
   export interface EventSink<ListenerT extends Callable> extends PublicAPI.Chrome.DevTools.EventSink<ListenerT> {
     _type: string;

package/front_end/models/extensions/ExtensionTraceProvider.ts

@@ -42,9 +42,6 @@ export class ExtensionTraceProvider {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 let _lastSessionId = 0;
 
-/**
- * @interface
- */
 export interface TracingSession {
   complete(url: string, timeOffsetMicroseconds: number): void;
 }

package/front_end/models/heap_snapshot_model/HeapSnapshotModel.ts

@@ -280,7 +280,7 @@ export class SearchConfig {
     this.jumpBackward = jumpBackward;
   }
 
-  toSearchRegex(_global?: boolean): RegExp {
+  toSearchRegex(_global?: boolean): {regex: RegExp, fromQuery: boolean} {
     throw new Error('Unsupported operation on search config');
   }
 }

package/front_end/models/issues_manager/ClientHintIssue.ts

@@ -0,0 +1,95 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+
+import {Issue, IssueCategory, IssueKind} from './Issue.js';
+import type {MarkdownIssueDescription, LazyMarkdownIssueDescription} from './MarkdownIssueDescription.js';
+import {resolveLazyDescription} from './MarkdownIssueDescription.js';
+
+const UIStrings = {
+  /**
+  *@description Title for Client Hint specification url link
+  */
+  clientHintsInfrastructure: 'Client Hints Infrastructure',
+};
+const str_ = i18n.i18n.registerUIStrings('models/issues_manager/ClientHintIssue.ts', UIStrings);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+export class ClientHintIssue extends Issue {
+  private issueDetails: Protocol.Audits.ClientHintIssueDetails;
+
+  constructor(issueDetails: Protocol.Audits.ClientHintIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
+    super(
+        {
+          code: Protocol.Audits.InspectorIssueCode.ClientHintIssue,
+          umaCode: [Protocol.Audits.InspectorIssueCode.ClientHintIssue, issueDetails.clientHintIssueReason].join('::'),
+        },
+        issuesModel);
+    this.issueDetails = issueDetails;
+  }
+
+  getCategory(): IssueCategory {
+    return IssueCategory.Other;
+  }
+
+  details(): Protocol.Audits.ClientHintIssueDetails {
+    return this.issueDetails;
+  }
+
+  getDescription(): MarkdownIssueDescription|null {
+    const description = issueDescriptions.get(this.issueDetails.clientHintIssueReason);
+    if (!description) {
+      return null;
+    }
+    return resolveLazyDescription(description);
+  }
+
+  sources(): Iterable<Protocol.Audits.SourceCodeLocation> {
+    return [this.issueDetails.sourceCodeLocation];
+  }
+
+  primaryKey(): string {
+    return JSON.stringify(this.issueDetails);
+  }
+
+  getKind(): IssueKind {
+    return IssueKind.BreakingChange;
+  }
+
+  static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
+      ClientHintIssue[] {
+    const details = inspectorIssue.details.clientHintIssueDetails;
+    if (!details) {
+      console.warn('Client Hint issue without details received.');
+      return [];
+    }
+    return [new ClientHintIssue(details, issuesModel)];
+  }
+}
+
+const issueDescriptions: Map<Protocol.Audits.ClientHintIssueReason, LazyMarkdownIssueDescription> = new Map([
+  [
+    Protocol.Audits.ClientHintIssueReason.MetaTagAllowListInvalidOrigin,
+    {
+      file: 'clientHintMetaTagAllowListInvalidOrigin.md',
+      links: [{
+        link: 'https://wicg.github.io/client-hints-infrastructure/',
+        linkTitle: i18nLazyString(UIStrings.clientHintsInfrastructure),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.ClientHintIssueReason.MetaTagModifiedHTML,
+    {
+      file: 'clientHintMetaTagModifiedHTML.md',
+      links: [{
+        link: 'https://wicg.github.io/client-hints-infrastructure/',
+        linkTitle: i18nLazyString(UIStrings.clientHintsInfrastructure),
+      }],
+    },
+  ],
+]);

package/front_end/models/issues_manager/ContentSecurityPolicyIssue.ts

@@ -36,7 +36,7 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/ContentSecurityP
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 export class ContentSecurityPolicyIssue extends Issue {
-  private issueDetails: Protocol.Audits.ContentSecurityPolicyIssueDetails;
+  #issueDetails: Protocol.Audits.ContentSecurityPolicyIssueDetails;
 
   constructor(
       issueDetails: Protocol.Audits.ContentSecurityPolicyIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel,
@@ -46,7 +46,7 @@ export class ContentSecurityPolicyIssue extends Issue {
       issueDetails.contentSecurityPolicyViolationType,
     ].join('::');
     super(issueCode, issuesModel, issueId);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
   getCategory(): IssueCategory {
@@ -54,7 +54,7 @@ export class ContentSecurityPolicyIssue extends Issue {
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.issueDetails, [
+    return JSON.stringify(this.#issueDetails, [
       'blockedURL',
       'contentSecurityPolicyViolationType',
       'violatedDirective',
@@ -68,7 +68,7 @@ export class ContentSecurityPolicyIssue extends Issue {
   }
 
   getDescription(): MarkdownIssueDescription|null {
-    const description = issueDescriptions.get(this.issueDetails.contentSecurityPolicyViolationType);
+    const description = issueDescriptions.get(this.#issueDetails.contentSecurityPolicyViolationType);
     if (!description) {
       return null;
     }
@@ -76,11 +76,11 @@ export class ContentSecurityPolicyIssue extends Issue {
   }
 
   details(): Protocol.Audits.ContentSecurityPolicyIssueDetails {
-    return this.issueDetails;
+    return this.#issueDetails;
   }
 
   getKind(): IssueKind {
-    if (this.issueDetails.isReportOnly) {
+    if (this.#issueDetails.isReportOnly) {
       return IssueKind.Improvement;
     }
     return IssueKind.PageError;