Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Reporting] set viewport to include clip area #87253

Merged
merged 26 commits into from
Jan 6, 2021

Conversation

tsullivan
Copy link
Member

@tsullivan tsullivan commented Jan 4, 2021

Summary

Closes #85864

Problem: In the new version of puppeteer that we have upgraded to for 7.11, the page.screenshot function works differently with clip options.

Previously, the viewport of the headless browser only needed to be resized to the dimensions of the items to capture, and it didn't matter if that item was displayed fully in the viewport or not: the item image could be captured regardless because the clip options controlled the rectangle locating the visualization.

Now, the image will not be fully captured unless it is entirely in the viewport.

This PR attempts to solve the issue by resizing the browser right after calculating the clip position of the element to capture.

Full changes

  • getScreenshots resizes the viewport after determining the capture item(s) position and before calling browser.screenshot()
  • Added a .trace method to the Reporting logger class. The new debug log lines added in this PR are very useful and get lost in the swarm of request logging from the browser process.
  • Changed the getViewport methods of the layout type instances to return the width and height without scaling. This stops the pointless flow of multiplying the numbers in getViewport and then dividing the same numbers in setViewport.
  • Removed the setViewport call from the screenshotsObservable function, as it is now called in getScreenshots
  • Added debug logging about the size and position of the elements being captured.
  • Added debug logging of the Chromium startup args
  • Lowered the log level of the requests from the browser process to from debug to trace

Checklist

Delete any items that are not applicable to this PR.

For maintainers

@tsullivan tsullivan added the Feature:Reporting Reporting (PDF, CSV, ..) feature label Jan 4, 2021
@tsullivan tsullivan force-pushed the fix/reporting-viewport-regression branch from fb267b1 to a45e22c Compare January 4, 2021 23:22
@tsullivan tsullivan force-pushed the fix/reporting-viewport-regression branch from 54d8b7c to c418bad Compare January 4, 2021 23:47
@tsullivan
Copy link
Member Author

@elasticmachine merge upstream

@tsullivan tsullivan added v8.0.0 release_note:skip Skip the PR/issue when compiling release notes labels Jan 6, 2021
@tsullivan tsullivan marked this pull request as ready for review January 6, 2021 05:38
@tsullivan tsullivan requested a review from a team as a code owner January 6, 2021 05:38
Copy link
Contributor

@streamich streamich left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code changes LGTM.

@tsullivan
Copy link
Member Author

@elasticmachine merge upstream

@bhavyarm bhavyarm added blocker and removed blocker labels Jan 6, 2021
Copy link
Contributor

@poffdeluxe poffdeluxe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look good to me!

const [viewWidth, viewHeight] = await browser.evaluate(
{
fn: () => [document.body.clientHeight, document.body.clientWidth],
fn: () => [document.body.clientWidth, document.body.clientHeight],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sometimes it's hard to visually check that we assign height values to height values, and width values to width values. I use a plugin to highlight different strings different colors to give it a color pattern check, and that's what I did here to see that there was a bug.

@tsullivan
Copy link
Member Author

@elasticmachine merge upstream

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Distributable file count

id before after diff
default 47260 48023 +763

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@tsullivan tsullivan merged commit 5d13535 into elastic:master Jan 6, 2021
tsullivan added a commit to tsullivan/kibana that referenced this pull request Jan 6, 2021
* [Reporting] set viewport to include clip area

* remove getViewport

* fix tests

* simpler

* fix 1

* revert

* hacks

* scope the logging variables

* polish

* hacky fix

* quieter logging

* make less hacky

* fix functional test

* revert lowering log level of browser console messages

* revise comments

* setViewport only to happen once

* fix snapshot of layout type tests

* fix comment text

* Revert "setViewport only to happen once"

This reverts commit 15977f9.

* fix disgusting bug

* use x/y ordering for width/height

* fix fn test snapshots

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
tsullivan added a commit that referenced this pull request Jan 7, 2021
* [Reporting] set viewport to include clip area

* remove getViewport

* fix tests

* simpler

* fix 1

* revert

* hacks

* scope the logging variables

* polish

* hacky fix

* quieter logging

* make less hacky

* fix functional test

* revert lowering log level of browser console messages

* revise comments

* setViewport only to happen once

* fix snapshot of layout type tests

* fix comment text

* Revert "setViewport only to happen once"

This reverts commit 15977f9.

* fix disgusting bug

* use x/y ordering for width/height

* fix fn test snapshots

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

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
tsullivan added a commit that referenced this pull request Jan 7, 2021
* [Reporting] set viewport to include clip area

* remove getViewport

* fix tests

* simpler

* fix 1

* revert

* hacks

* scope the logging variables

* polish

* hacky fix

* quieter logging

* make less hacky

* fix functional test

* revert lowering log level of browser console messages

* revise comments

* setViewport only to happen once

* fix snapshot of layout type tests

* fix comment text

* Revert "setViewport only to happen once"

This reverts commit 15977f9.

* fix disgusting bug

* use x/y ordering for width/height

* fix fn test snapshots

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

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
@tsullivan tsullivan deleted the fix/reporting-viewport-regression branch April 21, 2021 04:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blocker Feature:Reporting Reporting (PDF, CSV, ..) feature release_note:skip Skip the PR/issue when compiling release notes v7.11.0 v7.12.0 v7.13.0 v7.14.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Generating PDF for Canvas workpads leaves a white space
5 participants