bowser/UPDATE_DOM_TAB.md

# 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