chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/models/bindings/ResourceMapping.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Formatter from '../formatter/formatter.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
@@ -269,6 +270,78 @@ export class ResourceMapping implements SDK.TargetManager.SDKModelObserver<SDK.R
         uiLocation.uiSourceCode.url(), uiLocation.lineNumber, uiLocation.columnNumber);
   }
 
+  async functionBoundsAtRawLocation(rawLocation: SDK.DebuggerModel.Location):
+      Promise<Workspace.UISourceCode.UIFunctionBounds|null> {
+    const script = rawLocation.script();
+    if (!script) {
+      return null;
+    }
+    const info = this.infoForTarget(script.debuggerModel.target());
+    if (!info) {
+      return null;
+    }
+    const embedderName = script.embedderName();
+    if (!embedderName) {
+      return null;
+    }
+    const uiSourceCode = info.getProject().uiSourceCodeForURL(embedderName);
+    if (!uiSourceCode) {
+      return null;
+    }
+
+    let {lineNumber, columnNumber} = rawLocation;
+    lineNumber -= script.lineOffset;
+    if (lineNumber === 0) {
+      columnNumber -= script.columnOffset;
+    }
+
+    const scopeTreeAndText = script ? await SDK.ScopeTreeCache.scopeTreeForScript(script) : null;
+    if (!scopeTreeAndText) {
+      return null;
+    }
+
+    // Find the inner-most scope that maps to the given position.
+
+    const offset = scopeTreeAndText.text.offsetFromPosition(lineNumber, columnNumber);
+
+    const results = [];
+    (function walk(nodes: Formatter.FormatterWorkerPool.ScopeTreeNode[]) {
+      for (const node of nodes) {
+        if (!(offset >= node.start && offset < node.end)) {
+          continue;
+        }
+        results.push(node);
+        walk(node.children);
+      }
+    })([scopeTreeAndText.scopeTree]);
+
+    const result = results.findLast(
+        node => node.kind === Formatter.FormatterWorkerPool.ScopeKind.FUNCTION ||
+            node.kind === Formatter.FormatterWorkerPool.ScopeKind.ARROW_FUNCTION);
+    if (!result) {
+      return null;
+    }
+
+    // Map back to positions.
+    const startPosition = scopeTreeAndText.text.positionFromOffset(result.start);
+    const endPosition = scopeTreeAndText.text.positionFromOffset(result.end);
+
+    startPosition.lineNumber += script.lineOffset;
+    if (startPosition.lineNumber === script.lineOffset) {
+      startPosition.columnNumber += script.columnOffset;
+    }
+
+    endPosition.lineNumber += script.lineOffset;
+    if (endPosition.lineNumber === script.lineOffset) {
+      endPosition.columnNumber += script.columnOffset;
+    }
+
+    const name = '';  // TODO(crbug.com/452333154): update ScopeVariableAnalysis to include function name.
+    const range = new TextUtils.TextRange.TextRange(
+        startPosition.lineNumber, startPosition.columnNumber, endPosition.lineNumber, endPosition.columnNumber);
+    return new Workspace.UISourceCode.UIFunctionBounds(uiSourceCode, range, name);
+  }
+
   resetForTest(target: SDK.Target.Target): void {
     const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
     const info = resourceTreeModel ? this.#modelToInfo.get(resourceTreeModel) : null;

package/front_end/models/bindings/ResourceScriptMapping.ts

@@ -8,6 +8,7 @@ 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 * as Protocol from '../../generated/protocol.js';
+import * as Formatter from '../formatter/formatter.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
@@ -156,6 +157,55 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
     }
   }
 
+  async functionBoundsAtRawLocation(rawLocation: SDK.DebuggerModel.Location):
+      Promise<Workspace.UISourceCode.UIFunctionBounds|null> {
+    const script = rawLocation.script();
+    if (!script) {
+      return null;
+    }
+
+    const uiSourceCode = this.#scriptToUISourceCode.get(script);
+    if (!uiSourceCode) {
+      return null;
+    }
+
+    const scopeTreeAndText = script ? await SDK.ScopeTreeCache.scopeTreeForScript(script) : null;
+    if (!scopeTreeAndText) {
+      return null;
+    }
+
+    // Find the inner-most scope that maps to the given position.
+
+    const offset = scopeTreeAndText.text.offsetFromPosition(rawLocation.lineNumber, rawLocation.columnNumber);
+
+    const results = [];
+    (function walk(nodes: Formatter.FormatterWorkerPool.ScopeTreeNode[]) {
+      for (const node of nodes) {
+        if (!(offset >= node.start && offset < node.end)) {
+          continue;
+        }
+        results.push(node);
+        walk(node.children);
+      }
+    })([scopeTreeAndText.scopeTree]);
+
+    const result = results.findLast(
+        node => node.kind === Formatter.FormatterWorkerPool.ScopeKind.FUNCTION ||
+            node.kind === Formatter.FormatterWorkerPool.ScopeKind.ARROW_FUNCTION);
+    if (!result) {
+      return null;
+    }
+
+    // Map back to positions.
+    const startPosition = scopeTreeAndText.text.positionFromOffset(result.start);
+    const endPosition = scopeTreeAndText.text.positionFromOffset(result.end);
+
+    const name = '';  // TODO(crbug.com/452333154): update ScopeVariableAnalysis to include function name.
+    const range = new TextUtils.TextRange.TextRange(
+        startPosition.lineNumber, startPosition.columnNumber, endPosition.lineNumber, endPosition.columnNumber);
+    return new Workspace.UISourceCode.UIFunctionBounds(uiSourceCode, range, name);
+  }
+
   private addScript(script: SDK.Script.Script): void {
     // Ignore live edit scripts here.
     if (script.isLiveEdit() || script.isBreakpointCondition) {

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 {