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

3.8 KiB

Raw Blame History

DOM Graph in Browser Tab - Update Summary

What Changed

The DOM visualization feature now displays the graph in a new browser tab instead of opening an external application.

Key Improvements

Before

Pressed Ctrl+Shift+D
Graph opened in external SVG viewer (xdg-open)
Required switching between applications
Less integrated experience

After

Press Ctrl+Shift+D
Graph opens in new browser tab automatically
Stay within Bowser
Beautiful dark-themed interface
Built-in color legend
Consistent with browser workflow

Implementation Changes

1. Modified chrome.py

_show_dom_graph() method:

Removed external xdg-open call
Now calls browser.new_tab("about:dom-graph?path=...")
Passes graph file path as URL parameter

2. Modified tab.py

Frame.load() method:

Added handler for about:dom-graph URLs
Parses query parameter to get graph file path
Calls render_dom_graph_page() to generate HTML
Parses result into DOM

3. Modified templates.py

New function: render_dom_graph_page():

Takes graph file path as parameter
Detects SVG vs DOT format
Reads file content
Renders using dom_graph.html template
Handles errors gracefully

4. New Template

assets/pages/dom_graph.html:

Dark-themed, modern interface
Header with title and file path
Color legend for SVG graphs
Inline SVG embedding
DOT format display with syntax highlighting
Installation instructions for Graphviz
Responsive layout

5. New Tests

tests/test_dom_graph_page.py:

Tests SVG rendering
Tests DOT rendering
Tests error handling
Tests legend presence
All 4 tests passing ✓

Features

Visual Design

🎨 Dark theme (#1e1e1e background)
🎯 VS Code-inspired color scheme
📊 Inline SVG rendering
🎨 Color-coded legend
📝 Monospace font for code
🔲 Card-based layout

User Experience

⚡ Automatic tab opening
🎯 No application switching
📍 Clear file path display
💡 Helpful installation hints
🔄 Reminder to use Ctrl+Shift+D

Error Handling

✅ Missing file detection
✅ Read error handling
✅ Graceful degradation
✅ Clear error messages

URL Scheme

New special URL: about:dom-graph?path=/path/to/graph.svg

Query parameters:

path: Absolute path to graph file (SVG or DOT)

File Structure

src/
  browser/
    chrome.py          # Opens new tab with about:dom-graph
    tab.py             # Handles about:dom-graph URL
  templates.py         # Renders graph page
  debug/
    dom_graph.py       # Generates graph files (unchanged)

assets/pages/
  dom_graph.html       # New template for graph display

tests/
  test_dom_graph.py       # Graph generation tests (10 tests)
  test_dom_graph_page.py  # Page rendering tests (4 tests)

Testing Results

tests/test_html_parsing.py     - 7/7 passed   ✓
tests/test_dom_graph.py        - 10/10 passed ✓
tests/test_dom_graph_page.py   - 4/4 passed   ✓
tests/test_templates.py        - 7/7 passed   ✓
--------------------------------
Total:                          28/28 passed ✓

Usage Example

Browse to any page
Press Ctrl+Shift+D
New tab opens with:
- Header: "🌳 DOM Tree Visualization"
- File path shown
- Color legend
- Interactive SVG graph OR
- DOT format with install instructions
Console shows text tree structure

Benefits

✅ Better UX: No context switching ✅ Consistent: All in browser ✅ Informative: Built-in legend and hints ✅ Beautiful: Modern, dark theme ✅ Accessible: Clear labels and structure ✅ Flexible: Works with/without Graphviz ✅ Tested: Comprehensive test coverage

Backward Compatibility

Graph files still saved to ~/.cache/bowser/
Console output unchanged
Same keyboard shortcut (Ctrl+Shift+D)
Same file formats (SVG/DOT)
Existing functionality preserved

3.8 KiB Raw Blame History