UNPKG

chrome-devtools-frontend

Version:
942 lines (842 loc) • 37.7 kB
// 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', }