mirror of https://github.com/Hopiu/bowser.git synced 2026-03-16 19:10:24 +00:00

Benedikt Willi 3838aa17af 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-10 00:19:21 +01:00

1.9 KiB

Raw Blame History

DOM Graph Visualization - Quick Reference

What is it?

A debugging tool that visualizes the Document Object Model (DOM) tree of the currently loaded web page as a graph.

How to use it?

Press Ctrl+Shift+D while viewing any page in Bowser.

What you get

1. Console Output

DOM TREE STRUCTURE:
====================
<html>
  <body>
    <h1>
      Text: 'Page Title'
    <p>
      Text: 'Page content...'

2. New Browser Tab

Automatically opens with the visualization
Clean, dark-themed interface
Color legend explaining node colors
Interactive SVG graph (if Graphviz installed)
DOT format view with installation instructions (without Graphviz)

3. Graph File

Saved to ~/.cache/bowser/dom_graph.svg (or .dot without Graphviz)

Node Colors

Color	Elements
🟢 Light Green	`<html>`, `<body>`
🟡 Light Yellow	`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`
⚪ Light Gray	`<div>`, `<p>`, `<span>`
🔵 Light Cyan	`<ul>`, `<ol>`, `<li>`
🔴 Light Pink	`<a>`, `<button>`
🔵 Light Blue	Text nodes
⚪ White	Other elements

Installation (Optional)

For visual graphs, install Graphviz:

sudo apt install graphviz

Without it, you'll get a .dot file that you can:

View with any text editor
Render online at http://webgraphviz.com
Render manually: dot -Tsvg dom_graph.dot -o output.svg

Test it!

Load the test page:

uv run bowser file://$(pwd)/test_dom.html

Press Ctrl+Shift+D
View the generated graph!

Files

Implementation: src/debug/dom_graph.py
Tests: tests/test_dom_graph.py (10/10 passing)
Docs: docs/DOM_VISUALIZATION.md
Example: test_dom.html

Benefits

🔍 Debug: Quickly inspect DOM structure
📚 Learn: Understand HTML parsing
✅ Validate: Check element hierarchy
🎨 Visualize: See the tree structure clearly

1.9 KiB Raw Blame History