chrome-devtools-frontend/front_end/core/sdk/CSSMatchedStyles.ts

Chrome DevTools UI

// Copyright 2016 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 Protocol from '../../generated/protocol.js';
import * as TextUtils from '../../models/text_utils/text_utils.js';

import {cssMetadata, VariableRegex} from './CSSMetadata.js';

import {type CSSModel} from './CSSModel.js';
import {type CSSProperty} from './CSSProperty.js';
import {CSSKeyframesRule, CSSPositionFallbackRule, CSSStyleRule} from './CSSRule.js';
import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
import {type DOMNode} from './DOMModel.js';

export function parseCSSVariableNameAndFallback(cssVariableValue: string): {
  variableName: string|null,
  fallback: string|null,
} {
  const match = cssVariableValue.match(/var\(\s*(--(?:[\s\w\P{ASCII}-]|\\.)+),?\s*(.*)\s*\)/u);
  return {variableName: match && match[1].trim(), fallback: match && match[2]};
}

interface CSSMatchedStylesPayload {
  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[];
  parentLayoutNodeId: Protocol.DOM.NodeId|undefined;
  positionFallbackRules: Protocol.CSS.CSSPositionFallbackRule[];
}

export class CSSMatchedStyles {
  readonly #cssModelInternal: CSSModel;
  readonly #nodeInternal: DOMNode;
  readonly #addedStyles: Map<CSSStyleDeclaration, DOMNode>;
  readonly #matchingSelectors: Map<number, Map<string, boolean>>;
  readonly #keyframesInternal: CSSKeyframesRule[];
  readonly #nodeForStyleInternal: Map<CSSStyleDeclaration, DOMNode|null>;
  readonly #inheritedStyles: Set<CSSStyleDeclaration>;
  readonly #mainDOMCascade: DOMInheritanceCascade;
  readonly #pseudoDOMCascades: Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>;
  readonly #customHighlightPseudoDOMCascades: Map<string, DOMInheritanceCascade>;
  readonly #styleToDOMCascade: Map<CSSStyleDeclaration, DOMInheritanceCascade>;
  readonly #parentLayoutNodeId: Protocol.DOM.NodeId|undefined;
  readonly #positionFallbackRules: CSSPositionFallbackRule[];

  constructor({
    cssModel,
    node,
    inlinePayload,
    attributesPayload,
    matchedPayload,
    pseudoPayload,
    inheritedPayload,
    inheritedPseudoPayload,
    animationsPayload,
    parentLayoutNodeId,
    positionFallbackRules,
  }: CSSMatchedStylesPayload) {
    this.#cssModelInternal = cssModel;
    this.#nodeInternal = node;
    this.#addedStyles = new Map();
    this.#matchingSelectors = new Map();
    this.#keyframesInternal = [];
    if (animationsPayload) {
      this.#keyframesInternal = animationsPayload.map(rule => new CSSKeyframesRule(cssModel, rule));
    }
    this.#positionFallbackRules = positionFallbackRules.map(rule => new CSSPositionFallbackRule(cssModel, rule));
    this.#parentLayoutNodeId = parentLayoutNodeId;

    this.#nodeForStyleInternal = new Map();
    this.#inheritedStyles = new Set();

    matchedPayload = cleanUserAgentPayload(matchedPayload);
    for (const inheritedResult of inheritedPayload) {
      inheritedResult.matchedCSSRules = cleanUserAgentPayload(inheritedResult.matchedCSSRules);
    }

    this.#mainDOMCascade = this.buildMainCascade(inlinePayload, attributesPayload, matchedPayload, inheritedPayload);
    [this.#pseudoDOMCascades, this.#customHighlightPseudoDOMCascades] =
        this.buildPseudoCascades(pseudoPayload, inheritedPseudoPayload);

    this.#styleToDOMCascade = new Map();
    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);
      }
    }

    function cleanUserAgentPayload(payload: Protocol.CSS.RuleMatch[]): Protocol.CSS.RuleMatch[] {
      for (const ruleMatch of payload) {
        cleanUserAgentSelectors(ruleMatch);
      }

      // Merge UA rules that are sequential and have similar selector/media.
      const cleanMatchedPayload = [];
      for (const ruleMatch of payload) {
        const lastMatch = cleanMatchedPayload[cleanMatchedPayload.length - 1];
        if (!lastMatch || ruleMatch.rule.origin !== 'user-agent' || lastMatch.rule.origin !== 'user-agent' ||
            ruleMatch.rule.selectorList.text !== lastMatch.rule.selectorList.text ||
            mediaText(ruleMatch) !== mediaText(lastMatch)) {
          cleanMatchedPayload.push(ruleMatch);
          continue;
        }
        mergeRule(ruleMatch, lastMatch);
      }
      return cleanMatchedPayload;

      function mergeRule(from: Protocol.CSS.RuleMatch, to: Protocol.CSS.RuleMatch): void {
        const shorthands = (new Map() as Map<string, string>);
        const properties = (new Map() as Map<string, string>);
        for (const entry of to.rule.style.shorthandEntries) {
          shorthands.set(entry.name, entry.value);
        }
        for (const entry of to.rule.style.cssProperties) {
          properties.set(entry.name, entry.value);
        }
        for (const entry of from.rule.style.shorthandEntries) {
          shorthands.set(entry.name, entry.value);
        }
        for (const entry of from.rule.style.cssProperties) {
          properties.set(entry.name, entry.value);
        }
        to.rule.style.shorthandEntries = [...shorthands.entries()].map(([name, value]) => ({name, value}));
        to.rule.style.cssProperties = [...properties.entries()].map(([name, value]) => ({name, value}));
      }

      function mediaText(ruleMatch: Protocol.CSS.RuleMatch): string|null {
        if (!ruleMatch.rule.media) {
          return null;
        }
        return ruleMatch.rule.media.map(media => media.text).join(', ');
      }

      function cleanUserAgentSelectors(ruleMatch: Protocol.CSS.RuleMatch): void {
        const {matchingSelectors, rule} = ruleMatch;
        if (rule.origin !== 'user-agent' || !matchingSelectors.length) {
          return;
        }
        rule.selectorList.selectors = rule.selectorList.selectors.filter((item, i) => matchingSelectors.includes(i));
        rule.selectorList.text = rule.selectorList.selectors.map(item => item.text).join(', ');
        ruleMatch.matchingSelectors = matchingSelectors.map((item, i) => i);
      }
    }
  }

  private buildMainCascade(
      inlinePayload: Protocol.CSS.CSSStyle|null, attributesPayload: Protocol.CSS.CSSStyle|null,
      matchedPayload: Protocol.CSS.RuleMatch[],
      inheritedPayload: Protocol.CSS.InheritedStyleEntry[]): DOMInheritanceCascade {
    const nodeCascades: NodeCascade[] = [];

    const nodeStyles: CSSStyleDeclaration[] = [];

    function addAttributesStyle(this: CSSMatchedStyles): void {
      if (!attributesPayload) {
        return;
      }
      const style = new CSSStyleDeclaration(this.#cssModelInternal, null, attributesPayload, Type.Attributes);
      this.#nodeForStyleInternal.set(style, this.#nodeInternal);
      nodeStyles.push(style);
    }

    // Inline style has the greatest specificity.
    if (inlinePayload && this.#nodeInternal.nodeType() === Node.ELEMENT_NODE) {
      const style = new CSSStyleDeclaration(this.#cssModelInternal, null, inlinePayload, Type.Inline);
      this.#nodeForStyleInternal.set(style, this.#nodeInternal);
      nodeStyles.push(style);
    }

    // Add rules in reverse order to match the cascade order.
    let addedAttributesStyle;
    for (let i = matchedPayload.length - 1; i >= 0; --i) {
      const rule = new CSSStyleRule(this.#cssModelInternal, matchedPayload[i].rule);
      if ((rule.isInjected() || rule.isUserAgent()) && !addedAttributesStyle) {
        // Show element's Style Attributes after all author rules.
        addedAttributesStyle = true;
        addAttributesStyle.call(this);
      }
      this.#nodeForStyleInternal.set(rule.style, this.#nodeInternal);
      nodeStyles.push(rule.style);
      this.addMatchingSelectors(this.#nodeInternal, rule, matchedPayload[i].matchingSelectors);
    }

    if (!addedAttributesStyle) {
      addAttributesStyle.call(this);
    }
    nodeCascades.push(new NodeCascade(this, nodeStyles, false /* #isInherited */));

    // Walk the node structure and identify styles with inherited properties.
    let parentNode: (DOMNode|null) = this.#nodeInternal.parentNode;
    for (let i = 0; parentNode && inheritedPayload && i < inheritedPayload.length; ++i) {
      const inheritedStyles = [];
      const entryPayload = inheritedPayload[i];
      const inheritedInlineStyle = entryPayload.inlineStyle ?
          new CSSStyleDeclaration(this.#cssModelInternal, null, entryPayload.inlineStyle, Type.Inline) :
          null;
      if (inheritedInlineStyle && this.containsInherited(inheritedInlineStyle)) {
        this.#nodeForStyleInternal.set(inheritedInlineStyle, parentNode);
        inheritedStyles.push(inheritedInlineStyle);
        this.#inheritedStyles.add(inheritedInlineStyle);
      }

      const inheritedMatchedCSSRules = entryPayload.matchedCSSRules || [];
      for (let j = inheritedMatchedCSSRules.length - 1; j >= 0; --j) {
        const inheritedRule = new CSSStyleRule(this.#cssModelInternal, inheritedMatchedCSSRules[j].rule);
        this.addMatchingSelectors(parentNode, inheritedRule, inheritedMatchedCSSRules[j].matchingSelectors);
        if (!this.containsInherited(inheritedRule.style)) {
          continue;
        }
        if (containsStyle(nodeStyles, inheritedRule.style) ||
            containsStyle(this.#inheritedStyles, inheritedRule.style)) {
          continue;
        }
        this.#nodeForStyleInternal.set(inheritedRule.style, parentNode);
        inheritedStyles.push(inheritedRule.style);
        this.#inheritedStyles.add(inheritedRule.style);
      }
      parentNode = parentNode.parentNode;
      nodeCascades.push(new NodeCascade(this, inheritedStyles, true /* #isInherited */));
    }

    return new DOMInheritanceCascade(nodeCascades);

    function containsStyle(
        styles: CSSStyleDeclaration[]|Set<CSSStyleDeclaration>, query: CSSStyleDeclaration): boolean {
      if (!query.styleSheetId || !query.range) {
        return false;
      }
      for (const style of styles) {
        if (query.styleSheetId === style.styleSheetId && style.range && query.range.equal(style.range)) {
          return true;
        }
      }
      return false;
    }
  }

  /**
   * 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<string, DOMInheritanceCascade>] {
    const pseudoInheritanceCascades = new Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>();
    const customHighlightPseudoInheritanceCascades = new Map<string, DOMInheritanceCascade>();
    if (!pseudoPayload) {
      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)?.at(-1) || null;
      const pseudoStyles = [];
      const rules = entryPayload.matches || [];

      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]);
      }
    }

    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 rules = inheritedEntryPayload.matches || [];

          if (inheritedEntryPayload.pseudoType === Protocol.DOM.PseudoType.Highlight) {
            this.buildSplitCustomHighlightCascades(
                rules, parentNode, true /* #isInherited */, customHighlightPseudoCascades);
          } else {
            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]);
            }
          }
        }

        parentNode = parentNode.parentNode;
      }
    }

    // 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));
    }

    for (const [highlightName, nodeCascade] of customHighlightPseudoCascades.entries()) {
      customHighlightPseudoInheritanceCascades.set(highlightName, new DOMInheritanceCascade(nodeCascade));
    }

    return [pseudoInheritanceCascades, customHighlightPseudoInheritanceCascades];
  }

  private addMatchingSelectors(
      this: CSSMatchedStyles, node: DOMNode, rule: CSSStyleRule, matchingSelectorIndices: number[]): void {
    for (const matchingSelectorIndex of matchingSelectorIndices) {
      const selector = rule.selectors[matchingSelectorIndex];
      selector && this.setSelectorMatches(node, selector.text, true);
    }
  }

  node(): DOMNode {
    return this.#nodeInternal;
  }

  cssModel(): CSSModel {
    return this.#cssModelInternal;
  }

  hasMatchingSelectors(rule: CSSStyleRule): boolean {
    const matchingSelectors = this.getMatchingSelectors(rule);
    return matchingSelectors.length > 0 && this.queryMatches(rule.style);
  }

  getParentLayoutNodeId(): Protocol.DOM.NodeId|undefined {
    return this.#parentLayoutNodeId;
  }

  getMatchingSelectors(rule: CSSStyleRule): number[] {
    const node = this.nodeForStyle(rule.style);
    if (!node || typeof node.id !== 'number') {
      return [];
    }
    const map = this.#matchingSelectors.get(node.id);
    if (!map) {
      return [];
    }
    const result = [];
    for (let i = 0; i < rule.selectors.length; ++i) {
      if (map.get(rule.selectors[i].text)) {
        result.push(i);
      }
    }
    return result;
  }

  async recomputeMatchingSelectors(rule: CSSStyleRule): Promise<void> {
    const node = this.nodeForStyle(rule.style);
    if (!node) {
      return;
    }
    const promises = [];
    for (const selector of rule.selectors) {
      promises.push(querySelector.call(this, node, selector.text));
    }
    await Promise.all(promises);

    async function querySelector(this: CSSMatchedStyles, node: DOMNode, selectorText: string): Promise<void> {
      const ownerDocument = node.ownerDocument;
      if (!ownerDocument) {
        return;
      }
      // We assume that "matching" property does not ever change during the
      // MatchedStyleResult's lifetime.
      if (typeof node.id === 'number') {
        const map = this.#matchingSelectors.get(node.id);
        if (map && map.has(selectorText)) {
          return;
        }
      }

      if (typeof ownerDocument.id !== 'number') {
        return;
      }
      const matchingNodeIds = await this.#nodeInternal.domModel().querySelectorAll(ownerDocument.id, selectorText);

      if (matchingNodeIds) {
        if (typeof node.id === 'number') {
          this.setSelectorMatches(node, selectorText, matchingNodeIds.indexOf(node.id) !== -1);
        } else {
          this.setSelectorMatches(node, selectorText, false);
        }
      }
    }
  }

  addNewRule(rule: CSSStyleRule, node: DOMNode): Promise<void> {
    this.#addedStyles.set(rule.style, node);
    return this.recomputeMatchingSelectors(rule);
  }

  private setSelectorMatches(node: DOMNode, selectorText: string, value: boolean): void {
    if (typeof node.id !== 'number') {
      return;
    }
    let map = this.#matchingSelectors.get(node.id);
    if (!map) {
      map = new Map();
      this.#matchingSelectors.set(node.id, map);
    }
    map.set(selectorText, value);
  }

  queryMatches(style: CSSStyleDeclaration): boolean {
    if (!style.parentRule) {
      return true;
    }
    const parentRule = style.parentRule as CSSStyleRule;
    const queries = [...parentRule.media, ...parentRule.containerQueries, ...parentRule.supports, ...parentRule.scopes];
    for (const query of queries) {
      if (!query.active()) {
        return false;
      }
    }
    return true;
  }

  nodeStyles(): CSSStyleDeclaration[] {
    return this.#mainDOMCascade.styles();
  }

  keyframes(): CSSKeyframesRule[] {
    return this.#keyframesInternal;
  }

  positionFallbackRules(): CSSPositionFallbackRule[] {
    return this.#positionFallbackRules;
  }

  pseudoStyles(pseudoType: Protocol.DOM.PseudoType): CSSStyleDeclaration[] {
    const domCascade = this.#pseudoDOMCascades.get(pseudoType);
    return domCascade ? domCascade.styles() : [];
  }

  pseudoTypes(): Set<Protocol.DOM.PseudoType> {
    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) {
      const property = properties[i];
      // Does this style contain non-overridden inherited property?
      if (property.activeInStyle() && cssMetadata().isPropertyInherited(property.name)) {
        return true;
      }
    }
    return false;
  }

  nodeForStyle(style: CSSStyleDeclaration): DOMNode|null {
    return this.#addedStyles.get(style) || this.#nodeForStyleInternal.get(style) || null;
  }

  availableCSSVariables(style: CSSStyleDeclaration): string[] {
    const domCascade = this.#styleToDOMCascade.get(style) || null;
    return domCascade ? domCascade.findAvailableCSSVariables(style) : [];
  }

  computeCSSVariable(style: CSSStyleDeclaration, variableName: string): string|null {
    const domCascade = this.#styleToDOMCascade.get(style) || null;
    return domCascade ? domCascade.computeCSSVariable(style, variableName) : null;
  }

  computeValue(style: CSSStyleDeclaration, value: string): string|null {
    const domCascade = this.#styleToDOMCascade.get(style) || null;
    return domCascade ? domCascade.computeValue(style, value) : null;
  }

  /**
   * Same as computeValue, but to be used for `var(--#name [,...])` values only
   */
  computeSingleVariableValue(style: CSSStyleDeclaration, cssVariableValue: string): {
    computedValue: string|null,
    fromFallback: boolean,
  }|null {
    const domCascade = this.#styleToDOMCascade.get(style) || null;
    return domCascade ? domCascade.computeSingleVariableValue(style, cssVariableValue) : null;
  }

  isInherited(style: CSSStyleDeclaration): boolean {
    return this.#inheritedStyles.has(style);
  }

  propertyState(property: CSSProperty): PropertyState|null {
    const domCascade = this.#styleToDOMCascade.get(property.ownerStyle);
    return domCascade ? domCascade.propertyState(property) : null;
  }

  resetActiveProperties(): void {
    this.#mainDOMCascade.reset();
    for (const domCascade of this.#pseudoDOMCascades.values()) {
      domCascade.reset();
    }

    for (const domCascade of this.#customHighlightPseudoDOMCascades.values()) {
      domCascade.reset();
    }
  }
}

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,
      isHighlightPseudoCascade: boolean = false) {
    this.#matchedStyles = matchedStyles;
    this.styles = styles;
    this.#isInherited = isInherited;
    this.#isHighlightPseudoCascade = isHighlightPseudoCascade;
    this.propertiesState = new Map();
    this.activeProperties = new Map();
  }

  computeActiveProperties(): void {
    this.propertiesState.clear();
    this.activeProperties.clear();

    for (let i = this.styles.length - 1; i >= 0; i--) {
      const style = this.styles[i];
      const rule = style.parentRule;
      // Compute cascade for CSSStyleRules only.
      if (rule && !(rule instanceof CSSStyleRule)) {
        continue;
      }
      if (rule && !this.#matchedStyles.hasMatchingSelectors(rule)) {
        continue;
      }

      for (const property of style.allProperties()) {
        // Do not pick non-inherited properties from inherited styles.
        const metadata = cssMetadata();

        // All properties are inherited for highlight pseudos.
        if (this.#isInherited && !this.#isHighlightPseudoCascade && !metadata.isPropertyInherited(property.name)) {
          continue;
        }

        // When a property does not have a range in an otherwise ranged CSSStyleDeclaration,
        // we consider it as a non-leading property (see computeLeadingProperties()), and most
        // of them are computed longhands. We exclude these from activeProperties calculation,
        // and use parsed longhands instead (see below).
        if (style.range && !property.range) {
          continue;
        }

        if (!property.activeInStyle()) {
          this.propertiesState.set(property, PropertyState.Overloaded);
          continue;
        }

        const canonicalName = metadata.canonicalPropertyName(property.name);
        this.updatePropertyState(property, canonicalName);
        for (const longhand of property.getLonghandProperties()) {
          if (metadata.isCSSPropertyName(longhand.name)) {
            this.updatePropertyState(longhand, longhand.name);
          }
        }
      }
    }
  }

  private updatePropertyState(propertyWithHigherSpecificity: CSSProperty, canonicalName: string): void {
    const activeProperty = this.activeProperties.get(canonicalName);
    if (activeProperty?.important && !propertyWithHigherSpecificity.important) {
      this.propertiesState.set(propertyWithHigherSpecificity, PropertyState.Overloaded);
      return;
    }

    if (activeProperty) {
      this.propertiesState.set(activeProperty, PropertyState.Overloaded);
    }
    this.propertiesState.set(propertyWithHigherSpecificity, PropertyState.Active);
    this.activeProperties.set(canonicalName, propertyWithHigherSpecificity);
  }
}

class DOMInheritanceCascade {
  readonly #nodeCascades: NodeCascade[];
  readonly #propertiesState: Map<CSSProperty, PropertyState>;
  readonly #availableCSSVariables: Map<NodeCascade, Map<string, string|null>>;
  readonly #computedCSSVariables: Map<NodeCascade, Map<string, string|null>>;
  #initialized: boolean;
  readonly #styleToNodeCascade: Map<CSSStyleDeclaration, NodeCascade>;
  constructor(nodeCascades: NodeCascade[]) {
    this.#nodeCascades = nodeCascades;
    this.#propertiesState = new Map();
    this.#availableCSSVariables = new Map();
    this.#computedCSSVariables = new Map();
    this.#initialized = false;

    this.#styleToNodeCascade = new Map();
    for (const nodeCascade of nodeCascades) {
      for (const style of nodeCascade.styles) {
        this.#styleToNodeCascade.set(style, nodeCascade);
      }
    }
  }

  findAvailableCSSVariables(style: CSSStyleDeclaration): string[] {
    const nodeCascade = this.#styleToNodeCascade.get(style);
    if (!nodeCascade) {
      return [];
    }
    this.ensureInitialized();
    const availableCSSVariables = this.#availableCSSVariables.get(nodeCascade);
    if (!availableCSSVariables) {
      return [];
    }
    return Array.from(availableCSSVariables.keys());
  }

  computeCSSVariable(style: CSSStyleDeclaration, variableName: string): string|null {
    const nodeCascade = this.#styleToNodeCascade.get(style);
    if (!nodeCascade) {
      return null;
    }
    this.ensureInitialized();
    const availableCSSVariables = this.#availableCSSVariables.get(nodeCascade);
    const computedCSSVariables = this.#computedCSSVariables.get(nodeCascade);
    if (!availableCSSVariables || !computedCSSVariables) {
      return null;
    }
    return this.innerComputeCSSVariable(availableCSSVariables, computedCSSVariables, variableName);
  }

  computeValue(style: CSSStyleDeclaration, value: string): string|null {
    const nodeCascade = this.#styleToNodeCascade.get(style);
    if (!nodeCascade) {
      return null;
    }
    this.ensureInitialized();
    const availableCSSVariables = this.#availableCSSVariables.get(nodeCascade);
    const computedCSSVariables = this.#computedCSSVariables.get(nodeCascade);
    if (!availableCSSVariables || !computedCSSVariables) {
      return null;
    }
    return this.innerComputeValue(availableCSSVariables, computedCSSVariables, value);
  }

  computeSingleVariableValue(style: CSSStyleDeclaration, cssVariableValue: string): {
    computedValue: string|null,
    fromFallback: boolean,
  }|null {
    const nodeCascade = this.#styleToNodeCascade.get(style);
    if (!nodeCascade) {
      return null;
    }
    this.ensureInitialized();
    const availableCSSVariables = this.#availableCSSVariables.get(nodeCascade);
    const computedCSSVariables = this.#computedCSSVariables.get(nodeCascade);
    if (!availableCSSVariables || !computedCSSVariables) {
      return null;
    }
    const computedValue = this.innerComputeValue(availableCSSVariables, computedCSSVariables, cssVariableValue);
    const {variableName} = parseCSSVariableNameAndFallback(cssVariableValue);

    return {computedValue, fromFallback: variableName !== null && !availableCSSVariables.has(variableName)};
  }

  private innerComputeCSSVariable(
      availableCSSVariables: Map<string, string|null>, computedCSSVariables: Map<string, string|null>,
      variableName: string): string|null {
    if (!availableCSSVariables.has(variableName)) {
      return null;
    }
    if (computedCSSVariables.has(variableName)) {
      return computedCSSVariables.get(variableName) || null;
    }
    // Set dummy value to avoid infinite recursion.
    computedCSSVariables.set(variableName, null);
    const definedValue = availableCSSVariables.get(variableName);
    if (definedValue === undefined || definedValue === null) {
      return null;
    }
    const computedValue = this.innerComputeValue(availableCSSVariables, computedCSSVariables, definedValue);
    computedCSSVariables.set(variableName, computedValue);
    return computedValue;
  }

  private innerComputeValue(
      availableCSSVariables: Map<string, string|null>, computedCSSVariables: Map<string, string|null>,
      value: string): string|null {
    const results = TextUtils.TextUtils.Utils.splitStringByRegexes(value, [VariableRegex]);
    const tokens = [];
    for (const result of results) {
      if (result.regexIndex === -1) {
        tokens.push(result.value);
        continue;
      }
      // process var() function
      const {variableName, fallback} = parseCSSVariableNameAndFallback(result.value);
      if (!variableName) {
        return null;
      }
      const computedValue = this.innerComputeCSSVariable(availableCSSVariables, computedCSSVariables, variableName);
      if (computedValue === null && !fallback) {
        return null;
      }
      if (computedValue === null) {
        tokens.push(fallback);
      } else {
        tokens.push(computedValue);
      }
    }
    return tokens.map(token => token ? token.trim() : '').join(' ');
  }

  styles(): CSSStyleDeclaration[] {
    return Array.from(this.#styleToNodeCascade.keys());
  }

  propertyState(property: CSSProperty): PropertyState|null {
    this.ensureInitialized();
    return this.#propertiesState.get(property) || null;
  }

  reset(): void {
    this.#initialized = false;
    this.#propertiesState.clear();
    this.#availableCSSVariables.clear();
    this.#computedCSSVariables.clear();
  }

  private ensureInitialized(): void {
    if (this.#initialized) {
      return;
    }
    this.#initialized = true;

    const activeProperties = new Map<string, CSSProperty>();
    for (const nodeCascade of this.#nodeCascades) {
      nodeCascade.computeActiveProperties();
      for (const [property, state] of nodeCascade.propertiesState) {
        if (state === PropertyState.Overloaded) {
          this.#propertiesState.set(property, PropertyState.Overloaded);
          continue;
        }
        const canonicalName = cssMetadata().canonicalPropertyName(property.name);
        if (activeProperties.has(canonicalName)) {
          this.#propertiesState.set(property, PropertyState.Overloaded);
          continue;
        }
        activeProperties.set(canonicalName, property);
        this.#propertiesState.set(property, PropertyState.Active);
      }
    }
    // If every longhand of the shorthand is not active, then the shorthand is not active too.
    for (const [canonicalName, shorthandProperty] of activeProperties) {
      const shorthandStyle = shorthandProperty.ownerStyle;
      const longhands = shorthandProperty.getLonghandProperties();
      if (!longhands.length) {
        continue;
      }
      let hasActiveLonghands = false;
      for (const longhand of longhands) {
        const longhandCanonicalName = cssMetadata().canonicalPropertyName(longhand.name);
        const longhandActiveProperty = activeProperties.get(longhandCanonicalName);
        if (!longhandActiveProperty) {
          continue;
        }
        if (longhandActiveProperty.ownerStyle === shorthandStyle) {
          hasActiveLonghands = true;
          break;
        }
      }
      if (hasActiveLonghands) {
        continue;
      }
      activeProperties.delete(canonicalName);
      this.#propertiesState.set(shorthandProperty, PropertyState.Overloaded);
    }

    // Work inheritance chain backwards to compute visible CSS Variables.
    const accumulatedCSSVariables = new Map<string, string|null>();
    for (let i = this.#nodeCascades.length - 1; i >= 0; --i) {
      const nodeCascade = this.#nodeCascades[i];
      const variableNames = [];
      for (const entry of nodeCascade.activeProperties.entries()) {
        const propertyName = (entry[0] as string);
        const property = (entry[1] as CSSProperty);
        if (propertyName.startsWith('--')) {
          accumulatedCSSVariables.set(propertyName, property.value);
          variableNames.push(propertyName);
        }
      }
      const availableCSSVariablesMap = new Map(accumulatedCSSVariables);
      const computedVariablesMap = new Map();
      this.#availableCSSVariables.set(nodeCascade, availableCSSVariablesMap);
      this.#computedCSSVariables.set(nodeCascade, computedVariablesMap);
      for (const variableName of variableNames) {
        accumulatedCSSVariables.delete(variableName);
        accumulatedCSSVariables.set(
            variableName, this.innerComputeCSSVariable(availableCSSVariablesMap, computedVariablesMap, variableName));
      }
    }
  }
}

// TODO(crbug.com/1167717): Make this a const enum again
// eslint-disable-next-line rulesdir/const_enum
export enum PropertyState {
  Active = 'Active',
  Overloaded = 'Overloaded',
}