feat(devtools): add aurelia devtools sidebar UI

Introduces a dedicated Aurelia DevTools sidebar integrated into the Chrome Elements panel, replacing the prior top‑level DevTools UI approach. Adds a full sidebar architecture including a new sidebar app, debug host, and supporting UI components (HTML/CSS/TS), plus e2e/unit test scaffolding and fixtures. Wires CI workflows to run e2e tests against the new flow. This lays groundwork for a richer, in‑panel inspection experience for Aurelia components and DI, with enhanced templates, bindings, and timeline support.

Author: Vheissu

.github/workflows/e2e-tests.yml

@@ -0,0 +1,54 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [main, 'feat/**']
+  pull_request:
+    branches: [main]
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+
+      - name: Install fixture app dependencies
+        run: npm run e2e:fixture:install
+
+      - name: Build extension
+        run: npm run build
+
+      - name: Run E2E tests
+        run: npx playwright test --config=e2e/playwright.config.ts
+        env:
+          CI: true
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
+      - name: Upload test traces
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: test-traces
+          path: test-results/
+          retention-days: 7

.github/workflows/unit-tests.yml

@@ -0,0 +1,35 @@
+name: Unit Tests
+
+on:
+  push:
+    branches: [main, 'feat/**']
+  pull_request:
+    branches: [main]
+
+jobs:
+  unit:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm test
+
+      - name: Upload coverage report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: coverage-report
+          path: coverage/
+          retention-days: 7

.gitignore

@@ -3,3 +3,6 @@ node_modules
 .DS_STORE
 /coverage
 dist/*
+e2e/fixtures/aurelia-app/dist
+/playwright-report
+/test-results

README.md

@@ -12,7 +12,7 @@ This project is a work in progress. The current version is not yet available on
 
 ----
 
-A browser extension for debugging Aurelia 1 and 2 applications. Features a top-level DevTools tab with modern, professional interface and dual-tab architecture for comprehensive debugging.
+A browser extension for debugging Aurelia 1 and 2 applications. Integrates as a sidebar pane in Chrome's Elements panel for seamless component inspection.
 
 ## Features
 
@@ -71,7 +71,7 @@ Install the latest Node.js and npm versions.
 1. Run `npm run start` to start development mode
 2. Load the extension in Chrome (see Installation > Manual Installation)
 3. Pin the Aurelia Extension in the toolbar to verify detection: "Aurelia 2 detected on this page."
-4. Open Developer Tools and navigate to the "⚡ Aurelia" tab
+4. Open Developer Tools, go to the Elements panel, and find the "Aurelia" sidebar pane
 5. For code changes:
    - Reload the extension in `chrome://extensions`
    - Close and reopen Developer Tools (or Ctrl+R in the DevTools inspect window)
@@ -166,29 +166,31 @@ This event-first approach keeps the surface area tiny (just listen and dispatch)
 ## Architecture
 
 ### Core Components
-- **Main Application** (`src/main.ts`, `src/app.ts`) - Aurelia 2 app rendering the DevTools UI
+- **Sidebar Application** (`src/sidebar/`) - Aurelia 2 app rendering the Elements panel sidebar
 - **Extension Scripts**:
   - `detector.ts` - Detects Aurelia versions on web pages
   - `background.ts` - Service worker managing extension state
   - `contentscript.ts` - Finds Aurelia instances in DOM
-  - `devtools.js` - Creates the DevTools panel
+  - `devtools.js` - Creates the Elements sidebar pane
 
 ### Build System
-- **Vite** - Modern build tool replacing Webpack
+- **Vite** - Modern build tool
 - **TypeScript** - Type safety and modern JavaScript features
-- **Aurelia 2** - Framework for the DevTools UI itself
+- **Aurelia 2** - Framework for the sidebar UI itself
 
 ### File Structure
 ```
 src/
-├── main.ts                 # Entry point
-├── app.ts, app.html        # Main Aurelia app
-├── backend/                # Debug host and communication
+├── sidebar/                # Sidebar application
+│   ├── main.ts             # Entry point
+│   ├── sidebar-app.ts      # Main ViewModel
+│   ├── sidebar-app.html    # Template
+│   ├── sidebar-app.css     # Styles
+│   └── sidebar-debug-host.ts # Communication layer
 ├── background/             # Service worker
 ├── contentscript/          # Page content interaction
 ├── detector/               # Aurelia version detection
-├── devtools/               # DevTools panel creation
-├── resources/elements/     # UI components
+├── devtools/               # Sidebar pane creation
 ├── shared/                 # Common types and utilities
 └── popups/                 # Extension popup pages
 ```

docs/deployment.md

@@ -190,14 +190,15 @@ All deployments must pass:
 ```bash
 # Required files in dist/:
 ├── manifest.json         # Extension manifest
-├── index.html           # DevTools panel entry
+├── sidebar.html          # Sidebar pane entry
 ├── build/
-│   ├── entry.js         # Main application
-│   ├── background.js    # Service worker
-│   ├── contentscript.js # Content script
-│   └── detector.js      # Aurelia detector
-├── images/              # Extension icons
-└── popups/              # Extension popups
+│   ├── sidebar.js        # Sidebar application
+│   ├── background.js     # Service worker
+│   ├── contentscript.js  # Content script
+│   └── detector.js       # Aurelia detector
+├── devtools/             # DevTools page
+├── images/               # Extension icons
+└── popups/               # Extension popups
 ```
 
 ## Chrome Web Store Review Process

e2e/fixtures/aurelia-app/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Aurelia 2 E2E Fixture</title>
+</head>
+<body>
+  <app></app>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>