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

# Backport

This will backport the following commits from `main` to `8.6`:
- [[Reporting] Fixes a sharpness issue in some charts in PDF reports
(#147854)](https://github.com/elastic/kibana/pull/147854)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Anton
Dosov","email":"anton.dosov@elastic.co"},"sourceCommit":{"committedDate":"2022-12-21T11:30:15Z","message":"[Reporting]
Fixes a sharpness issue in some charts in PDF reports (#147854)\n\n##
Summary\r\n\r\nFixes the bug that pdf reports can be generated with
blurry text, for\r\nexample:\r\n\r\n![Screenshot 2022-12-21 at 11
22\r\n52](https://user-images.githubusercontent.com/7784120/208882394-2dff0abb-923e-4430-a322-4e03f8c38792.png)\r\n\r\n\r\nFixed
version example: \r\n\r\n![Screenshot 2022-12-21 at 11
23\r\n06](https://user-images.githubusercontent.com/7784120/208882431-080d6fb6-39f1-49a8-a791-286fb3e8e6f0.png)\r\n\r\n\r\nThe
bug happened because the device pixel ration was
changing\r\nmid-capture. The the page was opened with scaleFactor=1.
Before the\r\nscreenshot is captured, the viewport is resized to
scaleFactor=2. This\r\ncould cause issues with `<canvas>` based charts
as most of them don't\r\nredraw on devicePixelRatio changes (this has to
be fixed separately).\r\nThis fix attempts to open the page with the
final scaleFactor (which in\r\nthe most cases is 2)\r\n\r\n\r\n###
Release Notes\r\n\r\nFixes a sharpness issue in some charts in PDF
reports\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"56519fa4af98fa4d560b9286d9dd834647b6ebfb","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Feature:Reporting","Team:Global
Experience","backport:prev-minor","v8.7.0"],"number":147854,"url":"https://github.com/elastic/kibana/pull/147854","mergeCommit":{"message":"[Reporting]
Fixes a sharpness issue in some charts in PDF reports (#147854)\n\n##
Summary\r\n\r\nFixes the bug that pdf reports can be generated with
blurry text, for\r\nexample:\r\n\r\n![Screenshot 2022-12-21 at 11
22\r\n52](https://user-images.githubusercontent.com/7784120/208882394-2dff0abb-923e-4430-a322-4e03f8c38792.png)\r\n\r\n\r\nFixed
version example: \r\n\r\n![Screenshot 2022-12-21 at 11
23\r\n06](https://user-images.githubusercontent.com/7784120/208882431-080d6fb6-39f1-49a8-a791-286fb3e8e6f0.png)\r\n\r\n\r\nThe
bug happened because the device pixel ration was
changing\r\nmid-capture. The the page was opened with scaleFactor=1.
Before the\r\nscreenshot is captured, the viewport is resized to
scaleFactor=2. This\r\ncould cause issues with `<canvas>` based charts
as most of them don't\r\nredraw on devicePixelRatio changes (this has to
be fixed separately).\r\nThis fix attempts to open the page with the
final scaleFactor (which in\r\nthe most cases is 2)\r\n\r\n\r\n###
Release Notes\r\n\r\nFixes a sharpness issue in some charts in PDF
reports\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"56519fa4af98fa4d560b9286d9dd834647b6ebfb"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/147854","number":147854,"mergeCommit":{"message":"[Reporting]
Fixes a sharpness issue in some charts in PDF reports (#147854)\n\n##
Summary\r\n\r\nFixes the bug that pdf reports can be generated with
blurry text, for\r\nexample:\r\n\r\n![Screenshot 2022-12-21 at 11
22\r\n52](https://user-images.githubusercontent.com/7784120/208882394-2dff0abb-923e-4430-a322-4e03f8c38792.png)\r\n\r\n\r\nFixed
version example: \r\n\r\n![Screenshot 2022-12-21 at 11
23\r\n06](https://user-images.githubusercontent.com/7784120/208882431-080d6fb6-39f1-49a8-a791-286fb3e8e6f0.png)\r\n\r\n\r\nThe
bug happened because the device pixel ration was
changing\r\nmid-capture. The the page was opened with scaleFactor=1.
Before the\r\nscreenshot is captured, the viewport is resized to
scaleFactor=2. This\r\ncould cause issues with `<canvas>` based charts
as most of them don't\r\nredraw on devicePixelRatio changes (this has to
be fixed separately).\r\nThis fix attempts to open the page with the
final scaleFactor (which in\r\nthe most cases is 2)\r\n\r\n\r\n###
Release Notes\r\n\r\nFixes a sharpness issue in some charts in PDF
reports\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"56519fa4af98fa4d560b9286d9dd834647b6ebfb"}}]}]
BACKPORT-->

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>

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
       )