Add ability to take screenshot in Visual Review Tool - Visible View Port
Problem to solve
With #10761 (closed), we added the ability to start a discussion from the Visual Review tool. This is a valuable addition for product designers and product managers to leave feedback directly in a Merge Request but is limited to describing a problem or forces those users to add a screenshot as an additional comment. This is a poor user experience at best and the comment and screenshot do not get viewed together making the feedback loop longer at worst.
This will bring the Visual Review Tool more in line with the competition in the market we are looking at as related to this feature.
In addition, this issue is part of making ~"Category::Usability Testing"
- Add a "take a screenshot" button to the Visual Review Tool, in this iteration the only option will be "Visible View Port".
- Capture the visible view port
- Add in the
![image](/uploads/hash/image.png)automatically to the comment the user is writing.
Finalized designs for the feature are included in the Designs tab below.
Example from another tool:
Example of copy/paste of an image (as a Mac screenshot copied to the clipboard) today in GitLab:
Permissions and Security
This issue does not impact permissions or security as they will be the same as the previous permissions and security of the Visual Review Tool.
This will require updated documentation, with careful consideration for any known limitations.
@zeffmorgan this issue is one that would benefit from at least some cross-browser testing as I'm guessing the library our team uses will impact compatibility with different browsers. As a note - if we need to disable this functionality in certain unsupportable browsers, I think that is acceptable as long as "most modern browers" support this functionality.
What does success look like, and how can we measure that?
- Track number of screenshots inserted into comments as a new snowplow metric and we want to see at least 25% of visual review comments using this feature.
What is the type of buyer?
The user of the screenshot tool is a pair of ICs who are taking screenshots and commenting (Product designer and/or product manager and then viewing and fixing (engineer). They also realize the value in completing those interactions faster. Since this is built on Visual Reviews which is a
Starter feature this will be a
Starter feature as well.
Links / references
Out of scope will be annotations to those images which will be done in #27228