1391439 - Add ability to capture and attach a screenshot through the Bugzilla UI

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: Bug Creation/Editing, enhancement)

Description

[Eric Shepherd [:sheppy]]

The technology now exists to allow a site to trigger a request to capture screen contents. We should support using this to do screenshots and immediately attach them to the bug, so that this becomes a one-step process.

Comment 1

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Are there APIs available that we can use to trigger a screenshot of another tab/window while editing a bug? What browsers are supported for this?

Comment 2

[Kohei Yoshino]

The relevant API is this: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices

Not sure if it’s possible to take a screenshot of other tab. Even if the answer is yes, not sure people are comfortable with it for obvious security reasons. My idea from BzDeck [1] is to resurrect the Bugzilla sidebar removed years ago (Bug 589860) as a Firefox extension and include screen capturing functionality in it.

[1] https://github.com/bzdeck/bzdeck/issues/35

Comment 3

[Eric Shepherd [:sheppy]]

@Kohei -- So, this API requires user consent before it will capture anything.

The specific API method for this is getDisplayMedia(): https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

All you do is use the window value for the constraints object's video.displaySurface property, and the user will be prompted to pick a window. The frontmost tab would then be captured. Since you're reporting a bug by clicking a UI element on the page you're reporting a bug on, this is adequate.

Comment 4

[Kohei Yoshino]

Attachment: GitHub Pull Request

Thanks! I’ve tried, and it works!

Unlike Chrome, Firefox only allows to capture the current tab (= Bugzilla’s Create Attachment page) at this time, so the user has to open a new window though.

Comment 6

[Kohei Yoshino]

Merged to master.