mirror of
https://github.com/Hopiu/bowser.git
synced 2026-03-16 19:10:24 +00:00
3838aa17af
- 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.
35 lines
831 B
HTML
35 lines
831 B
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>
|