-
Notifications
You must be signed in to change notification settings - Fork 8.5k
[Reporting] set viewport to include clip area #87253
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
Conversation
fb267b1 to
a45e22c
Compare
54d8b7c to
c418bad
Compare
|
@elasticmachine merge upstream |
streamich
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code changes LGTM.
|
@elasticmachine merge upstream |
poffdeluxe
left a comment
There was a problem hiding this 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], |
There was a problem hiding this comment.
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.
|
@elasticmachine merge upstream |
💚 Build SucceededMetrics [docs]Distributable file count
History
To update your PR or re-run it, just comment with: |
* [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 <[email protected]>
* [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 <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
* [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 <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
Summary
Closes #85864
Problem: In the new version of puppeteer that we have upgraded to for 7.11, the
page.screenshotfunction works differently withclipoptions.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
clipoptions 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
getScreenshotsresizes the viewport after determining the capture item(s) position and before callingbrowser.screenshot().tracemethod 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.getViewportmethods of the layout type instances to return the width and height without scaling. This stops the pointless flow of multiplying the numbers ingetViewportand then dividing the same numbers insetViewport.setViewportcall from thescreenshotsObservablefunction, as it is now called ingetScreenshotsdebugtotraceChecklist
Delete any items that are not applicable to this PR.
For maintainers