search

mitre-attack / attack-navigator

Web app that provides basic navigation and annotation of ATT&CK matrices
https://mitre-attack.github.io/attack-navigator
Apache License 2.0
2.01k stars 593 forks source link

Firefox screenshot scrolling not working because of .matrices style #508

Closed wasserman closed 1 year ago

wasserman commented 2 years ago

I'm trying to do a scrolling screenshot with Firefox, which generally works. I see you have Excel and SVG exports, but I prefer having the appearance that matches what I see in in the navigator. This is on version v4.6.6 from https://mitre-attack.github.io/attack-navigator/#comment_underline=false.

I noticed that the inner scroller can be removed by removing the style height definition in the html.

It shows up like this:

<div class="matrices" style="height: calc(-114px + 100vh);">

If I change it via the Inspector in Web Dev Tools to this then I can take a Firefox screenshot properly via the Save full page option.

<div class="matrices" style="">

Could some option or setting be added to allow the removal of this scrollbar natively? I don't know the purpose of it, but I assume it is there for a reason.

Thanks!

wasserman commented 2 years ago

Reference for Firefox screenshots: https://support.mozilla.org/en-US/kb/take-screenshots-firefox

clemiller commented 2 years ago

Hi @wasserman,

The height of the matrices is defined to allow the toolbar to remain in place via "sticky" positioning while scrolling to the bottom of the matrix. This was implemented as part of the tabs refactor in #340.

image

This issue looks potentially related to #358, though I'm unsure if it's the toolbar that's causing issues with your screenshots. At some point there was a configuration setting added to remove the scrolling causing issues with full-page screenshots, but it appears it has since been removed. Keeping this issue open to either re-implement the configuration setting or see if we can find a better approach.

wasserman commented 2 years ago

Thanks @clemiller. I honestly only even tried to do the screenshot because the print view was a bit wild. Maybe some custom css for print media would be a better improvement or something else to consider?

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

clemiller commented 1 year ago

Changes for this issue have been staged on develop and will be included in the upcoming Navigator release. This adds both custom css for improved printing views and a button in the toolbar to enable/disable the sticky toolbar. Thank you for your suggestions!