Function deepWatchForInlineStyles

src/inject/dynamic-theme/inline-style.ts:177–273

(
    root: Document | ShadowRoot,
    elementStyleDidChange: (element: HTMLElement) => void,
    shadowRootDiscovered: (root: ShadowRoot) => void,
)

}

function deepWatchForInlineStyles(
    root: Document | ShadowRoot,
    elementStyleDidChange: (element: HTMLElement) => void,
    shadowRootDiscovered: (root: ShadowRoot) => void,
): void {
    if (treeObservers.has(root)) {
        treeObservers.get(root)!.disconnect();
        attrObservers.get(root)!.disconnect();
    }

    const discoveredNodes = new WeakSet<Node>();

    function discoverNodes(node: Node) {
        getInlineStyleElements(node).forEach((el: HTMLElement) => {
            if (discoveredNodes.has(el)) {
                return;
            }
            discoveredNodes.add(el);
            elementStyleDidChange(el);
        });
        iterateShadowHosts(node, (n) => {
            if (discoveredNodes.has(n)) {
                return;
            }
            discoveredNodes.add(n);
            shadowRootDiscovered(n.shadowRoot!);
            deepWatchForInlineStyles(n.shadowRoot!, elementStyleDidChange, shadowRootDiscovered);
        });
        variablesStore.matchVariablesAndDependents();
    }

    const treeObserver = createOptimizedTreeObserver(root, {
        onMinorMutations: (_root, {additions}) => {
            additions.forEach((added) => discoverNodes(added));
        },
        onHugeMutations: () => {
            discoverNodes(root);
        },
    });
    treeObservers.set(root, treeObserver);

    let attemptCount = 0;
    let start: number | null = null;
    const ATTEMPTS_INTERVAL = getDuration({seconds: 10});
    const RETRY_TIMEOUT = getDuration({seconds: 2});
    const MAX_ATTEMPTS_COUNT = 50;
    let cache: MutationRecord[] = [];
    let timeoutId: ReturnType<typeof setTimeout> | null = null;

    const handleAttributeMutations = throttle((mutations: MutationRecord[]) => {
        const handledTargets = new Set<Node>();
        mutations.forEach((m) => {
            const target = m.target as HTMLElement;
            if (handledTargets.has(target)) {
                return;
            }
            if (INLINE_STYLE_ATTRS.includes(m.attributeName!)) {
                handledTargets.add(target);