[Reporting] set viewport to include clip area

Author: tsullivan

x-pack/plugins/reporting/server/browsers/chromium/driver/chromium_driver.ts

@@ -27,7 +27,7 @@ interface WaitForSelectorOpts {
 
 interface EvaluateOpts {
   fn: EvaluateFn;
-  args: SerializableOrJSHandle[];
+  args?: SerializableOrJSHandle[];
 }
 
 interface EvaluateMetaOpts {
@@ -195,18 +195,14 @@ export class HeadlessChromiumDriver {
     }
   }
 
+  // NOTE: dimensions must be given in the base pixels sizes, not pre-scaled by the zoom factor.
   public async setViewport(
     { width, height, zoom }: ViewZoomWidthHeight,
     logger: LevelLogger
   ): Promise<void> {
     logger.debug(`Setting viewport to width: ${width}, height: ${height}, zoom: ${zoom}`);
 
-    await this.page.setViewport({
-      width: Math.floor(width / zoom),
-      height: Math.floor(height / zoom),
-      deviceScaleFactor: zoom,
-      isMobile: false,
-    });
+    await this.page.setViewport({ width, height, deviceScaleFactor: zoom, isMobile: false });
   }
 
   private registerListeners(conditionalHeaders: ConditionalHeaders, logger: LevelLogger) {

x-pack/plugins/reporting/server/browsers/chromium/driver_factory/index.ts

@@ -63,8 +63,11 @@ export class HeadlessChromiumDriverFactory {
     return Rx.Observable.create(async (observer: InnerSubscriber<any, any>) => {
       const logger = pLogger.clone(['browser-driver']);
       logger.info(`Creating browser page driver`);
+      logger.debug(`viewport: ${JSON.stringify(viewport)}`);
+      logger.debug(`viewport: ${browserTimezone}`);
 
       const chromiumArgs = this.getChromiumArgs(viewport);
+      logger.debug(`Chromium launch args set to: ${chromiumArgs}`);
 
       let browser: puppeteer.Browser;
       let page: puppeteer.Page;

x-pack/plugins/reporting/server/lib/screenshots/get_screenshots.ts

@@ -7,10 +7,12 @@
 import { i18n } from '@kbn/i18n';
 import { LevelLogger, startTrace } from '../';
 import { HeadlessChromiumDriver } from '../../browsers';
+import { LayoutInstance } from '../layouts';
 import { ElementsPositionAndAttribute, Screenshot } from './';
 
 export const getScreenshots = async (
   browser: HeadlessChromiumDriver,
+  layout: LayoutInstance,
   elementsPositionAndAttributes: ElementsPositionAndAttribute[],
   logger: LevelLogger
 ): Promise<Screenshot[]> => {
@@ -25,6 +27,37 @@ export const getScreenshots = async (
   for (let i = 0; i < elementsPositionAndAttributes.length; i++) {
     const endTrace = startTrace('get_screenshots', 'read');
     const item = elementsPositionAndAttributes[i];
+
+    // In Puppeteer 5.4+, the viewport size limits what the screenshot can take, even if a clip is specified. The clip area must
+    // be visible in the viewport. This workaround resizes the viewport to the actual content height and width.
+    // NOTE: this will fire a window resize event
+
+    // Check current viewport size
+    const [height, width] = await browser.evaluate(
+      {
+        fn: () => [document.body.clientHeight, document.body.clientWidth],
+      },
+      { context: 'resize for screenshot' },
+      logger
+    );
+
+    logger.debug(`Browser viewport: height: ${height}, width: ${width}`);
+
+    if (
+      height < item.position.boundingClientRect.height + item.position.boundingClientRect.top ||
+      width < item.position.boundingClientRect.width + item.position.boundingClientRect.left
+    ) {
+      // Resize viewport
+      await browser.setViewport(
+        {
+          height: item.position.boundingClientRect.height + item.position.boundingClientRect.top,
+          width: item.position.boundingClientRect.width + item.position.boundingClientRect.left,
+          zoom: layout.getBrowserZoom(),
+        },
+        logger
+      );
+    }
+
     const base64EncodedData = await browser.screenshot(item.position);
 
     screenshots.push({

x-pack/plugins/reporting/server/lib/screenshots/observable.ts

@@ -86,13 +86,9 @@ export function screenshotsObservableFactory(
                 );
               }),
               mergeMap(() => getNumberOfItems(captureConfig, driver, layout, logger)),
-              mergeMap(async (itemsCount) => {
-                const viewport = layout.getViewport(itemsCount) || getDefaultViewPort();
-                await Promise.all([
-                  driver.setViewport(viewport, logger),
-                  waitForVisualizations(captureConfig, driver, itemsCount, layout, logger),
-                ]);
-              }),
+              mergeMap(async (itemsCount) =>
+                waitForVisualizations(captureConfig, driver, itemsCount, layout, logger)
+              ),
               mergeMap(async () => {
                 // Waiting till _after_ elements have rendered before injecting our CSS
                 // allows for them to be displayed properly in many cases
@@ -132,8 +128,9 @@ export function screenshotsObservableFactory(
 
                   const elements = data.elementsPositionAndAttributes
                     ? data.elementsPositionAndAttributes
-                    : getDefaultElementPosition(layout.getViewport(1));
-                  const screenshots = await getScreenshots(driver, elements, logger);
+                    : getDefaultElementPosition(getDefaultViewPort());
+
+                  const screenshots = await getScreenshots(driver, layout, elements, logger);
                   const { timeRange, error: setupError } = data;
                   return {
                     timeRange,