chrome-devtools-frontend 1.0.981537 → 1.0.995491

package/front_end/core/i18n/locales/zh.json

@@ -1325,6 +1325,21 @@
   "models/issues_manager/ContentSecurityPolicyIssue.ts | trustedTypesPolicyViolation": {
     "message": "Trusted Types - 违反政策"
   },
+  "models/issues_manager/CookieIssue.ts | aSecure": {
+    "message": "安全的"
+  },
+  "models/issues_manager/CookieIssue.ts | anInsecure": {
+    "message": "不安全的"
+  },
+  "models/issues_manager/CookieIssue.ts | firstPartySetsExplained": {
+    "message": "First-Party Sets 和 SameParty 属性"
+  },
+  "models/issues_manager/CookieIssue.ts | howSchemefulSamesiteWorks": {
+    "message": "Schemeful Same-Site 的运作方式"
+  },
+  "models/issues_manager/CookieIssue.ts | samesiteCookiesExplained": {
+    "message": "SameSite Cookie 说明"
+  },
   "models/issues_manager/CorsIssue.ts | CORS": {
     "message": "跨域资源共享 (CORS)"
   },
@@ -1376,21 +1391,6 @@
   "models/issues_manager/QuirksModeIssue.ts | documentCompatibilityMode": {
     "message": "文档兼容模式"
   },
-  "models/issues_manager/CookieIssue.ts | aSecure": {
-    "message": "安全的"
-  },
-  "models/issues_manager/CookieIssue.ts | anInsecure": {
-    "message": "不安全的"
-  },
-  "models/issues_manager/CookieIssue.ts | firstPartySetsExplained": {
-    "message": "First-Party Sets 和 SameParty 属性"
-  },
-  "models/issues_manager/CookieIssue.ts | howSchemefulSamesiteWorks": {
-    "message": "Schemeful Same-Site 的运作方式"
-  },
-  "models/issues_manager/CookieIssue.ts | samesiteCookiesExplained": {
-    "message": "SameSite Cookie 说明"
-  },
   "models/issues_manager/SharedArrayBufferIssue.ts | enablingSharedArrayBuffer": {
     "message": "启用 SharedArrayBuffer"
   },
@@ -3236,6 +3236,9 @@
   "panels/application/components/BackForwardCacheView.ts | backForwardCacheTitle": {
     "message": "往返缓存"
   },
+  "panels/application/components/BackForwardCacheView.ts | blockingExtensionId": {
+    "message": "扩展程序 ID： "
+  },
   "panels/application/components/BackForwardCacheView.ts | circumstantial": {
     "message": "无法解决"
   },
@@ -4622,6 +4625,12 @@
   "panels/elements/EventListenersWidget.ts | showListenersOnTheAncestors": {
     "message": "显示祖先中的监听器"
   },
+  "panels/elements/LayersWidget.ts | cssLayersTitle": {
+    "message": "CSS 图层"
+  },
+  "panels/elements/LayersWidget.ts | toggleCSSLayers": {
+    "message": "显示/隐藏　CSS 图层视图"
+  },
   "panels/elements/MarkerDecorator.ts | domBreakpoint": {
     "message": "DOM 断点"
   },
@@ -4703,6 +4712,9 @@
   "panels/elements/StylePropertyTreeElement.ts | viewComputedValue": {
     "message": "查看计算得出的值"
   },
+  "panels/elements/StylesSidebarPane.ts | clickToRevealLayer": {
+    "message": "点击即可在图层树中显示图层"
+  },
   "panels/elements/StylesSidebarPane.ts | constructedStylesheet": {
     "message": "构造的样式表"
   },
@@ -4757,6 +4769,9 @@
   "panels/elements/StylesSidebarPane.ts | invalidString": {
     "message": "{PH1}，属性名称：{PH2}，属性值：{PH3}"
   },
+  "panels/elements/StylesSidebarPane.ts | layer": {
+    "message": "图层"
+  },
   "panels/elements/StylesSidebarPane.ts | newStyleRule": {
     "message": "新建样式规则"
   },
@@ -5816,8 +5831,11 @@
   "panels/lighthouse/LighthouseController.ts | thereMayBeStoredDataAffectingSingular": {
     "message": "下列位置可能存储了会影响加载性能的数据：{PH1}。请在无痕式窗口中审核此网页，以防止这些资源影响您的得分。"
   },
+  "panels/lighthouse/LighthouseController.ts | timespan": {
+    "message": "时间跨度"
+  },
   "panels/lighthouse/LighthouseController.ts | useLegacyNavigation": {
-    "message": "在导航模式下使用传统版 Lighthouse 审核网页。"
+    "message": "在导航模式下使用传统版 Lighthouse 分析网页。"
   },
   "panels/lighthouse/LighthouseController.ts | webSql": {
     "message": "Web SQL"
@@ -5876,9 +5894,18 @@
   "panels/lighthouse/LighthouseStartView.ts | learnMore": {
     "message": "了解详情"
   },
+  "panels/lighthouse/LighthouseStartViewFR.ts | analyzeNavigation": {
+    "message": "分析导航"
+  },
+  "panels/lighthouse/LighthouseStartViewFR.ts | analyzeSnapshot": {
+    "message": "分析快照"
+  },
   "panels/lighthouse/LighthouseStartViewFR.ts | mode": {
     "message": "模式"
   },
+  "panels/lighthouse/LighthouseStartViewFR.ts | startTimespan": {
+    "message": "启用时间跨度模式"
+  },
   "panels/lighthouse/LighthouseStatusView.ts | OfGlobalMobileUsersInWereOnGOrG": {
     "message": "2016 年，全球有 75% 的手机用户使用的是 2G 或 3G 网络 [来源：GSMA Mobile]"
   },
@@ -5966,6 +5993,18 @@
   "panels/lighthouse/LighthouseStatusView.ts | walmartSawAIncreaseInRevenueFor": {
     "message": "Walmart 发现，网页加载用时每减少 100 毫秒，收入就会增加 1% [来源：WPO Stats]"
   },
+  "panels/lighthouse/LighthouseTimespanView.ts | cancel": {
+    "message": "取消"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | endTimespan": {
+    "message": "结束时间跨度模式"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | timespanStarted": {
+    "message": "时间跨度模式已启用，与网页互动"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | timespanStarting": {
+    "message": "时间跨度模式正在开启…"
+  },
   "panels/lighthouse/lighthouse-meta.ts | showLighthouse": {
     "message": "显示 Lighthouse"
   },
@@ -9698,6 +9737,24 @@
   "panels/sources/WatchExpressionsSidebarPane.ts | refreshWatchExpressions": {
     "message": "刷新监视表达式"
   },
+  "panels/sources/components/HeadersView.ts | addHeader": {
+    "message": "添加标题"
+  },
+  "panels/sources/components/HeadersView.ts | addHeaderOverride": {
+    "message": "添加标题替换"
+  },
+  "panels/sources/components/HeadersView.ts | errorWhenParsing": {
+    "message": "解析“{PH1}”时出错。"
+  },
+  "panels/sources/components/HeadersView.ts | parsingErrorExplainer": {
+    "message": "这很可能是由于“{PH1}”中存在语法错误。请尝试在外部编辑器中打开此文件以修正该错误，或者删除此文件然后重新创建替换项。"
+  },
+  "panels/sources/components/HeadersView.ts | removeBlock": {
+    "message": "移除此“ApplyTo”部分"
+  },
+  "panels/sources/components/HeadersView.ts | removeHeader": {
+    "message": "移除此标题"
+  },
   "panels/sources/sources-meta.ts | activateBreakpoints": {
     "message": "启用断点"
   },
@@ -10874,6 +10931,9 @@
   "panels/timeline/TimelineUIUtils.ts | pinchUpdate": {
     "message": "双指张合更新"
   },
+  "panels/timeline/TimelineUIUtils.ts | prePaint": {
+    "message": "预先绘制"
+  },
   "panels/timeline/TimelineUIUtils.ts | preview": {
     "message": "预览"
   },

package/front_end/core/i18n/locales/zu.json

@@ -1325,6 +1325,21 @@
   "models/issues_manager/ContentSecurityPolicyIssue.ts | trustedTypesPolicyViolation": {
     "message": "Izinhlobo Ezithenjwayo - Ukwephulwa kwenqubomgomo"
   },
+  "models/issues_manager/CookieIssue.ts | aSecure": {
+    "message": "ephephile"
+  },
+  "models/issues_manager/CookieIssue.ts | anInsecure": {
+    "message": "ukungavikeleki"
+  },
+  "models/issues_manager/CookieIssue.ts | firstPartySetsExplained": {
+    "message": "First-Party Sets kanye nesibaluli se-SameParty"
+  },
+  "models/issues_manager/CookieIssue.ts | howSchemefulSamesiteWorks": {
+    "message": "Lisebenza kanjani Isayithi Elifanayo"
+  },
+  "models/issues_manager/CookieIssue.ts | samesiteCookiesExplained": {
+    "message": "Amakhukhi we-SameSite achaziwe"
+  },
   "models/issues_manager/CorsIssue.ts | CORS": {
     "message": "Iphutha Lokwabelana Nensiza Yendabuko (CORS)"
   },
@@ -1376,21 +1391,6 @@
   "models/issues_manager/QuirksModeIssue.ts | documentCompatibilityMode": {
     "message": "Imodi yokuhambelana kwedokhumenti"
   },
-  "models/issues_manager/CookieIssue.ts | aSecure": {
-    "message": "ephephile"
-  },
-  "models/issues_manager/CookieIssue.ts | anInsecure": {
-    "message": "ukungavikeleki"
-  },
-  "models/issues_manager/CookieIssue.ts | firstPartySetsExplained": {
-    "message": "First-Party Sets kanye nesibaluli se-SameParty"
-  },
-  "models/issues_manager/CookieIssue.ts | howSchemefulSamesiteWorks": {
-    "message": "Lisebenza kanjani Isayithi Elifanayo"
-  },
-  "models/issues_manager/CookieIssue.ts | samesiteCookiesExplained": {
-    "message": "Amakhukhi we-SameSite achaziwe"
-  },
   "models/issues_manager/SharedArrayBufferIssue.ts | enablingSharedArrayBuffer": {
     "message": "Inika amandla i-SharedArrayBuffer"
   },
@@ -3236,6 +3236,9 @@
   "panels/application/components/BackForwardCacheView.ts | backForwardCacheTitle": {
     "message": "Inqolobane yasemuva/phambili"
   },
+  "panels/application/components/BackForwardCacheView.ts | blockingExtensionId": {
+    "message": "Isandiso se-id: "
+  },
   "panels/application/components/BackForwardCacheView.ts | circumstantial": {
     "message": "Akwenzeki"
   },
@@ -4622,6 +4625,12 @@
   "panels/elements/EventListenersWidget.ts | showListenersOnTheAncestors": {
     "message": "Bonisa abalaleli kokhokho"
   },
+  "panels/elements/LayersWidget.ts | cssLayersTitle": {
+    "message": "Izendlalelo ze-CSS"
+  },
+  "panels/elements/LayersWidget.ts | toggleCSSLayers": {
+    "message": "Guqula ukubika Izendlalelo ze-CSS"
+  },
   "panels/elements/MarkerDecorator.ts | domBreakpoint": {
     "message": "Iphoyinti lokuphumula DOM"
   },
@@ -4703,6 +4712,9 @@
   "panels/elements/StylePropertyTreeElement.ts | viewComputedValue": {
     "message": "Buka inani lekhompyutha"
   },
+  "panels/elements/StylesSidebarPane.ts | clickToRevealLayer": {
+    "message": "Chofoza ukuze wembule isendlalelo esihlahleni sesendlalelo"
+  },
   "panels/elements/StylesSidebarPane.ts | constructedStylesheet": {
     "message": "i-stylesheet eyakhiwe"
   },
@@ -4757,6 +4769,9 @@
   "panels/elements/StylesSidebarPane.ts | invalidString": {
     "message": "{PH1}, igama lesakhiwo: {PH2}, inani lesakhiwo: {PH3}"
   },
+  "panels/elements/StylesSidebarPane.ts | layer": {
+    "message": "Isendlalelo"
+  },
   "panels/elements/StylesSidebarPane.ts | newStyleRule": {
     "message": "Umthetho Wesitayela Esisha"
   },
@@ -5816,8 +5831,11 @@
   "panels/lighthouse/LighthouseController.ts | thereMayBeStoredDataAffectingSingular": {
     "message": "Kungahle kube nedatha elondoloziwe ethinta ukusebenza kokulayisha kule ndawo: {PH1}. Ukuhlola leli khasi kukuwinid le-incognito ukuvimbela lezo zinsiza ukuthinta imiphumela yakho."
   },
+  "panels/lighthouse/LighthouseController.ts | timespan": {
+    "message": "Isikhathi"
+  },
   "panels/lighthouse/LighthouseController.ts | useLegacyNavigation": {
-    "message": "Hlola ikhasi usebenzisa i-Lighthouse yakudala uma ukumodi yokuzulazula."
+    "message": "Hlaziya ikhasi usebenzisa i-Lighthouse yakudala uma ukumodi yokufuna."
   },
   "panels/lighthouse/LighthouseController.ts | webSql": {
     "message": "Iwebhu SQL"
@@ -5876,9 +5894,18 @@
   "panels/lighthouse/LighthouseStartView.ts | learnMore": {
     "message": "Funda kabanzi"
   },
+  "panels/lighthouse/LighthouseStartViewFR.ts | analyzeNavigation": {
+    "message": "Hlaziya ukufuna"
+  },
+  "panels/lighthouse/LighthouseStartViewFR.ts | analyzeSnapshot": {
+    "message": "Hlaziya isifinyezo"
+  },
   "panels/lighthouse/LighthouseStartViewFR.ts | mode": {
     "message": "Imodi"
   },
+  "panels/lighthouse/LighthouseStartViewFR.ts | startTimespan": {
+    "message": "Qalisa isikhathi"
+  },
   "panels/lighthouse/LighthouseStatusView.ts | OfGlobalMobileUsersInWereOnGOrG": {
     "message": "U-75% wabasebenzisi beselula kwimbulunga yonke ngo-2016 bewuku-2G noma i-3G [Umthombo: GSMA Mobile]"
   },
@@ -5966,6 +5993,18 @@
   "panels/lighthouse/LighthouseStatusView.ts | walmartSawAIncreaseInRevenueFor": {
     "message": "I-Walmart ibone ukukhula okungu-1% emalini engenayo kukho konke ukuthuthuka kwe-100ms ekulayisheni kwekhasi [Umthombo: WPO Stats]"
   },
+  "panels/lighthouse/LighthouseTimespanView.ts | cancel": {
+    "message": "Khansela"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | endTimespan": {
+    "message": "Qeda isikhathi"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | timespanStarted": {
+    "message": "Isikhathi siqalile, sebenzisana nekhasi"
+  },
+  "panels/lighthouse/LighthouseTimespanView.ts | timespanStarting": {
+    "message": "Isikhathi siyaqala…"
+  },
   "panels/lighthouse/lighthouse-meta.ts | showLighthouse": {
     "message": "Bonisa i-Lighthouse"
   },
@@ -9698,6 +9737,24 @@
   "panels/sources/WatchExpressionsSidebarPane.ts | refreshWatchExpressions": {
     "message": "Vuselela izinkulumo zokubuka"
   },
+  "panels/sources/components/HeadersView.ts | addHeader": {
+    "message": "Faka unhlokweni"
+  },
+  "panels/sources/components/HeadersView.ts | addHeaderOverride": {
+    "message": "Faka ukukhipha unhlokweni"
+  },
+  "panels/sources/components/HeadersView.ts | errorWhenParsing": {
+    "message": "Iphutha ngenkathi incozulula i-''{PH1}''."
+  },
+  "panels/sources/components/HeadersView.ts | parsingErrorExplainer": {
+    "message": "Lokhu kungenzeka kungenxa yephutha le-syntax ku-''{PH1}''. Zama ukuvula leli fayela kusihleli sangaphandle ukuze ulungise iphutha noma usule ifayela futhi uphinde usungule ukukhipha."
+  },
+  "panels/sources/components/HeadersView.ts | removeBlock": {
+    "message": "Susa lesi 'ApplyTo'-sigaba"
+  },
+  "panels/sources/components/HeadersView.ts | removeHeader": {
+    "message": "Susa lo nhlokweni"
+  },
   "panels/sources/sources-meta.ts | activateBreakpoints": {
     "message": "Ama-breakpoint asebenzayo"
   },
@@ -10874,6 +10931,9 @@
   "panels/timeline/TimelineUIUtils.ts | pinchUpdate": {
     "message": "Ncinza Isibuyekezo"
   },
+  "panels/timeline/TimelineUIUtils.ts | prePaint": {
+    "message": "Ukupenda Kwangaphambilini"
+  },
   "panels/timeline/TimelineUIUtils.ts | preview": {
     "message": "Buka kuqala"
   },

package/front_end/core/platform/dom-utilities.ts

@@ -0,0 +1,16 @@
+// 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.
+
+/**
+ * `document.activeElement` will not enter shadow roots to find the element
+ * that has focus; use this method if you need to traverse through any shadow
+ * roots to find the actual, specific focused element.
+*/
+export function deepActiveElement(doc: Document): Element|null {
+  let activeElement: Element|null = doc.activeElement;
+  while (activeElement && activeElement.shadowRoot && activeElement.shadowRoot.activeElement) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+}

package/front_end/core/platform/platform.ts

@@ -31,6 +31,7 @@
 import * as ArrayUtilities from './array-utilities.js';
 import * as DateUtilities from './date-utilities.js';
 import * as DevToolsPath from './DevToolsPath.js';
+import * as DOMUtilities from './dom-utilities.js';
 import * as KeyboardUtilities from './keyboard-utilities.js';
 import * as MapUtilities from './map-utilities.js';
 import * as NumberUtilities from './number-utilities.js';
@@ -51,6 +52,7 @@ export {
   ArrayUtilities,
   DateUtilities,
   DevToolsPath,
+  DOMUtilities,
   KeyboardUtilities,
   MapUtilities,
   NumberUtilities,

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -29,6 +29,7 @@
  */
 
 import {NodeURL} from './NodeURL.js';
+import type * as Platform from '../platform/platform.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 
@@ -53,7 +54,7 @@ export interface MessageError {
 
 export type Message = {
   sessionId?: string,
-  url?: string,
+  url?: Platform.DevToolsPath.UrlString,
   id?: number,
   error?: MessageError|null,
   result?: Object|null,

package/front_end/core/protocol_client/NodeURL.ts

@@ -14,7 +14,7 @@ export class NodeURL {
 
     function process(object: {url?: string}, path: string): void {
       if (object.url && NodeURL.isPlatformPath(object.url, Host.Platform.isWin())) {
-        // object.url can be ob both types: RawPathString and UrlString
+        // object.url can be of both types: RawPathString and UrlString
         object.url = Common.ParsedURL.ParsedURL.rawPathToUrlString(object.url as Platform.DevToolsPath.RawPathString);
       }
       for (const entry of Object.entries(object)) {

package/front_end/core/root/Runtime.ts

@@ -51,6 +51,10 @@ export class Runtime {
     return queryParamsObject.get(name);
   }
 
+  static setQueryParamForTesting(name: string, value: string): void {
+    queryParamsObject.set(name, value);
+  }
+
   static experimentsSetting(): {
     [x: string]: boolean,
   } {
@@ -276,6 +280,8 @@ export enum ExperimentName {
   STYLES_PANE_CSS_CHANGES = 'stylesPaneCSSChanges',
   HEADER_OVERRIDES = 'headerOverrides',
   CSS_LAYERS = 'cssLayers',
+  EYEDROPPER_COLOR_PICKER = 'eyedropperColorPicker',
+  INSTRUMENTATION_BREAKPOINTS = 'instrumentationBreakpoints',
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/core/sdk/AccessibilityModel.ts

@@ -298,16 +298,17 @@ export class AccessibilityModel extends SDKModel<EventTypes> implements Protocol
       return parent.children();
     }
 
-    let nodes;
     const request = this.#pendingChildRequests.get(nodeId);
     if (request) {
       await request;
     } else {
-      const req = this.agent.invoke_getChildAXNodes({id: nodeId, frameId});
-      this.#pendingChildRequests.set(nodeId, req);
-      nodes = (await req).nodes;
-      this.createNodesFromPayload(nodes);
-      this.#pendingChildRequests.delete(nodeId);
+      const request = this.agent.invoke_getChildAXNodes({id: nodeId, frameId});
+      this.#pendingChildRequests.set(nodeId, request);
+      const result = await request;
+      if (!result.getError()) {
+        this.createNodesFromPayload(result.nodes);
+        this.#pendingChildRequests.delete(nodeId);
+      }
     }
     return parent.children();
   }

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -28,6 +28,7 @@ export class CSSMatchedStyles {
       cssModel: CSSModel, node: DOMNode, inlinePayload: Protocol.CSS.CSSStyle|null,
       attributesPayload: Protocol.CSS.CSSStyle|null, matchedPayload: Protocol.CSS.RuleMatch[],
       pseudoPayload: Protocol.CSS.PseudoElementMatches[], inheritedPayload: Protocol.CSS.InheritedStyleEntry[],
+      inheritedPseudoPayload: Protocol.CSS.InheritedPseudoElementMatches[],
       animationsPayload: Protocol.CSS.CSSKeyframesRule[]) {
     this.#cssModelInternal = cssModel;
     this.#nodeInternal = node;
@@ -47,7 +48,7 @@ export class CSSMatchedStyles {
     }
 
     this.#mainDOMCascade = this.buildMainCascade(inlinePayload, attributesPayload, matchedPayload, inheritedPayload);
-    this.#pseudoDOMCascades = this.buildPseudoCascades(pseudoPayload);
+    this.#pseudoDOMCascades = this.buildPseudoCascades(pseudoPayload, inheritedPseudoPayload);
 
     this.#styleToDOMCascade = new Map();
     for (const domCascade of Array.from(this.#pseudoDOMCascades.values()).concat(this.#mainDOMCascade)) {
@@ -205,12 +206,16 @@ export class CSSMatchedStyles {
     }
   }
 
-  private buildPseudoCascades(pseudoPayload: Protocol.CSS.PseudoElementMatches[]):
+  private buildPseudoCascades(
+      pseudoPayload: Protocol.CSS.PseudoElementMatches[],
+      inheritedPseudoPayload: Protocol.CSS.InheritedPseudoElementMatches[]):
       Map<Protocol.DOM.PseudoType, DOMInheritanceCascade> {
-    const pseudoCascades = new Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>();
+    const pseudoInheritanceCascades = new Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>();
     if (!pseudoPayload) {
-      return pseudoCascades;
+      return pseudoInheritanceCascades;
     }
+
+    const pseudoCascades = new Map<Protocol.DOM.PseudoType, NodeCascade[]>();
     for (let i = 0; i < pseudoPayload.length; ++i) {
       const entryPayload = pseudoPayload[i];
       // PseudoElement nodes are not created unless "content" css property is set.
@@ -220,15 +225,57 @@ export class CSSMatchedStyles {
       for (let j = rules.length - 1; j >= 0; --j) {
         const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[j].rule);
         pseudoStyles.push(pseudoRule.style);
-        this.#nodeForStyleInternal.set(pseudoRule.style, pseudoElement);
-        if (pseudoElement) {
-          this.addMatchingSelectors(pseudoElement, pseudoRule, rules[j].matchingSelectors);
+        const nodeForStyle =
+            cssMetadata().isHighlightPseudoType(entryPayload.pseudoType) ? this.#nodeInternal : pseudoElement;
+        this.#nodeForStyleInternal.set(pseudoRule.style, nodeForStyle);
+        if (nodeForStyle) {
+          this.addMatchingSelectors(nodeForStyle, pseudoRule, rules[j].matchingSelectors);
         }
       }
-      const nodeCascade = new NodeCascade(this, pseudoStyles, false /* #isInherited */);
-      pseudoCascades.set(entryPayload.pseudoType, new DOMInheritanceCascade([nodeCascade]));
+      const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(entryPayload.pseudoType);
+      const nodeCascade = new NodeCascade(
+          this, pseudoStyles, false /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+      pseudoCascades.set(entryPayload.pseudoType, [nodeCascade]);
+    }
+
+    if (inheritedPseudoPayload) {
+      let parentNode: (DOMNode|null) = this.#nodeInternal.parentNode;
+      for (let i = 0; parentNode && i < inheritedPseudoPayload.length; ++i) {
+        const inheritedPseudoMatches = inheritedPseudoPayload[i].pseudoElements;
+        for (let j = 0; j < inheritedPseudoMatches.length; ++j) {
+          const inheritedEntryPayload = inheritedPseudoMatches[j];
+          const pseudoStyles = [];
+          const rules = inheritedEntryPayload.matches || [];
+          for (let k = rules.length - 1; k >= 0; --k) {
+            const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[k].rule);
+            pseudoStyles.push(pseudoRule.style);
+            this.#nodeForStyleInternal.set(pseudoRule.style, parentNode);
+            this.#inheritedStyles.add(pseudoRule.style);
+            this.addMatchingSelectors(parentNode, pseudoRule, rules[k].matchingSelectors);
+          }
+
+          const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(inheritedEntryPayload.pseudoType);
+          const nodeCascade = new NodeCascade(
+              this, pseudoStyles, true /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+          const cascadeListForPseudoType = pseudoCascades.get(inheritedEntryPayload.pseudoType);
+          if (cascadeListForPseudoType) {
+            cascadeListForPseudoType.push(nodeCascade);
+          } else {
+            pseudoCascades.set(inheritedEntryPayload.pseudoType, [nodeCascade]);
+          }
+        }
+
+        parentNode = parentNode.parentNode;
+      }
     }
-    return pseudoCascades;
+
+    // Now that we've built the arrays of NodeCascades for each pseudo type, convert them into
+    // DOMInheritanceCascades.
+    for (const [pseudoType, nodeCascade] of pseudoCascades.entries()) {
+      pseudoInheritanceCascades.set(pseudoType, new DOMInheritanceCascade(nodeCascade));
+    }
+
+    return pseudoInheritanceCascades;
   }
 
   private addMatchingSelectors(
@@ -249,7 +296,7 @@ export class CSSMatchedStyles {
 
   hasMatchingSelectors(rule: CSSStyleRule): boolean {
     const matchingSelectors = this.getMatchingSelectors(rule);
-    return matchingSelectors.length > 0 && this.mediaMatches(rule.style);
+    return matchingSelectors.length > 0 && this.queryMatches(rule.style);
   }
 
   getMatchingSelectors(rule: CSSStyleRule): number[] {
@@ -327,13 +374,14 @@ export class CSSMatchedStyles {
     map.set(selectorText, value);
   }
 
-  mediaMatches(style: CSSStyleDeclaration): boolean {
+  queryMatches(style: CSSStyleDeclaration): boolean {
     if (!style.parentRule) {
       return true;
     }
-    const media = (style.parentRule as CSSStyleRule).media;
-    for (let i = 0; media && i < media.length; ++i) {
-      if (!media[i].active()) {
+    const parentRule = style.parentRule as CSSStyleRule;
+    const queries = [...parentRule.media, ...parentRule.containerQueries, ...parentRule.supports];
+    for (const query of queries) {
+      if (!query.active()) {
         return false;
       }
     }
@@ -421,12 +469,16 @@ class NodeCascade {
   #matchedStyles: CSSMatchedStyles;
   readonly styles: CSSStyleDeclaration[];
   readonly #isInherited: boolean;
+  readonly #isHighlightPseudoCascade: boolean;
   readonly propertiesState: Map<CSSProperty, PropertyState>;
   readonly activeProperties: Map<string, CSSProperty>;
-  constructor(matchedStyles: CSSMatchedStyles, styles: CSSStyleDeclaration[], isInherited: boolean) {
+  constructor(
+      matchedStyles: CSSMatchedStyles, styles: CSSStyleDeclaration[], isInherited: boolean,
+      isHighlightPseudoCascade: boolean = false) {
     this.#matchedStyles = matchedStyles;
     this.styles = styles;
     this.#isInherited = isInherited;
+    this.#isHighlightPseudoCascade = isHighlightPseudoCascade;
     this.propertiesState = new Map();
     this.activeProperties = new Map();
   }
@@ -448,7 +500,9 @@ class NodeCascade {
       for (const property of style.allProperties()) {
         // Do not pick non-inherited properties from inherited styles.
         const metadata = cssMetadata();
-        if (this.#isInherited && !metadata.isPropertyInherited(property.name)) {
+
+        // All properties are inherited for highlight pseudos.
+        if (this.#isInherited && !this.#isHighlightPseudoCascade && !metadata.isPropertyInherited(property.name)) {
           continue;
         }
 

package/front_end/core/sdk/CSSMetadata.ts

@@ -34,6 +34,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import * as Protocol from '../../generated/protocol.js';
 import * as SupportedCSSProperties from '../../generated/SupportedCSSProperties.js';
 import * as Common from '../common/common.js';
 import * as Platform from '../platform/platform.js';
@@ -310,6 +311,20 @@ export class CSSMetadata {
     }
     return {text, startColumn, endColumn};
   }
+
+  isHighlightPseudoType(pseudoType: Protocol.DOM.PseudoType): boolean {
+    // TODO(crbug.com/1164461) Currently devtools-frontend groups all custom highlight
+    // pseudos together in the same pseudo cascade, regardless of highlight name. This means that
+    // the result of displaying "overloaded" highlight styles as crossed-out can produce
+    // misleading results, because properties from highlights with one name can be shown as overloaded by
+    // properties from highlights with another name.
+    // So until that is fixed, don't include custom highlights among the highlight pseudos
+    // for which we apply overloaded property annotations.
+    return (
+        /* pseudoType === Protocol.DOM.PseudoType.Highlight || */ pseudoType === Protocol.DOM.PseudoType.Selection ||
+        pseudoType === Protocol.DOM.PseudoType.TargetText || pseudoType === Protocol.DOM.PseudoType.GrammarError ||
+        pseudoType === Protocol.DOM.PseudoType.SpellingError);
+  }
 }
 
 export const VariableRegex = /(var\(\s*--.*?\))/g;