# UI Injection Testing Guide

## Quick Test (2 minutes)

### Prerequisites
1. Load the extension in Chrome
2. Navigate to a Filevine project with DICOM files

### Test Steps

1. **Reload Extension**
   - Go to `chrome://extensions/`
   - Click the reload button for "Filevine Document Viewer"

2. **Navigate to Documents Page**
   - Go to Filevine and log in
   - Open a project: `https://{org}.filevineapp.com/project/{projectId}/docs`

3. **Look for DICOM Files**
   - Any files ending in `.dcm` or `.dicom` should have a "View" button next to them
   - The button should have: transparent background, maroon border, medical chart icon
   - Button should appear inline before the "me (filesize)" metadata

4. **Check Toolbar Button (if folder has DICOM files)**
   - Look in the top-right document action bar
   - Should see "View DICOM Series (N)" button with same styling
   - N = number of DICOM files in current folder

5. **Click Individual File Button**
   - Click the "View" button next to a single DICOM file
   - Button should show "⏳ Loading..." state
   - DICOM viewer should open in a new tab with that file
   - Button should show "✓ Opened" briefly, then return to normal

6. **Click Toolbar Series Button**
   - Click "View DICOM Series (N)" in toolbar
   - Button should show loading state
   - DICOM viewer should open with all DICOM files in the folder
   - All files should load successfully (no "file not found" errors)

### Expected Behavior

#### Button Appearance

**Individual File Buttons**:
- **Default State**: Transparent background, maroon border, medical chart icon (maroon), "View" text (dark grey)
- **Positioning**: Inline with document, 10px spacing before username/filesize metadata
- **Hover**: Light grey background (#f7fafc), darker maroon border
- **Loading**: Opacity reduced with "⏳ Loading..." text
- **Success**: Cyan gradient background with "✓ Opened" text (2 seconds)
- **Error**: Red gradient with "✗ Failed" text (3 seconds)

**Toolbar Series Button**:
- **Default State**: Same styling as individual buttons
- **Position**: Inline with other document action buttons in top right
- **Text**: "View DICOM Series (N)" where N is the count of DICOM files
- **Visibility**: Only appears when folder contains DICOM files

#### Console Messages
Open Chrome DevTools Console (F12) and look for:
```
[UI Injector] Starting UI injection
[UI Injector] Observer started
[UI Injector] Injected button for document {docId} in list
[UI Injector] View DICOM clicked: {docId, filename}
```

### Troubleshooting

#### No Buttons Appear

1. **Check Console for Errors**
   - Open DevTools Console (F12)
   - Look for any error messages with `[UI Injector]` prefix

2. **Verify Content Script Loaded**
   - Console should show: `[Filevine Plugin] Content script loaded`
   - Console should show: `[UI Injector] Starting UI injection`

3. **Check File Extensions**
   - Buttons only appear for files ending in `.dcm` or `.dicom`
   - Verify the document list actually contains DICOM files

4. **Inspect DOM**
   - Right-click on a document row and select "Inspect"
   - Look for buttons with class `fv-plugin-view-dicom-btn`
   - Check if the button exists but is hidden/styled incorrectly

5. **Verify Selectors Match**
   - The UI Injector looks for these CSS selectors:
     - `.doc-list-item`
     - `.document-item`
     - `.file-item`
     - `[data-testid*="document"]`
     - `[class*="doc-"]`
     - `[class*="document-"]`
     - `[class*="file-"]`
   - Inspect a document row and verify it matches one of these patterns

#### Button Doesn't Work

1. **Check Background Script**
   - Open extension background page: `chrome://extensions/` → "Service worker" link
   - Look for error messages when clicking button

2. **Verify Message Passing**
   - Console should show: `[UI Injector] View DICOM clicked`
   - Background console should show: `[Download] Viewing file directly`

3. **Check Authentication**
   - Extension must be authenticated with Filevine
   - Check popup to verify "Connected to Filevine" status

4. **Verify File Download**
   - Background script needs to download the file first
   - Check Network tab for download request
   - Check IndexedDB for stored file

## CSS Selector Strategy

The UI Injector uses multiple strategies to find document rows:

### Strategy 1: Direct Element Search
Looks for common document list selectors:
```javascript
const selectors = [
  '.doc-list-item',
  '.document-item',
  '.file-item',
  '[data-testid*="document"]',
  '[class*="doc-"]',
  '[class*="document-"]',
  '[class*="file-"]'
];
```

### Strategy 2: Filename Detection
For each potential document element:
1. Look for filename in common elements:
   - `.filename`, `.file-name`, `.document-name`, `.name`, `.title`
   - `[data-filename]` attribute
2. Check if filename ends with `.dcm` or `.dicom`

### Strategy 3: Document ID Extraction
Try multiple approaches to get document ID:
1. `data-doc-id` or `data-document-id` attributes
2. `id` attribute containing "doc" or "document"
3. Parse from nested links/buttons

### Strategy 4: Actions Area
Find or create actions area for button:
1. Look for existing: `.actions`, `.document-actions`, `.file-actions`
2. Create new if not found: Insert `<div class="fv-plugin-actions">`

## Implementation Details

### File Locations
- **Bundled Content Script**: `src/content/index.bundle.js` (lines 560-873)
  - Contains complete UIInjector class inline
  - Initialized at line 837
  - Started at line 873
- **Modular Version**: `src/content/ui-injector.js` (reference only)
- **Documentation**: `docs/UI_INJECTION.md`

### Key Code Sections

#### UIInjector Class (index.bundle.js:560-833)
- `start()`: Initializes MutationObserver and triggers initial injection
- `injectUI()`: Main injection logic
- `injectIntoDocumentRows()`: Finds DICOM files and adds buttons
- `createViewButton()`: Creates styled button with event handlers
- `handleViewClick()`: Handles button clicks and messages background
- `isDicomFile()`: Checks if filename is DICOM
- `getProjectIdFromUrl()`: Extracts project ID from URL

#### Initialization (index.bundle.js:839-874)
```javascript
async function initialize() {
  // ... existing auth code ...

  // Start UI injection (adds buttons to Filevine UI)
  uiInjector.start();
}
```

## Next Steps

After testing:
1. Document any selector issues (if buttons don't appear)
2. Adjust CSS selectors based on actual Filevine DOM
3. Add support for additional file types if needed
4. Enhance button styling/positioning based on feedback
5. Consider adding keyboard shortcuts
