chrome-devtools-frontend 1.0.995491 → 1.0.996595

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

@@ -1352,6 +1352,12 @@
   "models/issues_manager/CrossOriginEmbedderPolicyIssue.ts | samesiteAndSameorigin": {
     "message": "Indawo efanayo kanye Nomthombo ofanayo"
   },
+  "models/issues_manager/DeprecationIssue.ts | deprecationExample": {
+    "message": "Lesi yisibonelo somlayezo ohunyushiwe wenkinga yokuhoxisa."
+  },
+  "models/issues_manager/DeprecationIssue.ts | title": {
+    "message": "Isici Esihoxisiwe Esisetshenzisiwe"
+  },
   "models/issues_manager/FederatedAuthRequestIssue.ts | fedCm": {
     "message": "I-Federated Credential Management API"
   },
@@ -3032,6 +3038,12 @@
   "panels/application/components/BackForwardCacheStrings.ts | enteredBackForwardCacheBeforeServiceWorkerHostAdded": {
     "message": "Isisebenzi sesevisi senziwe sasebenza ngenkathi ikhasi likwinqolobane yasemuva/phambili."
   },
+  "panels/application/components/BackForwardCacheStrings.ts | errorDocument": {
+    "message": "Inqolobane yasemuva/phambili ivaliwe ngenxa yephutha ledokhumenti."
+  },
+  "panels/application/components/BackForwardCacheStrings.ts | fencedFramesEmbedder": {
+    "message": "Amakhasi asebenzisa i-FencedFrames awakwazi ukugcinwa ku-bfcache."
+  },
   "panels/application/components/BackForwardCacheStrings.ts | foregroundCacheLimit": {
     "message": "Ikhasi likhishiwe kunqolobane ukuze kuvunyelwe elinye ikhasi ukuthi libe kwinqolobane."
   },
@@ -3245,6 +3257,15 @@
   "panels/application/components/BackForwardCacheView.ts | circumstantialExplanation": {
     "message": "Lezi zizathu azikwazi ukusebenza okungukuthi ukugcinwa enqolobaneni kwesikhashana kuvinjwe okuthile okungaphandle kokulawula okuqondile kwekhasi."
   },
+  "panels/application/components/BackForwardCacheView.ts | framesPerIssue": {
+    "message": "{n,plural, =1{Uhlaka olu-#}one{Izinhlaka ezingu-#}other{Izinhlaka ezingu-#}}"
+  },
+  "panels/application/components/BackForwardCacheView.ts | framesTitle": {
+    "message": "Izinhlaka"
+  },
+  "panels/application/components/BackForwardCacheView.ts | issuesInFrames": {
+    "message": "{x,plural, =1{inkinga #}one{izinkinga #}other{izinkinga #}} zitholwe ku-{y,plural, =1{uhlaka #}one{izinhlaka #}other{izinhlaka #}}."
+  },
   "panels/application/components/BackForwardCacheView.ts | learnMore": {
     "message": "Funda kabanzi: ukufaneleka kwenqolobane yokuya emuva/phambili"
   },
@@ -3677,6 +3698,12 @@
   "panels/changes/ChangesView.ts | binaryData": {
     "message": "Idatha yenambambili"
   },
+  "panels/changes/ChangesView.ts | copy": {
+    "message": "Kopisha"
+  },
+  "panels/changes/ChangesView.ts | copyAllChangesFromCurrentFile": {
+    "message": "Kopisha zonke izinguquko kwifayela lamanje"
+  },
   "panels/changes/ChangesView.ts | noChanges": {
     "message": "Azikho izinguquko"
   },
@@ -3755,6 +3782,9 @@
   "panels/console/ConsoleView.ts | allLevels": {
     "message": "Wonke amaleveli"
   },
+  "panels/console/ConsoleView.ts | autocompleteFromHistory": {
+    "message": "Qedela ngokuzenzakalela kusukela kumlando"
+  },
   "panels/console/ConsoleView.ts | consoleCleared": {
     "message": "I-console isuliwe"
   },
@@ -3836,6 +3866,9 @@
   "panels/console/ConsoleView.ts | logLevels": {
     "message": "Amaleveli elogu"
   },
+  "panels/console/ConsoleView.ts | logXMLHttpRequests": {
+    "message": "Ilogu ye-XMLHttpRequests"
+  },
   "panels/console/ConsoleView.ts | onlyShowMessagesFromTheCurrentContext": {
     "message": "Bonisa kuphela imilayezo evela kungqikithi yamanje (top, iframe, worker, isandiso)"
   },
@@ -3869,6 +3902,9 @@
   "panels/console/ConsoleView.ts | showCorsErrorsInConsole": {
     "message": "Bonisa amaphutha e-CORS ku-console"
   },
+  "panels/console/ConsoleView.ts | treatEvaluationAsUserActivation": {
+    "message": "Thatha ukuhlolwa njengokwenziwe kwasebenza umsebenzisi"
+  },
   "panels/console/ConsoleView.ts | verbose": {
     "message": "I-Verbose"
   },
@@ -4667,6 +4703,48 @@
   "panels/elements/PropertiesWidget.ts | showAllTooltip": {
     "message": "Uma kususwe ukumaka, izakhiwo kuphela inani lazo okuyiqada noma ezingachaziwe ezizoboniswa"
   },
+  "panels/elements/StylePropertiesSection.ts | constructedStylesheet": {
+    "message": "i-stylesheet eyakhiwe"
+  },
+  "panels/elements/StylePropertiesSection.ts | copyAllCSSChanges": {
+    "message": "Kopisha zonke izinguquko ze-CSS"
+  },
+  "panels/elements/StylePropertiesSection.ts | copyAllDeclarations": {
+    "message": "Kopisha zonke izimemezelo"
+  },
+  "panels/elements/StylePropertiesSection.ts | copyRule": {
+    "message": "Kopisha umthetho"
+  },
+  "panels/elements/StylePropertiesSection.ts | copySelector": {
+    "message": "Kopisha selector"
+  },
+  "panels/elements/StylePropertiesSection.ts | cssSelector": {
+    "message": "Isikhethi se-CSS"
+  },
+  "panels/elements/StylePropertiesSection.ts | injectedStylesheet": {
+    "message": "ijove isitayela seshidi"
+  },
+  "panels/elements/StylePropertiesSection.ts | insertStyleRuleBelow": {
+    "message": "Faka Umthetho Wesitayela Ngezansi"
+  },
+  "panels/elements/StylePropertiesSection.ts | sattributesStyle": {
+    "message": "{PH1}[Isitayela Sezibaluli]"
+  },
+  "panels/elements/StylePropertiesSection.ts | showAllPropertiesSMore": {
+    "message": "Bonisa Zonke Izakhiwo ({PH1} okuningi)"
+  },
+  "panels/elements/StylePropertiesSection.ts | styleAttribute": {
+    "message": "Isibaluli se-style"
+  },
+  "panels/elements/StylePropertiesSection.ts | userAgentStylesheet": {
+    "message": "isitayela seshidi lethuluzi lomsebenzisi"
+  },
+  "panels/elements/StylePropertiesSection.ts | viaInspector": {
+    "message": "ngesihloli"
+  },
+  "panels/elements/StylePropertyTreeElement.ts | copyAllCSSChanges": {
+    "message": "Kopisha zonke izinguquko ze-CSS"
+  },
   "panels/elements/StylePropertyTreeElement.ts | copyAllCssDeclarationsAsJs": {
     "message": "Kopisha zonke izimemezelo njenge-JS"
   },
@@ -4712,36 +4790,18 @@
   "panels/elements/StylePropertyTreeElement.ts | viewComputedValue": {
     "message": "Buka inani lekhompyutha"
   },
+  "panels/elements/StylesSidebarPane.ts | automaticDarkMode": {
+    "message": "Imodi emnyama ngokuzenzekelayo"
+  },
   "panels/elements/StylesSidebarPane.ts | clickToRevealLayer": {
     "message": "Chofoza ukuze wembule isendlalelo esihlahleni sesendlalelo"
   },
-  "panels/elements/StylesSidebarPane.ts | constructedStylesheet": {
-    "message": "i-stylesheet eyakhiwe"
-  },
-  "panels/elements/StylesSidebarPane.ts | copiedToClipboard": {
-    "message": "Kukopishelwe kubhodi lokunamathisela"
-  },
-  "panels/elements/StylesSidebarPane.ts | copyAllCSSChanges": {
-    "message": "Kopisha zonke izinguquko ze-CSS"
-  },
-  "panels/elements/StylesSidebarPane.ts | copyAllDeclarations": {
-    "message": "Kopisha zonke izimemezelo"
-  },
-  "panels/elements/StylesSidebarPane.ts | copyRule": {
-    "message": "Kopisha umthetho"
-  },
-  "panels/elements/StylesSidebarPane.ts | copySelector": {
-    "message": "Kopisha selector"
-  },
   "panels/elements/StylesSidebarPane.ts | cssPropertyName": {
     "message": "CSS igama lempahla: {PH1}"
   },
   "panels/elements/StylesSidebarPane.ts | cssPropertyValue": {
     "message": "CSS inani lempahla: {PH1}"
   },
-  "panels/elements/StylesSidebarPane.ts | cssSelector": {
-    "message": "Isikhethi se-CSS"
-  },
   "panels/elements/StylesSidebarPane.ts | filter": {
     "message": "Hlunga"
   },
@@ -4754,15 +4814,12 @@
   "panels/elements/StylesSidebarPane.ts | incrementdecrementWithMousewheelOne": {
     "message": "Ukunyuka/ukwehla ngesondo legudwane noma ngokhiye waphezulu/waphansi. {PH1}: R ±1, Shift: G ±1, Alt: B ±1"
   },
+  "panels/elements/StylesSidebarPane.ts | inheritedFromSPseudoOf": {
+    "message": "Kuzuzwe kusukela ::{PH1} i-pseudo ye "
+  },
   "panels/elements/StylesSidebarPane.ts | inheritedFroms": {
     "message": "Kuzuzwe njengefa lokuthi "
   },
-  "panels/elements/StylesSidebarPane.ts | injectedStylesheet": {
-    "message": "ijove isitayela seshidi"
-  },
-  "panels/elements/StylesSidebarPane.ts | insertStyleRuleBelow": {
-    "message": "Faka Umthetho Wesitayela Ngezansi"
-  },
   "panels/elements/StylesSidebarPane.ts | invalidPropertyValue": {
     "message": "Inani lesakhiwo elingavumelekile"
   },
@@ -4781,24 +4838,12 @@
   "panels/elements/StylesSidebarPane.ts | pseudoSElement": {
     "message": "I-Pseudo ::{PH1} i-element"
   },
-  "panels/elements/StylesSidebarPane.ts | sattributesStyle": {
-    "message": "{PH1}[Isitayela Sezibaluli]"
-  },
-  "panels/elements/StylesSidebarPane.ts | showAllPropertiesSMore": {
-    "message": "Bonisa Zonke Izakhiwo ({PH1} okuningi)"
-  },
-  "panels/elements/StylesSidebarPane.ts | styleAttribute": {
-    "message": "Isibaluli se-style"
+  "panels/elements/StylesSidebarPane.ts | toggleRenderingEmulations": {
+    "message": "Guqula ama-emulation afanayo okunikezela"
   },
   "panels/elements/StylesSidebarPane.ts | unknownPropertyName": {
     "message": "Igama lempahla engaziwa"
   },
-  "panels/elements/StylesSidebarPane.ts | userAgentStylesheet": {
-    "message": "isitayela seshidi lethuluzi lomsebenzisi"
-  },
-  "panels/elements/StylesSidebarPane.ts | viaInspector": {
-    "message": "ngesihloli"
-  },
   "panels/elements/components/AccessibilityTreeNode.ts | ignored": {
     "message": "Izitshiwe"
   },
@@ -5345,6 +5390,9 @@
   "panels/issues/CSPViolationsView.ts | filter": {
     "message": "Hlunga"
   },
+  "panels/issues/ComboBoxOfCheckBoxes.ts | genericMenuLabel": {
+    "message": "Imenyu"
+  },
   "panels/issues/CorsIssueDetailsView.ts | allowCredentialsValueFromHeader": {
     "message": "Access-Control-Allow-Credentials Inani lonhlokwana"
   },
@@ -6425,6 +6473,9 @@
   "panels/network/NetworkConfigView.ts | enterACustomUserAgent": {
     "message": "Faka umenzeli womsebenzisi"
   },
+  "panels/network/NetworkConfigView.ts | networkConditionsPanelShown": {
+    "message": "Izimo zenethiwekhi zibonisiwe"
+  },
   "panels/network/NetworkConfigView.ts | networkThrottling": {
     "message": "I-throttling yenethiwekhi"
   },
@@ -7040,6 +7091,9 @@
   "panels/network/RequestHeadersView.ts | general": {
     "message": "Okuvamile"
   },
+  "panels/network/RequestHeadersView.ts | headerOverrides": {
+    "message": "Ukukhipha unhlokweni"
+  },
   "panels/network/RequestHeadersView.ts | learnMore": {
     "message": "Funda kabanzi"
   },

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -2,10 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import type * as Protocol from '../../generated/protocol.js';
 
 import {cssMetadata, CustomVariableRegex, VariableRegex} from './CSSMetadata.js';
+
 import type {CSSModel} from './CSSModel.js';
 import type {CSSProperty} from './CSSProperty.js';
 import {CSSKeyframesRule, CSSStyleRule} from './CSSRule.js';
@@ -22,6 +23,7 @@ export class CSSMatchedStyles {
   readonly #inheritedStyles: Set<CSSStyleDeclaration>;
   readonly #mainDOMCascade: DOMInheritanceCascade;
   readonly #pseudoDOMCascades: Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>;
+  readonly #customHighlightPseudoDOMCascades: Map<string, DOMInheritanceCascade>;
   readonly #styleToDOMCascade: Map<CSSStyleDeclaration, DOMInheritanceCascade>;
 
   constructor(
@@ -48,10 +50,13 @@ export class CSSMatchedStyles {
     }
 
     this.#mainDOMCascade = this.buildMainCascade(inlinePayload, attributesPayload, matchedPayload, inheritedPayload);
-    this.#pseudoDOMCascades = this.buildPseudoCascades(pseudoPayload, inheritedPseudoPayload);
+    [this.#pseudoDOMCascades, this.#customHighlightPseudoDOMCascades] =
+        this.buildPseudoCascades(pseudoPayload, inheritedPseudoPayload);
 
     this.#styleToDOMCascade = new Map();
-    for (const domCascade of Array.from(this.#pseudoDOMCascades.values()).concat(this.#mainDOMCascade)) {
+    for (const domCascade of Array.from(this.#customHighlightPseudoDOMCascades.values())
+             .concat(Array.from(this.#pseudoDOMCascades.values()))
+             .concat(this.#mainDOMCascade)) {
       for (const style of domCascade.styles()) {
         this.#styleToDOMCascade.set(style, domCascade);
       }
@@ -206,36 +211,133 @@ export class CSSMatchedStyles {
     }
   }
 
+  /**
+   * Pseudo rule matches received via the inspector protocol are grouped by pseudo type.
+   * For custom highlight pseudos, we need to instead group the rule matches by highlight
+   * name in order to produce separate cascades for each highlight name. This is necessary
+   * so that styles of ::highlight(foo) are not shown as overriding styles of ::highlight(bar).
+   *
+   * This helper function takes a list of rule matches and generates separate NodeCascades
+   * for each custom highlight name that was matched.
+   */
+  private buildSplitCustomHighlightCascades(
+      rules: Protocol.CSS.RuleMatch[], node: DOMNode, isInherited: boolean,
+      pseudoCascades: Map<string, NodeCascade[]>): void {
+    const splitHighlightRules = new Map<string, CSSStyleDeclaration[]>();
+
+    for (let j = rules.length - 1; j >= 0; --j) {
+      const highlightNamesToMatchingSelectorIndices = this.customHighlightNamesToMatchingSelectorIndices(rules[j]);
+
+      for (const [highlightName, matchingSelectors] of highlightNamesToMatchingSelectorIndices) {
+        const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[j].rule);
+        this.#nodeForStyleInternal.set(pseudoRule.style, node);
+        if (isInherited) {
+          this.#inheritedStyles.add(pseudoRule.style);
+        }
+        this.addMatchingSelectors(node, pseudoRule, matchingSelectors);
+
+        const ruleListForHighlightName = splitHighlightRules.get(highlightName);
+        if (ruleListForHighlightName) {
+          ruleListForHighlightName.push(pseudoRule.style);
+        } else {
+          splitHighlightRules.set(highlightName, [pseudoRule.style]);
+        }
+      }
+    }
+
+    for (const [highlightName, highlightStyles] of splitHighlightRules) {
+      const nodeCascade = new NodeCascade(this, highlightStyles, isInherited, true /* #isHighlightPseudoCascade*/);
+      const cascadeListForHighlightName = pseudoCascades.get(highlightName);
+      if (cascadeListForHighlightName) {
+        cascadeListForHighlightName.push(nodeCascade);
+      } else {
+        pseudoCascades.set(highlightName, [nodeCascade]);
+      }
+    }
+  }
+
+  /**
+   * Return a mapping of the highlight names in the specified RuleMatch to
+   * the indices of selectors in that selector list with that highlight name.
+   *
+   * For example, consider the following ruleset:
+   * span::highlight(foo), div, #mySpan::highlight(bar), .highlighted::highlight(foo) {
+   *   color: blue;
+   * }
+   *
+   * For a <span id="mySpan" class="highlighted"></span>, a RuleMatch for that span
+   * would have matchingSelectors [0, 2, 3] indicating that the span
+   * matches all of the highlight selectors.
+   *
+   * For that RuleMatch, this function would produce the following map:
+   * {
+   *  "foo": [0, 3],
+   *  "bar": [2]
+   * }
+   *
+   * @param ruleMatch
+   * @returns A mapping of highlight names to lists of indices into the selector
+   * list associated with ruleMatch. The indices correspond to the selectors in the rule
+   * associated with the key's highlight name.
+   */
+  private customHighlightNamesToMatchingSelectorIndices(ruleMatch: Protocol.CSS.RuleMatch): Map<string, number[]> {
+    const highlightNamesToMatchingSelectors = new Map<string, number[]>();
+
+    for (let i = 0; i < ruleMatch.matchingSelectors.length; i++) {
+      const matchingSelectorIndex = ruleMatch.matchingSelectors[i];
+      const selectorText = ruleMatch.rule.selectorList.selectors[matchingSelectorIndex].text;
+      const highlightNameMatch = selectorText.match(/::highlight\((.*)\)/);
+      if (highlightNameMatch) {
+        const highlightName = highlightNameMatch[1];
+        const selectorsForName = highlightNamesToMatchingSelectors.get(highlightName);
+        if (selectorsForName) {
+          selectorsForName.push(matchingSelectorIndex);
+        } else {
+          highlightNamesToMatchingSelectors.set(highlightName, [matchingSelectorIndex]);
+        }
+      }
+    }
+    return highlightNamesToMatchingSelectors;
+  }
+
   private buildPseudoCascades(
       pseudoPayload: Protocol.CSS.PseudoElementMatches[],
       inheritedPseudoPayload: Protocol.CSS.InheritedPseudoElementMatches[]):
-      Map<Protocol.DOM.PseudoType, DOMInheritanceCascade> {
+      [Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>, Map<string, DOMInheritanceCascade>] {
     const pseudoInheritanceCascades = new Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>();
+    const customHighlightPseudoInheritanceCascades = new Map<string, DOMInheritanceCascade>();
     if (!pseudoPayload) {
-      return pseudoInheritanceCascades;
+      return [pseudoInheritanceCascades, customHighlightPseudoInheritanceCascades];
     }
 
     const pseudoCascades = new Map<Protocol.DOM.PseudoType, NodeCascade[]>();
+    const customHighlightPseudoCascades = new Map<string, NodeCascade[]>();
     for (let i = 0; i < pseudoPayload.length; ++i) {
       const entryPayload = pseudoPayload[i];
       // PseudoElement nodes are not created unless "content" css property is set.
       const pseudoElement = this.#nodeInternal.pseudoElements().get(entryPayload.pseudoType) || null;
       const pseudoStyles = [];
       const rules = entryPayload.matches || [];
-      for (let j = rules.length - 1; j >= 0; --j) {
-        const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[j].rule);
-        pseudoStyles.push(pseudoRule.style);
-        const nodeForStyle =
-            cssMetadata().isHighlightPseudoType(entryPayload.pseudoType) ? this.#nodeInternal : pseudoElement;
-        this.#nodeForStyleInternal.set(pseudoRule.style, nodeForStyle);
-        if (nodeForStyle) {
-          this.addMatchingSelectors(nodeForStyle, pseudoRule, rules[j].matchingSelectors);
+
+      if (entryPayload.pseudoType === Protocol.DOM.PseudoType.Highlight) {
+        this.buildSplitCustomHighlightCascades(
+            rules, this.#nodeInternal, false /* #isInherited */, customHighlightPseudoCascades);
+      } else {
+        for (let j = rules.length - 1; j >= 0; --j) {
+          const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[j].rule);
+          pseudoStyles.push(pseudoRule.style);
+          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 isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(entryPayload.pseudoType);
+        const nodeCascade = new NodeCascade(
+            this, pseudoStyles, false /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+        pseudoCascades.set(entryPayload.pseudoType, [nodeCascade]);
       }
-      const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(entryPayload.pseudoType);
-      const nodeCascade = new NodeCascade(
-          this, pseudoStyles, false /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
-      pseudoCascades.set(entryPayload.pseudoType, [nodeCascade]);
     }
 
     if (inheritedPseudoPayload) {
@@ -244,24 +346,30 @@ export class CSSMatchedStyles {
         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);
+          if (inheritedEntryPayload.pseudoType === Protocol.DOM.PseudoType.Highlight) {
+            this.buildSplitCustomHighlightCascades(
+                rules, parentNode, true /* #isInherited */, customHighlightPseudoCascades);
           } else {
-            pseudoCascades.set(inheritedEntryPayload.pseudoType, [nodeCascade]);
+            const pseudoStyles = [];
+            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]);
+            }
           }
         }
 
@@ -275,7 +383,11 @@ export class CSSMatchedStyles {
       pseudoInheritanceCascades.set(pseudoType, new DOMInheritanceCascade(nodeCascade));
     }
 
-    return pseudoInheritanceCascades;
+    for (const [highlightName, nodeCascade] of customHighlightPseudoCascades.entries()) {
+      customHighlightPseudoInheritanceCascades.set(highlightName, new DOMInheritanceCascade(nodeCascade));
+    }
+
+    return [pseudoInheritanceCascades, customHighlightPseudoInheritanceCascades];
   }
 
   private addMatchingSelectors(
@@ -405,6 +517,15 @@ export class CSSMatchedStyles {
     return new Set(this.#pseudoDOMCascades.keys());
   }
 
+  customHighlightPseudoStyles(highlightName: string): CSSStyleDeclaration[] {
+    const domCascade = this.#customHighlightPseudoDOMCascades.get(highlightName);
+    return domCascade ? domCascade.styles() : [];
+  }
+
+  customHighlightPseudoNames(): Set<string> {
+    return new Set(this.#customHighlightPseudoDOMCascades.keys());
+  }
+
   private containsInherited(style: CSSStyleDeclaration): boolean {
     const properties = style.allProperties();
     for (let i = 0; i < properties.length; ++i) {
@@ -462,6 +583,10 @@ export class CSSMatchedStyles {
     for (const domCascade of this.#pseudoDOMCascades.values()) {
       domCascade.reset();
     }
+
+    for (const domCascade of this.#customHighlightPseudoDOMCascades.values()) {
+      domCascade.reset();
+    }
   }
 }
 

package/front_end/core/sdk/CSSMetadata.ts

@@ -313,15 +313,8 @@ export class CSSMetadata {
   }
 
   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.Highlight || pseudoType === Protocol.DOM.PseudoType.Selection ||
         pseudoType === Protocol.DOM.PseudoType.TargetText || pseudoType === Protocol.DOM.PseudoType.GrammarError ||
         pseudoType === Protocol.DOM.PseudoType.SpellingError);
   }

package/front_end/generated/InspectorBackendCommands.js

@@ -273,38 +273,69 @@ export function registerCommands(inspectorBackend) {
       'Audits.GenericIssueErrorType', {CrossOriginPortalPostMessageError: 'CrossOriginPortalPostMessageError'});
   inspectorBackend.registerEnum('Audits.DeprecationIssueType', {
     AuthorizationCoveredByWildcard: 'AuthorizationCoveredByWildcard',
+    BatteryStatusInsecureOrigin: 'BatteryStatusInsecureOrigin',
+    CanRequestURLHTTPContainingNewline: 'CanRequestURLHTTPContainingNewline',
+    ChromeLoadTimesConnectionInfo: 'ChromeLoadTimesConnectionInfo',
+    ChromeLoadTimesFirstPaintAfterLoadTime: 'ChromeLoadTimesFirstPaintAfterLoadTime',
+    ChromeLoadTimesWasAlternateProtocolAvailable: 'ChromeLoadTimesWasAlternateProtocolAvailable',
     CookieWithTruncatingChar: 'CookieWithTruncatingChar',
     CrossOriginAccessBasedOnDocumentDomain: 'CrossOriginAccessBasedOnDocumentDomain',
     CrossOriginWindowAlert: 'CrossOriginWindowAlert',
     CrossOriginWindowConfirm: 'CrossOriginWindowConfirm',
+    CSSSelectorInternalMediaControlsOverlayCastButton: 'CSSSelectorInternalMediaControlsOverlayCastButton',
+    CustomCursorIntersectsViewport: 'CustomCursorIntersectsViewport',
     DeprecationExample: 'DeprecationExample',
     DocumentDomainSettingWithoutOriginAgentClusterHeader: 'DocumentDomainSettingWithoutOriginAgentClusterHeader',
+    EventPath: 'EventPath',
     GeolocationInsecureOrigin: 'GeolocationInsecureOrigin',
     GeolocationInsecureOriginDeprecatedNotRemoved: 'GeolocationInsecureOriginDeprecatedNotRemoved',
     GetUserMediaInsecureOrigin: 'GetUserMediaInsecureOrigin',
+    HostCandidateAttributeGetter: 'HostCandidateAttributeGetter',
+    InsecurePrivateNetworkSubresourceRequest: 'InsecurePrivateNetworkSubresourceRequest',
     LegacyConstraintGoogCpuOveruseDetection: 'LegacyConstraintGoogCpuOveruseDetection',
     LegacyConstraintGoogIPv6: 'LegacyConstraintGoogIPv6',
     LegacyConstraintGoogScreencastMinBitrate: 'LegacyConstraintGoogScreencastMinBitrate',
     LegacyConstraintGoogSuspendBelowMinBitrate: 'LegacyConstraintGoogSuspendBelowMinBitrate',
     LocalCSSFileExtensionRejected: 'LocalCSSFileExtensionRejected',
+    MediaElementAudioSourceNode: 'MediaElementAudioSourceNode',
+    MediaSourceAbortRemove: 'MediaSourceAbortRemove',
+    MediaSourceDurationTruncatingBuffered: 'MediaSourceDurationTruncatingBuffered',
+    NoSysexWebMIDIWithoutPermission: 'NoSysexWebMIDIWithoutPermission',
     NotificationInsecureOrigin: 'NotificationInsecureOrigin',
+    NotificationPermissionRequestedIframe: 'NotificationPermissionRequestedIframe',
     ObsoleteWebRtcCipherSuite: 'ObsoleteWebRtcCipherSuite',
+    PaymentRequestBasicCard: 'PaymentRequestBasicCard',
+    PaymentRequestShowWithoutGesture: 'PaymentRequestShowWithoutGesture',
     PictureSourceSrc: 'PictureSourceSrc',
     PrefixedCancelAnimationFrame: 'PrefixedCancelAnimationFrame',
     PrefixedRequestAnimationFrame: 'PrefixedRequestAnimationFrame',
+    PrefixedStorageInfo: 'PrefixedStorageInfo',
+    PrefixedVideoDisplayingFullscreen: 'PrefixedVideoDisplayingFullscreen',
+    PrefixedVideoEnterFullscreen: 'PrefixedVideoEnterFullscreen',
+    PrefixedVideoEnterFullScreen: 'PrefixedVideoEnterFullScreen',
+    PrefixedVideoExitFullscreen: 'PrefixedVideoExitFullscreen',
+    PrefixedVideoExitFullScreen: 'PrefixedVideoExitFullScreen',
+    PrefixedVideoSupportsFullscreen: 'PrefixedVideoSupportsFullscreen',
+    RangeExpand: 'RangeExpand',
+    RequestedSubresourceWithEmbeddedCredentials: 'RequestedSubresourceWithEmbeddedCredentials',
     RTCConstraintEnableDtlsSrtpFalse: 'RTCConstraintEnableDtlsSrtpFalse',
     RTCConstraintEnableDtlsSrtpTrue: 'RTCConstraintEnableDtlsSrtpTrue',
     RTCPeerConnectionComplexPlanBSdpUsingDefaultSdpSemantics:
         'RTCPeerConnectionComplexPlanBSdpUsingDefaultSdpSemantics',
     RTCPeerConnectionLegacyCreateWithMediaConstraints: 'RTCPeerConnectionLegacyCreateWithMediaConstraints',
+    RTCPeerConnectionSdpSemanticsPlanB: 'RTCPeerConnectionSdpSemanticsPlanB',
+    RtcpMuxPolicyNegotiate: 'RtcpMuxPolicyNegotiate',
     RTPDataChannel: 'RTPDataChannel',
+    SelectionAddRangeIntersect: 'SelectionAddRangeIntersect',
     SharedArrayBufferConstructedWithoutIsolation: 'SharedArrayBufferConstructedWithoutIsolation',
+    TextToSpeech_DisallowedByAutoplay: 'TextToSpeech_DisallowedByAutoplay',
     Untranslated: 'Untranslated',
     V8SharedArrayBufferConstructedInExtensionWithoutIsolation:
         'V8SharedArrayBufferConstructedInExtensionWithoutIsolation',
     WebCodecsVideoFrameDefaultTimestamp: 'WebCodecsVideoFrameDefaultTimestamp',
     XHRJSONEncodingDetection: 'XHRJSONEncodingDetection',
-    XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload: 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
+    XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload: 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload',
+    XRSupportsSession: 'XRSupportsSession'
   });
   inspectorBackend.registerEnum(
       'Audits.ClientHintIssueReason',
@@ -2103,6 +2134,7 @@ export function registerCommands(inspectorBackend) {
     InterestCohort: 'interest-cohort',
     JoinAdInterestGroup: 'join-ad-interest-group',
     KeyboardMap: 'keyboard-map',
+    LocalFonts: 'local-fonts',
     Magnetometer: 'magnetometer',
     Microphone: 'microphone',
     Midi: 'midi',
@@ -2450,7 +2482,6 @@ export function registerCommands(inspectorBackend) {
         {'name': 'marginLeft', 'type': 'number', 'optional': true},
         {'name': 'marginRight', 'type': 'number', 'optional': true},
         {'name': 'pageRanges', 'type': 'string', 'optional': true},
-        {'name': 'ignoreInvalidPageRanges', 'type': 'boolean', 'optional': true},
         {'name': 'headerTemplate', 'type': 'string', 'optional': true},
         {'name': 'footerTemplate', 'type': 'string', 'optional': true},
         {'name': 'preferCSSPageSize', 'type': 'boolean', 'optional': true},