diff --git a/.gitignore b/.gitignore index c18dd8d..61ae5a7 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,10 @@ __pycache__/ +**/__pycache__/* +src/browser/__pycache__/* + +# DOM graph outputs +*.dot +*.svg + +# Test outputs +example_dom_graph.* diff --git a/FEATURE_DOM_GRAPH.md b/FEATURE_DOM_GRAPH.md new file mode 100644 index 0000000..0a4a0e0 --- /dev/null +++ b/FEATURE_DOM_GRAPH.md @@ -0,0 +1,146 @@ +# DOM Visualization Feature - Implementation Summary + +## Overview +Added a keyboard shortcut (Ctrl+Shift+D) to generate and visualize the DOM tree of the current tab as a graph. + +## Files Created + +### Core Implementation +- **src/debug/__init__.py** - Debug utilities package +- **src/debug/dom_graph.py** - DOM graph generation and visualization + - `generate_dot_graph()` - Generates Graphviz DOT format + - `save_dom_graph()` - Saves DOT file + - `render_dom_graph_to_svg()` - Renders to SVG (requires graphviz) + - `print_dom_tree()` - Text tree representation + +### Tests +- **tests/test_dom_graph.py** - Comprehensive test suite (10 tests, all passing) + - Tests graph generation, coloring, escaping, truncation + - Tests tree printing with proper indentation + - Tests depth limiting and attribute handling + +### Documentation +- **docs/DOM_VISUALIZATION.md** - Feature documentation +- **test_dom.html** - Example test page +- Updated **README.md** with keyboard shortcuts section + +## Implementation Details + +### Browser Integration (src/browser/chrome.py) + +1. **Keyboard Shortcut Setup** + - Added `_setup_keyboard_shortcuts()` method + - Registers GTK EventControllerKey for key presses + - Listens for Ctrl+Shift+D combination + +2. **DOM Graph Handler** + - Added `_on_key_pressed()` callback + - Added `_show_dom_graph()` method that: + - Gets current tab's DOM document + - Generates graph in DOT format + - Attempts SVG rendering (if graphviz installed) + - Falls back to DOT file + - Prints tree to console + - Shows info dialog with result + +3. **UI Feedback** + - Added `_show_info_dialog()` for user notifications + - Opens generated SVG automatically with xdg-open + +### Graph Features + +**Color Coding:** +- Light green: ``, `` +- Light yellow: Headings (`

`-`

`) +- Light gray: Block elements (`
`, `

`, ``) +- Light cyan: Lists (`