chrome-devtools-frontend 1.0.1549484 → 1.0.1550444

package/front_end/models/ai_assistance/BuiltInAi.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
 
@@ -23,11 +24,13 @@ export const enum LanguageModelAvailability {
   DISABLED = 'disabled',
 }
 
-export class BuiltInAi {
+export class BuiltInAi extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #availability: LanguageModelAvailability|null = null;
   #hasGpu: boolean;
   #consoleInsightsSession?: LanguageModel;
   initDoneForTesting: Promise<void>;
+  #downloadProgress: number|null = null;
+  #currentlyCreatingSession = false;
 
   static instance(): BuiltInAi {
     if (builtInAiInstance === undefined) {
@@ -37,9 +40,10 @@ export class BuiltInAi {
   }
 
   constructor() {
+    super();
     this.#hasGpu = this.#isGpuAvailable();
     this.initDoneForTesting =
-        this.getLanguageModelAvailability().then(() => this.initialize()).then(() => this.#sendAvailabilityMetrics());
+        this.getLanguageModelAvailability().then(() => this.#sendAvailabilityMetrics()).then(() => this.initialize());
   }
 
   async getLanguageModelAvailability(): Promise<LanguageModelAvailability> {
@@ -49,14 +53,59 @@ export class BuiltInAi {
     }
     try {
       // @ts-expect-error
-      this.#availability = await window.LanguageModel.availability(
-                               {expectedOutputs: [{type: 'text', languages: ['en']}]}) as LanguageModelAvailability;
+      this.#availability = await window.LanguageModel.availability({
+        expectedInputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+        expectedOutputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+      }) as LanguageModelAvailability;
     } catch {
       this.#availability = LanguageModelAvailability.UNAVAILABLE;
     }
     return this.#availability;
   }
 
+  isDownloading(): boolean {
+    return this.#availability === LanguageModelAvailability.DOWNLOADING;
+  }
+
+  isEventuallyAvailable(): boolean {
+    if (!this.#hasGpu && !Boolean(Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu)) {
+      return false;
+    }
+    return this.#availability === LanguageModelAvailability.AVAILABLE ||
+        this.#availability === LanguageModelAvailability.DOWNLOADING ||
+        this.#availability === LanguageModelAvailability.DOWNLOADABLE;
+  }
+
+  #setDownloadProgress(newValue: number): void {
+    this.#downloadProgress = newValue;
+    this.dispatchEventToListeners(Events.DOWNLOAD_PROGRESS_CHANGED, this.#downloadProgress);
+  }
+
+  getDownloadProgress(): number|null {
+    return this.#downloadProgress;
+  }
+
+  startDownloadingModel(): void {
+    if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !this.#hasGpu) {
+      return;
+    }
+    if (this.#availability !== LanguageModelAvailability.DOWNLOADABLE) {
+      return;
+    }
+
+    void this.#createSession();
+    // Without the timeout, the returned availability would still be `downloadable`
+    setTimeout(() => {
+      void this.getLanguageModelAvailability();
+    }, 1000);
+  }
+
   #isGpuAvailable(): boolean {
     const canvas = document.createElement('canvas');
     try {
@@ -86,16 +135,29 @@ export class BuiltInAi {
     if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !this.#hasGpu) {
       return;
     }
-    if (this.#availability !== LanguageModelAvailability.AVAILABLE) {
+    if (this.#availability !== LanguageModelAvailability.AVAILABLE &&
+        this.#availability !== LanguageModelAvailability.DOWNLOADING) {
       return;
     }
     await this.#createSession();
   }
 
   async #createSession(): Promise<void> {
+    if (this.#currentlyCreatingSession) {
+      return;
+    }
+    this.#currentlyCreatingSession = true;
+
+    const monitor = (m: EventTarget): void => {
+      m.addEventListener('downloadprogress', ((e: {loaded: number}) => {
+                                               this.#setDownloadProgress(e.loaded);
+                                             }) as unknown as EventListener);
+    };
+
     try {
       // @ts-expect-error
       this.#consoleInsightsSession = await window.LanguageModel.create({
+        monitor,
         initialPrompts: [{
           role: 'system',
           content: `
@@ -125,11 +187,13 @@ Your instructions are as follows:
         }],
       });
       if (this.#availability !== LanguageModelAvailability.AVAILABLE) {
+        this.dispatchEventToListeners(Events.DOWNLOADED_AND_SESSION_CREATED);
         void this.getLanguageModelAvailability();
       }
     } catch (e) {
       console.error('Error when creating LanguageModel session', e.message);
     }
+    this.#currentlyCreatingSession = false;
   }
 
   static removeInstance(): void {
@@ -198,3 +262,13 @@ Your instructions are as follows:
     }
   }
 }
+
+export const enum Events {
+  DOWNLOAD_PROGRESS_CHANGED = 'downloadProgressChanged',
+  DOWNLOADED_AND_SESSION_CREATED = 'downloadedAndSessionCreated',
+}
+
+export interface EventTypes {
+  [Events.DOWNLOAD_PROGRESS_CHANGED]: number;
+  [Events.DOWNLOADED_AND_SESSION_CREATED]: void;
+}

package/front_end/models/issues_manager/AttributionReportingIssue.ts

@@ -89,13 +89,10 @@ const structuredHeaderLink = {
   linkTitle: 'Structured Headers RFC',
 };
 
-export class AttributionReportingIssue extends Issue<IssueCode> {
-  issueDetails: Readonly<Protocol.Audits.AttributionReportingIssueDetails>;
-
+export class AttributionReportingIssue extends Issue<Protocol.Audits.AttributionReportingIssueDetails, IssueCode> {
   constructor(
       issueDetails: Protocol.Audits.AttributionReportingIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
-    super(getIssueCode(issueDetails), issuesModel);
-    this.issueDetails = issueDetails;
+    super(getIssueCode(issueDetails), issueDetails, issuesModel);
   }
 
   getCategory(): IssueCategory {
@@ -106,8 +103,9 @@ export class AttributionReportingIssue extends Issue<IssueCode> {
     const url = new URL('https://wicg.github.io/attribution-reporting-api/validate-headers');
     url.searchParams.set('header', name);
 
-    if (this.issueDetails.invalidParameter) {
-      url.searchParams.set('json', this.issueDetails.invalidParameter);
+    const details = this.details();
+    if (details.invalidParameter) {
+      url.searchParams.set('json', details.invalidParameter);
     }
 
     return {
@@ -229,7 +227,7 @@ export class AttributionReportingIssue extends Issue<IssueCode> {
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.issueDetails);
+    return JSON.stringify(this.details());
   }
 
   getKind(): IssueKind {

package/front_end/models/issues_manager/BounceTrackingIssue.ts

@@ -18,12 +18,9 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/issues_manager/BounceTrackingIssue.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class BounceTrackingIssue extends Issue {
-  readonly #issueDetails: Protocol.Audits.BounceTrackingIssueDetails;
-
+export class BounceTrackingIssue extends Issue<Protocol.Audits.BounceTrackingIssueDetails> {
   constructor(issueDetails: Protocol.Audits.BounceTrackingIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
-    super(Protocol.Audits.InspectorIssueCode.BounceTrackingIssue, issuesModel);
-    this.#issueDetails = issueDetails;
+    super(Protocol.Audits.InspectorIssueCode.BounceTrackingIssue, issueDetails, issuesModel);
   }
 
   getCategory(): IssueCategory {
@@ -42,23 +39,16 @@ export class BounceTrackingIssue extends Issue {
     };
   }
 
-  details(): Protocol.Audits.BounceTrackingIssueDetails {
-    return this.#issueDetails;
-  }
-
   getKind(): IssueKind {
     return IssueKind.BREAKING_CHANGE;
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.#issueDetails);
+    return JSON.stringify(this.details());
   }
 
   override trackingSites(): Iterable<string> {
-    if (this.#issueDetails.trackingSites) {
-      return this.#issueDetails.trackingSites;
-    }
-    return [];
+    return this.details().trackingSites;
   }
 
   static fromInspectorIssue(

package/front_end/models/issues_manager/ClientHintIssue.ts

@@ -22,29 +22,22 @@ const UIStrings = {
 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;
-
+export class ClientHintIssue extends Issue<Protocol.Audits.ClientHintIssueDetails> {
   constructor(issueDetails: Protocol.Audits.ClientHintIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
     super(
         {
           code: Protocol.Audits.InspectorIssueCode.ClientHintIssue,
           umaCode: [Protocol.Audits.InspectorIssueCode.ClientHintIssue, issueDetails.clientHintIssueReason].join('::'),
         },
-        issuesModel);
-    this.issueDetails = issueDetails;
+        issueDetails, issuesModel);
   }
 
   getCategory(): IssueCategory {
     return IssueCategory.OTHER;
   }
 
-  details(): Protocol.Audits.ClientHintIssueDetails {
-    return this.issueDetails;
-  }
-
   getDescription(): MarkdownIssueDescription|null {
-    const description = issueDescriptions.get(this.issueDetails.clientHintIssueReason);
+    const description = issueDescriptions.get(this.details().clientHintIssueReason);
     if (!description) {
       return null;
     }
@@ -52,11 +45,11 @@ export class ClientHintIssue extends Issue {
   }
 
   override sources(): Iterable<Protocol.Audits.SourceCodeLocation> {
-    return [this.issueDetails.sourceCodeLocation];
+    return [this.details().sourceCodeLocation];
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.issueDetails);
+    return JSON.stringify(this.details());
   }
 
   getKind(): IssueKind {

package/front_end/models/issues_manager/ContentSecurityPolicyIssue.ts

@@ -38,9 +38,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/issues_manager/ContentSecurityPolicyIssue.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-export class ContentSecurityPolicyIssue extends Issue {
-  #issueDetails: Protocol.Audits.ContentSecurityPolicyIssueDetails;
-
+export class ContentSecurityPolicyIssue extends Issue<Protocol.Audits.ContentSecurityPolicyIssueDetails> {
   constructor(
       issueDetails: Protocol.Audits.ContentSecurityPolicyIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null,
       issueId?: Protocol.Audits.IssueId) {
@@ -48,8 +46,7 @@ export class ContentSecurityPolicyIssue extends Issue {
       Protocol.Audits.InspectorIssueCode.ContentSecurityPolicyIssue,
       issueDetails.contentSecurityPolicyViolationType,
     ].join('::');
-    super(issueCode, issuesModel, issueId);
-    this.#issueDetails = issueDetails;
+    super(issueCode, issueDetails, issuesModel, issueId);
   }
 
   getCategory(): IssueCategory {
@@ -57,7 +54,7 @@ export class ContentSecurityPolicyIssue extends Issue {
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.#issueDetails, [
+    return JSON.stringify(this.details(), [
       'blockedURL',
       'contentSecurityPolicyViolationType',
       'violatedDirective',
@@ -71,19 +68,15 @@ export class ContentSecurityPolicyIssue extends Issue {
   }
 
   getDescription(): MarkdownIssueDescription|null {
-    const description = issueDescriptions.get(this.#issueDetails.contentSecurityPolicyViolationType);
+    const description = issueDescriptions.get(this.details().contentSecurityPolicyViolationType);
     if (!description) {
       return null;
     }
     return resolveLazyDescription(description);
   }
 
-  details(): Protocol.Audits.ContentSecurityPolicyIssueDetails {
-    return this.#issueDetails;
-  }
-
   getKind(): IssueKind {
-    if (this.#issueDetails.isReportOnly) {
+    if (this.details().isReportOnly) {
       return IssueKind.IMPROVEMENT;
     }
     return IssueKind.PAGE_ERROR;

package/front_end/models/issues_manager/CookieDeprecationMetadataIssue.ts

@@ -19,16 +19,13 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/CookieDeprecatio
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 /** TODO(b/305738703): Move this issue into a warning on CookieIssue. **/
-export class CookieDeprecationMetadataIssue extends Issue {
-  readonly #issueDetails: Protocol.Audits.CookieDeprecationMetadataIssueDetails;
-
+export class CookieDeprecationMetadataIssue extends Issue<Protocol.Audits.CookieDeprecationMetadataIssueDetails> {
   constructor(
       issueDetails: Protocol.Audits.CookieDeprecationMetadataIssueDetails,
       issuesModel: SDK.IssuesModel.IssuesModel|null) {
     // Set a distinct code for ReadCookie and SetCookie issues, so they are grouped separately.
     const issueCode = Protocol.Audits.InspectorIssueCode.CookieDeprecationMetadataIssue + '_' + issueDetails.operation;
-    super(issueCode, issuesModel);
-    this.#issueDetails = issueDetails;
+    super(issueCode, issueDetails, issuesModel);
   }
 
   getCategory(): IssueCategory {
@@ -36,12 +33,12 @@ export class CookieDeprecationMetadataIssue extends Issue {
   }
 
   getDescription(): MarkdownIssueDescription {
-    const fileName = this.#issueDetails.operation === 'SetCookie' ? 'cookieWarnMetadataGrantSet.md' :
-                                                                    'cookieWarnMetadataGrantRead.md';
+    const fileName =
+        this.details().operation === 'SetCookie' ? 'cookieWarnMetadataGrantSet.md' : 'cookieWarnMetadataGrantRead.md';
 
     let optOutText = '';
-    if (this.#issueDetails.isOptOutTopLevel) {
-      optOutText = '\n\n (Top level site opt-out: ' + this.#issueDetails.optOutPercentage +
+    if (this.details().isOptOutTopLevel) {
+      optOutText = '\n\n (Top level site opt-out: ' + this.details().optOutPercentage +
           '% - [learn more](gracePeriodStagedControlExplainer))';
     }
 
@@ -59,16 +56,12 @@ export class CookieDeprecationMetadataIssue extends Issue {
     };
   }
 
-  details(): Protocol.Audits.CookieDeprecationMetadataIssueDetails {
-    return this.#issueDetails;
-  }
-
   getKind(): IssueKind {
     return IssueKind.BREAKING_CHANGE;
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.#issueDetails);
+    return JSON.stringify(this.details());
   }
 
   static fromInspectorIssue(

package/front_end/models/issues_manager/CookieIssue.ts

@@ -68,27 +68,20 @@ export interface CookieReportInfo {
   insight?: Protocol.Audits.CookieIssueInsight;
 }
 
-export class CookieIssue extends Issue {
-  #issueDetails: Protocol.Audits.CookieIssueDetails;
-
-  constructor(
-      code: string, issueDetails: Protocol.Audits.CookieIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null,
-      issueId: Protocol.Audits.IssueId|undefined) {
-    super(code, issuesModel, issueId);
-    this.#issueDetails = issueDetails;
-  }
-
+export class CookieIssue extends Issue<Protocol.Audits.CookieIssueDetails> {
   cookieId(): string {
-    if (this.#issueDetails.cookie) {
-      const {domain, path, name} = this.#issueDetails.cookie;
+    const details = this.details();
+    if (details.cookie) {
+      const {domain, path, name} = details.cookie;
       const cookieId = `${domain};${path};${name}`;
       return cookieId;
     }
-    return this.#issueDetails.rawCookieLine ?? 'no-cookie-info';
+    return this.details().rawCookieLine ?? 'no-cookie-info';
   }
 
   primaryKey(): string {
-    const requestId = this.#issueDetails.request ? this.#issueDetails.request.requestId : 'no-request';
+    const details = this.details();
+    const requestId = details.request ? details.request.requestId : 'no-request';
     return `${this.code()}-(${this.cookieId()})-(${requestId})`;
   }
 
@@ -210,22 +203,25 @@ export class CookieIssue extends Issue {
   }
 
   override cookies(): Iterable<Protocol.Audits.AffectedCookie> {
-    if (this.#issueDetails.cookie) {
-      return [this.#issueDetails.cookie];
+    const details = this.details();
+    if (details.cookie) {
+      return [details.cookie];
     }
     return [];
   }
 
   override rawCookieLines(): Iterable<string> {
-    if (this.#issueDetails.rawCookieLine) {
-      return [this.#issueDetails.rawCookieLine];
+    const details = this.details();
+    if (details.rawCookieLine) {
+      return [details.rawCookieLine];
     }
     return [];
   }
 
   override requests(): Iterable<Protocol.Audits.AffectedRequest> {
-    if (this.#issueDetails.request) {
-      return [this.#issueDetails.request];
+    const details = this.details();
+    if (details.request) {
+      return [details.request];
     }
     return [];
   }
@@ -244,27 +240,28 @@ export class CookieIssue extends Issue {
 
   override isCausedByThirdParty(): boolean {
     const outermostFrame = SDK.FrameManager.FrameManager.instance().getOutermostFrame();
-    return isCausedByThirdParty(outermostFrame, this.#issueDetails.cookieUrl, this.#issueDetails.siteForCookies);
+    return isCausedByThirdParty(outermostFrame, this.details().cookieUrl, this.details().siteForCookies);
   }
 
   getKind(): IssueKind {
-    if (this.#issueDetails.cookieExclusionReasons?.length > 0) {
+    if (this.details().cookieExclusionReasons?.length > 0) {
       return IssueKind.PAGE_ERROR;
     }
     return IssueKind.BREAKING_CHANGE;
   }
 
   makeCookieReportEntry(): CookieReportInfo|undefined {
-    const status = CookieIssue.getCookieStatus(this.#issueDetails);
-    if (this.#issueDetails.cookie && this.#issueDetails.cookieUrl && status !== undefined) {
-      const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(this.#issueDetails.cookieUrl);
+    const status = CookieIssue.getCookieStatus(this.details());
+    const details = this.details();
+    if (details.cookie && details.cookieUrl && status !== undefined) {
+      const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(details.cookieUrl);
       return {
-        name: this.#issueDetails.cookie.name,
-        domain: this.#issueDetails.cookie.domain,
+        name: details.cookie.name,
+        domain: details.cookie.domain,
         type: entity?.category,
         platform: entity?.name,
         status,
-        insight: this.#issueDetails.insight,
+        insight: this.details().insight,
       };
     }
 
@@ -332,8 +329,8 @@ export class CookieIssue extends Issue {
       return new SDK.ConsoleModel.ConsoleMessage(
           issuesModel.target().model(SDK.RuntimeModel.RuntimeModel), Common.Console.FrontendMessageSource.ISSUE_PANEL,
           Protocol.Log.LogEntryLevel.Warning, UIStrings.consoleTpcdErrorMessage, {
-            url: this.#issueDetails.request?.url as Platform.DevToolsPath.UrlString | undefined,
-            affectedResources: {requestId: this.#issueDetails.request?.requestId, issueId: this.issueId},
+            url: this.details().request?.url as Platform.DevToolsPath.UrlString | undefined,
+            affectedResources: {requestId: this.details().request?.requestId, issueId: this.issueId},
             isCookieReportIssue: true
           });
     }

package/front_end/models/issues_manager/CorsIssue.ts

@@ -115,26 +115,19 @@ function getIssueCode(details: Protocol.Audits.CorsIssueDetails): IssueCode {
   }
 }
 
-export class CorsIssue extends Issue<IssueCode> {
-  #issueDetails: Protocol.Audits.CorsIssueDetails;
-
+export class CorsIssue extends Issue<Protocol.Audits.CorsIssueDetails, IssueCode> {
   constructor(
       issueDetails: Protocol.Audits.CorsIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null,
       issueId: Protocol.Audits.IssueId|undefined) {
-    super(getIssueCode(issueDetails), issuesModel, issueId);
-    this.#issueDetails = issueDetails;
+    super(getIssueCode(issueDetails), issueDetails, issuesModel, issueId);
   }
 
   getCategory(): IssueCategory {
     return IssueCategory.CORS;
   }
 
-  details(): Protocol.Audits.CorsIssueDetails {
-    return this.#issueDetails;
-  }
-
   getDescription(): MarkdownIssueDescription|null {
-    switch (getIssueCode(this.#issueDetails)) {
+    switch (getIssueCode(this.details())) {
       case IssueCode.INSECURE_PRIVATE_NETWORK:
         return {
           file: 'corsInsecurePrivateNetwork.md',
@@ -269,16 +262,14 @@ export class CorsIssue extends Issue<IssueCode> {
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.#issueDetails);
+    return JSON.stringify(this.details());
   }
 
   getKind(): IssueKind {
-    if (this.#issueDetails.isWarning &&
-        (this.#issueDetails.corsErrorStatus.corsError === Protocol.Network.CorsError.InsecurePrivateNetwork ||
-         this.#issueDetails.corsErrorStatus.corsError ===
-             Protocol.Network.CorsError.PreflightMissingAllowPrivateNetwork ||
-         this.#issueDetails.corsErrorStatus.corsError ===
-             Protocol.Network.CorsError.PreflightInvalidAllowPrivateNetwork)) {
+    if (this.details().isWarning &&
+        (this.details().corsErrorStatus.corsError === Protocol.Network.CorsError.InsecurePrivateNetwork ||
+         this.details().corsErrorStatus.corsError === Protocol.Network.CorsError.PreflightMissingAllowPrivateNetwork ||
+         this.details().corsErrorStatus.corsError === Protocol.Network.CorsError.PreflightInvalidAllowPrivateNetwork)) {
       return IssueKind.BREAKING_CHANGE;
     }
     return IssueKind.PAGE_ERROR;

package/front_end/models/issues_manager/CrossOriginEmbedderPolicyIssue.ts

@@ -42,25 +42,22 @@ export function isCrossOriginEmbedderPolicyIssue(reason: Protocol.Audits.Blocked
   return false;
 }
 
-export class CrossOriginEmbedderPolicyIssue extends Issue {
-  #issueDetails: Protocol.Audits.BlockedByResponseIssueDetails;
-
+export class CrossOriginEmbedderPolicyIssue extends Issue<Protocol.Audits.BlockedByResponseIssueDetails> {
   constructor(
       issueDetails: Protocol.Audits.BlockedByResponseIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
-    super(`CrossOriginEmbedderPolicyIssue::${issueDetails.reason}`, issuesModel);
-    this.#issueDetails = issueDetails;
+    super(`CrossOriginEmbedderPolicyIssue::${issueDetails.reason}`, issueDetails, issuesModel);
   }
 
   primaryKey(): string {
-    return `${this.code()}-(${this.#issueDetails.request.requestId})`;
+    return `${this.code()}-(${this.details().request.requestId})`;
   }
 
   override getBlockedByResponseDetails(): Iterable<Protocol.Audits.BlockedByResponseIssueDetails> {
-    return [this.#issueDetails];
+    return [this.details()];
   }
 
   override requests(): Iterable<Protocol.Audits.AffectedRequest> {
-    return [this.#issueDetails.request];
+    return [this.details().request];
   }
 
   getCategory(): IssueCategory {

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -33,35 +33,28 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 const strDeprecation = i18n.i18n.registerUIStrings('generated/Deprecation.ts', Deprecation.UIStrings);
 const i18nLazyDeprecationString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, strDeprecation);
 
-export class DeprecationIssue extends Issue {
-  #issueDetails: Protocol.Audits.DeprecationIssueDetails;
-
+export class DeprecationIssue extends Issue<Protocol.Audits.DeprecationIssueDetails> {
   constructor(issueDetails: Protocol.Audits.DeprecationIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
     const issueCode = [
       Protocol.Audits.InspectorIssueCode.DeprecationIssue,
       issueDetails.type,
     ].join('::');
-    super({code: issueCode, umaCode: 'DeprecationIssue'}, issuesModel);
-    this.#issueDetails = issueDetails;
+    super({code: issueCode, umaCode: 'DeprecationIssue'}, issueDetails, issuesModel);
   }
 
   getCategory(): IssueCategory {
     return IssueCategory.OTHER;
   }
 
-  details(): Protocol.Audits.DeprecationIssueDetails {
-    return this.#issueDetails;
-  }
-
   getDescription(): MarkdownIssueDescription {
     let messageFunction = (): string => '';
-    const maybeEnglishMessage = (Deprecation.UIStrings as Record<string, string>)[this.#issueDetails.type];
+    const maybeEnglishMessage = (Deprecation.UIStrings as Record<string, string>)[this.details().type];
     if (maybeEnglishMessage) {
       messageFunction = i18nLazyDeprecationString(maybeEnglishMessage);
     }
 
     const links = [];
-    const deprecationMeta = Deprecation.DEPRECATIONS_METADATA[this.#issueDetails.type];
+    const deprecationMeta = Deprecation.DEPRECATIONS_METADATA[this.details().type];
     const feature = deprecationMeta?.chromeStatusFeature ?? 0;
     if (feature !== 0) {
       links.push({
@@ -87,14 +80,14 @@ export class DeprecationIssue extends Issue {
   }
 
   override sources(): Iterable<Protocol.Audits.SourceCodeLocation> {
-    if (this.#issueDetails.sourceCodeLocation) {
-      return [this.#issueDetails.sourceCodeLocation];
+    if (this.details().sourceCodeLocation) {
+      return [this.details().sourceCodeLocation];
     }
     return [];
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.#issueDetails);
+    return JSON.stringify(this.details());
   }
 
   getKind(): IssueKind {