[Reporting] Fixes a sharpness issue in some charts in PDF reports (#147854)

## Summary

Fixes the bug that pdf reports can be generated with blurry text, for
example:

![Screenshot 2022-12-21 at 11 22
52](https://user-images.githubusercontent.com/7784120/208882394-2dff0abb-923e-4430-a322-4e03f8c38792.png)


Fixed version example: 

![Screenshot 2022-12-21 at 11 23
06](https://user-images.githubusercontent.com/7784120/208882431-080d6fb6-39f1-49a8-a791-286fb3e8e6f0.png)


The bug happened because the device pixel ration was changing
mid-capture. The the page was opened with scaleFactor=1. Before the
screenshot is captured, the viewport is resized to scaleFactor=2. This
could cause issues with `<canvas>` based charts as most of them don't
redraw on devicePixelRatio changes (this has to be fixed separately).
This fix attempts to open the page with the final scaleFactor (which in
the most cases is 2)


### Release Notes

Fixes a sharpness issue in some charts in PDF reports

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -36,7 +36,7 @@ import { getMetrics, PerformanceMetrics } from './metrics';
 
 interface CreatePageOptions {
   browserTimezone?: string;
-  defaultViewport: { width?: number };
+  defaultViewport: { width?: number; deviceScaleFactor?: number };
   openUrlTimeout: number;
 }
 
@@ -145,6 +145,7 @@ export class HeadlessChromiumDriverFactory {
       const viewport = {
         ...DEFAULT_VIEWPORT,
         width: defaultViewport.width ?? DEFAULT_VIEWPORT.width,
+        deviceScaleFactor: defaultViewport.deviceScaleFactor ?? DEFAULT_VIEWPORT.deviceScaleFactor,
       };
 
       logger.debug(

x-pack/plugins/screenshotting/server/screenshots/index.test.ts

@@ -191,6 +191,24 @@ describe('Screenshot Observable Pipeline', () => {
       expect(result).toHaveProperty('results');
       expect(result.results).toMatchSnapshot();
     });
+
+    it("initial page is create with layout's width and deviceScaleFactor", async () => {
+      const result = await lastValueFrom(
+        screenshots.getScreenshots(options as PngScreenshotOptions)
+      );
+
+      expect(driverFactory.createPage).toBeCalledWith(
+        expect.objectContaining({
+          defaultViewport: {
+            width: layout.width,
+            deviceScaleFactor: layout.getBrowserZoom(),
+          },
+        }), // config with layout
+        expect.anything() // logger
+      );
+
+      expect(result).toHaveProperty('results');
+    });
   });
 
   describe('cloud', () => {

x-pack/plugins/screenshotting/server/screenshots/index.ts

@@ -120,7 +120,7 @@ export class Screenshots {
         {
           browserTimezone,
           openUrlTimeout: durationToNumber(this.config.capture.timeouts.openUrl),
-          defaultViewport: { width: layout.width },
+          defaultViewport: { width: layout.width, deviceScaleFactor: layout.getBrowserZoom() },
         },
         this.logger
       )