@skyramp/skyramp 1.3.9 → 1.3.11

package/src/pdfViewer/bundle.js

@@ -0,0 +1,1349 @@
+/**
+ * Copyright (c) Skyramp Corporation.
+ *
+ * Bundled PDF.js viewer for execution-time injection
+ * This is a self-contained JavaScript string that can be injected via page.addInitScript()
+ *
+ * AUTO-GENERATED from Playwright sources by scripts/build-pdf-bundle.js
+ * DO NOT EDIT THIS FILE DIRECTLY - edit pdfJsViewer.ts instead and regenerate
+ *
+ * Source files:
+ * - PdfJsViewer class: /Users/chelfim/code/playwright/packages/injected/src/recorder/skyramp/pdfJsViewer.ts
+ * - Execution helpers: /Users/chelfim/Desktop/code/skyramp/libs/npm/scripts/pdf-execution-helpers.js
+ */
+
+/**
+ * Self-contained PDF viewer injection script
+ * This script will be injected into pages during test execution to replace Chrome's PDF plugin with PDF.js
+ */
+const PDF_VIEWER_INJECTION_SCRIPT = `
+(function() {
+  'use strict';
+
+  console.log('[PW-PDF] PDF viewer injection script initializing...');
+
+  // =============================================================================
+  // PDF.js Viewer Class (auto-generated from pdfJsViewer.ts)
+  // =============================================================================
+
+  class PdfJsViewer {
+    constructor(container) {
+        this._pdfDoc = null;
+        this._canvasElements = [];
+        this._thumbnailElements = [];
+        this._isRendering = false;
+        this._toolbar = null;
+        this._sidebar = null;
+        this._mainContent = null;
+        this._currentPage = 1;
+        this._pageDisplay = null;
+        this._zoomDisplay = null;
+        this._currentZoom = 1.0; // 100%
+        this._rotation = 0; // 0, 90, 180, 270 degrees
+        this._pdfDataUrl = ''; // Store for download
+        this._filename = 'Document.pdf';
+        this._moreMenuElement = null;
+        this._moreMenuCleanup = null;
+        this._twoPageView = false;
+        this._annotationsVisible = true;
+        this._container = container;
+    }
+    /**
+     * Loads PDF.js library from CDN if not already loaded
+     */
+    static async loadPdfJs() {
+        if (window.pdfjsLib) {
+            return; // Already loaded
+        }
+        console.log('[PDF.js] Loading PDF.js library from CDN...');
+        // Load PDF.js from CDN
+        const script = document.createElement('script');
+        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
+        return new Promise((resolve, reject) => {
+            script.onload = () => {
+                if (!window.pdfjsLib) {
+                    reject(new Error('PDF.js loaded but pdfjsLib not available'));
+                    return;
+                }
+                // Configure worker
+                window.pdfjsLib.GlobalWorkerOptions.workerSrc =
+                    'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+                console.log('[PDF.js] ✅ PDF.js library loaded successfully');
+                resolve();
+            };
+            script.onerror = () => reject(new Error('Failed to load PDF.js from CDN'));
+            document.head.appendChild(script);
+        });
+    }
+    /**
+     * Renders a PDF from a data URL
+     */
+    async renderPdf(config) {
+        const { pdfDataUrl, filename, onReady, onError } = config;
+        try {
+            // Store for later use (download, etc.)
+            this._pdfDataUrl = pdfDataUrl;
+            this._filename = filename || 'Document.pdf';
+            // Ensure PDF.js is loaded
+            await PdfJsViewer.loadPdfJs();
+            console.log('[PDF.js] Rendering PDF...');
+            this._isRendering = true;
+            // Load the PDF document
+            const loadingTask = window.pdfjsLib.getDocument(pdfDataUrl);
+            this._pdfDoc = await loadingTask.promise;
+            console.log(\`[PDF.js] PDF loaded: \${this._pdfDoc.numPages} pages\`);
+            // Let the body grow with the PDF content so Playwright's fullPage screenshot
+            // can capture all pages by scrolling the document (not an inner div).
+            if (document.documentElement) {
+                document.documentElement.style.height = 'auto';
+            }
+            if (document.body) {
+                document.body.style.margin = '0';
+                document.body.style.padding = '0';
+                document.body.style.width = '100%';
+                document.body.style.height = 'auto';
+                document.body.style.overflow = 'auto';
+            }
+            // Clear container
+            this._container.innerHTML = '';
+            this._canvasElements = [];
+            this._thumbnailElements = [];
+            // Container in normal document flow so all pages contribute to scroll height
+            this._container.style.cssText = \`
+        width: 100%;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        background-color: #525252;
+        margin: 0;
+        padding: 0;
+      \`;
+            // Create toolbar at top (match Chrome PDF viewer toolbar exactly)
+            this._toolbar = document.createElement('div');
+            this._toolbar.style.cssText = \`
+        width: 100%;
+        height: 56px;
+        background-color: #4a4a4a;
+        color: #e8eaed;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 8px;
+        box-sizing: border-box;
+        font-family: 'Roboto', Arial, sans-serif;
+        font-size: 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #2a2a2a;
+        position: sticky;
+        top: 0;
+        z-index: 10;
+      \`;
+            // Left section: menu + filename
+            const leftSection = document.createElement('div');
+            leftSection.style.cssText = 'display: flex; align-items: center; gap: 12px;';
+            // Menu button (hamburger)
+            const menuBtn = this._createToolbarButton('≡', 'Menu', () => {
+                // Toggle sidebar visibility
+                if (this._sidebar) {
+                    const isHidden = this._sidebar.style.display === 'none';
+                    this._sidebar.style.display = isHidden ? 'block' : 'none';
+                }
+            });
+            menuBtn.style.fontSize = '24px';
+            leftSection.appendChild(menuBtn);
+            // Filename
+            const filenameDisplay = document.createElement('div');
+            filenameDisplay.textContent = filename || 'Document.pdf';
+            filenameDisplay.style.cssText = \`
+        color: #e8eaed;
+        font-size: 14px;
+        font-weight: 400;
+        margin-left: 4px;
+      \`;
+            leftSection.appendChild(filenameDisplay);
+            // Center section: page navigation + zoom controls
+            const centerSection = document.createElement('div');
+            centerSection.style.cssText = 'display: flex; align-items: center; gap: 12px;';
+            // Page navigation
+            const pageNav = document.createElement('div');
+            pageNav.style.cssText = 'display: flex; align-items: center; gap: 8px;';
+            const pageDisplay = document.createElement('span');
+            pageDisplay.textContent = \`1 / \${this._pdfDoc.numPages}\`;
+            pageDisplay.style.cssText = 'color: #e8eaed; font-size: 13px; min-width: 50px; text-align: center;';
+            pageNav.appendChild(pageDisplay);
+            centerSection.appendChild(pageNav);
+            // Divider
+            const divider1 = document.createElement('div');
+            divider1.style.cssText = 'width: 1px; height: 24px; background-color: #5f5f5f;';
+            centerSection.appendChild(divider1);
+            // Zoom controls
+            const zoomControls = document.createElement('div');
+            zoomControls.style.cssText = 'display: flex; align-items: center; gap: 8px;';
+            const zoomOutBtn = this._createToolbarButton('−', 'Zoom out', () => {
+                this._zoom(this._currentZoom - 0.1);
+            });
+            zoomControls.appendChild(zoomOutBtn);
+            const zoomDisplay = document.createElement('span');
+            zoomDisplay.textContent = '100%';
+            zoomDisplay.style.cssText = 'color: #e8eaed; font-size: 13px; min-width: 45px; text-align: center; cursor: pointer;';
+            zoomDisplay.title = 'Reset zoom to 100%';
+            zoomDisplay.addEventListener('click', () => {
+                this._zoom(1.0);
+            });
+            zoomControls.appendChild(zoomDisplay);
+            const zoomInBtn = this._createToolbarButton('+', 'Zoom in', () => {
+                this._zoom(this._currentZoom + 0.1);
+            });
+            zoomControls.appendChild(zoomInBtn);
+            centerSection.appendChild(zoomControls);
+            // Divider
+            const divider2 = document.createElement('div');
+            divider2.style.cssText = 'width: 1px; height: 24px; background-color: #5f5f5f;';
+            centerSection.appendChild(divider2);
+            // Fit to page button
+            const fitBtn = this._createToolbarButton('⊡', 'Fit to page', () => {
+                this._fitToPage();
+            });
+            fitBtn.style.fontSize = '18px';
+            centerSection.appendChild(fitBtn);
+            // Rotate button
+            const rotateBtn = this._createToolbarButton('↻', 'Rotate clockwise', () => {
+                this._rotate();
+            });
+            rotateBtn.style.fontSize = '18px';
+            centerSection.appendChild(rotateBtn);
+            // Right section: download + print + more
+            const rightSection = document.createElement('div');
+            rightSection.style.cssText = 'display: flex; align-items: center; gap: 8px;';
+            // Download button
+            const downloadBtn = this._createToolbarButton('⬇', 'Download', () => {
+                this._download();
+            });
+            downloadBtn.style.fontSize = '18px';
+            rightSection.appendChild(downloadBtn);
+            // Print button
+            const printBtn = this._createToolbarButton('🖨', 'Print', () => {
+                this._print();
+            });
+            printBtn.style.fontSize = '16px';
+            rightSection.appendChild(printBtn);
+            // More options button
+            let moreBtn;
+            moreBtn = this._createToolbarButton('⋮', 'More options', () => {
+                this._toggleMoreMenu(moreBtn);
+            });
+            moreBtn.style.fontSize = '20px';
+            rightSection.appendChild(moreBtn);
+            // Assemble toolbar
+            this._toolbar.appendChild(leftSection);
+            this._toolbar.appendChild(centerSection);
+            this._toolbar.appendChild(rightSection);
+            // Store references for updates
+            this._pageDisplay = pageDisplay;
+            this._zoomDisplay = zoomDisplay;
+            // Create content wrapper for sidebar and main content
+            const contentWrapper = document.createElement('div');
+            contentWrapper.style.cssText = \`
+        width: 100%;
+        flex: 1;
+        display: flex;
+      \`;
+            // Sidebar sticks to the left as the document scrolls
+            this._sidebar = document.createElement('div');
+            this._sidebar.style.cssText = \`
+        width: 294px;
+        height: calc(100vh - 56px);
+        overflow-y: auto;
+        overflow-x: hidden;
+        background-color: #3f3f3f;
+        border-right: 1px solid #2a2a2a;
+        padding: 20px 35px 20px 70px;
+        box-sizing: border-box;
+        flex-shrink: 0;
+        position: sticky;
+        top: 56px;
+        align-self: flex-start;
+      \`;
+            // Main content flows in the document — all pages contribute to scroll height
+            this._mainContent = document.createElement('div');
+            this._mainContent.style.cssText = \`
+        flex: 1;
+        overflow: visible;
+        background-color: #525252;
+        position: relative;
+        padding: 0;
+        box-sizing: border-box;
+      \`;
+            this._container.appendChild(this._toolbar);
+            contentWrapper.appendChild(this._sidebar);
+            contentWrapper.appendChild(this._mainContent);
+            this._container.appendChild(contentWrapper);
+            // Render all pages and thumbnails
+            for (let pageNum = 1; pageNum <= this._pdfDoc.numPages; pageNum++) {
+                await this._renderPage(pageNum);
+                await this._renderThumbnail(pageNum);
+            }
+            // Setup scroll sync
+            this._setupScrollSync();
+            this._isRendering = false;
+            console.log('[PDF.js] ✅ All pages rendered successfully');
+            if (onReady) {
+                onReady();
+            }
+        }
+        catch (error) {
+            this._isRendering = false;
+            console.error('[PDF.js] ❌ Failed to render PDF:', error);
+            if (onError) {
+                onError(error);
+            }
+        }
+    }
+    /**
+     * Injects the minimal CSS required by PDF.js renderTextLayer (once per document).
+     * PDF.js relies on external CSS for \`position: absolute\` and \`transform-origin\` on
+     * text layer spans — without it the spans are in normal flow and misaligned.
+     */
+    static _injectTextLayerCss() {
+        if (document.getElementById('pw-pdf-text-layer-styles'))
+            return;
+        const style = document.createElement('style');
+        style.id = 'pw-pdf-text-layer-styles';
+        style.textContent = \`
+      div[data-pw-pdf-text-layer] {
+        line-height: 1;
+        -webkit-text-size-adjust: none;
+        -moz-text-size-adjust: none;
+        text-size-adjust: none;
+        forced-color-adjust: none;
+        transform-origin: 0 0;
+      }
+      div[data-pw-pdf-text-layer] :is(span, br) {
+        color: transparent;
+        position: absolute;
+        white-space: pre;
+        cursor: text;
+        transform-origin: 0% 0%;
+        pointer-events: none;
+      }
+      div[data-pw-pdf-text-layer] span.markedContent {
+        top: 0;
+        height: 0;
+      }
+    \`;
+        document.head.appendChild(style);
+    }
+    /**
+     * Renders a single page in the main content area
+     */
+    async _renderPage(pageNum) {
+        if (!this._mainContent)
+            return;
+        const page = await this._pdfDoc.getPage(pageNum);
+        const viewport = page.getViewport({ scale: 1.0 });
+        const containerWidth = this._mainContent.clientWidth || 800;
+        let scale;
+        let wrapperMargin;
+        if (this._twoPageView) {
+            // Each page gets half the container width
+            const availableWidth = (containerWidth / 2 - 32) * 0.95;
+            scale = (availableWidth / viewport.width) * this._currentZoom;
+            wrapperMargin = '16px auto';
+        }
+        else {
+            const availableWidth = (containerWidth - 80) * 0.89;
+            scale = (availableWidth / viewport.width) * this._currentZoom;
+            wrapperMargin = '16px 20px 16px 80px';
+        }
+        const scaledViewport = page.getViewport({ scale });
+        // Create canvas wrapper — position:relative so the text layer can overlay it
+        const canvasWrapper = document.createElement('div');
+        canvasWrapper.setAttribute('data-page-number', pageNum.toString());
+        canvasWrapper.style.cssText = \`
+      position: relative;
+      margin: \${wrapperMargin};
+      background: white;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
+      width: \${scaledViewport.width}px;
+      height: \${scaledViewport.height}px;
+      box-sizing: border-box;
+    \`;
+        // Create canvas
+        const canvas = document.createElement('canvas');
+        canvas.width = scaledViewport.width;
+        canvas.height = scaledViewport.height;
+        canvas.style.cssText = \`
+      display: block;
+      width: 100%;
+      height: 100%;
+    \`;
+        canvasWrapper.appendChild(canvas);
+        this._mainContent.appendChild(canvasWrapper);
+        this._canvasElements.push(canvas);
+        // Render page on canvas
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Failed to get canvas 2D context');
+        }
+        const renderContext = {
+            canvasContext: context,
+            viewport: scaledViewport
+        };
+        await page.render(renderContext).promise;
+        // Render invisible text layer so Playwright text assertions can find PDF text
+        try {
+            PdfJsViewer._injectTextLayerCss();
+            const textContent = await page.getTextContent();
+            const textLayer = document.createElement('div');
+            textLayer.setAttribute('data-pw-pdf-text-layer', pageNum.toString());
+            // width/height must match the canvas so span coordinates align correctly.
+            // opacity:0 hides the layer visually but keeps spans interactive for mouse events.
+            textLayer.style.cssText = \`
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: \${scaledViewport.width}px;
+        height: \${scaledViewport.height}px;
+        overflow: hidden;
+        opacity: 0;
+      \`;
+            // --scale-factor is used by PDF.js CSS for font-size calculations
+            textLayer.style.setProperty('--scale-factor', String(scale));
+            canvasWrapper.appendChild(textLayer);
+            const renderTask = window.pdfjsLib.renderTextLayer({
+                textContentSource: textContent,
+                container: textLayer,
+                viewport: scaledViewport,
+                textDivs: [],
+            });
+            await renderTask.promise;
+        }
+        catch (e) {
+            console.warn(\`[PDF.js] Text layer render failed for page \${pageNum}:\`, e);
+        }
+        console.log(\`[PDF.js] Rendered page \${pageNum}/\${this._pdfDoc.numPages}\`);
+    }
+    /**
+     * Renders a thumbnail for the sidebar
+     */
+    async _renderThumbnail(pageNum) {
+        if (!this._sidebar)
+            return;
+        const page = await this._pdfDoc.getPage(pageNum);
+        // Thumbnail scale (match Chrome PDF viewer: ~118px wide thumbnails)
+        const viewport = page.getViewport({ scale: 1.0 });
+        const thumbnailWidth = 118;
+        const scale = thumbnailWidth / viewport.width;
+        const scaledViewport = page.getViewport({ scale });
+        // Create thumbnail wrapper (match Chrome PDF viewer style with generous spacing)
+        const thumbWrapper = document.createElement('div');
+        thumbWrapper.setAttribute('data-page-number', pageNum.toString());
+        thumbWrapper.style.cssText = \`
+      margin: 18px auto;
+      background: white;
+      cursor: pointer;
+      border: 3px solid transparent;
+      box-sizing: border-box;
+      transition: border-color 0.15s;
+      width: fit-content;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    \`;
+        // Highlight first page (match Chrome's blue highlight)
+        if (pageNum === 1) {
+            thumbWrapper.style.borderColor = '#1a73e8';
+        }
+        // Create thumbnail canvas
+        const canvas = document.createElement('canvas');
+        canvas.width = scaledViewport.width;
+        canvas.height = scaledViewport.height;
+        canvas.style.cssText = 'display: block; width: 100%; height: auto;';
+        // Page number label (match Chrome style)
+        const label = document.createElement('div');
+        label.textContent = pageNum.toString();
+        label.style.cssText = \`
+      text-align: center;
+      color: #dadce0;
+      font-size: 13px;
+      padding: 5px;
+      background: #3f3f3f;
+      font-family: 'Roboto', Arial, sans-serif;
+    \`;
+        thumbWrapper.appendChild(canvas);
+        thumbWrapper.appendChild(label);
+        this._sidebar.appendChild(thumbWrapper);
+        this._thumbnailElements.push(thumbWrapper);
+        // Click handler to jump to page
+        thumbWrapper.addEventListener('click', () => {
+            this._scrollToPage(pageNum);
+        });
+        // Render thumbnail
+        const context = canvas.getContext('2d');
+        if (!context)
+            return;
+        await page.render({
+            canvasContext: context,
+            viewport: scaledViewport
+        }).promise;
+    }
+    /**
+     * Scrolls to a specific page
+     */
+    _scrollToPage(pageNum) {
+        if (!this._mainContent)
+            return;
+        const pageElement = this._mainContent.querySelector(\`[data-page-number="\${pageNum}"]\`);
+        if (pageElement) {
+            const rect = pageElement.getBoundingClientRect();
+            // Offset by toolbar height (56px) so the page isn't hidden under the sticky toolbar
+            window.scrollBy({ top: rect.top - 56, behavior: 'smooth' });
+            this._updateCurrentPage(pageNum);
+        }
+    }
+    /**
+     * Updates the current page highlight in sidebar (match Chrome's blue highlight)
+     */
+    _updateCurrentPage(pageNum) {
+        if (this._currentPage === pageNum)
+            return;
+        // Remove highlight from old page
+        if (this._thumbnailElements[this._currentPage - 1]) {
+            this._thumbnailElements[this._currentPage - 1].style.borderColor = 'transparent';
+        }
+        // Add highlight to new page (match Chrome's blue: #1a73e8)
+        if (this._thumbnailElements[pageNum - 1]) {
+            this._thumbnailElements[pageNum - 1].style.borderColor = '#1a73e8';
+        }
+        this._currentPage = pageNum;
+        // Update toolbar page display
+        if (this._pageDisplay) {
+            this._pageDisplay.textContent = \`\${pageNum} / \${this._pdfDoc.numPages}\`;
+        }
+    }
+    /**
+     * Creates a toolbar button with consistent styling
+     */
+    _createToolbarButton(icon, title, onClick) {
+        const button = document.createElement('button');
+        button.textContent = icon;
+        button.title = title;
+        button.style.cssText = \`
+      background: transparent;
+      border: none;
+      color: #e8eaed;
+      cursor: pointer;
+      padding: 6px 8px;
+      border-radius: 4px;
+      font-size: 16px;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 32px;
+      height: 32px;
+      transition: background-color 0.2s;
+    \`;
+        // Hover effect
+        button.addEventListener('mouseenter', () => {
+            button.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+        });
+        button.addEventListener('mouseleave', () => {
+            button.style.backgroundColor = 'transparent';
+        });
+        // Click handler
+        button.addEventListener('click', (e) => {
+            e.preventDefault();
+            onClick();
+        });
+        return button;
+    }
+    /**
+     * Zoom to a specific level (1.0 = 100%)
+     */
+    async _zoom(newZoom) {
+        if (!this._pdfDoc || !this._mainContent) {
+            console.warn('[PDF.js] Cannot zoom: PDF not loaded');
+            return;
+        }
+        this._currentZoom = Math.max(0.25, Math.min(4.0, newZoom));
+        if (this._zoomDisplay) {
+            this._zoomDisplay.textContent = \`\${Math.round(this._currentZoom * 100)}%\`;
+        }
+        console.log(\`[PDF.js] Zooming to \${Math.round(this._currentZoom * 100)}%...\`);
+        await this._rerenderPages();
+        console.log('[PDF.js] ✅ Zoom complete');
+    }
+    /**
+     * Re-renders all pages (used by zoom and two-page view toggle)
+     */
+    async _rerenderPages() {
+        if (!this._pdfDoc || !this._mainContent)
+            return;
+        const scrollPercentage = window.scrollY / (document.body.scrollHeight || 1);
+        if (this._twoPageView) {
+            this._mainContent.style.cssText = \`
+        flex: 1;
+        overflow: visible;
+        background-color: #525252;
+        position: relative;
+        padding: 0;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        align-items: start;
+      \`;
+        }
+        else {
+            this._mainContent.style.cssText = \`
+        flex: 1;
+        overflow: visible;
+        background-color: #525252;
+        position: relative;
+        padding: 0;
+        box-sizing: border-box;
+      \`;
+        }
+        this._mainContent.innerHTML = '';
+        this._canvasElements = [];
+        for (let pageNum = 1; pageNum <= this._pdfDoc.numPages; pageNum++) {
+            await this._renderPage(pageNum);
+        }
+        setTimeout(() => {
+            window.scrollTo(0, scrollPercentage * document.body.scrollHeight);
+        }, 100);
+    }
+    /**
+     * Fit page to available width
+     */
+    _fitToPage() {
+        if (!this._mainContent)
+            return;
+        // Reset zoom to fit width (100% is already calculated to fit)
+        this._zoom(1.0);
+        console.log('[PDF.js] Fit to page');
+    }
+    /**
+     * Rotate PDF pages clockwise by 90 degrees
+     */
+    _rotate() {
+        this._rotation = (this._rotation + 90) % 360;
+        // Apply rotation transform to all pages
+        const pages = this._mainContent?.querySelectorAll('[data-page-number]');
+        if (pages) {
+            pages.forEach((page) => {
+                page.style.transform = \`rotate(\${this._rotation}deg)\`;
+            });
+        }
+        console.log(\`[PDF.js] Rotated to \${this._rotation} degrees\`);
+    }
+    /**
+     * Download the PDF file
+     */
+    _download() {
+        if (!this._pdfDataUrl) {
+            console.error('[PDF.js] No PDF data URL available for download');
+            return;
+        }
+        // Create a temporary download link
+        const link = document.createElement('a');
+        link.href = this._pdfDataUrl;
+        link.download = this._filename;
+        link.style.display = 'none';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        console.log(\`[PDF.js] Downloaded: \${this._filename}\`);
+    }
+    /**
+     * Print the PDF by rendering all canvas pages into a new window
+     */
+    _print() {
+        if (!this._canvasElements.length) {
+            console.error('[PDF.js] No pages rendered to print');
+            return;
+        }
+        const printWindow = window.open('', '_blank');
+        if (!printWindow) {
+            console.warn('[PDF.js] Print window blocked by browser');
+            return;
+        }
+        const doc = printWindow.document;
+        doc.write(\`<!DOCTYPE html><html><head>
+      <title>\${this._filename}</title>
+      <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { background: white; }
+        img { display: block; width: 100%; page-break-after: always; page-break-inside: avoid; }
+        img:last-child { page-break-after: avoid; }
+      </style>
+    </head><body>\`);
+        for (const canvas of this._canvasElements) {
+            const dataUrl = canvas.toDataURL('image/png');
+            doc.write(\`<img src="\${dataUrl}">\`);
+        }
+        doc.write('</body></html>');
+        doc.close();
+        // Trigger print once the window has loaded
+        printWindow.onload = () => {
+            printWindow.print();
+            printWindow.close();
+        };
+        // Fallback in case onload doesn't fire (e.g. data already loaded synchronously)
+        setTimeout(() => {
+            if (!printWindow.closed) {
+                printWindow.print();
+                printWindow.close();
+            }
+        }, 1500);
+        console.log('[PDF.js] Print window opened');
+    }
+    /**
+     * Toggles the "more options" dropdown menu matching Chrome's PDF viewer
+     */
+    _toggleMoreMenu(anchorElement) {
+        if (this._moreMenuElement) {
+            this._closeMoreMenu();
+            return;
+        }
+        const menu = document.createElement('div');
+        this._moreMenuElement = menu;
+        menu.style.cssText = \`
+      position: fixed;
+      background: #202124;
+      border-radius: 4px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.6);
+      z-index: 2147483648;
+      min-width: 220px;
+      padding: 4px 0;
+      font-family: 'Roboto', Arial, sans-serif;
+      font-size: 14px;
+      color: #e8eaed;
+    \`;
+        const rect = anchorElement.getBoundingClientRect();
+        menu.style.top = \`\${rect.bottom + 4}px\`;
+        menu.style.right = \`\${window.innerWidth - rect.right}px\`;
+        const addMenuItem = (text, checked, onClick) => {
+            const item = document.createElement('div');
+            item.style.cssText = \`
+        padding: 10px 16px 10px 44px;
+        cursor: pointer;
+        position: relative;
+        white-space: nowrap;
+      \`;
+            if (checked !== null) {
+                const checkEl = document.createElement('span');
+                checkEl.textContent = checked ? '✓' : '';
+                checkEl.style.cssText = \`
+          position: absolute;
+          left: 16px;
+          top: 50%;
+          transform: translateY(-50%);
+          font-size: 14px;
+        \`;
+                item.appendChild(checkEl);
+            }
+            const label = document.createElement('span');
+            label.textContent = text;
+            item.appendChild(label);
+            item.addEventListener('mouseenter', () => {
+                item.style.backgroundColor = 'rgba(255,255,255,0.1)';
+            });
+            item.addEventListener('mouseleave', () => {
+                item.style.backgroundColor = 'transparent';
+            });
+            item.addEventListener('click', () => {
+                this._closeMoreMenu();
+                onClick();
+            });
+            menu.appendChild(item);
+            return item;
+        };
+        const addDivider = () => {
+            const d = document.createElement('div');
+            d.style.cssText = 'height: 1px; background: rgba(255,255,255,0.15); margin: 4px 0;';
+            menu.appendChild(d);
+        };
+        addMenuItem('Two page view', this._twoPageView, () => {
+            this._twoPageView = !this._twoPageView;
+            this._rerenderPages();
+        });
+        addMenuItem('Annotations', this._annotationsVisible, () => {
+            this._annotationsVisible = !this._annotationsVisible;
+            console.log(\`[PDF.js] Annotations \${this._annotationsVisible ? 'shown' : 'hidden'}\`);
+        });
+        addDivider();
+        addMenuItem('Present', null, () => {
+            this._present();
+        });
+        addMenuItem('Document properties', null, () => {
+            this._showDocumentProperties();
+        });
+        // Close on outside click — registered after current event loop to avoid immediately closing
+        const onOutsideClick = (e) => {
+            if (!menu.contains(e.target) && e.target !== anchorElement) {
+                this._closeMoreMenu();
+            }
+        };
+        setTimeout(() => {
+            document.addEventListener('mousedown', onOutsideClick, true);
+            this._moreMenuCleanup = () => document.removeEventListener('mousedown', onOutsideClick, true);
+        }, 0);
+        document.body.appendChild(menu);
+    }
+    /**
+     * Closes the more options dropdown menu
+     */
+    _closeMoreMenu() {
+        if (this._moreMenuElement) {
+            this._moreMenuElement.remove();
+            this._moreMenuElement = null;
+        }
+        if (this._moreMenuCleanup) {
+            this._moreMenuCleanup();
+            this._moreMenuCleanup = null;
+        }
+    }
+    /**
+     * Present mode — not yet implemented.
+     */
+    _present() {
+        console.log('[PDF.js] Present: not yet implemented');
+    }
+    /**
+     * Shows a dialog with document metadata matching Chrome's "Document properties"
+     */
+    async _showDocumentProperties() {
+        if (!this._pdfDoc)
+            return;
+        let info = {};
+        try {
+            const metadata = await this._pdfDoc.getMetadata();
+            info = metadata.info || {};
+        }
+        catch (e) {
+            // metadata unavailable
+        }
+        // Calculate file size from data URL base64
+        let fileSize = '-';
+        if (this._pdfDataUrl) {
+            try {
+                const base64 = this._pdfDataUrl.split(',')[1];
+                if (base64) {
+                    const bytes = Math.ceil((base64.length * 3) / 4);
+                    fileSize = bytes >= 1024 * 1024
+                        ? \`\${(bytes / (1024 * 1024)).toFixed(1)} MB\`
+                        : \`\${(bytes / 1024).toFixed(1)} KB\`;
+                }
+            }
+            catch (e) { /* ignore */ }
+        }
+        // Parse PDF date string (D:YYYYMMDDHHmmss...) to locale format
+        const formatPdfDate = (raw) => {
+            if (!raw)
+                return '-';
+            const m = raw.match(/^D:(\\d{4})(\\d{2})(\\d{2})(\\d{2})(\\d{2})(\\d{2})/);
+            if (!m)
+                return raw;
+            const date = new Date(\`\${m[1]}-\${m[2]}-\${m[3]}T\${m[4]}:\${m[5]}:\${m[6]}\`);
+            return isNaN(date.getTime()) ? raw : date.toLocaleString();
+        };
+        // Get page dimensions from first page and convert points → inches
+        let pageSize = '-';
+        try {
+            const firstPage = await this._pdfDoc.getPage(1);
+            const vp = firstPage.getViewport({ scale: 1.0 });
+            const wIn = (vp.width / 72).toFixed(2);
+            const hIn = (vp.height / 72).toFixed(2);
+            const orientation = vp.width > vp.height ? 'landscape' : 'portrait';
+            pageSize = \`\${wIn} × \${hIn} in (\${orientation})\`;
+        }
+        catch (e) { /* ignore */ }
+        // Grouped sections matching Chrome's layout exactly
+        const sections = [
+            [
+                ['File name:', this._filename],
+                ['File size:', fileSize],
+            ],
+            [
+                ['Title:', info['Title'] || '-'],
+                ['Author:', info['Author'] || '-'],
+                ['Subject:', info['Subject'] || '-'],
+                ['Keywords:', info['Keywords'] || '-'],
+                ['Created:', formatPdfDate(info['CreationDate'] || '')],
+                ['Modified:', formatPdfDate(info['ModDate'] || '')],
+                ['Application:', info['Creator'] || '-'],
+            ],
+            [
+                ['PDF producer:', info['Producer'] || '-'],
+                ['PDF version:', info['PDFFormatVersion'] || '-'],
+                ['Page count:', \`\${this._pdfDoc.numPages}\`],
+                ['Page size:', pageSize],
+            ],
+            [
+                ['Fast web view:', 'No'],
+            ],
+        ];
+        const overlay = document.createElement('div');
+        overlay.style.cssText = \`
+      position: fixed;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0,0,0,0.5);
+      z-index: 2147483649;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    \`;
+        const dialog = document.createElement('div');
+        dialog.style.cssText = \`
+      background: #3c4043;
+      border-radius: 12px;
+      padding: 24px 24px 16px;
+      min-width: 380px;
+      max-width: 500px;
+      color: #e8eaed;
+      font-family: 'Roboto', Arial, sans-serif;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+    \`;
+        const titleEl = document.createElement('h3');
+        titleEl.textContent = 'Document properties';
+        titleEl.style.cssText = 'margin: 0 0 16px; font-size: 18px; font-weight: 500;';
+        dialog.appendChild(titleEl);
+        const addRow = (label, value) => {
+            const row = document.createElement('div');
+            row.style.cssText = 'display: flex; padding: 7px 0; font-size: 13px;';
+            const labelEl = document.createElement('span');
+            labelEl.textContent = label;
+            labelEl.style.cssText = 'min-width: 140px; flex-shrink: 0;';
+            const valueEl = document.createElement('span');
+            valueEl.textContent = value;
+            valueEl.style.wordBreak = 'break-all';
+            row.appendChild(labelEl);
+            row.appendChild(valueEl);
+            dialog.appendChild(row);
+        };
+        const addDivider = () => {
+            const d = document.createElement('div');
+            d.style.cssText = 'height: 1px; background: rgba(255,255,255,0.15); margin: 6px 0;';
+            dialog.appendChild(d);
+        };
+        for (let i = 0; i < sections.length; i++) {
+            for (const [label, value] of sections[i]) {
+                addRow(label, value);
+            }
+            if (i < sections.length - 1) {
+                addDivider();
+            }
+        }
+        const closeBtn = document.createElement('button');
+        closeBtn.textContent = 'Close';
+        closeBtn.style.cssText = \`
+      display: block;
+      margin: 20px 0 0 auto;
+      padding: 10px 28px;
+      background: #8ab4f8;
+      border: none;
+      border-radius: 24px;
+      color: #202124;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      font-family: 'Roboto', Arial, sans-serif;
+    \`;
+        closeBtn.addEventListener('click', () => overlay.remove());
+        dialog.appendChild(closeBtn);
+        overlay.appendChild(dialog);
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay)
+                overlay.remove();
+        });
+        document.body.appendChild(overlay);
+        console.log('[PDF.js] Document properties dialog opened');
+    }
+    /**
+     * Sets up scroll synchronization between the document scroll and the sidebar thumbnail highlight.
+     * Pages are in the document flow so we listen on window, not on _mainContent.
+     */
+    _setupScrollSync() {
+        if (!this._mainContent)
+            return;
+        window.addEventListener('scroll', () => {
+            if (!this._mainContent)
+                return;
+            const pages = this._mainContent.querySelectorAll('[data-page-number]');
+            const toolbarBottom = 56; // toolbar height
+            for (let i = 0; i < pages.length; i++) {
+                const pageElement = pages[i];
+                const rect = pageElement.getBoundingClientRect();
+                if (rect.top <= toolbarBottom + 100 && rect.bottom > toolbarBottom) {
+                    const pageNum = parseInt(pageElement.getAttribute('data-page-number') || '1');
+                    this._updateCurrentPage(pageNum);
+                    break;
+                }
+            }
+        }, { passive: true });
+    }
+    /**
+     * Cleanup resources
+     */
+    cleanup() {
+        if (this._pdfDoc) {
+            this._pdfDoc.destroy();
+            this._pdfDoc = null;
+        }
+        this._closeMoreMenu();
+        this._canvasElements = [];
+        this._thumbnailElements = [];
+        this._toolbar = null;
+        this._sidebar = null;
+        this._mainContent = null;
+        this._currentPage = 1;
+        this._container.innerHTML = '';
+    }
+}
+
+    // =============================================================================
+  // Helper Functions (execution-specific)
+  // =============================================================================
+
+  /**
+   * Fetches a PDF from a URL and converts it to a data URL
+   * Uses fetch() which will be intercepted by route handler during execution
+   */
+  async function fetchPdfAsDataUrl(pdfUrl) {
+    try {
+      console.log('[PW-PDF] Fetching PDF:', pdfUrl.substring(0, 100));
+
+      // During execution, this fetch will be intercepted by Playwright's route handler
+      const response = await fetch(pdfUrl);
+
+      if (!response.ok) {
+        throw new Error(\`HTTP \${response.status}: \${response.statusText}\`);
+      }
+
+      const arrayBuffer = await response.arrayBuffer();
+      const base64 = btoa(
+        new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
+      );
+
+      const dataUrl = \`data:application/pdf;base64,\${base64}\`;
+      console.log('[PW-PDF] ✅ PDF fetched successfully');
+
+      return dataUrl;
+    } catch (error) {
+      console.error('[PW-PDF] ❌ Failed to fetch PDF:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Checks if the current page itself is a PDF document
+   */
+  function isCurrentPagePdf() {
+    const url = window.location.href;
+
+    // Check URL ends with .pdf
+    if (url.toLowerCase().endsWith('.pdf')) {
+      console.log('[PW-PDF] URL ends with .pdf:', url);
+      return true;
+    }
+
+    // Check for PDF plugin embed that takes up the whole page
+    const fullPageEmbed = document.querySelector('embed[type="application/pdf"]');
+    if (fullPageEmbed && document.body.children.length === 1) {
+      console.log('[PW-PDF] Found full-page PDF embed');
+      return true;
+    }
+
+    // Check if URL contains .pdf (including S3 URLs with .pdf)
+    if (url.toLowerCase().includes('.pdf')) {
+      console.log('[PW-PDF] PDF URL detected:', url);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Replaces the entire page with PDF.js viewer when the page itself is a PDF
+   */
+  async function replacePdfPage() {
+    try {
+      // Get PDF URL from current page URL
+      const pdfUrl = window.location.href;
+      console.log('[PW-PDF] Replacing full-page PDF with PDF.js viewer:', pdfUrl.substring(0, 100));
+
+      // Fetch PDF
+      const dataUrl = await fetchPdfAsDataUrl(pdfUrl);
+      if (!dataUrl) {
+        throw new Error('Failed to fetch PDF');
+      }
+
+      // Clear the document body
+      document.body.innerHTML = '';
+
+      // Create container for PDF.js viewer
+      const container = document.createElement('div');
+      container.setAttribute('data-pw-pdf-viewer', 'true');
+      container.id = 'pw-pdf-viewer-container';
+      container.style.cssText = \`
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2147483647;
+        background: #525252;
+      \`;
+
+      document.body.appendChild(container);
+
+      // Extract filename from URL
+      let filename = 'Document.pdf';
+      try {
+        const url = new URL(pdfUrl);
+        const pathname = url.pathname;
+        const lastSlash = pathname.lastIndexOf('/');
+        if (lastSlash !== -1) {
+          filename = pathname.substring(lastSlash + 1);
+          filename = decodeURIComponent(filename);
+        }
+      } catch (e) {
+        console.warn('[PW-PDF] Failed to extract filename from URL:', e);
+      }
+
+      // Create PDF.js viewer
+      const viewer = new PdfJsViewer(container);
+
+      // Render the PDF
+      await viewer.renderPdf({
+        pdfDataUrl: dataUrl,
+        filename,
+        onReady: () => {
+          console.log('[PW-PDF] ✅ Full-page PDF replaced with PDF.js viewer');
+        },
+        onError: (error) => {
+          console.error('[PW-PDF] ❌ Failed to render full-page PDF:', error);
+        }
+      });
+
+      return true;
+    } catch (error) {
+      console.error('[PW-PDF] Error replacing full-page PDF:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Replaces a single PDF embed with PDF.js viewer
+   */
+  async function replacePdfEmbed(embed) {
+    try {
+      // Get PDF URL
+      let pdfUrl = embed.getAttribute('src');
+
+      // If src is about:blank, use the page URL (the page itself is the PDF)
+      if (!pdfUrl || pdfUrl === 'about:blank') {
+        console.log('[PW-PDF] Embed has src="about:blank", using page URL as PDF URL...');
+        pdfUrl = window.location.href;
+
+        // Verify it looks like a PDF URL
+        if (!pdfUrl.includes('.pdf')) {
+          console.log('[PW-PDF] Page URL does not appear to be a PDF, skipping');
+          return false;
+        }
+
+        console.log('[PW-PDF] Using page URL as PDF:', pdfUrl.substring(0, 100));
+      }
+
+      console.log('[PW-PDF] Replacing PDF embed with PDF.js viewer:', pdfUrl.substring(0, 100));
+
+      // Fetch PDF
+      const dataUrl = await fetchPdfAsDataUrl(pdfUrl);
+      if (!dataUrl) {
+        throw new Error('Failed to fetch PDF');
+      }
+
+      // Create container for PDF.js viewer
+      const container = document.createElement('div');
+      container.setAttribute('data-pw-pdf-viewer', 'true');
+      container.style.cssText = \`
+        position: absolute;
+        top: \${embed.offsetTop}px;
+        left: \${embed.offsetLeft}px;
+        width: \${embed.offsetWidth || 800}px;
+        height: \${embed.offsetHeight || 600}px;
+        z-index: 2147483647;
+        background: #525252;
+      \`;
+
+      // Insert container next to embed
+      const parent = embed.parentNode;
+      if (!parent) return false;
+
+      parent.insertBefore(container, embed);
+
+      // Hide original embed
+      embed.style.display = 'none';
+
+      // Extract filename from URL
+      let filename = 'Document.pdf';
+      try {
+        const url = new URL(pdfUrl);
+        const pathname = url.pathname;
+        const lastSlash = pathname.lastIndexOf('/');
+        if (lastSlash !== -1) {
+          filename = pathname.substring(lastSlash + 1);
+          filename = decodeURIComponent(filename);
+        }
+      } catch (e) {
+        console.warn('[PW-PDF] Failed to extract filename from URL:', e);
+      }
+
+      // Create PDF.js viewer
+      const viewer = new PdfJsViewer(container);
+
+      // Render the PDF
+      await viewer.renderPdf({
+        pdfDataUrl: dataUrl,
+        filename,
+        onReady: () => {
+          console.log('[PW-PDF] ✅ PDF embed replaced successfully');
+        },
+        onError: (error) => {
+          console.error('[PW-PDF] ❌ Failed to render PDF:', error);
+          // Restore original embed on error
+          embed.style.display = '';
+          if (container.parentNode) {
+            container.parentNode.removeChild(container);
+          }
+        }
+      });
+
+      return true;
+    } catch (error) {
+      console.error('[PW-PDF] Error replacing PDF embed:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Detects and replaces PDF embeds with PDF.js viewers
+   */
+  async function detectAndReplacePdfs() {
+    console.log('[PW-PDF] Scanning for PDF embeds...');
+
+    // Check if we've already replaced a full-page PDF (prevent infinite loop)
+    if (window.__pwPdfPageReplaced) {
+      console.log('[PW-PDF] PDF page already replaced, skipping detection');
+      return;
+    }
+
+    // Check if the current page itself is a PDF document
+    const isPdfPage = isCurrentPagePdf();
+    if (isPdfPage) {
+      console.log('[PW-PDF] Current page is a PDF document, replacing with PDF.js viewer...');
+      window.__pwPdfPageReplaced = true;
+      await replacePdfPage();
+      return;
+    }
+
+    // Find all embed and iframe elements
+    const embeds = document.querySelectorAll('embed[type="application/pdf"], iframe[src*=".pdf"]');
+
+    if (embeds.length === 0) {
+      console.log('[PW-PDF] No PDF embeds found');
+      return;
+    }
+
+    console.log(\`[PW-PDF] Found \${embeds.length} PDF embed(s)\`);
+
+    for (const embed of embeds) {
+      await replacePdfEmbed(embed);
+    }
+  }
+
+  // =============================================================================
+  // Window.open() Interception (for headless mode)
+  // =============================================================================
+
+  /**
+   * Sets up window.open() interception to detect PDF URLs
+   */
+  function setupPdfPopupInterception() {
+    const originalOpen = window.open;
+    window.open = function(url, target, features) {
+      // Check if URL is a PDF (ends with .pdf or contains PDF indicators)
+      const isPdf = url && url.toLowerCase().includes('.pdf');
+
+      if (isPdf) {
+        console.log('[PW-PDF] Intercepted window.open() to PDF:', url);
+
+        // Let the popup open normally (to about:blank or target URL)
+        const popup = originalOpen.call(this, url, target, features);
+
+        // If popup opened successfully, store PDF URL for it to access
+        if (popup && !popup.closed) {
+          popup.__pw_pdfUrl = url;
+
+          // The popup will detect __pw_pdfUrl and render with PDF.js
+          setTimeout(() => {
+            if (popup.__pw_detectAndReplacePdfs) {
+              popup.__pw_detectAndReplacePdfs();
+            }
+          }, 100);
+        }
+
+        return popup;
+      }
+
+      // Not a PDF, let window.open() work normally
+      return originalOpen.apply(this, arguments);
+    };
+  }
+
+  // =============================================================================
+  // Expose Functions and Classes Globally
+  // =============================================================================
+
+  window.PdfJsViewer = PdfJsViewer;  // Expose class for direct instantiation
+  window.__pw_detectAndReplacePdfs = detectAndReplacePdfs;
+  window.__pw_setupPdfPopupInterception = setupPdfPopupInterception;
+
+  // =============================================================================
+  // Auto-detect PDFs on page load
+  // =============================================================================
+
+  // Auto-detect if current page is a PDF popup that needs rendering
+  if (window.__pw_pdfUrl && !window.__pwPdfRendered) {
+    window.__pwPdfRendered = true;
+
+    // Wait for DOM ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => {
+        window.__pw_detectAndReplacePdfs();
+      });
+    } else {
+      window.__pw_detectAndReplacePdfs();
+    }
+  }
+
+  // Also auto-detect on every page load (for direct navigation to PDFs)
+  // This runs after the page has fully loaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      console.log('[PW-PDF] DOMContentLoaded - checking for PDFs...');
+      window.__pw_detectAndReplacePdfs();
+    });
+  } else if (document.readyState === 'interactive' || document.readyState === 'complete') {
+    // If DOM is already ready, run detection immediately
+    console.log('[PW-PDF] DOM already ready - checking for PDFs...');
+    setTimeout(() => {
+      window.__pw_detectAndReplacePdfs();
+    }, 100); // Small delay to let browser plugin initialize
+  }
+
+
+  console.log('[PW-PDF] PDF viewer injection script loaded');
+})();
+`;
+
+module.exports = { PDF_VIEWER_INJECTION_SCRIPT };