mirror of
https://github.com/Hopiu/bowser.git
synced 2026-03-17 03:20: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.
152 lines
3.8 KiB
Markdown
152 lines
3.8 KiB
Markdown
# 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
|
|
|
|
1. Browse to any page
|
|
2. Press **Ctrl+Shift+D**
|
|
3. New tab opens with:
|
|
- Header: "🌳 DOM Tree Visualization"
|
|
- File path shown
|
|
- Color legend
|
|
- Interactive SVG graph OR
|
|
- DOT format with install instructions
|
|
4. 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
|