feat: improve redaction screenshot ux

Author: neonwatty

docs/website/configuration.mdx

@@ -218,7 +218,27 @@ Control how screenshots are collected during the feedback flow.
 - **`auto`** -- Automatically captures a full-page screenshot after the form is submitted, without showing the manual screenshot picker or redaction step.
 - **`required`** -- Requires a screenshot before submission. Users can choose full page, element, or area, then annotate or redact before submitting.
 
-Manual redaction is controlled by the person submitting feedback. Use developer-configured masking for fields that should never appear in screenshots, especially with automatic screenshots.
+Manual redaction is controlled by the person submitting feedback. Use developer-configured masking for fields that should never appear in screenshots, especially with automatic screenshots. Auto mode warns users that a full-page screenshot will be attached, but it does not show the manual picker or annotation review step.
+
+### Developer-configured screenshot masking
+
+BugDrop can visually mask fields that your app marks as private before a screenshot is uploaded:
+
+```html
+<input data-bugdrop-redact value="sk_live_..." />
+<section data-bugdrop-mask>Private account details</section>
+```
+
+Supported attributes:
+
+- `data-bugdrop-redact`
+- `data-bd-redact`
+- `data-bugdrop-redacted`
+- `data-bugdrop-mask`
+
+This is best-effort visual masking, not a data-loss-prevention or security boundary. BugDrop can only mask content it can measure in the page DOM. Unmarked sensitive information can still appear, and browser rendering limits can apply to canvas, image, video, iframe, SVG, shadow DOM, pseudo-element, and highly custom control content.
+
+Selected-area screenshots are rendered to the selected dimensions and masks are translated into that crop, but the capture still runs client-side against the page DOM. Avoid screenshots entirely for pages where client-side screenshot rendering is unacceptable.
 
 ```html
 <!-- Automatically attach a full-page screenshot -->

e2e/widget.spec.ts

@@ -2202,6 +2202,20 @@ test.describe('Screenshot Crash Prevention (#67)', () => {
     }`;
   }
 
+  function redactionAwarePng() {
+    return `function(el, opts) {
+      window.__captureOpts = opts;
+      var canvas = document.createElement('canvas');
+      var pixelRatio = opts && opts.pixelRatio ? opts.pixelRatio : 1;
+      canvas.width = Math.max(1, Math.ceil((opts && opts.width ? opts.width : document.documentElement.scrollWidth) * pixelRatio));
+      canvas.height = Math.max(1, Math.ceil((opts && opts.height ? opts.height : document.documentElement.scrollHeight) * pixelRatio));
+      var ctx = canvas.getContext('2d');
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      return Promise.resolve(canvas.toDataURL('image/png'));
+    }`;
+  }
+
   function mockGetDisplayMedia(page: Page, body: string) {
     return page.addInitScript(`
       Object.defineProperty(navigator, 'mediaDevices', {
@@ -3262,6 +3276,58 @@ test.describe('Screenshot Crash Prevention (#67)', () => {
     await expect(host.locator('css=p >> text=too complex')).not.toBeAttached();
   });
 
+  test('communicates developer redactions for full-page screenshots', async ({ page }) => {
+    await mockHtmlToImage(page, redactionAwarePng());
+    await page.goto('/test/redaction.html');
+
+    const host = await navigateToScreenshotOptions(page);
+    await expect(host.locator('css=.bd-redaction-note')).toContainText(
+      'marked some fields for redaction'
+    );
+
+    await host.locator('css=[data-action="capture"]').click();
+
+    await expect(host.locator('css=#annotation-canvas')).toBeVisible({ timeout: 10000 });
+    await expect(host.locator('css=.bd-redaction-note')).toContainText(
+      '1 private item was marked for redaction'
+    );
+    await expect(page.locator('#redacted-test-input')).toHaveValue('sk_live_local_test_secret');
+  });
+
+  test('communicates developer redactions for selected-area screenshots', async ({ page }) => {
+    await mockHtmlToImage(page, redactionAwarePng());
+    await page.goto('/test/redaction.html');
+    await page.locator('#redacted-test-input').scrollIntoViewIfNeeded();
+
+    const host = await navigateToScreenshotOptions(page);
+    await host.locator('css=[data-action="area"]').click();
+    await expect(page.locator('#bugdrop-area-picker-overlay')).toBeVisible({ timeout: 5000 });
+    await expect(page.locator('#bugdrop-area-picker-tooltip')).toContainText(
+      'Marked private fields may be masked if included'
+    );
+
+    const box = await page.locator('#redacted-test-input').boundingBox();
+    expect(box).toBeTruthy();
+
+    await page.mouse.move(box!.x - 8, box!.y - 8);
+    await page.mouse.down();
+    await page.mouse.move(box!.x + box!.width + 8, box!.y + box!.height + 8);
+    await page.mouse.up();
+
+    await expect(host.locator('css=#annotation-canvas')).toBeVisible({ timeout: 10000 });
+    await expect(host.locator('css=.bd-redaction-note')).toContainText(
+      '1 private item was marked for redaction'
+    );
+
+    const captureOpts = await page.evaluate(
+      () =>
+        (window as Window & { __captureOpts?: { width?: number; height?: number } }).__captureOpts
+    );
+    expect(captureOpts?.width).toBeGreaterThan(100);
+    expect(captureOpts?.height).toBeGreaterThan(40);
+    await expect(page.locator('#redacted-test-input')).toHaveValue('sk_live_local_test_secret');
+  });
+
   test('annotation modal gives issue #117 style previews enough readable width', async ({
     page,
   }) => {
@@ -3833,6 +3899,22 @@ test.describe('Screenshot Mode Configuration', () => {
     ).toBe(1);
   });
 
+  test('auto mode warns users about automatic full-page screenshots', async ({ page }) => {
+    await setupInstalledApp(page);
+    await mockSuccessfulCapture(page);
+    await setupSuccessfulSubmit(page);
+
+    await page.goto('/test/redaction.html?screenshot=auto');
+    const host = await openForm(page);
+
+    await expect(host.locator('css=form')).toContainText(
+      'This site will attach a full-page screenshot when you submit'
+    );
+    await expect(host.locator('css=form')).toContainText(
+      'unmarked sensitive information can still be included'
+    );
+  });
+
   test('auto mode skips full-page capture on very complex pages', async ({ page }) => {
     await setupInstalledApp(page);
     await mockSuccessfulCapture(page);
@@ -4059,6 +4141,19 @@ test.describe('Screenshot Masking', () => {
     expect(await pixelAt(page, screenshot, cx, cy)).toEqual([0, 0, 0, 255]);
   });
 
+  test('masks elements tagged with data-bugdrop-redact', async ({ page }) => {
+    const { screenshot, pixelRatio } = await submitFeedbackWithFullPageCapture(
+      page,
+      '/test/redaction.html'
+    );
+
+    const rect = await docRectOf(page, '#redacted-test-input');
+    const cx = Math.floor((rect.x + rect.w / 2) * pixelRatio);
+    const cy = Math.floor((rect.y + rect.h / 2) * pixelRatio);
+
+    expect(await pixelAt(page, screenshot, cx, cy)).toEqual([0, 0, 0, 255]);
+  });
+
   test('does not mask unrelated elements', async ({ page }) => {
     const { screenshot, pixelRatio } = await submitFeedbackWithFullPageCapture(
       page,

playwright.config.ts

@@ -32,7 +32,7 @@ export default defineConfig({
   webServer: process.env.LIVE_TARGET
     ? undefined
     : {
-        command: 'npm run dev',
+        command: 'BUGDROP_TEST_HOOKS=1 npm run build:widget && npm run dev',
         url: 'http://localhost:8787',
         reuseExistingServer: !process.env.CI,
         timeout: 120 * 1000,

public/test/redaction.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BugDrop Redaction Fixture</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      padding: 96px;
+      background: #101828;
+      color: #e5e7eb;
+      font-family: Arial, sans-serif;
+    }
+
+    main {
+      max-width: 860px;
+      margin: 0 auto;
+    }
+
+    h1 {
+      margin: 0 0 12px;
+      font-size: 32px;
+    }
+
+    p {
+      margin: 0 0 32px;
+      color: #aeb7c8;
+    }
+
+    .fixture-panel {
+      padding: 28px;
+      background: #182235;
+      border: 1px solid #31405c;
+      border-radius: 12px;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+      color: #cbd5e1;
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    .redacted-field {
+      width: 420px;
+      height: 72px;
+      padding: 0 20px;
+      background: #dc2626;
+      border: 2px solid #fecaca;
+      border-radius: 12px;
+      color: #ffffff;
+      font-size: 24px;
+      font-weight: 700;
+    }
+
+    .plain-field {
+      width: 420px;
+      height: 52px;
+      margin-top: 24px;
+      padding: 0 16px;
+      background: #0f172a;
+      border: 1px solid #475569;
+      border-radius: 8px;
+      color: #e5e7eb;
+      font-size: 18px;
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>Redaction Fixture</h1>
+    <p>Fixture used by Playwright to verify BugDrop screenshot redaction behavior.</p>
+
+    <section class="fixture-panel">
+      <label for="redacted-test-input">Marked private</label>
+      <input
+        id="redacted-test-input"
+        class="redacted-field"
+        type="text"
+        data-bugdrop-redact
+        value="sk_live_local_test_secret"
+      >
+
+      <label for="plain-test-input" style="margin-top: 24px;">Unmarked field</label>
+      <input
+        id="plain-test-input"
+        class="plain-field"
+        type="text"
+        value="ordinary visible value"
+      >
+    </section>
+  </main>
+
+  <script id="bugdrop-script" defer src="/widget.js" data-repo="mean-weasel/bugdrop-widget-test" data-theme="dark" data-color="#ff9e64"></script>
+  <script>
+    (function () {
+      try {
+        var script = document.getElementById('bugdrop-script');
+        if (!script) return;
+        var params = new URLSearchParams(location.search);
+        var mapping = { screenshot: 'data-screenshot' };
+        Object.keys(mapping).forEach(function (key) {
+          var v = params.get(key);
+          if (v != null) script.setAttribute(mapping[key], v);
+        });
+      } catch (e) {
+        // fixture must never break the page
+      }
+    })();
+  </script>
+</body>
+</html>

scripts/build-widget.js

@@ -32,15 +32,24 @@ const [major, minor, patch] = version.split('.');
 
 console.log(`Building widget version ${version}...`);
 
+const enableTestHooks = process.env.BUGDROP_TEST_HOOKS === '1';
+
 // Build the main widget bundle
 execSync(
-  `npx esbuild src/widget/index.ts --bundle --minify --format=iife --define:__BUGDROP_VERSION__='"${version}"' --outfile=public/widget.js`,
+  `npx esbuild src/widget/index.ts --bundle --minify --format=iife --define:__BUGDROP_VERSION__='"${version}"' --define:__BUGDROP_ENABLE_TEST_HOOKS__=${enableTestHooks ? 'true' : 'false'} --outfile=public/widget.js`,
   { cwd: rootDir, stdio: 'inherit' }
 );
 
 // Create versioned copies
 const widgetPath = join(publicDir, 'widget.js');
 
+if (!enableTestHooks) {
+  const widget = readFileSync(widgetPath, 'utf-8');
+  if (widget.includes('__bugdropMockToPng')) {
+    throw new Error('Production widget build unexpectedly contains test screenshot hook');
+  }
+}
+
 // widget.v{major}.js (e.g., widget.v1.js)
 const majorVersionPath = join(publicDir, `widget.v${major}.js`);
 copyFileSync(widgetPath, majorVersionPath);

src/widget/area-picker.ts

@@ -3,16 +3,25 @@ import { resolvePickerStyle } from './picker';
 
 const MIN_SELECTION_SIZE = 10;
 const AREA_PICKER_INSTRUCTION = 'Draw a selection around the area to capture (ESC to cancel)';
+const AREA_PICKER_REDACTION_INSTRUCTION =
+  'Draw a selection around the area to capture. Marked private fields may be masked if included. (ESC to cancel)';
 
-export function createAreaPicker(style?: PickerStyle): Promise<DOMRect | null> {
+export function createAreaPicker(
+  style?: PickerStyle,
+  opts?: { redactionsAvailable?: boolean }
+): Promise<DOMRect | null> {
   return new Promise(resolve => {
     setTimeout(() => {
-      startAreaPicker(resolve, style);
+      startAreaPicker(resolve, style, opts);
     }, 50);
   });
 }
 
-function startAreaPicker(resolve: (rect: DOMRect | null) => void, style?: PickerStyle): void {
+function startAreaPicker(
+  resolve: (rect: DOMRect | null) => void,
+  style?: PickerStyle,
+  opts?: { redactionsAvailable?: boolean }
+): void {
   const { accent, fontFamily, radius, bw, tooltipBg, tooltipText, tooltipBorder } =
     resolvePickerStyle(style);
 
@@ -65,7 +74,9 @@ function startAreaPicker(resolve: (rect: DOMRect | null) => void, style?: Picker
     border: ${bw}px solid ${tooltipBorder};
     pointer-events: none;
   `;
-  tooltip.textContent = AREA_PICKER_INSTRUCTION;
+  tooltip.textContent = opts?.redactionsAvailable
+    ? AREA_PICKER_REDACTION_INSTRUCTION
+    : AREA_PICKER_INSTRUCTION;
   document.body.appendChild(tooltip);
 
   let startX = 0;