Screenshot mode is broken

[garrett]

Using the (new to Quantum, aka 57+) screenshot tool from the awesomebar (icon in the URL bar, or in its overflow menu) causes the page to turn completely black, making precise selection of screenshots impossible.

Selecting the screenshot feature

Black background

(In this screenshot, the grey rectangle is the element which the screenshot would be cropped to.)

Correct implementation

The correct implementation has a greyed out background for the out of bounds area and the selected area shows up without a screen. (I'll have to remove the theme and restart Firefox to get a screenshot of the screenshot tool in action.)

[garrett]

Correct: Hover

When the element is hovered, it is still screened, but not as much as the rest of the background:

Correct: Active

When the element is clicked, it looks like this (fully visible, with handles around it to adjust):

[lunakurame]

This is because userContent.css overrides Firefox' default page background color:

*|*:root {
	--in-content-page-background: #2e3436 !important;
}

I haven't added a userContent.css file for the light variant yet (it's a bit more tricky since @import doesn't work due to a bug in Electrolysis: https://bugzilla.mozilla.org/show_bug.cgi?id=1416184), so you might as well just delete that file if you're using the light variant. I see the screenshot tool injects a bunch of iframes into the document and they inherit that page background color too. Also I noticed uBlock's element picker has the same problem.

The fix for uBlock is easy, but not for the screenshot tool. I don't see a way to blacklist a specific extension since its ID changes every update and Firefox doesn't support the :has pseudo-class yet, so all I can do is use this regexp: /^moz-extension://.+/blank.html$/ to exclude the screenshot tool's iframe page and hope it doesn't match other extensions.

Anyway, it should be working now. Thanks for reporting this bug and including all those screenshots.