browser-debugger-cli 0.10.0 → 0.12.0

package/dist/runtime/dom/inspectScripts.d.ts

@@ -26,6 +26,10 @@ export interface RawTreeNode {
     display: string;
     /** Text of an element without block-level children */
     text?: string;
+    /** Reached through a slot or a `display: contents` wrapper (`slot.label`, `div.row (contents)`) */
+    via?: string;
+    /** In the shadow root of its parent */
+    shadow?: boolean;
     children?: RawTreeNode[];
     /** Rendered element children (at the depth limit) */
     childCount?: number;
@@ -38,6 +42,15 @@ export interface RawBackground {
     color: string;
     /** Has a background image or gradient */
     image: boolean;
+    /** Its own opacity, below 1 (it fades its background and everything inside it) */
+    opacity?: number;
+}
+/** A rule that would set a property if its `@media`/`@supports` condition applied */
+export interface InactiveRule {
+    selector: string;
+    /** e.g. `@media (max-width: 600px)` */
+    condition: string;
+    value: string;
 }
 /** What {@link INSPECT_PAGE_JS} returns */
 export interface RawInspect {
@@ -56,15 +69,31 @@ export interface RawInspect {
         style: string;
         weight: string;
     };
-    /** Has text to describe: own text, only inline content with text, or a form control */
+    /**
+     * Has text to describe: a text field or select, its own text where most
+     * of its text is, or only inline content with text
+     */
     textual: boolean;
     formControl: boolean;
+    /**
+     * Label of the descendant that draws most of the text (`abbr`,
+     * `slot.button__label`) when it is not the element itself; its styles are
+     * the text's
+     */
+    textHolder?: string;
+    /** Its text (the element, or the descendant that draws it) has a box and is not `visibility: hidden` */
+    rendered: boolean;
+    /** Visible text is drawn in it (or it is a text field or select) */
+    hasText: boolean;
+    /**
+     * The first family of the text's `font-family` is a web font (`@font-face`)
+     * the page loaded: whatever name the font file gives, it is not a fallback
+     */
+    familyLoaded?: boolean;
     /** Replaced element (img, svg and its shapes, video, canvas, iframe, embed, object, form controls): sized by its content */
     replaced?: boolean;
     /** An SVG element (SVG properties are not noise for it) */
     svg?: boolean;
-    /** A text node is a direct child (the rendered font is read from the element itself) */
-    ownText: boolean;
     /** Computed (not resolved) width and height: `auto`, `200px`, `50%`, … */
     typed: {
         width: string;
@@ -86,6 +115,8 @@ export interface RawInspect {
         left?: number;
         right?: number;
     };
+    /** Its text is cut off: clipped by `overflow` (ellipsis or not) or by a line clamp, on it or its text holder */
+    truncated?: boolean;
     /** Content size when it overflows the box */
     scroll?: {
         w: number;
@@ -99,6 +130,12 @@ export interface RawInspect {
     canvasDark: boolean;
     /** Opacity of the element times that of its ancestors */
     opacity?: number;
+    /**
+     * What makes the text's contrast approximate: blend modes and filters on
+     * it or its ancestors, painted content behind it that is not an ancestor
+     * (a canvas, a positioned layer) or on top of it
+     */
+    paintRisks?: string[];
     tree?: RawTreeNode[];
     hiddenChildren: number;
     /** Children the walk did not reach ({@link TREE_NODE_CAP}) */
@@ -109,24 +146,60 @@ export interface RawInspect {
      * given per side, e.g. `top 1px solid … / right 0px none …`
      */
     props?: Record<string, string>;
+    /** Font size of the root element (px), for rem custom properties in `--props` */
+    rootFontSize?: number;
     /** `--props` names the browser does not know as CSS properties */
     unknownProps?: string[];
-    /** Properties of running CSS transitions, and names of running animations */
+    /** The `--why` property is not a CSS property */
+    unknownWhy?: boolean;
+    /** Longhands of the `--why` property when it is a shorthand (as the browser expands it) */
+    whyLonghands?: string[];
+    /** Computed value of the `--why` shorthand (`getComputedStyle` writes it as one value) */
+    whyComputed?: string;
+    /** Rules for the element that set the `--why` property under a condition that does not apply now */
+    whyInactive?: InactiveRule[];
+    /** Properties of running CSS transitions, and names of running animations (time-based: scroll-driven ones do not change on their own) */
     animating: string[];
 }
 /**
  * Page-side function run on the element (`this`), see {@link RawInspect}.
- * Arguments: tree depth, and the property names asked for with `--props`
- * (or null).
+ * Arguments: tree depth, the property names asked for with `--props` (or
+ * null) and the `--why` property (or null).
  */
-export declare const INSPECT_PAGE_JS = "function (depth, props) {\n  const el = this;\n  const view = el.ownerDocument.defaultView;\n  const tree = ((view) => {\n  const style = (n, pseudo) => view.getComputedStyle(n, pseudo);\n  const skipped = /^(script|style|template|link|meta|noscript|title|head|base)$/;\n  const flatParent = (n) => n.assignedSlot || n.parentElement || (n.parentNode && n.parentNode.host) || null;\n  const layoutParent = (n) => {\n    let p = flatParent(n);\n    while (p && style(p).display === 'contents') p = flatParent(p);\n    return p;\n  };\n  const children = (n) => {\n    const out = [];\n    const add = (c) => {\n      if (skipped.test(c.localName)) return;\n      if (c.localName === 'slot') {\n        const assigned = c.assignedElements({ flatten: true });\n        (assigned.length ? assigned : Array.from(c.children)).forEach(add);\n      } else if (style(c).display === 'contents') {\n        Array.from((c.shadowRoot || c).children).forEach(add);\n      } else {\n        out.push(c);\n      }\n    };\n    Array.from((n.shadowRoot || n).children).forEach(add);\n    return out;\n  };\n  const rendered = (n) => n.getClientRects().length > 0 &&\n    (!n.checkVisibility || n.checkVisibility({ visibilityProperty: true }));\n  const container = (n) => children(n).some((c) => rendered(c) && !/^inline/.test(style(c).display));\n  return { style, flatParent, layoutParent, children, rendered, container };\n})(view);\n  const textOf = (el) => {\n  const isSensitive = (el) => {\n  const autocomplete = el.getAttribute('autocomplete') || '';\n  if (/(^|\\s)(cc-[a-z-]+|one-time-code|current-password|new-password)(\\s|$)/i.test(autocomplete)) return true;\n  if (el.type === 'password' || /^password$/i.test(el.getAttribute('type') || '')) return true;\n  const names = [el.getAttribute('name'), el.id, autocomplete].join(' ');\n  if (/passw|passwd|pwd|passcode|(^|[^a-z])otp([^a-z]|$)|cvv|cvc/i.test(names)) return true;\n  try {\n    const security = el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue('-webkit-text-security');\n    return Boolean(security) && security !== 'none';\n  } catch (e) {\n    return false;\n  }\n};\n  const clean = (text) => String(text || '').replace(/\\s+/g, ' ').trim().slice(0, 200);\n  if (el.localName === 'input' && el.type === 'hidden') return '';\n  if (el.localName === 'input' || el.localName === 'textarea') {\n    return el.value && isSensitive(el) ? '\u2022\u2022\u2022\u2022' : clean(el.value);\n  }\n  if (el.localName === 'select') {\n    const chosen = clean(Array.from(el.selectedOptions || [], (o) => o.label).join(', '));\n    return chosen && isSensitive(el) ? '\u2022\u2022\u2022\u2022' : chosen;\n  }\n  const outsideControls = () => {\n    const parts = [];\n    const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT);\n    for (let n = walker.nextNode(); n && parts.length < 400; n = walker.nextNode()) {\n      const holder = n.parentElement;\n      if (!holder || holder.closest('select, textarea, script, style, template, noscript')) continue;\n      if (holder.checkVisibility && !holder.checkVisibility({ visibilityProperty: true })) continue;\n      parts.push(n.data);\n    }\n    return parts.join(' ');\n  };\n  const holdsControls = Boolean(el.querySelector && el.querySelector('select, textarea'));\n  const raw = holdsControls ? outsideControls() : typeof el.innerText === 'string' ? el.innerText : el.textContent;\n  const text = clean(raw);\n  const view = el.ownerDocument.defaultView;\n  const security = view ? view.getComputedStyle(el).getPropertyValue('-webkit-text-security') : '';\n  return text && security && security !== 'none' ? '\u2022\u2022\u2022\u2022' : text;\n};\n  const describe = (node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');\n  const s = tree.style(el);\n  const formControl = /^(input|textarea|select|button)$/.test(el.localName);\n  const content = textOf(el);\n  const parent = tree.layoutParent(el);\n  const typedMap = el.computedStyleMap ? el.computedStyleMap() : null;\n  const typed = (name) => { try { return typedMap ? String(typedMap.get(name)) : ''; } catch (e) { return ''; } };\n  const result = {\n    tag: el.localName,\n    id: el.id || '',\n    classes: el.classList ? Array.from(el.classList) : [],\n    context: ((el) => {\n  const describe = (node) => node.tagName.toLowerCase() + (node.id ? '#' + node.id : '');\n  const parts = [];\n  for (let doc = el.ownerDocument; doc && doc.defaultView && doc.defaultView.frameElement; ) {\n    const frame = doc.defaultView.frameElement;\n    parts.unshift(describe(frame));\n    doc = frame.ownerDocument;\n  }\n  const root = el.getRootNode();\n  if (root.host) parts.push('shadow root of <' + describe(root.host) + '>');\n  return parts.join(' > ');\n})(el),\n    content: content,\n    textual: formControl || (content !== '' && !tree.container(el)),\n    formControl: formControl,\n    replaced: el instanceof SVGElement || /^(img|video|canvas|iframe|embed|object|input|textarea|select|button|meter|progress)$/.test(el.localName),\n    svg: el.namespaceURI === 'http://www.w3.org/2000/svg',\n    ownText: Array.from(el.childNodes).some((n) => n.nodeType === 3 && n.data.trim() !== ''),\n    typed: { width: typed('width'), height: typed('height') },\n    parent: parent ? describe(parent) : undefined,\n    animating: el.getAnimations ? [...new Set(el.getAnimations().filter((a) => a.playState === 'running').map((a) => a.transitionProperty || a.animationName || 'animation'))] : []\n  };\n  if (/^(input|textarea)$/.test(el.localName) && el.placeholder && !el.value) {\n    result.placeholder = el.placeholder.replace(/\\s+/g, ' ').trim();\n    const placeholderStyle = tree.style(el, '::placeholder');\n    result.placeholderColor = placeholderStyle.color;\n    result.placeholderFont = { style: placeholderStyle.fontStyle, weight: placeholderStyle.fontWeight };\n  }\n  if (el.clientWidth > 0 && (el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1)) {\n    result.scroll = { w: el.scrollWidth, h: el.scrollHeight, clientW: el.clientWidth, clientH: el.clientHeight };\n  }\n  if (props) {\n    const known = (name) => name.startsWith('--') || CSS.supports(name, 'inherit');\n    const valueOf = (name) => {\n      const value = s.getPropertyValue(name).trim();\n      if (value !== '' || name.startsWith('--')) return value;\n      const sides = ['top', 'right', 'bottom', 'left'].map((side) => name + '-' + side).filter(known);\n      return sides.map((side) => side.slice(name.length + 1) + ' ' + s.getPropertyValue(side).trim()).join(' / ');\n    };\n    result.props = Object.fromEntries(props.filter(known).map((name) => [name, valueOf(name)]));\n    result.unknownProps = props.filter((name) => !known(name));\n  }\n  return Object.assign(result,\n    ((el, tree) => {\n  const parent = tree.layoutParent(el);\n  if (!parent || tree.style(el).position === 'fixed' || !tree.rendered(el)) return {};\n  const r = el.getBoundingClientRect();\n  const p = parent.getBoundingClientRect();\n  const ps = tree.style(parent);\n  const edge = (side) => parseFloat(ps['border-' + side + '-width']) + parseFloat(ps['padding-' + side]);\n  const inParent = {\n    left: r.left - (p.left + edge('left')),\n    top: r.top - (p.top + edge('top')),\n    right: (p.right - edge('right')) - r.right,\n    bottom: (p.bottom - edge('bottom')) - r.bottom\n  };\n  const inFlow = (n) => n !== el && tree.rendered(n) && !/^(absolute|fixed)$/.test(tree.style(n).position);\n  const siblings = tree.children(parent);\n  const at = siblings.indexOf(el);\n  const before = siblings.slice(0, Math.max(at, 0)).reverse().find(inFlow);\n  const after = at < 0 ? undefined : siblings.slice(at + 1).find(inFlow);\n  const gaps = {};\n  for (const sibling of [before, after]) {\n    if (!sibling) continue;\n    const s = sibling.getBoundingClientRect();\n    if (s.bottom <= r.top + 0.5) gaps.top = r.top - s.bottom;\n    else if (s.top >= r.bottom - 0.5) gaps.bottom = s.top - r.bottom;\n    else if (s.right <= r.left + 0.5) gaps.left = r.left - s.right;\n    else if (s.left >= r.right - 0.5) gaps.right = s.left - r.right;\n  }\n  return { inParent: inParent, siblings: gaps };\n})(el, tree),\n    ((el, tree, view) => {\n  const backgrounds = [];\n  let opacity = 1;\n  for (let n = el; n && backgrounds.length < 60; n = tree.flatParent(n)) {\n    const s = tree.style(n);\n    backgrounds.push({ color: s.backgroundColor, image: s.backgroundImage !== 'none' });\n    opacity *= Number(s.opacity) || 0;\n  }\n  const doc = el.ownerDocument;\n  const meta = doc.querySelector('meta[name=\"color-scheme\"]');\n  const rootScheme = tree.style(doc.documentElement).colorScheme;\n  const scheme = rootScheme && rootScheme !== 'normal' ? rootScheme : (meta && meta.content) || '';\n  const prefersDark = view.matchMedia('(prefers-color-scheme: dark)').matches;\n  const canvasDark = /dark/.test(scheme) && (!/light/.test(scheme) || prefersDark);\n  return { backgrounds: backgrounds, canvasDark: canvasDark, opacity: opacity };\n})(el, tree, view),\n    ((el, tree, textOf, depth) => {\n  let budget = 400;\n  let skipped = 0;\n  const labelOf = (n) => n.localName + (n.id ? '#' + n.id : n.classList && n.classList.length ? '.' + n.classList[0] : '');\n  const walk = (kids, level, origin) => {\n    const shown = kids.filter(tree.rendered);\n    const nodes = [];\n    for (const k of shown) {\n      if (budget <= 0) { skipped++; continue; }\n      budget--;\n      nodes.push(nodeOf(k, level, origin));\n    }\n    return { nodes: nodes, hidden: kids.length - shown.length };\n  };\n  const nodeOf = (n, level, origin) => {\n    const r = n.getBoundingClientRect();\n    const node = { label: labelOf(n), x: r.left - origin.left, y: r.top - origin.top, w: r.width, h: r.height, display: tree.style(n).display };\n    const kids = tree.children(n);\n    if (!tree.container(n)) node.text = textOf(n).slice(0, 60);\n    if (level >= depth) {\n      node.childCount = kids.filter(tree.rendered).length;\n      return node;\n    }\n    const sub = walk(kids, level + 1, r);\n    node.children = sub.nodes;\n    node.hidden = sub.hidden;\n    return node;\n  };\n  if (depth <= 0) return { hiddenChildren: 0, treeSkipped: 0 };\n  const top = walk(tree.children(el), 1, el.getBoundingClientRect());\n  return { tree: top.nodes, hiddenChildren: top.hidden, treeSkipped: skipped };\n})(el, tree, textOf, depth));\n}";
+export declare const INSPECT_PAGE_JS = "function (depth, props, why) {\n  const el = this;\n  const view = el.ownerDocument.defaultView;\n  const tree = ((view) => {\n  const style = (n, pseudo) => view.getComputedStyle(n, pseudo);\n  const skipped = /^(script|style|template|link|meta|noscript|title|head|base)$/;\n  const flatParent = (n) => n.assignedSlot || n.parentElement || (n.parentNode && n.parentNode.host) || null;\n  const layoutParent = (n) => {\n    let p = flatParent(n);\n    while (p && style(p).display === 'contents') p = flatParent(p);\n    return p;\n  };\n  const via = new WeakMap();\n  const label = (n) => n.localName + (n.id ? '#' + n.id : n.classList && n.classList.length ? '.' + n.classList[0] : '');\n  const slotText = (slot) => slot.assignedNodes({ flatten: true }).some((t) => t.nodeType === 3 && t.data.trim() !== '');\n  const children = (n) => {\n    const out = [];\n    const add = (c, through) => {\n      if (skipped.test(c.localName)) return;\n      if (c.localName === 'slot') {\n        const assigned = c.assignedElements({ flatten: true });\n        if (assigned.length === 0 && slotText(c)) out.push(c);\n        else (assigned.length ? assigned : Array.from(c.children)).forEach((a) => add(a, label(c)));\n      } else if (style(c).display === 'contents') {\n        Array.from((c.shadowRoot || c).children).forEach((a) => add(a, label(c) + ' (contents)'));\n      } else {\n        if (through) via.set(c, through);\n        out.push(c);\n      }\n    };\n    Array.from((n.shadowRoot || n).children).forEach((c) => add(c, null));\n    return out;\n  };\n  const rendered = (n) => n.getClientRects().length > 0 &&\n    (!n.checkVisibility || n.checkVisibility({ visibilityProperty: true }));\n  const container = (n) => children(n).some((c) => rendered(c) && !/^inline/.test(style(c).display));\n  return { style, skipped, flatParent, layoutParent, children, rendered, container, label, via, slotText };\n})(view);\n  const textOf = (el) => {\n  const isSensitive = (el) => {\n  const autocomplete = el.getAttribute('autocomplete') || '';\n  if (/(^|\\s)(cc-[a-z-]+|one-time-code|current-password|new-password)(\\s|$)/i.test(autocomplete)) return true;\n  if (el.type === 'password' || /^password$/i.test(el.getAttribute('type') || '')) return true;\n  const names = [el.getAttribute('name'), el.id, autocomplete].join(' ');\n  if (/passw|passwd|pwd|passcode|(^|[^a-z])otp([^a-z]|$)|cvv|cvc/i.test(names)) return true;\n  try {\n    const security = el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue('-webkit-text-security');\n    return Boolean(security) && security !== 'none';\n  } catch (e) {\n    return false;\n  }\n};\n  const clean = (text) => String(text || '').replace(/\\s+/g, ' ').trim().slice(0, 200);\n  if (el.localName === 'input' && el.type === 'hidden') return '';\n  if (el.localName === 'input' || el.localName === 'textarea') {\n    return el.value && isSensitive(el) ? '\u2022\u2022\u2022\u2022' : clean(el.value);\n  }\n  if (el.localName === 'select') {\n    const chosen = clean(Array.from(el.selectedOptions || [], (o) => o.label).join(', '));\n    return chosen && isSensitive(el) ? '\u2022\u2022\u2022\u2022' : chosen;\n  }\n  const outsideControls = () => {\n    const parts = [];\n    const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT);\n    for (let n = walker.nextNode(); n && parts.length < 400; n = walker.nextNode()) {\n      const holder = n.parentElement;\n      if (!holder || holder.closest('select, textarea, script, style, template, noscript')) continue;\n      if (holder.checkVisibility && !holder.checkVisibility({ visibilityProperty: true })) continue;\n      parts.push(n.data);\n    }\n    return parts.join(' ');\n  };\n  const holdsControls = Boolean(el.querySelector && el.querySelector('select, textarea'));\n  const raw = holdsControls ? outsideControls() : typeof el.innerText === 'string' ? el.innerText : el.textContent;\n  const text = clean(raw);\n  const view = el.ownerDocument.defaultView;\n  const security = view ? view.getComputedStyle(el).getPropertyValue('-webkit-text-security') : '';\n  return text && security && security !== 'none' ? '\u2022\u2022\u2022\u2022' : text;\n};\n  const describe = (node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');\n  const s = tree.style(el);\n  const formControl = /^(input|textarea|select|button)$/.test(el.localName);\n  const textControl = ((el) => {\n  if (el.localName === 'textarea' || el.localName === 'select') return true;\n  return el.localName === 'input' && !/^(checkbox|radio|range|color|hidden|image)$/.test(el.type);\n})(el);\n  const holder = textControl ? null : ((el, tree) => {\n  const counts = new Map();\n  const parents = new Map();\n  let budget = 2000;\n  const shown = (n) => tree.style(n).display === 'contents' || tree.rendered(n);\n  const nodesOf = (n) => {\n    if (n.localName !== 'slot') return Array.from((n.shadowRoot || n).childNodes);\n    const assigned = n.assignedNodes({ flatten: true });\n    return assigned.length ? assigned : Array.from(n.childNodes);\n  };\n  const visit = (n) => {\n    if (budget-- <= 0) return;\n    for (const c of nodesOf(n)) {\n      if (budget <= 0) return;\n      if (c.nodeType === 3) {\n        const length = c.data.replace(/\\s+/g, '').length;\n        if (length === 0) continue;\n        counts.set(n, (counts.get(n) || 0) + length);\n        if (!parents.has(n)) parents.set(n, c.parentElement || n);\n      } else if (c.nodeType === 1 && !tree.skipped.test(c.localName) && shown(c)) {\n        visit(c);\n      }\n    }\n  };\n  visit(el);\n  let best = null;\n  for (const [holder, length] of counts) if (!best || length > counts.get(best)) best = holder;\n  let total = 0;\n  for (const length of counts.values()) total += length;\n  return best && { style: best, font: parents.get(best), share: counts.get(best) / total };\n})(el, tree);\n  const textChildren = tree.children(el).filter((c) => tree.rendered(c) && (c.textContent || '').trim() !== '').length;\n  const textual = textControl || Boolean(holder && (holder.style === el || (holder.share >= 0.9 && textChildren <= 1) || !tree.container(el)));\n  const textFrom = holder && holder.style !== el ? holder.style : el;\n  const content = textOf(el);\n  const parent = tree.layoutParent(el);\n  const typedMap = el.computedStyleMap ? el.computedStyleMap() : null;\n  const typed = (name) => { try { return typedMap ? String(typedMap.get(name)) : ''; } catch (e) { return ''; } };\n  const result = {\n    tag: el.localName,\n    id: el.id || '',\n    classes: el.classList ? Array.from(el.classList) : [],\n    context: ((el) => {\n  const describe = (node) => node.tagName.toLowerCase() + (node.id ? '#' + node.id : '');\n  const parts = [];\n  for (let doc = el.ownerDocument; doc && doc.defaultView && doc.defaultView.frameElement; ) {\n    const frame = doc.defaultView.frameElement;\n    parts.unshift(describe(frame));\n    doc = frame.ownerDocument;\n  }\n  const root = el.getRootNode();\n  if (root.host) {\n    const host = root.host;\n    const label = describe(host) + (!host.id && host.classList.length ? '.' + host.classList[0] : '');\n    const text = (host.textContent || '').replace(/\\s+/g, ' ').trim().slice(0, 30);\n    parts.push('shadow root of <' + label + (text ? ' \"' + text + '\"' : '') + '>');\n  }\n  return parts.join(' > ');\n})(el),\n    content: content,\n    textual: textual,\n    formControl: formControl,\n    rendered: textual && textFrom !== el\n      ? tree.style(textFrom).visibility !== 'hidden' && tree.rendered(tree.style(textFrom).display === 'contents' ? tree.layoutParent(textFrom) : textFrom)\n      : tree.rendered(el),\n    hasText: textControl || holder !== null,\n    replaced: el instanceof SVGElement || /^(img|video|audio|canvas|iframe|embed|object|input|textarea|select|button|meter|progress)$/.test(el.localName),\n    svg: el.namespaceURI === 'http://www.w3.org/2000/svg',\n    typed: { width: typed('width'), height: typed('height') },\n    parent: parent ? describe(parent) : undefined,\n    animating: el.getAnimations ? [...new Set(el.getAnimations().filter((a) => a.playState === 'running' && (!a.timeline || a.timeline === el.ownerDocument.timeline)).map((a) => a.transitionProperty || a.animationName || 'animation'))] : []\n  };\n  if (textFrom !== el) result.textHolder = tree.label(textFrom);\n  const clipped = (n) => {\n    const cs = tree.style(n);\n    if (cs.overflowX !== 'visible' && n.scrollWidth > n.clientWidth + 1) return true;\n    return cs.webkitLineClamp !== 'none' && cs.overflowY !== 'visible' && n.scrollHeight > n.clientHeight + 1;\n  };\n  if (textual && !textControl && (clipped(el) || (textFrom !== el && clipped(textFrom)))) result.truncated = true;\n  if (((n, tree, text) => {\n  const unquote = (name) => name.trim().replace(/^[\"']|[\"']$/g, '').toLowerCase();\n  const match = /^\\s*(\"[^\"]*\"|'[^']*'|[^,]*)/.exec(tree.style(n).fontFamily);\n  const first = unquote(match ? match[1] : '');\n  if (!first || !n.ownerDocument.fonts) return false;\n  const ranges = [];\n  for (const face of n.ownerDocument.fonts) {\n    if (face.status !== 'loaded' || unquote(face.family) !== first) continue;\n    for (const part of face.unicodeRange.split(',')) {\n      const [from, to] = part.trim().replace(/^U\\+/i, '').split('-');\n      const low = parseInt(from.replace(/\\?/g, '0'), 16);\n      const high = parseInt((to || from).replace(/\\?/g, 'F'), 16);\n      if (!Number.isNaN(low) && !Number.isNaN(high)) ranges.push([low, high]);\n    }\n  }\n  if (ranges.length === 0) return false;\n  const covered = (code) => ranges.some(([low, high]) => code >= low && code <= high);\n  return Array.from(text.replace(/\\s+/g, '')).every((char) => covered(char.codePointAt(0)));\n})(textFrom, tree, textOf(textFrom))) result.familyLoaded = true;\n  if (/^(input|textarea)$/.test(el.localName) && el.placeholder && !el.value) {\n    result.placeholder = el.placeholder.replace(/\\s+/g, ' ').trim();\n    const placeholderStyle = tree.style(el, '::placeholder');\n    result.placeholderColor = placeholderStyle.color;\n    result.placeholderFont = { style: placeholderStyle.fontStyle, weight: placeholderStyle.fontWeight };\n  }\n  if (el.clientWidth > 0 && (el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1)) {\n    result.scroll = { w: el.scrollWidth, h: el.scrollHeight, clientW: el.clientWidth, clientH: el.clientHeight };\n  }\n  if (props) {\n    const known = (name) => name.startsWith('--') || CSS.supports(name, 'inherit');\n    const valueOf = (name) => {\n      const value = s.getPropertyValue(name).trim();\n      if (value !== '' || name.startsWith('--')) return value;\n      const sides = ['top', 'right', 'bottom', 'left'].map((side) => name + '-' + side).filter(known);\n      return sides.map((side) => side.slice(name.length + 1) + ' ' + s.getPropertyValue(side).trim()).join(' / ');\n    };\n    result.props = Object.fromEntries(props.filter(known).map((name) => [name, valueOf(name)]));\n    result.rootFontSize = parseFloat(tree.style(el.ownerDocument.documentElement).fontSize) || 16;\n    result.unknownProps = props.filter((name) => !known(name));\n  }\n  if (why && !why.startsWith('--')) {\n    if (!CSS.supports(why, 'inherit')) result.unknownWhy = true;\n    else {\n      const probe = el.ownerDocument.createElement('div').style;\n      probe.setProperty(why, 'inherit');\n      if (probe.length > 1) {\n        result.whyLonghands = Array.from(probe);\n        result.whyComputed = s.getPropertyValue(why).trim();\n      }\n      const inactive = ((el, names) => {\n  const view = el.ownerDocument.defaultView;\n  const found = [];\n  let budget = 20000;\n  const unmet = (rule) => {\n    if (rule.media && rule.media.mediaText && !view.matchMedia(rule.media.mediaText).matches) return '@media ' + rule.media.mediaText;\n    if (typeof CSSSupportsRule !== 'undefined' && rule instanceof CSSSupportsRule && !CSS.supports(rule.conditionText)) return '@supports ' + rule.conditionText;\n    return null;\n  };\n  const sets = (rule) => names.map((name) => rule.style.getPropertyValue(name).trim()).find((value) => value !== '');\n  const matches = (selector) => {\n    try { return el.matches(selector); } catch (e) { return false; }\n  };\n  const visit = (rules, condition) => {\n    for (const rule of Array.from(rules)) {\n      if (budget-- <= 0 || found.length >= 5) return;\n      if (typeof CSSImportRule !== 'undefined' && rule instanceof CSSImportRule) {\n        try { if (rule.styleSheet) visit(rule.styleSheet.cssRules, condition); } catch (e) { continue; }\n        continue;\n      }\n      const value = condition && rule.style && rule.selectorText ? sets(rule) : undefined;\n      if (value !== undefined && matches(rule.selectorText)) found.push({ selector: rule.selectorText, condition: condition, value: value });\n      if (rule.cssRules) visit(rule.cssRules, condition || unmet(rule));\n    }\n  };\n  for (const scope of new Set([el.getRootNode(), el.ownerDocument])) {\n    for (const sheet of [...Array.from(scope.styleSheets || []), ...Array.from(scope.adoptedStyleSheets || [])]) {\n      try { visit(sheet.cssRules, null); } catch (e) { continue; }\n    }\n  }\n  return found;\n})(el, [why].concat(result.whyLonghands || []));\n      if (inactive.length > 0) result.whyInactive = inactive;\n    }\n  }\n  return Object.assign(result,\n    ((el, tree) => {\n  const parent = tree.layoutParent(el);\n  if (!parent || tree.style(el).position === 'fixed' || !tree.rendered(el)) return {};\n  const r = el.getBoundingClientRect();\n  const p = parent.getBoundingClientRect();\n  const ps = tree.style(parent);\n  const zoom = parent.currentCSSZoom || 1;\n  const edge = (side) => (parseFloat(ps['border-' + side + '-width']) + parseFloat(ps['padding-' + side])) * zoom;\n  const inParent = {\n    left: r.left - (p.left + edge('left')),\n    top: r.top - (p.top + edge('top')),\n    right: (p.right - edge('right')) - r.right,\n    bottom: (p.bottom - edge('bottom')) - r.bottom\n  };\n  const inFlow = (n) => {\n    if (n === el || !tree.rendered(n) || /^(absolute|fixed)$/.test(tree.style(n).position)) return false;\n    const box = n.getBoundingClientRect();\n    return box.width > 0 || box.height > 0;\n  };\n  const siblings = tree.children(parent);\n  const at = siblings.indexOf(el);\n  const before = siblings.slice(0, Math.max(at, 0)).reverse().find(inFlow);\n  const after = at < 0 ? undefined : siblings.slice(at + 1).find(inFlow);\n  const gaps = {};\n  for (const sibling of [before, after]) {\n    if (!sibling) continue;\n    const s = sibling.getBoundingClientRect();\n    if (s.bottom <= r.top + 0.5) gaps.top = r.top - s.bottom;\n    else if (s.top >= r.bottom - 0.5) gaps.bottom = s.top - r.bottom;\n    else if (s.right <= r.left + 0.5) gaps.left = r.left - s.right;\n    else if (s.left >= r.right - 0.5) gaps.right = s.left - r.right;\n  }\n  return { inParent: inParent, siblings: gaps };\n})(el, tree),\n    ((el, tree, view) => {\n  const backgrounds = [];\n  let opacity = 1;\n  for (let n = el; n && backgrounds.length < 60; n = tree.flatParent(n)) {\n    const s = tree.style(n);\n    const own = Number(s.opacity) || 0;\n    const background = { color: s.backgroundColor, image: s.backgroundImage !== 'none' };\n    backgrounds.push(own < 1 ? Object.assign(background, { opacity: own }) : background);\n    opacity *= own;\n  }\n  const doc = el.ownerDocument;\n  const meta = doc.querySelector('meta[name=\"color-scheme\"]');\n  const rootScheme = tree.style(doc.documentElement).colorScheme;\n  const scheme = rootScheme && rootScheme !== 'normal' ? rootScheme : (meta && meta.content) || '';\n  const prefersDark = view.matchMedia('(prefers-color-scheme: dark)').matches;\n  const canvasDark = /dark/.test(scheme) && (!/light/.test(scheme) || prefersDark);\n  return { backgrounds: backgrounds, canvasDark: canvasDark, opacity: opacity };\n})(textual ? textFrom : el, tree, view),\n    textual ? { paintRisks: ((el, tree, textParent) => {\n  const risks = [];\n  const chain = [];\n  for (let n = el; n && chain.length < 60; n = tree.flatParent(n)) chain.push(n);\n  for (const n of chain) {\n    const s = tree.style(n);\n    if (s.mixBlendMode !== 'normal') risks.push('mix-blend-mode ' + s.mixBlendMode + ' on ' + tree.label(n));\n    if (s.filter !== 'none') risks.push('filter on ' + tree.label(n));\n  }\n  const textNode = Array.from(textParent.childNodes).find((c) => c.nodeType === 3 && c.data.trim() !== '');\n  const range = el.ownerDocument.createRange();\n  if (textNode) range.selectNodeContents(textNode);\n  const box = tree.style(el).display === 'contents' ? tree.layoutParent(el) : el;\n  const rect = (textNode && range.getClientRects()[0]) || (box && box.getClientRects()[0]);\n  const view = el.ownerDocument.defaultView;\n  if (!rect) return risks;\n  const x = rect.left + rect.width / 2;\n  const y = rect.top + rect.height / 2;\n  if (x < 0 || y < 0 || x >= view.innerWidth || y >= view.innerHeight) return risks;\n  const root = el.getRootNode();\n  const hits = (root.elementsFromPoint ? root : el.ownerDocument).elementsFromPoint(x, y);\n  const at = hits.findIndex((h) => chain.includes(h));\n  if (at < 0) return risks;\n  const clear = (color) => color === 'transparent' || /^rgba\\(.*,\\s*0\\)$/.test(color) || /\\/\\s*0\\)$/.test(color);\n  const opaque = (n) => {\n    const s = tree.style(n);\n    return /^rgb\\(/.test(s.backgroundColor) && s.backgroundImage === 'none' && Number(s.opacity) === 1;\n  };\n  const paints = (n) => {\n    const s = tree.style(n);\n    return /^(canvas|video|img|iframe|embed|object|svg)$/.test(n.localName) || s.backgroundImage !== 'none' || !clear(s.backgroundColor);\n  };\n  let behind = null;\n  for (const h of hits.slice(at)) {\n    if (chain.includes(h)) {\n      if (opaque(h)) break;\n    } else if (paints(h)) {\n      behind = h;\n      break;\n    }\n  }\n  if (behind) risks.push(tree.label(behind) + ' behind');\n  const onTop = hits.slice(0, at).find((h) => !el.contains(h) && paints(h));\n  if (onTop) risks.push(tree.label(onTop) + ' on top');\n  return risks;\n})(textFrom, tree, holder ? holder.font : el) } : {},\n    ((el, tree, textOf, depth) => {\n  let budget = 400;\n  let skipped = 0;\n  const walk = (kids, level, origin) => {\n    const shown = kids.filter((k) => tree.rendered(k) || k.localName === 'slot');\n    const nodes = [];\n    for (const k of shown) {\n      if (budget <= 0) { skipped++; continue; }\n      budget--;\n      nodes.push(nodeOf(k, level, origin));\n    }\n    return { nodes: nodes, hidden: kids.length - shown.length };\n  };\n  const nodeOf = (n, level, origin) => {\n    const r = n.getBoundingClientRect();\n    const node = { label: tree.label(n), x: r.left - origin.left, y: r.top - origin.top, w: r.width, h: r.height, display: tree.style(n).display };\n    if (tree.via.has(n)) node.via = tree.via.get(n);\n    if (n.parentNode && n.parentNode.nodeType === 11 && n.parentNode.host) node.shadow = true;\n    if (n.localName === 'slot') {\n      node.text = n.assignedNodes({ flatten: true }).map((t) => t.textContent).join(' ').replace(/\\s+/g, ' ').trim().slice(0, 60);\n      return node;\n    }\n    const kids = tree.children(n);\n    if (!tree.container(n)) node.text = textOf(n).slice(0, 60);\n    if (level >= depth) {\n      node.childCount = kids.filter(tree.rendered).length;\n      return node;\n    }\n    const sub = walk(kids, level + 1, r);\n    node.children = sub.nodes;\n    node.hidden = sub.hidden;\n    return node;\n  };\n  if (depth <= 0) return { hiddenChildren: 0, treeSkipped: 0 };\n  const top = walk(tree.children(el), 1, el.getBoundingClientRect());\n  return { tree: top.nodes, hiddenChildren: top.hidden, treeSkipped: skipped };\n})(el, tree, textOf, depth));\n}";
 /**
  * Page-side function run on the element (`this`) that returns another
  * element whose styles CDP reads: `"parent"`, the parent that lays it out
- * (`display: contents` skipped, through shadow roots and slots), or
- * `"textHolder"`, for an element whose text is in a descendant
- * (`<button><span>Buy</span></button>`), the first element holding text,
- * whose rendered font is the one shown. Null when there is none.
+ * (`display: contents` skipped, through shadow roots and slots),
+ * `"textHolder"`, the element whose styles draw most of its text
+ * ({@link TEXT_HOLDER_JS}; the element itself when that is its own text), or
+ * `"fontHolder"`, the parent of that text's nodes (for the rendered font: a
+ * slot's text nodes belong to the host's light DOM). Null when there is none.
+ */
+export declare const RELATED_NODE_JS = "function (which) {\n  const tree = ((view) => {\n  const style = (n, pseudo) => view.getComputedStyle(n, pseudo);\n  const skipped = /^(script|style|template|link|meta|noscript|title|head|base)$/;\n  const flatParent = (n) => n.assignedSlot || n.parentElement || (n.parentNode && n.parentNode.host) || null;\n  const layoutParent = (n) => {\n    let p = flatParent(n);\n    while (p && style(p).display === 'contents') p = flatParent(p);\n    return p;\n  };\n  const via = new WeakMap();\n  const label = (n) => n.localName + (n.id ? '#' + n.id : n.classList && n.classList.length ? '.' + n.classList[0] : '');\n  const slotText = (slot) => slot.assignedNodes({ flatten: true }).some((t) => t.nodeType === 3 && t.data.trim() !== '');\n  const children = (n) => {\n    const out = [];\n    const add = (c, through) => {\n      if (skipped.test(c.localName)) return;\n      if (c.localName === 'slot') {\n        const assigned = c.assignedElements({ flatten: true });\n        if (assigned.length === 0 && slotText(c)) out.push(c);\n        else (assigned.length ? assigned : Array.from(c.children)).forEach((a) => add(a, label(c)));\n      } else if (style(c).display === 'contents') {\n        Array.from((c.shadowRoot || c).children).forEach((a) => add(a, label(c) + ' (contents)'));\n      } else {\n        if (through) via.set(c, through);\n        out.push(c);\n      }\n    };\n    Array.from((n.shadowRoot || n).children).forEach((c) => add(c, null));\n    return out;\n  };\n  const rendered = (n) => n.getClientRects().length > 0 &&\n    (!n.checkVisibility || n.checkVisibility({ visibilityProperty: true }));\n  const container = (n) => children(n).some((c) => rendered(c) && !/^inline/.test(style(c).display));\n  return { style, skipped, flatParent, layoutParent, children, rendered, container, label, via, slotText };\n})(this.ownerDocument.defaultView);\n  if (which === 'parent') return tree.layoutParent(this);\n  const holder = ((el, tree) => {\n  const counts = new Map();\n  const parents = new Map();\n  let budget = 2000;\n  const shown = (n) => tree.style(n).display === 'contents' || tree.rendered(n);\n  const nodesOf = (n) => {\n    if (n.localName !== 'slot') return Array.from((n.shadowRoot || n).childNodes);\n    const assigned = n.assignedNodes({ flatten: true });\n    return assigned.length ? assigned : Array.from(n.childNodes);\n  };\n  const visit = (n) => {\n    if (budget-- <= 0) return;\n    for (const c of nodesOf(n)) {\n      if (budget <= 0) return;\n      if (c.nodeType === 3) {\n        const length = c.data.replace(/\\s+/g, '').length;\n        if (length === 0) continue;\n        counts.set(n, (counts.get(n) || 0) + length);\n        if (!parents.has(n)) parents.set(n, c.parentElement || n);\n      } else if (c.nodeType === 1 && !tree.skipped.test(c.localName) && shown(c)) {\n        visit(c);\n      }\n    }\n  };\n  visit(el);\n  let best = null;\n  for (const [holder, length] of counts) if (!best || length > counts.get(best)) best = holder;\n  let total = 0;\n  for (const length of counts.values()) total += length;\n  return best && { style: best, font: parents.get(best), share: counts.get(best) / total };\n})(this, tree);\n  if (!holder) return null;\n  return which === 'textHolder' ? holder.style : holder.font;\n}";
+/** Where a custom property is set, as {@link VARIABLE_SETTERS_JS} finds it */
+export interface VariableSetter {
+    /** Selector of the rule, or `@keyframes name` */
+    selector: string;
+    /** Value as written (`inherit`, `` for an empty one) */
+    value: string;
+    /** Set in a keyframe of this animation */
+    keyframes?: string;
+    /** The rule matches the element or an ancestor now (null: bdg cannot test its selector) */
+    matches: boolean | null;
+    /** The `@media` or `@supports` condition it is under that does not apply now */
+    condition?: string;
+}
+/**
+ * Page-side function run on the element (`this`): for each custom property
+ * name, a rule in the page's stylesheets (same-origin, `@import`ed,
+ * constructed and the element's shadow root's) that sets it, keyframes
+ * included: the first one that matches the element or an ancestor now
+ * (across shadow roots, so `:root` matches inside a component), else the
+ * first that would match without its state (`.btn:hover` for this `.btn`),
+ * else the first one, with the `@media`/`@supports` condition it is under
+ * when that does not apply. At most 20000 rules are read; cross-origin sheets are
+ * skipped.
  */
-export declare const RELATED_NODE_JS = "function (which) {\n  const tree = ((view) => {\n  const style = (n, pseudo) => view.getComputedStyle(n, pseudo);\n  const skipped = /^(script|style|template|link|meta|noscript|title|head|base)$/;\n  const flatParent = (n) => n.assignedSlot || n.parentElement || (n.parentNode && n.parentNode.host) || null;\n  const layoutParent = (n) => {\n    let p = flatParent(n);\n    while (p && style(p).display === 'contents') p = flatParent(p);\n    return p;\n  };\n  const children = (n) => {\n    const out = [];\n    const add = (c) => {\n      if (skipped.test(c.localName)) return;\n      if (c.localName === 'slot') {\n        const assigned = c.assignedElements({ flatten: true });\n        (assigned.length ? assigned : Array.from(c.children)).forEach(add);\n      } else if (style(c).display === 'contents') {\n        Array.from((c.shadowRoot || c).children).forEach(add);\n      } else {\n        out.push(c);\n      }\n    };\n    Array.from((n.shadowRoot || n).children).forEach(add);\n    return out;\n  };\n  const rendered = (n) => n.getClientRects().length > 0 &&\n    (!n.checkVisibility || n.checkVisibility({ visibilityProperty: true }));\n  const container = (n) => children(n).some((c) => rendered(c) && !/^inline/.test(style(c).display));\n  return { style, flatParent, layoutParent, children, rendered, container };\n})(this.ownerDocument.defaultView);\n  if (which === 'parent') return tree.layoutParent(this);\n  const walker = this.ownerDocument.createTreeWalker(this, NodeFilter.SHOW_TEXT);\n  while (walker.nextNode()) {\n    if (walker.currentNode.data.trim() !== '') return walker.currentNode.parentElement;\n  }\n  return null;\n}";
+export declare const VARIABLE_SETTERS_JS = "function (names) {\n  const el = this;\n  const view = el.ownerDocument.defaultView;\n  const matching = {};\n  const related = {};\n  const other = {};\n  let budget = 20000;\n  const closestAcross = (selector) => {\n    for (let n = el; n; n = n.getRootNode().host || null) {\n      if (n.closest(selector)) return true;\n    }\n    return false;\n  };\n  const matches = (selector) => {\n    try { return closestAcross(selector); } catch (e) { return null; }\n  };\n  const stateless = (selector) => selector.replace(/:(focus-visible|focus-within|focus|hover|active|visited|checked|target|open)(?![\\w-])/g, '');\n  const applies = (rule) => {\n    if (rule.media && rule.media.mediaText && !view.matchMedia(rule.media.mediaText).matches) return '@media ' + rule.media.mediaText;\n    if (typeof CSSSupportsRule !== 'undefined' && rule instanceof CSSSupportsRule && !CSS.supports(rule.conditionText)) return '@supports ' + rule.conditionText;\n    return null;\n  };\n  const record = (name, rule, keyframes, condition) => {\n    const selector = keyframes ? '@keyframes ' + keyframes : rule.selectorText || '';\n    const match = keyframes || condition ? false : matches(selector);\n    const setter = Object.assign(\n      { selector: selector, value: rule.style.getPropertyValue(name).trim(), matches: match },\n      keyframes ? { keyframes: keyframes } : {},\n      condition ? { condition: condition } : {}\n    );\n    if (match && !matching[name]) matching[name] = setter;\n    else if (!match && !keyframes && !related[name] && matches(stateless(selector))) related[name] = setter;\n    else if (!match && !other[name]) other[name] = setter;\n  };\n  const visit = (rules, keyframes, condition) => {\n    for (const rule of Array.from(rules)) {\n      if (budget-- <= 0 || names.every((name) => matching[name])) return;\n      if (typeof CSSImportRule !== 'undefined' && rule instanceof CSSImportRule) {\n        try { if (rule.styleSheet) visit(rule.styleSheet.cssRules, keyframes, condition); } catch (e) { continue; }\n        continue;\n      }\n      if (typeof CSSKeyframesRule !== 'undefined' && rule instanceof CSSKeyframesRule) {\n        visit(rule.cssRules, rule.name, condition);\n        continue;\n      }\n      if (rule.style) {\n        for (const name of names) {\n          if (!matching[name] && Array.from(rule.style).includes(name)) record(name, rule, keyframes, condition);\n        }\n      }\n      if (rule.cssRules) visit(rule.cssRules, keyframes, condition || applies(rule));\n    }\n  };\n  const sheets = [];\n  for (const scope of new Set([el.getRootNode(), el.ownerDocument])) {\n    sheets.push(...Array.from(scope.styleSheets || []), ...Array.from(scope.adoptedStyleSheets || []));\n  }\n  for (const sheet of sheets) {\n    try { visit(sheet.cssRules, null, null); } catch (e) { continue; }\n  }\n  return Object.assign({}, other, related, matching);\n}";
 //# sourceMappingURL=inspectScripts.d.ts.map