### Problem to solve Because review apps are single-use dynamic environments, it presents the possibility of injecting some code into the application that helps with the review process. During the review app job, one could inject a web component (potentially taking advantage of shadow DOM) into the application, which will not affect the application functionality but provide a simple tool for reviewing and posting back comments to the merge request that automatically collect the URL that was being accessed and take a screenshot. ### Further details Use Cases: 1) Developer/QA manually ADHOC testing the application for visual/presentation issues 2) Compliance needs to document changes with screenshots, they can easily add them to the comments of the MR for an audit trail. ### Proposal <details> <summary>Original details</summary> [manual-review.pdf](/uploads/fd07773cf9e7eb266ec99e0fcd6c4343/manual-review.pdf)   </details> ### In Scope * Take a screenshot of an area of the screen * Add that screenshot and a discussion comment to the Merge Request for this review app ### Nice to haves * [Image annotations](https://gitlab.com/gitlab-org/gitlab-ce/issues/58728) * [Keyboard shortcut for Visual Review Tool](https://gitlab.com/gitlab-org/gitlab-ce/issues/58729) * Keyboard shortcut / button for "capture the visible area  * [Porting the "which pages have changed" widget into the Visual Review Tool](https://gitlab.com/gitlab-org/gitlab-ce/issues/58726) ### Similar Products * [Marker.io](https://marker.io/) who has [support for GitLab issues as a destination](https://www.producthunt.com/posts/marker-io-for-gitlab) * [Teampaper Snap](https://teampaper.me/snap/) * [Usersnap](https://usersnap.com/) * [Tweakr.io](https://www.tweakr.io/demo/1) [__Google products feedback functionality__](https://www.google.com/tools/feedback/intl/en/) Offers functionality through a submenu item, which summons a feedback modal. Includes option to send along a screenshot by default. Allows for area highlighting and censoring, and adds in legal information due to personal information potentially being made more accessible to a wider public (those who review feedback sent). <details> <summary>Google products feedback functionality example</summary> | Deliver feedback modal | After highlighting and obscuring areas | | ------ | ------ | |  |  | </details> <br> [__Project VisBug - FireBug for designers › Makes any webpage feel like an artboard via a little extension__](https://github.com/GoogleChromeLabs/ProjectVisBug) Chrome plugin which makes it easy to play around directly with the visuals of the current page. Not perse feedback sending mechanism, but a good tool to compare with how it would look/be structured otherwise. [__Flawless feedback - macOS tool to leave comments on the iOS app faster. No more making dozens of screenshots__](https://flawlessapp.io/feedback) MacOs tool which makes it possible to leave feedback right within the context of using the mobile app on the desktop. You can make screenshots directly and annotate them. Feedback can then be shared and sent with a simple link to any application. [__Saber - Get quality website feedback from your users__](https://www.saberfeedback.com/) Functionality to receive feedback which can be included into any website due to including a script or as a plugin for known CMS's like WordPress. Supports majority of old and new browsers. The feedback mechanism can be customized to meet customer needs. Also captures the vital information that users may not know, including browser & operating system, browser plugins, and any JavaScript errors that occurred. Feedback sharing options can be integrated with existing tools like slack, Jira, etc. Includes the option to add in questionnaires and screenshots (with highlighting support). Feedback mechanism can be shown to a subset of users depending on data used as input. [__UX Check__](https://chrome.google.com/webstore/detail/ux-check/giekhiebdpmljgchjojblnekkcgpdobp) UX Check makes heuristic evaluations quick and easy. The extension will open up Nielsen's Ten Heuristics in a side pane next to your website. When you click on an element that doesn't comply with a heuristic, you can add notes, and a screenshot will be saved. At the end, you can export everything to a docx so that you can share them with your team. ### Links / references