mirror of
https://github.com/Hopiu/bowser.git
synced 2026-04-16 08:50:59 +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.
157 lines
7.9 KiB
Markdown
157 lines
7.9 KiB
Markdown
# DOM Graph Visualization - User Experience
|
|
|
|
## What You'll See
|
|
|
|
When you press **Ctrl+Shift+D**, a new tab automatically opens with this view:
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────┐
|
|
│ 🌳 DOM Tree Visualization │
|
|
│ Source: /home/user/.cache/bowser/dom_graph.svg │
|
|
├─────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ Color Legend: │
|
|
│ ┌─────────┬──────────────────────────────────────────────┐ │
|
|
│ │ 🟢 │ <html>, <body> │ │
|
|
│ │ 🟡 │ Headings (h1-h6) │ │
|
|
│ │ ⚪ │ Block elements │ │
|
|
│ │ 🔵 │ Lists (ul, ol, li) │ │
|
|
│ │ 🔴 │ Interactive (a, button) │ │
|
|
│ │ 🔵 │ Text nodes │ │
|
|
│ └─────────┴──────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ [Visual DOM Graph Here] │ │
|
|
│ │ │ │
|
|
│ │ html ──┬── body ──┬── h1 ── "Title" │ │
|
|
│ │ │ │ │
|
|
│ │ ├── p ── "Content" │ │
|
|
│ │ │ │ │
|
|
│ │ └── ul ──┬── li ── "Item 1" │ │
|
|
│ │ └── li ── "Item 2" │ │
|
|
│ │ │ │
|
|
│ └─────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ Bowser Browser • DOM Graph Visualization • Ctrl+Shift+D │
|
|
└─────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
## Interface Elements
|
|
|
|
### Header (Dark Gray)
|
|
- 🌳 Title with icon
|
|
- File path showing where graph is saved
|
|
- Clean, minimal design
|
|
|
|
### Color Legend
|
|
- Explains what each color means
|
|
- 6 different node types
|
|
- Easy reference while viewing graph
|
|
|
|
### Graph Display
|
|
**With Graphviz (SVG):**
|
|
- Beautiful vector graphics
|
|
- Zoomable/scalable
|
|
- Clean node layout
|
|
- Clear hierarchy
|
|
|
|
**Without Graphviz (DOT):**
|
|
- Installation instructions
|
|
- Raw DOT format shown
|
|
- Helpful hints for rendering
|
|
|
|
### Footer (Dark Gray)
|
|
- Branding
|
|
- Keyboard shortcut reminder
|
|
|
|
## Color Scheme
|
|
|
|
**Background:**
|
|
- Dark: `#1e1e1e` (VS Code inspired)
|
|
- Cards: `#2d2d2d`
|
|
- Borders: `#3e3e3e`
|
|
|
|
**Text:**
|
|
- Primary: `#d4d4d4`
|
|
- Accent: `#4ec9b0` (teal/green)
|
|
- Muted: `#858585`
|
|
|
|
**Graph Nodes:**
|
|
- Exactly as in the generated SVG
|
|
- Matches console output colors
|
|
|
|
## Workflow
|
|
|
|
```
|
|
┌──────────────────────────────────────────────────────────┐
|
|
│ 1. You're viewing a page │
|
|
│ (e.g., example.com) │
|
|
└──────────────────────────────────────────────────────────┘
|
|
↓
|
|
Press Ctrl+Shift+D
|
|
↓
|
|
┌──────────────────────────────────────────────────────────┐
|
|
│ 2. Console Output (Terminal) │
|
|
│ ═══════════════════════════════ │
|
|
│ DOM TREE STRUCTURE: │
|
|
│ <html> │
|
|
│ <body> │
|
|
│ <h1> │
|
|
│ Text: 'Example' │
|
|
└──────────────────────────────────────────────────────────┘
|
|
↓
|
|
(simultaneously)
|
|
↓
|
|
┌──────────────────────────────────────────────────────────┐
|
|
│ 3. New Tab Opens │
|
|
│ about:dom-graph?path=/home/.../.cache/...svg │
|
|
│ │
|
|
│ Shows beautiful visualization with: │
|
|
│ • Color legend │
|
|
│ • Interactive graph │
|
|
│ • Dark theme │
|
|
└──────────────────────────────────────────────────────────┘
|
|
↓
|
|
Keep working!
|
|
↓
|
|
┌──────────────────────────────────────────────────────────┐
|
|
│ 4. Continue browsing │
|
|
│ • Graph tab stays open │
|
|
│ • Switch back anytime │
|
|
│ • Generate new graphs anytime │
|
|
└──────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
## Comparison
|
|
|
|
### Before (External Viewer)
|
|
```
|
|
Browser → Ctrl+Shift+D → xdg-open → SVG Viewer
|
|
↓ ↑
|
|
└──────── Switch apps ────────────────┘
|
|
```
|
|
|
|
### After (Browser Tab)
|
|
```
|
|
Browser → Ctrl+Shift+D → New Tab → View Graph
|
|
└────────── All in Bowser ────────────┘
|
|
```
|
|
|
|
## Advantages
|
|
|
|
1. **No App Switching** - Everything in browser
|
|
2. **Consistent UX** - Same interface as other pages
|
|
3. **Always Available** - No need for external apps
|
|
4. **Better Integration** - Part of your browsing session
|
|
5. **More Features** - Legend, hints, instructions
|
|
6. **Beautiful Design** - Custom dark theme
|
|
7. **Responsive** - Works at any size
|
|
|
|
## Next Steps
|
|
|
|
Try it yourself:
|
|
1. Open Bowser
|
|
2. Navigate to any page (or use the test page)
|
|
3. Press **Ctrl+Shift+D**
|
|
4. Enjoy the beautiful DOM visualization!
|