mirror of
https://github.com/Hopiu/bowser.git
synced 2026-05-18 06:41:07 +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.
97 lines
2.7 KiB
Markdown
97 lines
2.7 KiB
Markdown
# Bowser — Educational Web Browser
|
|
|
|
A custom web browser built from scratch following the [browser.engineering](https://browser.engineering/) curriculum.
|
|
|
|
**Status**: Early scaffolding phase (M0)
|
|
|
|
## Building
|
|
|
|
### Prerequisites
|
|
- Python 3.11+
|
|
- GTK 4 development libraries (Debian: `libgtk-4-dev libgtk-4-1`)
|
|
- Skia-Python (`skia-python`): `pip install skia-python`
|
|
- PyGObject (`PyGObject`): `pip install PyGObject`
|
|
- Graphviz (optional, for DOM visualization): `sudo apt install graphviz`
|
|
|
|
### Setup
|
|
```bash
|
|
uv sync
|
|
uv run bowser
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Keyboard Shortcuts
|
|
- **Ctrl+Shift+D**: Generate and visualize DOM tree graph of current page
|
|
- Opens visualization in a new browser tab
|
|
- Displays interactive SVG graph (if Graphviz installed)
|
|
- Falls back to DOT format if Graphviz not available
|
|
- Prints tree structure to console
|
|
|
|
### Testing
|
|
Run the test suite:
|
|
```bash
|
|
# Install dev dependencies
|
|
uv sync --extra dev
|
|
|
|
# Run all tests
|
|
uv run pytest
|
|
|
|
# Run with verbose output
|
|
uv run pytest -v
|
|
|
|
# Run with coverage report
|
|
uv run pytest --cov=src --cov-report=html
|
|
|
|
# Run specific test file
|
|
uv run pytest tests/test_browser.py
|
|
```
|
|
|
|
### Development
|
|
```bash
|
|
# Format code
|
|
uv run black src tests
|
|
|
|
# Lint code
|
|
uv run ruff check src tests
|
|
|
|
# Type check
|
|
uv run mypy src
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
bowser/
|
|
├── src/
|
|
│ ├── network/ # URL parsing, HTTP, cookies
|
|
│ ├── parser/ # HTML & CSS parsers
|
|
│ ├── layout/ # Block/inline/embedded layout
|
|
│ ├── render/ # Paint commands, fonts, compositing
|
|
│ ├── script/ # JavaScript integration
|
|
│ ├── browser/ # Tab/frame/chrome orchestration
|
|
│ └── accessibility/ # A11y tree and screen reader
|
|
├── assets/ # Stylesheets, images
|
|
├── tests/ # Unit tests
|
|
├── pyproject.toml # Dependencies & build config
|
|
└── main.py # Entry point
|
|
```
|
|
|
|
## Development Milestones
|
|
|
|
- [ ] **M0**: Project scaffold ✅
|
|
- [ ] **M1**: Display "Hello World" in GTK window with manual URL fetch & paint
|
|
- [ ] **M2**: Render plain HTML with text wrapping
|
|
- [ ] **M3**: Parse and apply basic CSS
|
|
- [ ] **M4**: Clickable links and navigation
|
|
- [ ] **M5**: Form input and submission
|
|
- [ ] **M6**: JavaScript execution (embed QuickJS)
|
|
- [ ] **M7**: Event handling
|
|
- [ ] **M8**: Images and iframes
|
|
- [ ] **M9**: Animations and visual effects
|
|
- [ ] **M10**: Accessibility and keyboard navigation
|
|
|
|
## References
|
|
|
|
- [Web Browser Engineering](https://browser.engineering/) — O'Reilly book
|
|
- [Let's Build a Browser Engine](https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html) — Matt Brubeck's Rust tutorial
|