# Requirements Specification: Elements Panel Tree Node Title ## 1. Overview The Elements panel represents the DOM tree as a collection of nodes. Each node's primary visual representation—its "title"—is a dynamic string of text, interactive links, and syntax-highlighted code. This specification documents the expected user-facing behaviors of the node title rendering across various DOM node types, ensuring a rich, interactive, and accurate representation of the document structure. ## 2. Node Types and Rendering Rules ### 2.1 Element Nodes (`Node.ELEMENT_NODE`) Element nodes are the most common nodes in the tree. Their rendering depends on their state: * **Standard Tags**: Rendered as `` for opening tags and `` for closing tags. The tag names are syntax-highlighted. * **Pseudo-Elements**: Rendered as `::pseudo-element-name(identifier)`. * **Inline Text Nodes**: If an element contains only a text node and no other children (e.g., `

Hello

`), it is rendered entirely on one line: `Hello`. The text content has its whitespace collapsed, and HTML entities are syntax-highlighted. * **Collapsed Expandable Elements**: When an element with children is collapsed, the title renders the opening tag, a clickable expand button (`▶`), a visually hidden `…` (for accessibility and layout tests), and the closing tag, all on one line. ### 2.2 Attributes Attributes within Element nodes have complex interactive behaviors: * **Formatting**: Rendered natively as `name="value"`. If an attribute has no value, the `="value"` part is omitted unless explicitly forced. * **HTML Entities**: Unicode sequences and entities within attribute values are syntax-highlighted. * **Linkification (URLs)**: Values of `src` and `href` attributes, as well as complex `srcset` definitions in ``, ``, and `` tags, are automatically detected. They are rendered as clickable links that open the resource or show an image preview popover on hover. * **Linkification (DOM Relations)**: Attributes that establish DOM relationships (`popovertarget`, `interesttarget`, `commandfor`) are parsed. Their values are rendered as clickable links that, when clicked, reveal the target DOM node in the Elements panel. Tooltips will read: "Reveal Popover Target", "Reveal Interest Target", or "Reveal Command For Target" respectively. ### 2.3 Text Nodes (`Node.TEXT_NODE`) * **Standard Text**: Rendered surrounded by double quotes (`"text"`). HTML entities within the text are highlighted. * **JavaScript inside `