[Reporting] Use the real dimensions when taking a screenshot

src/platform/packages/private/kbn-reporting/public/share/shared/get_png_pdf_job_params.ts

@@ -11,14 +11,19 @@ import type { ReportParamsGetter, ReportParamsGetterOptions } from '../../types'
 import type { JobParamsProviderOptions } from '../share_context_menu';
 
 const getBaseParams = (objectType: string) => {
+  const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+
   const el = document.querySelector('[data-shared-items-container]');
   const { height, width } = el ? el.getBoundingClientRect() : { height: 768, width: 1024 };
-  const dimensions = { height, width };
+
   return {
     objectType,
     layout: {
       id: 'preserve_layout' as 'preserve_layout' | 'print',
-      dimensions,
+      dimensions: {
+        height,
+        width: viewportWidth || width,
+      },
     },
   };
 };

x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/driver.test.ts

@@ -58,6 +58,10 @@ describe('chromium driver', () => {
     };
   });
 
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('return screenshot with preserve layout option', async () => {
     const driver = new HeadlessChromiumDriver(
       mockScreenshotModeSetup,
@@ -105,4 +109,28 @@ describe('chromium driver', () => {
     `);
     expect(result).toEqual(Buffer.from(`you won't believe this one weird screenshot`, 'base64'));
   });
+
+  it('sets the PDF image size', async () => {
+    const driver = new HeadlessChromiumDriver(
+      mockScreenshotModeSetup,
+      mockConfig,
+      mockBasePath,
+      mockPage
+    );
+
+    const layout = new PreserveLayout({} as Size);
+
+    const testSpy = jest.spyOn(layout, 'setPdfImageSize');
+
+    await driver.screenshot({
+      elementPosition: {
+        boundingClientRect: { top: 200, left: 10, height: 10, width: 100 },
+        scroll: { x: 100, y: 300 },
+      },
+      layout,
+    });
+
+    expect(testSpy).toHaveBeenCalledTimes(1);
+    expect(testSpy).toHaveBeenCalledWith({ height: 10, width: 100 });
+  });
 });

x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/driver.ts

@@ -271,6 +271,11 @@ export class HeadlessChromiumDriver {
 
     const { boundingClientRect, scroll } = elementPosition;
 
+    layout.setPdfImageSize({
+      height: boundingClientRect.height,
+      width: boundingClientRect.width,
+    });
+
     const screenshot = await this.page.screenshot({
       clip: {
         x: boundingClientRect.left + scroll.x,

x-pack/platform/plugins/shared/screenshotting/server/formats/pdf/pdf_maker/integration_tests/pdfmaker.test.ts

@@ -28,6 +28,7 @@ describe('PdfMaker', () => {
 
   beforeEach(() => {
     layout = createMockLayout();
+    layout.setPdfImageSize({ height: 100, width: 100 });
     logger = loggingSystemMock.createLogger();
     packageInfo = {
       branch: 'screenshot-test',

x-pack/platform/plugins/shared/screenshotting/server/layouts/base_layout.ts

@@ -16,7 +16,7 @@ export interface ViewZoomWidthHeight {
 
 export interface PdfImageSize {
   width: number;
-  height?: number;
+  height: number;
 }
 
 export interface PageSizeParams {
@@ -40,6 +40,7 @@ export abstract class BaseLayout {
   }
 
   public abstract getPdfImageSize(): PdfImageSize;
+  public abstract setPdfImageSize({ height, width }: PdfImageSize): void;
 
   public abstract getPdfPageOrientation(): 'portrait' | 'landscape' | undefined;
 

x-pack/platform/plugins/shared/screenshotting/server/layouts/canvas_layout.ts

@@ -8,6 +8,7 @@
 import type { LayoutSelectorDictionary, Size } from '../../common/layout';
 import { DEFAULT_SELECTORS } from '.';
 import type { Layout } from '.';
+import type { PdfImageSize } from './base_layout';
 import { BaseLayout } from './base_layout';
 
 // FIXME - should use zoom from capture config
@@ -25,6 +26,7 @@ export class CanvasLayout extends BaseLayout implements Layout {
   public readonly width: number;
   private readonly scaledHeight: number;
   private readonly scaledWidth: number;
+  private imageSize: PdfImageSize = { height: 0, width: 0 };
 
   public hasHeader: boolean = false;
   public hasFooter: boolean = false;
@@ -65,11 +67,12 @@ export class CanvasLayout extends BaseLayout implements Layout {
     };
   }
 
+  public setPdfImageSize({ height, width }: PdfImageSize): void {
+    this.imageSize = { height, width };
+  }
+
   public getPdfImageSize() {
-    return {
-      height: this.height,
-      width: this.width,
-    };
+    return this.imageSize;
   }
 
   public getPdfPageSize(): Size {

x-pack/platform/plugins/shared/screenshotting/server/layouts/create_layout.test.ts

@@ -21,6 +21,10 @@ describe('Create Layout', () => {
         "hasHeader": true,
         "height": 16,
         "id": "preserve_layout",
+        "imageSize": Object {
+          "height": 0,
+          "width": 0,
+        },
         "scaledHeight": 32,
         "scaledWidth": 32,
         "selectors": Object {
@@ -78,6 +82,10 @@ describe('Create Layout', () => {
         "hasHeader": false,
         "height": 18,
         "id": "canvas",
+        "imageSize": Object {
+          "height": 0,
+          "width": 0,
+        },
         "scaledHeight": 36,
         "scaledWidth": 36,
         "selectors": Object {

x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.test.ts

@@ -10,6 +10,8 @@ import { PreserveLayout } from './preserve_layout';
 it('preserve layout uses default layout selectors', () => {
   const testPreserveLayout = new PreserveLayout({ width: 16, height: 16 });
 
+  testPreserveLayout.setPdfImageSize({ height: 16, width: 16 });
+
   expect(testPreserveLayout.getCssOverridesPath()).toMatch(`layouts/preserve_layout.css`);
   expect(testPreserveLayout.getBrowserViewport()).toMatchObject({ height: 32, width: 32 });
   expect(testPreserveLayout.getBrowserZoom()).toBe(2);

x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.ts

@@ -10,7 +10,7 @@ import type { LayoutSelectorDictionary, Size } from '../../common/layout';
 import { DEFAULT_SELECTORS } from '.';
 import type { Layout } from '.';
 import { BaseLayout } from './base_layout';
-import type { PageSizeParams } from './base_layout';
+import type { PageSizeParams, PdfImageSize } from './base_layout';
 
 // We use a zoom of two to bump up the resolution of the screenshot a bit.
 const ZOOM: number = 2;
@@ -21,6 +21,7 @@ export class PreserveLayout extends BaseLayout implements Layout {
   public readonly width: number;
   private readonly scaledHeight: number;
   private readonly scaledWidth: number;
+  private imageSize: PdfImageSize = { height: 0, width: 0 };
 
   constructor(size: Size, selectors?: Partial<LayoutSelectorDictionary>) {
     super('preserve_layout');
@@ -56,11 +57,12 @@ export class PreserveLayout extends BaseLayout implements Layout {
     };
   }
 
+  public setPdfImageSize({ height, width }: PdfImageSize): void {
+    this.imageSize = { height, width };
+  }
+
   public getPdfImageSize() {
-    return {
-      height: this.height,
-      width: this.width,
-    };
+    return this.imageSize;
   }
 
   public getPdfPageOrientation() {
@@ -70,13 +72,16 @@ export class PreserveLayout extends BaseLayout implements Layout {
   public getPdfPageSize(pageSizeParams: PageSizeParams): CustomPageSize {
     return {
       height:
-        this.height +
+        this.imageSize.height +
         pageSizeParams.pageMarginTop +
         pageSizeParams.pageMarginBottom +
         pageSizeParams.tableBorderWidth * 2 +
         pageSizeParams.headingHeight +
         pageSizeParams.subheadingHeight,
-      width: this.width + pageSizeParams.pageMarginWidth * 2 + pageSizeParams.tableBorderWidth * 2,
+      width:
+        this.imageSize.width +
+        pageSizeParams.pageMarginWidth * 2 +
+        pageSizeParams.tableBorderWidth * 2,
     };
   }
 }

x-pack/platform/plugins/shared/screenshotting/server/layouts/print_layout.ts

@@ -10,6 +10,7 @@ import type { Layout } from '.';
 import { DEFAULT_SELECTORS } from '.';
 import type { LayoutParams, LayoutSelectorDictionary } from '../../common/layout';
 import { DEFAULT_VIEWPORT } from '../browsers';
+import type { PdfImageSize } from './base_layout';
 import { BaseLayout } from './base_layout';
 
 export const getPrintLayoutSelectors: () => LayoutSelectorDictionary = () => ({
@@ -51,9 +52,12 @@ export class PrintLayout extends BaseLayout implements Layout {
   public getPdfImageSize() {
     return {
       width: 500,
-    };
+    } as PdfImageSize;
   }
 
+  // Image size is not used in print layout
+  setPdfImageSize({ height, width }: PdfImageSize): void {}
+
   public getPdfPageOrientation(): PageOrientation {
     return 'portrait';
   }