fix(browser): render dark-scheme documents on a dark canvas in doc previews (#32975)

src/renderer/src/components/browser-pane/workspace-doc/doc-preview-webview-attach.test.ts

@@ -4,17 +4,9 @@ import { acquireWebviewsDragPassthrough } from '../host-guest/webview-drag-passt
 import { webviewRegistry } from '../host-guest/webview-registry'
 import { attachDocPreviewWebview } from './doc-preview-webview-attach'
 
-it('restores pointer input when a drag ends after attaching a document preview', () => {
-  const container = document.createElement('div')
-  document.body.appendChild(container)
-  const append = vi.spyOn(container, 'appendChild')
-  append.mockImplementation((node) => {
-    expect((node as HTMLElement).style.pointerEvents).toBe('none')
-    return Node.prototype.appendChild.call(container, node)
-  })
-  const release = acquireWebviewsDragPassthrough()
-  const attached = attachDocPreviewWebview({
-    previewId: 'preview-drag',
+function attach(previewId: string, container: HTMLDivElement) {
+  return attachDocPreviewWebview({
+    previewId,
     container,
     url: 'orca-preview://grant/index.html',
     ariaLabel: 'HTML preview',
@@ -25,6 +17,18 @@ it('restores pointer input when a drag ends after attaching a document preview',
     onTitleUpdated: vi.fn(),
     onViewportMessage: vi.fn()
   })
+}
+
+it('restores pointer input when a drag ends after attaching a document preview', () => {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const append = vi.spyOn(container, 'appendChild')
+  append.mockImplementation((node) => {
+    expect((node as HTMLElement).style.pointerEvents).toBe('none')
+    return Node.prototype.appendChild.call(container, node)
+  })
+  const release = acquireWebviewsDragPassthrough()
+  const attached = attach('preview-drag', container)
 
   try {
     expect(webviewRegistry.get('preview-drag')).toBe(attached.webview)
@@ -39,3 +43,9 @@ it('restores pointer input when a drag ends after attaching a document preview',
   }
   expect(webviewRegistry.has('preview-drag')).toBe(false)
 })
+
+it('attaches an opaque guest so dark-scheme documents get a dark canvas', () => {
+  const attached = attach('preview-opaque', document.createElement('div'))
+  expect(attached.webview.getAttribute('webpreferences')).toContain('transparent=false')
+  attached.detach()
+})

src/renderer/src/components/browser-pane/workspace-doc/doc-preview-webview-attach.ts

@@ -1,5 +1,5 @@
 import { DOC_PREVIEW_PARTITION } from '../../../../../shared/doc-preview-scheme'
-import { ORCA_BROWSER_GUEST_WEB_PREFERENCES_ATTRIBUTE } from '../../../../../shared/browser-guest-web-preferences'
+import { ORCA_BROWSER_PAGE_GUEST_WEB_PREFERENCES_ATTRIBUTE } from '../../../../../shared/browser-guest-web-preferences'
 import {
   moveFocusToRendererBeforeWebviewDetach,
   registerPersistentWebview,
@@ -34,11 +34,9 @@ export function attachDocPreviewWebview({
   // Why no allowpopups: the guest's preload intercepts a trusted click on a link before Chromium
   // considers a popup at all, so target="_blank" needs no popup path and every one stays denied.
   webview.setAttribute('partition', DOC_PREVIEW_PARTITION)
-  webview.setAttribute('webpreferences', ORCA_BROWSER_GUEST_WEB_PREFERENCES_ATTRIBUTE)
+  // Why opaque: Chromium paints its dark canvas for dark-scheme documents (JSON, text) only then.
+  webview.setAttribute('webpreferences', ORCA_BROWSER_PAGE_GUEST_WEB_PREFERENCES_ATTRIBUTE)
   webview.setAttribute('aria-label', ariaLabel)
-  // Browsers paint an undeclared page canvas white; the guest is transparent, so without this the
-  // editor's dark surface shows through and default black text becomes unreadable.
-  webview.style.backgroundColor = '#fff'
   webview.style.display = 'flex'
   webview.style.width = '100%'
   webview.style.height = '100%'