bowser/test_dom.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Test Page</title>
</head>
<body>
    <h1>DOM Visualization Test</h1>
    <p>This page demonstrates the DOM visualization feature.</p>
    
    <div class="container">
        <h2>Section 1</h2>
        <p>Press <strong>Ctrl+Shift+D</strong> to visualize the DOM tree.</p>
        
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    
    <div class="features">
        <h2>Features</h2>
        <ol>
            <li>Color-coded nodes by element type</li>
            <li>Visual hierarchy representation</li>
            <li>Text content preview</li>
        </ol>
    </div>
    
    <footer>
        <p>Bowser Browser - Educational Project</p>
    </footer>
</body>
</html>
Add DOM Visualization Feature with Integrated Browser Support - Introduced a new feature to visualize the Document Object Model (DOM) tree of the loaded web page. - Implemented keyboard shortcut (Ctrl+Shift+D) for generating and displaying the DOM graph. - Added core implementation files: - src/debug/dom_graph.py: Handles generation and rendering of graphs in DOT and SVG formats. - Created templates and documentation for the new feature, including: - docs/DOM_VISUALIZATION.md: Overview and usage instructions. - docs/DOM_GRAPH_UX.md: User experience design documentation. - Allowed the visualization to open in a new browser tab instead of an external viewer. - Enhanced visual representation through color coding of different HTML elements. - Implemented comprehensive tests for graph generation and page rendering. - Updated README.md to include usage instructions for DOM visualization. - Included test_holder.html as an example test page. - Modified various components in the browser to integrate tab management and enhance the graphical rendering experience. 2026-01-09 23:19:21 +00:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8">`
			`<title>DOM Test Page</title>`
			`</head>`
			`<body>`
			`<h1>DOM Visualization Test</h1>`
			`<p>This page demonstrates the DOM visualization feature.</p>`

			`<div class="container">`
			`<h2>Section 1</h2>`
			`<p>Press <strong>Ctrl+Shift+D</strong> to visualize the DOM tree.</p>`

			`<ul>`
			`<li>Item 1</li>`
			`<li>Item 2</li>`
			`<li>Item 3</li>`
			`</ul>`
			`</div>`

			`<div class="features">`
			`<h2>Features</h2>`
			`<ol>`
			`<li>Color-coded nodes by element type</li>`
			`<li>Visual hierarchy representation</li>`
			`<li>Text content preview</li>`
			`</ol>`
			`</div>`

			`<footer>`
			`<p>Bowser Browser - Educational Project</p>`
			`</footer>`
			`</body>`
			`</html>`