chrome-devtools-frontend 1.0.975699 → 1.0.976703

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

@@ -84,8 +84,9 @@ export class LayersWidget extends UI.Widget.Widget {
     const makeTreeNode = (parentId: string) =>
         (layer: Protocol.CSS.CSSLayerData): TreeOutline.TreeOutlineUtils.TreeNode<string> => {
           const subLayers = layer.subLayers;
-          const treeNodeData = layer.order + ': ' + layer.name;
-          const id = parentId ? parentId + '.' + layer.name : layer.name;
+          const name = SDK.CSSModel.CSSModel.readableLayerName(layer.name);
+          const treeNodeData = layer.order + ': ' + name;
+          const id = parentId ? parentId + '.' + name : name;
           if (!subLayers) {
             return {treeNodeData, id};
           }
@@ -96,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

@@ -875,7 +875,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
         const layers = parentRule.layers;
         if ((layers.length || lastLayers) && lastLayers !== layers) {
-          const block = SectionBlock.createLayerBlock(layers);
+          const block = SectionBlock.createLayerBlock(parentRule);
           blocks.push(block);
           sawLayers = true;
           lastLayers = layers;
@@ -1430,18 +1430,21 @@ export class SectionBlock {
     return new SectionBlock(separatorElement);
   }
 
-  static createLayerBlock(layers: SDK.CSSLayer.CSSLayer[]): SectionBlock {
+  static createLayerBlock(rule: SDK.CSSRule.CSSStyleRule): SectionBlock {
     const separatorElement = document.createElement('div');
     separatorElement.className = 'sidebar-separator layer-separator';
     UI.UIUtils.createTextChild(separatorElement.createChild('div'), i18nString(UIStrings.layer));
-    if (!layers.length) {
-      UI.UIUtils.createTextChild(separatorElement.createChild('div'), '\xa0user\xa0agent\xa0stylesheet');
+    const layers = rule.layers;
+    if (!layers.length && rule.origin === Protocol.CSS.StyleSheetOrigin.UserAgent) {
+      const name = rule.origin === Protocol.CSS.StyleSheetOrigin.UserAgent ? '\xa0user\xa0agent\xa0stylesheet' :
+                                                                             '\xa0implicit\xa0outer\xa0layer';
+      UI.UIUtils.createTextChild(separatorElement.createChild('div'), name);
       return new SectionBlock(separatorElement);
     }
     const layerLink = separatorElement.createChild('button') as HTMLButtonElement;
     layerLink.className = 'link';
     layerLink.title = i18nString(UIStrings.clickToRevealLayer);
-    const name = layers.map(layer => layer.text || '<anonymous>').join('.');
+    const name = layers.map(layer => SDK.CSSModel.CSSModel.readableLayerName(layer.text)).join('.');
     layerLink.textContent = name;
     layerLink.onclick = (): Promise<void> => LayersWidget.LayersWidget.instance().revealLayer(name);
     return new SectionBlock(separatorElement);
@@ -3192,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/settings/components/SyncSection.ts

@@ -8,7 +8,7 @@ import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as Settings from '../../../ui/components/settings/settings.js';
-import * as SDK from '../../../core/sdk/sdk.js';
+import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
 
 import syncSectionStyles from './syncSection.css.js';
 
@@ -92,9 +92,8 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.syncDisabled)} <a href=${link} class="link" target="_blank"
-          @click=${(e: Event): void => openSettingsTab(link, e)}
-          @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
+        ${i18nString(UIStrings.syncDisabled)}
+        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
       </span>`;
     // clang-format on
   }
@@ -104,9 +103,8 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.preferencesSyncDisabled)} <a href=${link} class="link" target="_blank"
-          @click=${(e: Event): void => openSettingsTab(link, e)}
-          @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
+        ${i18nString(UIStrings.preferencesSyncDisabled)}
+        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
       </span>`;
     // clang-format on
   }
@@ -120,16 +118,6 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     </div>`;
 }
 
-// Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
-// there using CDP.
-function openSettingsTab(url: string, event: Event): void {
-  if (event.type === 'click' || (event.type === 'keydown' && self.isEnterOrSpaceKey(event))) {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
-    mainTarget && mainTarget.targetAgent().invoke_createTarget({url});
-    event.consume(true);
-  }
-}
-
 ComponentHelpers.CustomElements.defineComponent('devtools-sync-section', SyncSection);
 
 declare global {