chrome-devtools-frontend 1.0.976570 → 1.0.976703

package/config/gni/devtools_grd_files.gni

@@ -440,6 +440,7 @@ grd_files_release_sources = [
   "front_end/panels/settings/settings.js",
   "front_end/panels/snippets/snippets-legacy.js",
   "front_end/panels/snippets/snippets.js",
+  "front_end/panels/sources/components/components.js",
   "front_end/panels/sources/sources-legacy.js",
   "front_end/panels/sources/sources-meta.js",
   "front_end/panels/sources/sources.js",
@@ -1238,6 +1239,8 @@ grd_files_debug_sources = [
   "front_end/panels/sources/WatchExpressionsSidebarPane.js",
   "front_end/panels/sources/breakpointEditDialog.css.js",
   "front_end/panels/sources/callStackSidebarPane.css.js",
+  "front_end/panels/sources/components/HeadersView.css.js",
+  "front_end/panels/sources/components/HeadersView.js",
   "front_end/panels/sources/debuggerPausedMessage.css.js",
   "front_end/panels/sources/dialog.css.js",
   "front_end/panels/sources/javaScriptBreakpointsSidebarPane.css.js",

package/front_end/core/host/UserMetrics.ts

@@ -599,7 +599,7 @@ export enum DevtoolsExperiments {
 export enum IssueExpanded {
   CrossOriginEmbedderPolicy = 0,
   MixedContent = 1,
-  SameSiteCookie = 2,
+  Cookie = 2,
   HeavyAd = 3,
   ContentSecurityPolicy = 4,
   Other = 5,
@@ -646,28 +646,28 @@ export enum IssueCreated {
   'CrossOriginEmbedderPolicyIssue::CorpNotSameOrigin' = 11,
   'CrossOriginEmbedderPolicyIssue::CorpNotSameOriginAfterDefaultedToSameOriginByCoep' = 12,
   'CrossOriginEmbedderPolicyIssue::CorpNotSameSite' = 13,
-  'SameSiteCookieIssue::ExcludeSameSiteNoneInsecure::ReadCookie' = 14,
-  'SameSiteCookieIssue::ExcludeSameSiteNoneInsecure::SetCookie' = 15,
-  'SameSiteCookieIssue::WarnSameSiteNoneInsecure::ReadCookie' = 16,
-  'SameSiteCookieIssue::WarnSameSiteNoneInsecure::SetCookie' = 17,
-  'SameSiteCookieIssue::WarnSameSiteStrictLaxDowngradeStrict::Secure' = 18,
-  'SameSiteCookieIssue::WarnSameSiteStrictLaxDowngradeStrict::Insecure' = 19,
-  'SameSiteCookieIssue::WarnCrossDowngrade::ReadCookie::Secure' = 20,
-  'SameSiteCookieIssue::WarnCrossDowngrade::ReadCookie::Insecure' = 21,
-  'SameSiteCookieIssue::WarnCrossDowngrade::SetCookie::Secure' = 22,
-  'SameSiteCookieIssue::WarnCrossDowngrade::SetCookie::Insecure' = 23,
-  'SameSiteCookieIssue::ExcludeNavigationContextDowngrade::Secure' = 24,
-  'SameSiteCookieIssue::ExcludeNavigationContextDowngrade::Insecure' = 25,
-  'SameSiteCookieIssue::ExcludeContextDowngrade::ReadCookie::Secure' = 26,
-  'SameSiteCookieIssue::ExcludeContextDowngrade::ReadCookie::Insecure' = 27,
-  'SameSiteCookieIssue::ExcludeContextDowngrade::SetCookie::Secure' = 28,
-  'SameSiteCookieIssue::ExcludeContextDowngrade::SetCookie::Insecure' = 29,
-  'SameSiteCookieIssue::ExcludeSameSiteUnspecifiedTreatedAsLax::ReadCookie' = 30,
-  'SameSiteCookieIssue::ExcludeSameSiteUnspecifiedTreatedAsLax::SetCookie' = 31,
-  'SameSiteCookieIssue::WarnSameSiteUnspecifiedLaxAllowUnsafe::ReadCookie' = 32,
-  'SameSiteCookieIssue::WarnSameSiteUnspecifiedLaxAllowUnsafe::SetCookie' = 33,
-  'SameSiteCookieIssue::WarnSameSiteUnspecifiedCrossSiteContext::ReadCookie' = 34,
-  'SameSiteCookieIssue::WarnSameSiteUnspecifiedCrossSiteContext::SetCookie' = 35,
+  'CookieIssue::ExcludeSameSiteNoneInsecure::ReadCookie' = 14,
+  'CookieIssue::ExcludeSameSiteNoneInsecure::SetCookie' = 15,
+  'CookieIssue::WarnSameSiteNoneInsecure::ReadCookie' = 16,
+  'CookieIssue::WarnSameSiteNoneInsecure::SetCookie' = 17,
+  'CookieIssue::WarnSameSiteStrictLaxDowngradeStrict::Secure' = 18,
+  'CookieIssue::WarnSameSiteStrictLaxDowngradeStrict::Insecure' = 19,
+  'CookieIssue::WarnCrossDowngrade::ReadCookie::Secure' = 20,
+  'CookieIssue::WarnCrossDowngrade::ReadCookie::Insecure' = 21,
+  'CookieIssue::WarnCrossDowngrade::SetCookie::Secure' = 22,
+  'CookieIssue::WarnCrossDowngrade::SetCookie::Insecure' = 23,
+  'CookieIssue::ExcludeNavigationContextDowngrade::Secure' = 24,
+  'CookieIssue::ExcludeNavigationContextDowngrade::Insecure' = 25,
+  'CookieIssue::ExcludeContextDowngrade::ReadCookie::Secure' = 26,
+  'CookieIssue::ExcludeContextDowngrade::ReadCookie::Insecure' = 27,
+  'CookieIssue::ExcludeContextDowngrade::SetCookie::Secure' = 28,
+  'CookieIssue::ExcludeContextDowngrade::SetCookie::Insecure' = 29,
+  'CookieIssue::ExcludeSameSiteUnspecifiedTreatedAsLax::ReadCookie' = 30,
+  'CookieIssue::ExcludeSameSiteUnspecifiedTreatedAsLax::SetCookie' = 31,
+  'CookieIssue::WarnSameSiteUnspecifiedLaxAllowUnsafe::ReadCookie' = 32,
+  'CookieIssue::WarnSameSiteUnspecifiedLaxAllowUnsafe::SetCookie' = 33,
+  'CookieIssue::WarnSameSiteUnspecifiedCrossSiteContext::ReadCookie' = 34,
+  'CookieIssue::WarnSameSiteUnspecifiedCrossSiteContext::SetCookie' = 35,
   'SharedArrayBufferIssue::TransferIssue' = 36,
   'SharedArrayBufferIssue::CreationIssue' = 37,
   'TrustedWebActivityIssue::kHttpError' = 38,

package/front_end/core/i18n/locales/en-US.json

@@ -9242,6 +9242,12 @@
   "panels/sources/CallStackSidebarPane.ts | showMore": {
     "message": "Show more"
   },
+  "panels/sources/components/HeadersView.ts | errorWhenParsing": {
+    "message": "Error when parsing ''{PH1}''."
+  },
+  "panels/sources/components/HeadersView.ts | parsingErrorExplainer": {
+    "message": "This is most likely due to a syntax error in ''{PH1}''. Try opening this file in an external editor to fix the error or delete the file and re-create the override."
+  },
   "panels/sources/CoveragePlugin.ts | clickToShowCoveragePanel": {
     "message": "Click to show Coverage Panel"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -9242,6 +9242,12 @@
   "panels/sources/CallStackSidebarPane.ts | showMore": {
     "message": "Ŝh́ôẃ m̂ór̂é"
   },
+  "panels/sources/components/HeadersView.ts | errorWhenParsing": {
+    "message": "Êŕr̂ór̂ ẃĥén̂ ṕâŕŝín̂ǵ ''{PH1}''."
+  },
+  "panels/sources/components/HeadersView.ts | parsingErrorExplainer": {
+    "message": "T̂h́îś îś m̂óŝt́ l̂ík̂él̂ý d̂úê t́ô á ŝýn̂t́âx́ êŕr̂ór̂ ín̂ ''{PH1}''. T́r̂ý ôṕêńîńĝ t́ĥíŝ f́îĺê ín̂ án̂ éx̂t́êŕn̂ál̂ éd̂ít̂ór̂ t́ô f́îx́ t̂h́ê ér̂ŕôŕ ôŕ d̂él̂ét̂é t̂h́ê f́îĺê án̂d́ r̂é-ĉŕêát̂é t̂h́ê óv̂ér̂ŕîd́ê."
+  },
   "panels/sources/CoveragePlugin.ts | clickToShowCoveragePanel": {
     "message": "Ĉĺîćk̂ t́ô śĥóŵ Ćôv́êŕâǵê Ṕâńêĺ"
   },

package/front_end/core/sdk/CSSContainerQuery.ts

@@ -50,7 +50,7 @@ export class CSSContainerQueryContainer {
   }
 
   async getContainerSizeDetails(): Promise<ContainerQueriedSizeDetails|undefined> {
-    const styles = await this.containerNode.domModel().cssModel().computedStylePromise(this.containerNode.id);
+    const styles = await this.containerNode.domModel().cssModel().getComputedStyle(this.containerNode.id);
     if (!styles) {
       return;
     }

package/front_end/core/sdk/CSSModel.ts

@@ -265,12 +265,12 @@ export class CSSModel extends SDKModel<EventTypes> {
     await this.agent.invoke_stopRuleUsageTracking();
   }
 
-  async mediaQueriesPromise(): Promise<CSSMedia[]> {
+  async getMediaQueries(): Promise<CSSMedia[]> {
     const {medias} = await this.agent.invoke_getMediaQueries();
     return medias ? CSSMedia.parseMediaArrayPayload(this, medias) : [];
   }
 
-  async rootLayerPromise(nodeId: Protocol.DOM.NodeId): Promise<Protocol.CSS.CSSLayerData> {
+  async getRootLayer(nodeId: Protocol.DOM.NodeId): Promise<Protocol.CSS.CSSLayerData> {
     const {rootLayer} = await this.agent.invoke_getLayersForNode({nodeId});
     return rootLayer;
   }
@@ -288,7 +288,7 @@ export class CSSModel extends SDKModel<EventTypes> {
     this.dispatchEventToListeners(Events.ModelWasEnabled);
   }
 
-  async matchedStylesPromise(nodeId: Protocol.DOM.NodeId): Promise<CSSMatchedStyles|null> {
+  async getMatchedStyles(nodeId: Protocol.DOM.NodeId): Promise<CSSMatchedStyles|null> {
     const response = await this.agent.invoke_getMatchedStylesForNode({nodeId});
 
     if (response.getError()) {
@@ -306,16 +306,16 @@ export class CSSModel extends SDKModel<EventTypes> {
         response.cssKeyframesRules || []);
   }
 
-  async classNamesPromise(styleSheetId: Protocol.CSS.StyleSheetId): Promise<string[]> {
+  async getClassNames(styleSheetId: Protocol.CSS.StyleSheetId): Promise<string[]> {
     const {classNames} = await this.agent.invoke_collectClassNames({styleSheetId});
     return classNames || [];
   }
 
-  computedStylePromise(nodeId: Protocol.DOM.NodeId): Promise<Map<string, string>|null> {
+  getComputedStyle(nodeId: Protocol.DOM.NodeId): Promise<Map<string, string>|null> {
     return this.#styleLoader.computedStylePromise(nodeId);
   }
 
-  async backgroundColorsPromise(nodeId: Protocol.DOM.NodeId): Promise<ContrastInfo|null> {
+  async getBackgroundColors(nodeId: Protocol.DOM.NodeId): Promise<ContrastInfo|null> {
     const response = await this.agent.invoke_getBackgroundColors({nodeId});
     if (response.getError()) {
       return null;
@@ -328,7 +328,7 @@ export class CSSModel extends SDKModel<EventTypes> {
     };
   }
 
-  async platformFontsPromise(nodeId: Protocol.DOM.NodeId): Promise<Protocol.CSS.PlatformFontUsage[]|null> {
+  async getPlatformFonts(nodeId: Protocol.DOM.NodeId): Promise<Protocol.CSS.PlatformFontUsage[]|null> {
     const {fonts} = await this.agent.invoke_getPlatformFontsForNode({nodeId});
     return fonts;
   }
@@ -349,7 +349,7 @@ export class CSSModel extends SDKModel<EventTypes> {
     return values;
   }
 
-  async inlineStylesPromise(nodeId: Protocol.DOM.NodeId): Promise<InlineStyleResult|null> {
+  async getInlineStyles(nodeId: Protocol.DOM.NodeId): Promise<InlineStyleResult|null> {
     const response = await this.agent.invoke_getInlineStylesForNode({nodeId});
 
     if (response.getError() || !response.inlineStyle) {
@@ -702,7 +702,7 @@ export class CSSModel extends SDKModel<EventTypes> {
     this.#cachedMatchedCascadeNode = node;
     if (!this.#cachedMatchedCascadePromise) {
       if (node.id) {
-        this.#cachedMatchedCascadePromise = this.matchedStylesPromise(node.id);
+        this.#cachedMatchedCascadePromise = this.getMatchedStyles(node.id);
       } else {
         return Promise.resolve(null);
       }

package/front_end/generated/InspectorBackendCommands.js

@@ -182,7 +182,7 @@ export function registerCommands(inspectorBackend) {
       []);
 
   // Audits.
-  inspectorBackend.registerEnum('Audits.SameSiteCookieExclusionReason', {
+  inspectorBackend.registerEnum('Audits.CookieExclusionReason', {
     ExcludeSameSiteUnspecifiedTreatedAsLax: 'ExcludeSameSiteUnspecifiedTreatedAsLax',
     ExcludeSameSiteNoneInsecure: 'ExcludeSameSiteNoneInsecure',
     ExcludeSameSiteLax: 'ExcludeSameSiteLax',
@@ -190,7 +190,7 @@ export function registerCommands(inspectorBackend) {
     ExcludeInvalidSameParty: 'ExcludeInvalidSameParty',
     ExcludeSamePartyCrossPartyContext: 'ExcludeSamePartyCrossPartyContext'
   });
-  inspectorBackend.registerEnum('Audits.SameSiteCookieWarningReason', {
+  inspectorBackend.registerEnum('Audits.CookieWarningReason', {
     WarnSameSiteUnspecifiedCrossSiteContext: 'WarnSameSiteUnspecifiedCrossSiteContext',
     WarnSameSiteNoneInsecure: 'WarnSameSiteNoneInsecure',
     WarnSameSiteUnspecifiedLaxAllowUnsafe: 'WarnSameSiteUnspecifiedLaxAllowUnsafe',
@@ -198,9 +198,10 @@ export function registerCommands(inspectorBackend) {
     WarnSameSiteStrictCrossDowngradeStrict: 'WarnSameSiteStrictCrossDowngradeStrict',
     WarnSameSiteStrictCrossDowngradeLax: 'WarnSameSiteStrictCrossDowngradeLax',
     WarnSameSiteLaxCrossDowngradeStrict: 'WarnSameSiteLaxCrossDowngradeStrict',
-    WarnSameSiteLaxCrossDowngradeLax: 'WarnSameSiteLaxCrossDowngradeLax'
+    WarnSameSiteLaxCrossDowngradeLax: 'WarnSameSiteLaxCrossDowngradeLax',
+    WarnAttributeValueExceedsMaxSize: 'WarnAttributeValueExceedsMaxSize'
   });
-  inspectorBackend.registerEnum('Audits.SameSiteCookieOperation', {SetCookie: 'SetCookie', ReadCookie: 'ReadCookie'});
+  inspectorBackend.registerEnum('Audits.CookieOperation', {SetCookie: 'SetCookie', ReadCookie: 'ReadCookie'});
   inspectorBackend.registerEnum('Audits.MixedContentResolutionStatus', {
     MixedContentBlocked: 'MixedContentBlocked',
     MixedContentAutomaticallyUpgraded: 'MixedContentAutomaticallyUpgraded',
@@ -301,7 +302,7 @@ export function registerCommands(inspectorBackend) {
     Canceled: 'Canceled'
   });
   inspectorBackend.registerEnum('Audits.InspectorIssueCode', {
-    SameSiteCookieIssue: 'SameSiteCookieIssue',
+    CookieIssue: 'CookieIssue',
     MixedContentIssue: 'MixedContentIssue',
     BlockedByResponseIssue: 'BlockedByResponseIssue',
     HeavyAdIssue: 'HeavyAdIssue',

package/front_end/generated/protocol.ts

@@ -696,7 +696,7 @@ export namespace Audits {
     frameId: Page.FrameId;
   }
 
-  export const enum SameSiteCookieExclusionReason {
+  export const enum CookieExclusionReason {
     ExcludeSameSiteUnspecifiedTreatedAsLax = 'ExcludeSameSiteUnspecifiedTreatedAsLax',
     ExcludeSameSiteNoneInsecure = 'ExcludeSameSiteNoneInsecure',
     ExcludeSameSiteLax = 'ExcludeSameSiteLax',
@@ -705,7 +705,7 @@ export namespace Audits {
     ExcludeSamePartyCrossPartyContext = 'ExcludeSamePartyCrossPartyContext',
   }
 
-  export const enum SameSiteCookieWarningReason {
+  export const enum CookieWarningReason {
     WarnSameSiteUnspecifiedCrossSiteContext = 'WarnSameSiteUnspecifiedCrossSiteContext',
     WarnSameSiteNoneInsecure = 'WarnSameSiteNoneInsecure',
     WarnSameSiteUnspecifiedLaxAllowUnsafe = 'WarnSameSiteUnspecifiedLaxAllowUnsafe',
@@ -714,9 +714,10 @@ export namespace Audits {
     WarnSameSiteStrictCrossDowngradeLax = 'WarnSameSiteStrictCrossDowngradeLax',
     WarnSameSiteLaxCrossDowngradeStrict = 'WarnSameSiteLaxCrossDowngradeStrict',
     WarnSameSiteLaxCrossDowngradeLax = 'WarnSameSiteLaxCrossDowngradeLax',
+    WarnAttributeValueExceedsMaxSize = 'WarnAttributeValueExceedsMaxSize',
   }
 
-  export const enum SameSiteCookieOperation {
+  export const enum CookieOperation {
     SetCookie = 'SetCookie',
     ReadCookie = 'ReadCookie',
   }
@@ -726,7 +727,7 @@ export namespace Audits {
    * time finding a specific cookie. With this, we can convey specific error
    * information without the cookie.
    */
-  export interface SameSiteCookieIssueDetails {
+  export interface CookieIssueDetails {
     /**
      * If AffectedCookie is not set then rawCookieLine contains the raw
      * Set-Cookie header string. This hints at a problem where the
@@ -735,13 +736,13 @@ export namespace Audits {
      */
     cookie?: AffectedCookie;
     rawCookieLine?: string;
-    cookieWarningReasons: SameSiteCookieWarningReason[];
-    cookieExclusionReasons: SameSiteCookieExclusionReason[];
+    cookieWarningReasons: CookieWarningReason[];
+    cookieExclusionReasons: CookieExclusionReason[];
     /**
      * Optionally identifies the site-for-cookies and the cookie url, which
      * may be used by the front-end as additional context.
      */
-    operation: SameSiteCookieOperation;
+    operation: CookieOperation;
     siteForCookies?: string;
     cookieUrl?: string;
     request?: AffectedRequest;
@@ -1096,7 +1097,7 @@ export namespace Audits {
    * information about the kind of issue.
    */
   export const enum InspectorIssueCode {
-    SameSiteCookieIssue = 'SameSiteCookieIssue',
+    CookieIssue = 'CookieIssue',
     MixedContentIssue = 'MixedContentIssue',
     BlockedByResponseIssue = 'BlockedByResponseIssue',
     HeavyAdIssue = 'HeavyAdIssue',
@@ -1120,7 +1121,7 @@ export namespace Audits {
    * add a new optional field to this type.
    */
   export interface InspectorIssueDetails {
-    sameSiteCookieIssueDetails?: SameSiteCookieIssueDetails;
+    cookieIssueDetails?: CookieIssueDetails;
     mixedContentIssueDetails?: MixedContentIssueDetails;
     blockedByResponseIssueDetails?: BlockedByResponseIssueDetails;
     heavyAdIssueDetails?: HeavyAdIssueDetails;

package/front_end/models/issues_manager/Issue.ts

@@ -44,7 +44,7 @@ export enum IssueCategory {
   CrossOriginEmbedderPolicy = 'CrossOriginEmbedderPolicy',
   Generic = 'Generic',
   MixedContent = 'MixedContent',
-  SameSiteCookie = 'SameSiteCookie',
+  Cookie = 'Cookie',
   HeavyAd = 'HeavyAd',
   ContentSecurityPolicy = 'ContentSecurityPolicy',
   TrustedWebActivity = 'TrustedWebActivity',

package/front_end/models/issues_manager/IssuesManager.ts

@@ -22,7 +22,7 @@ import {LowTextContrastIssue} from './LowTextContrastIssue.js';
 import {MixedContentIssue} from './MixedContentIssue.js';
 import {NavigatorUserAgentIssue} from './NavigatorUserAgentIssue.js';
 import {QuirksModeIssue} from './QuirksModeIssue.js';
-import {SameSiteCookieIssue} from './SameSiteCookieIssue.js';
+import {CookieIssue} from './SameSiteCookieIssue.js';
 import {SharedArrayBufferIssue} from './SharedArrayBufferIssue.js';
 import {SourceFrameIssuesManager} from './SourceFrameIssuesManager.js';
 import {TrustedWebActivityIssue} from './TrustedWebActivityIssue.js';
@@ -49,8 +49,8 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode,
     (model: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue) => Issue[]>([
   [
-    Protocol.Audits.InspectorIssueCode.SameSiteCookieIssue,
-    SameSiteCookieIssue.fromInspectorIssue,
+    Protocol.Audits.InspectorIssueCode.CookieIssue,
+    CookieIssue.fromInspectorIssue,
   ],
   [
     Protocol.Audits.InspectorIssueCode.MixedContentIssue,
@@ -117,12 +117,6 @@ const issueCodeHandlers = new Map<
  */
 function createIssuesFromProtocolIssue(
     issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue): Issue[] {
-  if (inspectorIssue.code.toString() === 'CookieIssue') {
-    // TODO: backward compatibility for the next chromium roll
-    const details = inspectorIssue.details as {cookieIssueDetails: Protocol.Audits.SameSiteCookieIssueDetails};
-    inspectorIssue.code = Protocol.Audits.InspectorIssueCode.SameSiteCookieIssue;
-    inspectorIssue.details.sameSiteCookieIssueDetails = details.cookieIssueDetails;
-  }
   const handler = issueCodeHandlers.get(inspectorIssue.code);
   if (handler) {
     return handler(issuesModel, inspectorIssue);

package/front_end/models/issues_manager/SameSiteCookieIssue.ts

@@ -37,12 +37,11 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/issues_manager/SameSiteCookieIssue.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-export class SameSiteCookieIssue extends Issue {
-  #issueDetails: Protocol.Audits.SameSiteCookieIssueDetails;
+export class CookieIssue extends Issue {
+  #issueDetails: Protocol.Audits.CookieIssueDetails;
 
   constructor(
-      code: string, issueDetails: Protocol.Audits.SameSiteCookieIssueDetails,
-      issuesModel: SDK.IssuesModel.IssuesModel) {
+      code: string, issueDetails: Protocol.Audits.CookieIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
     super(code, issuesModel);
     this.#issueDetails = issueDetails;
   }
@@ -62,35 +61,34 @@ export class SameSiteCookieIssue extends Issue {
   }
 
   /**
-   * Returns an array of issues from a given SameSiteCookieIssueDetails.
+   * Returns an array of issues from a given CookieIssueDetails.
    */
-  static createIssuesFromSameSiteDetails(
-      sameSiteDetails: Protocol.Audits.SameSiteCookieIssueDetails,
-      issuesModel: SDK.IssuesModel.IssuesModel): SameSiteCookieIssue[] {
-    const issues: SameSiteCookieIssue[] = [];
+  static createIssuesFromCookieIssueDetails(
+      cookieIssueDetails: Protocol.Audits.CookieIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel): CookieIssue[] {
+    const issues: CookieIssue[] = [];
 
     // Exclusion reasons have priority. It means a cookie was blocked. Create an issue
     // for every exclusion reason but ignore warning reasons if the cookie was blocked.
     // Some exclusion reasons are dependent on warning reasons existing in order to produce an issue.
-    if (sameSiteDetails.cookieExclusionReasons && sameSiteDetails.cookieExclusionReasons.length > 0) {
-      for (const exclusionReason of sameSiteDetails.cookieExclusionReasons) {
-        const code = SameSiteCookieIssue.codeForSameSiteDetails(
-            exclusionReason, sameSiteDetails.cookieWarningReasons, sameSiteDetails.operation,
-            sameSiteDetails.cookieUrl);
+    if (cookieIssueDetails.cookieExclusionReasons && cookieIssueDetails.cookieExclusionReasons.length > 0) {
+      for (const exclusionReason of cookieIssueDetails.cookieExclusionReasons) {
+        const code = CookieIssue.codeForCookieIssueDetails(
+            exclusionReason, cookieIssueDetails.cookieWarningReasons, cookieIssueDetails.operation,
+            cookieIssueDetails.cookieUrl);
         if (code) {
-          issues.push(new SameSiteCookieIssue(code, sameSiteDetails, issuesModel));
+          issues.push(new CookieIssue(code, cookieIssueDetails, issuesModel));
         }
       }
       return issues;
     }
 
-    if (sameSiteDetails.cookieWarningReasons) {
-      for (const warningReason of sameSiteDetails.cookieWarningReasons) {
+    if (cookieIssueDetails.cookieWarningReasons) {
+      for (const warningReason of cookieIssueDetails.cookieWarningReasons) {
         // warningReasons should be an empty array here.
-        const code = SameSiteCookieIssue.codeForSameSiteDetails(
-            warningReason, [], sameSiteDetails.operation, sameSiteDetails.cookieUrl);
+        const code = CookieIssue.codeForCookieIssueDetails(
+            warningReason, [], cookieIssueDetails.operation, cookieIssueDetails.cookieUrl);
         if (code) {
-          issues.push(new SameSiteCookieIssue(code, sameSiteDetails, issuesModel));
+          issues.push(new CookieIssue(code, cookieIssueDetails, issuesModel));
         }
       }
     }
@@ -99,36 +97,35 @@ export class SameSiteCookieIssue extends Issue {
 
   /**
    * Calculates an issue code from a reason, an operation, and an array of warningReasons. All these together
-   * can uniquely identify a specific SameSite cookie issue.
-   * warningReasons is only needed for some SameSiteCookieExclusionReason in order to determine if an issue should be raised.
-   * It is not required if reason is a SameSiteCookieWarningReason.
+   * can uniquely identify a specific cookie issue.
+   * warningReasons is only needed for some CookieExclusionReason in order to determine if an issue should be raised.
+   * It is not required if reason is a CookieWarningReason.
    */
-  static codeForSameSiteDetails(
-      reason: Protocol.Audits.SameSiteCookieExclusionReason|Protocol.Audits.SameSiteCookieWarningReason,
-      warningReasons: Protocol.Audits.SameSiteCookieWarningReason[], operation: Protocol.Audits.SameSiteCookieOperation,
+  static codeForCookieIssueDetails(
+      reason: Protocol.Audits.CookieExclusionReason|Protocol.Audits.CookieWarningReason,
+      warningReasons: Protocol.Audits.CookieWarningReason[], operation: Protocol.Audits.CookieOperation,
       cookieUrl?: string): string|null {
     const isURLSecure = cookieUrl && (cookieUrl.startsWith('https://') || cookieUrl.startsWith('wss://'));
     const secure = isURLSecure ? 'Secure' : 'Insecure';
 
-    if (reason === Protocol.Audits.SameSiteCookieExclusionReason.ExcludeSameSiteStrict ||
-        reason === Protocol.Audits.SameSiteCookieExclusionReason.ExcludeSameSiteLax ||
-        reason === Protocol.Audits.SameSiteCookieExclusionReason.ExcludeSameSiteUnspecifiedTreatedAsLax) {
+    if (reason === Protocol.Audits.CookieExclusionReason.ExcludeSameSiteStrict ||
+        reason === Protocol.Audits.CookieExclusionReason.ExcludeSameSiteLax ||
+        reason === Protocol.Audits.CookieExclusionReason.ExcludeSameSiteUnspecifiedTreatedAsLax) {
       if (warningReasons && warningReasons.length > 0) {
-        if (warningReasons.includes(Protocol.Audits.SameSiteCookieWarningReason.WarnSameSiteStrictLaxDowngradeStrict)) {
+        if (warningReasons.includes(Protocol.Audits.CookieWarningReason.WarnSameSiteStrictLaxDowngradeStrict)) {
           return [
-            Protocol.Audits.InspectorIssueCode.SameSiteCookieIssue,
+            Protocol.Audits.InspectorIssueCode.CookieIssue,
             'ExcludeNavigationContextDowngrade',
             secure,
           ].join('::');
         }
 
-        if (warningReasons.includes(
-                Protocol.Audits.SameSiteCookieWarningReason.WarnSameSiteStrictCrossDowngradeStrict) ||
-            warningReasons.includes(Protocol.Audits.SameSiteCookieWarningReason.WarnSameSiteStrictCrossDowngradeLax) ||
-            warningReasons.includes(Protocol.Audits.SameSiteCookieWarningReason.WarnSameSiteLaxCrossDowngradeStrict) ||
-            warningReasons.includes(Protocol.Audits.SameSiteCookieWarningReason.WarnSameSiteLaxCrossDowngradeLax)) {
+        if (warningReasons.includes(Protocol.Audits.CookieWarningReason.WarnSameSiteStrictCrossDowngradeStrict) ||
+            warningReasons.includes(Protocol.Audits.CookieWarningReason.WarnSameSiteStrictCrossDowngradeLax) ||
+            warningReasons.includes(Protocol.Audits.CookieWarningReason.WarnSameSiteLaxCrossDowngradeStrict) ||
+            warningReasons.includes(Protocol.Audits.CookieWarningReason.WarnSameSiteLaxCrossDowngradeLax)) {
           return [
-            Protocol.Audits.InspectorIssueCode.SameSiteCookieIssue,
+            Protocol.Audits.InspectorIssueCode.CookieIssue,
             'ExcludeContextDowngrade',
             operation,
             secure,
@@ -138,8 +135,8 @@ export class SameSiteCookieIssue extends Issue {
 
       // If we have ExcludeSameSiteUnspecifiedTreatedAsLax but no corresponding warnings, then add just
       // the Issue code for ExcludeSameSiteUnspecifiedTreatedAsLax.
-      if (reason === Protocol.Audits.SameSiteCookieExclusionReason.ExcludeSameSiteUnspecifiedTreatedAsLax) {
-        return [Protocol.Audits.InspectorIssueCode.SameSiteCookieIssue, reason, operation].join('::');
+      if (reason === Protocol.Audits.CookieExclusionReason.ExcludeSameSiteUnspecifiedTreatedAsLax) {
+        return [Protocol.Audits.InspectorIssueCode.CookieIssue, reason, operation].join('::');
       }
 
       // ExcludeSameSiteStrict and ExcludeSameSiteLax require being paired with an appropriate warning. We didn't
@@ -147,18 +144,17 @@ export class SameSiteCookieIssue extends Issue {
       return null;
     }
 
-    if (reason === Protocol.Audits.SameSiteCookieWarningReason.WarnSameSiteStrictLaxDowngradeStrict) {
-      return [Protocol.Audits.InspectorIssueCode.SameSiteCookieIssue, reason, secure].join('::');
+    if (reason === Protocol.Audits.CookieWarningReason.WarnSameSiteStrictLaxDowngradeStrict) {
+      return [Protocol.Audits.InspectorIssueCode.CookieIssue, reason, secure].join('::');
     }
     // These have the same message.
-    if (reason === Protocol.Audits.SameSiteCookieWarningReason.WarnSameSiteStrictCrossDowngradeStrict ||
-        reason === Protocol.Audits.SameSiteCookieWarningReason.WarnSameSiteStrictCrossDowngradeLax ||
-        reason === Protocol.Audits.SameSiteCookieWarningReason.WarnSameSiteLaxCrossDowngradeLax ||
-        reason === Protocol.Audits.SameSiteCookieWarningReason.WarnSameSiteLaxCrossDowngradeStrict) {
-      return [Protocol.Audits.InspectorIssueCode.SameSiteCookieIssue, 'WarnCrossDowngrade', operation, secure].join(
-          '::');
+    if (reason === Protocol.Audits.CookieWarningReason.WarnSameSiteStrictCrossDowngradeStrict ||
+        reason === Protocol.Audits.CookieWarningReason.WarnSameSiteStrictCrossDowngradeLax ||
+        reason === Protocol.Audits.CookieWarningReason.WarnSameSiteLaxCrossDowngradeLax ||
+        reason === Protocol.Audits.CookieWarningReason.WarnSameSiteLaxCrossDowngradeStrict) {
+      return [Protocol.Audits.InspectorIssueCode.CookieIssue, 'WarnCrossDowngrade', operation, secure].join('::');
     }
-    return [Protocol.Audits.InspectorIssueCode.SameSiteCookieIssue, reason, operation].join('::');
+    return [Protocol.Audits.InspectorIssueCode.CookieIssue, reason, operation].join('::');
   }
 
   cookies(): Iterable<Protocol.Audits.AffectedCookie> {
@@ -183,7 +179,7 @@ export class SameSiteCookieIssue extends Issue {
   }
 
   getCategory(): IssueCategory {
-    return IssueCategory.SameSiteCookie;
+    return IssueCategory.Cookie;
   }
 
   getDescription(): MarkdownIssueDescription|null {
@@ -207,14 +203,14 @@ export class SameSiteCookieIssue extends Issue {
   }
 
   static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
-      SameSiteCookieIssue[] {
-    const sameSiteDetails = inspectorIssue.details.sameSiteCookieIssueDetails;
-    if (!sameSiteDetails) {
-      console.warn('SameSite issue without details received.');
+      CookieIssue[] {
+    const cookieIssueDetails = inspectorIssue.details.cookieIssueDetails;
+    if (!cookieIssueDetails) {
+      console.warn('Cookie issue without details received.');
       return [];
     }
 
-    return SameSiteCookieIssue.createIssuesFromSameSiteDetails(sameSiteDetails, issuesModel);
+    return CookieIssue.createIssuesFromCookieIssueDetails(cookieIssueDetails, issuesModel);
   }
 }
 
@@ -431,32 +427,32 @@ const samePartyCrossPartyContextSet: LazyMarkdownIssueDescription = {
 };
 
 const issueDescriptions: Map<string, LazyMarkdownIssueDescription> = new Map([
-  ['SameSiteCookieIssue::ExcludeSameSiteUnspecifiedTreatedAsLax::ReadCookie', sameSiteUnspecifiedErrorRead],
-  ['SameSiteCookieIssue::ExcludeSameSiteUnspecifiedTreatedAsLax::SetCookie', sameSiteUnspecifiedErrorSet],
+  ['CookieIssue::ExcludeSameSiteUnspecifiedTreatedAsLax::ReadCookie', sameSiteUnspecifiedErrorRead],
+  ['CookieIssue::ExcludeSameSiteUnspecifiedTreatedAsLax::SetCookie', sameSiteUnspecifiedErrorSet],
   // These two don't have a deprecation date yet, but they need to be fixed eventually.
-  ['SameSiteCookieIssue::WarnSameSiteUnspecifiedLaxAllowUnsafe::ReadCookie', sameSiteUnspecifiedWarnRead],
-  ['SameSiteCookieIssue::WarnSameSiteUnspecifiedLaxAllowUnsafe::SetCookie', sameSiteUnspecifiedWarnSet],
-  ['SameSiteCookieIssue::WarnSameSiteUnspecifiedCrossSiteContext::ReadCookie', sameSiteUnspecifiedWarnRead],
-  ['SameSiteCookieIssue::WarnSameSiteUnspecifiedCrossSiteContext::SetCookie', sameSiteUnspecifiedWarnSet],
-  ['SameSiteCookieIssue::ExcludeSameSiteNoneInsecure::ReadCookie', sameSiteNoneInsecureErrorRead],
-  ['SameSiteCookieIssue::ExcludeSameSiteNoneInsecure::SetCookie', sameSiteNoneInsecureErrorSet],
-  ['SameSiteCookieIssue::WarnSameSiteNoneInsecure::ReadCookie', sameSiteNoneInsecureWarnRead],
-  ['SameSiteCookieIssue::WarnSameSiteNoneInsecure::SetCookie', sameSiteNoneInsecureWarnSet],
-  ['SameSiteCookieIssue::WarnSameSiteStrictLaxDowngradeStrict::Secure', sameSiteWarnStrictLaxDowngradeStrict(true)],
-  ['SameSiteCookieIssue::WarnSameSiteStrictLaxDowngradeStrict::Insecure', sameSiteWarnStrictLaxDowngradeStrict(false)],
-  ['SameSiteCookieIssue::WarnCrossDowngrade::ReadCookie::Secure', sameSiteWarnCrossDowngradeRead(true)],
-  ['SameSiteCookieIssue::WarnCrossDowngrade::ReadCookie::Insecure', sameSiteWarnCrossDowngradeRead(false)],
-  ['SameSiteCookieIssue::WarnCrossDowngrade::SetCookie::Secure', sameSiteWarnCrossDowngradeSet(true)],
-  ['SameSiteCookieIssue::WarnCrossDowngrade::SetCookie::Insecure', sameSiteWarnCrossDowngradeSet(false)],
-  ['SameSiteCookieIssue::ExcludeNavigationContextDowngrade::Secure', sameSiteExcludeNavigationContextDowngrade(true)],
+  ['CookieIssue::WarnSameSiteUnspecifiedLaxAllowUnsafe::ReadCookie', sameSiteUnspecifiedWarnRead],
+  ['CookieIssue::WarnSameSiteUnspecifiedLaxAllowUnsafe::SetCookie', sameSiteUnspecifiedWarnSet],
+  ['CookieIssue::WarnSameSiteUnspecifiedCrossSiteContext::ReadCookie', sameSiteUnspecifiedWarnRead],
+  ['CookieIssue::WarnSameSiteUnspecifiedCrossSiteContext::SetCookie', sameSiteUnspecifiedWarnSet],
+  ['CookieIssue::ExcludeSameSiteNoneInsecure::ReadCookie', sameSiteNoneInsecureErrorRead],
+  ['CookieIssue::ExcludeSameSiteNoneInsecure::SetCookie', sameSiteNoneInsecureErrorSet],
+  ['CookieIssue::WarnSameSiteNoneInsecure::ReadCookie', sameSiteNoneInsecureWarnRead],
+  ['CookieIssue::WarnSameSiteNoneInsecure::SetCookie', sameSiteNoneInsecureWarnSet],
+  ['CookieIssue::WarnSameSiteStrictLaxDowngradeStrict::Secure', sameSiteWarnStrictLaxDowngradeStrict(true)],
+  ['CookieIssue::WarnSameSiteStrictLaxDowngradeStrict::Insecure', sameSiteWarnStrictLaxDowngradeStrict(false)],
+  ['CookieIssue::WarnCrossDowngrade::ReadCookie::Secure', sameSiteWarnCrossDowngradeRead(true)],
+  ['CookieIssue::WarnCrossDowngrade::ReadCookie::Insecure', sameSiteWarnCrossDowngradeRead(false)],
+  ['CookieIssue::WarnCrossDowngrade::SetCookie::Secure', sameSiteWarnCrossDowngradeSet(true)],
+  ['CookieIssue::WarnCrossDowngrade::SetCookie::Insecure', sameSiteWarnCrossDowngradeSet(false)],
+  ['CookieIssue::ExcludeNavigationContextDowngrade::Secure', sameSiteExcludeNavigationContextDowngrade(true)],
   [
-    'SameSiteCookieIssue::ExcludeNavigationContextDowngrade::Insecure',
+    'CookieIssue::ExcludeNavigationContextDowngrade::Insecure',
     sameSiteExcludeNavigationContextDowngrade(false),
   ],
-  ['SameSiteCookieIssue::ExcludeContextDowngrade::ReadCookie::Secure', sameSiteExcludeContextDowngradeRead(true)],
-  ['SameSiteCookieIssue::ExcludeContextDowngrade::ReadCookie::Insecure', sameSiteExcludeContextDowngradeRead(false)],
-  ['SameSiteCookieIssue::ExcludeContextDowngrade::SetCookie::Secure', sameSiteExcludeContextDowngradeSet(true)],
-  ['SameSiteCookieIssue::ExcludeContextDowngrade::SetCookie::Insecure', sameSiteExcludeContextDowngradeSet(false)],
-  ['SameSiteCookieIssue::ExcludeInvalidSameParty::SetCookie', sameSiteInvalidSameParty],
-  ['SameSiteCookieIssue::ExcludeSamePartyCrossPartyContext::SetCookie', samePartyCrossPartyContextSet],
+  ['CookieIssue::ExcludeContextDowngrade::ReadCookie::Secure', sameSiteExcludeContextDowngradeRead(true)],
+  ['CookieIssue::ExcludeContextDowngrade::ReadCookie::Insecure', sameSiteExcludeContextDowngradeRead(false)],
+  ['CookieIssue::ExcludeContextDowngrade::SetCookie::Secure', sameSiteExcludeContextDowngradeSet(true)],
+  ['CookieIssue::ExcludeContextDowngrade::SetCookie::Insecure', sameSiteExcludeContextDowngradeSet(false)],
+  ['CookieIssue::ExcludeInvalidSameParty::SetCookie', sameSiteInvalidSameParty],
+  ['CookieIssue::ExcludeSamePartyCrossPartyContext::SetCookie', samePartyCrossPartyContextSet],
 ]);

package/front_end/models/issues_manager/issues_manager.ts

@@ -20,7 +20,7 @@ import * as MixedContentIssue from './MixedContentIssue.js';
 import * as NavigatorUserAgentIssue from './NavigatorUserAgentIssue.js';
 import * as QuirksModeIssue from './QuirksModeIssue.js';
 import * as RelatedIssue from './RelatedIssue.js';
-import * as SameSiteCookieIssue from './SameSiteCookieIssue.js';
+import * as CookieIssue from './SameSiteCookieIssue.js';
 import * as SharedArrayBufferIssue from './SharedArrayBufferIssue.js';
 import * as SourceFrameIssuesManager from './SourceFrameIssuesManager.js';
 import * as TrustedWebActivityIssue from './TrustedWebActivityIssue.js';
@@ -30,6 +30,7 @@ export {
   ClientHintIssue,
   ContentSecurityPolicyIssue,
   ContrastCheckTrigger,
+  CookieIssue,
   CorsIssue,
   CrossOriginEmbedderPolicyIssue,
   DeprecationIssue,
@@ -44,7 +45,6 @@ export {
   NavigatorUserAgentIssue,
   QuirksModeIssue,
   RelatedIssue,
-  SameSiteCookieIssue,
   SharedArrayBufferIssue,
   SourceFrameIssuesManager,
   TrustedWebActivityIssue,

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -421,7 +421,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     await this.#innerUpdateInterceptionPatterns();
   }
 
-  private updateInterceptionPatterns(): void {
+  updateInterceptionPatterns(): void {
     void this.updateInterceptionThrottler.schedule(this.#innerUpdateInterceptionPatterns.bind(this));
   }
 

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -313,7 +313,7 @@ export class ClassNamePrompt extends UI.TextPrompt.TextPrompt {
       if (stylesheet.frameId !== this.selectedFrameId) {
         continue;
       }
-      const cssPromise = cssModel.classNamesPromise(stylesheet.id).then(classes => {
+      const cssPromise = cssModel.getClassNames(stylesheet.id).then(classes => {
         for (const className of classes) {
           completions.add(className);
         }

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -106,7 +106,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     }
 
     if (!this.computedStylePromise) {
-      this.computedStylePromise = cssModel.computedStylePromise(nodeId).then(verifyOutdated.bind(this, elementNode));
+      this.computedStylePromise = cssModel.getComputedStyle(nodeId).then(verifyOutdated.bind(this, elementNode));
     }
 
     return this.computedStylePromise;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1996,7 +1996,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    const styles = await node.domModel().cssModel().computedStylePromise(nodeId);
+    const styles = await node.domModel().cssModel().getComputedStyle(nodeId);
     for (const styleAdorner of this.styleAdorners) {
       this.removeAdorner(styleAdorner);
     }

package/front_end/panels/elements/LayersWidget.ts

@@ -97,7 +97,7 @@ export class LayersWidget extends UI.Widget.Widget {
                 Promise.resolve(subLayers.sort((layer1, layer2) => layer1.order - layer2.order).map(makeTreeNode(id))),
           };
         };
-    const rootLayer = await this.cssModel.rootLayerPromise(node.id);
+    const rootLayer = await this.cssModel.getRootLayer(node.id);
     this.layerTreeComponent.data = {
       defaultRenderer: TreeOutline.TreeOutline.defaultRenderer,
       tree: [makeTreeNode('')(rootLayer)],

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -88,8 +88,8 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     }
 
     const promises = [
-      cssModel.computedStylePromise(node.id).then(callback.bind(this)),
-      cssModel.inlineStylesPromise(node.id).then(inlineStyleResult => {
+      cssModel.getComputedStyle(node.id).then(callback.bind(this)),
+      cssModel.getInlineStyles(node.id).then(inlineStyleResult => {
         if (inlineStyleResult && this.node() === node) {
           this.inlineStyle = inlineStyleResult.inlineStyle;
         }

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -88,7 +88,7 @@ export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget {
       return Promise.resolve();
     }
 
-    return cssModel.platformFontsPromise(node.id).then(this.refreshUI.bind(this, node));
+    return cssModel.getPlatformFonts(node.id).then(this.refreshUI.bind(this, node));
   }
 
   private refreshUI(node: SDK.DOMModel.DOMNode, platformFonts: Protocol.CSS.PlatformFontUsage[]|null): void {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -278,7 +278,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const cssModel = this.parentPaneInternal.cssModel();
     const node = this.node();
     if (cssModel && node && typeof node.id !== 'undefined') {
-      const contrastInfo = new ColorPicker.ContrastInfo.ContrastInfo(await cssModel.backgroundColorsPromise(node.id));
+      const contrastInfo = new ColorPicker.ContrastInfo.ContrastInfo(await cssModel.getBackgroundColors(node.id));
       swatchIcon.setContrastInfo(contrastInfo);
     }
   }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -3195,13 +3195,12 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       if (!node || this.selectedNodeComputedStyles) {
         return;
       }
-      this.selectedNodeComputedStyles = await node.domModel().cssModel().computedStylePromise(node.id);
+      this.selectedNodeComputedStyles = await node.domModel().cssModel().getComputedStyle(node.id);
       const parentNode = node.parentNode;
       if (parentNode) {
-        this.parentNodeComputedStyles = await parentNode.domModel().cssModel().computedStylePromise(parentNode.id);
+        this.parentNodeComputedStyles = await parentNode.domModel().cssModel().getComputedStyle(parentNode.id);
       }
     };
-
     for (const result of results) {
       await ensureComputedStyles();
       // Using parent node's computed styles does not work in all cases. For example:

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -165,7 +165,7 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
       return Promise.resolve();
     }
 
-    return this.cssModel.mediaQueriesPromise().then(this.rebuildMediaQueries.bind(this));
+    return this.cssModel.getMediaQueries().then(this.rebuildMediaQueries.bind(this));
   }
 
   private squashAdjacentEqual(models: MediaQueryUIModel[]): MediaQueryUIModel[] {

package/front_end/panels/issues/IssueView.ts

@@ -131,7 +131,7 @@ class AffectedRequestsView extends AffectedResourcesView {
 const issueTypeToNetworkHeaderMap =
     new Map<IssuesManager.Issue.IssueCategory, NetworkForward.UIRequestLocation.UIRequestTabs>([
       [
-        IssuesManager.Issue.IssueCategory.SameSiteCookie,
+        IssuesManager.Issue.IssueCategory.Cookie,
         NetworkForward.UIRequestLocation.UIRequestTabs.Cookies,
       ],
       [

package/front_end/panels/issues/IssuesPane.ts

@@ -127,7 +127,7 @@ class IssueCategoryView extends UI.TreeOutline.TreeElement {
         return i18nString(UIStrings.crossOriginEmbedderPolicy);
       case IssuesManager.Issue.IssueCategory.MixedContent:
         return i18nString(UIStrings.mixedContent);
-      case IssuesManager.Issue.IssueCategory.SameSiteCookie:
+      case IssuesManager.Issue.IssueCategory.Cookie:
         return i18nString(UIStrings.samesiteCookie);
       case IssuesManager.Issue.IssueCategory.HeavyAd:
         return i18nString(UIStrings.heavyAds);

package/front_end/panels/network/NetworkLogView.ts

@@ -1716,7 +1716,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       return false;
     }
     if (this.onlyIssuesFilterUI.checked() &&
-        !IssuesManager.RelatedIssue.hasIssueOfCategory(request, IssuesManager.Issue.IssueCategory.SameSiteCookie)) {
+        !IssuesManager.RelatedIssue.hasIssueOfCategory(request, IssuesManager.Issue.IssueCategory.Cookie)) {
       return false;
     }
     if (this.onlyBlockedRequestsUI.checked() && !request.wasBlocked() && !request.corsErrorStatus()) {

package/front_end/panels/sources/CSSPlugin.ts

@@ -69,7 +69,7 @@ async function specificCssCompletion(
     assertNotNullOrUndefined(cssModel);
 
     const currentStyleSheet = getCurrentStyleSheet(uiSourceCode.url(), cssModel);
-    const existingClassNames = await cssModel.classNamesPromise(currentStyleSheet);
+    const existingClassNames = await cssModel.getClassNames(currentStyleSheet);
 
     return {
       from: node.from,

package/front_end/panels/sources/SourcesView.ts

@@ -12,6 +12,7 @@ import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js'
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import * as Components from './components/components.js';
 import {EditingLocationHistoryManager} from './EditingLocationHistoryManager.js';
 import sourcesViewStyles from './sourcesView.css.js';
 
@@ -377,6 +378,10 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       sourceView = new SourceFrame.ImageView.ImageView(uiSourceCode.mimeType(), uiSourceCode);
     } else if (contentType === Common.ResourceType.resourceTypes.Font) {
       sourceView = new SourceFrame.FontView.FontView(uiSourceCode.mimeType(), uiSourceCode);
+    } else if (
+        uiSourceCode.name() === HEADER_OVERRIDES_FILENAME &&
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      sourceView = new Components.HeadersView.HeadersView(uiSourceCode);
     } else {
       sourceFrame = new UISourceCodeFrame(uiSourceCode);
     }
@@ -399,10 +404,18 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     if (widget instanceof SourceFrame.FontView.FontView) {
       return SourceViewType.FontView;
     }
+    if (widget instanceof Components.HeadersView.HeadersView) {
+      return SourceViewType.HeadersView;
+    }
     return SourceViewType.SourceView;
   }
 
-  #sourceViewTypeForContentType(contentType: Common.ResourceType.ResourceType): SourceViewType {
+  #sourceViewTypeForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): SourceViewType {
+    if (uiSourceCode.name() === HEADER_OVERRIDES_FILENAME &&
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      return SourceViewType.HeadersView;
+    }
+    const contentType = uiSourceCode.contentType();
     switch (contentType) {
       case Common.ResourceType.resourceTypes.Image:
         return SourceViewType.ImageView;
@@ -417,8 +430,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     const uiSourceCode = event.data;
     const widget = this.sourceViewByUISourceCode.get(uiSourceCode);
     if (widget) {
-      const contentType = uiSourceCode.contentType();
-      if (this.#sourceViewTypeForWidget(widget) !== this.#sourceViewTypeForContentType(contentType)) {
+      if (this.#sourceViewTypeForWidget(widget) !== this.#sourceViewTypeForUISourceCode(uiSourceCode)) {
         // Remove the exisiting editor tab and create a new one of the correct type.
         this.removeUISourceCodes([uiSourceCode]);
         this.showSourceLocation(uiSourceCode);
@@ -602,20 +614,18 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   save(): void {
-    this.saveSourceFrame(this.currentSourceFrame());
+    this.saveSourceView(this.visibleView());
   }
 
   saveAll(): void {
     const sourceFrames = this.editorContainer.fileViews();
-    sourceFrames.forEach(this.saveSourceFrame.bind(this));
+    sourceFrames.forEach(this.saveSourceView.bind(this));
   }
 
-  private saveSourceFrame(sourceFrame: UI.Widget.Widget|null): void {
-    if (!(sourceFrame instanceof UISourceCodeFrame)) {
-      return;
+  private saveSourceView(sourceView: UI.Widget.Widget|null): void {
+    if (sourceView instanceof UISourceCodeFrame || sourceView instanceof Components.HeadersView.HeadersView) {
+      sourceView.commitEditing();
     }
-    const uiSourceCodeFrame = (sourceFrame as UISourceCodeFrame);
-    uiSourceCodeFrame.commitEditing();
   }
 
   toggleBreakpointsActiveState(active: boolean): void {
@@ -764,9 +774,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   }
 }
 
+const HEADER_OVERRIDES_FILENAME = '.headers';
+
 // eslint-disable-next-line rulesdir/const_enum
 enum SourceViewType {
   ImageView = 'ImageView',
   FontView = 'FontView',
+  HeadersView = 'HeadersView',
   SourceView = 'SourceView',
 }

package/front_end/panels/sources/components/HeadersView.css

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2022 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.
+ */
+
+:host {
+  flex-grow: 1;
+}
+
+.center-wrapper {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.centered {
+  margin: 1em;
+  max-width: 300px;
+  text-align: center;
+}
+
+.error-header {
+  font-weight: bold;
+  margin-bottom: 1em;
+}
+
+.error-body {
+  line-height: 1.5em;
+  color: var(--color-text-secondary);
+}

package/front_end/panels/sources/components/HeadersView.ts

@@ -0,0 +1,89 @@
+// Copyright 2022 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 * as Persistence from '../../../models/persistence/persistence.js';
+import type * as Workspace from '../../../models/workspace/workspace.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import HeadersViewStyles from './HeadersView.css.js';
+
+const UIStrings = {
+  /**
+  *@description Error message for files which cannot not be parsed.
+  *@example {.headers} PH1
+  */
+  errorWhenParsing: 'Error when parsing \'\'{PH1}\'\'.',
+  /**
+  *@description Explainer for files which cannot be parsed.
+  *@example {.headers} PH1
+  */
+  parsingErrorExplainer:
+      'This is most likely due to a syntax error in \'\'{PH1}\'\'. Try opening this file in an external editor to fix the error or delete the file and re-create the override.',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/sources/components/HeadersView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class HeadersView extends UI.View.SimpleView {
+  readonly #headersViewComponent = new HeadersViewComponent();
+  #uiSourceCode: Workspace.UISourceCode.UISourceCode;
+
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+    super('HeadersView');
+    this.#uiSourceCode = uiSourceCode;
+    this.element.appendChild(this.#headersViewComponent);
+    this.#headersViewComponent.data = {
+      uiSourceCode: this.#uiSourceCode,
+    };
+  }
+
+  commitEditing(): void {
+    this.#uiSourceCode.commitWorkingCopy();
+    Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().updateInterceptionPatterns();
+  }
+}
+
+export interface HeadersViewComponentData {
+  uiSourceCode: Workspace.UISourceCode.UISourceCode;
+}
+
+export class HeadersViewComponent extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-sources-headers-view`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [HeadersViewStyles];
+  }
+
+  set data(data: HeadersViewComponentData) {
+    this.#uiSourceCode = data.uiSourceCode;
+    this.#render();
+  }
+
+  #render(): void {
+    const fileName = this.#uiSourceCode?.name() || '.headers';
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <div class="center-wrapper">
+        <div class="centered">
+          <div class="error-header">${i18nString(UIStrings.errorWhenParsing, {PH1: fileName})}</div>
+          <div class="error-body">${i18nString(UIStrings.parsingErrorExplainer, {PH1: fileName})}</div>
+        </div>
+      </div>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-sources-headers-view', HeadersViewComponent);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-sources-headers-view': HeadersViewComponent;
+  }
+}

package/front_end/panels/sources/components/components.ts

@@ -0,0 +1,9 @@
+// Copyright 2022 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 HeadersView from './HeadersView.js';
+
+export {
+  HeadersView,
+};

package/package.json

@@ -54,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.976570"
+  "version": "1.0.976703"
 }